/* ============================================================
   Dark Mode Overrides — activated by html.dark class
   ============================================================ */

/* Smooth transitions on theme switch */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- Page backgrounds ---- */
html.dark body                          { background-color: #111827 !important; color: #f3f4f6 !important; }
html.dark .bg-gray-50                   { background-color: #111827 !important; }
html.dark .bg-gray-100                  { background-color: #1f2937 !important; }
html.dark .bg-white                     { background-color: #1f2937 !important; }
html.dark .bg-gray-200                  { background-color: #374151 !important; }

/* ---- Text colors ---- */
html.dark .text-gray-900                { color: #f3f4f6 !important; }
html.dark .text-gray-800                { color: #e5e7eb !important; }
html.dark .text-gray-700                { color: #d1d5db !important; }
html.dark .text-gray-600                { color: #d1d5db !important; }
html.dark .text-gray-500                { color: #9ca3af !important; }
html.dark .text-gray-400                { color: #9ca3af !important; }

/* ---- Borders ---- */
html.dark .border-gray-200              { border-color: #374151 !important; }
html.dark .border-gray-100              { border-color: #374151 !important; }
html.dark .border-gray-300              { border-color: #4b5563 !important; }
html.dark .divide-gray-200 > * + *      { border-color: #374151 !important; }
html.dark .divide-gray-100 > * + *      { border-color: #374151 !important; }

/* ---- Shadows → subtle glow ---- */
html.dark .shadow-lg                    { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; }
html.dark .shadow-md                    { box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important; }
html.dark .shadow-sm                    { box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; }
html.dark .shadow                       { box-shadow: 0 1px 6px rgba(0,0,0,0.3) !important; }
html.dark .shadow-xl                    { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }

/* ---- Hover backgrounds ---- */
html.dark .hover\:bg-gray-50:hover      { background-color: #1f2937 !important; }
html.dark .hover\:bg-gray-100:hover     { background-color: #374151 !important; }

/* ---- Ring colors ---- */
html.dark .ring-gray-200                { --tw-ring-color: #374151 !important; }
html.dark .ring-gray-300                { --tw-ring-color: #4b5563 !important; }
html.dark .focus\:ring-gray-300:focus   { --tw-ring-color: #4b5563 !important; }

/* ---- Nav dropdown (menu-dropdown) ---- */
html.dark #menu-dropdown                { background-color: #1f2937 !important; border-color: #374151 !important; }
html.dark #menu-dropdown a              { color: #d1d5db !important; }
html.dark #menu-dropdown a:hover        { background-color: #374151 !important; color: #f9a8d4 !important; }
html.dark #menu-dropdown a.bg-pink-50   { background-color: #831843 !important; color: #f9a8d4 !important; }
html.dark .hover\:bg-pink-50:hover      { background-color: #831843 !important; }

/* ---- Colored backgrounds that need dark variants ---- */
html.dark .bg-green-50                  { background-color: #064e3b !important; }
html.dark .bg-green-100                 { background-color: #065f46 !important; }
html.dark .bg-red-50                    { background-color: #7f1d1d !important; }
html.dark .bg-red-100                   { background-color: #991b1b !important; }
html.dark .bg-yellow-50                 { background-color: #78350f !important; }
html.dark .bg-yellow-100                { background-color: #92400e !important; }
html.dark .bg-blue-50                   { background-color: #1e3a5f !important; }
html.dark .bg-blue-100                  { background-color: #1e40af30 !important; }
html.dark .bg-pink-50                   { background-color: #831843 !important; }
html.dark .bg-pink-100                  { background-color: #9d174d !important; }
html.dark .bg-purple-50                 { background-color: #4c1d95 !important; }
html.dark .bg-amber-50                  { background-color: #78350f !important; }
html.dark .bg-indigo-50                 { background-color: #312e81 !important; }
html.dark .bg-orange-50                 { background-color: #7c2d12 !important; }
html.dark .bg-emerald-50               { background-color: #064e3b !important; }
html.dark .bg-slate-50                  { background-color: #1e293b !important; }

/* ---- Colored text for contrast on dark colored backgrounds ---- */
html.dark .text-green-800               { color: #6ee7b7 !important; }
html.dark .text-green-700               { color: #6ee7b7 !important; }
html.dark .text-green-600               { color: #34d399 !important; }
html.dark .text-red-800                 { color: #fca5a5 !important; }
html.dark .text-red-700                 { color: #fca5a5 !important; }
html.dark .text-red-600                 { color: #f87171 !important; }
html.dark .text-red-500                 { color: #f87171 !important; }
html.dark .text-yellow-800              { color: #fde68a !important; }
html.dark .text-yellow-700              { color: #fde68a !important; }
html.dark .text-yellow-600              { color: #fcd34d !important; }
html.dark .text-blue-800               { color: #93c5fd !important; }
html.dark .text-blue-700               { color: #93c5fd !important; }
html.dark .text-blue-600               { color: #60a5fa !important; }
html.dark .text-amber-600              { color: #fcd34d !important; }
html.dark .text-amber-500              { color: #fbbf24 !important; }
html.dark .text-pink-600               { color: #f9a8d4 !important; }
html.dark .text-pink-700               { color: #f9a8d4 !important; }
html.dark .text-emerald-600            { color: #34d399 !important; }
html.dark .text-purple-600             { color: #c4b5fd !important; }
html.dark .text-indigo-600             { color: #a5b4fc !important; }
html.dark .text-orange-600             { color: #fdba74 !important; }

/* ---- Colored borders ---- */
html.dark .border-green-200             { border-color: #065f46 !important; }
html.dark .border-green-300             { border-color: #047857 !important; }
html.dark .border-red-200               { border-color: #991b1b !important; }
html.dark .border-red-300               { border-color: #b91c1c !important; }
html.dark .border-yellow-200            { border-color: #92400e !important; }
html.dark .border-yellow-300            { border-color: #a16207 !important; }
html.dark .border-blue-200              { border-color: #1e40af !important; }
html.dark .border-blue-300              { border-color: #2563eb !important; }
html.dark .border-pink-200              { border-color: #9d174d !important; }
html.dark .border-pink-300              { border-color: #be185d !important; }
html.dark .border-amber-200             { border-color: #92400e !important; }
html.dark .border-indigo-200            { border-color: #3730a3 !important; }
html.dark .border-purple-200            { border-color: #5b21b6 !important; }

/* ---- Tables ---- */
html.dark table th                      { color: #9ca3af !important; }
html.dark table td                      { color: #d1d5db !important; }
html.dark thead                         { background-color: #1f2937 !important; }
html.dark tbody tr                      { border-color: #374151 !important; }
html.dark tbody tr:hover                { background-color: #374151 !important; }

/* ---- Inputs & selects (non-nav) ---- */
html.dark input:not([type="range"]),
html.dark textarea,
html.dark select:not(nav select) {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}
html.dark input::placeholder            { color: #9ca3af !important; }

/* ---- Skeleton loader ---- */
html.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%) !important;
    background-size: 200% 100% !important;
}

/* ---- Common shared classes ---- */
html.dark .fade-in                      { /* keep animation as-is */ }

/* ---- Status badges (mixing.html, firestore_browser.html) ---- */
html.dark .status-NOT_STARTED           { background: #92400e40 !important; color: #fde68a !important; }
html.dark .status-IN_PROGRESS           { background: #1e40af40 !important; color: #93c5fd !important; }
html.dark .status-COMPLETE              { background: #065f4640 !important; color: #6ee7b7 !important; }
html.dark .status-CANCELLED             { background: #991b1b40 !important; color: #fca5a5 !important; }

/* ---- Sort buttons (production_detail.html) ---- */
html.dark .sort-active                  { background-color: #831843 !important; color: #f9a8d4 !important; border-color: #be185d !important; }
html.dark .sort-inactive                { background-color: #374151 !important; color: #9ca3af !important; border-color: #4b5563 !important; }
html.dark .sort-inactive:hover          { background-color: #4b5563 !important; color: #d1d5db !important; }

/* ---- Day tabs (availability_detail.html) ---- */
html.dark .day-tab.active               { background-color: #831843 !important; color: #f9a8d4 !important; border-color: #be185d !important; }
html.dark .day-tab:hover                { background-color: #374151 !important; }

/* ---- Collection tabs & doc rows (firestore_browser.html) ---- */
html.dark .collection-tab.active        { background-color: #831843 !important; color: #f9a8d4 !important; border-color: #be185d !important; }
html.dark .collection-tab:hover         { background-color: #374151 !important; }
html.dark .doc-row:hover                { background-color: #374151 !important; }
html.dark .doc-row.selected             { background-color: #831843 !important; border-left-color: #ec4899 !important; }

/* ---- JSON syntax highlighting (firestore_browser.html) ---- */
html.dark .json-key                     { color: #c4b5fd !important; }
html.dark .json-string                  { color: #6ee7b7 !important; }
html.dark .json-number                  { color: #93c5fd !important; }
html.dark .json-bool                    { color: #fca5a5 !important; }
html.dark .json-null                    { color: #9ca3af !important; }
html.dark pre.json-view                 { background-color: #111827 !important; color: #d1d5db !important; }

/* ---- Mixer chip (mixing.html) ---- */
html.dark .mixer-chip.active            { box-shadow: 0 0 0 2px #f472b6 !important; }

/* ---- Range slider (scheduling.html) ---- */
html.dark input[type="range"]           { background-color: #374151 !important; }

/* ---- Slate text/bg (used heavily in tv.html) ---- */
html.dark .text-slate-800               { color: #e2e8f0 !important; }
html.dark .text-slate-700               { color: #cbd5e1 !important; }
html.dark .text-slate-600               { color: #cbd5e1 !important; }
html.dark .text-slate-500               { color: #94a3b8 !important; }
html.dark .text-slate-400               { color: #94a3b8 !important; }
html.dark .text-slate-300               { color: #64748b !important; }
html.dark .bg-slate-200                 { background-color: #334155 !important; }
html.dark .border-slate-100             { border-color: #334155 !important; }
html.dark .border-slate-200             { border-color: #475569 !important; }
/* dark: prefix for Tailwind-style inline dark classes */
html.dark .dark\:text-slate-200         { color: #e2e8f0 !important; }
html.dark .dark\:text-slate-400         { color: #94a3b8 !important; }
html.dark .dark\:text-slate-500         { color: #64748b !important; }

/* ---- TV-specific (tv.html) ---- */
html.dark .card                         { background: #1f2937 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15) !important; }
html.dark .top-bar                      { /* keep gradient as brand identity */ }
html.dark .stat-amber                   { background: linear-gradient(135deg, #78350f, #92400e) !important; border-color: #a16207 !important; }
html.dark .stat-amber *                 { color: #fde68a !important; }
html.dark .stat-sky                     { background: linear-gradient(135deg, #0c4a6e, #0369a1) !important; border-color: #0284c7 !important; }
html.dark .stat-sky *                   { color: #bae6fd !important; }
html.dark .stat-hours                   { background: linear-gradient(135deg, #064e3b, #065f46) !important; border-color: #047857 !important; }
html.dark .stat-hours *                 { color: #a7f3d0 !important; }
html.dark .alert-card                   { background: linear-gradient(135deg, #7f1d1d, #991b1b) !important; border-color: #b91c1c !important; border-left-color: #ef4444 !important; }
html.dark .alert-card *                 { color: #fecaca !important; }
html.dark .flavor-header                { background: #2d1f3d !important; }
html.dark .section-divider              { background: #1e293b !important; }
html.dark .status-done                  { background: #065f4640 !important; color: #6ee7b7 !important; }
html.dark .status-todo                  { background: #92400e40 !important; color: #fde68a !important; }
html.dark .status-ip                    { background: #1e40af40 !important; color: #93c5fd !important; }
html.dark .crew-in                      { background: #064e3b40 !important; border-left-color: #22c55e !important; }
html.dark .crew-sched                   { background: #1e293b !important; border-left-color: #6b7280 !important; }
html.dark .crew-late                    { background: #78350f40 !important; border-left-color: #f59e0b !important; }
html.dark .crew-noshow                  { background: #7f1d1d40 !important; border-left-color: #ef4444 !important; }
html.dark .crew-left                    { background: #1e293b !important; border-left-color: #4b5563 !important; }

/* ---- Progress bar (tv.html) ---- */
html.dark .progress-bar                 { background: #374151 !important; }

/* ---- Chart.js tooltip ---- */
html.dark .chartjs-tooltip              { background-color: #1f2937 !important; color: #f3f4f6 !important; }

/* ---- Scrollbar ---- */
html.dark ::-webkit-scrollbar           { background: #1f2937; }
html.dark ::-webkit-scrollbar-thumb     { background: #4b5563; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }