/** * MDT Central — global stylesheet * Extends Bootstrap 5.3 * * Token architecture (UI_STANDARDS.md §4): * 1. Brand constants --mdt-* — raw palette; never consumed by components. * 2. Semantic tokens --ctl-* — the ONLY layer components consume. * :root carries Operator Light (the no-attribute default, so standalone * pages that load this file with no theming logic get it free). Five * override blocks build the other sheets, keyed on . Block ORDER is load-bearing: the single-attribute * blocks come first, the style+scheme combos after, so a later block * always refines an earlier one at equal-or-higher specificity. * 3. Bootstrap bridge — --ctl-* mapped onto Bootstrap 5.3's --bs-* variables * so native components (tooltips, popovers, offcanvas, toasts, modals, * dropdowns) theme correctly with zero per-component dark overrides. * * Fonts arrive from /css/fonts.css (Oswald variable 200-700, Lato 300/400/700/900). */ /* ═══ Layer 1 — Brand constants (components never reference these) ═══ */ :root { --mdt-black: #000000; --mdt-white: #ffffff; /* Grey ramp */ --mdt-grey-050: #f8f8f8; --mdt-grey-100: #f5f5f5; --mdt-grey-200: #dcdcdc; --mdt-grey-300: #c4c4c4; --mdt-grey-400: #a0a0a0; --mdt-grey-500: #858585; --mdt-grey-600: #5c5c5c; --mdt-grey-700: #3a3a3a; --mdt-grey-800: #2a2a2a; --mdt-grey-900: #161616; /* MDT green ramp (brand accent) */ --mdt-green-100: #e7ecd3; --mdt-green-400: #9fbc50; --mdt-green-500: #86a33d; --mdt-green-600: #6d8730; --mdt-green-700: #5a7028; /* Refined Blue ramp */ --mdt-blue-300: #6a9bff; --mdt-blue-400: #4b86ff; --mdt-blue-500: #2f6fed; --mdt-blue-600: #2258c9; --mdt-blue-700: #1b46a0; /* Status */ --mdt-red-100: #fbebe9; --mdt-red-400: #e05a55; --mdt-red-500: #b4231f; --mdt-red-900: #381411; /* wash dark enough for red-400 text at 4.5:1 */ --mdt-amber-100: #fbf3e0; --mdt-amber-500: #c98a1a; --mdt-amber-600: #93650f; /* 4.5:1 as text on the amber-100 wash */ --mdt-amber-900: #332508; } /* ═══ Layer 2 — Semantic tokens: sheet 1/6, Operator Light (default) ═══ */ :root { /* Surfaces (Operator: warm-tinted neutrals) */ --ctl-bg: #f6f6f4; --ctl-bg-alt: var(--mdt-white); --ctl-bg-elevated: var(--mdt-white); --ctl-bg-inset: var(--mdt-white); --ctl-bg-inverse: #141414; --ctl-bg-hover: #ecece7; /* Text */ --ctl-fg: #141414; --ctl-fg-muted: var(--mdt-grey-600); --ctl-fg-subtle: #6e6e6e; --ctl-fg-faint: #a8a8a3; /* decorative/disabled ONLY — not AA */ /* Borders */ --ctl-border: #d8d8d2; --ctl-border-strong: #c8c8c2; /* Accent (MDT green; accent-fg per §4.5: black on green in green styles) */ --ctl-accent: var(--mdt-green-500); --ctl-accent-hover: var(--mdt-green-600); --ctl-accent-press: var(--mdt-green-700); --ctl-accent-fg: #000000; --ctl-accent-text: var(--mdt-green-700); --ctl-accent-rgb: 134, 163, 61; --ctl-link: var(--mdt-green-700); --ctl-link-rgb: 90, 112, 40; --ctl-link-hover: #47591f; --ctl-link-hover-rgb: 71, 89, 31; /* RGB triplets of scheme surfaces/text (for rgba() composition + bridge) */ --ctl-fg-rgb: 20, 20, 20; --ctl-bg-rgb: 246, 246, 244; --ctl-bg-alt-rgb: 255, 255, 255; --ctl-fg-muted-rgb: 92, 92, 92; /* Status (§4.3) — base / contrast-safe text / background wash */ --ctl-danger: var(--mdt-red-500); --ctl-danger-text: var(--mdt-red-500); --ctl-danger-bg: var(--mdt-red-100); --ctl-danger-rgb: 180, 35, 31; --ctl-warning: var(--mdt-amber-500); --ctl-warning-text: var(--mdt-amber-600); --ctl-warning-bg: var(--mdt-amber-100); --ctl-warning-rgb: 201, 138, 26; --ctl-success: var(--mdt-green-600); --ctl-success-text: var(--mdt-green-700); --ctl-success-bg: var(--mdt-green-100); --ctl-success-rgb: 109, 135, 48; --ctl-info: var(--mdt-grey-600); --ctl-info-text: var(--mdt-grey-600); --ctl-info-bg: #f1f1f1; --ctl-info-rgb: 92, 92, 92; /* Shadows (dark schemes raise opacity, never geometry) */ --ctl-shadow: rgba(0, 0, 0, 0.075); --ctl-shadow-hover: rgba(0, 0, 0, 0.1); /* Workflow status / risk text colors — legacy hues kept distinct (they encode different states), lightness dropped so each reads ≥4.5:1 as text on every light-sheet surface (worst case Refined Light #eef2f7); dark-sheet overrides live in the scheme blocks below. */ --ctl-status-new: #117888; --ctl-status-assigned: #006adb; --ctl-status-in-progress: #a95700; --ctl-risk-high: #a95700; --ctl-risk-medium: #0264f4; /* ── Structure scales (§4.4) — style/scheme-invariant except radius ── */ --ctl-radius: 0px; /* Industrial/Operator sharp; Refined overrides. 0px (not 0) so Bootstrap's calc() compositions of --bs-border-radius stay valid arithmetic. */ --ctl-radius-lg: 0px; --ctl-radius-full: 999px; /* Spacing — 8pt ramp */ --ctl-sp-1: 4px; --ctl-sp-2: 8px; --ctl-sp-3: 12px; --ctl-sp-4: 16px; --ctl-sp-5: 24px; --ctl-sp-6: 32px; --ctl-sp-7: 48px; --ctl-sp-8: 64px; --ctl-sp-9: 96px; --ctl-sp-10: 128px; /* Z-index scale — no literal z-index elsewhere (existing literals migrate in Phase B component rebuilds) */ --ctl-z-sticky: 100; --ctl-z-sidebar: 200; --ctl-z-panel: 300; --ctl-z-dropdown: 500; --ctl-z-modal-backdrop: 900; --ctl-z-modal: 1000; --ctl-z-toast: 1100; --ctl-z-tooltip: 1200; /* Motion */ --ctl-dur-fast: 120ms; --ctl-dur: 180ms; --ctl-dur-slow: 300ms; /* Focus ring — accent at 35% alpha, box-shadow form (§4.4) */ --ctl-focus-ring: 0 0 0 3px rgba(var(--ctl-accent-rgb), 0.35); /* Layout */ --ctl-sidebar-width: 230px; /* Second nav panel (single-layer drilldown, UI_STANDARDS §7) */ --ctl-sidebar-panel-width: 260px; /* Content clamps — settings/form/reading pages; data surfaces run full width */ --ctl-content-max: 68rem; --ctl-content-max-narrow: 46rem; --ctl-sidebar-collapsed: 52px; /* ── Typography (§2) ── */ --ctl-font-display: 'Oswald', 'Arial Narrow', sans-serif; /* Body face: system stack for UI/table legibility (stakeholder test 2026-07-20 — Lato read poorly at data densities). Oswald remains the display face; Lato stays available via --ctl-font-brand for brand-voice surfaces if wanted. */ --ctl-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ctl-font-brand: 'Lato', 'Helvetica Neue', Arial, sans-serif; /* 7-step app type scale (§2.1). --ctl-fs-body is the density-varying base UI size (§5: 15px comfortable / 13.5px compact). */ --ctl-fs-display-lg: 40px; --ctl-fs-display-md: 28px; --ctl-fs-display-sm: 22px; --ctl-fs-body-lg: 16px; --ctl-fs-body: 15px; --ctl-fs-body-sm: 12.5px; --ctl-fs-caption: 11px; --ctl-lh-tight: 1.02; --ctl-lh-snug: 1.15; --ctl-lh-normal: 1.5; --ctl-lh-relaxed: 1.7; /* ── Density (§5) — comfortable defaults; compact overrides below ── */ --ctl-control-pad-y: 0.475rem; /* ≈40px control at 15px/1.5 + 1px borders */ --ctl-control-pad-x: 0.625rem; --ctl-fs-label: 13px; --ctl-table-cell-pad-y: 10px; --ctl-section-pad: var(--ctl-sp-5); } /* ═══ Sheet 2/6 — Operator Dark (keys on scheme alone so pages that set only data-bs-theme="dark" still theme correctly) ═══ */ html[data-bs-theme="dark"] { --ctl-bg: #060606; --ctl-bg-alt: #0b0b0b; --ctl-bg-elevated: #151515; --ctl-bg-inset: #0e0e0c; --ctl-bg-inverse: #f6f6f4; --ctl-bg-hover: #1b1b19; --ctl-fg: var(--mdt-white); --ctl-fg-muted: #9a9a9a; /* #7d7d7d was 4.44:1 on bg-elevated #151515 (the lightest Operator-dark surface) — a hair under the §4.5 binding ≥4.5 rule for label text. Lightness-only nudge to #808080 → 4.62:1 (Task 06 precedent). */ --ctl-fg-subtle: #808080; --ctl-fg-faint: var(--mdt-grey-600); --ctl-border: #2b2b27; --ctl-border-strong: #3a3a36; --ctl-accent-hover: var(--mdt-green-400); --ctl-accent-press: var(--mdt-green-600); --ctl-accent-text: var(--mdt-green-400); --ctl-link: var(--mdt-green-400); --ctl-link-rgb: 159, 188, 80; --ctl-link-hover: #b4cf6b; --ctl-link-hover-rgb: 180, 207, 107; --ctl-fg-rgb: 255, 255, 255; --ctl-bg-rgb: 6, 6, 6; --ctl-bg-alt-rgb: 11, 11, 11; --ctl-fg-muted-rgb: 154, 154, 154; --ctl-danger-text: var(--mdt-red-400); --ctl-danger-bg: var(--mdt-red-900); --ctl-warning-text: var(--mdt-amber-500); --ctl-warning-bg: var(--mdt-amber-900); --ctl-success-text: var(--mdt-green-400); --ctl-success-bg: #1c2410; --ctl-info: #9a9a9a; --ctl-info-text: #9a9a9a; --ctl-info-bg: #1e1e1e; --ctl-info-rgb: 154, 154, 154; --ctl-shadow: rgba(0, 0, 0, 0.45); --ctl-shadow-hover: rgba(0, 0, 0, 0.55); --ctl-status-new: #22d3ee; --ctl-status-assigned: #60a5fa; --ctl-status-in-progress: #fb923c; --ctl-risk-high: #fb923c; --ctl-risk-medium: #60a5fa; } /* ═══ Sheet 3/6 — Refined Blue Light ═══ */ html[data-style="refined"] { --ctl-bg: #eef2f7; --ctl-bg-alt: var(--mdt-white); --ctl-bg-elevated: var(--mdt-white); --ctl-bg-inset: #f5f8fb; --ctl-bg-inverse: #0b1a2e; --ctl-bg-hover: #e2e9f2; --ctl-fg: #0b1a2e; --ctl-fg-muted: #5a6b80; --ctl-fg-subtle: #5a6b80; --ctl-fg-faint: #9fb0c2; --ctl-border: #dbe2ea; --ctl-border-strong: #d3dde8; --ctl-accent: var(--mdt-blue-500); --ctl-accent-hover: var(--mdt-blue-600); --ctl-accent-press: var(--mdt-blue-700); --ctl-accent-fg: #ffffff; /* §4.5: white-on-blue passes 4.55:1 */ /* accent-text decoupled from the fill (same pattern as the green styles): blue-500 reads 4.05:1 on the tinted page bg — blue-600 clears 4.5 on every Refined Light surface (Phase F certification). */ --ctl-accent-text: var(--mdt-blue-600); --ctl-accent-rgb: 47, 111, 237; --ctl-link: var(--mdt-blue-600); --ctl-link-rgb: 34, 88, 201; --ctl-link-hover: var(--mdt-blue-700); --ctl-link-hover-rgb: 27, 70, 160; --ctl-fg-rgb: 11, 26, 46; --ctl-bg-rgb: 238, 242, 247; --ctl-bg-alt-rgb: 255, 255, 255; --ctl-fg-muted-rgb: 90, 107, 128; --ctl-radius: 3px; --ctl-radius-lg: 6px; } /* ═══ Sheet 4/6 — Refined Blue Dark ═══ */ html[data-style="refined"][data-bs-theme="dark"] { --ctl-bg: #0a1626; --ctl-bg-alt: #0c1827; --ctl-bg-elevated: #0f2138; --ctl-bg-inset: #0a1727; --ctl-bg-inverse: #eef2f7; --ctl-bg-hover: #13273e; --ctl-fg: #eaf1f8; --ctl-fg-muted: #8aa4c0; --ctl-fg-subtle: #7e96b0; --ctl-fg-faint: #5c7799; --ctl-border: #1e3550; --ctl-border-strong: #244260; --ctl-accent-hover: var(--mdt-blue-400); --ctl-accent-press: var(--mdt-blue-300); --ctl-accent-text: var(--mdt-blue-400); --ctl-link: var(--mdt-blue-400); --ctl-link-rgb: 75, 134, 255; --ctl-link-hover: var(--mdt-blue-300); --ctl-link-hover-rgb: 106, 155, 255; --ctl-fg-rgb: 234, 241, 248; --ctl-bg-rgb: 10, 22, 38; --ctl-bg-alt-rgb: 12, 24, 39; --ctl-fg-muted-rgb: 138, 164, 192; } /* ═══ Sheet 5/6 — Industrial Light ═══ */ html[data-style="industrial"] { --ctl-bg: var(--mdt-white); --ctl-bg-alt: var(--mdt-grey-100); --ctl-bg-elevated: var(--mdt-white); --ctl-bg-inset: var(--mdt-grey-050); --ctl-bg-inverse: #111111; --ctl-bg-hover: #eeeeee; --ctl-fg: #111111; --ctl-fg-muted: var(--mdt-grey-600); --ctl-fg-subtle: #6e6e6e; --ctl-fg-faint: var(--mdt-grey-400); --ctl-border: var(--mdt-grey-200); --ctl-border-strong: var(--mdt-grey-300); --ctl-fg-rgb: 17, 17, 17; --ctl-bg-rgb: 255, 255, 255; --ctl-bg-alt-rgb: 245, 245, 245; } /* ═══ Sheet 6/6 — Industrial Dark ═══ */ html[data-style="industrial"][data-bs-theme="dark"] { --ctl-bg: var(--mdt-black); --ctl-bg-alt: #0c0c0c; --ctl-bg-elevated: var(--mdt-grey-900); --ctl-bg-inset: #0d0d0d; --ctl-bg-inverse: var(--mdt-grey-100); --ctl-bg-hover: #1d1d1d; --ctl-fg: var(--mdt-white); --ctl-fg-muted: #9a9a9a; --ctl-fg-subtle: var(--mdt-grey-500); --ctl-fg-faint: var(--mdt-grey-600); --ctl-border: var(--mdt-grey-800); --ctl-border-strong: var(--mdt-grey-700); --ctl-accent-text: var(--mdt-green-500); --ctl-fg-rgb: 255, 255, 255; --ctl-bg-rgb: 0, 0, 0; --ctl-bg-alt-rgb: 12, 12, 12; } /* ═══ Density — compact (§5). Comfortable defaults live in :root. ═══ */ html[data-density="compact"] { --ctl-fs-body: 13.5px; --ctl-control-pad-y: 0.25rem; /* ≈30px control — today's ultra-compact */ --ctl-control-pad-x: 0.5rem; --ctl-fs-label: 12px; --ctl-table-cell-pad-y: 4px; --ctl-section-pad: var(--ctl-sp-3); } /* ═══ Layer 3 — Bootstrap 5.3 bridge ═══ One block, resolved per-element against the cascaded --ctl values, so all six sheets flow through automatically. The html[data-bs-theme="dark"] selector is included to out-rank Bootstrap's own [data-bs-theme=dark] variable block regardless of stylesheet order. */ :root, html[data-bs-theme="dark"] { --bs-body-bg: var(--ctl-bg); --bs-body-bg-rgb: var(--ctl-bg-rgb); --bs-body-color: var(--ctl-fg); --bs-body-color-rgb: var(--ctl-fg-rgb); --bs-body-font-family: var(--ctl-font-body); --bs-body-font-size: var(--ctl-fs-body); --bs-emphasis-color: var(--ctl-fg); --bs-emphasis-color-rgb: var(--ctl-fg-rgb); --bs-heading-color: var(--ctl-fg); --bs-secondary-color: var(--ctl-fg-muted); --bs-secondary-bg: var(--ctl-bg-alt); --bs-tertiary-color: var(--ctl-fg-subtle); --bs-tertiary-bg: var(--ctl-bg-alt); --bs-border-color: var(--ctl-border); --bs-border-radius: var(--ctl-radius); --bs-border-radius-sm: var(--ctl-radius); --bs-border-radius-lg: var(--ctl-radius-lg); --bs-border-radius-xl: var(--ctl-radius-lg); --bs-link-color: var(--ctl-link); --bs-link-color-rgb: var(--ctl-link-rgb); --bs-link-hover-color: var(--ctl-link-hover); --bs-link-hover-color-rgb: var(--ctl-link-hover-rgb); --bs-code-color: var(--ctl-accent-text); --bs-focus-ring-color: rgba(var(--ctl-accent-rgb), 0.35); /* Theme colors + utility triplets (.bg-*, .text-*, rgba washes) */ --bs-primary: var(--ctl-accent); --bs-primary-rgb: var(--ctl-accent-rgb); --bs-secondary: var(--ctl-fg-muted); --bs-secondary-rgb: var(--ctl-fg-muted-rgb); --bs-success: var(--ctl-success); --bs-success-rgb: var(--ctl-success-rgb); --bs-danger: var(--ctl-danger); --bs-danger-rgb: var(--ctl-danger-rgb); --bs-warning: var(--ctl-warning); --bs-warning-rgb: var(--ctl-warning-rgb); --bs-info: var(--ctl-info); --bs-info-rgb: var(--ctl-info-rgb); --bs-light-rgb: var(--ctl-bg-alt-rgb); /* .bg-light → bg-alt in every sheet */ /* Subtle system (alerts, .text-bg-*, list-group variants) */ --bs-success-bg-subtle: var(--ctl-success-bg); --bs-success-text-emphasis: var(--ctl-success-text); --bs-success-border-subtle: var(--ctl-success-bg); --bs-danger-bg-subtle: var(--ctl-danger-bg); --bs-danger-text-emphasis: var(--ctl-danger-text); --bs-danger-border-subtle: var(--ctl-danger-bg); --bs-warning-bg-subtle: var(--ctl-warning-bg); --bs-warning-text-emphasis: var(--ctl-warning-text); --bs-warning-border-subtle: var(--ctl-warning-bg); --bs-info-bg-subtle: var(--ctl-info-bg); --bs-info-text-emphasis: var(--ctl-info-text); --bs-info-border-subtle: var(--ctl-info-bg); } /* Bootstrap components whose compiled vars are literals (not global-var references) — re-pointed at semantic tokens once, valid for all six sheets. These replace the deleted body.theme-dark per-component patches. */ .dropdown-menu { --bs-dropdown-bg: var(--ctl-bg-elevated); --bs-dropdown-color: var(--ctl-fg); --bs-dropdown-border-color: var(--ctl-border); --bs-dropdown-link-color: var(--ctl-fg); --bs-dropdown-link-hover-color: var(--ctl-fg); --bs-dropdown-link-hover-bg: var(--ctl-bg-hover); --bs-dropdown-link-active-color: var(--ctl-accent-fg); --bs-dropdown-link-active-bg: var(--ctl-accent); --bs-dropdown-divider-bg: var(--ctl-border); --bs-dropdown-header-color: var(--ctl-fg-subtle); } .modal { --bs-modal-bg: var(--ctl-bg-elevated); --bs-modal-color: var(--ctl-fg); --bs-modal-border-color: var(--ctl-border); --bs-modal-header-border-color: var(--ctl-border); --bs-modal-footer-border-color: var(--ctl-border); } .list-group { --bs-list-group-bg: var(--ctl-bg-elevated); --bs-list-group-color: var(--ctl-fg); --bs-list-group-border-color: var(--ctl-border); --bs-list-group-action-color: var(--ctl-fg); --bs-list-group-action-hover-color: var(--ctl-fg); --bs-list-group-action-hover-bg: var(--ctl-bg-hover); --bs-list-group-action-active-color: var(--ctl-fg); --bs-list-group-action-active-bg: var(--ctl-bg-hover); --bs-list-group-active-bg: var(--ctl-accent); --bs-list-group-active-border-color: var(--ctl-accent); --bs-list-group-active-color: var(--ctl-accent-fg); --bs-list-group-disabled-color: var(--ctl-fg-faint); --bs-list-group-disabled-bg: var(--ctl-bg-elevated); } .pagination { --bs-pagination-bg: var(--ctl-bg-elevated); --bs-pagination-color: var(--ctl-fg); --bs-pagination-border-color: var(--ctl-border); --bs-pagination-hover-bg: var(--ctl-bg-hover); --bs-pagination-hover-color: var(--ctl-fg); --bs-pagination-hover-border-color: var(--ctl-border); --bs-pagination-focus-bg: var(--ctl-bg-hover); --bs-pagination-focus-color: var(--ctl-fg); --bs-pagination-focus-box-shadow: var(--ctl-focus-ring); --bs-pagination-active-bg: var(--ctl-accent); --bs-pagination-active-border-color: var(--ctl-accent); --bs-pagination-active-color: var(--ctl-accent-fg); --bs-pagination-disabled-bg: var(--ctl-bg-elevated); --bs-pagination-disabled-color: var(--ctl-fg-faint); --bs-pagination-disabled-border-color: var(--ctl-border); } .table { /* Transparent so card surfaces (and row-hover set on ) show through; sticky headers and pinned columns carry their own opaque backgrounds. */ --bs-table-bg: transparent; --bs-table-color: var(--ctl-fg); --bs-table-border-color: var(--ctl-border); --bs-table-striped-bg: var(--ctl-bg-alt); --bs-table-striped-color: var(--ctl-fg); --bs-table-hover-bg: var(--ctl-bg-hover); --bs-table-hover-color: var(--ctl-fg); } .table-light { --bs-table-bg: var(--ctl-bg-alt); --bs-table-color: var(--ctl-fg); --bs-table-border-color: var(--ctl-border); } .nav-tabs { --bs-nav-link-color: var(--ctl-fg-muted); --bs-nav-link-hover-color: var(--ctl-fg); --bs-nav-tabs-border-color: var(--ctl-border); --bs-nav-tabs-link-active-color: var(--ctl-accent-text); --bs-nav-tabs-link-active-bg: var(--ctl-bg-elevated); --bs-nav-tabs-link-active-border-color: var(--ctl-border) var(--ctl-border) var(--ctl-bg-elevated); --bs-nav-tabs-link-hover-border-color: var(--ctl-bg-hover) var(--ctl-bg-hover) var(--ctl-border); } /* Primary button — accent fill with contrast-verified face (§4.5: black on brand green 7.32:1 in Industrial/Operator; white on blue 4.55:1 in Refined). */ .btn-primary { --bs-btn-color: var(--ctl-accent-fg); --bs-btn-bg: var(--ctl-accent); --bs-btn-border-color: var(--ctl-accent); --bs-btn-hover-color: var(--ctl-accent-fg); --bs-btn-hover-bg: var(--ctl-accent-hover); --bs-btn-hover-border-color: var(--ctl-accent-hover); --bs-btn-active-color: var(--ctl-accent-fg); --bs-btn-active-bg: var(--ctl-accent-press); --bs-btn-active-border-color: var(--ctl-accent-press); --bs-btn-disabled-color: var(--ctl-accent-fg); --bs-btn-disabled-bg: var(--ctl-accent); --bs-btn-disabled-border-color: var(--ctl-accent); --bs-btn-focus-shadow-rgb: var(--ctl-accent-rgb); } .btn-outline-primary { --bs-btn-color: var(--ctl-accent-text); --bs-btn-border-color: var(--ctl-accent); --bs-btn-hover-color: var(--ctl-accent-fg); --bs-btn-hover-bg: var(--ctl-accent); --bs-btn-hover-border-color: var(--ctl-accent); --bs-btn-active-color: var(--ctl-accent-fg); --bs-btn-active-bg: var(--ctl-accent-press); --bs-btn-active-border-color: var(--ctl-accent-press); --bs-btn-disabled-color: var(--ctl-fg-faint); --bs-btn-disabled-border-color: var(--ctl-border-strong); --bs-btn-focus-shadow-rgb: var(--ctl-accent-rgb); } /* Secondary per §6: 1px border-strong outline, transparent fill */ .btn-outline-secondary { --bs-btn-color: var(--ctl-fg-muted); --bs-btn-border-color: var(--ctl-border-strong); --bs-btn-hover-color: var(--ctl-fg); --bs-btn-hover-bg: var(--ctl-bg-hover); --bs-btn-hover-border-color: var(--ctl-border-strong); --bs-btn-active-color: var(--ctl-fg); --bs-btn-active-bg: var(--ctl-bg-hover); --bs-btn-active-border-color: var(--ctl-border-strong); --bs-btn-disabled-color: var(--ctl-fg-faint); --bs-btn-disabled-border-color: var(--ctl-border); } .btn-outline-danger { --bs-btn-color: var(--ctl-danger-text); --bs-btn-border-color: var(--ctl-danger); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--ctl-danger); --bs-btn-hover-border-color: var(--ctl-danger); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--ctl-danger); --bs-btn-active-border-color: var(--ctl-danger); --bs-btn-disabled-color: var(--ctl-fg-faint); --bs-btn-disabled-border-color: var(--ctl-border-strong); --bs-btn-focus-shadow-rgb: var(--ctl-danger-rgb); } .btn-danger { --bs-btn-bg: var(--ctl-danger); --bs-btn-border-color: var(--ctl-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--ctl-danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ctl-danger) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ctl-danger) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ctl-danger) 75%, #000); --bs-btn-disabled-bg: var(--ctl-danger); --bs-btn-disabled-border-color: var(--ctl-danger); --bs-btn-focus-shadow-rgb: var(--ctl-danger-rgb); } .btn-warning { --bs-btn-color: #000000; --bs-btn-bg: var(--ctl-warning); --bs-btn-border-color: var(--ctl-warning); --bs-btn-hover-color: #000000; --bs-btn-hover-bg: color-mix(in srgb, var(--ctl-warning) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ctl-warning) 85%, #000); --bs-btn-active-color: #000000; --bs-btn-active-bg: color-mix(in srgb, var(--ctl-warning) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ctl-warning) 75%, #000); --bs-btn-disabled-color: #000000; --bs-btn-disabled-bg: var(--ctl-warning); --bs-btn-disabled-border-color: var(--ctl-warning); --bs-btn-focus-shadow-rgb: var(--ctl-warning-rgb); } /* ═══ Typography base (§2) ═══ */ /* Display utilities — Oswald caps. Page headers adopt these in Phase B; h1-h6 are deliberately NOT restyled globally here. */ .ctl-display-lg, .ctl-display-md, .ctl-display-sm { font-family: var(--ctl-font-display); font-weight: 700; line-height: var(--ctl-lh-tight); text-transform: uppercase; letter-spacing: -0.025em; } .ctl-display-lg { font-size: var(--ctl-fs-display-lg); } .ctl-display-md { font-size: var(--ctl-fs-display-md); } .ctl-display-sm { font-size: var(--ctl-fs-display-sm); } /* Caption scale — Lato 700 uppercase labels */ .ctl-caption { font-family: var(--ctl-font-body); font-size: var(--ctl-fs-caption); font-weight: 700; line-height: var(--ctl-lh-snug); text-transform: uppercase; letter-spacing: 0.08em; } /* Content width clamps (UI_STANDARDS §8.1). Data surfaces (lists, dashboards, canvases) run full width; settings/form/reading pages clamp so large monitors don't stretch them into unreadable sprawl. */ .ctl-page-clamp { max-width: var(--ctl-content-max, 68rem); margin-inline: auto; } .ctl-page-clamp-narrow { max-width: var(--ctl-content-max-narrow, 46rem); margin-inline: auto; } /* ═══ Focus visibility (§4.4 / §9) — always visible on :focus-visible ═══ */ :focus-visible { outline: 3px solid rgba(var(--ctl-accent-rgb), 0.35); outline-offset: 1px; } /* Controls that already render the ring as a box-shadow (accent border + --ctl-focus-ring) suppress the outline — replacement present, not removed. */ .form-control:focus-visible, .form-select:focus-visible, .ai-chat-input:focus-visible { outline: none; } /* ═══ Reduced motion (§4.4) — non-essential motion collapses to 0 ═══ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Lock viewport — all scrolling handled by inner flex containers */ html, body { height: 100%; overflow: hidden; margin: 0; } body { background-color: var(--ctl-bg); color: var(--ctl-fg); font-family: var(--ctl-font-body); font-size: var(--ctl-fs-body); } /* Email preview frame — always-light iframe inside dark cards */ .email-preview-frame { background: #ffffff; border: 1px solid var(--ctl-border); border-radius: 6px; overflow: hidden; max-height: 500px; overflow-y: auto; } /* shortcut: scheme-keyed override — the frame content is pinned light (email renders on white), so the dark schemes need a stronger seam than tokens can express; revisit if the preview ever themes. */ html[data-bs-theme="dark"] .email-preview-frame { border-color: var(--ctl-border-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } /* Impersonation banner — solid danger fill, white text (≥5.9:1 in every sheet) */ .impersonation-banner { background: var(--ctl-danger); color: #fff; text-align: center; padding: 0.3rem 1rem; font-size: 0.8rem; position: sticky; top: 0; z-index: 9999; /* z literal kept: security banner must top everything, incl. Bootstrap modals and the --ctl-z scale */ } .impersonation-banner a { color: #fff; text-decoration: underline; } /* Login page */ .login-container { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ctl-bg) 0%, var(--ctl-bg-alt) 100%); } .login-card { width: 100%; max-width: 400px; border: none; border-radius: 1rem; box-shadow: 0 0.5rem 1rem var(--ctl-shadow-hover); } .login-card .card-header { background: transparent; border-bottom: none; padding-top: 2rem; text-align: center; } .login-logo { height: 44px; width: auto; } .login-core-label { margin-top: 0.4rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5em; text-indent: 0.5em; /* re-center: compensates the trailing letter-space */ color: var(--ctl-fg-muted); } .login-card .card-body { padding: 2rem; } .login-divider { display: flex; align-items: center; margin: 1.25rem 0; color: var(--ctl-fg-muted); font-size: 0.85rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--ctl-border); } .login-divider span { padding: 0 0.75rem; } /* Sidebar layout */ .wrapper { display: flex; width: 100%; height: 100%; } .sidebar { width: var(--ctl-sidebar-width); height: 100vh; background: #212529; position: fixed; left: 0; top: 0; z-index: var(--ctl-z-sidebar); transition: width 0.2s ease; display: flex; flex-direction: column; overflow: visible; } /* Sidebar header with toggle + brand */ .sidebar-header { display: flex; align-items: center; padding: 0.75rem; background: #1a1e21; gap: 0.5rem; min-height: 3.25rem; } .sidebar-toggle-btn { background: none; border: none; color: rgba(255, 255, 255, 0.8); font-size: 1.25rem; padding: 0.25rem 0.4rem; cursor: pointer; border-radius: 0.25rem; flex-shrink: 0; line-height: 1; } .sidebar-toggle-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; overflow: hidden; transition: opacity 0.2s; /* Now a real (home button) — strip link chrome so the lockup looks identical to the old . */ text-decoration: none; color: inherit; cursor: pointer; } .sidebar-brand .brand-logo { height: 24px; width: auto; display: block; } /* Mark-only variant shown when the sidebar is collapsed */ .sidebar-brand .brand-mark { display: none; } .sidebar-brand .brand-core { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.45em; color: rgba(255, 255, 255, 0.55); margin-top: 0.3rem; line-height: 1; } /* Sidebar search */ .sidebar-search { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-search-input { display: flex; align-items: center; background: rgba(255, 255, 255, 0.08); border-radius: 0.3rem; padding: 0.3rem 0.5rem; gap: 0.4rem; } .sidebar-search-input i { color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; flex-shrink: 0; } .sidebar-search-input input { background: none; border: none; /* no outline:none — the global :focus-visible ring is the focus indicator */ color: #fff; font-size: 0.8rem; width: 100%; } .sidebar-search-input input::placeholder { color: rgba(255, 255, 255, 0.35); } .sidebar-search-results { margin-top: 0.35rem; max-height: 250px; overflow-y: auto; } .sidebar-search-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.8rem; border-radius: 0.2rem; } .sidebar-search-result:hover, .sidebar-search-result.active { color: #fff; background: rgba(255, 255, 255, 0.1); } .sidebar-search-result i { font-size: 0.85rem; width: 1.1rem; text-align: center; flex-shrink: 0; opacity: 0.6; } .sidebar-search-path { display: block; font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); margin-top: 0.1rem; } .sidebar-search-empty { padding: 0.5rem; color: rgba(255, 255, 255, 0.35); font-size: 0.75rem; font-style: italic; } /* Hide search when sidebar collapsed */ .sidebar.collapsed .sidebar-search { display: none; } /* Sidebar menu area — the nav region that hosts the stacked rail layers. overflow:hidden so the admin layer is clipped while parked below and each rail owns its own vertical scroll. */ .sidebar-menu { flex: 1; min-height: 0; position: relative; overflow: hidden; } /* Sidebar navigation rail — both rails are absolute layers filling the nav region. The main rail sits at rest; the admin rail slides UP from the bottom to cover it (main stays put underneath — 'on top of', never 'replacing'). */ .sidebar-nav { padding: 0.5rem 0; margin: 0; position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; } /* Admin rail: parked one full height below at rest, riding above the main rail when raised. Reads as a SHEET sliding over the main nav (stakeholder direction 2026-07-21: 'on top of, not replacing'): a step-lighter solid background, accent top edge, and upward shadow separate the two layers during and after the slide. */ .sidebar-nav[data-nav="admin"] { transform: translateY(100%); z-index: 2; background: #2a2f34; border-top: 2px solid var(--ctl-accent); box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45); } .sidebar[data-nav-mode="admin"] .sidebar-nav[data-nav="admin"] { transform: translateY(0); } /* The covered main rail dims while the admin sheet is up — sells the layering and keeps the underlying nav from visually competing with the sheet. */ .sidebar-nav[data-nav="main"] { transition: filter var(--ctl-dur) ease; } .sidebar[data-nav-mode="admin"] .sidebar-nav[data-nav="main"] { filter: brightness(0.55); } /* Slide only on user toggles. .nav-anim is added by JS after first paint, so a direct admin-URL load renders with the layer already up and no animation. prefers-reduced-motion (global rule) zeroes the duration → jump-cut. */ .sidebar.nav-anim .sidebar-nav { transition: transform var(--ctl-dur) ease; } /* nav-group toggles are real