/* assets/css/dark-mode.css */

/* Core Variables for Smooth Transitions */
body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Base Body Styles */
body.dark-mode {
    background-color: #0f172a !important; /* slate-900 */
    color: #f8fafc !important; /* slate-50 */
}

/* Background Color Overrides (covers white, slate, gray) */
body.dark-mode .bg-white {
    background-color: #1e293b !important; /* slate-800 */
}
body.dark-mode .bg-slate-50,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-zinc-50 {
    background-color: #0f172a !important; /* slate-900 */
}
body.dark-mode .bg-slate-100,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-zinc-100 {
    background-color: #1e293b !important; /* slate-800 */
}
body.dark-mode .bg-slate-200,
body.dark-mode .bg-gray-200,
body.dark-mode .bg-zinc-200 {
    background-color: #334155 !important; /* slate-700 */
}

/* Text Color Overrides */
body.dark-mode .text-slate-900,
body.dark-mode .text-gray-900,
body.dark-mode .text-zinc-900 {
    color: #f8fafc !important; /* slate-50 */
}
body.dark-mode .text-slate-800,
body.dark-mode .text-gray-800,
body.dark-mode .text-zinc-800 {
    color: #e2e8f0 !important; /* slate-200 */
}
body.dark-mode .text-slate-700,
body.dark-mode .text-gray-700,
body.dark-mode .text-zinc-700 {
    color: #cbd5e1 !important; /* slate-300 */
}
body.dark-mode .text-slate-600,
body.dark-mode .text-gray-600,
body.dark-mode .text-zinc-600 {
    color: #94a3b8 !important; /* slate-400 */
}
body.dark-mode .text-slate-500,
body.dark-mode .text-gray-500,
body.dark-mode .text-zinc-500,
body.dark-mode .text-slate-400,
body.dark-mode .text-gray-400 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Border Color Overrides */
body.dark-mode .border-slate-50,
body.dark-mode .border-gray-50,
body.dark-mode .border-slate-100,
body.dark-mode .border-gray-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-gray-200 {
    border-color: #334155 !important; /* slate-700 */
}
body.dark-mode .border-slate-300,
body.dark-mode .border-gray-300 {
    border-color: #475569 !important; /* slate-600 */
}

/* Divide Color Overrides (for Tailwind's divide-y) */
body.dark-mode .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* Hover States Overrides */
body.dark-mode .hover\:bg-slate-50:hover,
body.dark-mode .hover\:bg-gray-50:hover {
    background-color: #334155 !important; /* slate-700 */
}
body.dark-mode .hover\:bg-slate-100:hover,
body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #475569 !important; /* slate-600 */
}
body.dark-mode .hover\:text-slate-900:hover,
body.dark-mode .hover\:text-gray-900:hover {
    color: #ffffff !important;
}
body.dark-mode .hover\:text-slate-700:hover,
body.dark-mode .hover\:text-gray-700:hover,
body.dark-mode .hover\:text-slate-600:hover,
body.dark-mode .hover\:text-gray-600:hover {
    color: #f8fafc !important;
}

/* Forms & Inputs Overrides */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]), 
body.dark-mode select, 
body.dark-mode textarea {
    background-color: #1e293b !important; /* slate-800 */
    color: #f8fafc !important; /* slate-50 */
    border-color: #475569 !important; /* slate-600 */
}
body.dark-mode input:focus, 
body.dark-mode select:focus, 
body.dark-mode textarea:focus {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #6366f1 !important; /* brand-500 */
}
body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
    color: #64748b !important; /* slate-500 */
}

/* Custom Soft Backgrounds for Badges & Modals */
body.dark-mode .bg-brand-50, 
body.dark-mode .bg-blue-50, 
body.dark-mode .bg-emerald-50, 
body.dark-mode .bg-rose-50, 
body.dark-mode .bg-amber-50, 
body.dark-mode .bg-yellow-50,
body.dark-mode .bg-purple-50,
body.dark-mode .bg-orange-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .bg-brand-100, 
body.dark-mode .bg-blue-100, 
body.dark-mode .bg-emerald-100, 
body.dark-mode .bg-rose-100, 
body.dark-mode .bg-amber-100, 
body.dark-mode .bg-yellow-100,
body.dark-mode .bg-purple-100,
body.dark-mode .bg-orange-100 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Text on Badges */
body.dark-mode .text-blue-800 { color: #93c5fd !important; }
body.dark-mode .text-emerald-800, body.dark-mode .text-green-800 { color: #6ee7b7 !important; }
body.dark-mode .text-rose-800, body.dark-mode .text-red-800 { color: #fda4af !important; }
body.dark-mode .text-yellow-800 { color: #fde047 !important; }
body.dark-mode .text-amber-800 { color: #fcd34d !important; }
body.dark-mode .text-purple-800 { color: #d8b4fe !important; }
body.dark-mode .text-orange-800 { color: #fdba74 !important; }

/* Special text overrides for specific components */
body.dark-mode .text-gray-900 { color: #e2e8f0 !important; }

/* Glassmorphism specific adjustments in Dark Mode */
body.dark-mode .glass-panel {
    background: rgba(15, 23, 42, 0.8) !important; /* darker slate for login */
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure app-name and branding remain readable */
body.dark-mode .app-name-display {
    color: #f8fafc !important;
}

/* Checkboxes in dark mode */
body.dark-mode input[type="checkbox"] {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
body.dark-mode input[type="checkbox"]:checked {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* Fix global tbody tr hover */
body.dark-mode tbody tr:hover {
    background-color: #334155 !important; /* slate-700 */
}