/*
* palettes.css — swappable Bootstrap + PP table color tokens
*
* Toggle: no data-palette on = default palette (teal, first visit)
* data-palette="pp-alt" = alternate Zephyr-inspired palette (dark mode OK)
* data-palette="default" = accessible high-contrast (light only)
* Persist: localStorage pp.palette.v1 — values default | pp-alt | experimental
* (experimental slot = accessible; legacy modern → experimental)
*
* Load after Bootstrap CDN, before productiveparks-new.css
*/
/* =========================================================
DEFAULT — default theme with teal primary / action (2026-07)
Applied when data-palette is absent on
========================================================= */
:root {
/* Brand & semantic */
--bs-primary: #0d9488;
--bs-primary-rgb: 13, 148, 136;
--bs-secondary: #64748b;
--bs-secondary-rgb: 100, 116, 139;
--bs-success: var(--bs-primary);
--bs-success-rgb: var(--bs-primary-rgb);
--bs-warning: #f4bd61;
--bs-warning-rgb: 244, 189, 97;
--bs-danger: #ef4444;
--bs-danger-rgb: 239, 68, 68;
--bs-info: #0bb5d4;
--bs-info-rgb: 11, 181, 212;
/* Neutrals / base */
--bs-light: #f8fafc;
--bs-light-rgb: 248, 250, 252;
--bs-dark: #1e293b;
--bs-dark-rgb: 30, 41, 59;
--bs-white: #fff;
--bs-black: #0d1117;
--bs-body-bg: #fff;
--bs-body-color: #1e293b;
--bs-secondary-color: #64748b;
--bs-tertiary-color: #94a3b8;
--bs-emphasis-color: #0f172a;
--bs-border-color: rgba(108, 117, 125, 0.35);
--bs-border-color-translucent: var(--bs-border-color);
--bs-tertiary-bg: #f8fafc;
/* Shape — Bootstrap radius ladder (2026-07; was CDN 0.375 / 0.25 / 0.5) */
--bs-border-radius-sm: 0.375rem;
--bs-border-radius: 0.5rem;
--bs-border-radius-lg: 0.75rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-nav-pills-border-radius: var(--bs-border-radius);
--bs-btn-border-radius: var(--bs-border-radius-pill);
/* Gray scale (tables, tertiary surfaces) */
--bs-gray-100: #f1f5f9;
--bs-gray-200: #e2e8f0;
--bs-gray-300: #cbd5e1;
--bs-gray-400: #94a3b8;
--bs-gray-500: #64748b;
--bs-gray-600: #475569;
--bs-gray-700: #334155;
--bs-gray-800: #1e293b;
--bs-gray-900: #0f172a;
/* Links — Bootstrap 5.3 uses --bs-link-color-rgb for color */
--bs-link-color: var(--bs-primary);
--bs-link-color-rgb: var(--bs-primary-rgb);
--bs-link-hover-color: var(--pp-primary-hover);
--bs-link-hover-color-rgb: 15, 118, 110;
/* Accordion */
--bs-accordion-active-bg: color-mix(in oklab, var(--bs-primary) 10%, #fff);
--bs-accordion-active-color: var(--bs-body-color);
/* Button hover helpers */
--pp-primary-hover: #0f766e;
--pp-warning-hover: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
/* Form switch — green "on" track (distinct from teal primary action) */
--pp-form-switch-checked-bg: #2fb380;
--pp-form-switch-checked-border: #2fb380;
--pp-form-switch-checked-rgb: 47, 179, 128;
/* Derived subtle tokens (badges, alerts) */
--bs-primary-text-emphasis: #115e59;
--bs-primary-bg-subtle: #ecfdf5;
--bs-primary-border-subtle: #99f6e4;
--bs-success-text-emphasis: var(--bs-primary-text-emphasis);
--bs-success-bg-subtle: var(--bs-primary-bg-subtle);
--bs-success-border-subtle: var(--bs-primary-border-subtle);
--bs-warning-text-emphasis: #856404;
--bs-warning-bg-subtle: #fff8e8;
--bs-warning-border-subtle: #f0d48a;
--bs-danger-text-emphasis: #b91c1c;
--bs-danger-bg-subtle: #fef2f2;
--bs-danger-border-subtle: #fca5a5;
--bs-info-text-emphasis: #0e7490;
--bs-info-bg-subtle: #ecfeff;
--bs-info-border-subtle: #67e8f9;
/* PP DataTable — light mode */
--pp-table-stripe-bg: var(--bs-gray-200);
--pp-table-row-bg: var(--bs-body-bg);
--pp-table-header-bg: var(--bs-gray-100);
--pp-table-sorted-header-color: var(--bs-emphasis-color);
--pp-table-sort-active-color: var(--bs-emphasis-color);
--pp-table-sort-inactive-color: var(--bs-secondary);
/* PP DataTable cell links — body text + primary/link underline; hover promotes text to link color */
--pp-dt-cell-link-color: var(--bs-body-color);
--pp-dt-cell-link-underline-color: var(--bs-link-color);
--pp-dt-cell-link-hover-color: var(--bs-link-color);
--pp-dt-cell-link-hover-underline-color: var(--bs-link-color);
/* Single-destination pointer-table row hover (select-staff Outstanding, Expiring, etc.) */
--pp-dt-row-hot-hover-bg: color-mix(in oklab, var(--bs-primary) 22%, var(--bs-body-bg));
/* PP semantic row backgrounds — light mode (stronger tints for scanability) */
--pp-row-status-completed-bg: #d4edda;
--pp-row-status-in-process-bg: #d0e7ff;
--pp-row-status-in-process-bg-odd: #dceeff;
--pp-row-status-danger-bg: #fce8eb;
--pp-row-status-in-process-emphasis: #2563a8;
--pp-row-status-in-process-accent: #5b9bd5;
--pp-row-status-in-process-link: #1d4ed8;
--pp-row-status-completed-link: #047857;
--pp-row-status-danger-link: #b91c1c;
/* Administrator dashboard — weekly schedule cells & Out/Up chips (solid semantic fills) */
--pp-dashboard-open-bg: var(--bs-warning);
--pp-dashboard-open-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-open-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-open-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-open-color: var(--bs-emphasis-color);
--pp-dashboard-open-icon-color: var(--bs-warning);
--pp-dashboard-upcoming-bg: var(--bs-warning);
--pp-dashboard-upcoming-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-upcoming-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-upcoming-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-upcoming-color: var(--bs-emphasis-color);
--pp-dashboard-upcoming-icon-color: var(--bs-warning);
--pp-dashboard-completed-bg: var(--bs-success);
--pp-dashboard-completed-border: color-mix(in oklab, var(--bs-success) 85%, #000 15%);
--pp-dashboard-completed-hover-bg: color-mix(in oklab, var(--bs-success) 78%, #000 22%);
--pp-dashboard-completed-hover-border: color-mix(in oklab, var(--bs-success) 70%, #000 30%);
--pp-dashboard-empty-bg: var(--bs-body-bg);
--pp-dashboard-empty-hover-bg: var(--bs-gray-100);
/* Accordion chrome */
--pp-accordion-offline-bg: var(--bs-warning-bg-subtle);
--pp-accordion-offline-color: var(--bs-warning-text-emphasis);
/* Report Engine — section / grand total band borders */
--pp-report-total-border-color: var(--bs-emphasis-color);
/* Task priority badges — P1 red + white dot; P2 amber; P3–P5 gray ramp (P5 hollow) */
--pp-priority-1-bg: var(--bs-danger);
--pp-priority-1-fg: var(--bs-white);
--pp-priority-1-dot: var(--bs-white);
--pp-priority-1-text: var(--bs-danger);
--pp-priority-chip-bg: var(--bs-light);
--pp-priority-chip-fg: var(--bs-body-color);
--pp-priority-2-dot: var(--bs-warning);
--pp-priority-2-border: color-mix(in oklab, var(--bs-warning) 55%, var(--bs-border-color));
--pp-priority-2-bg: var(--bs-warning);
--pp-priority-2-fg: var(--bs-emphasis-color);
--pp-priority-2-text: var(--bs-warning);
--pp-priority-3-dot: var(--bs-gray-600);
--pp-priority-3-border: var(--bs-border-color);
--pp-priority-3-bg: var(--bs-gray-600);
--pp-priority-3-fg: var(--bs-white);
--pp-priority-3-text: var(--bs-gray-600);
--pp-priority-3-surface: var(--pp-priority-chip-bg);
--pp-priority-4-dot: var(--bs-gray-400);
--pp-priority-4-border: var(--bs-border-color);
--pp-priority-4-bg: var(--bs-gray-400);
--pp-priority-4-fg: var(--bs-white);
--pp-priority-4-text: var(--bs-gray-400);
--pp-priority-4-surface: var(--pp-priority-chip-bg);
--pp-priority-5-dot: var(--bs-gray-400);
--pp-priority-5-border: var(--bs-border-color);
--pp-priority-5-bg: var(--bs-secondary);
--pp-priority-5-fg: var(--bs-white);
--pp-priority-5-text: var(--bs-gray-400);
/* Offcanvas flyout headers — theme primary; main navbar is 20% darker */
--pp-nav-header-bg: var(--bs-primary);
--pp-nav-header-bg-rgb: var(--bs-primary-rgb);
--pp-navbar-bg: color-mix(in oklab, var(--bs-primary) 80%, #000 20%);
/* Guest login shell + card (auth blades) — black base + nav-color accent */
--pp-login-shell-base: #050a14;
--pp-login-shell-bg: var(--pp-login-shell-base);
--pp-login-panel-bg: var(--pp-nav-header-bg);
--pp-login-panel-border: color-mix(in oklab, var(--pp-nav-header-bg) 40%, transparent);
--pp-login-btn-bg: var(--pp-nav-header-bg);
--pp-login-btn-border: color-mix(in oklab, var(--pp-nav-header-bg) 85%, #000 15%);
--pp-login-btn-color: var(--bs-white);
--pp-login-accent-bg: var(--pp-nav-header-bg);
/* Legacy mobile nav collapse panel */
--pp-mobile-nav-collapse-bg: var(--pp-nav-header-bg);
}
/* =========================================================
PP-ALT — Zephyr-inspired alternate palette (2026-07)
Applied when data-palette="pp-alt" on (dark mode OK)
========================================================= */
:root[data-palette="pp-alt"] {
/* Brand & semantic — Bootswatch Zephyr donors */
--bs-primary: #3459e6;
--bs-primary-rgb: 52, 89, 230;
--bs-secondary: #6c757d;
--bs-secondary-rgb: 108, 117, 125;
--bs-success: #2fb380;
--bs-success-rgb: 47, 179, 128;
--bs-warning: #f4bd61;
--bs-warning-rgb: 244, 189, 97;
--bs-danger: #da292e;
--bs-danger-rgb: 218, 41, 46;
--bs-info: #287bb5;
--bs-info-rgb: 40, 123, 181;
/* Neutrals / base — Bootstrap gray ramp */
--bs-light: #f8f9fa;
--bs-light-rgb: 248, 249, 250;
--bs-dark: #212529;
--bs-dark-rgb: 33, 37, 41;
--bs-white: #fff;
--bs-black: #000;
--bs-body-bg: #fff;
--bs-body-color: #495057;
--bs-secondary-color: #6c757d;
--bs-tertiary-color: #adb5bd;
--bs-emphasis-color: #212529;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: var(--bs-border-color);
--bs-tertiary-bg: #f8f9fa;
/* Shape — same ladder as default palette */
--bs-border-radius-sm: 0.375rem;
--bs-border-radius: 0.5rem;
--bs-border-radius-lg: 0.75rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-nav-pills-border-radius: var(--bs-border-radius);
--bs-btn-border-radius: var(--bs-border-radius-pill);
/* Gray scale */
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
/* Links */
--bs-link-color: var(--bs-primary);
--bs-link-color-rgb: var(--bs-primary-rgb);
--bs-link-hover-color: var(--pp-primary-hover);
--bs-link-hover-color-rgb: 42, 71, 184;
/* Accordion */
--bs-accordion-active-bg: color-mix(in oklab, var(--bs-primary) 10%, #fff);
--bs-accordion-active-color: var(--bs-body-color);
/* Button hover helpers */
--pp-primary-hover: #2a47b8;
--pp-warning-hover: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
/* Form switch — green "on" track */
--pp-form-switch-checked-bg: var(--bs-success);
--pp-form-switch-checked-border: var(--bs-success);
--pp-form-switch-checked-rgb: var(--bs-success-rgb);
/* Derived subtle tokens */
--bs-primary-text-emphasis: #1e3a8a;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #a5b4fc;
--bs-success-text-emphasis: #1a7a55;
--bs-success-bg-subtle: #e8f8f0;
--bs-success-border-subtle: #8fd4b4;
--bs-warning-text-emphasis: #856404;
--bs-warning-bg-subtle: #fff8e8;
--bs-warning-border-subtle: #f0d48a;
--bs-danger-text-emphasis: #a61e2e;
--bs-danger-bg-subtle: #f8e8e9;
--bs-danger-border-subtle: #e4a0a3;
--bs-info-text-emphasis: #1f5f8b;
--bs-info-bg-subtle: #e8f3fa;
--bs-info-border-subtle: #8bb8d9;
/* PP DataTable — light mode */
--pp-table-stripe-bg: var(--bs-gray-200);
--pp-table-row-bg: var(--bs-body-bg);
--pp-table-header-bg: var(--bs-gray-100);
--pp-table-sorted-header-color: var(--bs-emphasis-color);
--pp-table-sort-active-color: var(--bs-emphasis-color);
--pp-table-sort-inactive-color: var(--bs-secondary);
/* PP DataTable cell links */
--pp-dt-cell-link-color: var(--bs-body-color);
--pp-dt-cell-link-underline-color: var(--bs-link-color);
--pp-dt-cell-link-hover-color: var(--bs-link-color);
--pp-dt-cell-link-hover-underline-color: var(--bs-link-color);
/* Single-destination pointer-table row hover */
--pp-dt-row-hot-hover-bg: color-mix(in oklab, var(--bs-primary) 22%, var(--bs-body-bg));
/* PP semantic row backgrounds */
--pp-row-status-completed-bg: #d8f3e7;
--pp-row-status-in-process-bg: #d6e4ff;
--pp-row-status-in-process-bg-odd: #e3ecff;
--pp-row-status-danger-bg: #f8e8e9;
--pp-row-status-in-process-emphasis: #2a47b8;
--pp-row-status-in-process-accent: #5b7fe6;
--pp-row-status-in-process-link: #1e40af;
--pp-row-status-completed-link: #1a7a55;
--pp-row-status-danger-link: #a61e2e;
/* Administrator dashboard — weekly schedule cells & Out/Up chips */
--pp-dashboard-open-bg: var(--bs-warning);
--pp-dashboard-open-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-open-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-open-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-open-color: var(--bs-emphasis-color);
--pp-dashboard-open-icon-color: var(--bs-warning);
--pp-dashboard-upcoming-bg: var(--bs-warning);
--pp-dashboard-upcoming-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-upcoming-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-upcoming-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-upcoming-color: var(--bs-emphasis-color);
--pp-dashboard-upcoming-icon-color: var(--bs-warning);
--pp-dashboard-completed-bg: var(--bs-success);
--pp-dashboard-completed-border: color-mix(in oklab, var(--bs-success) 85%, #000 15%);
--pp-dashboard-completed-hover-bg: color-mix(in oklab, var(--bs-success) 78%, #000 22%);
--pp-dashboard-completed-hover-border: color-mix(in oklab, var(--bs-success) 70%, #000 30%);
--pp-dashboard-empty-bg: var(--bs-body-bg);
--pp-dashboard-empty-hover-bg: var(--bs-gray-100);
/* Accordion chrome */
--pp-accordion-offline-bg: var(--bs-warning-bg-subtle);
--pp-accordion-offline-color: var(--bs-warning-text-emphasis);
/* Report Engine */
--pp-report-total-border-color: var(--bs-emphasis-color);
/* Task priority badges */
--pp-priority-1-bg: var(--bs-danger);
--pp-priority-1-fg: var(--bs-white);
--pp-priority-1-dot: var(--bs-white);
--pp-priority-1-text: var(--bs-danger);
--pp-priority-chip-bg: var(--bs-light);
--pp-priority-chip-fg: var(--bs-body-color);
--pp-priority-2-dot: var(--bs-warning);
--pp-priority-2-border: color-mix(in oklab, var(--bs-warning) 55%, var(--bs-border-color));
--pp-priority-2-bg: var(--bs-warning);
--pp-priority-2-fg: var(--bs-emphasis-color);
--pp-priority-2-text: var(--bs-warning);
--pp-priority-3-dot: var(--bs-gray-600);
--pp-priority-3-border: var(--bs-border-color);
--pp-priority-3-bg: var(--bs-gray-600);
--pp-priority-3-fg: var(--bs-white);
--pp-priority-3-text: var(--bs-gray-600);
--pp-priority-3-surface: var(--pp-priority-chip-bg);
--pp-priority-4-dot: var(--bs-gray-400);
--pp-priority-4-border: var(--bs-border-color);
--pp-priority-4-bg: var(--bs-gray-400);
--pp-priority-4-fg: var(--bs-white);
--pp-priority-4-text: var(--bs-gray-400);
--pp-priority-4-surface: var(--pp-priority-chip-bg);
--pp-priority-5-dot: var(--bs-gray-400);
--pp-priority-5-border: var(--bs-border-color);
--pp-priority-5-bg: var(--bs-secondary);
--pp-priority-5-fg: var(--bs-white);
--pp-priority-5-text: var(--bs-gray-400);
/* Offcanvas + navbar chrome */
--pp-nav-header-bg: var(--bs-primary);
--pp-nav-header-bg-rgb: var(--bs-primary-rgb);
--pp-navbar-bg: color-mix(in oklab, var(--bs-primary) 80%, #000 20%);
/* Guest login shell */
--pp-login-shell-base: #050a14;
--pp-login-shell-bg: var(--pp-login-shell-base);
--pp-login-panel-bg: var(--pp-nav-header-bg);
--pp-login-panel-border: color-mix(in oklab, var(--pp-nav-header-bg) 40%, transparent);
--pp-login-btn-bg: var(--pp-nav-header-bg);
--pp-login-btn-border: color-mix(in oklab, var(--pp-nav-header-bg) 85%, #000 15%);
--pp-login-btn-color: var(--bs-white);
--pp-login-accent-bg: var(--pp-nav-header-bg);
--pp-mobile-nav-collapse-bg: var(--pp-nav-header-bg);
}
/* =========================================================
ACCESSIBLE — WCAG 2.1 AA high-contrast light (2026-07)
Applied when data-palette="default" on (light only)
========================================================= */
:root[data-palette="default"] {
/* Brand & semantic — dark fills for 4.5:1+ on white */
--bs-primary: #0047b3;
--bs-primary-rgb: 0, 71, 179;
--bs-secondary: #404040;
--bs-secondary-rgb: 64, 64, 64;
--bs-success: var(--bs-primary);
--bs-success-rgb: var(--bs-primary-rgb);
--bs-warning: #9a6700;
--bs-warning-rgb: 154, 103, 0;
--bs-danger: #b00020;
--bs-danger-rgb: 176, 0, 32;
--bs-info: #005a9c;
--bs-info-rgb: 0, 90, 156;
/* Neutrals / base — near-black body on white (AAA) */
--bs-light: #f5f5f5;
--bs-light-rgb: 245, 245, 245;
--bs-dark: #1a1a1a;
--bs-dark-rgb: 26, 26, 26;
--bs-white: #fff;
--bs-black: #000;
--bs-body-bg: #fff;
--bs-body-color: #1a1a1a;
--bs-secondary-color: #404040;
--bs-tertiary-color: #525252;
--bs-emphasis-color: #000;
--bs-border-color: #767676;
--bs-border-color-translucent: var(--bs-border-color);
--bs-tertiary-bg: #f5f5f5;
/* Shape — same ladder as default palette */
--bs-border-radius-sm: 0.375rem;
--bs-border-radius: 0.5rem;
--bs-border-radius-lg: 0.75rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-nav-pills-border-radius: var(--bs-border-radius);
--bs-btn-border-radius: var(--bs-border-radius-pill);
/* Gray scale — stronger table/border contrast */
--bs-gray-100: #f5f5f5;
--bs-gray-200: #e0e0e0;
--bs-gray-300: #767676;
--bs-gray-400: #525252;
--bs-gray-500: #404040;
--bs-gray-600: #333333;
--bs-gray-700: #262626;
--bs-gray-800: #1a1a1a;
--bs-gray-900: #000;
/* Links — dark blue + underline (layout.css); rgb required for Bootstrap */
--bs-link-color: #0047b3;
--bs-link-color-rgb: 0, 71, 179;
--bs-link-hover-color: #003380;
--bs-link-hover-color-rgb: 0, 51, 128;
/* Accordion */
--bs-accordion-active-bg: #e8f0fe;
--bs-accordion-active-color: var(--bs-body-color);
/* Button hover helpers */
--pp-primary-hover: #003380;
--pp-warning-hover: #7a5200;
/* Form switch — green "on" track (WCAG-friendly, distinct from blue primary) */
--pp-form-switch-checked-bg: #1a7a55;
--pp-form-switch-checked-border: #1a7a55;
--pp-form-switch-checked-rgb: 26, 122, 85;
/* Derived subtle tokens (alerts, badges) — text emphasis meets 4.5:1 on subtle bg */
--bs-primary-text-emphasis: #003380;
--bs-primary-bg-subtle: #e8f0fe;
--bs-primary-border-subtle: #0047b3;
--bs-success-text-emphasis: var(--bs-primary-text-emphasis);
--bs-success-bg-subtle: var(--bs-primary-bg-subtle);
--bs-success-border-subtle: var(--bs-primary-border-subtle);
--bs-warning-text-emphasis: #664d03;
--bs-warning-bg-subtle: #fff3cd;
--bs-warning-border-subtle: #9a6700;
--bs-danger-text-emphasis: #b00020;
--bs-danger-bg-subtle: #fce8eb;
--bs-danger-border-subtle: #b00020;
--bs-info-text-emphasis: #005a9c;
--bs-info-bg-subtle: #e8f4fc;
--bs-info-border-subtle: #005a9c;
/* PP DataTable — light mode */
--pp-table-stripe-bg: var(--bs-gray-200);
--pp-table-row-bg: var(--bs-body-bg);
--pp-table-header-bg: var(--bs-gray-100);
--pp-table-sorted-header-color: var(--bs-emphasis-color);
--pp-table-sort-active-color: var(--bs-emphasis-color);
--pp-table-sort-inactive-color: var(--bs-secondary);
/* PP DataTable cell links — body text + primary/link underline; hover promotes text to link color */
--pp-dt-cell-link-color: var(--bs-body-color);
--pp-dt-cell-link-underline-color: var(--bs-link-color);
--pp-dt-cell-link-hover-color: var(--bs-link-color);
--pp-dt-cell-link-hover-underline-color: var(--bs-link-color);
/* Single-destination pointer-table row hover */
--pp-dt-row-hot-hover-bg: color-mix(in oklab, var(--bs-primary) 22%, var(--bs-body-bg));
/* PP semantic row backgrounds — accessible palette (stronger fills; left border in layout.css) */
--pp-row-status-completed-bg: #c8e6d0;
--pp-row-status-in-process-bg: #c7ddfc;
--pp-row-status-in-process-bg-odd: #d4e8ff;
--pp-row-status-danger-bg: #fce8eb;
--pp-row-status-in-process-emphasis: #1e40af;
--pp-row-status-in-process-accent: #2563eb;
--pp-row-status-in-process-link: #1d4ed8;
--pp-row-status-completed-link: #0d652d;
--pp-row-status-danger-link: #b00020;
/* Administrator dashboard — solid warning fills (accessible palette) */
--pp-dashboard-open-bg: var(--bs-warning);
--pp-dashboard-open-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-open-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-open-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-open-color: var(--bs-white);
--pp-dashboard-open-icon-color: var(--bs-warning);
--pp-dashboard-upcoming-bg: var(--bs-warning);
--pp-dashboard-upcoming-border: color-mix(in oklab, var(--bs-warning) 85%, #000 15%);
--pp-dashboard-upcoming-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000 10%);
--pp-dashboard-upcoming-hover-border: color-mix(in oklab, var(--bs-warning) 75%, #000 25%);
--pp-dashboard-upcoming-color: var(--bs-white);
--pp-dashboard-upcoming-icon-color: var(--bs-warning);
--pp-dashboard-completed-bg: var(--bs-success);
--pp-dashboard-completed-border: #0a4d22;
--pp-dashboard-completed-hover-bg: #0a4d22;
--pp-dashboard-completed-hover-border: #000;
--pp-dashboard-empty-bg: var(--bs-body-bg);
--pp-dashboard-empty-hover-bg: var(--bs-gray-100);
/* Accordion chrome */
--pp-accordion-offline-bg: var(--bs-warning-bg-subtle);
--pp-accordion-offline-color: var(--bs-warning-text-emphasis);
/* Report Engine — section / grand total band borders */
--pp-report-total-border-color: var(--bs-emphasis-color);
/* Task priority badges — distinct high-contrast pairs */
--pp-priority-1-bg: var(--bs-danger);
--pp-priority-1-fg: var(--bs-white);
--pp-priority-1-dot: var(--bs-white);
--pp-priority-1-text: var(--bs-danger);
--pp-priority-chip-bg: var(--bs-light);
--pp-priority-chip-fg: var(--bs-body-color);
--pp-priority-2-dot: var(--bs-warning);
--pp-priority-2-border: var(--bs-warning);
--pp-priority-2-bg: #ffcc00;
--pp-priority-2-fg: #1a1a1a;
--pp-priority-2-text: var(--bs-warning);
--pp-priority-3-dot: var(--bs-gray-600);
--pp-priority-3-border: var(--bs-gray-600);
--pp-priority-3-bg: var(--bs-gray-600);
--pp-priority-3-fg: var(--bs-white);
--pp-priority-3-text: var(--bs-gray-600);
--pp-priority-3-surface: var(--pp-priority-chip-bg);
--pp-priority-4-dot: var(--bs-gray-500);
--pp-priority-4-border: var(--bs-gray-500);
--pp-priority-4-bg: var(--bs-gray-500);
--pp-priority-4-fg: var(--bs-white);
--pp-priority-4-text: var(--bs-gray-500);
--pp-priority-4-surface: var(--pp-priority-chip-bg);
--pp-priority-5-dot: var(--bs-gray-400);
--pp-priority-5-border: var(--bs-gray-600);
--pp-priority-5-bg: var(--bs-body-bg);
--pp-priority-5-fg: var(--bs-body-color);
--pp-priority-5-text: var(--bs-gray-600);
/* Offcanvas flyout headers — theme primary; main navbar is 20% darker */
--pp-nav-header-bg: var(--bs-primary);
--pp-nav-header-bg-rgb: var(--bs-primary-rgb);
--pp-navbar-bg: color-mix(in oklab, var(--bs-primary) 80%, #000 20%);
/* Guest login shell + card (auth blades) — black base + nav-color accent */
--pp-login-shell-base: #050a14;
--pp-login-shell-bg: var(--pp-login-shell-base);
--pp-login-panel-bg: var(--pp-nav-header-bg);
--pp-login-panel-border: #767676;
--pp-login-btn-bg: var(--pp-nav-header-bg);
--pp-login-btn-border: #fff;
--pp-login-btn-color: var(--bs-white);
--pp-login-accent-bg: var(--pp-nav-header-bg);
/* Legacy mobile nav collapse panel */
--pp-mobile-nav-collapse-bg: var(--pp-nav-header-bg);
}