/* * PeriopIQ — Dark Mode Theme * * Strategy: CSS custom properties + [data-theme="dark"] overrides. * Applied via on every * staff-facing template. The patient-facing kiosk pages (question.html, * questionnaire_summary.html, thank_you.html, start.html, results.html, * kiosk_questionnaire.html) intentionally do NOT include this file. * * Toggle is persisted in localStorage under the key "periopiq-theme". * A no-flash script at the top of each template reads that key and sets * data-theme="dark" on before the first paint. */ /* ============================================================ LIGHT MODE — explicit defaults (used even without dark mode) ============================================================ */ :root { --bg-page: #f8fafc; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-nav: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-stripe: #f7fafc; --bg-muted: #f1f5f9; --bg-code: #f3f4f6; --border: #e2e8f0; --border-strong: #cbd5e1; --text-primary: #1e293b; --text-secondary: #4a5568; --text-muted: #718096; --text-faint: #a0aec0; --accent-blue: #2563eb; --accent-blue-bg: #eff6ff; --accent-purple: #5a6acf; --accent-green: #16a34a; --accent-red: #dc2626; --accent-amber: #d97706; --status-go-bg: #d1fae5; --status-go-text: #065f46; --status-nogo-bg: #fee2e2; --status-nogo-text:#991b1b; --status-hold-bg: #fef3c7; --status-hold-text:#92400e; --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 12px rgba(0,0,0,0.09); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); color-scheme: light; } /* ============================================================ DARK MODE — all overrides live here ============================================================ */ [data-theme="dark"] { --bg-page: #0f1117; --bg-card: #1a1d27; --bg-sidebar: #13161f; --bg-nav: #13161f; --bg-input: #1e2130; --bg-hover: #252836; --bg-stripe: #1e2130; --bg-muted: #1e2130; --bg-code: #252836; --border: #2d3148; --border-strong: #3d4266; --text-primary: #e2e8f0; --text-secondary: #a0aec0; --text-muted: #718096; --text-faint: #4a5568; --accent-blue: #60a5fa; --accent-blue-bg: #1e2d4a; --accent-purple: #818cf8; --accent-green: #34d399; --accent-red: #f87171; --accent-amber: #fbbf24; --status-go-bg: #052e16; --status-go-text: #4ade80; --status-nogo-bg: #2d0a0a; --status-nogo-text:#fca5a5; --status-hold-bg: #2d1a00; --status-hold-text:#fcd34d; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 10px 30px rgba(0,0,0,0.6); color-scheme: dark; } /* ============================================================ GLOBAL STRUCTURAL OVERRIDES (dark mode only) ============================================================ */ /* Page backgrounds */ [data-theme="dark"] body, [data-theme="dark"] .dash-wrapper, [data-theme="dark"] .wrap { background: var(--bg-page) !important; color: var(--text-primary) !important; } /* Nav bars */ [data-theme="dark"] .top-nav, [data-theme="dark"] .dash-wrapper > .dash-header, [data-theme="dark"] nav, [data-theme="dark"] .admin-nav, [data-theme="dark"] .nav-bar { background: var(--bg-nav) !important; border-color: var(--border) !important; } /* Sidebar */ [data-theme="dark"] .sidebar, [data-theme="dark"] .dash-sidebar { background: var(--bg-sidebar) !important; border-color: var(--border) !important; } /* Cards / panels */ [data-theme="dark"] .card, [data-theme="dark"] .metric-card, [data-theme="dark"] .modal-container, [data-theme="dark"] .detail-panel, [data-theme="dark"] .task-card, [data-theme="dark"] .case-row, [data-theme="dark"] .case-table-row, [data-theme="dark"] .stat-card, [data-theme="dark"] .login-card, [data-theme="dark"] .dash-card, [data-theme="dark"] .tab-panel, [data-theme="dark"] .filter-bar, [data-theme="dark"] .q-card, [data-theme="dark"] .pref-card, [data-theme="dark"] .score-card, [data-theme="dark"] .note-card, [data-theme="dark"] .surgeon-card, [data-theme="dark"] .patient-card, [data-theme="dark"] .logistics-section { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } [data-theme="dark"] .logistics-section > summary { color: var(--text-primary) !important; } /* White backgrounds — the most pervasive pattern */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#ffffff"], [data-theme="dark"] [style*="background-color: #ffffff"] { background: var(--bg-card) !important; } /* Light gray page backgrounds */ [data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background:#f0f2f5"], [data-theme="dark"] [style*="background:#f1f5f9"], [data-theme="dark"] [style*="background:#f7fafc"], [data-theme="dark"] [style*="background:#f9fafb"], [data-theme="dark"] [style*="background:#edf2f7"] { background: var(--bg-muted) !important; } /* Borders */ [data-theme="dark"] [style*="border-color:#e2e8f0"], [data-theme="dark"] [style*="border-color:#d1d5db"], [data-theme="dark"] [style*="border-color:#cbd5e1"], [data-theme="dark"] [style*="border: 1px solid #e2e8f0"], [data-theme="dark"] [style*="border: 1px solid #d1d5db"] { border-color: var(--border) !important; } /* Text — common muted colors */ [data-theme="dark"] [style*="color:#718096"], [data-theme="dark"] [style*="color: #718096"], [data-theme="dark"] [style*="color:#64748b"], [data-theme="dark"] [style*="color: #64748b"], [data-theme="dark"] [style*="color:#94a3b8"], [data-theme="dark"] [style*="color: #94a3b8"], [data-theme="dark"] [style*="color:#a0aec0"], [data-theme="dark"] [style*="color: #a0aec0"] { color: var(--text-muted) !important; } [data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color: #1e293b"], [data-theme="dark"] [style*="color:#1a202c"], [data-theme="dark"] [style*="color: #1a202c"], [data-theme="dark"] [style*="color:#334155"], [data-theme="dark"] [style*="color: #334155"], [data-theme="dark"] [style*="color:#2d3748"], [data-theme="dark"] [style*="color: #2d3748"], [data-theme="dark"] [style*="color:#374151"], [data-theme="dark"] [style*="color: #374151"] { color: var(--text-primary) !important; } /* Forms — inputs, selects, textareas */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--accent-blue) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important; outline: none; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; } /* Tables */ [data-theme="dark"] table { color: var(--text-primary) !important; } [data-theme="dark"] th { background: var(--bg-muted) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] td { border-color: var(--border) !important; } [data-theme="dark"] tr:hover td { background: var(--bg-hover) !important; } /* ============================================================ CASE FILE SPECIFIC ============================================================ */ [data-theme="dark"] .patient-header { border-color: var(--border) !important; } [data-theme="dark"] .patient-header .dob, [data-theme="dark"] .patient-header .mrn { color: var(--text-muted) !important; } [data-theme="dark"] .nav-item { color: var(--text-secondary) !important; } [data-theme="dark"] .nav-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .nav-item.active { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .nav-section h4 { color: var(--text-faint) !important; } [data-theme="dark"] .info-item { background: var(--bg-muted) !important; } [data-theme="dark"] .info-item .label { color: var(--text-muted) !important; } [data-theme="dark"] .def-action { background: var(--bg-muted) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .def-action:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .sidebar-questionnaire { background: linear-gradient(135deg, #1a1730 0%, #1c1a35 100%) !important; border-color: #3d3672 !important; } [data-theme="dark"] .sq-btn { background: var(--bg-card) !important; border-color: #3d3672 !important; color: #a78bfa !important; } [data-theme="dark"] .sq-btn:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .sq-done { background: var(--status-go-bg) !important; color: var(--status-go-text) !important; } [data-theme="dark"] .deficiency-list li { border-color: var(--border) !important; } [data-theme="dark"] .task-list li { border-color: var(--border) !important; } [data-theme="dark"] .summary-header .subtitle { color: var(--text-muted) !important; } [data-theme="dark"] .card-subtitle { color: var(--text-muted) !important; } [data-theme="dark"] .metric-card .metric-label { color: var(--text-muted) !important; } /* Status banners — keep semantic color but darken background */ [data-theme="dark"] .status-banner.go { background: var(--status-go-bg) !important; border-color: #166534 !important; } [data-theme="dark"] .status-banner.no_go { background: var(--status-nogo-bg) !important; border-color: #7f1d1d !important; } [data-theme="dark"] .status-banner.hold { background: var(--status-hold-bg) !important; border-color: #78350f !important; } [data-theme="dark"] .status-banner.pre_scheduling { background: #1a1230 !important; border-color: #4c1d95 !important; } [data-theme="dark"] .status-banner .banner-detail { color: var(--text-muted) !important; } /* Status badges */ [data-theme="dark"] .status-badge.go { background: var(--status-go-bg) !important; color: var(--status-go-text) !important; } [data-theme="dark"] .status-badge.no_go { background: var(--status-nogo-bg) !important; color: var(--status-nogo-text) !important; } [data-theme="dark"] .status-badge.hold { background: var(--status-hold-bg) !important; color: var(--status-hold-text) !important; } [data-theme="dark"] .status-badge.scheduled { background: var(--accent-blue-bg) !important; color: var(--accent-blue) !important; } [data-theme="dark"] .status-badge.pre_scheduling { background: #1a1230 !important; color: #a78bfa !important; } /* Nav links in top bar */ [data-theme="dark"] .top-nav .nav-links a { color: var(--text-secondary) !important; } [data-theme="dark"] .top-nav .nav-links a:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } /* Schedule card accent */ [data-theme="dark"] .schedule-card { border-left-color: var(--accent-blue) !important; } [data-theme="dark"] .btn-schedule { background: var(--accent-blue) !important; } /* Modal overlay backdrop */ [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.75) !important; } /* ============================================================ SCHEDULER DASHBOARD SPECIFIC ============================================================ */ [data-theme="dark"] .dash-title { color: var(--text-primary) !important; } [data-theme="dark"] .dash-subtitle { color: var(--text-muted) !important; } /* Patient name in the list/table view */ [data-theme="dark"] .patient-name { color: var(--text-primary) !important; } [data-theme="dark"] .patient-name-link { color: var(--text-primary) !important; } [data-theme="dark"] .patient-name-link:hover { color: var(--accent-blue) !important; } [data-theme="dark"] .patient-dob { color: var(--text-faint) !important; } /* Case table */ [data-theme="dark"] .case-table-header { background: var(--bg-muted) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] .case-row, [data-theme="dark"] .case-table-row { border-color: var(--border) !important; } [data-theme="dark"] .case-row:hover, [data-theme="dark"] .case-table-row:hover { background: var(--bg-hover) !important; } /* Stat/summary cards */ [data-theme="dark"] .stat-card { background: var(--bg-card) !important; border-color: var(--border) !important; } /* Filter bar / view switcher */ [data-theme="dark"] .view-btn, [data-theme="dark"] .cal-nav-btn { background: var(--bg-muted) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } [data-theme="dark"] .view-btn:hover, [data-theme="dark"] .cal-nav-btn:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .view-btn.active { background: var(--accent-blue) !important; color: #fff !important; border-color: var(--accent-blue) !important; } /* Calendar grids */ [data-theme="dark"] .month-grid, [data-theme="dark"] .week-grid, [data-theme="dark"] .day-grid { background: var(--border) !important; border-color: var(--border-strong) !important; } [data-theme="dark"] .month-cell { background: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="dark"] .month-cell:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .month-cell.other-month { background: var(--bg-page) !important; } [data-theme="dark"] .month-cell.today { background: var(--accent-blue-bg) !important; border-color: var(--accent-blue) !important; } [data-theme="dark"] .month-day-header, [data-theme="dark"] .week-day-header { background: var(--bg-muted) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } [data-theme="dark"] .week-day-header.today { background: var(--accent-blue-bg) !important; color: var(--accent-blue) !important; border-bottom-color: var(--accent-blue) !important; } [data-theme="dark"] .week-time-label, [data-theme="dark"] .day-time-label { background: var(--bg-muted) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] .week-cell, [data-theme="dark"] .day-time-row { border-color: var(--border) !important; } [data-theme="dark"] .week-cell.hour-boundary, [data-theme="dark"] .day-time-row.hour-boundary { border-bottom-color: var(--border-strong) !important; } [data-theme="dark"] .week-cell:hover, [data-theme="dark"] .day-time-row:hover { background: var(--bg-hover) !important; } /* Expandable detail rows */ [data-theme="dark"] .detail-panel { background: var(--bg-stripe) !important; border-color: var(--border) !important; } [data-theme="dark"] .detail-section { color: var(--text-primary) !important; } /* ============================================================ ADMIN PAGES ============================================================ */ [data-theme="dark"] .flash-sent { background: var(--status-go-bg) !important; border-color: #166534 !important; color: var(--status-go-text) !important; } [data-theme="dark"] .flash-fallback { background: var(--status-hold-bg) !important; border-color: #78350f !important; color: var(--status-hold-text) !important; } /* ============================================================ SHARED BUTTON STYLES ============================================================ */ [data-theme="dark"] button:not([style*="background"]):not(.btn-schedule):not(.view-btn.active) { background: var(--bg-muted) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } /* Destructive/danger buttons — keep red, just darken */ [data-theme="dark"] .btn-danger, [data-theme="dark"] [style*="background:#ef4444"], [data-theme="dark"] [style*="background:#dc2626"], [data-theme="dark"] [style*="background:#e53e3e"] { filter: brightness(0.85) !important; } /* Primary blue buttons */ [data-theme="dark"] [style*="background:#2563eb"], [data-theme="dark"] [style*="background:#3182ce"], [data-theme="dark"] [style*="background:#5a6acf"], [data-theme="dark"] [style*="background:#6366f1"] { filter: brightness(1.1) !important; } /* Green confirm/success buttons */ [data-theme="dark"] [style*="background:#38a169"], [data-theme="dark"] [style*="background:#16a34a"], [data-theme="dark"] [style*="background:#22c55e"] { filter: brightness(0.85) !important; } /* ============================================================ SCROLLBAR STYLING (dark mode) ============================================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-page); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5568; } /* ============================================================ DARK MODE TOGGLE BUTTON ============================================================ */ .dark-mode-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong, #cbd5e1); background: transparent; color: var(--text-secondary, #4a5568); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .dark-mode-toggle:hover { background: var(--bg-hover, #f1f5f9); border-color: var(--accent-blue, #2563eb); color: var(--accent-blue, #2563eb); } .dark-mode-toggle .toggle-icon { font-size: 0.95rem; line-height: 1; }