:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hover: #F3F4F6;
    --text-primary: #1F2937;
    --text-secondary: #374151;
    --text-tertiary: #4B5563;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --border-primary: #E5E7EB;
    --border-secondary: #D1D5DB;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

html.dark {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #242424;
    --bg-card: #1a1a1a;
    --bg-input: #242424;
    --bg-hover: #2d2d2d;
    --text-primary: #F3F4F6;
    --text-secondary: #E5E7EB;
    --text-tertiary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-light: #6B7280;
    --border-primary: #2d2d2d;
    --border-secondary: #3d3d3d;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

html { overflow-x: hidden; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Sidebar */
html.dark .sidebar { background-color: var(--bg-secondary) !important; border-right-color: var(--border-primary) !important; }
html.dark .sidebar li { color: var(--text-primary) !important; }
html.dark .sidebar li:not(.bg-amber-500):hover { background-color: var(--bg-hover) !important; }
html.dark .sidebar .text-gray-800, html.dark .sidebar .text-gray-700 { color: var(--text-primary) !important; }
html.dark .sidebar .text-gray-500 { color: var(--text-muted) !important; }
html.dark .sidebar .text-gray-400 { color: var(--text-light) !important; }
html.dark .mobile-header { background-color: var(--bg-secondary) !important; border-bottom-color: var(--border-primary) !important; }

/* Cards */
html.dark .bg-white { background-color: var(--bg-card) !important; }
html.dark .bg-gray-50 { background-color: var(--bg-tertiary) !important; }
html.dark .bg-gray-100 { background-color: var(--bg-hover) !important; }

/* Borders */
html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--border-primary) !important; }
html.dark .border-t, html.dark .border-b, html.dark .border { border-color: var(--border-primary) !important; }
html.dark .divide-y > * + *, html.dark .divide-gray-200 > * + * { border-color: var(--border-primary) !important; }

/* Text */
html.dark .text-gray-800, html.dark .text-gray-900 { color: var(--text-primary) !important; }
html.dark .text-gray-700 { color: var(--text-secondary) !important; }
html.dark .text-gray-600 { color: var(--text-tertiary) !important; }
html.dark .text-gray-500 { color: var(--text-muted) !important; }
html.dark .text-gray-400 { color: var(--text-light) !important; }

/* Forms */
html.dark input, html.dark select, html.dark textarea { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-secondary) !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--text-light) !important; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #FFC107 !important; box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important; }

/* Tables */
html.dark table th { background-color: var(--bg-tertiary) !important; color: var(--text-muted) !important; border-bottom-color: var(--border-primary) !important; }
html.dark table td { border-bottom-color: var(--border-primary) !important; color: var(--text-secondary) !important; }
html.dark table tr:hover td { background-color: var(--bg-tertiary) !important; }

/* Alerts */
html.dark .bg-red-50 { background-color: rgba(220, 38, 38, 0.15) !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }

/* Shadows */
html.dark .shadow-md, html.dark .shadow-lg { box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color) !important; }
html.dark .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: var(--bg-hover) !important; }

/* Theme toggle */
.theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; margin: 0.5rem; border-radius: 0.5rem; background-color: var(--bg-tertiary); cursor: pointer; transition: all 0.3s ease; user-select: none; }
.theme-toggle:hover { background-color: var(--bg-hover); }
.theme-toggle-label { color: var(--text-primary); }
.theme-toggle-switch { position: relative; width: 48px; height: 24px; background-color: #d1d5db; border-radius: 12px; transition: background-color 0.3s ease; cursor: pointer; }
html.dark .theme-toggle-switch { background-color: #FFC107; }
.theme-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
html.dark .theme-toggle-switch::after { transform: translateX(24px); }

/* Sidebar layout */
.sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100vh; height: 100dvh; background-color: #FFFFFF; border-right: 1px solid #E5E7EB; z-index: 1000; transition: left 0.3s ease; overflow-y: auto; overflow-x: hidden; }
.sidebar.open { left: 0; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; }
.sidebar-overlay.show { display: block; }
.mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #FFFFFF; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
.mobile-menu-btn { display: block; background: none; border: none; font-size: 1.5rem; color: #FFC107; cursor: pointer; }
main { padding-top: 0; min-height: 100vh; }

@media (min-width: 1024px) {
    .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 280px !important; height: 100vh !important; }
    .sidebar-overlay { display: none !important; }
    .mobile-header, .mobile-menu-btn { display: none; }
    main { margin-left: 280px; min-height: 100vh; width: calc(100% - 280px); }
}

.btn { transition: all 0.3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

input, select, textarea { background-color: #FFFFFF; color: #333333; border: 1px solid #D1D5DB; }
input:focus, select:focus, textarea:focus { border-color: #FFC107; outline: none; box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3); }

table { border-collapse: separate; border-spacing: 0; }
table th { background-color: #F9FAFB; color: #4B5563; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; border-bottom: 1px solid #E5E7EB; }
table td { padding: 12px 16px; border-bottom: 1px solid #E5E7EB; }
table tr:hover td { background-color: #F9FAFB; }