refactor(Core): optimize admin panel and refactor

admin/css/admin.css

@@ -385,3 +385,383 @@
 #sodino-app .wp-list-table .column-title {
     font-weight: 600;
 }
+
+#sodino-app .sodino-form-notice {
+    border-radius: 8px;
+    margin-bottom: 20px;
+    padding: 16px 18px;
+    border: 1px solid;
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+#sodino-app .sodino-form-notice strong {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 0.95rem;
+}
+
+#sodino-app .sodino-form-notice p {
+    margin: 0;
+    font-size: 0.92rem;
+}
+
+#sodino-app .sodino-form-notice-error {
+    background: #fff1f2;
+    border-color: #fecdd3;
+    color: #9f1239;
+}
+
+#sodino-app .sodino-form-notice-success {
+    background: #ecfdf3;
+    border-color: #bbf7d0;
+    color: #166534;
+}
+
+/* Local utility layer for the Sodino admin. This replaces the previous Tailwind CDN dependency. */
+#sodino-app {
+    min-height: 100vh;
+    padding: 28px 18px 48px;
+    background: #f4f7fb;
+    color: #172033;
+    font-family: Tahoma, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+#sodino-app *,
+#sodino-app *::before,
+#sodino-app *::after {
+    box-sizing: border-box;
+}
+
+#sodino-app h1,
+#sodino-app h2,
+#sodino-app h3,
+#sodino-app h4,
+#sodino-app p {
+    margin-top: 0;
+    letter-spacing: 0;
+}
+
+#sodino-app a {
+    text-decoration: none;
+}
+
+#sodino-app input,
+#sodino-app select,
+#sodino-app textarea,
+#sodino-app button {
+    font: inherit;
+}
+
+#sodino-app .min-h-screen { min-height: 100vh; }
+#sodino-app .max-w-7xl { max-width: 1280px; }
+#sodino-app .mx-auto { margin-left: auto; margin-right: auto; }
+#sodino-app .min-w-0 { min-width: 0; }
+#sodino-app .min-w-full { min-width: 100%; }
+#sodino-app .w-full { width: 100%; }
+#sodino-app .w-64 { width: 16rem; }
+#sodino-app .w-4 { width: 1rem; }
+#sodino-app .w-5 { width: 1.25rem; }
+#sodino-app .h-4 { height: 1rem; }
+#sodino-app .h-5 { height: 1.25rem; }
+#sodino-app .h-64 { height: 16rem; }
+#sodino-app .h-full { height: 100%; }
+#sodino-app .block { display: block; }
+#sodino-app .hidden { display: none; }
+#sodino-app .inline-flex { display: inline-flex; }
+#sodino-app .flex { display: flex; }
+#sodino-app .grid { display: grid; }
+#sodino-app .flex-1 { flex: 1 1 0%; }
+#sodino-app .flex-col { flex-direction: column; }
+#sodino-app .flex-shrink-0 { flex-shrink: 0; }
+#sodino-app .items-center { align-items: center; }
+#sodino-app .justify-between { justify-content: space-between; }
+#sodino-app .justify-center { justify-content: center; }
+#sodino-app .justify-end { justify-content: flex-end; }
+#sodino-app .gap-2 { gap: 0.5rem; }
+#sodino-app .gap-3 { gap: 0.75rem; }
+#sodino-app .gap-4 { gap: 1rem; }
+#sodino-app .gap-6 { gap: 1.5rem; }
+#sodino-app .gap-8 { gap: 2rem; }
+#sodino-app .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+#sodino-app .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+#sodino-app .relative { position: relative; }
+#sodino-app .absolute { position: absolute; }
+#sodino-app .z-10 { z-index: 10; }
+#sodino-app .overflow-hidden { overflow: hidden; }
+#sodino-app .overflow-x-auto { overflow-x: auto; }
+#sodino-app .cursor-pointer { cursor: pointer; }
+
+#sodino-app .p-4 { padding: 1rem; }
+#sodino-app .p-5 { padding: 1.25rem; }
+#sodino-app .p-6 { padding: 1.5rem; }
+#sodino-app .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+#sodino-app .px-4 { padding-left: 1rem; padding-right: 1rem; }
+#sodino-app .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
+#sodino-app .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+#sodino-app .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+#sodino-app .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+#sodino-app .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+#sodino-app .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+#sodino-app .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+#sodino-app .pb-6 { padding-bottom: 1.5rem; }
+#sodino-app .pt-6 { padding-top: 1.5rem; }
+#sodino-app .mt-1 { margin-top: 0.25rem; }
+#sodino-app .mt-2 { margin-top: 0.5rem; }
+#sodino-app .mt-8 { margin-top: 2rem; }
+#sodino-app .mb-2 { margin-bottom: 0.5rem; }
+#sodino-app .mb-4 { margin-bottom: 1rem; }
+#sodino-app .mb-6 { margin-bottom: 1.5rem; }
+#sodino-app .mb-8 { margin-bottom: 2rem; }
+#sodino-app .mr-2 { margin-right: 0.5rem; }
+#sodino-app .-ml-1 { margin-left: -0.25rem; }
+#sodino-app .space-y-2 > * + * { margin-top: 0.5rem; }
+#sodino-app .space-y-3 > * + * { margin-top: 0.75rem; }
+#sodino-app .space-y-4 > * + * { margin-top: 1rem; }
+#sodino-app .space-y-6 > * + * { margin-top: 1.5rem; }
+#sodino-app .space-y-8 > * + * { margin-top: 2rem; }
+
+#sodino-app .rounded { border-radius: 4px; }
+#sodino-app .rounded-md,
+#sodino-app .rounded-lg,
+#sodino-app .rounded-xl,
+#sodino-app .rounded-2xl,
+#sodino-app .sd-sidebar,
+#sodino-app .sd-card,
+#sodino-app .sd-chart-card {
+    border-radius: 8px !important;
+}
+#sodino-app .rounded-full { border-radius: 9999px; }
+
+#sodino-app .border { border: 1px solid #d8e0ea; }
+#sodino-app .border-b { border-bottom: 1px solid #d8e0ea; }
+#sodino-app .border-t { border-top: 1px solid #d8e0ea; }
+#sodino-app .border-r-2 { border-right: 2px solid currentColor; }
+#sodino-app .border-transparent { border-color: transparent; }
+#sodino-app .border-gray-200 { border-color: #d8e0ea; }
+#sodino-app .border-gray-300 { border-color: #c7d2df; }
+#sodino-app .border-blue-700 { border-color: #1769aa; }
+#sodino-app .divide-y > * + * { border-top: 1px solid #d8e0ea; }
+#sodino-app .divide-gray-200 > * + * { border-color: #d8e0ea; }
+
+#sodino-app .bg-white {
+    background: #ffffff;
+}
+#sodino-app .bg-gray-50 {
+    background: #f6f8fb !important;
+}
+#sodino-app .bg-gray-100 {
+    background: #eef3f8;
+}
+#sodino-app .bg-gray-300 {
+    background: #c7d2df;
+}
+#sodino-app .bg-blue-50 {
+    background: #e8f3fb;
+}
+#sodino-app .bg-blue-600,
+#sodino-app .from-blue-600 {
+    background: #1769aa;
+}
+#sodino-app .to-blue-700 {
+    background: #115487;
+}
+#sodino-app .bg-gradient-to-br {
+    background: linear-gradient(135deg, #1769aa, #115487);
+}
+#sodino-app .bg-green-50 {
+    background: #e9f8ef;
+}
+#sodino-app .bg-yellow-50 {
+    background: #fff7df;
+}
+
+#sodino-app .text-xs { font-size: 0.75rem; line-height: 1rem; }
+#sodino-app .text-sm { font-size: 0.875rem; line-height: 1.5; }
+#sodino-app .text-lg { font-size: 1.125rem; line-height: 1.6; }
+#sodino-app .text-xl { font-size: 1.25rem; line-height: 1.5; }
+#sodino-app .text-2xl { font-size: 1.5rem; line-height: 1.35; }
+#sodino-app .text-3xl { font-size: 1.875rem; line-height: 1.25; }
+#sodino-app .font-medium { font-weight: 500; }
+#sodino-app .font-semibold { font-weight: 600; }
+#sodino-app .font-bold { font-weight: 700; }
+#sodino-app .text-right { text-align: right; }
+#sodino-app .text-white { color: #ffffff; }
+#sodino-app .text-gray-500 { color: #64748b !important; }
+#sodino-app .text-gray-600 { color: #475569 !important; }
+#sodino-app .text-gray-700 { color: #334155 !important; }
+#sodino-app .text-gray-900 { color: #172033 !important; }
+#sodino-app .text-blue-600 { color: #1769aa; }
+#sodino-app .text-blue-700 { color: #115487; }
+#sodino-app .text-green-600 { color: #198754; }
+#sodino-app .text-green-700 { color: #146c43; }
+#sodino-app .text-red-500 { color: #dc3545; }
+#sodino-app .text-red-600 { color: #c82333; }
+#sodino-app .text-yellow-700 { color: #946200; }
+#sodino-app .opacity-90 { opacity: 0.9; }
+
+#sodino-app .shadow-sm,
+#sodino-app .shadow-lg,
+#sodino-app .bg-white.rounded-lg.shadow-sm.border,
+#sodino-app .bg-white.rounded-2xl.border {
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
+}
+
+#sodino-app .transition-colors {
+    transition-property: color, background-color, border-color, box-shadow, transform;
+}
+#sodino-app .duration-200 {
+    transition-duration: 160ms;
+}
+#sodino-app .hover\:bg-gray-50:hover {
+    background: #eef3f8;
+}
+#sodino-app .hover\:bg-blue-700:hover {
+    background: #115487;
+}
+#sodino-app .hover\:text-gray-900:hover {
+    color: #172033;
+}
+#sodino-app .hover\:border-blue-300:hover {
+    border-color: #7db8df;
+}
+#sodino-app .focus\:outline-none:focus {
+    outline: none;
+}
+#sodino-app .focus\:border-blue-500:focus {
+    border-color: #2488d1;
+}
+#sodino-app .focus\:ring-2:focus {
+    box-shadow: 0 0 0 3px rgba(36, 136, 209, 0.18);
+}
+#sodino-app .focus\:ring-blue-100:focus,
+#sodino-app .focus\:ring-blue-500:focus {
+    box-shadow: 0 0 0 3px rgba(36, 136, 209, 0.18);
+}
+#sodino-app .focus\:ring-offset-2:focus {
+    outline-offset: 2px;
+}
+
+#sodino-app .bg-white.border-b.border-gray-200 {
+    border: 1px solid #d8e0ea;
+    border-radius: 8px;
+    background: #ffffff;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
+}
+
+#sodino-app aside .bg-white,
+#sodino-app main > .bg-white,
+#sodino-app .grid > .bg-white,
+#sodino-app .bg-white.rounded-lg.shadow-sm.border,
+#sodino-app .bg-white.rounded-2xl.border {
+    border: 1px solid #d8e0ea;
+    border-radius: 8px !important;
+    background: #ffffff;
+}
+
+#sodino-app aside {
+    position: sticky;
+    top: 42px;
+    align-self: flex-start;
+}
+
+#sodino-app nav.space-y-2 a {
+    border: 1px solid transparent;
+    border-radius: 8px !important;
+    padding: 0.7rem 0.85rem;
+}
+
+#sodino-app nav.space-y-2 a.bg-blue-50,
+#sodino-app nav.space-y-2 a:hover {
+    background: #e8f3fb;
+    color: #115487 !important;
+    border-color: #b9d9ee;
+}
+
+#sodino-app input[type="text"],
+#sodino-app input[type="number"],
+#sodino-app input[type="url"],
+#sodino-app input[type="datetime-local"],
+#sodino-app input[type="date"],
+#sodino-app select,
+#sodino-app textarea {
+    min-height: 42px;
+    border-radius: 8px !important;
+    border: 1px solid #c7d2df !important;
+    background: #ffffff;
+    color: #172033;
+    box-shadow: none;
+}
+
+#sodino-app input[type="checkbox"] {
+    border-radius: 4px;
+    border-color: #9fb0c1;
+}
+
+#sodino-app button,
+#sodino-app .inline-flex[href],
+#sodino-app input[type="submit"] {
+    border-radius: 8px !important;
+}
+
+#sodino-app canvas {
+    display: block;
+}
+
+#sodino-app .wp-list-table {
+    border: 1px solid #d8e0ea;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
+}
+
+#sodino-app .wp-list-table thead th {
+    background: #eef3f8;
+    color: #334155 !important;
+    font-weight: 700;
+}
+
+#sodino-app .wp-list-table tbody tr:hover {
+    background: #f6f8fb;
+}
+
+@media (min-width: 640px) {
+    #sodino-app .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+    #sodino-app .sm\:flex-row { flex-direction: row; }
+    #sodino-app .sm\:items-center { align-items: center; }
+    #sodino-app .sm\:justify-between { justify-content: space-between; }
+}
+
+@media (min-width: 768px) {
+    #sodino-app .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    #sodino-app .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    #sodino-app .md\:col-span-2 { grid-column: span 2 / span 2; }
+}
+
+@media (min-width: 1024px) {
+    #sodino-app .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
+    #sodino-app .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    #sodino-app .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    #sodino-app .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    #sodino-app .lg\:grid-cols-\[280px_1fr\] { grid-template-columns: 280px minmax(0, 1fr); }
+    #sodino-app .lg\:col-span-2 { grid-column: span 2 / span 2; }
+    #sodino-app .lg\:flex-row { flex-direction: row; }
+    #sodino-app .lg\:items-center { align-items: center; }
+    #sodino-app .lg\:justify-between { justify-content: space-between; }
+}
+
+@media (max-width: 960px) {
+    #sodino-app {
+        padding: 18px 10px 36px;
+    }
+
+    #sodino-app > .max-w-7xl > .flex,
+    #sodino-app .max-w-7xl > .flex {
+        flex-direction: column;
+    }
+
+    #sodino-app aside,
+    #sodino-app .w-64 {
+        width: 100%;
+        position: static;
+    }
+}