/* ============================================================================ OPT DIGITAL EDITORIAL OVERLAY — v2 (hardened) ---------------------------------------------------------------------------- Activates when . Legacy mode is untouched — every rule in this file is scoped under the attribute selector. v2 changes (2026-04-22): - !important on every token-affecting declaration (legacy dark-theme rules all use !important; this brings equal weaponry). - Full coverage for .dash-v2 / .dv2-* (company dashboard scoped namespace). - Full coverage for .results-page + its --rp-* token system (client detail). - Full coverage for .nx-modal-overlay (geo-change custom modal). - Full coverage for .modal-header-dark (12+ modals use this class). - "Bethany Elingston" replaced with Newsreader everywhere. - Global border-radius sledgehammer with explicit pill carve-outs. Canon: C:\Users\Ben\.claude\OPT-DESIGN-SYSTEM.md Reference implementations (do NOT touch): - app/templates/reports/results_report_pdf.html (A4 PDF) - app/templates/reports/public_standalone.html (web viewer) ========================================================================= */ /* ───────────────────────────────────────────────────────────────────────── 0. FONT IMPORTS ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&display=swap'); /* ───────────────────────────────────────────────────────────────────────── 1. TOKEN REDEFINITION — editorial mode only Overrides the palette + Bootstrap vars + legacy dashboard vars (--bg-0, --text-700, --radius-*, --font-sans) so ALL downstream var() consumers auto-update. ───────────────────────────────────────────────────────────────────────── */ html[data-design-mode="editorial"] { --paper: #fbfaf6; --paper-2: #f4f1e8; --paper-3: #ece8da; --ink: #0a0a0a; --ink-2: #2a2a2a; --ink-3: #5d5d5a; --ink-4: #8a8882; --rule: #d9d4c4; --rule-2: #ece8da; --accent: #f4e14a; --accent-dk: #e4cc00; --accent-ink: #0a0a0a; --accent-soft: #fef9cc; --up: #1f7a3a; --up-soft: #e3f2e6; --down: #b42318; --down-soft: #fbe7e3; --flat: #6b7280; --serif: "Newsreader", ui-serif, "Iowan Old Style", Georgia, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── Canonical tokens (post-2026-04-26 migration) ────────────────────── Templates now reference --surface-*, --ink-*, --border-*, --accent-* directly after the bulk migration in scripts/migrate_inline_colors_to_tokens.py. Redefine each here so editorial mode swaps every surface, text shade, and border to the paper / ink palette without any per-template overrides. ─────────────────────────────────────────────────────────────────── */ --surface-0: #fbfaf6; --surface-1: #f4f1e8; --surface-2: #ece8da; --surface-3: #d9d4c4; --surface-scrim: rgba(10, 10, 10, 0.55); --ink-strong: #0a0a0a; --ink-body: #2a2a2a; --ink-muted: #5d5d5a; --ink-faint: #6b6660; --ink-disabled: #b8b6ad; --border-subtle: #ece8da; --border-standard: #d9d4c4; --border-strong: #b8b3a0; --accent-hover: #e4cc00; --accent-ghost: rgba(244, 225, 74, 0.12); --accent-tint: rgba(244, 225, 74, 0.18); --accent-focus: rgba(244, 225, 74, 0.32); --accent-border: rgba(244, 225, 74, 0.55); --status-success: #1f7a3a; --status-success-bg: #e3f2e6; --status-success-border: #b8d8c0; --status-warning: #b67200; --status-warning-bg: #fdf3d8; --status-warning-border: #e8d49a; --status-danger: #b42318; --status-danger-bg: #fbe7e3; --status-danger-border: #e8c4be; --status-info: #0b5fa3; --status-info-bg: #e1eef9; --status-info-border: #b8d2e8; --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.08); --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.10); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.12); --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.18); --shadow-modal: 0 30px 80px rgba(10, 10, 10, 0.25); --shadow-dropdown: 0 16px 48px rgba(10, 10, 10, 0.18); --shadow-gold-glow: 0 8px 24px rgba(244, 225, 74, 0.30); --r-xs: 2px; --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px; --r-2xl: 4px; --r-pill: 9999px; --font-display: "Newsreader", ui-serif, "Iowan Old Style", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Legacy dashboard tokens — redefined so cards / tables / nav consuming var(--bg-0) etc. auto-recolour. */ --bg-0: #fbfaf6; --bg-50: #fbfaf6; --bg-100: #f4f1e8; --bg-200: #ece8da; --text-900: #0a0a0a; --text-800: #0a0a0a; --text-700: #2a2a2a; --text-600: #5d5d5a; --text-500: #5d5d5a; --text-400: #8a8882; --text-300: #8a8882; --border-100: #ece8da; --border-200: #d9d4c4; --border-300: #d9d4c4; --primary: #f4e14a; --primary-hover: #e4cc00; /* Legacy radius tokens — legacy uses 12–20px; editorial uses 2px flat. */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; --radius-pill: 999px; /* Legacy font-family tokens — point --font-sans at Inter, redirect --font-serif to Newsreader (legacy uses Bethany Elingston). */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: "Newsreader", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* Custom-property aliases used by scoped partials (geo_change_modal, content_map) — only fallback-referenced there, so redefining them globally only affects those surfaces. */ --cm-bg: #fbfaf6; --text-100: #0a0a0a; /* Bootstrap 5 vars — !important-level via value. These land in the cascade on :root equivalence; specificity ties go to the later source, which is us (editorial-overlay.css loads after style.css). */ --bs-body-bg: #fbfaf6 !important; --bs-body-color: #0a0a0a !important; --bs-primary: #f4e14a !important; --bs-primary-rgb: 244, 225, 74 !important; --bs-secondary: #5d5d5a !important; --bs-border-color: #d9d4c4 !important; --bs-tertiary-bg: #f4f1e8 !important; --bs-secondary-bg: #f4f1e8 !important; --bs-link-color: #0a0a0a !important; --bs-link-hover-color: #0a0a0a !important; } /* Legacy re-sets tokens inside [data-theme="dark"]. Counter-scope so our editorial tokens survive. When BOTH attrs match, editorial wins by higher specificity (two attribute selectors vs one). */ html[data-design-mode="editorial"][data-theme="dark"], html[data-design-mode="editorial"] [data-theme="dark"] { --radius-sm: 2px !important; --radius-md: 2px !important; --radius-lg: 2px !important; --radius-xl: 2px !important; --bg-0: #fbfaf6 !important; --bg-50: #fbfaf6 !important; --bg-100: #f4f1e8 !important; --bg-200: #ece8da !important; --text-900: #0a0a0a !important; --text-800: #0a0a0a !important; --text-700: #2a2a2a !important; --text-600: #5d5d5a !important; --text-500: #5d5d5a !important; --text-400: #6b6660 !important; --border-100: #ece8da !important; --border-200: #d9d4c4 !important; --border-300: #d9d4c4 !important; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; --font-serif: "Newsreader", ui-serif, Georgia, serif !important; } /* ───────────────────────────────────────────────────────────────────────── 2. BODY + BASE TYPOGRAPHY ───────────────────────────────────────────────────────────────────────── */ [data-design-mode="editorial"], [data-design-mode="editorial"] body { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-design-mode="editorial"] h1, [data-design-mode="editorial"] h2, [data-design-mode="editorial"] h3, [data-design-mode="editorial"] h4, [data-design-mode="editorial"] h5, [data-design-mode="editorial"] h6, [data-design-mode="editorial"] .h1, [data-design-mode="editorial"] .h2, [data-design-mode="editorial"] .h3, [data-design-mode="editorial"] .h4, [data-design-mode="editorial"] .h5, [data-design-mode="editorial"] .h6 { font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; } [data-design-mode="editorial"] h1, [data-design-mode="editorial"] .h1 { font-size: 2.2rem; line-height: 1.05; letter-spacing: -0.025em; } [data-design-mode="editorial"] h2, [data-design-mode="editorial"] .h2 { font-size: 1.6rem; line-height: 1.1; } [data-design-mode="editorial"] h3, [data-design-mode="editorial"] .h3 { font-size: 1.2rem; line-height: 1.2; } [data-design-mode="editorial"] h4 { font-size: 1rem; } [data-design-mode="editorial"] h1 em, [data-design-mode="editorial"] h2 em, [data-design-mode="editorial"] h3 em { font-style: italic; font-weight: inherit; } [data-design-mode="editorial"] mark { background: var(--accent) !important; color: var(--accent-ink) !important; padding: 0 0.08em 0.05em; border-radius: 2px; } [data-design-mode="editorial"] code, [data-design-mode="editorial"] pre, [data-design-mode="editorial"] .mono, [data-design-mode="editorial"] kbd { font-family: var(--mono) !important; } /* Numeric display — serif + tabular-nums. Covers every number class used across the dashboard. */ [data-design-mode="editorial"] .num, [data-design-mode="editorial"] .stat-value, [data-design-mode="editorial"] .kpi-value, [data-design-mode="editorial"] .hero-value, [data-design-mode="editorial"] .metric-value, [data-design-mode="editorial"] .dv2-kpi__value, [data-design-mode="editorial"] .dv2-sec__value, [data-design-mode="editorial"] .dv2-big, [data-design-mode="editorial"] .kpi-tile .kpi-tile-value, [data-design-mode="editorial"] .big-number, [data-design-mode="editorial"] .display-num { font-family: var(--serif) !important; font-variant-numeric: tabular-nums !important; font-weight: 500 !important; letter-spacing: -0.015em !important; color: var(--ink) !important; } /* Small-caps labels — the eyebrow family across every dashboard variant. */ [data-design-mode="editorial"] .kpi-label, [data-design-mode="editorial"] .hero-label, [data-design-mode="editorial"] .stat-label, [data-design-mode="editorial"] .metric-label, [data-design-mode="editorial"] .dv2-kpi__label, [data-design-mode="editorial"] .dv2-kpi__sub, [data-design-mode="editorial"] .dv2-sec__label, [data-design-mode="editorial"] .dv2-header-sub { font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ink-3) !important; font-weight: 500 !important; } /* Links */ [data-design-mode="editorial"] :where(a) { color: var(--ink); text-decoration: none; } [data-design-mode="editorial"] :where(a):hover { color: var(--ink-2); } [data-design-mode="editorial"] a.text-primary, [data-design-mode="editorial"] .text-primary { color: var(--ink) !important; } /* ───────────────────────────────────────────────────────────────────────── 3. THE BETHANY BAN Legacy hardcodes 'Bethany Elingston' (old display serif) in 6+ places with !important. Stamp it out so Newsreader wins. ───────────────────────────────────────────────────────────────────────── */ [data-design-mode="editorial"] .modal-header h5, [data-design-mode="editorial"] .modal-header-dark .modal-title, [data-design-mode="editorial"] .modal-body h6, [data-design-mode="editorial"] .nx-modal-title, [data-design-mode="editorial"] .page-header-dark .page-title, [data-design-mode="editorial"] .dash-v2 .dv2-header-title, [data-design-mode="editorial"] .dash-v2 .dv2-kpi__value, [data-design-mode="editorial"] .dash-v2 .dv2-sec__value { font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; } /* ───────────────────────────────────────────────────────────────────────── 4. BORDER-RADIUS SLEDGEHAMMER Legacy radius is 10–20px everywhere (var(--radius-lg)=16–20px). Force 2px on every container-ish class. Carve out pills, circles, and progress bars explicitly at the bottom. ───────────────────────────────────────────────────────────────────────── */ [data-design-mode="editorial"] .card, [data-design-mode="editorial"] .card-header, [data-design-mode="editorial"] .card-body, [data-design-mode="editorial"] .card-footer, [data-design-mode="editorial"] .modal-content, [data-design-mode="editorial"] .modal-header, [data-design-mode="editorial"] .modal-body, [data-design-mode="editorial"] .modal-footer, [data-design-mode="editorial"] .btn, [data-design-mode="editorial"] .form-control, [data-design-mode="editorial"] .form-select, [data-design-mode="editorial"] .input-group-text, [data-design-mode="editorial"] .dropdown-menu, [data-design-mode="editorial"] .alert, [data-design-mode="editorial"] .list-group, [data-design-mode="editorial"] .list-group-item, [data-design-mode="editorial"] .page-link, [data-design-mode="editorial"] .tooltip-inner, [data-design-mode="editorial"] .popover, [data-design-mode="editorial"] .toast, [data-design-mode="editorial"] .chart-container, [data-design-mode="editorial"] .chart-wrapper, [data-design-mode="editorial"] [class*="kpi"], [data-design-mode="editorial"] [class*="hero"], [data-design-mode="editorial"] [class*="tile"], [data-design-mode="editorial"] [class*="-card"], [data-design-mode="editorial"] [class*="-panel"], [data-design-mode="editorial"] [class*="-section"], [data-design-mode="editorial"] [class*="-box"], [data-design-mode="editorial"] [class*="-container"]:not([class*="chart"]), [data-design-mode="editorial"] .dv2-kpi, [data-design-mode="editorial"] .dv2-kpi--primary, [data-design-mode="editorial"] .dv2-panel, [data-design-mode="editorial"] .dv2-sec, [data-design-mode="editorial"] .dv2-kpi__arrow, [data-design-mode="editorial"] .results-page *:not(.badge):not(.pill):not(.status-dot):not(.avatar), [data-design-mode="editorial"] .nx-modal, [data-design-mode="editorial"] .nx-modal-body { border-radius: 2px !important; } /* Carve-outs: pills, circles, badges stay rounded. */ [data-design-mode="editorial"] .badge, [data-design-mode="editorial"] .pill, [data-design-mode="editorial"] .tag-pill, [data-design-mode="editorial"] .status-pill, [data-design-mode="editorial"] .status-dot, [data-design-mode="editorial"] .avatar, [data-design-mode="editorial"] .progress, [data-design-mode="editorial"] .progress-bar, [data-design-mode="editorial"] .rounded-circle, [data-design-mode="editorial"] .rounded-pill, [data-design-mode="editorial"] .bot-agent-chip, [data-design-mode="editorial"] .notification-badge, [data-design-mode="editorial"] .agent-dot { border-radius: 999px !important; } /* ───────────────────────────────────────────────────────────────────────── 5. BOOTSTRAP COMPONENT OVERRIDES Every legacy rule uses !important; we match and beat them. ───────────────────────────────────────────────────────────────────────── */ /* --- Buttons ----------------------------------------------------------- */ [data-design-mode="editorial"] .btn { font-family: var(--mono) !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; padding: 0.5rem 0.95rem !important; border: 1px solid var(--rule) !important; background: var(--paper) !important; color: var(--ink) !important; transition: all 0.12s !important; box-shadow: none !important; } [data-design-mode="editorial"] .btn:hover { border-color: var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .btn-primary, [data-design-mode="editorial"] .btn-opt-primary { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } [data-design-mode="editorial"] .btn-primary:hover, [data-design-mode="editorial"] .btn-opt-primary:hover, [data-design-mode="editorial"] .btn-primary:focus, [data-design-mode="editorial"] .btn-opt-primary:focus, [data-design-mode="editorial"] .btn-primary:active { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; } [data-design-mode="editorial"] .btn-secondary, [data-design-mode="editorial"] .btn-outline-secondary { background: var(--paper) !important; color: var(--ink-2) !important; border-color: var(--rule) !important; } [data-design-mode="editorial"] .btn-secondary:hover, [data-design-mode="editorial"] .btn-outline-secondary:hover { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--ink) !important; } [data-design-mode="editorial"] .btn-outline-primary { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; } [data-design-mode="editorial"] .btn-outline-primary:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; } [data-design-mode="editorial"] .btn-warning { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; } [data-design-mode="editorial"] .btn-success { background: var(--up) !important; color: #fff !important; border-color: var(--up) !important; } [data-design-mode="editorial"] .btn-danger { background: var(--down) !important; color: #fff !important; border-color: var(--down) !important; } [data-design-mode="editorial"] .btn-dark { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } [data-design-mode="editorial"] .btn-light { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--rule) !important; } [data-design-mode="editorial"] .btn-info { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--rule) !important; } [data-design-mode="editorial"] .btn-sm { font-size: 0.68rem !important; padding: 0.35rem 0.7rem !important; } [data-design-mode="editorial"] .btn-lg { font-size: 0.85rem !important; padding: 0.7rem 1.2rem !important; } [data-design-mode="editorial"] .notification-bell-btn { background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--ink-2) !important; padding: 7px 9px; transition: all 0.12s; } [data-design-mode="editorial"] .notification-bell-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; } /* --- Cards ------------------------------------------------------------- */ [data-design-mode="editorial"] .card { background: var(--paper) !important; border: 1px solid var(--rule) !important; box-shadow: 0 1px 2px rgba(10,10,10,.03), 0 6px 18px rgba(10,10,10,.04) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .card-header { background: var(--paper) !important; border-bottom: 1px solid var(--rule) !important; color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 0.75rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 0.85rem 1.1rem !important; } [data-design-mode="editorial"] .card-body { background: var(--paper) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .card-title { font-family: var(--serif) !important; font-weight: 500 !important; color: var(--ink) !important; } [data-design-mode="editorial"] .card-footer { background: var(--paper-2) !important; border-top: 1px solid var(--rule) !important; color: var(--ink-3) !important; } [data-design-mode="editorial"] .card-glow-hero { box-shadow: 0 1px 2px rgba(10,10,10,.03), 0 6px 18px rgba(10,10,10,.04) !important; } /* --- Modals (including .modal-header-dark) ---------------------------- */ [data-design-mode="editorial"] .modal-content { background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--ink) !important; /* Bootstrap default is 0.5rem (~8px). Editorial wants sharp 2px so all 28+ Bootstrap modals (admin/account_managers, AM detail, integrations/client_setup etc.) match the wizard + reports chrome. */ border-radius: 2px !important; } [data-design-mode="editorial"] .modal-content .btn, [data-design-mode="editorial"] .modal-content .form-control, [data-design-mode="editorial"] .modal-content .form-select, [data-design-mode="editorial"] .modal-content .input-group-text { border-radius: 2px !important; } [data-design-mode="editorial"] .modal-header { background: var(--paper) !important; border-bottom: 1px solid var(--rule) !important; color: var(--ink) !important; padding: 1.1rem 1.4rem !important; } [data-design-mode="editorial"] .modal-header-dark { background: var(--paper) !important; border-bottom: 1px solid var(--rule) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .modal-header-dark .modal-title { font-family: var(--serif) !important; font-weight: 500 !important; color: var(--ink) !important; letter-spacing: -0.015em !important; } [data-design-mode="editorial"] .modal-header-dark i, [data-design-mode="editorial"] .modal-header-dark .modal-icon { color: var(--ink) !important; } [data-design-mode="editorial"] .modal-title { font-family: var(--serif) !important; font-weight: 500 !important; color: var(--ink) !important; letter-spacing: -0.015em !important; } [data-design-mode="editorial"] .modal-body { background: var(--paper) !important; color: var(--ink) !important; padding: 1.2rem 1.4rem !important; } [data-design-mode="editorial"] .modal-footer { background: var(--paper) !important; border-top: 1px solid var(--rule) !important; padding: 0.9rem 1.4rem !important; } [data-design-mode="editorial"] .modal-backdrop.show { opacity: 0.55; background: #0a0a0a !important; } [data-design-mode="editorial"] .btn-close { filter: none !important; opacity: 0.6 !important; } [data-design-mode="editorial"] .btn-close:hover { opacity: 1 !important; } /* --- Forms ------------------------------------------------------------- */ [data-design-mode="editorial"] .form-control, [data-design-mode="editorial"] .form-select, [data-design-mode="editorial"] input[type="text"], [data-design-mode="editorial"] input[type="email"], [data-design-mode="editorial"] input[type="password"], [data-design-mode="editorial"] input[type="search"], [data-design-mode="editorial"] input[type="number"], [data-design-mode="editorial"] input[type="date"], [data-design-mode="editorial"] input[type="url"], [data-design-mode="editorial"] textarea, [data-design-mode="editorial"] select { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; font-family: var(--sans) !important; font-size: 0.9rem !important; padding: 0.55rem 0.8rem !important; transition: border-color 0.12s; } [data-design-mode="editorial"] .form-control:focus, [data-design-mode="editorial"] .form-select:focus, [data-design-mode="editorial"] textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 2px rgba(244, 225, 74, 0.35) !important; outline: none !important; } [data-design-mode="editorial"] .form-select option { background: var(--paper) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .form-label { font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink-3) !important; font-weight: 500 !important; margin-bottom: 0.35rem; } [data-design-mode="editorial"] .form-text { color: var(--ink-3) !important; font-size: 0.8rem; } [data-design-mode="editorial"] .input-group-text { background: var(--paper-2) !important; border-color: var(--rule) !important; color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 0.78rem !important; } [data-design-mode="editorial"] .form-check-input:checked { background-color: var(--ink) !important; border-color: var(--ink) !important; } /* Reverse the legacy calendar-indicator inversion that matches dark mode — on paper bg we want the native glyph colour. */ [data-design-mode="editorial"] input[type="date"]::-webkit-calendar-picker-indicator, [data-design-mode="editorial"] input[type="time"]::-webkit-calendar-picker-indicator, [data-design-mode="editorial"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none !important; opacity: 0.55; } /* --- Tables ------------------------------------------------------------ */ [data-design-mode="editorial"] .table { color: var(--ink) !important; background: var(--paper) !important; border-color: var(--rule) !important; --bs-table-bg: transparent !important; --bs-table-color: var(--ink) !important; --bs-table-striped-bg: var(--paper-2) !important; --bs-table-striped-color: var(--ink) !important; --bs-table-hover-bg: var(--paper-2) !important; --bs-table-hover-color: var(--ink) !important; --bs-table-border-color: var(--rule) !important; } [data-design-mode="editorial"] .table thead th, [data-design-mode="editorial"] .table > thead th { background: var(--paper) !important; color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 500 !important; border-bottom: 1.5px solid var(--ink) !important; padding: 0.75rem 0.9rem !important; } [data-design-mode="editorial"] .table tbody td { padding: 0.7rem 0.9rem !important; border-bottom: 1px solid var(--rule) !important; color: var(--ink-2) !important; font-variant-numeric: tabular-nums; background: transparent !important; } [data-design-mode="editorial"] .table tbody tr:last-child td { border-bottom: 0 !important; } [data-design-mode="editorial"] .table-hover tbody tr:hover { background: var(--paper-2) !important; } [data-design-mode="editorial"] .table-responsive { scrollbar-width: thin; scrollbar-color: var(--rule) var(--paper); } /* --- Nav tabs / pills -------------------------------------------------- */ [data-design-mode="editorial"] .nav-tabs { border-bottom: 1px solid var(--rule) !important; background: transparent !important; } [data-design-mode="editorial"] .nav-tabs .nav-link { background: transparent !important; color: var(--ink-3) !important; border: 0 !important; border-bottom: 2px solid transparent !important; font-family: var(--mono) !important; font-size: 0.78rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; font-weight: 500 !important; padding: 0.7rem 1rem !important; } [data-design-mode="editorial"] .nav-tabs .nav-link:hover { color: var(--ink) !important; border-bottom-color: var(--rule) !important; } [data-design-mode="editorial"] .nav-tabs .nav-link.active { color: var(--ink) !important; background: transparent !important; border-bottom-color: var(--accent) !important; } [data-design-mode="editorial"] .nav-pills .nav-link { color: var(--ink-2) !important; background: transparent !important; } [data-design-mode="editorial"] .nav-pills .nav-link.active { background: var(--ink) !important; color: var(--paper) !important; } /* --- Badges ------------------------------------------------------------ */ [data-design-mode="editorial"] .badge { font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 0.68rem !important; padding: 0.28em 0.6em !important; } [data-design-mode="editorial"] .badge.bg-primary, [data-design-mode="editorial"] .badge.text-bg-primary { background: var(--accent) !important; color: var(--accent-ink) !important; } [data-design-mode="editorial"] .badge.bg-secondary, [data-design-mode="editorial"] .badge.text-bg-secondary { background: var(--paper-2) !important; color: var(--ink-3) !important; border: 1px solid var(--rule) !important; } [data-design-mode="editorial"] .badge.bg-success, [data-design-mode="editorial"] .badge.text-bg-success { background: var(--up-soft) !important; color: var(--up) !important; } [data-design-mode="editorial"] .badge.bg-danger, [data-design-mode="editorial"] .badge.text-bg-danger { background: var(--down-soft) !important; color: var(--down) !important; } [data-design-mode="editorial"] .badge.bg-warning, [data-design-mode="editorial"] .badge.text-bg-warning { background: var(--accent) !important; color: var(--accent-ink) !important; } [data-design-mode="editorial"] .badge.bg-info, [data-design-mode="editorial"] .badge.text-bg-info { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; } [data-design-mode="editorial"] .badge.bg-light, [data-design-mode="editorial"] .badge.text-bg-light { background: var(--paper-2) !important; color: var(--ink-3) !important; } [data-design-mode="editorial"] .badge.bg-dark, [data-design-mode="editorial"] .badge.text-bg-dark { background: var(--ink) !important; color: var(--paper) !important; } /* --- Alerts ------------------------------------------------------------ */ [data-design-mode="editorial"] .alert { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-left-width: 3px !important; border-left-color: var(--ink) !important; color: var(--ink) !important; padding: 0.9rem 1.1rem !important; } [data-design-mode="editorial"] .alert-primary, [data-design-mode="editorial"] .alert-info { border-left-color: var(--ink) !important; background: var(--paper-2) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .alert-success { border-left-color: var(--up) !important; background: var(--up-soft) !important; color: var(--up) !important; } [data-design-mode="editorial"] .alert-danger { border-left-color: var(--down) !important; background: var(--down-soft) !important; color: var(--down) !important; } [data-design-mode="editorial"] .alert-warning { border-left-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--ink) !important; } /* --- Dropdowns --------------------------------------------------------- */ [data-design-mode="editorial"] .dropdown-menu { background: var(--paper) !important; border: 1px solid var(--rule) !important; box-shadow: 0 8px 24px rgba(10,10,10,0.08) !important; color: var(--ink) !important; padding: 0.3rem 0 !important; } [data-design-mode="editorial"] .dropdown-item { color: var(--ink-2) !important; padding: 0.5rem 0.95rem !important; font-size: 0.88rem; background: transparent !important; } [data-design-mode="editorial"] .dropdown-item:hover { background: var(--paper-2) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .dropdown-item.active, [data-design-mode="editorial"] .dropdown-item:active { background: var(--accent) !important; color: var(--accent-ink) !important; } [data-design-mode="editorial"] .dropdown-divider { border-top-color: var(--rule) !important; } [data-design-mode="editorial"] .dropdown-header { color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* --- List groups ------------------------------------------------------- */ [data-design-mode="editorial"] .list-group { background: var(--paper) !important; } [data-design-mode="editorial"] .list-group-item { background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink) !important; padding: 0.85rem 1.1rem !important; } [data-design-mode="editorial"] .list-group-item.active { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } /* --- Pagination -------------------------------------------------------- */ [data-design-mode="editorial"] .page-link { background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink-2) !important; font-family: var(--mono) !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; } [data-design-mode="editorial"] .page-link:hover { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--ink) !important; } [data-design-mode="editorial"] .page-item.active .page-link { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; } [data-design-mode="editorial"] .page-item.disabled .page-link { background: var(--paper-2) !important; color: var(--ink-4) !important; border-color: var(--rule) !important; } /* --- Breadcrumb -------------------------------------------------------- */ [data-design-mode="editorial"] .breadcrumb { background: transparent !important; padding: 0 !important; font-family: var(--mono) !important; font-size: 0.76rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } [data-design-mode="editorial"] .breadcrumb-item, [data-design-mode="editorial"] .breadcrumb-item a { color: var(--ink-3) !important; } [data-design-mode="editorial"] .breadcrumb-item.active { color: var(--ink) !important; } [data-design-mode="editorial"] .breadcrumb-item + .breadcrumb-item::before { content: "·" !important; color: var(--ink-4) !important; padding: 0 0.5rem; } /* --- Progress --------------------------------------------------------- */ [data-design-mode="editorial"] .progress { background: var(--rule-2) !important; height: 6px !important; } [data-design-mode="editorial"] .progress-bar { background: var(--ink) !important; } [data-design-mode="editorial"] .progress-bar.bg-warning, [data-design-mode="editorial"] .progress-bar.bg-primary { background: var(--accent) !important; } [data-design-mode="editorial"] .progress-bar.bg-success { background: var(--up) !important; } [data-design-mode="editorial"] .progress-bar.bg-danger { background: var(--down) !important; } /* --- Utility Bootstrap backgrounds ------------------------------------- */ [data-design-mode="editorial"] .bg-primary { background-color: var(--accent) !important; color: var(--accent-ink) !important; } [data-design-mode="editorial"] .bg-dark { background-color: var(--ink) !important; color: var(--paper) !important; } [data-design-mode="editorial"] .bg-light { background-color: var(--paper-2) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .bg-white { background-color: var(--paper) !important; } [data-design-mode="editorial"] .bg-body { background-color: var(--paper) !important; } [data-design-mode="editorial"] .text-muted { color: var(--ink-3) !important; } [data-design-mode="editorial"] .text-secondary { color: var(--ink-3) !important; } [data-design-mode="editorial"] .text-success { color: var(--up) !important; } [data-design-mode="editorial"] .text-danger { color: var(--down) !important; } [data-design-mode="editorial"] .text-warning { color: var(--accent-dk) !important; } [data-design-mode="editorial"] .text-light { color: var(--ink-3) !important; } [data-design-mode="editorial"] .text-dark { color: var(--ink) !important; } [data-design-mode="editorial"] .text-white { color: var(--ink) !important; } [data-design-mode="editorial"] .border, [data-design-mode="editorial"] .border-top, [data-design-mode="editorial"] .border-end, [data-design-mode="editorial"] .border-bottom, [data-design-mode="editorial"] .border-start { border-color: var(--rule) !important; } /* ───────────────────────────────────────────────────────────────────────── 6. DASHBOARD CHROME — sidebar + topbar ───────────────────────────────────────────────────────────────────────── */ [data-design-mode="editorial"] .app-content, [data-design-mode="editorial"] .app-main { background: var(--paper-2) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .sidebar { background: var(--paper) !important; border-right: 1px solid var(--rule) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .sidebar-link, [data-design-mode="editorial"] .sidebar a { color: var(--ink-2) !important; } [data-design-mode="editorial"] .sidebar-link:hover { background: var(--paper-2) !important; color: var(--ink) !important; } [data-design-mode="editorial"] .sidebar-link.active, [data-design-mode="editorial"] .sidebar-item.active .sidebar-link { background: var(--paper-2) !important; color: var(--ink) !important; position: relative; } [data-design-mode="editorial"] .sidebar-link.active::before, [data-design-mode="editorial"] .sidebar-item.active .sidebar-link::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--accent); } [data-design-mode="editorial"] .sidebar-section-title, [data-design-mode="editorial"] .sidebar-heading { font-family: var(--mono) !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ink-4) !important; } [data-design-mode="editorial"] .topbar { background: var(--paper) !important; border-bottom: 1px solid var(--rule) !important; color: var(--ink) !important; backdrop-filter: none !important; } [data-design-mode="editorial"] .topbar-breadcrumb, [data-design-mode="editorial"] .topbar-breadcrumb a { color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } [data-design-mode="editorial"] .topbar-breadcrumb a:hover { color: var(--ink) !important; } /* .topbar-search rules moved to app/static/css/topbar-search.css (single source of truth) */ /* ───────────────────────────────────────────────────────────────────────── 7. COMPANY DASHBOARD — .dash-v2 / .dv2-* NAMESPACE (company/dashboard.html has a scoped