/* ============================================================================ Aflinx / LINX — Global Dark Mode layer ---------------------------------------------------------------------------- Activated by ThemeService setting `data-bs-theme="dark"` on . Why this file works across components: Angular emulated-encapsulation rules look like `.foo[_ngcontent-x]{color:#333}` → specificity (0,2,0). The selectors here are prefixed with `html[data-bs-theme="dark"]`, giving them higher specificity, so they override the hard-coded colors inside components WITHOUT editing every component file. Strategy: 1. Re-map semantic tokens for dark. 2. Blanket-fix surfaces that components hard-code to white. 3. A guarded "text safety net" so dark-on-dark text never happens — it deliberately skips buttons, badges, and `bg-*`/`text-*` utility elements so intentionally-colored content is preserved. ========================================================================== */ /* ---- 1. Semantic tokens ------------------------------------------------- */ :root { --app-surface: #ffffff; --app-surface-2: #f7f9fc; --app-surface-3: #eef2f7; --app-text: #1f2b33; --app-text-muted: #5e6b77; --app-border: #e5e9ef; } [data-bs-theme='dark'] { color-scheme: dark; --app-surface: #222831; --app-surface-2: #1b2027; --app-surface-3: #2a313b; --app-text: #e6e9ee; --app-text-muted: #a7b0ba; --app-border: #2c333d; /* Nudge Bootstrap's own tokens so native components match our palette. */ --bs-body-bg: #1b2027; --bs-body-color: #e6e9ee; --bs-border-color: #2c333d; --bs-secondary-color: #a7b0ba; --bs-tertiary-bg: #222831; --bs-emphasis-color: #ffffff; } /* ---- 2. App shell & page surfaces -------------------------------------- */ html[data-bs-theme='dark'] body, html[data-bs-theme='dark'] .body-wrapper, html[data-bs-theme='dark'] .page-wrapper { background-color: var(--app-surface-2); color: var(--app-text); } /* Header / topbar / sidebar surfaces */ html[data-bs-theme='dark'] .app-header, html[data-bs-theme='dark'] .topbar-header .navbar, html[data-bs-theme='dark'] .topbar-menu, html[data-bs-theme='dark'] .left-sidebar, html[data-bs-theme='dark'] .topbar-header #navbarNav { background-color: var(--app-surface) !important; background-image: none !important; border-color: var(--app-border) !important; box-shadow: none; } html[data-bs-theme='dark'] .topbar-header #navbarNav { box-shadow: inset 0 0 0 1px var(--app-border); } /* Header & sidebar nav text/icons — these use custom classes with hard-coded dark colors, so make them light explicitly. */ html[data-bs-theme='dark'] :is(.topbar-link, .topbar-caret, .topbar-dropdown-item, .sidebar-link), html[data-bs-theme='dark'] :is(.app-header, .topbar-menu, .left-sidebar) :is(.nav-link, a, span, i, .hide-menu) { color: var(--app-text) !important; } /* Active / hover states in the nav */ html[data-bs-theme='dark'] :is(.topbar-link:hover, .topbar-link.active, .sidebar-link:hover, .sidebar-link.active) { background-color: var(--app-surface-3) !important; color: #8fb9d6 !important; border-color: #3a4a59 !important; } /* Color the inner label + icon too — the nav text safety-net above forces these to --app-text !important, so hover/active must override them explicitly. */ html[data-bs-theme='dark'] :is(.topbar-link:hover, .topbar-link.active, .sidebar-link:hover, .sidebar-link.active) :is(i, span) { color: #8fb9d6 !important; } /* Brand logo is a dark-ink image — render it light on the dark header. (opt out per-image with class `no-dim`). */ html[data-bs-theme='dark'] :is(.logo-img, .brand-logo, .topbar-logo) img:not(.no-dim) { filter: brightness(0) invert(1) !important; } /* Right-side action icons (links/bell/apps/profile triggers) */ html[data-bs-theme='dark'] .topbar-actions :is(i, .nav-link) { color: var(--app-text); } /* Common white containers that components hard-code */ html[data-bs-theme='dark'] :is(.card, .modal-content, .offcanvas, .list-group-item, .accordion-item, .accordion-button, .popover, .toast, section.white-box, .white-box, .content-box, .box, .panel, .bg-white) { background-color: var(--app-surface) !important; color: var(--app-text); border-color: var(--app-border) !important; } html[data-bs-theme='dark'] :is(.card, .box, .panel, .white-box) { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } /* Dropdown / menu surfaces */ html[data-bs-theme='dark'] :is(.dropdown-menu, .topbar-dropdown, .mat-mdc-menu-panel, .cdk-overlay-pane .mat-mdc-select-panel) { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text); } html[data-bs-theme='dark'] :is(.dropdown-item, .topbar-dropdown-item):hover, html[data-bs-theme='dark'] :is(.dropdown-item, .topbar-dropdown-item):focus { background-color: var(--app-surface-3); color: var(--app-text); } /* Tables */ html[data-bs-theme='dark'] :is(.table, table) { --bs-table-bg: transparent; color: var(--app-text); } html[data-bs-theme='dark'] :is(thead th, .table thead th) { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] :is(.table td, .table th, table td, table th) { border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); color: var(--app-text); } /* Form controls (covers custom inputs Bootstrap's own rules might miss) */ html[data-bs-theme='dark'] :is(.form-control, .form-select, input, textarea, select, .input-group-text) { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] :is(input::placeholder, textarea::placeholder) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] :is(.form-control:disabled, input:disabled, .form-select:disabled) { background-color: #1f242b !important; } /* Horizontal rules / borders frequently hard-coded light */ html[data-bs-theme='dark'] hr { border-color: var(--app-border); opacity: 0.4; } html[data-bs-theme='dark'] [style*='border'][class], html[data-bs-theme='dark'] .border, html[data-bs-theme='dark'] :is(.border-top, .border-bottom, .border-start, .border-end) { border-color: var(--app-border) !important; } /* ---- 3. Text safety net ------------------------------------------------- * * Force readable text inside content areas, but skip anything intentionally * colored (buttons, badges, alerts, and bg-*/text-* utility elements). */ html[data-bs-theme='dark'] :is(.body-wrapper, .page-wrapper, .card, .modal-content) :is(h1, h2, h3, h4, h5, h6, p, span, li, dt, dd, label, small, strong, b, th, td, div, a):not(.btn):not(.badge):not(.alert):not([class*='bg-']):not([class*='btn-']):not([class*='badge-']):not([class*='text-white']):not([class*='text-light']):not([class*='text-primary']):not([class*='text-success']):not([class*='text-danger']):not([class*='text-warning']):not([class*='text-info']):not(.text-muted):not([style*='color']) { color: var(--app-text); } html[data-bs-theme='dark'] .text-muted, html[data-bs-theme='dark'] .text-secondary { color: var(--app-text-muted) !important; } /* Links keep an accent but readable */ html[data-bs-theme='dark'] a:not(.btn):not([class*='text-']) { color: #6bb3e6; } /* Muted/Light backgrounds used as section fills */ html[data-bs-theme='dark'] :is(.bg-light, .bg-body, .bg-body-tertiary, .bg-secondary-subtle) { background-color: var(--app-surface-3) !important; color: var(--app-text); } /* ---- 3b. Inline-style overrides --------------------------------------- * * Templates carry ~330 inline `style="color/background:#..."` declarations. * Inline styles beat normal CSS, but a stylesheet `!important` rule beats an * inline NON-important one. We match the style attribute by substring and flip * ONLY the dark/neutral values — intentional colors (red/green/yellow/teal, * light-blue #4ea6e6, whites) are deliberately left untouched. */ /* Dark / brand-dark text used inline → readable light */ html[data-bs-theme='dark'] [style*='color:#0f456b'], html[data-bs-theme='dark'] [style*='color: #0f456b'], html[data-bs-theme='dark'] [style*='color:#26395e'], html[data-bs-theme='dark'] [style*='color: #26395e'], html[data-bs-theme='dark'] [style*='color:#0b4a7d'], html[data-bs-theme='dark'] [style*='color: #0b4a7d'], html[data-bs-theme='dark'] [style*='color:#3c5570'], html[data-bs-theme='dark'] [style*='color: #3c5570'], html[data-bs-theme='dark'] [style*='color:#333'], html[data-bs-theme='dark'] [style*='color: #333'], html[data-bs-theme='dark'] [style*='color:#000'], html[data-bs-theme='dark'] [style*='color: #000'] { color: #cfe0ee !important; } /* Muted blue-grey text inline → muted light */ html[data-bs-theme='dark'] [style*='color:#5a6a85'], html[data-bs-theme='dark'] [style*='color: #5a6a85'], html[data-bs-theme='dark'] [style*='color:#5e6b77'], html[data-bs-theme='dark'] [style*='color: #5e6b77'] { color: var(--app-text-muted) !important; } /* Light backgrounds used inline → dark surface (match incl. property name so we never accidentally hit a same-valued text color) */ html[data-bs-theme='dark'] [style*='background-color:#f8f9fc'], html[data-bs-theme='dark'] [style*='background-color: #f8f9fc'], html[data-bs-theme='dark'] [style*='background:#f8f9fc'], html[data-bs-theme='dark'] [style*='background: #f8f9fc'], html[data-bs-theme='dark'] [style*='background-color:#f9f9f9'], html[data-bs-theme='dark'] [style*='background: #f9f9f9'], html[data-bs-theme='dark'] [style*='background:#f9f9f9'], html[data-bs-theme='dark'] [style*='background:#f0f2f5'], html[data-bs-theme='dark'] [style*='background: #f0f2f5'], html[data-bs-theme='dark'] [style*='background:#fff'], html[data-bs-theme='dark'] [style*='background: #fff'], html[data-bs-theme='dark'] [style*='background-color:#fff'], html[data-bs-theme='dark'] [style*='background-color: #fff'] { background-color: var(--app-surface-3) !important; } /* Nav tabs (underline / tabs) — active uses brand-dark color that's invisible on a dark canvas; inactive is Bootstrap grey. */ html[data-bs-theme='dark'] :is(.nav-underline, .nav-tabs) .nav-link { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] :is(.nav-underline, .nav-tabs) .nav-link.active { color: #6bb3e6 !important; border-color: #6bb3e6 !important; } /* ---- 3c. Dashboard (smart-board) specific ----------------------------- * * Component CSS hard-codes these to dark values that out-specify the net. */ html[data-bs-theme='dark'] .readiness-percentage-label, html[data-bs-theme='dark'] .readiness-label-text { color: var(--app-text) !important; } /* Light page-level wrappers behind the cards (e.g. #f8f9fc) → inherit dark canvas */ html[data-bs-theme='dark'] :is(.container-fluid, .dashboard-wrapper, .content-wrapper, .main-content, .page-content) { background-color: transparent !important; } /* White rings around stacked avatars → blend with the dark card surface */ html[data-bs-theme='dark'] :is(.small-avatar, .avatar, .user-avatar, .remaining-count) { border-color: var(--app-surface) !important; } /* FAB (Take Action / Ask Linx) pop-out buttons & panel */ html[data-bs-theme='dark'] :is(.fab-panel, .fab-sub-menu .sub-btn, .sub-btn) { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } /* Active top-nav pill */ html[data-bs-theme='dark'] .topbar-link.active { background-color: var(--app-surface-3) !important; border-color: var(--app-border) !important; } /* ---- 4. Apps grid (Take Action shortcuts) ------------------------------ */ html[data-bs-theme='dark'] .apps-grid-panel { background-color: var(--app-surface) !important; border-color: var(--app-border); } html[data-bs-theme='dark'] .apps-grid-header { background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-3) 100%); border-bottom-color: var(--app-border); } html[data-bs-theme='dark'] .apps-grid-title { color: #8fb9d6; } html[data-bs-theme='dark'] .apps-grid-label { color: var(--app-text); } html[data-bs-theme='dark'] .apps-grid-item:hover { background: var(--app-surface-3); } /* ---- 5. Misc polish ----------------------------------------------------- */ html[data-bs-theme='dark'] ::-webkit-scrollbar-thumb { background: #3a434f; } html[data-bs-theme='dark'] .shadow-lg, html[data-bs-theme='dark'] .shadow, html[data-bs-theme='dark'] .shadow-sm { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important; } /* Slightly dim large media so it isn't harsh on a dark canvas */ html[data-bs-theme='dark'] img:not(.no-dim):not(.rounded-circle):not(.user-profile-img img) { filter: brightness(0.96); } /* Page heading / breadcrumb title (e.g. "Dashboard") — custom.css hard-codes #0F456B, which reads as a disabled dark-on-dark label. Make it light; keep the info (i) accent icon its own blue. */ html[data-bs-theme='dark'] :is(.page-heading, h5.page-heading), html[data-bs-theme='dark'] .page-heading span, html[data-bs-theme='dark'] .page-heading > i:not(.fa-circle-info) { color: var(--app-text) !important; } /* ---- Overdue Requirement Users dialog (Hot List row → click) ------------ * * Opens in the CDK overlay with panelClass `custom-overdue-dialog`. The * component hard-codes light surfaces (#f9fafb header, #0f456b title, light * avatar), so flip them for dark. Readiness badges keep their bg-* colors. */ html[data-bs-theme='dark'] .custom-overdue-dialog, html[data-bs-theme='dark'] .custom-overdue-dialog :is(.mat-mdc-dialog-container, .mat-mdc-dialog-surface, .mdc-dialog__surface, .mat-dialog-container) { background-color: var(--app-surface) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .custom-overdue-dialog .dialog-header { background-color: var(--app-surface-2) !important; border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .custom-overdue-dialog .dialog-title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .custom-overdue-dialog .dialog-title .text-primary { color: #6cc0ff !important; } /* Search input */ html[data-bs-theme='dark'] .custom-overdue-dialog .form-control { background-color: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .custom-overdue-dialog .form-control::placeholder { color: var(--app-text-muted) !important; } /* Table — text, header, striped rows and cell borders */ html[data-bs-theme='dark'] .custom-overdue-dialog .table { --bs-table-color: var(--app-text); --bs-table-bg: transparent; --bs-table-striped-color: var(--app-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-border-color: var(--app-border); color: var(--app-text) !important; } html[data-bs-theme='dark'] .custom-overdue-dialog .table :is(th, td) { border-color: var(--app-border) !important; } /* Bootstrap paints each cell with --bs-table-bg; force transparent so the dark dialog surface shows through (otherwise rows stay white over a dark box). */ html[data-bs-theme='dark'] .custom-overdue-dialog .table > :not(caption) > * > * { background-color: transparent !important; color: var(--app-text); } /* Striped (odd) rows paint a light stripe via an inset box-shadow that background-color can't override — kill the shadow and use a subtle dark tint. */ html[data-bs-theme='dark'] .custom-overdue-dialog .table-striped > tbody > tr:nth-of-type(odd) > * { box-shadow: none !important; background-color: rgba(255, 255, 255, 0.045) !important; color: var(--app-text) !important; } /* Initials avatar fallback */ html[data-bs-theme='dark'] .custom-overdue-dialog .initials-avatar { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } /* Hot List / Schedule row hover — the component hard-codes a pale light-blue (#bcd4e6) that looks washed-out on the dark canvas. In dark mode use a saturated DARK blue so the existing light text stays readable (a light bg would fight the dark-mode light-text safety-net and wash out). */ html[data-bs-theme='dark'] :is(.hotlist-card, .schedule-card):hover { background-color: #1f6fb2 !important; box-shadow: inset 3px 0 0 #6cc0ff, 0 4px 12px rgba(0, 0, 0, 0.45) !important; } /* Keep text + icons bright on the saturated hover (badge keeps its own style). */ html[data-bs-theme='dark'] :is(.hotlist-card, .schedule-card):hover :is(.fw-semibold, .text-truncate, span:not(.remaining-count), i) { color: #ffffff !important; } /* ========================================================================== * 6. App-wide dark coverage (audit-driven) Blanket fixes for the patterns that recur across every feature module so we don't have to hand-write a rule per component. Intentional colors (bg-*, text-*, btn-*, badges, status pills) are deliberately excluded. ========================================================================== */ /* ---- 6a. ALL Material dialogs ----------------------------------------- * * Many dialogs open with their own panelClass (custom-dialog-container, * my-schedule-dialog, aligned-dialog, create-event-dialog-panel, event-view- * dialog, call-actions-dialog-panel, chat-image-preview-dialog-panel, …). * Darken the surface for every one of them in a single rule. */ html[data-bs-theme='dark'] :is(.mat-mdc-dialog-container, .mat-mdc-dialog-surface, .mdc-dialog__surface, .mat-dialog-container) { background-color: var(--app-surface) !important; color: var(--app-text) !important; } /* Dialog text safety net — make all dialog content readable (skips buttons, badges, and intentionally-colored utility/inline-styled elements). */ html[data-bs-theme='dark'] :is(.mat-mdc-dialog-container, .cdk-overlay-pane) :is(h1, h2, h3, h4, h5, h6, p, span, li, dt, dd, label, small, strong, b, th, td, div, a):not(.btn):not(.badge):not(.readiness-badge):not([class*='bg-']):not([class*='btn-']):not([class*='badge-']):not([class*='text-white']):not([class*='text-light']):not([class*='text-primary']):not([class*='text-success']):not([class*='text-danger']):not([class*='text-warning']):not([class*='text-info']):not(.text-muted):not([style*='color']) { color: var(--app-text); } /* Common dialog/section header + title classes used across modules */ html[data-bs-theme='dark'] :is(.dialog-header, .req-users-header, .modal-header, .dialog-container, .req-users-header) { background-color: var(--app-surface-2) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] :is(.dialog-title, .modal-title, .req-users-header h2) { color: var(--app-text) !important; } /* ---- 6b. Tables app-wide --------------------------------------------- * * The light striped rows are painted by an inset box-shadow that a plain * background-color can't override (same issue as the overdue dialog). Fix it * for every striped table; keep cells transparent so the dark surface shows. */ html[data-bs-theme='dark'] .table > :not(caption) > * > *:not([class*='bg-']) { background-color: transparent !important; } html[data-bs-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > *:not([class*='bg-']) { box-shadow: none !important; background-color: rgba(255, 255, 255, 0.045) !important; color: var(--app-text) !important; } /* ---- 6c. Recurring custom surface classes ----------------------------- * * Component CSS hard-codes these to #fff / #f8f9fc / #eaf2f9 / #e2e6ea etc. * Re-skin to the dark surface tokens. (bg-* utility surfaces excluded above.) */ html[data-bs-theme='dark'] :is( .form-section, .form-card, .panel-container, .requirement-card, .section-card, .info-box, .details-panel, .bottom-panel, .chat-window, .notification-panel, .notification-item, .custom-dropdown, .fab-panel, .fab-panel-header, .space-card, .preview-box, .stats-container, .section-footer, .hour-group, .hour-header, .hour-body, .loader-section, .table-section, .grid-content, .org-node, .node-card, .org-header, .data-section, .setting-form, .tab-nav, .modal-body, .req-users-body, .horizontal-strip, .upload-area, .drop-zone, .selected-card, .item-wrapper, .reset-section, .card-wrapper, .section-bg ) { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text); } /* Softer secondary surfaces (headers / rows / status strips) */ html[data-bs-theme='dark'] :is(.header-row, .header-section, .title-row, .status-row, .stat-label) { background-color: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text); } /* ---- 6d. Recurring light hover states --------------------------------- * * Lists/tables across modules hover to #f8f9fc / #f5f5f5 / #eef3f7 / #e2e6ea. */ html[data-bs-theme='dark'] :is(.hover-item, .hover-table tbody tr, .table tbody tr, table tbody tr):hover, html[data-bs-theme='dark'] :is(.hover-table tbody tr, .table tbody tr, table tbody tr):hover > *:not([class*='bg-']) { background-color: var(--app-surface-3) !important; color: var(--app-text); } /* ---- 6e. Light gradients → flat dark ---------------------------------- * * Many headers/cards use `linear-gradient(... #ffffff ...)`. We can't match * gradients by value, but these common wrapper classes carry them. */ html[data-bs-theme='dark'] :is(.card-bg, .theme-slide-thumb, .skeleton-loader, .skeleton-item) { background-image: none !important; background-color: var(--app-surface) !important; } /* ---- 6f. Extend inline-style overrides (more values from audit) -------- */ /* Dark text inline → readable light */ html[data-bs-theme='dark'] [style*='color:#1f2937'], html[data-bs-theme='dark'] [style*='color: #1f2937'], html[data-bs-theme='dark'] [style*='color:#1f2b33'], html[data-bs-theme='dark'] [style*='color: #1f2b33'], html[data-bs-theme='dark'] [style*='color:#2c3e50'], html[data-bs-theme='dark'] [style*='color: #2c3e50'], html[data-bs-theme='dark'] [style*='color:#0b1727'], html[data-bs-theme='dark'] [style*='color: #0b1727'], html[data-bs-theme='dark'] [style*='color:#222'], html[data-bs-theme='dark'] [style*='color: #222'], html[data-bs-theme='dark'] [style*='color:#1a1a1a'], html[data-bs-theme='dark'] [style*='color: #1a1a1a'], html[data-bs-theme='dark'] [style*='color:#34495e'], html[data-bs-theme='dark'] [style*='color: #34495e'], html[data-bs-theme='dark'] [style*='color:#1e2e50'], html[data-bs-theme='dark'] [style*='color: #1e2e50'], html[data-bs-theme='dark'] [style*='color:#2a3547'], html[data-bs-theme='dark'] [style*='color: #2a3547'], html[data-bs-theme='dark'] [style*='color:#165b8a'], html[data-bs-theme='dark'] [style*='color: #165b8a'], html[data-bs-theme='dark'] [style*='color:#005f99'], html[data-bs-theme='dark'] [style*='color: #005f99'] { color: #cfe0ee !important; } /* Light backgrounds inline → dark surface */ html[data-bs-theme='dark'] [style*='background-color:#f9fafb'], html[data-bs-theme='dark'] [style*='background-color: #f9fafb'], html[data-bs-theme='dark'] [style*='background:#f9fafb'], html[data-bs-theme='dark'] [style*='background: #f9fafb'], html[data-bs-theme='dark'] [style*='background-color:#eaf2f9'], html[data-bs-theme='dark'] [style*='background: #eaf2f9'], html[data-bs-theme='dark'] [style*='background:#eaf2f9'], html[data-bs-theme='dark'] [style*='background-color:#eef3f7'], html[data-bs-theme='dark'] [style*='background: #eef3f7'], html[data-bs-theme='dark'] [style*='background:#eef3f7'], html[data-bs-theme='dark'] [style*='background-color:#e2e6ea'], html[data-bs-theme='dark'] [style*='background: #e2e6ea'], html[data-bs-theme='dark'] [style*='background:#e2e6ea'], html[data-bs-theme='dark'] [style*='background-color:#f1f5f9'], html[data-bs-theme='dark'] [style*='background: #f1f5f9'], html[data-bs-theme='dark'] [style*='background-color:#ebf1f6'], html[data-bs-theme='dark'] [style*='background: #ebf1f6'], html[data-bs-theme='dark'] [style*='background:#ebf1f6'], html[data-bs-theme='dark'] [style*='background-color:#fafafa'], html[data-bs-theme='dark'] [style*='background: #fafafa'], html[data-bs-theme='dark'] [style*='background:#fafafa'] { background-color: var(--app-surface) !important; } /* ---- 6g. Sticky table headers --------------------------------------- * * Section 6b forced every table cell transparent so the dark surface shows * through — but that also made sticky cells see-through, so scrolled * rows bled behind the header. Re-fill header cells with an opaque surface. * (Placed last so it wins on source order against the transparent rule.) */ html[data-bs-theme='dark'] .table > thead > tr > th:not([class*='bg-']), html[data-bs-theme='dark'] .table thead th:not([class*='bg-']) { background-color: var(--app-surface) !important; }