/* ═══════════════════════════════════════════════════════ PracticeHub — Editorial Theme Monochrome editorial aesthetic. Swiss grid, brutalist restraint, IBM Plex Sans, matte-black navigation. body.theme-editorial → soft grey bg, white cards body.theme-editorial-dark → near-black bg, dark cards ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* Pre-load classes applied to before is ready — prevents green flash */ html.theme-editorial-pre, html.theme-editorial-pre body { background: #E9E9E9 !important; } html.theme-editorial-dark-pre, html.theme-editorial-dark-pre body { background: #050505 !important; } /* ── SHARED: typography, radii ── */ body.theme-editorial, body.theme-editorial-dark { --head: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; --body: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; /* Strict 0px — square corners everywhere */ --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 999px; font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; letter-spacing: -0.01em; } /* ── LIGHT PALETTE ── */ body.theme-editorial { --lt-bg: #E9E9E9; --lt-surface: rgba(255,255,255,0.95); --lt-border: rgba(5,5,5,0.10); --lt-ink: #050505; --lt-ink2: #5F5F5F; --lt-ink3: #9A9A9A; --dk-bg: #E9E9E9; --dk-surface: #FFFFFF; --dk-surface2: #F1F1F1; --dk-surface3: #EFEFEF; --dk-border: rgba(5,5,5,0.10); --dk-border2: rgba(5,5,5,0.18); --dk-ink: #050505; --dk-ink2: #5F5F5F; --dk-ink3: #9A9A9A; --lime: #050505; --lime-dim: #1A1A1A; --lime-glow: rgba(5,5,5,0.10); --lime-glow2: rgba(5,5,5,0.05); --text-primary: #050505; --text-secondary: #5F5F5F; --surface-2: #F1F1F1; --surface-3: #EFEFEF; --surface-hover: rgba(5,5,5,0.04); background: #E9E9E9; } /* ── DARK PALETTE ── */ body.theme-editorial-dark { --lt-bg: #050505; --lt-surface: rgba(17,17,17,0.95); --lt-border: rgba(240,240,240,0.10); --lt-ink: #F0F0F0; --lt-ink2: #9A9A9A; --lt-ink3: #5F5F5F; --dk-bg: #050505; --dk-surface: #111111; --dk-surface2: #181818; --dk-surface3: #222222; --dk-border: rgba(240,240,240,0.10); --dk-border2: rgba(240,240,240,0.18); --dk-ink: #F0F0F0; --dk-ink2: #9A9A9A; --dk-ink3: #5F5F5F; --lime: #F0F0F0; --lime-dim: #CFCFCF; --lime-glow: rgba(240,240,240,0.10); --lime-glow2: rgba(240,240,240,0.05); --text-primary: #F0F0F0; --text-secondary: #9A9A9A; --surface-2: #181818; --surface-3: #222222; --surface-hover: rgba(240,240,240,0.06); background: #050505; color: #F0F0F0; } /* ═══════════════════════════════════════════════════════ TOPBAR — matte black for both variants ═══════════════════════════════════════════════════════ */ body.theme-editorial .topbar, body.theme-editorial-dark .topbar { background: #050505; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: none; } body.theme-editorial .topbar-brand, body.theme-editorial-dark .topbar-brand { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; } body.theme-editorial .brand-dot, body.theme-editorial-dark .brand-dot { background: #FFFFFF; border-radius: 0; } body.theme-editorial .topbar-nav a, body.theme-editorial-dark .topbar-nav a { font-family: 'IBM Plex Sans', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); border-radius: 0; } body.theme-editorial .topbar-nav a:hover, body.theme-editorial-dark .topbar-nav a:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); } body.theme-editorial .topbar-nav a.active, body.theme-editorial-dark .topbar-nav a.active { background: transparent; color: #FFFFFF; border-radius: 0; box-shadow: inset 0 -2px 0 #FFFFFF; } body.theme-editorial .topbar-tag, body.theme-editorial-dark .topbar-tag { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; letter-spacing: 0.12em; border-radius: 0; background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65); } body.theme-editorial .user-pill, body.theme-editorial-dark .user-pill { border-radius: 0; background: rgba(255,255,255,0.08); } body.theme-editorial .user-avatar, body.theme-editorial-dark .user-avatar { border-radius: 0; background: #FFFFFF; color: #050505; } body.theme-editorial .user-name, body.theme-editorial-dark .user-name { color: rgba(255,255,255,0.80); } body.theme-editorial .user-role, body.theme-editorial-dark .user-role { color: rgba(255,255,255,0.45); } body.theme-editorial .user-menu, body.theme-editorial-dark .user-menu { border-radius: 0; background: #111111; border: 1px solid rgba(255,255,255,0.12); box-shadow: 6px 6px 0 rgba(0,0,0,0.4); } body.theme-editorial .user-menu a, body.theme-editorial-dark .user-menu a { color: #F0F0F0; border-radius: 0; } body.theme-editorial .user-menu a:hover, body.theme-editorial-dark .user-menu a:hover { background: rgba(255,255,255,0.06); } body.theme-editorial .user-menu hr, body.theme-editorial-dark .user-menu hr { border-top-color: rgba(255,255,255,0.10); } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ body.theme-editorial .btn, body.theme-editorial-dark .btn { font-family: 'IBM Plex Sans', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 0; } body.theme-editorial .btn-lime, body.theme-editorial .btn-primary { background: #050505; color: #FFFFFF; } body.theme-editorial .btn-lime:hover, body.theme-editorial .btn-primary:hover { background: #1A1A1A; box-shadow: 4px 4px 0 rgba(5,5,5,0.15); transform: translateY(-1px); } body.theme-editorial-dark .btn-lime, body.theme-editorial-dark .btn-primary { background: #F0F0F0; color: #050505; } body.theme-editorial-dark .btn-lime:hover, body.theme-editorial-dark .btn-primary:hover { background: #CFCFCF; box-shadow: 4px 4px 0 rgba(0,0,0,0.4); transform: translateY(-1px); } body.theme-editorial .btn-dark { background: #050505; color: #FFFFFF; } body.theme-editorial .btn-dark:hover { background: #1A1A1A; transform: translateY(-1px); } body.theme-editorial-dark .btn-dark { background: #F0F0F0; color: #050505; } body.theme-editorial-dark .btn-dark:hover { background: #CFCFCF; transform: translateY(-1px); } /* ── Filled "active" chips & lime badges ── The base styles fill these with the accent (--lime) and set the label to --lt-ink — or the inverse (fill --lt-ink, label --lime). In the editorial palettes --lime and --lt-ink resolve to the SAME value, so the label vanishes into the fill (white-on-white in dark, black-on-black in light). Force the contrasting ink, matching the .btn-lime treatment above. Covers: dashboard stage/status pills, lime badges, finance/timelog view tabs, contacts filter chips. (Underline-style active tabs that only set a text colour stay readable and are intentionally not touched.) */ body.theme-editorial .sp-btn.active, body.theme-editorial .fc.active, body.theme-editorial .badge-lime, body.theme-editorial .view-tab.active, body.theme-editorial .filter-chip.active { color: #FFFFFF; } body.theme-editorial-dark .sp-btn.active, body.theme-editorial-dark .fc.active, body.theme-editorial-dark .badge-lime, body.theme-editorial-dark .view-tab.active, body.theme-editorial-dark .filter-chip.active { color: #050505; } body.theme-editorial .btn-ghost-lt, body.theme-editorial .btn-ghost-dk, body.theme-editorial .btn-ghost { background: transparent; border: 1px solid rgba(5,5,5,0.18); color: #5F5F5F; border-radius: 0; } body.theme-editorial .btn-ghost-lt:hover, body.theme-editorial .btn-ghost-dk:hover, body.theme-editorial .btn-ghost:hover { background: rgba(5,5,5,0.04); color: #050505; border-color: rgba(5,5,5,0.28); } body.theme-editorial-dark .btn-ghost-lt, body.theme-editorial-dark .btn-ghost-dk, body.theme-editorial-dark .btn-ghost { background: transparent; border: 1px solid rgba(240,240,240,0.18); color: #9A9A9A; border-radius: 0; } body.theme-editorial-dark .btn-ghost-lt:hover, body.theme-editorial-dark .btn-ghost-dk:hover, body.theme-editorial-dark .btn-ghost:hover { background: rgba(240,240,240,0.06); color: #F0F0F0; border-color: rgba(240,240,240,0.28); } body.theme-editorial .btn-icon, body.theme-editorial-dark .btn-icon { border-radius: 0; } /* Global task fab hover */ body.theme-editorial #global-task-btn:hover { box-shadow: 4px 4px 0 rgba(5,5,5,0.15); } body.theme-editorial-dark #global-task-btn:hover { box-shadow: 4px 4px 0 rgba(0,0,0,0.4); } /* ═══════════════════════════════════════════════════════ ZONES & SURFACES ═══════════════════════════════════════════════════════ */ body.theme-editorial .light-zone, body.theme-editorial .page-hero { background: #E9E9E9; } body.theme-editorial-dark .light-zone, body.theme-editorial-dark .page-hero { background: #050505; } /* Remove grid pattern */ body.theme-editorial .light-zone::before, body.theme-editorial-dark .light-zone::before { display: none; } body.theme-editorial .page-hero-title, body.theme-editorial .hero-title { color: #050505; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: -0.03em; } body.theme-editorial-dark .page-hero-title, body.theme-editorial-dark .hero-title { color: #F0F0F0; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: -0.03em; } body.theme-editorial .page-hero-sub, body.theme-editorial .hero-sub { color: #9A9A9A; } body.theme-editorial-dark .page-hero-sub, body.theme-editorial-dark .hero-sub { color: #5F5F5F; } body.theme-editorial .glass-card { background: #FFFFFF; border: 1px solid #D8D8D8; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.theme-editorial-dark .glass-card { background: #111111; border: 1px solid rgba(240,240,240,0.10); border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.theme-editorial .glass-card:hover { border-color: rgba(5,5,5,0.22); } body.theme-editorial-dark .glass-card:hover { border-color: rgba(240,240,240,0.20); } body.theme-editorial .dark-card { background: #FFFFFF; border: 1px solid #D8D8D8; border-radius: 0; } body.theme-editorial .dark-card:hover { border-color: rgba(5,5,5,0.22); } body.theme-editorial-dark .dark-card { background: #111111; border: 1px solid rgba(240,240,240,0.10); border-radius: 0; } body.theme-editorial-dark .dark-card:hover { border-color: rgba(240,240,240,0.22); } body.theme-editorial .dark-card-2 { background: #F1F1F1; border: 1px solid #D8D8D8; border-radius: 0; } body.theme-editorial-dark .dark-card-2 { background: #181818; border: 1px solid rgba(240,240,240,0.10); border-radius: 0; } body.theme-editorial .glass-card-dark { color: #F0F0F0; } /* ── Dark card internals: force light text on the hard-coded dark background ── */ body.theme-editorial .glass-card-dark .pipeline-card-head, body.theme-editorial .glass-card-dark .pipeline-card-head span { color: rgba(255,255,255,0.55); } body.theme-editorial .glass-card-dark .ps-val { color: #FFFFFF; } body.theme-editorial .glass-card-dark .ps-lbl { color: rgba(255,255,255,0.50); } body.theme-editorial .glass-card-dark .ps { background: rgba(255,255,255,0.06); } body.theme-editorial .glass-card-dark .sp-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); } body.theme-editorial .glass-card-dark .sp-btn:hover:not(.active) { background: rgba(255,255,255,0.14); color: #FFFFFF; } body.theme-editorial .glass-card-dark .sp-btn.active { background: #FFFFFF; color: #050505; } /* ═══════════════════════════════════════════════════════ TOOLBAR & FILTERS ═══════════════════════════════════════════════════════ */ body.theme-editorial .toolbar { background: #F1F1F1; border-bottom: 1px solid #D8D8D8; } body.theme-editorial-dark .toolbar { background: #111111; border-bottom: 1px solid rgba(240,240,240,0.10); } body.theme-editorial .filter-sel { background: #EFEFEF; border: 1px solid #D8D8D8; color: #5F5F5F; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; } body.theme-editorial-dark .filter-sel { background: #181818; border: 1px solid rgba(240,240,240,0.12); color: #9A9A9A; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; } body.theme-editorial .search-input { background: #EFEFEF; border: 1px solid #D8D8D8; color: #050505; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; } body.theme-editorial .search-input:focus { border-color: #050505; box-shadow: 0 0 0 2px rgba(5,5,5,0.10); } body.theme-editorial-dark .search-input { background: #181818; border: 1px solid rgba(240,240,240,0.12); color: #F0F0F0; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; } body.theme-editorial-dark .search-input:focus { border-color: #F0F0F0; box-shadow: 0 0 0 2px rgba(240,240,240,0.10); } /* ═══════════════════════════════════════════════════════ FORM FIELDS ═══════════════════════════════════════════════════════ */ body.theme-editorial input[type="text"], body.theme-editorial input[type="email"], body.theme-editorial input[type="number"], body.theme-editorial input[type="date"], body.theme-editorial input[type="password"], body.theme-editorial textarea, body.theme-editorial select { background: #F1F1F1; border: 1px solid #D8D8D8; color: #050505; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; } body.theme-editorial input:focus, body.theme-editorial textarea:focus, body.theme-editorial select:focus { border-color: #050505; box-shadow: 0 0 0 2px rgba(5,5,5,0.10); } body.theme-editorial input[readonly] { background: rgba(5,5,5,0.03); } body.theme-editorial-dark input[type="text"], body.theme-editorial-dark input[type="email"], body.theme-editorial-dark input[type="number"], body.theme-editorial-dark input[type="date"], body.theme-editorial-dark input[type="password"], body.theme-editorial-dark textarea, body.theme-editorial-dark select { background: #181818; border: 1px solid rgba(240,240,240,0.14); color: #F0F0F0; border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; } body.theme-editorial-dark input:focus, body.theme-editorial-dark textarea:focus, body.theme-editorial-dark select:focus { border-color: #F0F0F0; box-shadow: 0 0 0 2px rgba(240,240,240,0.10); } /* ═══════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════ */ body.theme-editorial .proj-table th, body.theme-editorial .inv-table th, body.theme-editorial .staff-table th { background: #F1F1F1; color: #9A9A9A; font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid #D8D8D8; } body.theme-editorial .proj-table tr.pr:hover td, body.theme-editorial .inv-table tr.clickable:hover td { background: rgba(5,5,5,0.02); } body.theme-editorial .proj-table th.sorted { color: #050505; } body.theme-editorial .staff-table tr:hover td { background: rgba(5,5,5,0.02); } body.theme-editorial-dark .proj-table th, body.theme-editorial-dark .inv-table th, body.theme-editorial-dark .staff-table th { background: #181818; color: #5F5F5F; font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid rgba(240,240,240,0.10); } body.theme-editorial-dark .proj-table tr.pr:hover td, body.theme-editorial-dark .inv-table tr.clickable:hover td { background: rgba(240,240,240,0.04); } body.theme-editorial-dark .proj-table th.sorted { color: #F0F0F0; } body.theme-editorial-dark .staff-table tr:hover td { background: rgba(240,240,240,0.03); } /* ═══════════════════════════════════════════════════════ KPI STRIP ═══════════════════════════════════════════════════════ */ body.theme-editorial .kpi-strip, body.theme-editorial-dark .kpi-strip { background: transparent; gap: 1px; } body.theme-editorial .kpi-c { background: #FFFFFF; border: 1px solid #D8D8D8; border-radius: 0; } body.theme-editorial-dark .kpi-c { background: #111111; border: 1px solid rgba(240,240,240,0.10); border-radius: 0; } body.theme-editorial .kpi-lbl, body.theme-editorial-dark .kpi-lbl { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; } body.theme-editorial .kpi-lbl { color: #9A9A9A; } body.theme-editorial-dark .kpi-lbl { color: #5F5F5F; } /* Space Grotesk for metric numbers */ body.theme-editorial .kpi-val { color: #050505; font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; } body.theme-editorial-dark .kpi-val { color: #F0F0F0; font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; } body.theme-editorial .kpi-val.lime { color: #050505; } body.theme-editorial-dark .kpi-val.lime { color: #F0F0F0; } body.theme-editorial .kpi-sub { color: #9A9A9A; font-family: 'IBM Plex Sans', sans-serif; } body.theme-editorial-dark .kpi-sub { color: #5F5F5F; font-family: 'IBM Plex Sans', sans-serif; } /* ═══════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════ */ body.theme-editorial .tab-btn, body.theme-editorial-dark .tab-btn { border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } body.theme-editorial .tab-btn { border: 1px solid #D8D8D8; color: #9A9A9A; } body.theme-editorial .tab-btn.active { background: #050505; color: #FFFFFF; border-color: #050505; } body.theme-editorial .tab-btn:hover:not(.active) { background: rgba(5,5,5,0.05); color: #050505; border-color: rgba(5,5,5,0.20); } body.theme-editorial-dark .tab-btn { border: 1px solid rgba(240,240,240,0.14); color: #5F5F5F; } body.theme-editorial-dark .tab-btn.active { background: #F0F0F0; color: #050505; border-color: #F0F0F0; } body.theme-editorial-dark .tab-btn:hover:not(.active) { background: rgba(240,240,240,0.06); color: #F0F0F0; border-color: rgba(240,240,240,0.28); } body.theme-editorial .view-tab, body.theme-editorial-dark .view-tab { border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #9A9A9A; } body.theme-editorial .view-tab.active { background: #050505; color: #FFFFFF; } body.theme-editorial .view-tab:hover:not(.active) { color: #050505; background: rgba(5,5,5,0.05); } body.theme-editorial-dark .view-tab.active { background: #F0F0F0; color: #050505; } body.theme-editorial-dark .view-tab:hover:not(.active) { color: #F0F0F0; background: rgba(240,240,240,0.06); } /* ═══════════════════════════════════════════════════════ SECTION TITLES ═══════════════════════════════════════════════════════ */ body.theme-editorial .sec-title, body.theme-editorial-dark .sec-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; } body.theme-editorial .sec-title { color: #9A9A9A; } body.theme-editorial-dark .sec-title { color: #5F5F5F; } body.theme-editorial .sec-title::before, body.theme-editorial-dark .sec-title::before { background: var(--lime); } /* ═══════════════════════════════════════════════════════ BADGES & TAGS ═══════════════════════════════════════════════════════ */ body.theme-editorial .stage-tag, body.theme-editorial .uc-role, body.theme-editorial .status-tag, body.theme-editorial-dark .stage-tag, body.theme-editorial-dark .uc-role, body.theme-editorial-dark .status-tag { border-radius: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } body.theme-editorial .badge-draft { background: rgba(5,5,5,0.05); } body.theme-editorial .badge-closed { background: rgba(5,5,5,0.03); } body.theme-editorial .role-principal, body.theme-editorial-dark .role-principal { background: var(--lime-glow); color: var(--lime); border-color: var(--lime-glow2); } /* ═══════════════════════════════════════════════════════ PROGRESS BARS — thin monochrome ═══════════════════════════════════════════════════════ */ body.theme-editorial .mini-bar-track { background: rgba(5,5,5,0.10); } body.theme-editorial-dark .mini-bar-track { background: rgba(240,240,240,0.12); } /* ═══════════════════════════════════════════════════════ STAGE BAR (project page) ═══════════════════════════════════════════════════════ */ body.theme-editorial .stage-step.completed .step-circle, body.theme-editorial-dark .stage-step.completed .step-circle { background: var(--lime); border-color: var(--lime); } body.theme-editorial .stage-step.current .step-circle, body.theme-editorial-dark .stage-step.current .step-circle { border-color: var(--lime); color: var(--lime); } body.theme-editorial .stage-step.current .step-label, body.theme-editorial-dark .stage-step.current .step-label { color: var(--lime); } /* ═══════════════════════════════════════════════════════ USER CARD ═══════════════════════════════════════════════════════ */ body.theme-editorial .user-card { background: #FFFFFF; border-color: #D8D8D8; border-radius: 0; } body.theme-editorial-dark .user-card { background: #111111; border-color: rgba(240,240,240,0.10); border-radius: 0; } body.theme-editorial .uc-avatar, body.theme-editorial-dark .uc-avatar { background: var(--lime-glow); color: var(--lime); border-radius: 0; } /* ═══════════════════════════════════════════════════════ LEADERBOARD ═══════════════════════════════════════════════════════ */ body.theme-editorial .lb-avatar-gold { background: rgba(5,5,5,0.08); border-color: rgba(5,5,5,0.25); } body.theme-editorial .lb-rank-1 td { background: rgba(5,5,5,0.02); } body.theme-editorial .lb-leader-banner { background: rgba(5,5,5,0.05); border-color: rgba(5,5,5,0.15); } /* ═══════════════════════════════════════════════════════ MODAL — offset shadow for editorial feel ═══════════════════════════════════════════════════════ */ body.theme-editorial .modal { background: #FFFFFF; border: 1px solid #D8D8D8; border-radius: 0; box-shadow: 8px 8px 0 rgba(5,5,5,0.08); } body.theme-editorial-dark .modal { background: #111111; border: 1px solid rgba(240,240,240,0.12); border-radius: 0; box-shadow: 8px 8px 0 rgba(0,0,0,0.5); } body.theme-editorial .modal-overlay { background: rgba(5,5,5,0.50); } body.theme-editorial-dark .modal-overlay { background: rgba(0,0,0,0.70); } /* ═══════════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════════ */ body.theme-editorial .toast.success, body.theme-editorial-dark .toast.success { border-color: var(--lime); color: var(--lime); } /* ═══════════════════════════════════════════════════════ FOCUS RING ═══════════════════════════════════════════════════════ */ body.theme-editorial .btn:focus-visible, body.theme-editorial .fc:focus-visible, body.theme-editorial .sp-btn:focus-visible, body.theme-editorial .lb-tab:focus-visible, body.theme-editorial .topbar-nav a:focus-visible, body.theme-editorial .files-pill:focus-visible, body.theme-editorial-dark .btn:focus-visible, body.theme-editorial-dark .fc:focus-visible, body.theme-editorial-dark .sp-btn:focus-visible, body.theme-editorial-dark .lb-tab:focus-visible, body.theme-editorial-dark .topbar-nav a:focus-visible, body.theme-editorial-dark .files-pill:focus-visible { outline-color: var(--lime); } /* ═══════════════════════════════════════════════════════ PROFILE PAGE — toggle slider active state ═══════════════════════════════════════════════════════ */ body.theme-editorial .toggle-switch input:checked + .toggle-slider, body.theme-editorial-dark .toggle-switch input:checked + .toggle-slider { background: var(--lime-glow); border-color: var(--lime); } body.theme-editorial .toggle-switch input:checked + .toggle-slider::before, body.theme-editorial-dark .toggle-switch input:checked + .toggle-slider::before { background: var(--lime); } /* ═══════════════════════════════════════════════════════ CHECKLIST ═══════════════════════════════════════════════════════ */ body.theme-editorial .check-item.warn-item { border-left: 3px solid rgba(5,5,5,0.25); } body.theme-editorial-dark .check-item.warn-item { border-left: 3px solid rgba(240,240,240,0.20); } /* ═══════════════════════════════════════════════════════ EMAIL TIMELINE nodes ═══════════════════════════════════════════════════════ */ body.theme-editorial .tl-me, body.theme-editorial-dark .tl-me { background: var(--lime-glow); border-color: var(--lime); color: var(--lime); } body.theme-editorial .tl-cba { background: rgba(95,95,95,0.10); border-color: rgba(95,95,95,0.30); color: #5F5F5F; } body.theme-editorial-dark .tl-cba { background: rgba(154,154,154,0.10); border-color: rgba(154,154,154,0.30); color: #9A9A9A; } /* ═══════════════════════════════════════════════════════ EMAIL LIST — explicit contrast overrides ═══════════════════════════════════════════════════════ */ body.theme-editorial .email-subject { color: #050505; } body.theme-editorial .email-row.unread .email-subject { color: #050505; font-weight: 700; } body.theme-editorial .email-from, body.theme-editorial .email-preview, body.theme-editorial .email-date, body.theme-editorial .open-item-age, body.theme-editorial .badge-attach, body.theme-editorial .thread-count, body.theme-editorial .person-email, body.theme-editorial .person-count, body.theme-editorial .tl-date, body.theme-editorial .vt-btn, body.theme-editorial .dir-pill, body.theme-editorial .summary-gen { color: #5F5F5F; } body.theme-editorial .summary-card h3, body.theme-editorial .groups-header-title, body.theme-editorial .sidebar-section, body.theme-editorial .group-count, body.theme-editorial .group-date, body.theme-editorial .email-tab:not(.active) { color: #5F5F5F; } body.theme-editorial-dark .email-subject { color: #F0F0F0; } body.theme-editorial-dark .email-row.unread .email-subject { color: #F0F0F0; font-weight: 700; } body.theme-editorial-dark .email-from, body.theme-editorial-dark .email-preview, body.theme-editorial-dark .email-date, body.theme-editorial-dark .open-item-age, body.theme-editorial-dark .badge-attach, body.theme-editorial-dark .thread-count, body.theme-editorial-dark .person-email, body.theme-editorial-dark .person-count, body.theme-editorial-dark .tl-date, body.theme-editorial-dark .vt-btn, body.theme-editorial-dark .dir-pill, body.theme-editorial-dark .summary-gen { color: #9A9A9A; } body.theme-editorial-dark .summary-card h3, body.theme-editorial-dark .groups-header-title, body.theme-editorial-dark .sidebar-section, body.theme-editorial-dark .group-count, body.theme-editorial-dark .group-date, body.theme-editorial-dark .email-tab:not(.active) { color: #9A9A9A; }