/** * dark.css — Dark mode theme * Activated via: * 1. data-theme="dark" on (manual toggle) * 2. prefers-color-scheme: dark (OS preference, auto) * * Surface colors use --bg-surface / --bg-surface-alt tokens * defined in base.css :root — overrides below flip them dark. */ /* ===== DARK THEME VARIABLES ===== */ [data-theme="dark"] { --primary: #818cf8; --primary-dark: #6366f1; --primary-light: #a5b4fc; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; --purple: #a78bfa; --gray-50: #111827; --gray-100: #1f2937; --gray-200: #374151; --gray-300: #4b5563; --gray-400: #6b7280; --gray-500: #9ca3af; --gray-600: #d1d5db; --gray-700: #e5e7eb; --gray-800: #f3f4f6; --gray-900: #f9fafb; --bg-surface: #1e293b; --bg-surface-alt: #111827; --text-color: #e2e8f0; --text-secondary: #94a3b8; --border-color: #374151; --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --header-text: #ffffff; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3); --agent-blue: #60a5fa; --agent-blue-dark: #1e3a5f; --agent-blue-light: #93c5fd; --agent-blue-hover: #3b82f6; --agent-blue-bg: #1e293b; --agent-blue-bg-deep: #1e3a5f; --agent-blue-800: #93c5fd; --agent-green: #34d399; --agent-green-light: #6ee7b7; --agent-green-bg: #052e16; --agent-green-bg-deep: #064e3b; --agent-green-dark: #6ee7b7; --agent-red: #f87171; --agent-red-bg: #450a0a; --agent-red-bg-deep: #7f1d1d; --agent-red-bg-light: #991b1b; --agent-red-dark: #fca5a5; --agent-orange: #fb923c; --agent-orange-bg: #431407; --agent-orange-bg-deep: #7c2d12; --agent-orange-dark: #fdba74; --agent-amber-bg: #451a03; --agent-amber-dark: #fbbf24; --agent-amber-border: #92400e; --agent-amber-bg-deep: #78350f; --agent-indigo-bg: #312e81; --agent-indigo-dark: #c7d2fe; --agent-violet-bg: #2e1065; --agent-violet-dark: #c4b5fd; --agent-slate-50: #0f172a; --agent-slate-100: #1e293b; --agent-slate-300: #475569; --agent-slate-400: #94a3b8; --agent-slate-500: #cbd5e1; /* Agent generic text/bg tokens (used with fallbacks in agent.css) */ --text-primary: #e2e8f0; --text-tertiary: #94a3b8; --bg-primary: #1e293b; color-scheme: dark; } /* ===== AUTO DARK MODE (OS preference) ===== */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --primary: #818cf8; --primary-dark: #6366f1; --primary-light: #a5b4fc; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; --purple: #a78bfa; --gray-50: #111827; --gray-100: #1f2937; --gray-200: #374151; --gray-300: #4b5563; --gray-400: #6b7280; --gray-500: #9ca3af; --gray-600: #d1d5db; --gray-700: #e5e7eb; --gray-800: #f3f4f6; --gray-900: #f9fafb; --bg-surface: #1e293b; --bg-surface-alt: #111827; --text-color: #e2e8f0; --text-secondary: #94a3b8; --border-color: #374151; --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --header-text: #ffffff; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3); --agent-blue: #60a5fa; --agent-blue-dark: #1e3a5f; --agent-blue-light: #93c5fd; --agent-blue-hover: #3b82f6; --agent-blue-bg: #1e293b; /* Agent generic text/bg tokens */ --text-primary: #e2e8f0; --text-tertiary: #94a3b8; --bg-primary: #1e293b; --agent-blue-bg-deep: #1e3a5f; --agent-blue-800: #93c5fd; --agent-green: #34d399; --agent-green-light: #6ee7b7; --agent-green-bg: #052e16; --agent-green-bg-deep: #064e3b; --agent-green-dark: #6ee7b7; --agent-red: #f87171; --agent-red-bg: #450a0a; --agent-red-bg-deep: #7f1d1d; --agent-red-bg-light: #991b1b; --agent-red-dark: #fca5a5; --agent-orange: #fb923c; --agent-orange-bg: #431407; --agent-orange-bg-deep: #7c2d12; --agent-orange-dark: #fdba74; --agent-amber-bg: #451a03; --agent-amber-dark: #fbbf24; --agent-amber-border: #92400e; --agent-amber-bg-deep: #78350f; --agent-indigo-bg: #312e81; --agent-indigo-dark: #c7d2fe; --agent-violet-bg: #2e1065; --agent-violet-dark: #c4b5fd; --agent-slate-50: #0f172a; --agent-slate-100: #1e293b; --agent-slate-300: #475569; --agent-slate-400: #94a3b8; --agent-slate-500: #cbd5e1; color-scheme: dark; } } /* ========================================================== COMPONENT-SPECIFIC DARK OVERRIDES Most white backgrounds handled by --bg-surface variable. Below: text colors, borders, semantic overrides. ========================================================== */ /* Body */ [data-theme="dark"] body { color: var(--text-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { color: var(--text-color); } } /* Header */ [data-theme="dark"] .app-header { border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .header-stats span, [data-theme="dark"] .header-stats .stat-value { color: #cbd5e1; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .app-header { border-bottom: 1px solid var(--border-color); } html:not([data-theme="light"]) .header-stats span, html:not([data-theme="light"]) .header-stats .stat-value { color: #cbd5e1; } } /* Modals */ [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.75); } [data-theme="dark"] .modal, [data-theme="dark"] .route-calc-modal { border: 1px solid var(--border-color); } [data-theme="dark"] .modal-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); color: var(--text-color); } [data-theme="dark"] .modal-body { color: var(--text-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .modal-overlay { background: rgba(0,0,0,0.75); } html:not([data-theme="light"]) .modal, html:not([data-theme="light"]) .route-calc-modal { border: 1px solid var(--border-color); } html:not([data-theme="light"]) .modal-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) .modal-body { color: var(--text-color); } } /* Inputs */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--gray-200); color: var(--text-color); border-color: var(--border-color); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--gray-400); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) input, html:not([data-theme="light"]) select, html:not([data-theme="light"]) textarea { background: var(--gray-200); color: var(--text-color); border-color: var(--border-color); } html:not([data-theme="light"]) input::placeholder, html:not([data-theme="light"]) textarea::placeholder { color: var(--gray-400); } } /* Forecast week picker: force readable text even on OS/system styled selects */ [data-theme="dark"] #forecast-week-picker-select, [data-theme="dark"] #forecast-week-picker-select:disabled { background: #f8fafc !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; border-color: #94a3b8 !important; opacity: 1 !important; } [data-theme="dark"] #forecast-week-picker-select option { background: #f8fafc !important; color: #111827 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) #forecast-week-picker-select, html:not([data-theme="light"]) #forecast-week-picker-select:disabled { background: #f8fafc !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; border-color: #94a3b8 !important; opacity: 1 !important; } html:not([data-theme="light"]) #forecast-week-picker-select option { background: #f8fafc !important; color: #111827 !important; } } /* Buttons */ [data-theme="dark"] .btn { color: var(--text-color); } [data-theme="dark"] .btn-primary { color: #ffffff; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .btn { color: var(--text-color); } html:not([data-theme="light"]) .btn-primary { color: #ffffff; } } /* Sidebar */ [data-theme="dark"] .sidebar { border-right: 1px solid var(--border-color); } [data-theme="dark"] .sidebar-tabs { background: var(--gray-50); border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .sidebar-tab { color: var(--text-secondary); } [data-theme="dark"] .sidebar-tab.active { background: var(--bg-surface); color: var(--primary-light); border-bottom-color: var(--primary); } [data-theme="dark"] .sidebar-tab:hover:not(.active) { background: var(--gray-200); } [data-theme="dark"] .sidebar-content { color: var(--text-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sidebar { border-right: 1px solid var(--border-color); } html:not([data-theme="light"]) .sidebar-tabs { background: var(--gray-50); border-bottom: 1px solid var(--border-color); } html:not([data-theme="light"]) .sidebar-tab { color: var(--text-secondary); } html:not([data-theme="light"]) .sidebar-tab.active { background: var(--bg-surface); color: var(--primary-light); border-bottom-color: var(--primary); } html:not([data-theme="light"]) .sidebar-tab:hover:not(.active) { background: var(--gray-200); } html:not([data-theme="light"]) .sidebar-content { color: var(--text-color); } } /* Task cards */ [data-theme="dark"] .task-card, [data-theme="dark"] .task-item { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .task-card:hover, [data-theme="dark"] .task-item:hover { background: var(--gray-300); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .task-card, html:not([data-theme="light"]) .task-item { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) .task-card:hover, html:not([data-theme="light"]) .task-item:hover { background: var(--gray-300); } } /* Tech items */ [data-theme="dark"] .tech-item, [data-theme="dark"] .tech-header { color: var(--text-color); } [data-theme="dark"] .tech-item:hover { background: var(--gray-200); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .tech-item, html:not([data-theme="light"]) .tech-header { color: var(--text-color); } html:not([data-theme="light"]) .tech-item:hover { background: var(--gray-200); } } /* Dropdown / context menu */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .context-menu, [data-theme="dark"] .sched-context-menu, [data-theme="dark"] .header-menu-panel { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-color); } [data-theme="dark"] .dropdown-menu li:hover, [data-theme="dark"] .context-menu li:hover, [data-theme="dark"] .sched-context-menu li:hover, [data-theme="dark"] .header-menu-item:hover { background: var(--gray-200); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .dropdown-menu, html:not([data-theme="light"]) .context-menu, html:not([data-theme="light"]) .sched-context-menu, html:not([data-theme="light"]) .header-menu-panel { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) .dropdown-menu li:hover, html:not([data-theme="light"]) .context-menu li:hover, html:not([data-theme="light"]) .sched-context-menu li:hover, html:not([data-theme="light"]) .header-menu-item:hover { background: var(--gray-200); } } /* Map */ [data-theme="dark"] .map-legend, [data-theme="dark"] .map-controls-panel, [data-theme="dark"] .map-toolbar { background: var(--bg-surface); color: var(--text-color); border: 1px solid var(--border-color); } [data-theme="dark"] .legend-tab { color: var(--text-color); } [data-theme="dark"] .legend-tab.active { background: var(--gray-200); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .map-legend, html:not([data-theme="light"]) .map-controls-panel, html:not([data-theme="light"]) .map-toolbar { background: var(--bg-surface); color: var(--text-color); border: 1px solid var(--border-color); } html:not([data-theme="light"]) .legend-tab { color: var(--text-color); } html:not([data-theme="light"]) .legend-tab.active { background: var(--gray-200); } } /* Details panel */ [data-theme="dark"] .details-panel { background: var(--bg-surface); color: var(--text-color); border-left: 1px solid var(--border-color); } [data-theme="dark"] .details-panel-header { border-bottom: 1px solid var(--border-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .details-panel { background: var(--bg-surface); color: var(--text-color); border-left: 1px solid var(--border-color); } html:not([data-theme="light"]) .details-panel-header { border-bottom: 1px solid var(--border-color); } } /* Scheduler */ [data-theme="dark"] .scheduler-header, [data-theme="dark"] .scheduler-week-overview, [data-theme="dark"] .sched-week-day, [data-theme="dark"] .scheduler-week-label { color: var(--text-color); border-color: var(--border-color); } [data-theme="dark"] .sched-cell { border-color: var(--border-color); } [data-theme="dark"] .sched-day-header { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .sched-tech-name { color: var(--text-color); } [data-theme="dark"] .sched-task { border-color: var(--border-color); } [data-theme="dark"] .scheduler-container { border: 1px solid var(--border-color); } [data-theme="dark"] #trash-btn.trash-has-items { color: #f87171; } [data-theme="dark"] #trash-btn.trash-has-items i.fa-trash { color: #f87171; } [data-theme="dark"] .task-deleting { background-color: rgba(248,113,113,0.15) !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .scheduler-header, html:not([data-theme="light"]) .scheduler-week-overview, html:not([data-theme="light"]) .sched-week-day, html:not([data-theme="light"]) .scheduler-week-label { color: var(--text-color); border-color: var(--border-color); } html:not([data-theme="light"]) .sched-cell { border-color: var(--border-color); } html:not([data-theme="light"]) .sched-day-header { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border-color); } html:not([data-theme="light"]) .sched-tech-name { color: var(--text-color); } html:not([data-theme="light"]) .sched-task { border-color: var(--border-color); } html:not([data-theme="light"]) .scheduler-container { border: 1px solid var(--border-color); } html:not([data-theme="light"]) #trash-btn.trash-has-items { color: #f87171; } html:not([data-theme="light"]) #trash-btn.trash-has-items i.fa-trash { color: #f87171; } html:not([data-theme="light"]) .task-deleting { background-color: rgba(248,113,113,0.15) !important; } } /* Day schedule detail */ [data-theme="dark"] .day-schedule-header, [data-theme="dark"] .schedule-task, [data-theme="dark"] .day-column { background: var(--bg-surface); color: var(--text-color); border-color: var(--border-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .day-schedule-header, html:not([data-theme="light"]) .schedule-task, html:not([data-theme="light"]) .day-column { background: var(--bg-surface); color: var(--text-color); border-color: var(--border-color); } } /* Semantic status */ [data-theme="dark"] .status-warning, [data-theme="dark"] .alert-warning { background: #78350f !important; color: #fbbf24 !important; border-color: #92400e !important; } [data-theme="dark"] .status-error, [data-theme="dark"] .alert-error, [data-theme="dark"] .alert-danger { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; } [data-theme="dark"] .status-success, [data-theme="dark"] .alert-success { background: #064e3b !important; color: #6ee7b7 !important; border-color: #065f46 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .status-warning, html:not([data-theme="light"]) .alert-warning { background: #78350f !important; color: #fbbf24 !important; border-color: #92400e !important; } html:not([data-theme="light"]) .status-error, html:not([data-theme="light"]) .alert-error, html:not([data-theme="light"]) .alert-danger { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; } html:not([data-theme="light"]) .status-success, html:not([data-theme="light"]) .alert-success { background: #064e3b !important; color: #6ee7b7 !important; border-color: #065f46 !important; } } /* Hotels */ [data-theme="dark"] .hotel-suggestion-item { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .hotel-suggestion-item:hover { background: var(--gray-300); } [data-theme="dark"] .sidebar-collapse { border-color: var(--border-color); } [data-theme="dark"] .sidebar-collapse-btn { background: var(--bg-surface-alt); color: var(--text-color); } [data-theme="dark"] .sidebar-collapse-btn:hover { background: var(--gray-200); } [data-theme="dark"] .sidebar-collapse-body { background: var(--bg-surface); border-color: var(--border-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hotel-suggestion-item { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) .hotel-suggestion-item:hover { background: var(--gray-300); } html:not([data-theme="light"]) .sidebar-collapse { border-color: var(--border-color); } html:not([data-theme="light"]) .sidebar-collapse-btn { background: var(--bg-surface-alt); color: var(--text-color); } html:not([data-theme="light"]) .sidebar-collapse-btn:hover { background: var(--gray-200); } html:not([data-theme="light"]) .sidebar-collapse-body { background: var(--bg-surface); border-color: var(--border-color); } } /* Scheduler tech chips — active state */ [data-theme="dark"] .sched-chip { color: var(--text-color); border-color: var(--border-color); background: var(--bg-surface); } [data-theme="dark"] .sched-chip:hover { background: var(--gray-200); } [data-theme="dark"] .sched-chip.active { color: var(--text-color); background: var(--gray-200); } [data-theme="dark"] .sched-chip.active .sched-chip-count { color: var(--text-color); } [data-theme="dark"] .sched-chip-count { color: var(--text-secondary); } [data-theme="dark"] .sched-chip-row-label { color: var(--text-secondary); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sched-chip { color: var(--text-color); border-color: var(--border-color); background: var(--bg-surface); } html:not([data-theme="light"]) .sched-chip:hover { background: var(--gray-200); } html:not([data-theme="light"]) .sched-chip.active { color: var(--text-color); background: var(--gray-200); } html:not([data-theme="light"]) .sched-chip.active .sched-chip-count { color: var(--text-color); } html:not([data-theme="light"]) .sched-chip-count { color: var(--text-secondary); } html:not([data-theme="light"]) .sched-chip-row-label { color: var(--text-secondary); } } /* Alert items — sidebar alerts panel */ [data-theme="dark"] .alert-item { background: var(--gray-200); border-color: var(--border-color); } [data-theme="dark"] .alert-item.error { background: #450a0a; border-color: #991b1b; border-left-color: #f87171; } [data-theme="dark"] .alert-item.error .alert-address { color: #fca5a5; } [data-theme="dark"] .alert-item.error .alert-reason { color: #f87171; } [data-theme="dark"] .alert-item.error .alert-tech { color: #fca5a5; } [data-theme="dark"] .alert-item.warning { background: #451a03; border-color: #92400e; border-left-color: #fbbf24; } [data-theme="dark"] .alert-item.warning .alert-address { color: #fde68a; } [data-theme="dark"] .alert-item.warning .alert-reason { color: #fbbf24; } [data-theme="dark"] .alert-item.warning .alert-tech { color: #fde68a; } [data-theme="dark"] .alert-item.muted { background: var(--gray-100); border-color: var(--gray-300); border-left-color: var(--gray-400); } [data-theme="dark"] .alert-item.muted .alert-address { color: var(--gray-500); } [data-theme="dark"] .alert-item.muted .alert-reason { color: var(--gray-400); } [data-theme="dark"] .alert-item .alert-address { color: var(--text-color); } [data-theme="dark"] .alert-item .alert-tech { color: var(--text-secondary); } [data-theme="dark"] .alerts-subtitle { color: var(--text-secondary); } [data-theme="dark"] .alerts-subtitle.muted { color: var(--gray-500); } [data-theme="dark"] .alert-item.shooting-critical { background: #450a0a; border-left-color: #ef5350; } [data-theme="dark"] .alert-item.shooting-warning { background: #451a03; border-left-color: #ff9800; } [data-theme="dark"] .alerts-subtitle.shooting-critical { background: #450a0a; color: #f87171; border-left-color: #ef5350; } [data-theme="dark"] .alerts-subtitle.shooting-warning { background: #451a03; color: #ffb74d; border-left-color: #ff9800; } [data-theme="dark"] .alerts-subtitle.shooting-warning-sibling { background: #1a1a2e; color: #9fa8da; border-left-color: #5c6bc0; } [data-theme="dark"] .alert-item.shooting-warning-sibling { background: #1a1a2e; border-left-color: #7986cb; } [data-theme="dark"] .alert-item.shooting-warning-sibling .alert-reason em { color: #9fa8da; } [data-theme="dark"] .alerts-subtitle.absence-conflict-critical { background: #450a0a; color: #f87171; border-left-color: #ef5350; } [data-theme="dark"] .alerts-subtitle.absence-conflict-warning { background: #451a03; color: #ffb74d; border-left-color: #f59e0b; } [data-theme="dark"] .alert-item.absence-conflict-critical { background: #450a0a; border-left-color: #ef5350; } [data-theme="dark"] .alert-item.absence-conflict-warning { background: #451a03; border-left-color: #f59e0b; } [data-theme="dark"] .alerts-subtitle.pre-cancelled { background: #1a2027; color: #78909c; border-left-color: #546e7a; } [data-theme="dark"] .alerts-subtitle.pre-cancelled .alerts-subtitle-hint { color: #546e7a; } [data-theme="dark"] .alert-item.pre-cancelled { background: #1a2027; border-left-color: #546e7a; } [data-theme="dark"] .alert-item.pre-cancelled .alert-address { color: #546e7a; } [data-theme="dark"] .alert-item.pre-cancelled .alert-reason strong { color: #546e7a; } [data-theme="dark"] .task-item.task-csv-cancelled { background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(248,113,113,0.06) 6px, rgba(248,113,113,0.06) 12px); border-left-color: #f8717180; } [data-theme="dark"] .task-cancelled-badge { color: #f87171; background: #f8717115; border-color: #f8717130; } [data-theme="dark"] .trash-tabs { background: var(--gray-100); border-bottom-color: var(--border-color); } [data-theme="dark"] .trash-tab { color: var(--gray-400); } [data-theme="dark"] .trash-tab:hover { color: var(--gray-200); background: var(--gray-200); } [data-theme="dark"] .trash-tab.active { color: var(--primary-light); border-bottom-color: var(--primary-light); } [data-theme="dark"] .shooting-trash-header { background: linear-gradient(135deg, #450a0a 0%, #451a03 100%); } [data-theme="dark"] .shooting-trash-summary { color: #f87171; } [data-theme="dark"] .shooting-table thead th { background: var(--gray-200); color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .shooting-table tbody td { border-bottom-color: var(--border-color); } [data-theme="dark"] .shooting-table tbody tr:hover { background: var(--gray-100); } [data-theme="dark"] .shooting-row .shooting-val { color: #f87171; } [data-theme="dark"] .shooting-cancel-banner { background: var(--gray-100); border-color: #ef5350; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } [data-theme="dark"] .scb-section.scb-critical { background: #450a0a; border-left-color: #ef5350; } [data-theme="dark"] .scb-section.scb-warning { background: #451a03; border-left-color: #ff9800; } [data-theme="dark"] .scb-section.scb-kept { background: #0a3d0a; border-left-color: #4caf50; } [data-theme="dark"] .scb-kept-row { background: #0a3d0a; } [data-theme="dark"] .scb-kept-row:hover { background: #1b5e20 !important; } [data-theme="dark"] .sched-day-hotel-badge { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; } [data-theme="dark"] .sched-day-hotel-badge.warn { background: #451a03; border-color: #f59e0b; color: #fbbf24; } [data-theme="dark"] .sched-day-hotel-badge.danger { background: #450a0a; border-color: #ef4444; color: #f87171; } [data-theme="dark"] .sched-tech-hotel { color: #93c5fd; } [data-theme="dark"] .scb-text span { color: var(--gray-400); } [data-theme="dark"] .scb-actions { background: var(--gray-200); border-top-color: var(--border-color); } [data-theme="dark"] .scb-table thead th { background: var(--gray-200); color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .scb-table tbody td { border-bottom-color: var(--border-color); } [data-theme="dark"] .scb-table tbody tr:hover { background: var(--gray-200); } [data-theme="dark"] .scb-details-title.sibling { color: #9fa8da; border-bottom-color: #3949ab; } [data-theme="dark"] .scb-details-title.sibling i { color: #9fa8da; } [data-theme="dark"] .scb-table-sibling { border-color: #3949ab; } [data-theme="dark"] .scb-sibling-row { background: #1a1a2e; } [data-theme="dark"] .scb-sibling-row:hover { background: #1e1e3a !important; } [data-theme="dark"] .scb-sibling-row em { color: #9fa8da; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .alert-item { background: var(--gray-200); border-color: var(--border-color); } html:not([data-theme="light"]) .alert-item.error { background: #450a0a; border-color: #991b1b; border-left-color: #f87171; } html:not([data-theme="light"]) .alert-item.error .alert-address { color: #fca5a5; } html:not([data-theme="light"]) .alert-item.error .alert-reason { color: #f87171; } html:not([data-theme="light"]) .alert-item.error .alert-tech { color: #fca5a5; } html:not([data-theme="light"]) .alert-item.warning { background: #451a03; border-color: #92400e; border-left-color: #fbbf24; } html:not([data-theme="light"]) .alert-item.warning .alert-address { color: #fde68a; } html:not([data-theme="light"]) .alert-item.warning .alert-reason { color: #fbbf24; } html:not([data-theme="light"]) .alert-item.warning .alert-tech { color: #fde68a; } html:not([data-theme="light"]) .alert-item.muted { background: var(--gray-100); border-color: var(--gray-300); border-left-color: var(--gray-400); } html:not([data-theme="light"]) .alert-item.muted .alert-address { color: var(--gray-500); } html:not([data-theme="light"]) .alert-item.muted .alert-reason { color: var(--gray-400); } html:not([data-theme="light"]) .alert-item .alert-address { color: var(--text-color); } html:not([data-theme="light"]) .alert-item .alert-tech { color: var(--text-secondary); } html:not([data-theme="light"]) .alerts-subtitle { color: var(--text-secondary); } html:not([data-theme="light"]) .alerts-subtitle.muted { color: var(--gray-500); } html:not([data-theme="light"]) .alert-item.shooting-critical { background: #450a0a; border-left-color: #ef5350; } html:not([data-theme="light"]) .alert-item.shooting-warning { background: #451a03; border-left-color: #ff9800; } html:not([data-theme="light"]) .alerts-subtitle.shooting-critical { background: #450a0a; color: #f87171; border-left-color: #ef5350; } html:not([data-theme="light"]) .alerts-subtitle.shooting-warning { background: #451a03; color: #ffb74d; border-left-color: #ff9800; } html:not([data-theme="light"]) .alerts-subtitle.shooting-warning-sibling { background: #1a1a2e; color: #9fa8da; border-left-color: #5c6bc0; } html:not([data-theme="light"]) .alert-item.shooting-warning-sibling { background: #1a1a2e; border-left-color: #7986cb; } html:not([data-theme="light"]) .alert-item.shooting-warning-sibling .alert-reason em { color: #9fa8da; } html:not([data-theme="light"]) .alerts-subtitle.absence-conflict-critical { background: #450a0a; color: #f87171; border-left-color: #ef5350; } html:not([data-theme="light"]) .alerts-subtitle.absence-conflict-warning { background: #451a03; color: #ffb74d; border-left-color: #f59e0b; } html:not([data-theme="light"]) .alert-item.absence-conflict-critical { background: #450a0a; border-left-color: #ef5350; } html:not([data-theme="light"]) .alert-item.absence-conflict-warning { background: #451a03; border-left-color: #f59e0b; } html:not([data-theme="light"]) .alerts-subtitle.pre-cancelled { background: #1a2027; color: #78909c; border-left-color: #546e7a; } html:not([data-theme="light"]) .alerts-subtitle.pre-cancelled .alerts-subtitle-hint { color: #546e7a; } html:not([data-theme="light"]) .alert-item.pre-cancelled { background: #1a2027; border-left-color: #546e7a; } html:not([data-theme="light"]) .alert-item.pre-cancelled .alert-address { color: #546e7a; } html:not([data-theme="light"]) .alert-item.pre-cancelled .alert-reason strong { color: #546e7a; } html:not([data-theme="light"]) .task-item.task-csv-cancelled { background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(248,113,113,0.06) 6px, rgba(248,113,113,0.06) 12px); border-left-color: #f8717180; } html:not([data-theme="light"]) .task-cancelled-badge { color: #f87171; background: #f8717115; border-color: #f8717130; } html:not([data-theme="light"]) .trash-tabs { background: var(--gray-100); border-bottom-color: var(--border-color); } html:not([data-theme="light"]) .trash-tab { color: var(--gray-400); } html:not([data-theme="light"]) .trash-tab:hover { color: var(--gray-200); background: var(--gray-200); } html:not([data-theme="light"]) .trash-tab.active { color: var(--primary-light); border-bottom-color: var(--primary-light); } html:not([data-theme="light"]) .shooting-trash-header { background: linear-gradient(135deg, #450a0a 0%, #451a03 100%); } html:not([data-theme="light"]) .shooting-trash-summary { color: #f87171; } html:not([data-theme="light"]) .shooting-table thead th { background: var(--gray-200); color: var(--text-secondary); border-bottom-color: var(--border-color); } html:not([data-theme="light"]) .shooting-table tbody td { border-bottom-color: var(--border-color); } html:not([data-theme="light"]) .shooting-table tbody tr:hover { background: var(--gray-100); } html:not([data-theme="light"]) .shooting-row .shooting-val { color: #f87171; } html:not([data-theme="light"]) .shooting-cancel-banner { background: var(--gray-100); border-color: #ef5350; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } html:not([data-theme="light"]) .scb-section.scb-critical { background: #450a0a; border-left-color: #ef5350; } html:not([data-theme="light"]) .scb-section.scb-warning { background: #451a03; border-left-color: #ff9800; } html:not([data-theme="light"]) .scb-section.scb-kept { background: #0a3d0a; border-left-color: #4caf50; } html:not([data-theme="light"]) .scb-kept-row { background: #0a3d0a; } html:not([data-theme="light"]) .scb-kept-row:hover { background: #1b5e20 !important; } html:not([data-theme="light"]) .sched-day-hotel-badge { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; } html:not([data-theme="light"]) .sched-day-hotel-badge.warn { background: #451a03; border-color: #f59e0b; color: #fbbf24; } html:not([data-theme="light"]) .sched-day-hotel-badge.danger { background: #450a0a; border-color: #ef4444; color: #f87171; } html:not([data-theme="light"]) .sched-tech-hotel { color: #93c5fd; } html:not([data-theme="light"]) .scb-text span { color: var(--gray-400); } html:not([data-theme="light"]) .scb-actions { background: var(--gray-200); border-top-color: var(--border-color); } html:not([data-theme="light"]) .scb-table thead th { background: var(--gray-200); color: var(--text-secondary); border-bottom-color: var(--border-color); } html:not([data-theme="light"]) .scb-table tbody td { border-bottom-color: var(--border-color); } html:not([data-theme="light"]) .scb-table tbody tr:hover { background: var(--gray-200); } html:not([data-theme="light"]) .scb-details-title.sibling { color: #9fa8da; border-bottom-color: #3949ab; } html:not([data-theme="light"]) .scb-details-title.sibling i { color: #9fa8da; } html:not([data-theme="light"]) .scb-table-sibling { border-color: #3949ab; } html:not([data-theme="light"]) .scb-sibling-row { background: #1a1a2e; } html:not([data-theme="light"]) .scb-sibling-row:hover { background: #1e1e3a !important; } html:not([data-theme="light"]) .scb-sibling-row em { color: #9fa8da; } } /* Tech group chips — sidebar */ [data-theme="dark"] .tech-group-chip { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .tech-group-chip:hover { border-color: var(--primary-light); color: var(--primary-light); } [data-theme="dark"] .tech-group-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .tech-group-chip.off { background: var(--gray-100); color: var(--gray-400); } [data-theme="dark"] .tech-filter-item { color: var(--text-color); } [data-theme="dark"] .tech-filter-item.selected { background: var(--gray-200); } [data-theme="dark"] .tech-filter-item:hover { background: var(--gray-200); } [data-theme="dark"] .tech-filter-item .tech-name { color: var(--text-color); } [data-theme="dark"] .tech-filter-item .tech-count { color: var(--text-secondary); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .tech-group-chip { background: var(--gray-200); border-color: var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) .tech-group-chip:hover { border-color: var(--primary-light); color: var(--primary-light); } html:not([data-theme="light"]) .tech-group-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } html:not([data-theme="light"]) .tech-group-chip.off { background: var(--gray-100); color: var(--gray-400); } html:not([data-theme="light"]) .tech-filter-item { color: var(--text-color); } html:not([data-theme="light"]) .tech-filter-item.selected { background: var(--gray-200); } html:not([data-theme="light"]) .tech-filter-item:hover { background: var(--gray-200); } html:not([data-theme="light"]) .tech-filter-item .tech-name { color: var(--text-color); } html:not([data-theme="light"]) .tech-filter-item .tech-count { color: var(--text-secondary); } } /* Agent email modal */ [data-theme="dark"] .agent-email-modal { background: var(--bg-surface); color: var(--text-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .agent-email-modal { background: var(--bg-surface); color: var(--text-color); } } /* Toast */ [data-theme="dark"] .toast { background: var(--gray-200); color: var(--text-color); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .toast { background: var(--gray-200); color: var(--text-color); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } } /* Tables */ [data-theme="dark"] table th { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] table td { border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] table tr:hover td { background: var(--gray-200); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) table th { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border-color); } html:not([data-theme="light"]) table td { border-color: var(--border-color); color: var(--text-color); } html:not([data-theme="light"]) table tr:hover td { background: var(--gray-200); } } /* Headings & links */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-color); } [data-theme="dark"] a { color: var(--primary-light); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) h1, html:not([data-theme="light"]) h2, html:not([data-theme="light"]) h3, html:not([data-theme="light"]) h4, html:not([data-theme="light"]) h5, html:not([data-theme="light"]) h6 { color: var(--text-color); } html:not([data-theme="light"]) a { color: var(--primary-light); } } /* HR */ [data-theme="dark"] hr { border-color: var(--border-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) hr { border-color: var(--border-color); } } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--gray-100); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-300); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) ::-webkit-scrollbar-track { background: var(--gray-100); } html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: var(--gray-300); } html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } } /* Leaflet */ [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.8) contrast(1.1) saturate(0.85); } [data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--bg-surface); color: var(--text-color); } [data-theme="dark"] .leaflet-control-layers { background: var(--bg-surface) !important; color: var(--text-color); border-color: var(--border-color) !important; } [data-theme="dark"] .leaflet-control-zoom a { background: var(--bg-surface) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .leaflet-control-zoom a:hover { background: var(--gray-200) !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.8) contrast(1.1) saturate(0.85); } html:not([data-theme="light"]) .leaflet-popup-content-wrapper, html:not([data-theme="light"]) .leaflet-popup-tip { background: var(--bg-surface); color: var(--text-color); } html:not([data-theme="light"]) .leaflet-control-layers { background: var(--bg-surface) !important; color: var(--text-color); border-color: var(--border-color) !important; } html:not([data-theme="light"]) .leaflet-control-zoom a { background: var(--bg-surface) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html:not([data-theme="light"]) .leaflet-control-zoom a:hover { background: var(--gray-200) !important; } } /* Month view */ [data-theme="dark"] .month-cell, [data-theme="dark"] .month-header, [data-theme="dark"] .month-toolbar { color: var(--text-color); border-color: var(--border-color); } [data-theme="dark"] .month-cell.other-month { background: var(--gray-50); color: var(--gray-400); } [data-theme="dark"] .month-cell:hover { background: var(--gray-200); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .month-cell, html:not([data-theme="light"]) .month-header, html:not([data-theme="light"]) .month-toolbar { color: var(--text-color); border-color: var(--border-color); } html:not([data-theme="light"]) .month-cell.other-month { background: var(--gray-50); color: var(--gray-400); } html:not([data-theme="light"]) .month-cell:hover { background: var(--gray-200); } } /* Kalkulator */ [data-theme="dark"] .calc-container, [data-theme="dark"] .calc-card { background: var(--bg-surface); color: var(--text-color); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .calc-container, html:not([data-theme="light"]) .calc-card { background: var(--bg-surface); color: var(--text-color); } } /* ===== ONBOARDING TOUR — dark ===== */ [data-theme="dark"] .tour-tooltip { background: #1e293b; color: #e2e8f0; border: 1px solid #475569; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } [data-theme="dark"] .tour-step-counter { color: #94a3b8; } [data-theme="dark"] .tour-tooltip .btn { background: #374151; color: #e2e8f0; border-color: #4b5563; } [data-theme="dark"] .tour-tooltip .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .tour-tooltip { background: #1e293b; color: #e2e8f0; border: 1px solid #475569; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } html:not([data-theme="light"]) .tour-step-counter { color: #94a3b8; } html:not([data-theme="light"]) .tour-tooltip .btn { background: #374151; color: #e2e8f0; border-color: #4b5563; } html:not([data-theme="light"]) .tour-tooltip .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); } } /* ===== DARK MODE TOGGLE BUTTON ===== */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius); background: transparent; color: var(--gray-400); cursor: pointer; transition: all var(--transition-normal); font-size: 16px; } .theme-toggle:hover { background: rgba(255,255,255,0.15); color: white; } .theme-toggle [class*="fa-sun"] { display: none; } .theme-toggle .fa-moon { display: inline; } [data-theme="dark"] .theme-toggle [class*="fa-sun"] { display: inline; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle [class*="fa-sun"] { display: inline; } html:not([data-theme="light"]) .theme-toggle .fa-moon { display: none; } } /* Intro button */ .intro-btn { width: 32px; height: 32px; border: none; border-radius: var(--radius); background: transparent; color: var(--gray-400); cursor: pointer; font-size: 15px; transition: all var(--transition-normal); display: flex; align-items: center; justify-content: center; padding: 0; } .intro-btn:hover { background: rgba(255,255,255,0.15); color: white; } /* Geocode review panel — dark mode */ [data-theme="dark"] .geocode-review-panel { background: var(--gray-100); border-color: var(--gray-300); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } [data-theme="dark"] .gcr-body { background: var(--gray-100); } [data-theme="dark"] .gcr-address { color: var(--text-color); } [data-theme="dark"] .gcr-meta { color: var(--gray-500); } [data-theme="dark"] .gcr-actions { background: var(--gray-200); border-color: var(--gray-300); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .geocode-review-panel { background: var(--gray-100); border-color: var(--gray-300); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } html:not([data-theme="light"]) .gcr-body { background: var(--gray-100); } html:not([data-theme="light"]) .gcr-address { color: var(--text-color); } html:not([data-theme="light"]) .gcr-meta { color: var(--gray-500); } html:not([data-theme="light"]) .gcr-actions { background: var(--gray-200); border-color: var(--gray-300); } }