/* brdg global dark palette — warm near-black, applied on ALL pages. * * Scoped to [data-pc-theme="dark"] (Able Pro's dark attribute, set by * theme.js on /). Light mode is left completely untouched. * * Loaded on every page (injected after style-preset.css by main._load_base, * the planning router, and login.html). Page-specific dark styling that is * NOT generic (Tabulator, datepicker, KPI, tooltips, bs-stepper) lives in * planning.css, which loads AFTER this file and reuses these --brdg-* vars. */ [data-pc-theme="dark"] { --brdg-bg: #1e1e1e; --brdg-surface: #262626; --brdg-surface-elevated: #2a2a2a; --brdg-border: #3a3a3a; --brdg-text-primary: #e8e8e8; --brdg-text-muted: #a0a0a0; --brdg-accent: #f20080; /* brand pink — used sparingly in dark */ --brdg-accent-soft: #ff63ad; /* softened pink for text/icons on dark */ --brdg-row-hover: #30302f; /* warm hover (slightly lifted from surface) */ /* Remap core Bootstrap vars so BS5 components inherit the palette. */ --bs-body-bg: var(--brdg-bg); --bs-body-bg-rgb: 30, 30, 30; /* #1e1e1e — drives translucent header */ --bs-body-color: var(--brdg-text-primary); --bs-card-bg: var(--brdg-surface); --bs-card-border-color: var(--brdg-border); --bs-border-color: var(--brdg-border); --bs-secondary-color: var(--brdg-text-muted); --bs-tertiary-bg: var(--brdg-surface-elevated); /* Able Pro header: keep it translucent (frosted glass), warm palette. */ --pc-header-background: rgba(30, 30, 30, 0.72); } /* Frosted translucent top header in the warm palette (blurred content shows through). Able Pro already drives the bg from --pc-header-background. */ [data-pc-theme="dark"] .pc-header { background: var(--pc-header-background); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--brdg-border); } [data-pc-theme="dark"] .pc-header .pc-head-link { color: var(--brdg-text-primary); } [data-pc-theme="dark"] .pc-header .pc-head-link:hover { color: var(--brdg-accent-soft); } /* ---- Page surfaces ---- */ [data-pc-theme="dark"] body, [data-pc-theme="dark"] .pc-container, [data-pc-theme="dark"] .pc-content { background-color: var(--brdg-bg) !important; color: var(--brdg-text-primary); } [data-pc-theme="dark"] .text-muted { color: var(--brdg-text-muted) !important; } [data-pc-theme="dark"] .breadcrumb-item, [data-pc-theme="dark"] .page-header-title h2 { color: var(--brdg-text-primary); } /* ---- Cards (base surface + border). Semantic borders (border-success etc.) are re-asserted per-page where needed, e.g. planning KPI cards. ---- */ [data-pc-theme="dark"] .card { background-color: var(--brdg-surface) !important; border-color: var(--brdg-border) !important; } [data-pc-theme="dark"] .card h1, [data-pc-theme="dark"] .card h2, [data-pc-theme="dark"] .card h3, [data-pc-theme="dark"] .card h4, [data-pc-theme="dark"] .card h5, [data-pc-theme="dark"] .card h6 { color: var(--brdg-text-primary); } /* ---- Form controls ---- */ [data-pc-theme="dark"] .form-control, [data-pc-theme="dark"] .form-select { background-color: var(--brdg-surface-elevated); color: var(--brdg-text-primary); border-color: var(--brdg-border); } [data-pc-theme="dark"] .form-control::placeholder { color: var(--brdg-text-muted); } /* ---- Tables (generic Bootstrap tables on other pages) ---- */ [data-pc-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--brdg-text-primary); --bs-table-border-color: var(--brdg-border); color: var(--brdg-text-primary); } /* ---- Modal ---- */ [data-pc-theme="dark"] .modal-content { background-color: var(--brdg-surface); color: var(--brdg-text-primary); border-color: var(--brdg-border); } [data-pc-theme="dark"] .modal-header, [data-pc-theme="dark"] .modal-footer { border-color: var(--brdg-border); } [data-pc-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ---- Dropdown menus (header profile, etc.) ---- */ [data-pc-theme="dark"] .dropdown-menu { background-color: var(--brdg-surface-elevated); border-color: var(--brdg-border); color: var(--brdg-text-primary); } [data-pc-theme="dark"] .dropdown-item { color: var(--brdg-text-primary); } [data-pc-theme="dark"] .dropdown-item:hover { background-color: var(--brdg-surface); color: var(--brdg-text-primary); } /* ---- Accordion ---- */ [data-pc-theme="dark"] .accordion-item { background-color: var(--brdg-surface-elevated); border-color: var(--brdg-border); } [data-pc-theme="dark"] .accordion-button, [data-pc-theme="dark"] .accordion-body { background-color: var(--brdg-surface-elevated); color: var(--brdg-text-primary); } [data-pc-theme="dark"] .accordion-button:not(.collapsed) { color: var(--brdg-text-primary); box-shadow: none; } [data-pc-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.4); } /* ---- Sidebar active item: mute the bright pink fill (consistent on all pages) ---- */ [data-pc-theme="dark"] .pc-sidebar .pc-navbar > li.pc-item.active > a.pc-link { background-color: var(--brdg-surface-elevated); color: var(--brdg-accent-soft); border-radius: 6px; } [data-pc-theme="dark"] .pc-sidebar .pc-navbar > li.pc-item.active > a.pc-link .pc-micon, [data-pc-theme="dark"] .pc-sidebar .pc-navbar > li.pc-item.active > a.pc-link .pc-micon i { color: var(--brdg-accent-soft); }