/* ============================================================================ dark-content.css — dark mode for PAGE CONTENT (the nav themes itself via nav-tokens.css). Activated by the `theme-dark` class on , which assets/js/nav-shell.js (and an early inline script in parts/header.php) set from the user's choice or the OS preference. Reuses the nav's --nv-* dark palette so content matches the shell. ========================================================================== */ /* Native controls (scrollbars, date/number pickers, form widgets) go dark. */ html.theme-dark { color-scheme: dark; } /* ---- 1) Remap common per-module design tokens to the dark palette -------- High specificity (:root.theme-dark) so these beat each page's inline `:root { --token: }` regardless of load order. */ :root.theme-dark { /* Profile settings */ --ps-bg: var(--nv-bg); --ps-border: var(--nv-border); --ps-muted: var(--nv-text-soft); --ps-primary-soft: #17263a; /* Home dashboard */ --dash-bg: var(--nv-bg); --dash-border: var(--nv-border); --dash-text: var(--nv-text); --dash-muted: var(--nv-text-soft); --dash-shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); /* Chart of Accounts */ --coa-light: var(--nv-surface-2); --coa-border: var(--nv-border); --coa-text: var(--nv-text-soft); --coa-dark: var(--nv-text); --coa-text-muted: var(--nv-text-mute); --coa-shadow: 0 4px 6px -1px rgba(0,0,0,.5); --coa-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.55); /* EMR module surfaces (names vary; harmless if unused) */ --emr-bg: var(--nv-bg); --emr-surface: var(--nv-surface); --emr-card: var(--nv-surface); --emr-border: var(--nv-border); --emr-text: var(--nv-text); --emr-muted: var(--nv-text-soft); --emr-soft: #17263a; /* Generic bootstrap-ish surfaces some pages read */ --bs-body-bg: var(--nv-bg); --bs-body-color: var(--nv-text); } /* ---- 2) Base content surface -------------------------------------------- */ .theme-dark .app-content, .theme-dark .ps-page, .theme-dark .dash, .theme-dark .coa-container { background: var(--nv-bg); color: var(--nv-text); } .theme-dark { --al-surface: var(--nv-surface); --al-surface-2: var(--nv-surface-2); } /* ---- 3) Bootstrap components -------------------------------------------- */ .theme-dark .card, .theme-dark .modal-content, .theme-dark .list-group, .theme-dark .accordion, .theme-dark .accordion-item, .theme-dark .offcanvas, .theme-dark .toast { background-color: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text); } .theme-dark .card-header, .theme-dark .card-footer, .theme-dark .modal-header, .theme-dark .modal-footer, .theme-dark .list-group-item { background-color: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text); } .theme-dark .list-group-item + .list-group-item { border-top-color: var(--nv-border); } .theme-dark .dropdown-menu { background-color: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text); box-shadow: 0 8px 24px rgba(0,0,0,.5); } .theme-dark .dropdown-item { color: var(--nv-text); } .theme-dark .dropdown-item:hover, .theme-dark .dropdown-item:focus { background-color: var(--nv-surface-2); color: var(--nv-text); } .theme-dark .dropdown-divider { border-color: var(--nv-border); } /* Tables */ .theme-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--nv-text); --bs-table-border-color: var(--nv-border); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-striped-color: var(--nv-text); --bs-table-hover-bg: rgba(255,255,255,.05); --bs-table-hover-color: var(--nv-text); color: var(--nv-text); border-color: var(--nv-border); } .theme-dark .table > :not(caption) > * > * { border-color: var(--nv-border); background-color: transparent; } .theme-dark .table thead th, .theme-dark .table-light, .theme-dark .table-light th, .theme-dark .table > thead { background-color: var(--nv-surface-2) !important; color: var(--nv-text-soft) !important; border-color: var(--nv-border) !important; } /* Forms */ .theme-dark .form-control, .theme-dark .form-select, .theme-dark .input-group-text { background-color: var(--nv-surface-2); border-color: var(--nv-border); color: var(--nv-text); } .theme-dark .form-control::placeholder { color: var(--nv-text-mute); } .theme-dark .form-control:focus, .theme-dark .form-select:focus { background-color: var(--nv-surface-2); color: var(--nv-text); border-color: var(--nv-brand); box-shadow: 0 0 0 .2rem rgba(59,155,255,.15); } .theme-dark .form-check-input { background-color: var(--nv-surface-2); border-color: var(--nv-border); } .theme-dark .form-control:disabled, .theme-dark .form-select:disabled { background-color: #0e1626; } .theme-dark .input-group-text { color: var(--nv-text-soft); } /* Nav tabs / pills */ .theme-dark .nav-tabs { border-bottom-color: var(--nv-border); } .theme-dark .nav-tabs .nav-link { color: var(--nv-text-soft); } .theme-dark .nav-tabs .nav-link.active { background-color: var(--nv-surface); border-color: var(--nv-border) var(--nv-border) var(--nv-surface); color: var(--nv-text); } /* ---- 4) Utility classes commonly hard-coded in pages -------------------- */ .theme-dark .bg-white { background-color: var(--nv-surface) !important; } .theme-dark .bg-light, .theme-dark .bg-body-tertiary, .theme-dark .bg-body-secondary { background-color: var(--nv-surface-2) !important; } .theme-dark .text-dark { color: var(--nv-text) !important; } .theme-dark .text-muted, .theme-dark .text-secondary { color: var(--nv-text-soft) !important; } .theme-dark .border, .theme-dark .border-top, .theme-dark .border-bottom, .theme-dark .border-start, .theme-dark .border-end { border-color: var(--nv-border) !important; } .theme-dark hr { border-color: var(--nv-border); opacity: 1; } .theme-dark code:not([class*="hljs"]) { background: var(--nv-surface-2); color: #f0a5b5; } .theme-dark pre { background: var(--nv-surface-2); color: var(--nv-text); } .theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.7); } .theme-dark .badge.bg-light { background-color: var(--nv-surface-2) !important; color: var(--nv-text) !important; } /* ---- 5) Frequent custom surfaces across modules ------------------------- */ .theme-dark .ps-card, .theme-dark .ps-nav, .theme-dark .emr-card, .theme-dark .coa-tree-panel, .theme-dark .coa-details-panel, .theme-dark .coa-stat-card, .theme-dark .coa-empty-state, .theme-dark .oc-card, .theme-dark .emr-panel, .theme-dark .stat-card { background: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text); } .theme-dark .ps-photo-box, .theme-dark .coa-search-input, .theme-dark .coa-node-code, .theme-dark .coa-tree-node:hover { background: var(--nv-surface-2); } .theme-dark .ps-card-foot, .theme-dark .coa-panel-header { background: var(--nv-surface-2); border-color: var(--nv-border); } /* Soften big colored gradient heroes so text stays readable (keep brand hue). */ .theme-dark .ps-hero, .theme-dark .emr-hero, .theme-dark .dash-welcome { box-shadow: 0 8px 28px rgba(0,0,0,.45); }