/** * Dark Mode * ระบบติดตามผู้ป่วยนิติจิตเวช — FMH90 * * Activated by [data-theme="dark"] on * Toggle saved in localStorage('theme') */ /* ============================================ DARK MODE — Override CSS Variables ============================================ */ [data-theme="dark"] { /* ---- Brief semantic tokens (new Phase 1+ surface) ---- */ --bg: #0A1814; --surface: #102821; --ink: #E4F0EC; --muted: #7A938D; --line: #1E3A33; --brand: var(--primary-400); /* Status surface variants — darker tints that still meet contrast */ --success-surface: rgba(27, 94, 32, 0.22); --warning-surface: rgba(239, 108, 0, 0.22); --danger-surface: rgba(183, 28, 28, 0.22); --info-surface: rgba(13, 71, 161, 0.28); /* Brand primary gets brighter variants in dark so contrast survives */ --primary-50: #0d3b33; --primary-100: #104d42; --primary-200: #1a6a5b; --primary-300: #26a69a; --primary-400: #4db6ac; --primary-500: #7bd1c6; --primary-600: #a3e2d9; /* Gold pale tints for dark — used by .pill-gold etc. */ --gold-50: rgba(141, 106, 10, 0.25); --gold-100: rgba(141, 106, 10, 0.35); /* Gradients — lighter brand so CTAs remain readable */ --grad-brand: linear-gradient(135deg, var(--primary-300), var(--primary-500)); /* Shadows — stronger drop on dark surfaces */ --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 12px rgba(0, 0, 0, 0.5); --sh-3: 0 10px 26px rgba(0, 0, 0, 0.55); --sh-brand: 0 10px 26px rgba(38, 166, 154, 0.35); /* ---- Legacy aliases (preserve previously shipped rules) ---- */ --white: #1a1a2e; --gray-50: #16213e; --gray-100: #1a1a2e; --gray-200: #2a2a4a; --gray-300: #3a3a5a; --gray-400: #6a6a8a; --gray-500: #9a9aba; --gray-600: #b0b0d0; --gray-700: #d0d0e8; --gray-800: #e8e8f0; --gray-900: #f0f0f8; --glass-bg: rgba(26, 26, 46, 0.92); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --primary: #00897b; --primary-light: #26a69a; --primary-lighter: #4db6ac; --primary-dark: #004d40; --primary-700: var(--primary); /* keep visual parity */ color-scheme: dark; } /* Body */ [data-theme="dark"] body { background-color: #0f0f23; color: #e0e0f0; } /* Sidebar */ [data-theme="dark"] .sidebar { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-right-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sidebar .nav-link { color: #b0b0d0; } [data-theme="dark"] .sidebar .nav-link:hover, [data-theme="dark"] .sidebar .nav-link.active { color: #fff; background: rgba(0, 137, 123, 0.2); } [data-theme="dark"] .sidebar .sidebar-section-label { color: #6a6a8a; } /* Header */ [data-theme="dark"] .main-header { background: rgba(26, 26, 46, 0.95) !important; border-bottom-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); } /* Cards */ [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .info-card { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.06); color: #e0e0f0; } [data-theme="dark"] .card-header { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Tables */ [data-theme="dark"] .table { color: #d0d0e8; } [data-theme="dark"] .table th { background: rgba(0, 137, 123, 0.15); color: #b0d0cc; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .table td { border-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-hover > tbody > tr:hover { background: rgba(0, 137, 123, 0.08); } /* DataTables */ [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } [data-theme="dark"] .dataTables_info { color: #9a9aba; } [data-theme="dark"] .page-item .page-link { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.08); color: #b0b0d0; } [data-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2a2a4a; border-color: var(--primary); color: #e0e0f0; box-shadow: 0 0 0 0.2rem rgba(0, 137, 123, 0.25); } [data-theme="dark"] .form-control::placeholder { color: #6a6a8a; } [data-theme="dark"] .form-label { color: #b0b0d0; } [data-theme="dark"] .input-group-text { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #9a9aba; } /* Modals */ [data-theme="dark"] .modal-content { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.08); color: #e0e0f0; } [data-theme="dark"] .modal-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .modal-footer { border-top-color: rgba(255, 255, 255, 0.06); } /* Buttons */ [data-theme="dark"] .btn-outline-secondary { color: #b0b0d0; border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.08); color: #e0e0f0; } [data-theme="dark"] .btn-light { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } /* Badges */ [data-theme="dark"] .badge.bg-light { background: #2a2a4a !important; color: #e0e0f0 !important; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .dropdown-item { color: #d0d0e8; } [data-theme="dark"] .dropdown-item:hover { background: rgba(0, 137, 123, 0.12); color: #fff; } [data-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.06); } /* Alerts */ [data-theme="dark"] .alert { border-color: rgba(255, 255, 255, 0.08); } /* Footer */ [data-theme="dark"] .main-footer { background: rgba(26, 26, 46, 0.95); border-top-color: rgba(255, 255, 255, 0.06); color: #9a9aba; } /* Bottom Navigation */ [data-theme="dark"] .mobile-bottom-nav { background: rgba(26, 26, 46, 0.95); border-top-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); } [data-theme="dark"] .bottom-nav-item { color: #6a6a8a; } [data-theme="dark"] .bottom-nav-item.active { color: #4db6ac; } /* Mobile Card View */ [data-theme="dark"] .mobile-card-view .patient-card { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.06); } /* Bottom Sheet */ [data-theme="dark"] .bottom-sheet { background: #1e1e3a; } [data-theme="dark"] .bottom-sheet-header { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Page content */ [data-theme="dark"] .page-content { background: #0f0f23; } /* Breadcrumb */ [data-theme="dark"] .breadcrumb-item a { color: #9a9aba; } [data-theme="dark"] .breadcrumb-item.active { color: #6a6a8a; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a5a; } /* Skeleton loading */ [data-theme="dark"] .skeleton { background: #2a2a4a; } [data-theme="dark"] .skeleton-card { background: #1e1e3a; } /* ============================================ Dark Mode Toggle Button ============================================ */ .dark-mode-toggle { position: relative; width: 44px; height: 24px; background: #cbd5e1; border: none; border-radius: 12px; cursor: pointer; transition: background 0.3s ease; padding: 0; flex-shrink: 0; } .dark-mode-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .dark-mode-toggle { background: #00897b; } [data-theme="dark"] .dark-mode-toggle::after { transform: translateX(20px); } .dark-mode-icon { font-size: 0.85rem; color: var(--gray-500); transition: color 0.3s ease; } [data-theme="dark"] .dark-mode-icon { color: #ffd700; } /* ============================================ TOP LOADING BAR (NProgress style) ============================================ */ .top-loading-bar { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #26a69a, #00e5ff, #26a69a); background-size: 200% 100%; z-index: 99999; transition: width 0.4s ease; animation: loading-bar-shimmer 1.5s linear infinite; pointer-events: none; } .top-loading-bar.active { width: 85%; } .top-loading-bar.done { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.4s ease 0.2s; } @keyframes loading-bar-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-theme="dark"] .top-loading-bar { background: linear-gradient(90deg, #4db6ac, #00e5ff, #4db6ac); background-size: 200% 100%; animation: loading-bar-shimmer 1.5s linear infinite; } /* ============================================ PAGE TRANSITIONS ============================================ */ .page-content { animation: page-fade-in 0.3s ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .page-exit { opacity: 0; transform: translateY(-8px); transition: opacity 0.15s ease, transform 0.15s ease; } @media (prefers-reduced-motion: reduce) { .page-content { animation: none; } .page-exit { transition: none; } .top-loading-bar { animation: none; } } /* ============================================ Auto Dark Mode (system preference) ============================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { /* Only apply if user hasn't explicitly chosen */ } } /* ============================================ Phase 1–3 Components — dark overrides Keep text over brand/status backgrounds explicitly #fff since the legacy --white token resolves to dark in this theme. ============================================ */ [data-theme="dark"] .fmh-mobile-hero, [data-theme="dark"] .fmh-patient-hero, [data-theme="dark"] .fmh-patient-hero-name, [data-theme="dark"] .fmh-patient-hero-id, [data-theme="dark"] .fmh-patient-hero-meta > div, [data-theme="dark"] .btn-gold, [data-theme="dark"] .btn-gold:hover, [data-theme="dark"] .btn-gold:focus, [data-theme="dark"] .bottom-nav-fab, [data-theme="dark"] .bottom-nav-fab:hover, [data-theme="dark"] .bottom-nav-fab:focus, [data-theme="dark"] .fmh-step-btn-primary, [data-theme="dark"] .fmh-step-btn-primary:hover, [data-theme="dark"] .fmh-step-btn-primary:focus-visible, [data-theme="dark"] .fmh-step-btn-success, [data-theme="dark"] .fmh-step-btn-success:hover, [data-theme="dark"] .fmh-step-btn-success:focus-visible, [data-theme="dark"] .fmh-hero-btn-success, [data-theme="dark"] .fmh-hero-btn-warning, [data-theme="dark"] .fmh-hero-btn-danger, [data-theme="dark"] .fmh-hero-btn-ghost, [data-theme="dark"] .fmh-hero-btn, [data-theme="dark"] .fmh-timeline-dot { color: #ffffff; } /* Active chip keeps strong contrast in dark */ [data-theme="dark"] .fmh-chip.is-active, [data-theme="dark"] .fmh-chip-success.is-active, [data-theme="dark"] .fmh-chip-warning.is-active, [data-theme="dark"] .fmh-chip-danger.is-active, [data-theme="dark"] .fmh-chip-muted.is-active { color: #ffffff; } /* Status pills: keep readable text on tinted bg in dark */ [data-theme="dark"] .pill-success { color: #7ee38a; } [data-theme="dark"] .pill-warning { color: #ffb168; } [data-theme="dark"] .pill-danger { color: #ff7e7e; } [data-theme="dark"] .pill-info { color: #82b0ff; } [data-theme="dark"] .pill-gold { color: #e6c458; } [data-theme="dark"] .pill-brand { color: var(--primary-300); } /* Mobile quick-action icons — surfaces go darker */ [data-theme="dark"] .fmh-mqa { background: var(--surface); border-color: var(--line); color: var(--ink); } /* Cards in dark mode use --surface (already dark via token override) */ [data-theme="dark"] .fmh-card, [data-theme="dark"] .fmh-surface, [data-theme="dark"] .fmh-patient-card, [data-theme="dark"] .fmh-timeline-card, [data-theme="dark"] .fmh-review-card { background: var(--surface); border-color: var(--line); color: var(--ink); } /* Filter chips base in dark */ [data-theme="dark"] .fmh-chip { background: var(--surface); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .fmh-chip-count { background: var(--line); color: var(--muted); } /* Step nav sticky footer on dark */ [data-theme="dark"] .fmh-step-nav { background: var(--bg); border-top-color: var(--line); } [data-theme="dark"] .fmh-step-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .fmh-step-btn-ghost:hover, [data-theme="dark"] .fmh-step-btn-ghost:focus-visible { background: var(--bg); color: var(--ink); border-color: var(--primary-400); } /* Stepper dot base in dark */ [data-theme="dark"] .fmh-stepper-dot { background: var(--surface); border-color: var(--line); color: var(--muted); } [data-theme="dark"] .fmh-stepper-item.is-active .fmh-stepper-dot { background: var(--primary-400); border-color: var(--primary-400); color: #062018; box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.18); } [data-theme="dark"] .fmh-stepper-item.is-complete .fmh-stepper-dot { background: var(--primary-500); border-color: var(--primary-500); color: #062018; } [data-theme="dark"] .fmh-stepper-item:not(:last-child)::after { background: var(--line); } [data-theme="dark"] .fmh-stepper-item.is-active:not(:last-child)::after, [data-theme="dark"] .fmh-stepper-item.is-complete:not(:last-child)::after { background: var(--primary-400); } /* .fmh-hero-btn-primary uses var(--white) as background in light mode; since --white gets overridden to a near-black in dark, the edit button would disappear. Restore a readable glass fill. */ [data-theme="dark"] .fmh-hero-btn-primary, [data-theme="dark"] .fmh-hero-btn-primary:hover, [data-theme="dark"] .fmh-hero-btn-primary:focus-visible { background: rgba(255, 255, 255, 0.92); color: var(--primary-700); } /* High-risk-alert card: lighten warning/danger surfaces on dark bg */ [data-theme="dark"] .high-risk-alert { background: linear-gradient(135deg, rgba(239, 108, 0, 0.18) 0%, rgba(183, 28, 28, 0.22) 100%); border-color: rgba(255, 126, 126, 0.4); } [data-theme="dark"] .hr-title h6, [data-theme="dark"] .hr-title small { color: #ff9e9e; } [data-theme="dark"] .hr-item { background: var(--surface); border-color: rgba(255, 126, 126, 0.3); color: var(--ink); } [data-theme="dark"] .hr-item:hover { color: var(--ink); } [data-theme="dark"] .hr-name { color: var(--ink); } [data-theme="dark"] .hr-meta { color: var(--muted); }