/* * Dark Mode - Warm Slate Palette (Zinc family) * Activated via [data-theme="dark"] on * Version: 3.0 — cohesive single-family surfaces, fixed text token bug */ /* ================================ * DARK TOKEN OVERRIDES * ================================ */ [data-theme="dark"] { color-scheme: dark; /* --- Surfaces (warm zinc family — body, header, cards share hue) --- */ --pk-white: #18181b; /* primary "white" → body / header */ --pk-off-white: #1c1c1f; --pk-neutral-bg: #18181b; --pk-neutral-border: #3f3f46; --pk-surface-1: #18181b; /* body, header */ --pk-surface-2: #27272a; /* raised cards, panels */ --pk-surface-3: #3f3f46; /* dropdowns, hover surfaces */ --pk-surface-4: #52525b; /* deepest elevation */ /* --- Slate tokens (semantic: used for TEXT in most components) --- CRITICAL: in light mode, "darker" = darker text. In dark mode we INVERT: "darker" = LIGHTER text (more emphasis). Single definition only — the previous v2 had a duplicate block that overwrote text tokens with surface colors, killing legibility. */ --pk-slate: #a1a1aa; /* muted body text */ --pk-slate-light: #71717a; /* dim text, metadata */ --pk-slate-lighter: #7a7a82; /* very dim — bumped from #52525b to clear AA on body */ --pk-slate-dark: #f4f4f5; /* strong text, headings */ --pk-slate-darker: #fafafa; /* primary text, big numbers */ --pk-slate-subtle: #27272a; /* subtle SURFACE, not text */ --pk-slate-muted: #3f3f46; /* muted SURFACE */ /* --- Gray scale (zinc, inverted for dark mode) --- */ --pk-gray-50: #18181b; --pk-gray-100: #27272a; --pk-gray-200: #3f3f46; --pk-gray-300: #52525b; --pk-gray-400: #71717a; --pk-gray-500: #a1a1aa; --pk-gray-600: #d4d4d8; --pk-gray-700: #e4e4e7; --pk-gray-800: #f4f4f5; --pk-gray-900: #fafafa; /* --- Semantic aliases (re-resolve from remapped grays) --- */ --color-background-muted: var(--pk-gray-100); --color-text-muted: var(--pk-gray-500); --color-text-placeholder: var(--pk-gray-400); --color-border: var(--pk-gray-200); --color-border-light: var(--pk-gray-300); --color-surface-subtle: var(--pk-gray-50); /* --- Sage (warm-shifted to match zinc surfaces) --- */ --pk-sage: #27272a; --pk-sage-light: #18181b; --pk-sage-dark: #3f3f46; /* --- Subtle palette backgrounds (badges, wells) --- */ --pk-orange-subtle: rgba(229, 100, 26, 0.12); --pk-blue-subtle: rgba(122, 158, 192, 0.12); --pk-teal-subtle: rgba(94, 168, 130, 0.12); --pk-plum-subtle: rgba(180, 130, 200, 0.10); --pk-steel-subtle: rgba(160, 189, 213, 0.10); /* --- Status colors (ink-adjacent palette, brighter for dark surfaces) --- */ --pk-success: #5ea882; --pk-success-light: rgba(78, 138, 110, 0.15); --pk-success-dark: #8cc8a4; --pk-success-600: #5ea882; --pk-success-700: #8cc8a4; --pk-warning: #d4ad50; --pk-warning-light: rgba(196, 154, 58, 0.15); --pk-warning-dark: #e8c878; --pk-warning-600: #d4ad50; --pk-warning-700: #e8c878; --pk-error: #d46a6a; --pk-error-light: rgba(192, 80, 80, 0.15); --pk-error-dark: #e89090; --pk-error-600: #d46a6a; --pk-error-700: #e89090; --pk-info: #7a9ec0; --pk-info-light: rgba(91, 127, 165, 0.15); --pk-info-dark: #a0bdd5; --pk-info-600: #7a9ec0; --pk-info-700: #a0bdd5; --pk-caution-light: rgba(196, 154, 58, 0.15); --pk-caution-dark: #e8c878; /* --- Shadows (tuned for deeper navy surfaces) --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.55); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.65); --shadow-focus-ring: 0 0 0 3px rgba(61, 100, 136, 0.3); /* --- Table-specific (orange tint for left-border hover) --- */ --table-row-hover: rgba(229, 100, 26, 0.06); --table-row-stripe: var(--pk-surface-2); --table-sorted-tint: rgba(255, 255, 255, 0.06); /* --- Overlay tokens --- */ --overlay-backdrop: rgba(0, 0, 0, 0.75); --overlay-loading: rgba(24, 24, 27, 0.85); /* --- Environment warning tokens --- */ --env-warning-bg: #1f1215; --env-warning-text: #d4a0a0; --env-warning-border: #3a1e1e; /* --- Disputed badge border --- */ --badge-disputed-border: #b45309; /* --- Elevation (near-invisible borders for dark surfaces) --- */ --card-border: rgba(255, 255, 255, 0.06); /* --- Brand accent — preserve warm orange (was remapped to blue-slate + citrine in v2) --- Only --pk-orange-subtle is bumped slightly for visibility on dark surfaces. All other --pk-orange* / --pk-accent* tokens keep their light-mode (warm) values. */ --pk-orange-subtle: rgba(229, 100, 26, 0.14); --pk-accent-subtle: rgba(229, 100, 26, 0.14); --shadow-orange: 0 4px 12px rgba(229, 100, 26, 0.25); --shadow-orange-subtle: 0 2px 8px rgba(229, 100, 26, 0.15); /* --- Dark-mode accent overrides --- */ --pk-green-accent: var(--pk-slate-light); --pk-green-muted-hover: #4a5a68; --pk-blue-accent: #a0b8d8; --pk-success-accent: #86cfb0; --pk-error-accent: #d4a0a0; --pk-warning-accent: #e8c964; --pk-error-border: #2e1818; --pk-warning-border: #2a2010; --pk-plum-dark-bg: #2a1f35; --pk-plum-accent: #c4a5d4; --pk-orange-dark-bg: #2a1a10; --pk-btn-text: #ffffff; } /* ================================ * COMPONENT DARK OVERRIDES * Handles elements with inline styles and * components that need explicit dark treatment * ================================ */ /* Site header — same family as body, with subtle border separation */ [data-theme="dark"] .site-header { background: var(--pk-surface-1); border-bottom: 1px solid var(--pk-gray-200); } /* Login page — card lifts subtly above body */ [data-theme="dark"] .login-container { background: transparent; } [data-theme="dark"] .login-card { background: var(--pk-surface-2); color: var(--pk-slate-dark); border: 1px solid var(--pk-gray-200); } /* Login subtitle — lift contrast vs --pk-gray-500 default */ [data-theme="dark"] .login-subtitle { color: var(--pk-gray-600); } /* Form inputs — recessed wells, distinct from card surface. :not([type="checkbox"]) — checkboxes are native + accent-color only (checkboxes.css owns them exclusively; color-scheme:dark handles their dark chrome). appearance:auto ignores author background today in Chromium, but this selector would still contradict that ownership and is not guaranteed inert in every engine. */ [data-theme="dark"] input:not([type="checkbox"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--pk-surface-1); color: var(--pk-slate-dark); border-color: var(--pk-gray-300); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--pk-gray-500); opacity: 1; } /* Dropdowns and selects */ [data-theme="dark"] select option { background-color: var(--pk-surface-2); color: var(--pk-slate-dark); } /* Links — warm orange to match brand (was citrine yellow in v2) */ [data-theme="dark"] a { color: var(--pk-orange); } [data-theme="dark"] a:hover { color: var(--pk-orange-hover); } /* Nav links — muted on dark header (matches light-mode #8c959d) */ [data-theme="dark"] .site-header a, [data-theme="dark"] .site-header .nav-link { color: #8c959d; } [data-theme="dark"] .site-header a:hover, [data-theme="dark"] .site-header .nav-link:hover { color: var(--pk-btn-text); } /* Active nav — white text, underline via ::after pseudo-element */ [data-theme="dark"] .site-header .nav-link.active { background-color: transparent; color: #ffffff; } [data-theme="dark"] .site-header .nav-link.active::after { background: rgba(255, 255, 255, 0.7); } /* Utility group — hover surfaces on dark header */ [data-theme="dark"] .site-header .theme-toggle:hover, [data-theme="dark"] .site-header .nav-user-menu-toggle:hover, [data-theme="dark"] .site-header .nav-dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--pk-btn-text); } /* Avatar in dark mode — keep orange tint */ [data-theme="dark"] .nav-user-avatar { background: rgba(241, 136, 65, 0.15); color: var(--pk-orange); } /* User menu name + email */ [data-theme="dark"] .nav-user-name { color: #ffffff; } [data-theme="dark"] .nav-user-email { color: #8c959d; } [data-theme="dark"] .nav-dropdown-divider { background: rgba(255, 255, 255, 0.08); } /* Django messages */ [data-theme="dark"] .messages .alert { border-color: var(--pk-gray-300); } /* Page titles and headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--pk-slate-darker); } /* Filter/search containers */ [data-theme="dark"] .filter-container, [data-theme="dark"] .search-container { background: var(--pk-surface-3); border-color: var(--pk-gray-200); } /* Pagination */ [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background: var(--pk-surface-3); color: var(--pk-slate-dark); border-color: var(--pk-gray-200); } [data-theme="dark"] .pagination .current { background: var(--pk-orange); color: var(--pk-btn-text); } /* Card/panel backgrounds — subtle elevation above body */ [data-theme="dark"] .detail-card, [data-theme="dark"] .info-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .panel { background: var(--pk-surface-2); border-color: var(--pk-gray-200); } /* Stat card hover — slightly lifted */ [data-theme="dark"] .stat-card:hover { border-color: var(--pk-gray-300); background: var(--pk-surface-3); } /* ROI card — replace hardcoded green gradient and border */ [data-theme="dark"] .roi-card { background: var(--pk-surface-2); border-color: var(--pk-gray-200); } /* Nav dropdown active — subtle white highlight */ [data-theme="dark"] .nav-dropdown-item.active { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; } /* Footer — match body, separated only by border */ [data-theme="dark"] .site-footer { background: var(--pk-surface-1); color: var(--pk-gray-500); border-top: 1px solid var(--pk-gray-200); } /* Dropdown menus — light-mode dropdown is already dark-styled (slate bg); dark mode only needs a slightly deeper surface to distinguish from the header */ [data-theme="dark"] .nav-dropdown-menu { background: var(--pk-surface-2); border-color: var(--pk-gray-300); } [data-theme="dark"] .nav-dropdown-menu a { color: #8c959d; } [data-theme="dark"] .nav-dropdown-menu a:hover { background: var(--pk-surface-3); color: #ffffff; } /* Environment dropdown */ [data-theme="dark"] .environment-dropdown { background: var(--pk-surface-3); border-color: var(--pk-gray-200); } /* ================================ * SLATE COLOR CONTRAST FIXES * --pk-slate is dark in both modes (header bg). Elements that * use it as text/accent color need explicit lighter overrides. * ================================ */ /* Status filter tabs — active state needs visible bg + text */ [data-theme="dark"] .status-tab.active { background: var(--pk-slate-muted); color: var(--pk-btn-text); border-color: var(--pk-slate-muted); } [data-theme="dark"] .status-tab:hover { background: var(--pk-surface-4); } /* Disabled button — explicit dim treatment so opacity:0.5 doesn't produce mid-gray-on-mid-gray illegibility (e.g., disabled "Upload & Preview"). */ [data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn.disabled { background-color: var(--pk-surface-3); border-color: var(--pk-surface-3); color: var(--pk-gray-500); opacity: 1; } /* Segmented control (Day/Week/Month on dashboard) — needs explicit dark treatment. The base .view-toggle-btn.active uses --pk-white as bg, which is body color in dark mode (invisible). And [data-theme="dark"] a wins over the inactive --pk-slate-lighter color, turning all three orange. Override both. */ [data-theme="dark"] .view-toggle-btn { color: var(--pk-gray-500); } [data-theme="dark"] .view-toggle-btn:hover { color: var(--pk-gray-700); } [data-theme="dark"] .view-toggle-btn.active { background: var(--pk-surface-3); color: var(--pk-gray-900); box-shadow: var(--shadow-sm); } /* Sort indicators on table headers — light-mode opacity 0.4 disappears against dark surfaces. Bump default visibility and brighten on hover. */ [data-theme="dark"] .sort-icon { opacity: 0.55; color: var(--pk-gray-500); } [data-theme="dark"] .sortable:hover .sort-icon { opacity: 0.85; color: var(--pk-gray-700); } /* Empty-state icon — light-mode opacity 0.3 reads as a missing-image glyph on dark surfaces. Bump and warm-tint so the icon anchors the empty card. */ [data-theme="dark"] .empty-state-icon { opacity: 0.5; color: var(--pk-gray-500); } [data-theme="dark"] .empty-state-title { color: var(--pk-gray-700); } [data-theme="dark"] .empty-state-message { color: var(--pk-gray-500); } /* Table data classes — slate-blue emphasis on navy */ [data-theme="dark"] .charge-code, [data-theme="dark"] .customer-code { color: var(--pk-blue-accent); } /* Filename link hover */ [data-theme="dark"] .filename-link:hover { color: var(--pk-accent-light); } /* Dashboard: positive KPI values — muted success */ [data-theme="dark"] .stat-trend { color: var(--pk-success-accent); } [data-theme="dark"] .roi-value-large { color: var(--pk-success-accent); } [data-theme="dark"] .roi-card { border-color: var(--pk-gray-200); } [data-theme="dark"] .integration-value.success { color: var(--pk-success-accent); } [data-theme="dark"] .source-compact-value small { color: var(--pk-blue-accent); } /* Dashboard: vendor and source bars */ [data-theme="dark"] .vendor-bar { background: var(--pk-slate-muted); } [data-theme="dark"] .source-bar.source-api { background: var(--pk-slate-muted); } /* Slate secondary buttons — lighten for dark mode */ [data-theme="dark"] .btn-secondary { background-color: var(--pk-slate-muted); border-color: var(--pk-slate-muted); color: var(--pk-btn-text); } [data-theme="dark"] .btn-secondary:hover { background-color: var(--pk-green-muted-hover); border-color: var(--pk-green-muted-hover); } /* Slate outline buttons — DELETED 16 Aug 2026, tombstone kept deliberately. * * Two rules lived here: * [data-theme="dark"] .btn-outline-secondary { color: var(--pk-green-accent); * border-color: var(--pk-slate-muted) } * [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--pk-slate-muted); * color: var(--pk-btn-text) } * Every property either one set is re-set with !important by the * `.btn-outline-secondary, .btn-outline-primary` block near the end of this * file, so neither decided anything on any page. Verified by measurement * before deleting: a .btn-outline-secondary computes #a1a1aa (--pk-gray-500, * from the later block), not --pk-green-accent's #71717a, and is unchanged * after the deletion. * * The tombstone matters because this looks like the natural home for the * .btn-outline-primary dark fix and is a trap. A copy placed here WOULD have * applied — at (0,2,0), nothing later in this file matched .btn-outline-primary * before that fix — and would have rendered #71717a at 3.08:1, worse than the * 4.38:1 the button was already at. The fix therefore lives in the later * !important block, not here. (An earlier note in this spot said such a copy * "would have been dead code that never wins"; that was wrong, and it could * not be squared with the same note's "would have lowered contrast".) */ /* Status icons — match feature card title colors */ [data-theme="dark"] .icon-success { color: var(--pk-success-accent); } [data-theme="dark"] .icon-warning { color: var(--pk-warning-dark); } [data-theme="dark"] .icon-info { color: var(--pk-info-dark); } /* Reason tag badges — plum/caution need lighter treatment in dark mode */ [data-theme="dark"] .reason-tag--approval { background: var(--pk-plum-dark-bg); color: var(--pk-plum-accent); } [data-theme="dark"] .reason-tag--unmapped { background: var(--pk-orange-dark-bg); color: var(--pk-caution-dark); } /* ================================ * BUTTON TEXT FIX * * In dark mode, .btn-primary/.btn-secondary use --pk-gray-900 as their bg, * which evaluates to a near-WHITE value. So their text must be DARK to read. * Colored buttons (success/warning/danger/info) keep WHITE text — their bg * is a saturated color that doesn't invert. * ================================ */ /* Primary: warm orange CTA in dark mode (was stark near-white from --pk-gray-900). Brand-aligned, high contrast on warm-zinc surfaces, signals primary action clearly. NOTE: .btn-secondary is handled separately at line ~415 — it uses --pk-slate-muted (dark bg) + white text, so it must NOT be lumped in here. */ [data-theme="dark"] .btn-primary { background: var(--pk-orange); border-color: var(--pk-orange); color: #ffffff; } [data-theme="dark"] .btn-primary:hover { background: var(--pk-orange-hover); border-color: var(--pk-orange-hover); color: #ffffff; } [data-theme="dark"] .btn-primary:active { background: var(--pk-orange-dark); border-color: var(--pk-orange-dark); color: #ffffff; } /* Dashboard "Today / This Week / This Month" pill: same inversion problem as .btn-primary. It sets `background: var(--pk-slate)` + `color: white`, but --pk-slate becomes light-grey body text in dark mode, and `[data-theme="dark"] a` (0,1,1) outranks `.today-btn` (0,1,0) and repaints the label orange — measured 1.33:1, effectively illegible. Treated as secondary (it resets the period, it is not the page's CTA), on the same --pk-slate-muted surface as the active .view-toggle-btn it sits beside: measured 10.01:1 there. */ [data-theme="dark"] .today-btn { background: var(--pk-slate-muted); color: var(--pk-btn-text); } [data-theme="dark"] .today-btn:hover { background: var(--pk-green-muted-hover); color: var(--pk-btn-text); } /* Colored buttons: white text on saturated bg */ [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:active, [data-theme="dark"] .btn-warning, [data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-warning:active, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-danger:hover, [data-theme="dark"] .btn-danger:active, [data-theme="dark"] .btn-info, [data-theme="dark"] .btn-info:hover, [data-theme="dark"] .btn-info:active, [data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-success:hover, [data-theme="dark"] .btn-outline-warning:hover, [data-theme="dark"] .btn-outline-info:hover { color: #ffffff; } /* Tone down success button brightness in dark mode */ [data-theme="dark"] .btn-success { background-color: var(--pk-success-600); border-color: var(--pk-success-600); } [data-theme="dark"] .btn-success:hover { background-color: var(--pk-success-700); border-color: var(--pk-success-700); } /* ================================ * SOURCE BADGES (batch review) * Background inverts dark, so text must lighten * ================================ */ [data-theme="dark"] .source-badge--upload { background: var(--pk-success-light); color: var(--pk-success-accent); } [data-theme="dark"] .source-badge--email { background: var(--pk-info-dark); color: var(--pk-blue-accent); } /* Escalated/vendor badge — visible on navy */ [data-theme="dark"] .status-badge.escalated { background: rgba(242, 194, 0, 0.12); color: var(--pk-citrine-light); } /* ================================ * DARK-MODE-AWARE UTILITY CLASSES * Replace inline styles in templates * ================================ */ /* --- Alert boxes --- */ .alert-error-box { background: var(--pk-error-light); border: 1px solid var(--pk-error-border); border-radius: 0.375rem; padding: 0.75rem 1rem; color: var(--pk-error-dark); } .alert-warning-box { background: var(--pk-warning-light); border: 1px solid var(--pk-warning-border); border-radius: 0.375rem; padding: 0.75rem 1rem; color: var(--pk-warning-dark); } .alert-success-box { background: var(--pk-success-light); border: 1px solid var(--pk-success-accent); border-radius: 0.375rem; padding: 0.75rem 1rem; color: var(--pk-success-dark); } .alert-info-box { background: var(--pk-info-light); border: 1px solid var(--pk-blue-accent); border-radius: 0.375rem; padding: 0.75rem 1rem; color: var(--pk-info-dark); } /* --- Status text colors --- */ .text-error { color: var(--pk-error); } .text-error-dark { color: var(--pk-error-dark); } .text-error-600 { color: var(--pk-error-600); } .text-warning { color: var(--pk-warning); } .text-warning-dark { color: var(--pk-warning-dark); } .text-warning-600 { color: var(--pk-warning-600); } .text-success { color: var(--pk-success); } .text-success-dark { color: var(--pk-success-dark); } .text-success-600 { color: var(--pk-emerald-600); } .text-info { color: var(--pk-info); } /* --- Gray text utilities --- */ .text-muted { color: var(--pk-gray-500); } .text-subtle { color: var(--pk-gray-400); } .text-secondary { color: var(--pk-gray-600); } .text-primary { color: var(--pk-slate-dark); } .text-heading { color: var(--pk-gray-700); } .text-dark { color: var(--pk-gray-900); } /* --- Background utilities --- */ .bg-surface { background: var(--pk-white); } .bg-muted { background: var(--pk-gray-50); } .bg-subtle { background: var(--pk-gray-100); } .bg-error-light { background: var(--pk-error-light); } .bg-warning-light { background: var(--pk-warning-light); } .bg-success-light { background: var(--pk-success-light); } /* --- Border utilities --- */ .border-default { border-color: var(--pk-gray-200); } .border-muted { border-color: var(--pk-gray-300); } .border-error { border-color: var(--pk-error); } .border-warning { border-color: var(--pk-warning); } .border-success { border-color: var(--pk-success); } /* --- Card header/footer backgrounds --- */ .card-header-muted { background: var(--pk-gray-50); border-bottom: 1px solid var(--pk-gray-200); } .card-footer-muted { background: var(--pk-gray-50); border-top: 1px solid var(--pk-gray-200); } /* --- Button utilities for inline-styled buttons --- */ .btn-inline-cancel { background: var(--pk-white); border: 1px solid var(--pk-gray-300); color: var(--pk-gray-600); padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; } .btn-inline-cancel:hover { background: var(--pk-gray-50); } .btn-inline-danger { background: var(--pk-error-600); color: white; border: 1px solid var(--pk-error-600); padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; } .btn-inline-danger:hover { background: var(--pk-error-700); } .btn-inline-warning { background: var(--pk-warning-600); color: white; border: 1px solid var(--pk-warning-600); padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; } /* ================================ * PAGE TOOLBAR & CONTROL STRIP (v2 layout) * New components added during UI redesign that need dark overrides * ================================ */ [data-theme="dark"] .page-toolbar .page-title { color: var(--pk-gray-900); } [data-theme="dark"] .page-toolbar .page-subtitle { color: var(--pk-gray-500); } /* Status pills — !important to override per-page embedded styles */ [data-theme="dark"] .status-pill { background: var(--pk-gray-100) !important; color: var(--pk-gray-500) !important; border-color: transparent !important; } [data-theme="dark"] .status-pill:hover { background: var(--pk-gray-200) !important; color: var(--pk-gray-600) !important; } [data-theme="dark"] .status-pill.active { background: var(--pk-gray-200) !important; color: var(--pk-gray-900) !important; border-color: var(--pk-gray-300) !important; } [data-theme="dark"] .pill-count { background: var(--pk-gray-300) !important; color: var(--pk-gray-700) !important; } [data-theme="dark"] .status-pill.active .pill-count { background: var(--pk-orange) !important; color: #ffffff !important; } [data-theme="dark"] .pill-count--warning { background: rgba(217, 119, 6, 0.2) !important; color: var(--pk-warning) !important; } [data-theme="dark"] .pill-count--success { background: rgba(22, 163, 74, 0.2) !important; color: var(--pk-success) !important; } [data-theme="dark"] .pill-count--danger { background: rgba(220, 38, 38, 0.2) !important; color: var(--pk-error) !important; } /* Gate pills */ [data-theme="dark"] .gate-pill { color: var(--pk-gray-500) !important; } [data-theme="dark"] .gate-pill:hover { background: var(--pk-gray-100) !important; color: var(--pk-gray-600) !important; } [data-theme="dark"] .gate-pill.active { background: var(--pk-gray-500) !important; color: var(--pk-gray-900) !important; } [data-theme="dark"] .gate-passed { color: var(--pk-success); } /* Control strip inputs — !important needed to override per-page embedded styles */ [data-theme="dark"] .control-select { background-color: var(--pk-gray-100) !important; border-color: var(--pk-gray-200) !important; color: var(--pk-gray-600) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } [data-theme="dark"] .control-select:focus { border-color: var(--pk-orange) !important; } [data-theme="dark"] .control-search { background-color: var(--pk-gray-100) !important; border-color: var(--pk-gray-200) !important; color: var(--pk-gray-600) !important; } [data-theme="dark"] .control-search::placeholder { color: var(--pk-gray-400) !important; } [data-theme="dark"] .control-search:focus { border-color: var(--pk-orange) !important; } [data-theme="dark"] .control-date { background-color: var(--pk-gray-100) !important; border-color: var(--pk-gray-200) !important; color: var(--pk-gray-600) !important; } [data-theme="dark"] .control-date:focus { border-color: var(--pk-orange) !important; } [data-theme="dark"] .control-divider { background: var(--pk-gray-200); } /* Bulk controls */ [data-theme="dark"] .bulk-controls { color: var(--pk-gray-500); } [data-theme="dark"] .bulk-select-link { color: var(--pk-orange); } [data-theme="dark"] .selected-count { color: var(--pk-gray-500); } /* Bulk action footer */ [data-theme="dark"] .bulk-action-footer { background: var(--pk-gray-100); border-color: var(--pk-gray-200); } /* btn-accent (Filter / creating action) — !important to override per-page styles */ [data-theme="dark"] .btn-accent { background: var(--pk-orange) !important; border-color: var(--pk-orange) !important; color: #ffffff !important; } [data-theme="dark"] .btn-accent:hover { background: var(--pk-orange-hover) !important; border-color: var(--pk-orange-hover) !important; color: #ffffff !important; } /* btn-ghost */ [data-theme="dark"] .btn-ghost { color: var(--pk-gray-500) !important; } [data-theme="dark"] .btn-ghost:hover { color: var(--pk-gray-700) !important; background: var(--pk-gray-100) !important; } /* btn-outline-secondary + btn-outline-primary. buttons.css colours the two identically in light mode (`.btn-outline-primary, .btn-outline-secondary { color: var(--pk-gray-700) }` at specificity (0,1,0)), but only -secondary ever got a dark rule. (0,1,0) loses to `[data-theme="dark"] a` at (0,1,1), so in dark mode an computed to --pk-orange #e5641a while an identical -secondary link beside it computed to #a1a1aa — two outline links of the same weight, two colours, one page. Only the :hover half had been patched, which is why it survived review: the button corrected itself the moment the pointer touched it. Measured in Chrome on vendor_invoice/review_detail.html in dark mode: Back #a1a1aa at 5.81:1 on the page ground, View PDF #e5641a at 4.38:1 before / #a1a1aa at 5.81:1 after. Also fixes review_queue.html, email_invoice/detail.html and the Invoice Record page's evidence link. */ [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-primary { color: var(--pk-gray-500) !important; border-color: var(--pk-gray-300) !important; background: transparent !important; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-primary:hover { background: var(--pk-gray-200) !important; color: var(--pk-gray-800) !important; border-color: var(--pk-gray-300) !important; } /* Outline button variants */ [data-theme="dark"] .btn-outline-success { color: var(--pk-success) !important; border-color: var(--pk-success) !important; } [data-theme="dark"] .btn-outline-warning { color: var(--pk-warning) !important; border-color: var(--pk-warning) !important; } [data-theme="dark"] .btn-outline-danger { color: var(--pk-error) !important; border-color: var(--pk-error) !important; } /* Login page */ [data-theme="dark"] .login-card { color: var(--pk-gray-700); } [data-theme="dark"] .login-title { color: var(--pk-gray-900); } [data-theme="dark"] .login-subtitle { color: var(--pk-gray-500); } [data-theme="dark"] .login-footer, [data-theme="dark"] .login-footer a { color: var(--pk-gray-500); } /* Note count badge */ [data-theme="dark"] .note-count-badge { color: var(--pk-orange); } /* Vendor name in tables */ [data-theme="dark"] .vendor-name, [data-theme="dark"] .vendor-cell, [data-theme="dark"] .vendor-code { color: var(--pk-gray-500); } /* ================================ * ELEVATION — CARDS, TABLES, TABS, MODALS * Sync with light-mode elevation changes (Phase 1 UI redesign) * ================================ */ /* Cards — dark mode border */ [data-theme="dark"] .card { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .card:hover { border-color: rgba(255, 255, 255, 0.1); } /* Modal backdrop — darker in dark mode */ [data-theme="dark"] .confirm-modal-backdrop, [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.6); } /* Segmented tabs — dark container */ [data-theme="dark"] .status-tabs, [data-theme="dark"] .status-pills { background: var(--pk-gray-100); } [data-theme="dark"] .status-tab.active, [data-theme="dark"] .status-pill.active { background: var(--pk-gray-200); box-shadow: var(--shadow-xs); } /* Table header — no background in dark mode either */ [data-theme="dark"] .data-table th { background: transparent; border-bottom-color: var(--pk-gray-200); color: var(--pk-gray-500); } /* Table cell borders */ [data-theme="dark"] .data-table td { border-bottom-color: var(--pk-gray-100); } /* Table row hover */ [data-theme="dark"] .data-table tbody tr:hover { background: var(--pk-gray-50); } /* ================================ * THEME TRANSITION * Only active after data-theme is set (not on first paint) * ================================ */ html[data-theme] body, html[data-theme] .site-header, html[data-theme] .data-table, html[data-theme] .data-table th, html[data-theme] .data-table td, html[data-theme] .card, html[data-theme] .badge, html[data-theme] .status-badge, html[data-theme] .btn, html[data-theme] input:not([type="checkbox"]), html[data-theme] select, html[data-theme] textarea, html[data-theme] .nav-link, html[data-theme] .site-main, html[data-theme] .confirm-modal-dialog { transition: background-color 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out; } /* ================================ * TOGGLE BUTTON * ================================ */ .theme-toggle .theme-icon { font-size: var(--text-md); transition: transform var(--transition-fast); } .theme-toggle:hover .theme-icon { transform: rotate(15deg); } /* ================================ * TENANT LOGO THEME SWAP * The second only renders when a dark variant is configured * (FORWARDER_LOGO_DARK set) — see templates/base.html and * apps/portal/templates/portal/base.html. * ================================ */ .logo-img-dark { display: none; } html[data-theme="dark"] .logo-img-light:has(+ .logo-img-dark) { display: none; } html[data-theme="dark"] .logo-img-dark { display: inline; } /* ================================ * PRINT SAFEGUARD * Force light mode when printing * ================================ */ @media print { [data-theme="dark"] { --pk-white: #ffffff; --pk-surface-1: #ffffff; --pk-surface-2: #fafbfc; --pk-gray-50: #f9fafb; --pk-gray-100: #f3f4f6; --pk-gray-200: #e5e7eb; --pk-gray-700: #374151; --pk-gray-800: #1f2937; --pk-gray-900: #111827; --pk-slate-dark: #1f2629; --pk-slate-darker: #171b1e; } } /* ================================ * LIST PAGE PATTERN (Sep 2026) — filter card, stat tiles, row menu. * Surfaces use --pk-white, which flips with the theme; only the border * needs restating, the same value .card uses in dark. * ================================ */ [data-theme="dark"] .control-strip--card, [data-theme="dark"] .stat-tile, [data-theme="dark"] .row-menu-panel { border-color: rgba(255, 255, 255, 0.06); }