/* Theme CSS - Clean, Smooth */
:root {
    /* Dark mode defaults */
    --background: #0f172a;
    --bg-secondary: #000000;
    --surface: #000000;
    --card: #0f172a;
    --border: rgba(255,255,255,0.15);
    --text: #ffffff !important;
    --text-secondary: #d1d5db !important;
    --primary: #1e40af;
    --hover: rgba(255,255,255,0.08);
    --footer-bg: #050810;
}

body.light-mode {
    /* Light mode - clean */
    --background: #f8fafc;
    --bg-secondary: #ffffff;
    --surface: #ffffff;
    --card: #f8f9fa;
    --border: #e5e7eb;
    --text: #111827 !important;
    --text-secondary: #475569 !important;
    --primary: #3b82f6;
    --hover: #f3f4f6;
    --footer-bg: #ffffff;
}

/* --- Smooth transitions --- */
body, body * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.3s ease !important;
}

body {
    background-color: var(--background) !important;
    color: var(--text) !important;
}

/* --- Footer --- */
footer {
    background-color: var(--footer-bg) !important;
    border-color: var(--border) !important;
}
footer * {
    color: var(--text) !important;
}
footer .text-gray-400,
footer .text-gray-500 {
    color: var(--text-secondary) !important;
}

/* --- MOBILE SIDEBAR - Perfect styling --- */
#mobile-menu,
#mobile-menu > * {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

#mobile-menu a,
#mobile-menu button {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

#mobile-menu a:hover,
#mobile-menu button:hover {
    background-color: var(--hover) !important;
}

/* --- Fix Classes Accordion Button --- */
#mobile-classes-accordion {
    background-color: var(--card) !important;
    color: var(--text) !important;
}

/* --- Classes Accordion Content: 100% smooth expand --- */
#mobile-classes-accordion-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease !important;
}

/* --- Specific text styling --- */
#mobile-menu span {
    color: var(--text) !important;
}

/* --- All borders --- */
#mobile-menu .border-white\/10,
#mobile-menu [class*="border"] {
    border-color: var(--border) !important;
}

/* --- Overlay --- */
#mobile-menu-overlay {
    background-color: rgba(0,0,0,0.9) !important;
}
body.light-mode #mobile-menu-overlay {
    background-color: rgba(0,0,0,0.5) !important;
}

/* --- Desktop header --- */
#main-nav {
    background-color: var(--background) !important;
}