/* Dark Mode Styles for School Management Pro */

/* Root dark mode variables */
html.dark {
    color-scheme: dark;
}

/* Base dark mode */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* Navigation in dark mode */
html.dark nav.glass {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(51, 65, 85, 0.5);
}

html.dark nav span.font-bold {
    color: #f1f5f9;
}

html.dark nav a.text-slate-600 {
    color: #94a3b8;
}

html.dark nav a.text-slate-600:hover {
    color: #818cf8;
}

/* Sections */
html.dark section.bg-white,
html.dark section.bg-slate-50,
html.dark .bg-white,
html.dark .bg-slate-50 {
    background-color: #1e293b;
}

html.dark section.bg-gradient-to-b.from-indigo-50,
html.dark section.bg-gradient-to-b.from-purple-50,
html.dark section.bg-gradient-to-b.from-amber-50,
html.dark section.bg-gradient-to-b.from-blue-50,
html.dark section.bg-gradient-to-b.from-pink-50,
html.dark section.bg-gradient-to-b.from-rose-50,
html.dark section.bg-gradient-to-b.from-emerald-50,
html.dark header.bg-gradient-to-b.from-blue-50,
html.dark header.bg-gradient-to-b.from-indigo-50,
html.dark header.bg-gradient-to-b.from-pink-50,
html.dark header.bg-gradient-to-b.from-rose-50,
html.dark header.bg-gradient-to-b.from-emerald-50,
html.dark .hero-header {
    background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
}

/* Text colors in dark mode */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
    color: #f1f5f9 !important;
}

html.dark .text-slate-600 {
    color: #94a3b8 !important;
}

html.dark .text-slate-500 {
    color: #64748b !important;
}

/* Feature cards in dark mode */
html.dark .feature-card {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-color: #475569 !important;
}

html.dark .feature-card:hover {
    border-color: #818cf8 !important;
}

html.dark .feature-card h3 {
    color: #f1f5f9;
}

html.dark .feature-card p {
    color: #94a3b8;
}

/* Cards and containers */
html.dark .bg-gradient-to-br.from-rose-50,
html.dark .bg-gradient-to-br.from-sky-50,
html.dark .bg-gradient-to-br.from-red-50,
html.dark .bg-gradient-to-br.from-fuchsia-50,
html.dark .bg-gradient-to-br.from-teal-50,
html.dark .bg-gradient-to-br.from-slate-50,
html.dark .bg-gradient-to-br.from-orange-50,
html.dark .bg-gradient-to-br.from-yellow-50 {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Borders */
html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-indigo-100,
html.dark .border-emerald-100,
html.dark .border-blue-100,
html.dark .border-violet-100,
html.dark .border-pink-100,
html.dark .border-rose-100,
html.dark .border-sky-100,
html.dark .border-red-100,
html.dark .border-fuchsia-100,
html.dark .border-teal-100,
html.dark .border-cyan-100,
html.dark .border-amber-100,
html.dark .border-gray-100,
html.dark .border-purple-100,
html.dark .border-green-100,
html.dark .border-orange-100,
html.dark .border-yellow-100 {
    border-color: #475569;
}

/* Footer */
html.dark footer {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark footer a {
    color: #94a3b8;
}

html.dark footer a:hover {
    color: #818cf8 !important;
}

/* Buttons - hover states */
html.dark button:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-50:hover {
    background-color: #334155 !important;
}

html.dark .bg-slate-900 {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

html.dark .border-slate-300 {
    border-color: #475569 !important;
}

/* Mobile menu */
html.dark #mobile-menu {
    background-color: #1e293b;
    border-color: #334155;
}

/* FAQ section */
html.dark details {
    background-color: #1e293b;
    border-color: #475569;
}

html.dark details summary {
    color: #f1f5f9;
}

/* Testimonials */
html.dark #testimonials-scroll>div>div {
    background-color: #1e293b;
    border-color: #475569;
}

/* Back to top button */
html.dark #back-to-top {
    background-color: #334155;
    color: #f1f5f9;
}

/* Glass effect in dark mode */
html.dark .glass {
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(12px);
}

/* Theme toggle button styling */
#theme-toggle-btn {
    transition: transform 0.2s ease;
}

#theme-toggle-btn:hover {
    transform: scale(1.1);
}

#theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Fix: Navigation brand text visibility in dark mode */
html.dark nav .text-slate-900,
html.dark nav span.text-slate-900 {
    color: #f1f5f9 !important;
}

/* Fix: Hero gradient text - enhanced visibility in dark mode */
html.dark .text-gradient {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix: Hero section gradient background */
html.dark .hero-gradient {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}

/* Fix: Hero badge dark mode */
html.dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.2);
}

html.dark .text-indigo-700 {
    color: #a5b4fc;
}

/* Fix: Navigation dropdown menu dark mode */
html.dark .nav-dropdown-menu {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html.dark .nav-dropdown-menu a {
    color: #e2e8f0 !important;
}

html.dark .nav-dropdown-menu a:hover {
    background: #334155 !important;
    color: #818cf8 !important;
}

/* Fix: Footer badges and spacing */
html.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

html.dark .text-slate-500 {
    color: #94a3b8 !important;
}

html.dark footer .border-slate-100 {
    border-color: #334155 !important;
}