/* ============================================================================ theme-dark.css — Dark-mode overrides for SEMANTIC color sets + BESPOKE surfaces (Appearance/Themes Wave 3+). Plan docs/APPEARANCE-THEMES-PLAN.md §0.7.3. WHY a marker (not the var() token cascade used for the grid chrome): these surfaces are either (a) semantic color SETS that must stay DISTINGUISHABLE under Dark (status badges, the 8-colour group-by palette, risk score/status cells) and can't fold into the 72 core tokens without losing meaning, or (b) bespoke layouts (Daily Reports dashboard, Project Dashboard) with dozens of one-off colours that would bloat the spec + force a live-DB reseed. A `data-theme-mode="dark"` marker on — the theme-AGNOSTIC light/dark signal (set by theme-boot.applyAppearance + the index.html FOUC bootstrap from the active theme's `mode`) — lets us repaint them with scoped CSS. PHASE 4 (plan §0.13, 2026-06-22): these rules were migrated from the slug-specific `[data-theme="dark"]` to `[data-theme-mode="dark"]`, so ANY dark theme (a superadmin-created custom theme of any slug — not only the built-in "dark") picks them up too. The shipped "dark" theme sets BOTH attributes, so the migration is byte-identical for it. CLASSIC-SAFE (the #1 gate): EVERY rule here is scoped under [data-theme-mode="dark"]. Classic sets NO marker → none of these match → byte-identical. Light sets data-theme-mode="light" → these dark rules don't match it either (Light keeps its existing light colours; add [data-theme-mode="light"] blocks only if a surface needs a Light-specific tweak — none do today). ============================================================================ */ /* ─────────────────────────────────────────────────────────────────────────── 1. GROUP-BY category palette — RETROFITTED to base tokens (plan §0.13 Phase 3, 2026-06-22). group-by-manager.css now reads .group-header-row.grp-0..7 (band fill / border / text / .group-dot) from the NEW --grp{0..7}-{bg,bd,tx,dot} palette tokens, and .group-by-select from --tb-btn-*. Classic falls to each rule's exact literal (byte-identical); ANY theme drives the 8-hue band coding. Markers DELETED — now editor-driven (editor group 'palette'). Distinct from the DR-scoped --dr-grp* set. ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 2. RISK score / status conditional CELLS — RETROFITTED to base tokens (plan §0.13 Phase 3, 2026-06-22). risk-management-styles.css now reads .risk-score-* / .risk-status-* from the NEW --risk-* tokens (background only; the cell text is the themed --cell-text). Classic falls to each rule's light literal (byte-identical); ANY theme drives the red→amber→green severity ramp. Markers DELETED — now editor-driven (editor group 'risk'). ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 3. STATUS / pill badges across modules — RETROFITTED to the base semantic palette (plan §0.13 Phase 3, 2026-06-22). documents / rfis / submittals / meetings status badges now read background + color from --chip-neutral-* (draft/neutral) and --sem-{ok,warn,danger,info} (+ the --sem-*-bg soft fills) in each module's own CSS. Classic falls to each badge's exact pastel literal (byte-identical); ANY theme drives them. This ALSO closes the badge states that had NO dark marker before (rfis closed/ closeddraft/closedrevised/overdue, submittals open/closed/recycled, documents rejected/ superseded, meetings open/closed/overdue) — they were light-pastel-in-dark leaks. Markers DELETED — editor-driven via the 'status' + 'chips' groups. (Daily-Report dr-pill badges were retrofitted earlier in Phase 1.5.) ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 4. DAILY REPORTS — bespoke 2-level dashboard (L1 list/calendar + L2 day-view). PHASE 1 + 1.5 (plan §0.13): the structural chrome AND the semantic palette are now 100% editor-driven — every rule reads base-CSS var(--token, ) in daily-reports.css (Classic = the literal, byte-identical; any theme drives it). Structural map: card→--surface-card, page→--page-bg, recessed→--panel-bg, control→--tb-btn-*, hover→--row-hover-bg, border→--header-border, text→--cell-text. Semantic map (Phase 1.5, 2026-06-22): active/selected/focus→--sel-bg/--sel-fg (borders --tb-btn-hover-border); status text→--sem-ok/warn/danger/info; solid CTAs→--btn-primary/--btn-ok; count chips→--chip-neutral-*; 13 section dots→ --dr-sec-*; 5 category bands→--dr-grp{0..4}-{bg,bd,tx,dot}; weather→--dr-wx-accent; danger note-cards→--sem-danger/--sem-danger-bg. ALL dark markers below were DELETED. ONE remnant remains — the loading scrim: a semi-transparent rgba overlay whose alpha the hex token shape can't express (true Bucket B; needs a future alpha-aware token). ─────────────────────────────────────────────────────────────────────────── */ [data-theme-mode="dark"] #daily-reports-container .dr-loading { background: rgba(11,16,24,.7); color: #8995ae; } [data-theme-mode="dark"] #daily-reports-container td.dr-req-empty { background: #2a1618; box-shadow: inset 3px 0 0 #e74c3c; } /* ─────────────────────────────────────────────────────────────────────────── 5. PROJECT DASHBOARD (dashboard-styles.css) — the default landing view. PHASE 1 (plan §0.13): the bespoke tiles/sections/widgets were retrofitted to base-CSS var(--token, ) IN dashboard-styles.css, so they now follow ANY theme (Light + Dark) and Classic falls to the literal (byte-identical); the editor's knobs drive them. Token map: page→--page-bg, card→--surface-card, inner-panel→--panel-bg, border→--header-border, strong text→--cell-text, muted→--tb-color, hover→--row-hover-bg, buttons→--tb-btn-*, active-tab→--actbtn-view. The marker rules that lived here were DELETED in Phase 1. DEFERRED to Phase 2 (Bucket B — these selectors have NO base rule, so a base default must be seeded alongside the token before they can be tokenized Classic-safely): the empty / no-data states, the legacy / mislabelled header + milestone-row variants, and the generic inner inputs/selects — kept marker-scoped below until Phase 2. ─────────────────────────────────────────────────────────────────────────── */ [data-theme-mode="dark"] .upcoming-trade-group-header, [data-theme-mode="dark"] .milestone-row { background: #16243a; border-color: #283652; } [data-theme-mode="dark"] .upcoming-empty, [data-theme-mode="dark"] .no-data-message { background: #16243a; color: #8995ae; } [data-theme-mode="dark"] .dashboard-container-wrapper input, [data-theme-mode="dark"] .dashboard-container-wrapper select { background: var(--tb-btn-bg, #1f2c46); color: var(--cell-text, #edf1fa); border-color: var(--tb-btn-border, #2b3a57); } /* ─────────────────────────────────────────────────────────────────────────── 6. AI-ANALYSIS MODULE (ai-analysis-styles.css) — now 100% TOKEN-DRIVEN. Every themed surface/border/text/accent reads base-CSS var(--token, ) so the module follows ANY theme and Classic stays byte-identical; the old dark-marker block (controls / status / tabs / results / chat / chat-only / mode-toggle / mini-gantt / tm- modal) is retired (plan §0.13 Phase 1, §6). Only the two genuinely translucent surfaces below remain as dark overrides (Bucket B — an rgba() alpha can't be expressed by the hex token shape). Saturated data-viz (gantt bars, rank/delta badges, severity colours) was never marked, keeps its hue. ─────────────────────────────────────────────────────────────────────────── */ [data-theme-mode="dark"] .ai-thinking-content { background: rgba(0,0,0,.25); } [data-theme-mode="dark"] .ai-thinking-tool strong { background: rgba(196,181,253,.15); } /* ─────────────────────────────────────────────────────────────────────────── 7. TOOLBAR BUTTONS + POPOVERS (excel-toolbar.css) — RETROFITTED to Option-A tokens (plan §0.13 Phase 1, 2026-06-22). The toolbar `.active` button, the ☰ hamburger / view-settings trigger buttons, the toolbar `.dropdown-menu` (column chooser / baseline picker / font-size), the hamburger dropdown (.hm-*) and the view-settings dropdown (.vs-*) are now token-driven in BASE CSS via var(--popover-bg/-text/-border/-hover, --panel-bg, --tb-btn-bg/-border/-hover-bg/ -hover-border, --tb-color, --cell-text, --sel-bg/--sel-fg, --btn-primary) — so they follow ANY theme and Classic falls to each rule's exact literal (byte- identical). The whole [data-theme-mode="dark"] marker block for these surfaces is now DELETED. Saturated accents (switch-on, checked/selected, the active blue) read --btn-primary / --sel-* (same hue, just editable). Documented dark hair- shifts: popover body text #cdd5e6→--popover-text #dbe2f0; trigger/step hover- border #44557a→--tb-btn-border #2b3a57 (mirrors §12.1); disabled/outline #56657c/#475569→--tb-color #8995ae. The grid-colour PALETTE swatches/inputs stay raw (arbitrary user data, like §12.2). Bonus dark-leak fixed: the column- chooser .checkbox-item label text (#495057, was dark-on-dark) → --popover-text. ─────────────────────────────────────────────────────────────────────────── */ /* Module HEADER action buttons (secondary white/grey ones; .btn-primary follows the accent and is left as-is). Marker-scoped → Classic/Light untouched. */ [data-theme-mode="dark"] .documents-actions .doc-upload-btn, [data-theme-mode="dark"] .documents-actions .doc-export-btn, [data-theme-mode="dark"] .documents-actions .doc-settings-btn, [data-theme-mode="dark"] .rfis-actions .rfi-export-btn, [data-theme-mode="dark"] .rfis-actions .rfi-settings-btn, [data-theme-mode="dark"] .submittals-actions button { background: #1f2c46; border-color: #2b3a57; color: #dbe2f0; } [data-theme-mode="dark"] .documents-actions .doc-upload-btn:hover, [data-theme-mode="dark"] .documents-actions .doc-export-btn:hover, [data-theme-mode="dark"] .documents-actions .doc-settings-btn:hover, [data-theme-mode="dark"] .rfis-actions .rfi-export-btn:hover, [data-theme-mode="dark"] .rfis-actions .rfi-settings-btn:hover, [data-theme-mode="dark"] .submittals-actions button:hover { background: #24314b; border-color: #1199fc; color: #66bdff; } /* Keep the primary/create buttons on their accent under Dark (override the grey-button :hover rule above for .btn-primary / create, which also match .submittals-actions button) */ [data-theme-mode="dark"] .submittals-actions .btn-primary, [data-theme-mode="dark"] .submittals-actions .submittal-create-btn { background: var(--btn-pri, #2563eb); border-color: var(--btn-pri, #2563eb); color: #fff; } [data-theme-mode="dark"] .submittals-actions .submittal-create-btn:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } /* ─────────────────────────────────────────────────────────────────────────── 8. GRID COLUMN-HEADER MENU — RETROFITTED to Option-A tokens (plan §0.7.9, 2026-06-19). #column-menu + .column-menu-item are now driven by inline var() tokens set in column-menu-manager.js: --popover-bg / --popover-text / --popover-border / --popover-hover / --danger (delete action). Dark/Light come from the seeded theme; Classic falls back to the original literals (white / #ccc / #e0e0e0 / #f0f0f0 / #d32f2f), byte-identical. No [data-theme-mode="dark"] rules remain here. (One deviation: the dark dropdown shadow now uses the inline default 0 2px 8px rgba(0,0,0,.15) — box-shadow is not in the token model; both shadows are black, no light surface.) ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 9. PER-COLUMN ADVANCED FILTER MODAL — RETROFITTED to Option-A tokens (plan §0.7.9, 2026-06-19). advanced-filter-ui.js's injected #advanced-filter-styles now consumes var() tokens directly: modal → --popover-bg/-text/-border; header/footer/operator-box/ set-filter-list/scrollbar-track → --panel-bg (NEW token); inputs/footer+set buttons → --tb-btn-*; muted text (labels/close/row-count/funnel/empty/value-count) → --tb-color; bright text (title/input/close-hover) → --cell-text; item label/operator label → --popover-text; reset button → --danger + --st-void-bg (hover); funnel/active → --tb-color/--popover-hover/--actbtn-view/--panel-bg. The funnel + sort header icons carried inline cssText color → tokenized in place. Dark/Light come from the seeded theme; Classic falls back to the original literals (byte-identical). No [data-theme-mode="dark"] rules remain here. (`.has-active-filter .column-filter` stays under §12.4, not §9.) ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 10. @MENTION @-suggestion DROPDOWN — RETROFITTED to Option-A tokens (§0.7.9). The dropdown chrome (panel/header/title/empty/loading/items/name/email/role/ scrollbar) is now token-driven in BASE CSS (mention-styles.css) via var(--popover-bg/-border, --panel-bg, --popover-hover, --cell-text, --tb-color, --tb-btn-border) — flips Dark/Light/Classic + Theme-Editor-tunable; no [data-theme-mode="dark"] dropdown rules remain here. The file's old OS-keyed @media (prefers-color-scheme: dark) block was scoped to Classic-only (:root:not([data-theme])) so the app theme — not the OS — drives Light/Dark, while Classic stays byte-identical. Only the inline @name CHIP keeps a marker below: a one-off blue semantic SET (same policy as status badges), not chrome. (Dropdown box-shadow drops the marker's rgba(0,0,0,.4) → base rgba(0,0,0,.15); composite shadow isn't in the 4-type token model — both black, negligible. §D-078-16) ─────────────────────────────────────────────────────────────────────────── */ [data-theme-mode="dark"] .mention { background-color: #16334d; color: #66bdff; } [data-theme-mode="dark"] .mention:hover { background-color: #1d4368; } /* ─────────────────────────────────────────────────────────────────────────── 11. USER ACCOUNT BUTTON + DROPDOWN — RETROFITTED to tokens (plan §0.7.9, iter #10). The pill, dropdown menu, items, dividers, section labels, logout, toggle track and scrollbar are now token-driven in BASE CSS (user-profile-enhanced.css, "§11 THEME TOKENS" block) via var(--tb-btn-bg/-border, --popover-bg/-text/-border/-hover, --cell-text, --tb-color, --danger, --st-void-bg, --panel-bg). No [data-theme-mode="dark"] rules remain here. Purple gradient header / avatars / ADMIN badge intentionally untokenized (brand gradient). Dark hair-shifts vs the old marker (Dark is not byte-identical-guaranteed): hover-border #44557a→#2b3a57, logout-hover #3a1518→#3a0f17, the .active toggle now keeps its green ON accent, box-shadows stay the base (lighter) values (composite shadow — see D-078-16). §D-078-17. ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 12. FULL-SCREEN AUDIT LEFTOVERS (§0.7.7). Seven light surfaces the §0.7.6 pass left behind, found by the automated light-surface scan. Each is marker-scoped → Classic/Light byte-identical. !important is used ONLY where the source paints via an inline style or its own !important (noted per block). ─────────────────────────────────────────────────────────────────────────── */ /* 12.1 — Top-bar "☰ Menu" pill + every .action-btn — RETROFITTED to tokens (plan §0.7.9, iter #11). Now token-driven in BASE style.css `.action-btn` via var(--tb-btn-bg/-border/ -text, --tb-btn-hover-bg, --btn-primary (active bg+border), --panel-bg/--tb-color/ --tb-btn-border (disabled)). No [data-theme] rule remains. Dark hair-shifts vs the old marker: hover-border #44557a→#2b3a57, disabled bg #1a2438→#16243a / text #56657c→#8995ae; the hover box-shadow stays the base value (composite shadow, see D-078-16). §D-078-18. */ /* 12.2 — Column-GROUP header band (th.grouped-header) + grouped column cells (th.grouped-col). column-group-manager.js paints `background:${group.color}` as an INLINE style with a user-picked, ARBITRARY hex (default #e8f4fd; Procurement's "START DATES" = green #e8fdf3). Inline + arbitrary ⇒ reactive CSS can't per-value remap, and a JS remap wouldn't react to a live theme switch (applyTheme only re-paints tokens, never re-renders the grid). So Dark FLATTENS the band to a dark surface (per-group hue not preserved under Dark — deliberate, see plan §0.7.7). Inline bg ⇒ !important required. The ⋮/collapse glyphs carry inline color:#666 (invisible on dark) so they relight too. */ /* PHASE 3 (plan §0.13): slug-specific [data-theme="dark"] → [data-theme-mode="dark"] so ANY dark theme flattens the arbitrary inline group colour; raw literals → --tb-btn-bg / --tb-color. */ [data-theme-mode="dark"] th.grouped-header { background: var(--tb-btn-bg, #1f2c46) !important; color: var(--hdr-text, #edf1fa) !important; border-color: var(--hdr-border, #283652) !important; } [data-theme-mode="dark"] th.grouped-col { background: var(--hdr-bg, #162136) !important; color: var(--hdr-text, #edf1fa) !important; border-color: var(--hdr-border, #283652) !important; } [data-theme-mode="dark"] th.grouped-header .group-collapse-btn, [data-theme-mode="dark"] th.grouped-col .column-menu-trigger { color: var(--tb-color, #8995ae) !important; } /* 12.3 — Documents view/scope bar — RETROFITTED to tokens (plan §0.7.9, iter #12). `.documents-view-bar` (documents.css) → var(--header-bg/--header-border); the shared `.data-scope-label`/`.data-scope-select` (grid-tokens.css) → var(--tb-color, --tb-btn-bg/ -border/-text) — this also themes the RFIs/Submittals scope selectors. The "Group" pill's colours moved OFF the inline cssText (document-grid.js) into a token-driven `.doc-group-btn` class rule (documents.css), so no !important is needed. No [data-theme] rule remains. Dark hair-shift: select/group hover-border #44557a→#2b3a57. §D-078-19. */ /* 12.4 — Active-filter highlight on a column-filter INPUT (light-blue #e8f0fe). The generic rule (advanced-filter-ui.js injected