/* ============================================================================ 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. body:not(.ask-ai-dark-page) — the Ask Linx page ships its own dark header skin (deep-navy #0a172a in styles.css); if we also paint #navbarNav here it shows as a lighter square block on that page, so defer to its skin there. */ html[data-bs-theme='dark'] body:not(.ask-ai-dark-page) .app-header, html[data-bs-theme='dark'] body:not(.ask-ai-dark-page) .topbar-header .navbar, html[data-bs-theme='dark'] body:not(.ask-ai-dark-page) .topbar-menu, html[data-bs-theme='dark'] body:not(.ask-ai-dark-page) .left-sidebar, html[data-bs-theme='dark'] body:not(.ask-ai-dark-page) .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'] body:not(.ask-ai-dark-page) .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) !important; color: var(--app-text) !important; } /* Active (current-route) dropdown item — the component paints a light-grey pill with navy text (#f2f5f8 / #0f456b) that reads as a washed-out block on the dark menu. Use the dark surface + the nav's blue accent to mark selection. */ html[data-bs-theme='dark'] .topbar-dropdown-item.active { background-color: var(--app-surface-3) !important; color: #8fb9d6 !important; } html[data-bs-theme='dark'] .topbar-dropdown-item.active :is(i, span) { color: #8fb9d6 !important; } /* Dropdown dividers/borders that hard-code light greys */ html[data-bs-theme='dark'] .topbar-dropdown-parent { border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .topbar-overflow-children { border-left-color: var(--app-border) !important; } /* 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, .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); } /* .bottom-panel gets the same dark fill EXCEPT inside the Ask Linx chat shell (.chat-card-main): there it is a transparent panel floating over the particle canvas, and an opaque fill reads as a grey slab. Ask Linx's own dark skin styles it. */ html[data-bs-theme='dark'] .bottom-panel:not(.chat-card-main *) { 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; } /* Rounded tab-pill strip (my-profile briefcase tabs, chat tabs) — hard-coded to #fff/#ccc in updated_custom.css and chat.component.css. */ html[data-bs-theme='dark'] .tab-button-group-wrapper { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } /* Grey pill buttons — updated_custom.css hard-codes #EAEBEE/#F8F9FC + black text with !important. Active state keeps its light-blue #BCD4E6 + black text (readable, matches the dashboard's active pills). */ html[data-bs-theme='dark'] :is(.btn-grey, .btn-light-grey):not(.active) { background-color: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] :is(.btn-grey, .btn-light-grey):not(.active):hover { background-color: #343d49 !important; border-color: #3a4350 !important; color: var(--app-text) !important; } /* Bootstrap's .text-dark utility → invisible on the dark canvas. Flip it to light except when it sits on an intentionally light/colored surface. */ html[data-bs-theme='dark'] .text-dark:not(.badge):not([class*='bg-']) { color: var(--app-text) !important; } /* Breadcrumb bars pick up a light #f8f9fc fill from the theme CSS. */ html[data-bs-theme='dark'] .breadcrumb { background-color: transparent !important; } /* Card section titles (e.g. Take Action dashboard) keep a hard-coded dark heading color that out-prioritizes the text safety net. */ html[data-bs-theme='dark'] .card-title:not([class*='text-']) { color: var(--app-text) !important; } html[data-bs-theme='dark'] .card-subtitle:not([class*='text-']) { color: var(--app-text-muted) !important; } /* Shared light hover helper (styles.css) + round "+" buttons (chat, checklists, surveys) hard-coded to #f8f9fc. */ html[data-bs-theme='dark'] .onhov:hover { background-color: var(--app-surface-3); } html[data-bs-theme='dark'] .plus-btn { background-color: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .plus-btn:hover, html[data-bs-theme='dark'] .plus-btn:focus, html[data-bs-theme='dark'] .plus-btn:active { background-color: #343d49 !important; } /* ---- Take Action create wizards ---------------------------------------- * * The step strip comes from the global steps.css (light grey track + white * pills + navy bullets); the header/footer/section/attachment styles are * duplicated across create-announcement / create-appointments / create- * checklist / survey-message / import flows. One dark skin covers them all. */ html[data-bs-theme='dark'] .nav-tab { background-color: var(--app-surface-2) !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills, html[data-bs-theme='dark'] .nav-tab .tab-pills.completed { background-color: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills.active { background-color: #1f6fb2 !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills p, html[data-bs-theme='dark'] .nav-tab .tab-pills span, html[data-bs-theme='dark'] .container .nav-tab .tab-pills span, html[data-bs-theme='dark'] .nav-tab .tab-pills p.completed, html[data-bs-theme='dark'] .tab-pills p.active { color: #cfd6dd !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills.active p, html[data-bs-theme='dark'] .nav-tab .tab-pills.active span { color: #ffffff !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills .bullet, html[data-bs-theme='dark'] .nav-tab .tab-pills .bullet.completed { background-color: #6bb3e6 !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills .bullet span { color: #10151b !important; background-color: transparent !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills.active .bullet { background-color: #ffffff !important; } html[data-bs-theme='dark'] .nav-tab .tab-pills.active .bullet span { color: #0f456b !important; } html[data-bs-theme='dark'] .tab-pills .bullet:before, html[data-bs-theme='dark'] .tab-pills .bullet:after { background: #3a4a59 !important; } html[data-bs-theme='dark'] .btn-back { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } /* Wizard chrome + form sections */ html[data-bs-theme='dark'] :is(.wizard-header, .wizard-footer) { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .section-title { color: var(--app-text) !important; } html[data-bs-theme='dark'] :is(.section-subtitle, .attachment-header) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .attachment-block { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .attachment-option:not(.selected) { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .attachment-option:not(.selected):hover { border-color: #6bb3e6 !important; color: #6bb3e6 !important; } html[data-bs-theme='dark'] .upload-file { border-color: #3a4a59 !important; color: var(--app-text-muted); } /* Slot Control Center select overlay (cdk overlay, outside the component) */ html[data-bs-theme='dark'] .scc-select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { background: #263442 !important; } /* Take Action detail "Overview" info tiles — the same .info-tile / .info-icon / .info-label / .info-value block is duplicated across announcements, appointments, events, surveys and checklists components. */ html[data-bs-theme='dark'] .info-tile { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .info-tile:hover { border-color: #3a4350 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html[data-bs-theme='dark'] .info-icon { background: #263442 !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] .info-label { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .info-value:not([class*='text-']) { color: var(--app-text) !important; } /* Take Action list pills (global .app-pill in styles.css). Each pill is also a .card, so the blanket .card dark fill flattens the selected state — restore a visible highlight (same saturated blue as chat/inbox selection). */ html[data-bs-theme='dark'] .app-pill.selected { background-color: #1f6fb2 !important; border-color: #6cc0ff !important; } html[data-bs-theme='dark'] .app-pill.selected :is(.app-pill-title, .app-pill-icon, .app-pill-nowrap, i, span, strong, small) { color: #ffffff !important; } /* Delay-delivery toggle card (create wizards) */ html[data-bs-theme='dark'] .delivery-card__title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .delivery-card__subtitle { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .delivery-card__icon, html[data-bs-theme='dark'] .delivery-card__icon i { color: #8fb9d6 !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. * The [data-bs-theme] attribute is repeated to OUT-SPECIFY component rules: * Angular emulated encapsulation stamps _ngcontent-x onto every simple * selector, so a component's `.recipients-table thead th { ... !important }` * compiles to (0,4,2) — a single-attribute global rule loses to it. */ html[data-bs-theme='dark'][data-bs-theme='dark'][data-bs-theme='dark'] .table thead th:not([class*='bg-']) { background-color: var(--app-surface) !important; color: var(--app-text-muted) !important; border-color: var(--app-border) !important; } /* Body cells & hover with the same specificity boost (component CSS often hard-codes td colors + light hovers with !important). Inline-styled and bg-* cells keep their intentional colors. */ html[data-bs-theme='dark'][data-bs-theme='dark'][data-bs-theme='dark'] .table tbody td:not([class*='bg-']):not([style*='color']) { color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'][data-bs-theme='dark'][data-bs-theme='dark'] .table tbody tr:hover:not([class*='bg-']), html[data-bs-theme='dark'][data-bs-theme='dark'][data-bs-theme='dark'] .table tbody tr:hover > td:not([class*='bg-']) { background-color: var(--app-surface-3) !important; } /* Bootstrap's .table-hover paints the hovered row via an INSET box-shadow using --bs-table-hover-bg (a light value), which a plain background-color override can't cancel — the row reads as a white block (same mechanism as striped rows, handled in 6b). Kill the shadow and apply a dark hover tint. */ html[data-bs-theme='dark'] .table-hover > tbody > tr:hover > *:not([class*='bg-']) { box-shadow: none !important; background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } /* ---- 7. My Profile → Career Data Brief dialogs ------------------------- * * The Add/Edit dialogs (work, education, certification, training, appointment * letter, license) share one BEM skin: `.work-dialog*`, `.field-*`, * `.form-section*`, `.upload-tile*`. Each hard-codes its palette through * component-local `--wd-*` custom properties declared on `:host`, so overriding * the tokens from a parent can't reach them (a var set on the host element wins * over an inherited one). Instead we re-skin the actual properties, scoped to * the `af-profile-dialog` panelClass added on dialog open. */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog { background: var(--app-surface) !important; color: var(--app-text) !important; } /* Header — light gradient → flat dark surface */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__header { background: var(--app-surface-2) !important; border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__subtitle, html[data-bs-theme='dark'] .af-profile-dialog .form-section__title { color: var(--app-text-muted) !important; } /* Round icon badge — keep the blue accent, darken its soft fill */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__icon { background: #263442 !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] .af-profile-dialog .form-section__title i { color: #8fc6ec !important; } /* Close button */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__close { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text-muted) !important; } /* Dashed section dividers */ html[data-bs-theme='dark'] .af-profile-dialog .form-section { border-bottom-color: var(--app-border) !important; background: transparent !important; } /* Field labels */ html[data-bs-theme='dark'] .af-profile-dialog .field-label { color: var(--app-text) !important; } /* Inputs / selects / textareas (native + .field-* skins) */ html[data-bs-theme='dark'] .af-profile-dialog :is(.field-input, .field-textarea, select.field-input) { background-color: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-profile-dialog :is(.field-input, .field-textarea):focus { background-color: var(--app-surface-3) !important; border-color: #6bb3e6 !important; box-shadow: 0 0 0 3px rgba(107, 179, 230, 0.18) !important; } /* Material outlined form fields (category/subcategory selects, datepickers) */ html[data-bs-theme='dark'] .af-profile-dialog .mat-mdc-text-field-wrapper.mdc-text-field--outlined { background-color: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .af-profile-dialog .mdc-notched-outline > * { border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .af-profile-dialog :is(.mat-mdc-select-value, .mat-mdc-select-placeholder, .mat-mdc-input-element, .mat-mdc-select-arrow) { color: var(--app-text) !important; } /* Upload tile */ html[data-bs-theme='dark'] .af-profile-dialog .upload-tile { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .af-profile-dialog .upload-tile__icon { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] .af-profile-dialog .upload-tile__placeholder { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .af-profile-dialog .upload-tile__filename { color: var(--app-text) !important; } /* Footer */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__footer { background: var(--app-surface-2) !important; border-top-color: var(--app-border) !important; } html[data-bs-theme='dark'] .af-profile-dialog .btn-outline-secondary { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-profile-dialog .btn-outline-secondary:hover { background: #343d49 !important; border-color: #6bb3e6 !important; color: #6bb3e6 !important; } /* Scrollbar thumb inside the scrollable body */ html[data-bs-theme='dark'] .af-profile-dialog .work-dialog__body::-webkit-scrollbar-thumb { background: #3a434f !important; } /* ---- 8. Scheduling → Airman "My schedule" ------------------------------ * * The whole page is scoped under `.ams`, which declares its palette as CSS * custom properties (--navy, --ink, --muted, --line, --bg, --card). Because * `.ams` is a plain class (not :host), we can remap those tokens directly for * dark mode — the values cascade to every descendant, so navy titles ("Schedule * these next", requirement names), ink body text and muted labels all become * readable in one shot. Accent tokens (blue + semantic red/amber/green) are * intentional and left untouched. */ html[data-bs-theme='dark'] .ams { --navy: #e6e9ee !important; --ink: #e6e9ee !important; --muted: #a7b0ba !important; --line: #2c333d !important; --bg: #1b2027 !important; --card: #222831 !important; } /* Hard-coded light surfaces that don't read from the tokens above. */ html[data-bs-theme='dark'] .ams .seg, html[data-bs-theme='dark'] .ams .uta-bar { background: var(--app-surface-3) !important; } /* Soft-tint icon bubbles → dark bubble, keep the colored glyph */ html[data-bs-theme='dark'] .ams :is(.card-icon.tone-info, .appt-ic) { background: #263442 !important; } html[data-bs-theme='dark'] .ams .card-icon.tone-warn { background: #3a3320 !important; } html[data-bs-theme='dark'] .ams .card-icon.tone-ok { background: #1e3a2b !important; } /* Neutral booking chip (Scheduled) — light fill with navy text; both flip dark */ html[data-bs-theme='dark'] .ams .status-chip.scheduled { background: var(--app-surface-3) !important; color: var(--app-text) !important; } /* Sample badge */ html[data-bs-theme='dark'] .ams .sample-badge { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text-muted) !important; } /* Ghost button (Export schedule) — white fill → dark surface */ html[data-bs-theme='dark'] .ams .btn-ghost { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .ams .btn-ghost:hover { border-color: #6bb3e6 !important; color: #6bb3e6 !important; } /* Divider between "Schedule these next" rows */ html[data-bs-theme='dark'] .ams .next-row { border-bottom-color: var(--app-border) !important; } /* Appointment card hover ring + timeline dot centre */ html[data-bs-theme='dark'] .ams .appt-card:hover { border-color: #3a4a59 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } html[data-bs-theme='dark'] .ams .rail-dot { background: var(--app-surface) !important; } /* ---- 9. Scheduling → Slots dialogs ------------------------------------- * * The four dialogs opened from af-slots (slot type selector, create/edit slot, * auto-creation wizard, view slot) hard-code white/light-gradient surfaces and * dark ink text — some via component-local `--st-*` tokens on :host that a * parent can't remap. All four now carry the `af-slots-dialog` panelClass, so * we re-skin the actual properties here, scoped to it. (The auto-creation step * strip `.nav-tab .tab-pills` is already handled by the wizard rules above.) */ /* Root surfaces — flatten light gradients to a flat dark surface */ html[data-bs-theme='dark'] .af-slots-dialog :is(.slot-type-dialog, .dialog-container) { background: var(--app-surface) !important; color: var(--app-text) !important; } /* Close buttons (both class names) */ html[data-bs-theme='dark'] .af-slots-dialog :is(.close-btn, .close-button) { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text-muted) !important; } /* Title bar / headers */ html[data-bs-theme='dark'] .af-slots-dialog .dialog-title-bar { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .af-slots-dialog :is(.title-heading, .header-title) { color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-slots-dialog :is(.title-subheading, .header-subtitle) { color: var(--app-text-muted) !important; } /* Step/progress pill — keep the blue accent, darken its white fill */ html[data-bs-theme='dark'] .af-slots-dialog .title-progress { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: #6bb3e6 !important; } /* Tab underline strip */ html[data-bs-theme='dark'] .af-slots-dialog .nav { border-bottom-color: var(--app-border) !important; } /* Slot-type picker cards */ html[data-bs-theme='dark'] .af-slots-dialog .slot-type-card { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } html[data-bs-theme='dark'] .af-slots-dialog .card-title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-slots-dialog .card-description { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .af-slots-dialog .card-footer { border-top-color: var(--app-border) !important; } /* Card icon bubbles → dark bubble, keep the blue glyph */ html[data-bs-theme='dark'] .af-slots-dialog :is(.card-icon, .slot-type-card--auto .card-icon, .slot-type-card--manual .card-icon) { background: #263442 !important; color: #8fc6ec !important; } /* Auto-creation mode cards */ html[data-bs-theme='dark'] .af-slots-dialog .mode-card { background-color: var(--app-surface-2) !important; color: var(--app-text-muted) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html[data-bs-theme='dark'] .af-slots-dialog .mode-card .mode-title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .af-slots-dialog .mode-card .mode-description { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .af-slots-dialog .mode-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } /* Selected mode keeps its blue accent border/text */ html[data-bs-theme='dark'] .af-slots-dialog .radio-container { background-color: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .af-slots-dialog .radio-line { border-top-color: var(--app-border) !important; } /* View-slot detail rows */ html[data-bs-theme='dark'] .af-slots-dialog .modal-body .row { border-bottom-color: var(--app-border) !important; } /* ---- 10. Take Action → "Select Recipients" tables ---------------------- * * The create-* flows (appointment, announcement, checklist, survey) share a * `.recipients-table` inside a `.recipients-table-card` that hard-codes a white * card, a light-gradient sticky header and a light selected-row fill with dark * text — so the selected/hover row shows as a bright white block on the dark * canvas. Re-skin them to the dark surface tokens. */ html[data-bs-theme='dark'] .recipients-table-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; } /* Sticky header — flatten the gradient (background-color alone can't remove it) */ html[data-bs-theme='dark'] .recipients-table thead th { background: var(--app-surface-3) !important; color: var(--app-text-muted) !important; border-color: var(--app-border) !important; } /* Row hover + selected — visible dark-blue tint instead of a white block */ html[data-bs-theme='dark'] .recipients-table tbody tr:hover { background: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .recipients-table tbody tr.row-selected { background: rgba(31, 111, 178, 0.28) !important; } html[data-bs-theme='dark'] .recipients-table tbody tr.row-selected td { color: var(--app-text) !important; } /* Body cells + row dividers */ html[data-bs-theme='dark'] .recipients-table tbody td { color: var(--app-text) !important; } html[data-bs-theme='dark'] .recipients-table tbody tr + tr td { border-top-color: var(--app-border) !important; } /* Muted secondary cells (email / description) */ html[data-bs-theme='dark'] .recipients-table :is(.user-email-cell, .group-desc-cell) { color: var(--app-text-muted) !important; } /* Load-more footer strip (if still shown) */ html[data-bs-theme='dark'] .load-more-row { background: transparent !important; border-top-color: var(--app-border) !important; } /* ---- 11. Take Action → "Review Your Appointment" step ------------------ * * The review summary card hard-codes a white fill, light dividers and dark ink * labels — re-skin to the dark surface tokens. */ html[data-bs-theme='dark'] .review-outline { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; } html[data-bs-theme='dark'] .review-outline :is(h4, h6) { color: var(--app-text) !important; } html[data-bs-theme='dark'] .review-item { border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .review-label { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .review-value { color: var(--app-text) !important; } /* Initials-avatar fallback (recipient tables) — light fill → dark surface */ html[data-bs-theme='dark'] .avatar-initials-35 { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } /* ---- 12. Take Action → Overview "Location" card ------------------------ * * The `.loc-tile` location card (events, appointments, announcements overview) * hard-codes a light fill, dark ink and a white copy/map button. Re-skin to * the dark surface tokens; keep the blue location glyph as an accent. */ html[data-bs-theme='dark'] .loc-tile { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .loc-icon { background: #263442 !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] .loc-name { color: var(--app-text) !important; } html[data-bs-theme='dark'] .loc-meta { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .action-btn { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .action-btn:hover { background: #343d49 !important; border-color: #3a4350 !important; } /* ---- 13. Notifications → "All Notification" grouped cards -------------- * * The grouped notification cards (.dash-card + .dash-list) hard-code a white * fill, light dividers and dark ink — re-skin to the dark surface tokens. * The red count-pill is intentional and left as-is. */ html[data-bs-theme='dark'] .dash-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; } html[data-bs-theme='dark'] .dash-card__header { border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .dash-card__title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .dash-list__item { border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .dash-list__item:hover { background: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .dash-list__title { color: var(--app-text) !important; } html[data-bs-theme='dark'] .dash-list__meta { color: var(--app-text-muted) !important; } /* ---- 14. Directory view-toggle buttons -------------------------------- * * The Grid / List / Coverflow / Profiles / Org-Chart switcher pills use * `.view-toggle-button`, which hard-codes a light fill (#f0f2f5) + dark ink in * every directory view — only the org-chart view shipped a dark override, so * the rest render as light buttons. Skin the inactive pills for dark; the * active (navy) and hover (blue) states stay as-is. */ html[data-bs-theme='dark'] .view-toggle-button:not(.active) { background-color: var(--app-surface-3) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .view-toggle-button:not(.active):hover { background-color: #4ea6e6 !important; color: #ffffff !important; } /* ---- 15. Schedule → FullCalendar (list / calendar views) --------------- * * FullCalendar reads its palette from --fc-* custom properties; the defaults * are light, so the list-view day header ("Wednesday, July 15") paints as a * white band and its shaded cells stay light. Remap the tokens for dark, then * fix the pieces the component hard-codes via its own --cal-* tokens (declared * on :host, so a parent can't reach them) — the day-header band, day text, * event text and borders. Selectors are prefixed with `.fc` to out-specify the * component's `:host ::ng-deep` rules (0,2,0). */ html[data-bs-theme='dark'] .fc { --fc-page-bg-color: var(--app-surface); --fc-neutral-bg-color: var(--app-surface-3); --fc-neutral-text-color: var(--app-text-muted); --fc-border-color: var(--app-border); --fc-today-bg-color: rgba(78, 166, 230, 0.12); --fc-list-event-hover-bg-color: var(--app-surface-3); } html[data-bs-theme='dark'] .other-cal-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; } /* List-view day header band + its text/side-text */ html[data-bs-theme='dark'] .fc .fc-list-day-cushion { background: var(--app-surface-3) !important; } html[data-bs-theme='dark'] .fc :is(.fc-list-day-text, .fc-list-day-side-text) { color: #8fb9d6 !important; } /* Event rows */ html[data-bs-theme='dark'] .fc :is(.fc-list-event-time, .fc-list-event-title), html[data-bs-theme='dark'] .fc .fc-list-event-title a { color: var(--app-text) !important; } html[data-bs-theme='dark'] .fc .fc-list-event td { border-color: var(--app-border) !important; } /* Grid/day-view surfaces + toolbar buttons (doubled attribute out-specifies the component's `:host ::ng-deep .fc .fc-button` (0,3,0) rules) */ html[data-bs-theme='dark'] .fc :is(.fc-list, .fc-scrollgrid, .fc-list-table) { background: transparent !important; } html[data-bs-theme='dark'][data-bs-theme='dark'] .fc .fc-button, html[data-bs-theme='dark'][data-bs-theme='dark'] .fc .fc-button-primary { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } /* ---- 16. Schedule → Event Details dialog ------------------------------ * * Opens with panelClass `event-view-dialog`. The generic mat-dialog dark rule * darkens the surface, but the component paints its own white inner shell, * white sticky attendee header, light location card and light avatars, plus a * navy active-tab color that's invisible on dark. Scope the fixes to the panel; * selectors carry the panelClass to out-specify the component's encapsulated * (0,2,0)+ rules. */ html[data-bs-theme='dark'] .event-view-dialog .dialog-shell { background: var(--app-surface) !important; color: var(--app-text) !important; } /* Tabs — inactive muted, active blue accent */ html[data-bs-theme='dark'] .event-view-dialog .tabs .nav-link { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .event-view-dialog .tabs .nav-link.active { color: #6bb3e6 !important; border-bottom-color: #6bb3e6 !important; } /* Location card (component redefines .loc-tile locally) */ html[data-bs-theme='dark'] .event-view-dialog .loc-tile { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .event-view-dialog .loc-name { color: var(--app-text) !important; } html[data-bs-theme='dark'] .event-view-dialog .loc-meta { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .event-view-dialog .action-btn { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] .event-view-dialog .action-btn:hover { background: #343d49 !important; } /* Attendees table — white sticky header, light borders, light avatar */ html[data-bs-theme='dark'] .event-view-dialog .attendees-table { border-color: var(--app-border) !important; } html[data-bs-theme='dark'] .event-view-dialog .attendees thead.sticky-header th { background: var(--app-surface-3) !important; box-shadow: inset 0 -1px 0 var(--app-border) !important; } html[data-bs-theme='dark'] .event-view-dialog .attendees tbody tr:not(:last-child) td { border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .event-view-dialog .avatar-fallback { background: var(--app-surface-3) !important; color: var(--app-text) !important; } /* ---- 17. Bootstrap close buttons (.btn-close) ------------------------- * * The X is a black SVG that disappears on dark surfaces, and a `.bg-light` * class turns the button into a light square. Drop the light fill and invert * the icon to white so it reads on the dark dialog header. */ html[data-bs-theme='dark'] .btn-close { background-color: transparent !important; filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.85; } html[data-bs-theme='dark'] .btn-close:hover { opacity: 1; } /* ---- 18. Create Event dialog + Create-Announcement wizard -------------- * * The Create Event dialog opens with panelClass `create-event-dialog-panel` * around ; the same wizard also renders inline on * Take Action → Announcements / Events, so wizard rules are scoped to the * component tag. The wrapper, wizard header/footer bands, stepper pills * (steps.css), section internals, recipients table and review cards all * hard-code white/light fills the generic dialog rules don't reach. */ /* Dialog wrapper shell (white .dialog-wrapper/.dialog-content-scroll, white header gradient — a shorthand `background` beats the generic background-color rule, so re-set the shorthand here) */ html[data-bs-theme='dark'] .create-event-dialog-panel :is(.dialog-wrapper, .dialog-content-scroll) { background-color: var(--app-surface) !important; } html[data-bs-theme='dark'] .create-event-dialog-panel .dialog-header { background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-3) 100%) !important; border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] .create-event-dialog-panel .dialog-title { color: #8fc6ec !important; } html[data-bs-theme='dark'] .create-event-dialog-panel .dialog-subtitle { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] .create-event-dialog-panel .dialog-header-icon { background-color: #1c3348 !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] .create-event-dialog-panel .close-button { color: var(--app-text-muted); } html[data-bs-theme='dark'] .create-event-dialog-panel .close-button:hover { background-color: #3a2326; border-color: #5a3336; color: #f1948a; } /* Wizard shell — sticky header/footer bands + body scrollbar */ html[data-bs-theme='dark'] app-create-announcement :is(.wizard-header, .wizard-footer) { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .wizard-body { scrollbar-color: #3a434f transparent; } html[data-bs-theme='dark'] app-create-announcement .wizard-body::-webkit-scrollbar-thumb { background-color: #3a434f; } /* Stepper — steps.css paints a light-gray track and white inactive pills. Active pill keeps its blue fill/white text. */ html[data-bs-theme='dark'] app-create-announcement .nav-tab { background-color: var(--app-surface-2) !important; } html[data-bs-theme='dark'] app-create-announcement .nav-tab .tab-pills:not(.active) { background-color: var(--app-surface-3); } html[data-bs-theme='dark'] app-create-announcement .nav-tab .tab-pills:not(.active) p { color: var(--app-text); } /* Step 1 (Create) — section internals; .form-section itself is darkened by the shared surface rule in 6c. */ html[data-bs-theme='dark'] app-create-announcement .section-header { border-bottom-color: var(--app-border); } html[data-bs-theme='dark'] app-create-announcement :is(.section-title, .attachment-header, .delivery-card__title) { color: var(--app-text) !important; } html[data-bs-theme='dark'] app-create-announcement :is(.section-subtitle, .delivery-card__subtitle, .char-counter) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-create-announcement :is(.attachment-block, .delivery-card) { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .delivery-card__schedule { border-top-color: var(--app-border); } html[data-bs-theme='dark'] app-create-announcement .attachment-option:not(.selected) { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text-muted); } html[data-bs-theme='dark'] app-create-announcement .attachment-option:not(.selected):hover { border-color: #6bb3e6 !important; color: #8fc6ec; } html[data-bs-theme='dark'] app-create-announcement .upload-file { background: var(--app-surface) !important; border-color: #3a4350 !important; color: var(--app-text-muted); } html[data-bs-theme='dark'] app-create-announcement .upload-file:hover { background: #343d49 !important; border-color: #6bb3e6 !important; } html[data-bs-theme='dark'] app-create-announcement .delivery-card__icon { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: #8fc6ec !important; } html[data-bs-theme='dark'] app-create-announcement .message-textarea { background-color: var(--app-surface-2) !important; border-color: #3a4350 !important; color: var(--app-text) !important; } html[data-bs-theme='dark'] app-create-announcement #uploadArea { background-color: var(--app-surface-3); } html[data-bs-theme='dark'] app-create-announcement #uploadArea:hover { background-color: #343d49; } html[data-bs-theme='dark'] app-create-announcement .upload-instructions { color: var(--app-text); } html[data-bs-theme='dark'] app-create-announcement .upload-support-text { color: var(--app-text-muted); } html[data-bs-theme='dark'] app-create-announcement .avatar-initials-35 { background-color: var(--app-surface-3); color: var(--app-text); } /* Step 2 (Select Recipients) — toolbar, search, stat cards, table */ html[data-bs-theme='dark'] app-create-announcement .recipient-mode-switcher { background: rgba(78, 166, 230, 0.08); border-color: var(--app-border); } html[data-bs-theme='dark'] app-create-announcement .mode-pill:not(.active) { color: var(--app-text-muted); } html[data-bs-theme='dark'] app-create-announcement .mode-pill:hover:not(.active) { color: #8fc6ec; } html[data-bs-theme='dark'] app-create-announcement .recipients-search-input { border-color: #3a4350 !important; } html[data-bs-theme='dark'] app-create-announcement .selection-chip { background: rgba(78, 166, 230, 0.12); border-color: var(--app-border); color: #8fc6ec; } html[data-bs-theme='dark'] app-create-announcement .selection-chip strong { color: var(--app-text); } html[data-bs-theme='dark'] app-create-announcement .conflict-stat { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .conflict-stat__value { color: var(--app-text) !important; } html[data-bs-theme='dark'] app-create-announcement .conflict-stat__label { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-create-announcement .recipients-table-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .recipients-table thead th { background: var(--app-surface-3) !important; color: #8fb9d6 !important; border-bottom-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .recipients-table tbody td { color: var(--app-text); } html[data-bs-theme='dark'] app-create-announcement .recipients-table tbody tr + tr td { border-top-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .recipients-table tbody tr:hover { background: rgba(78, 166, 230, 0.08); } html[data-bs-theme='dark'] app-create-announcement .recipients-table tbody tr.row-selected { background: rgba(78, 166, 230, 0.14); } html[data-bs-theme='dark'] app-create-announcement .recipients-table tbody tr.row-selected td { color: var(--app-text); } html[data-bs-theme='dark'] app-create-announcement :is(.user-email-cell, .group-desc-cell) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-create-announcement .status-chip--available { color: #34d399; } html[data-bs-theme='dark'] app-create-announcement .status-chip--scheduled { color: #f87171; } html[data-bs-theme='dark'] app-create-announcement .count-chip { background: rgba(78, 166, 230, 0.12); color: #8fc6ec; } html[data-bs-theme='dark'] app-create-announcement .load-more-row { background: var(--app-surface-3) !important; border-top-color: var(--app-border); } /* Step 3 (Review) */ html[data-bs-theme='dark'] app-create-announcement :is(.review-card, .review-outline) { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .review-card__header { border-bottom-color: var(--app-border); } html[data-bs-theme='dark'] app-create-announcement .review-item { border-bottom-color: var(--app-border); } html[data-bs-theme='dark'] app-create-announcement :is(.review-label, .review-item .label) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-create-announcement :is(.review-value, .review-item .value) { color: var(--app-text) !important; } html[data-bs-theme='dark'] app-create-announcement .review-message { background: var(--app-surface-3) !important; border-color: var(--app-border) !important; } html[data-bs-theme='dark'] app-create-announcement .review-message-body { color: var(--app-text) !important; } /* ---- 19. Take Action → Checklist Template (manage checklist) ----------- * * The right-panel draggable task rows hard-code `background: #fff`, so in * dark mode the inherited light text sits on white rows. The drag helper * band, template-list hover and plus button also keep light fills. */ html[data-bs-theme='dark'] app-af-manage-checklist .task-row { background: var(--app-surface-3); border-color: var(--app-border); color: var(--app-text); } html[data-bs-theme='dark'] app-af-manage-checklist .task-row:hover { background-color: #343d49; } html[data-bs-theme='dark'] app-af-manage-checklist .task-row.cdk-drag-preview, html[data-bs-theme='dark'] .task-row.cdk-drag-preview { background-color: #1c3348; color: var(--app-text); } /* Edit pencil ships an inline navy `style="color:#0f456b"` — unreadable on the dark row; stylesheet !important outranks inline styles. */ html[data-bs-theme='dark'] app-af-manage-checklist .btn-icon .bi-pencil-square { color: #6bb3e6 !important; } html[data-bs-theme='dark'] app-af-manage-checklist .drag-helper { background-color: #1c3348; color: #8fc6ec; } html[data-bs-theme='dark'] app-af-manage-checklist .task-card:hover { background-color: var(--app-surface-3); } /* Selected template card — the blanket 6c surface rule flattens .selected-card to the plain card fill; restore the same saturated-blue highlight the Sent Checklists pills use (.app-pill.selected above). */ html[data-bs-theme='dark'] app-af-manage-checklist .task-card.selected-card { background-color: #1f6fb2 !important; border-color: #6cc0ff !important; } html[data-bs-theme='dark'] app-af-manage-checklist .task-card.selected-card :is(i, strong, small, .text-muted) { color: #ffffff !important; } html[data-bs-theme='dark'] app-af-manage-checklist .plus-btn { background-color: var(--app-surface-3); border-color: var(--app-border); } html[data-bs-theme='dark'] app-af-manage-checklist .custom-scroll { scrollbar-color: #3a434f transparent; } html[data-bs-theme='dark'] app-af-manage-checklist .custom-scroll::-webkit-scrollbar-thumb { background-color: #3a434f; } /* ---- 20. Add/Edit Task dialog (checklists-task-dialog) ------------------ * * The Checklist Type option cards hard-code white fills + black titles; the * dialog text safety net (6a) then paints the text light, leaving light-on- * white cards. Scoped to the component tag so both open paths (with and * without a panelClass) are covered. */ html[data-bs-theme='dark'] app-checklists-task-dialog .mode-card { background-color: var(--app-surface-3); color: var(--app-text-muted) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } html[data-bs-theme='dark'] app-checklists-task-dialog .mode-card .mode-title { color: var(--app-text) !important; } html[data-bs-theme='dark'] app-checklists-task-dialog .mode-card .mode-description { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-checklists-task-dialog .mode-card.selected { border-color: #65a4e1; box-shadow: 0 0 0 2px rgba(101, 164, 225, 0.35); } html[data-bs-theme='dark'] app-checklists-task-dialog .mode-card.selected .mode-title { color: #8fc6ec !important; } html[data-bs-theme='dark'] app-checklists-task-dialog .checkbox-container { background-color: #1c3348; } html[data-bs-theme='dark'] app-checklists-task-dialog .checkbox-line { border-top-color: var(--app-border); } html[data-bs-theme='dark'] app-checklists-task-dialog .checklist-row::-webkit-scrollbar-thumb { background-color: #3a434f; } /* ---- 21. Directory → Coverflow view ------------------------------------ * * The flip cards hard-code white faces with dark ink (.data-value #34495e, * black readiness labels), while the page-level dark text inherits into the * unstyled name

— light-on-white. The back face carries .card so the * blanket card rule darkens it, but the front face does not. */ html[data-bs-theme='dark'] app-af-directory-coverflow .container-fluid { background-color: transparent; } html[data-bs-theme='dark'] app-af-directory-coverflow .breadcrumb-card { background-color: var(--app-surface); } html[data-bs-theme='dark'] app-af-directory-coverflow h5.page-heading { color: var(--app-text); } html[data-bs-theme='dark'] app-af-directory-coverflow :is(.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item::before) { color: var(--app-text-muted) !important; } html[data-bs-theme='dark'] app-af-directory-coverflow :is(.flip-card-front, .flip-card-back) { background: var(--app-surface) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } html[data-bs-theme='dark'] app-af-directory-coverflow swiper-slide.swiper-slide-active :is(.flip-card-front, .flip-card-back) { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); } html[data-bs-theme='dark'] app-af-directory-coverflow .profile-info h2 { color: var(--app-text); } html[data-bs-theme='dark'] app-af-directory-coverflow .category { color: var(--app-text-muted); } html[data-bs-theme='dark'] app-af-directory-coverflow .data-value { color: var(--app-text); } html[data-bs-theme='dark'] app-af-directory-coverflow :is(.chat-btn, .edit-btn) i { color: #8fc6ec; } html[data-bs-theme='dark'] app-af-directory-coverflow .profile-pic { background-color: #1c3348; color: #8fc6ec; } html[data-bs-theme='dark'] app-af-directory-coverflow .initials-avatar { background-color: var(--app-surface-3); color: var(--app-text); border-color: var(--app-border); } html[data-bs-theme='dark'] app-af-directory-coverflow :is(.readiness-percentage-label, .readiness-label-text) { color: var(--app-text); } /* Directory → Grid: card hover highlight. The component's light-blue .grid-card:hover fill loses to the blanket .card !important rule in dark mode, so cards gave no feedback on hover. */ html[data-bs-theme='dark'] app-af-directory-grid .grid-card:hover { background-color: #2e4257 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important; } /* Directory → Profiles: selected airman in the left list. The light-blue highlight was an inline ngStyle that the blanket .card !important rule erased in dark mode; now a class, skinned like the other selected pills. */ html[data-bs-theme='dark'] app-af-manage-airman .airman-card.selected-airman { background-color: #1f6fb2 !important; border-color: #6cc0ff !important; } html[data-bs-theme='dark'] app-af-manage-airman .airman-card.selected-airman :is(strong, small, .text-muted) { color: #ffffff !important; } /* Custom coverflow navigation buttons */ html[data-bs-theme='dark'] app-af-directory-coverflow .cf-nav { background-color: var(--app-surface-3); border-color: var(--app-border); color: #8fc6ec; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } html[data-bs-theme='dark'] app-af-directory-coverflow .cf-nav:hover { background-color: #1f6fb2; color: #ffffff; }