:root {
  color-scheme: dark;
  --color-primary: #4da3ff;
  --color-primary-hover: #277ed8;
  --color-secondary: #22bcf2;
  --color-accent: #22bcf2;
  --color-active: var(--color-primary);
  --color-active-hover: var(--color-primary-hover);
  --color-active-border: var(--color-active-hover);
  --color-active-ring: var(--color-active);
  --color-background: #0f1720;
  --surface-rgb: 18, 26, 36;
  --surface-alt-rgb: 25, 35, 48;
  --surface-raised-rgb: 31, 43, 58;
  --foreground-alpha: 0.96;
  --foreground-alpha-alt: 0.94;
  --foreground-alpha-raised: 0.98;
  --table-header-rgb: 22, 34, 49;
  --table-header-alpha: 0.96;
  --table-row-a-alpha: 0.92;
  --table-row-b-alpha: 0.94;
  --color-surface: rgba(var(--surface-rgb), var(--foreground-alpha));
  --color-surface-alt: rgba(var(--surface-alt-rgb), var(--foreground-alpha-alt));
  --color-surface-raised: rgba(var(--surface-raised-rgb), var(--foreground-alpha-raised));
  --button-fill-mix: 34%;
  --button-hover-fill-mix: 44%;
  --button-primary-fill-mix: 42%;
  --button-active-fill-mix: 73%;
  --button-click-fill-mix: 83%;
  --button-ghost-fill-mix: 22%;
  --control-fill-mix: 12%;
  --control-hover-fill-mix: 20%;
  --button-primary-text: #ffffff;
  --button-active-text: #ffffff;
  --color-border: rgba(170, 189, 210, 0.18);
  --color-border-strong: rgba(170, 189, 210, 0.32);
  --color-text: #eef4f8;
  --color-text-muted: #9fb0c3;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --table-header-bg: rgba(var(--table-header-rgb), var(--table-header-alpha));
  --table-row-a: rgba(var(--surface-rgb), var(--table-row-a-alpha));
  --table-row-b: rgba(var(--surface-alt-rgb), var(--table-row-b-alpha));
  --table-row-hover: rgba(77, 163, 255, 0.16);
  --button-radius: 8px;
  --card-radius: 8px;
  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.26);
  --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.18);
  --dashboard-padding: 16px;
  --dashboard-gap: 12px;
  --dashboard-max-width: none;
  --font-scale: 1;
  --dashboard-font-size: calc(14px * var(--font-scale));
  --dashboard-font-size-sm: calc(12px * var(--font-scale));
  --dashboard-font-size-lg: calc(20px * var(--font-scale));
  --dashboard-font-size-xl: calc(30px * var(--font-scale));
  --dashboard-background-image: none;
  --dashboard-background-dim: 0.62;
  --dashboard-background-blur: 0px;
  --dashboard-overlay-rgb: 8, 13, 18;
  --table-cell-padding-y: 8px;
  --table-cell-padding-x: 12px;
  --control-height: 36px;
  --bg: var(--color-background);
  --bg-2: #131d29;
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-alt);
  --panel-3: var(--color-surface-raised);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --accent-2: var(--color-secondary);
  --accent-strong: var(--color-primary-hover);
  --accent-soft: rgba(77, 163, 255, 0.14);
  --success: var(--color-success);
  --good: var(--color-success);
  --ok: var(--color-success);
  --warning: var(--color-warning);
  --warn: var(--color-warning);
  --gold: var(--color-warning);
  --danger: var(--color-danger);
  --bad: var(--color-danger);
  --shadow: var(--shadow-card);
  --radius: var(--card-radius);
  --font-ui: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-primary: #005fbd;
  --color-primary-hover: #004996;
  --color-secondary: #007aa8;
  --color-accent: #007aa8;
  --color-active: var(--color-primary);
  --color-active-hover: var(--color-primary-hover);
  --color-active-border: var(--color-active-hover);
  --color-active-ring: var(--color-active);
  --color-background: #e8eef5;
  --surface-rgb: 255, 255, 255;
  --surface-alt-rgb: 244, 247, 251;
  --surface-raised-rgb: 255, 255, 255;
  --table-header-rgb: 220, 229, 239;
  --color-border: rgba(21, 39, 61, 0.14);
  --color-border-strong: rgba(21, 39, 61, 0.26);
  --color-text: #122033;
  --color-text-muted: #52657a;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b42318;
  --table-header-bg: rgba(var(--table-header-rgb), var(--table-header-alpha));
  --table-row-a: rgba(var(--surface-rgb), var(--table-row-a-alpha));
  --table-row-b: rgba(var(--surface-alt-rgb), var(--table-row-b-alpha));
  --table-row-hover: #dfedff;
  --dashboard-background-dim: 0.1;
  --dashboard-overlay-rgb: 232, 238, 245;
  --button-primary-text: #122033;
  --button-active-text: #ffffff;
  --bg: var(--color-background);
  --bg-2: #f6f9fc;
}

/* Brand accents stay bright; selected controls use a deeper blue for white text. */
:root[data-palette="default"] {
  --color-active: #075eaf;
  --color-active-hover: #004a96;
  --color-active-border: #2e92ec;
  --color-active-ring: #22bcf2;
}

:root[data-theme="light"][data-palette="default"] {
  --color-active: #005fbd;
  --color-active-hover: #004996;
  --color-active-border: #005fbd;
  --color-active-ring: #007aa8;
  --accent-soft: rgba(0, 95, 189, 0.12);
}

/* Module styles share these aliases, including pages loaded after this file. */
:root[data-theme][data-palette] {
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-alt);
  --panel-3: var(--color-surface-raised);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --accent-2: var(--color-secondary);
  --accent-strong: var(--color-primary-hover);
}

:root[data-contrast="high"] {
  --color-border: rgba(255, 255, 255, 0.42);
  --color-border-strong: rgba(255, 255, 255, 0.66);
  --color-text: #ffffff;
  --color-text-muted: #d7e2ee;
  --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.38);
  --table-row-hover: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-raised));
}

:root[data-theme="light"][data-contrast="high"] {
  --color-border: rgba(0, 0, 0, 0.34);
  --color-border-strong: rgba(0, 0, 0, 0.52);
  --color-text: #020617;
  --color-text-muted: #111827;
  --button-active-text: #ffffff;
  --shadow-card: 0 18px 42px rgba(20, 37, 56, 0.18);
  --table-row-hover: color-mix(in srgb, var(--color-primary) 24%, var(--color-surface-raised));
}

:root[data-palette="clinical-blue"] {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #0d9488;
  --color-accent: #f59e0b;
  --accent-soft: rgba(37, 99, 235, 0.15);
  --table-row-hover: rgba(37, 99, 235, 0.16);
}

:root[data-theme="light"][data-palette="clinical-blue"] {
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-secondary: #0f766e;
  --color-accent: #b45309;
  --table-row-hover: #dce9ff;
}

:root[data-palette="field-ops-dark"] {
  --color-primary: #14b8a6;
  --color-primary-hover: #0f9488;
  --color-secondary: #65a30d;
  --color-accent: #f59e0b;
  --color-background: #0a1116;
  --surface-rgb: 12, 20, 27;
  --surface-alt-rgb: 20, 31, 40;
  --surface-raised-rgb: 28, 41, 52;
  --table-header-rgb: 16, 32, 43;
}

:root[data-theme="light"][data-palette="field-ops-dark"] {
  --color-primary: #0f766e;
  --color-primary-hover: #115e59;
  --color-secondary: #4d7c0f;
  --color-accent: #b45309;
  --color-background: #e7efe9;
  --table-row-hover: #dcefe9;
}

:root[data-palette="slate-steel"] {
  --color-primary: #64748b;
  --color-primary-hover: #475569;
  --color-secondary: #0891b2;
  --color-accent: #d97706;
  --color-background: #101419;
  --surface-rgb: 23, 29, 37;
  --surface-alt-rgb: 31, 39, 49;
  --surface-raised-rgb: 38, 48, 60;
  --table-header-rgb: 27, 37, 49;
  --table-row-hover: rgba(8, 145, 178, 0.14);
}

:root[data-theme="light"][data-palette="slate-steel"] {
  --color-primary: #475569;
  --color-primary-hover: #334155;
  --color-secondary: #0e7490;
  --color-accent: #b45309;
  --color-background: #e7ebf0;
  --table-row-hover: #e0edf2;
}

:root[data-palette="high-contrast"] {
  --color-primary: #2dd4bf;
  --color-primary-hover: #5eead4;
  --color-secondary: #93c5fd;
  --color-accent: #fde047;
  --color-background: #05070a;
  --surface-rgb: 12, 17, 23;
  --surface-alt-rgb: 17, 24, 39;
  --surface-raised-rgb: 24, 33, 47;
  --color-border: rgba(255, 255, 255, 0.32);
  --color-border-strong: rgba(255, 255, 255, 0.5);
  --color-text: #ffffff;
  --color-text-muted: #d4dde8;
  --table-header-rgb: 17, 24, 39;
  --table-row-hover: rgba(45, 212, 191, 0.24);
}

:root[data-theme="light"][data-palette="high-contrast"] {
  --color-primary: #064e3b;
  --color-primary-hover: #022c22;
  --color-secondary: #1e3a8a;
  --color-accent: #854d0e;
  --color-background: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-alt-rgb: 242, 244, 247;
  --surface-raised-rgb: 255, 255, 255;
  --color-border: rgba(0, 0, 0, 0.3);
  --color-border-strong: rgba(0, 0, 0, 0.48);
  --color-text: #020617;
  --color-text-muted: #1f2937;
  --table-header-rgb: 216, 222, 232;
  --table-row-hover: #d1fae5;
}

:root[data-palette="orange"] {
  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-secondary: #14b8a6;
  --color-accent: #facc15;
  --table-row-hover: rgba(249, 115, 22, 0.18);
}

:root[data-theme="light"][data-palette="orange"] {
  --color-primary: #c2410c;
  --color-primary-hover: #9a3412;
  --color-secondary: #0f766e;
  --color-accent: #b45309;
  --table-row-hover: rgba(251, 146, 60, 0.22);
}

:root[data-palette="red"] {
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-secondary: #f97316;
  --color-accent: #fbbf24;
  --table-row-hover: rgba(220, 38, 38, 0.18);
}

:root[data-theme="light"][data-palette="red"] {
  --color-primary: #b91c1c;
  --color-primary-hover: #991b1b;
  --color-secondary: #c2410c;
  --color-accent: #b45309;
  --table-row-hover: rgba(248, 113, 113, 0.2);
}

:root[data-palette="purple"] {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-secondary: #06b6d4;
  --color-accent: #f59e0b;
  --table-row-hover: rgba(139, 92, 246, 0.18);
}

:root[data-theme="light"][data-palette="purple"] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-secondary: #0891b2;
  --color-accent: #b45309;
  --table-row-hover: rgba(167, 139, 250, 0.22);
}

:root[data-palette="pink"] {
  --color-primary: #db2777;
  --color-primary-hover: #be185d;
  --color-secondary: #8b5cf6;
  --color-accent: #f59e0b;
  --table-row-hover: rgba(219, 39, 119, 0.18);
}

:root[data-theme="light"][data-palette="pink"] {
  --color-primary: #be185d;
  --color-primary-hover: #9d174d;
  --color-secondary: #7c3aed;
  --color-accent: #b45309;
  --table-row-hover: rgba(244, 114, 182, 0.22);
}

:root[data-palette="cyan"] {
  --color-primary: #06b6d4;
  --color-primary-hover: #0891b2;
  --color-secondary: #2563eb;
  --color-accent: #f59e0b;
  --table-row-hover: rgba(6, 182, 212, 0.18);
}

:root[data-theme="light"][data-palette="cyan"] {
  --color-primary: #0891b2;
  --color-primary-hover: #0e7490;
  --color-secondary: #1d4ed8;
  --color-accent: #b45309;
  --table-row-hover: rgba(103, 232, 249, 0.24);
}

:root[data-palette="turquoise"] {
  --color-primary: #14b8a6;
  --color-primary-hover: #0d9488;
  --color-secondary: #38bdf8;
  --color-accent: #f59e0b;
  --table-row-hover: rgba(20, 184, 166, 0.18);
}

:root[data-theme="light"][data-palette="turquoise"] {
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-secondary: #0284c7;
  --color-accent: #b45309;
  --table-row-hover: rgba(45, 212, 191, 0.24);
}

:root[data-palette="knicks"] {
  --color-primary: #006bb6;
  --color-primary-hover: #00538f;
  --color-secondary: #f58426;
  --color-accent: #bec0c2;
  --color-active: #f58426;
  --color-active-hover: #d45d00;
  --color-active-border: #f58426;
  --color-active-ring: #f58426;
  --table-row-hover: rgba(0, 107, 182, 0.18);
}

:root[data-theme="light"][data-palette="knicks"] {
  --color-primary: #006bb6;
  --color-primary-hover: #004f8a;
  --color-secondary: #f58426;
  --color-accent: #6b7280;
  --color-active: #f58426;
  --color-active-hover: #c65300;
  --color-active-border: #f58426;
  --color-active-ring: #f58426;
  --table-row-hover: rgba(0, 107, 182, 0.18);
}

:root[data-palette="bulls"] {
  --color-primary: #ce1141;
  --color-primary-hover: #9f1239;
  --color-secondary: #111111;
  --color-accent: #f3f4f6;
  --color-active: #111111;
  --color-active-hover: #000000;
  --color-active-border: #ce1141;
  --color-active-ring: #ce1141;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(206, 17, 65, 0.18);
}

:root[data-theme="light"][data-palette="bulls"] {
  --color-primary: #ce1141;
  --color-primary-hover: #991b1b;
  --color-secondary: #111111;
  --color-accent: #6b7280;
  --color-active: #111111;
  --color-active-hover: #000000;
  --color-active-border: #ce1141;
  --color-active-ring: #ce1141;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(206, 17, 65, 0.16);
}

:root[data-palette="lakers"] {
  --color-primary: #552583;
  --color-primary-hover: #3f1768;
  --color-secondary: #fdb927;
  --color-accent: #ffffff;
  --color-active: #fdb927;
  --color-active-hover: #d99a00;
  --color-active-border: #fdb927;
  --color-active-ring: #fdb927;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(85, 37, 131, 0.18);
}

:root[data-theme="light"][data-palette="lakers"] {
  --color-primary: #552583;
  --color-primary-hover: #3f1768;
  --color-secondary: #fdb927;
  --color-accent: #6b7280;
  --color-active: #fdb927;
  --color-active-hover: #c98700;
  --color-active-border: #fdb927;
  --color-active-ring: #fdb927;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(85, 37, 131, 0.16);
}

:root[data-palette="cowboys"] {
  --color-primary: #869397;
  --color-primary-hover: #6f7b80;
  --color-secondary: #041e42;
  --color-accent: #003594;
  --color-active: #041e42;
  --color-active-hover: #001a38;
  --color-active-border: #869397;
  --color-active-ring: #869397;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(134, 147, 151, 0.18);
}

:root[data-theme="light"][data-palette="cowboys"] {
  --color-primary: #7b878c;
  --color-primary-hover: #5f6b71;
  --color-secondary: #041e42;
  --color-accent: #003594;
  --color-active: #041e42;
  --color-active-hover: #001a38;
  --color-active-border: #7b878c;
  --color-active-ring: #7b878c;
  --button-active-text: #ffffff;
  --table-row-hover: rgba(134, 147, 151, 0.18);
}

:root[data-palette="cowboys"] {
  --button-primary-text: #ffffff;
}

:root[data-density="compact"] {
  --dashboard-padding: 12px;
  --dashboard-gap: 8px;
  --table-cell-padding-y: 7px;
  --table-cell-padding-x: 10px;
  --control-height: 34px;
}

html {
  background: var(--color-background);
}

body.zb-dashboard-system {
  background: var(--color-background) !important;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--dashboard-font-size);
}

:root[data-theme="light"] body.zb-dashboard-system {
  background: var(--color-background) !important;
  color: var(--color-text) !important;
}

body.zb-dashboard-system::before,
body.zb-dashboard-system::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.zb-dashboard-system::before {
  z-index: 0;
  display: none;
  background-image: var(--dashboard-background-image);
  background-size: cover;
  background-position: center;
  filter: blur(var(--dashboard-background-blur));
  transform: scale(1.02);
}

body.zb-dashboard-system::after {
  z-index: 0;
  display: none;
  background: rgba(var(--dashboard-overlay-rgb), var(--dashboard-background-dim));
}

body.zb-dashboard-system.has-dashboard-background::before,
body.zb-dashboard-system.has-dashboard-background::after {
  display: block;
}

body.zb-dashboard-system.has-dashboard-background {
  background: transparent !important;
}

:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background {
  background: transparent !important;
}

body.zb-dashboard-system.has-dashboard-background .app-shell,
body.zb-dashboard-system.has-dashboard-background .app-shell-home,
body.zb-dashboard-system.has-dashboard-background .main-shell,
body.zb-dashboard-system.has-dashboard-background .view-panel,
body.zb-dashboard-system.has-dashboard-background .settings-view,
body.zb-dashboard-system.has-dashboard-background .home-view,
body.zb-dashboard-system.has-dashboard-background .settings-grid,
body.zb-dashboard-system.has-dashboard-background .home-grid,
body.zb-dashboard-system.has-dashboard-background .main-view,
body.zb-dashboard-system.has-dashboard-background .b2b-view,
body.zb-dashboard-system.has-dashboard-background .workspace,
body.zb-dashboard-system.has-dashboard-background .route-workspace,
body.zb-dashboard-system.has-dashboard-background .stats-layout,
body.zb-dashboard-system.has-dashboard-background .expedited-layout,
body.zb-dashboard-system.has-dashboard-background .toolbar,
body.zb-dashboard-system.has-dashboard-background #settingsView {
  background: transparent !important;
}

body.zb-dashboard-system > *:not(.zb-shell-tabs) {
  position: relative;
  z-index: 1;
}

body.zb-dashboard-system .app-shell {
  width: calc(100vw - 16px);
  max-width: none;
  height: calc(100vh - var(--zb-shell-height, 0px));
  height: calc(100dvh - var(--zb-shell-height, 0px));
  margin: 0 auto;
  padding: 8px 0 10px;
  min-height: 0;
  gap: var(--dashboard-gap);
}

body.zb-dashboard-system .app-shell-home {
  height: calc(100vh - var(--zb-shell-height, 0px));
  height: calc(100dvh - var(--zb-shell-height, 0px));
  padding: 16px;
}

body.zb-dashboard-system .app-shell-home.settings-mode {
  background: transparent !important;
}

body.zb-dashboard-system .app-shell-home .topbar {
  padding-top: 0;
}

body.zb-dashboard-system .topbar {
  gap: var(--dashboard-gap);
  padding: 8px 2px 4px;
}

body.zb-dashboard-system .topbar h1,
body.zb-dashboard-system .home-title-card,
body.zb-dashboard-system h1,
body.zb-dashboard-system h2,
body.zb-dashboard-system h3 {
  letter-spacing: 0 !important;
}

body.zb-dashboard-system .topbar h1 {
  margin: 2px 0 4px;
  font-size: var(--dashboard-font-size-xl);
  line-height: 1.08;
  font-weight: 760;
}

body.zb-dashboard-system .topbar .eyebrow {
  margin: 0;
  color: var(--color-primary);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
}

body.zb-dashboard-system .topbar .subtle:empty {
  display: none;
}

body.zb-dashboard-system.allocation-dashboard .topbar,
body.zb-dashboard-system.active-restocks-dashboard .topbar {
  margin-bottom: 14px;
}

body.zb-dashboard-system.allocation-dashboard .toolbar {
  margin-bottom: 16px;
}

body.zb-dashboard-system.active-restocks-dashboard .metric-grid {
  margin-top: 2px;
  margin-bottom: 12px;
}

body.zb-dashboard-system .topbar-right,
body.zb-dashboard-system .topbar-actions,
body.zb-dashboard-system .panel-actions,
body.zb-dashboard-system .table-actions,
body.zb-dashboard-system .detail-actions,
body.zb-dashboard-system .card-actions {
  gap: 8px;
}

body.zb-dashboard-system .toolbar,
body.zb-dashboard-system .view-tabs,
body.zb-dashboard-system .view-toggle,
body.zb-dashboard-system .mode-toggle,
body.zb-dashboard-system .queue-mode-toggle {
  gap: 8px;
}

body.zb-dashboard-system .panel,
body.zb-dashboard-system .metric-card,
body.zb-dashboard-system .metric,
body.zb-dashboard-system .section-card,
body.zb-dashboard-system .table-panel,
body.zb-dashboard-system .table-card,
body.zb-dashboard-system .workspace-card,
body.zb-dashboard-system .sidebar-card,
body.zb-dashboard-system .settings-card,
body.zb-dashboard-system .login-card,
body.zb-dashboard-system .landing-card,
body.zb-dashboard-system .mini-card,
body.zb-dashboard-system .rule-modal,
body.zb-dashboard-system .filter-panel,
body.zb-dashboard-system .column-menu,
body.zb-dashboard-system .column-filter-menu,
body.zb-dashboard-system .control-drop,
body.zb-dashboard-system .detail-panel,
body.zb-dashboard-system .stack-panel,
body.zb-dashboard-system .queue-panel,
body.zb-dashboard-system .stats-toolbar,
body.zb-dashboard-system .b2b-sidebar,
body.zb-dashboard-system .b2b-detail,
body.zb-dashboard-system .b2b-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
}

body.zb-dashboard-system .metric-card,
body.zb-dashboard-system .metric {
  min-height: 74px;
  padding: 10px 14px;
  display: grid;
  align-content: space-between;
  gap: 6px;
}

body.zb-dashboard-system .column-toggle {
  min-width: 0;
}

body.zb-dashboard-system .column-toggle[data-column-item] {
  display: grid;
  grid-template-columns: auto auto minmax(84px, 1fr);
  align-items: center;
}

body.zb-dashboard-system .column-label-input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--color-border-strong) 72%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--color-primary) var(--control-fill-mix), var(--color-surface-alt));
  color: var(--color-text);
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.15;
}

body.zb-dashboard-system .column-label-input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-active) 48%, transparent);
  outline-offset: 1px;
}

body.zb-dashboard-system .metric-card span,
body.zb-dashboard-system .metric-card .metric-label,
body.zb-dashboard-system .metric-label {
  display: block;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.18;
  font-weight: 780;
  text-transform: uppercase;
}

body.zb-dashboard-system .metric-card span,
body.zb-dashboard-system .metric-card .metric-label,
body.zb-dashboard-system .metric-label,
body.zb-dashboard-system .label,
body.zb-dashboard-system .eyebrow,
body.zb-dashboard-system .field span,
body.zb-dashboard-system .scan-label,
body.zb-dashboard-system th {
  color: var(--color-text-muted);
  letter-spacing: 0;
}

body.zb-dashboard-system .metric-card strong,
body.zb-dashboard-system .metric strong {
  display: block;
  margin-top: 4px;
  color: var(--color-text);
  font-size: calc(28px * var(--font-scale));
  line-height: 1;
}

body.zb-dashboard-system .panel,
body.zb-dashboard-system .table-panel,
body.zb-dashboard-system .detail-panel,
body.zb-dashboard-system .stack-panel,
body.zb-dashboard-system .queue-panel {
  min-height: 0;
  overflow: hidden;
}

body.zb-dashboard-system .panel-head,
body.zb-dashboard-system .detail-header,
body.zb-dashboard-system .section-head {
  gap: 12px;
  padding: 14px 16px 10px;
}

body.zb-dashboard-system .panel h2,
body.zb-dashboard-system .panel-head h2,
body.zb-dashboard-system .detail-header h2,
body.zb-dashboard-system .section-card h3 {
  color: var(--color-text);
  font-size: var(--dashboard-font-size-lg);
  line-height: 1.2;
}

body.zb-dashboard-system .muted,
body.zb-dashboard-system .subtle,
body.zb-dashboard-system .stamp,
body.zb-dashboard-system .feedback,
body.zb-dashboard-system .hint,
body.zb-dashboard-system .compact,
body.zb-dashboard-system .module-meta,
body.zb-dashboard-system .panel-note {
  color: var(--color-text-muted);
}

body.zb-dashboard-system input,
body.zb-dashboard-system select,
body.zb-dashboard-system textarea,
body.zb-dashboard-system .input,
body.zb-dashboard-system .scan-input,
body.zb-dashboard-system .search-input,
body.zb-dashboard-system .panel-search-input,
body.zb-dashboard-system .mini-select,
body.zb-dashboard-system .route-select {
  min-height: var(--control-height);
  font-size: var(--dashboard-font-size);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 80%),
    color-mix(in srgb, var(--color-primary) var(--control-fill-mix), var(--color-surface-raised));
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--button-radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

body.zb-dashboard-system select,
body.zb-dashboard-system .mini-select,
body.zb-dashboard-system .route-select {
  accent-color: var(--color-primary);
}

body.zb-dashboard-system option {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

/* Driver view tabs and filters share the controls' baseline. Labels occupy
   their own row above it; the checkbox keeps its native compact footprint. */
body.zb-dashboard-system .drivers-toolbar {
  align-items: flex-end;
}

body.zb-dashboard-system .drivers-toolbar .tab,
body.zb-dashboard-system .drivers-toolbar .field input,
body.zb-dashboard-system .drivers-toolbar .field select,
body.zb-dashboard-system .drivers-toolbar .toggle-box {
  box-sizing: border-box;
  height: var(--control-height);
  min-height: var(--control-height);
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--dashboard-font-size);
}

body.zb-dashboard-system .drivers-toolbar .toggle-box input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

body.zb-dashboard-system input:hover,
body.zb-dashboard-system select:hover,
body.zb-dashboard-system textarea:hover,
body.zb-dashboard-system .input:hover,
body.zb-dashboard-system .scan-input:hover,
body.zb-dashboard-system .search-input:hover,
body.zb-dashboard-system .panel-search-input:hover,
body.zb-dashboard-system .mini-select:hover,
body.zb-dashboard-system .route-select:hover {
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 80%),
    color-mix(in srgb, var(--color-primary) var(--control-hover-fill-mix), var(--color-surface-raised));
}

body.zb-dashboard-system input:focus,
body.zb-dashboard-system select:focus,
body.zb-dashboard-system textarea:focus,
body.zb-dashboard-system .input:focus,
body.zb-dashboard-system .scan-input:focus,
body.zb-dashboard-system .search-input:focus,
body.zb-dashboard-system .panel-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 12%, transparent), transparent 80%),
    color-mix(in srgb, var(--color-primary) var(--control-hover-fill-mix), var(--color-surface-raised));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

body.zb-dashboard-system input::placeholder,
body.zb-dashboard-system textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

body.zb-dashboard-system .panel-search-tools {
  min-height: 0;
}

body.zb-dashboard-system .panel-search-input,
body.zb-dashboard-system .search-input,
body.zb-dashboard-system .scan-input-small {
  max-height: var(--control-height);
}

body.zb-dashboard-system .btn,
body.zb-dashboard-system .pill-btn,
body.zb-dashboard-system .nav-btn,
body.zb-dashboard-system .filter-button,
body.zb-dashboard-system .filter-action,
body.zb-dashboard-system .icon-button,
body.zb-dashboard-system .password-toggle,
body.zb-dashboard-system .date-picker-button,
body.zb-dashboard-system .b2b-account-button,
body.zb-dashboard-system .b2b-case-card,
body.zb-dashboard-system .zb-shell-signout {
  min-height: var(--control-height);
  padding: 7px 14px;
  font-size: var(--dashboard-font-size);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--button-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 78%),
    color-mix(in srgb, var(--color-primary) var(--button-fill-mix), var(--color-surface-alt));
  color: var(--color-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  font-weight: 700;
  letter-spacing: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

body.zb-dashboard-system .btn:hover,
body.zb-dashboard-system .pill-btn:hover,
body.zb-dashboard-system .nav-btn:hover,
body.zb-dashboard-system .filter-button:hover,
body.zb-dashboard-system .filter-action:hover,
body.zb-dashboard-system .icon-button:hover,
body.zb-dashboard-system .b2b-account-button:hover,
body.zb-dashboard-system .b2b-case-card:hover,
body.zb-dashboard-system .zb-shell-signout:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 12%, transparent), transparent 78%),
    color-mix(in srgb, var(--color-primary) var(--button-hover-fill-mix), var(--color-surface-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent), var(--shadow-soft);
}

body.zb-dashboard-system .btn:disabled,
body.zb-dashboard-system .pill-btn:disabled,
body.zb-dashboard-system .nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

body.zb-dashboard-system .btn-primary,
body.zb-dashboard-system .btn.btn-primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 74%),
    color-mix(in srgb, var(--color-primary) var(--button-primary-fill-mix), var(--color-surface-raised));
  border-color: color-mix(in srgb, var(--color-primary) 56%, var(--color-border));
  color: var(--button-primary-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent), var(--shadow-soft);
}

body.zb-dashboard-system .btn-primary:hover,
body.zb-dashboard-system .btn.btn-primary:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 72%),
    color-mix(in srgb, var(--color-primary-hover) var(--button-click-fill-mix), var(--color-surface-raised));
  border-color: var(--color-primary-hover);
  color: var(--button-primary-text);
}

body.zb-dashboard-system .btn-ghost,
body.zb-dashboard-system .btn.btn-ghost {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 7%, transparent), transparent 80%),
    color-mix(in srgb, var(--color-primary) var(--button-ghost-fill-mix), var(--color-surface-alt));
  color: var(--color-text);
}

body.zb-dashboard-system .btn.is-clicked,
body.zb-dashboard-system .pill-btn.is-clicked,
body.zb-dashboard-system .nav-btn.is-clicked,
body.zb-dashboard-system .filter-button.is-clicked,
body.zb-dashboard-system .filter-action.is-clicked,
body.zb-dashboard-system .icon-button.is-clicked,
body.zb-dashboard-system .zb-shell-signout.is-clicked {
  animation: zb-button-click 620ms ease;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-active) var(--button-click-fill-mix), var(--color-active-hover));
  color: var(--button-active-text);
  border-color: var(--color-active-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent), var(--shadow-soft);
}

@keyframes zb-button-click {
  0% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(1px) scale(0.985);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

body.zb-dashboard-system .view-toggle,
body.zb-dashboard-system .mode-toggle,
body.zb-dashboard-system .view-tabs,
body.zb-dashboard-system .queue-mode-toggle,
body.zb-dashboard-system .theme-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

body.zb-dashboard-system .view-toggle .btn,
body.zb-dashboard-system .mode-toggle .btn,
body.zb-dashboard-system .view-tabs .btn,
body.zb-dashboard-system .queue-mode-toggle .btn,
body.zb-dashboard-system .theme-toggle-row .pill-btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--dashboard-font-size);
}

body.zb-dashboard-system .zb-shell-tab,
body.zb-dashboard-system .zb-shell-brand {
  font-size: var(--dashboard-font-size);
}

body.zb-dashboard-system .view-toggle .btn.is-active,
body.zb-dashboard-system .view-toggle .btn.active,
body.zb-dashboard-system .mode-toggle .btn.is-active,
body.zb-dashboard-system .mode-toggle .btn.active,
body.zb-dashboard-system .view-tabs .btn.is-active,
body.zb-dashboard-system .view-tabs .btn.active,
body.zb-dashboard-system .queue-mode-toggle .btn.is-active,
body.zb-dashboard-system .btn[aria-pressed="true"],
body.zb-dashboard-system .btn[aria-current="page"],
body.zb-dashboard-system .b2b-account-button.active,
body.zb-dashboard-system .b2b-case-card.active,
body.zb-dashboard-system .metric-filter.active,
body.zb-dashboard-system .metric-card.is-active,
body.zb-dashboard-system .pill-btn.is-active,
body.zb-dashboard-system .nav-btn.is-active,
body.zb-dashboard-system .location-tile.active,
body.zb-dashboard-system .account-card.is-active,
body.zb-dashboard-system .queue-card.is-active,
body.zb-dashboard-system .vehicle-card.is-active,
body.zb-dashboard-system .driver-card.is-active {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 76%),
    color-mix(in srgb, var(--color-active) var(--button-active-fill-mix), var(--color-active-hover));
  border-color: color-mix(in srgb, var(--color-active-border) 70%, var(--color-active));
  color: var(--button-active-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 16%, transparent), 0 0 0 2px color-mix(in srgb, var(--color-active-ring) 24%, transparent);
}

body.zb-dashboard-system .table-wrap,
body.zb-dashboard-system .planning-table-wrap,
body.zb-dashboard-system .b2b-table-wrap,
body.zb-dashboard-system .driver-table-wrap,
body.zb-dashboard-system .tv-table-wrap {
  min-height: 0;
  max-width: 100%;
  overflow: auto;
  background: var(--color-surface);
  scrollbar-gutter: stable;
}

body.zb-dashboard-system table,
body.zb-dashboard-system .planning-table,
body.zb-dashboard-system .b2b-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
}

body.zb-dashboard-system #resultsTable,
body.zb-dashboard-system #logisticsTable {
  table-layout: auto;
}

body.zb-dashboard-system thead th,
body.zb-dashboard-system .planning-table th,
body.zb-dashboard-system .table-header {
  position: sticky;
  top: 0;
  z-index: 5;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 76%),
    var(--table-header-bg);
  background-clip: padding-box;
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-strong);
  box-shadow: 0 1px 0 var(--color-border), 0 10px 18px rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: nowrap;
}

body.zb-dashboard-system th[data-column-header],
body.zb-dashboard-system th[data-key] {
  position: sticky;
}

body.zb-dashboard-system .column-resizer {
  position: absolute;
  top: 50%;
  right: -5px;
  z-index: 8;
  width: 10px;
  height: 1.35em;
  transform: translateY(-50%);
  cursor: col-resize;
  touch-action: none;
}

body.zb-dashboard-system .column-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 46%, var(--color-border-strong));
  opacity: 0.58;
}

body.zb-dashboard-system .column-resizer:hover::after,
body.zb-dashboard-system .column-resizer.is-resizing::after {
  opacity: 1;
  background: var(--color-active);
}

body.zb-dashboard-system.is-column-resizing,
body.zb-dashboard-system.is-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.zb-dashboard-system #resultsTable th,
body.zb-dashboard-system #resultsTable td {
  padding: 4px 7px;
  font-size: calc(11.25px * var(--font-scale));
  line-height: 1.2;
}

body.zb-dashboard-system #resultsTable th,
body.zb-dashboard-system #logisticsTable th {
  box-sizing: border-box;
  min-width: 0;
}

body.zb-dashboard-system #resultsTable th {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.zb-dashboard-system #resultsTable td,
body.zb-dashboard-system #logisticsTable td {
  box-sizing: border-box;
  overflow: visible;
  text-overflow: clip;
}

body.zb-dashboard-system #resultsTable td.cell-description,
body.zb-dashboard-system #logisticsTable td.cell-description {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.zb-dashboard-system #resultsTable td,
body.zb-dashboard-system #logisticsTable td {
  white-space: nowrap;
}

body.zb-dashboard-system #resultsTable td > *,
body.zb-dashboard-system #logisticsTable td > * {
  max-width: 100%;
}

body.zb-dashboard-system #resultsTable td > * {
  max-width: none;
}

body.zb-dashboard-system #resultsTable .copy-cell {
  width: 1%;
  white-space: nowrap;
}

body.zb-dashboard-system #resultsTable .copy-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: none;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: calc(10.75px * var(--font-scale));
  line-height: 1.05;
  white-space: nowrap;
}

body.zb-dashboard-system #resultsTable .sort-button {
  font-size: calc(10.5px * var(--font-scale));
  letter-spacing: 0.04em;
  min-width: 0;
  max-width: 100%;
}

body.zb-dashboard-system #resultsTable .header-title,
body.zb-dashboard-system #logisticsTable .th-content {
  font-size: calc(10.5px * var(--font-scale));
  letter-spacing: 0.04em;
  min-width: 0;
  max-width: 100%;
}

body.zb-dashboard-system #resultsTable .header-filter-wrap,
body.zb-dashboard-system #logisticsTable .th-content {
  min-width: 0;
  max-width: 100%;
  gap: 4px;
}

body.zb-dashboard-system #resultsTable .header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.zb-dashboard-system #logisticsTable .th-content > span:first-child {
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

body.zb-dashboard-system #resultsTable .filter-button,
body.zb-dashboard-system #logisticsTable .header-filter-button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 6px;
  font-size: calc(9px * var(--font-scale));
  line-height: 1;
}

body.zb-dashboard-system table .badge,
body.zb-dashboard-system table .pill,
body.zb-dashboard-system table .mini-pill,
body.zb-dashboard-system table .case-status-badge,
body.zb-dashboard-system table .status-badge,
body.zb-dashboard-system table .contained-pill,
body.zb-dashboard-system table .status-pill {
  min-height: 20px;
  max-width: 100%;
  padding: 2px 6px;
  font-size: calc(10.5px * var(--font-scale));
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.zb-dashboard-system #overviewView .queue-panel .panel-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

body.zb-dashboard-system #overviewView .queue-panel .queue-mode-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

body.zb-dashboard-system th,
body.zb-dashboard-system td,
body.zb-dashboard-system .planning-table th,
body.zb-dashboard-system .planning-table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: calc(13px * var(--font-scale));
  vertical-align: middle;
  line-height: 1.35;
}

body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):nth-child(odd) > td,
body.zb-dashboard-system .planning-table tbody tr:nth-child(odd) > td {
  background: var(--table-row-a);
}

body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):nth-child(even) > td,
body.zb-dashboard-system .planning-table tbody tr:nth-child(even) > td {
  background: var(--table-row-b);
}

body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):hover > td,
body.zb-dashboard-system .planning-table tbody tr:hover > td {
  background: var(--table-row-hover);
}

body.zb-dashboard-system tbody tr.row-pending > td,
body.zb-dashboard-system tbody tr.missing > td,
body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-missing > td {
  background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));
  color: var(--color-text);
}

body.zb-dashboard-system tbody tr.row-complete > td,
body.zb-dashboard-system tbody tr.available > td,
body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-complete > td {
  background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));
  color: var(--color-text);
}

body.zb-dashboard-system tbody tr.row-manual > td,
body.zb-dashboard-system tbody tr.from-kit > td {
  background: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));
  color: var(--color-text);
}

body.zb-dashboard-system .badge,
body.zb-dashboard-system .pill,
body.zb-dashboard-system .mini-pill,
body.zb-dashboard-system .type-chip,
body.zb-dashboard-system .meta-chip,
body.zb-dashboard-system .case-status-badge,
body.zb-dashboard-system .status-badge,
body.zb-dashboard-system .status-chip,
body.zb-dashboard-system .contained-pill,
body.zb-dashboard-system .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: 4px 9px;
  font-size: var(--dashboard-font-size-sm);
  font-weight: 750;
  letter-spacing: 0;
}

body.zb-dashboard-system .status-pill.live,
body.zb-dashboard-system .badge.good,
body.zb-dashboard-system .badge.ok,
body.zb-dashboard-system .pill.ok,
body.zb-dashboard-system .pill.good,
body.zb-dashboard-system .case-status-badge.good,
body.zb-dashboard-system .contained-pill.available {
  background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  color: var(--color-text);
}

body.zb-dashboard-system .badge.warn,
body.zb-dashboard-system .pill.warn,
body.zb-dashboard-system .case-status-badge.warn,
body.zb-dashboard-system .contained-pill.from-kit {
  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
  color: var(--color-text);
}

body.zb-dashboard-system .status-pill.error,
body.zb-dashboard-system .badge.danger,
body.zb-dashboard-system .pill.danger,
body.zb-dashboard-system .case-status-badge.danger,
body.zb-dashboard-system .contained-pill.missing {
  background: color-mix(in srgb, var(--color-danger) 22%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
  color: var(--color-text);
}

body.zb-dashboard-system .badge.info,
body.zb-dashboard-system .badge.accent,
body.zb-dashboard-system .pill.info,
body.zb-dashboard-system .case-status-badge.info {
  background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-secondary) 45%, var(--color-border));
  color: var(--color-text);
}

body.zb-dashboard-system .empty-state,
body.zb-dashboard-system .empty-cell {
  color: var(--color-text-muted);
}

body.zb-dashboard-system .metrics-grid,
body.zb-dashboard-system .metric-grid,
body.zb-dashboard-system .metric-row {
  gap: var(--dashboard-gap);
}

body.zb-dashboard-system .workspace,
body.zb-dashboard-system .main-grid,
body.zb-dashboard-system .route-workspace,
body.zb-dashboard-system .stats-layout,
body.zb-dashboard-system .expedited-layout {
  min-height: 0;
}

body.zb-dashboard-system .zb-shell-tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body.zb-dashboard-system .zb-shell-tab {
  border-radius: var(--button-radius);
  color: var(--color-text-muted);
}

body.zb-dashboard-system .zb-shell-tab:hover,
body.zb-dashboard-system .zb-shell-tab.is-active {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 76%),
    color-mix(in srgb, var(--color-active) var(--button-active-fill-mix), var(--color-active-hover));
  border-color: color-mix(in srgb, var(--color-active-border) 70%, var(--color-active));
  color: var(--button-active-text);
}

body.zb-dashboard-system .b2b-account-button span,
body.zb-dashboard-system .b2b-case-card span,
body.zb-dashboard-system .b2b-case-card small {
  color: var(--color-text-muted);
}

body.zb-dashboard-system .b2b-account-button.active span,
body.zb-dashboard-system .b2b-account-button:hover span,
body.zb-dashboard-system .b2b-case-card.active span,
body.zb-dashboard-system .b2b-case-card.active small,
body.zb-dashboard-system .b2b-case-card:hover span,
body.zb-dashboard-system .b2b-case-card:hover small {
  color: color-mix(in srgb, var(--button-active-text) 78%, transparent);
}

body.zb-dashboard-system .b2b-account-button::after {
  color: color-mix(in srgb, var(--color-active) 72%, var(--color-text-muted));
}

body.zb-dashboard-system .b2b-account-button.active::after,
body.zb-dashboard-system .b2b-account-button:hover::after {
  color: var(--button-active-text);
}

body.zb-dashboard-system .zb-shell-role {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--color-active-border) 56%, var(--color-border));
  border-radius: var(--button-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 76%),
    color-mix(in srgb, var(--color-active) 74%, var(--color-active-hover));
  color: var(--button-active-text);
  font-size: var(--dashboard-font-size);
  font-weight: 850;
  letter-spacing: 0;
  padding: 4px 10px;
  white-space: nowrap;
}

:root[data-theme="light"] body.zb-dashboard-system .panel,
:root[data-theme="light"] body.zb-dashboard-system .metric-card,
:root[data-theme="light"] body.zb-dashboard-system .metric,
:root[data-theme="light"] body.zb-dashboard-system .section-card,
:root[data-theme="light"] body.zb-dashboard-system .table-panel,
:root[data-theme="light"] body.zb-dashboard-system .table-card,
:root[data-theme="light"] body.zb-dashboard-system .workspace-card,
:root[data-theme="light"] body.zb-dashboard-system .sidebar-card,
:root[data-theme="light"] body.zb-dashboard-system .settings-card,
:root[data-theme="light"] body.zb-dashboard-system .login-card,
:root[data-theme="light"] body.zb-dashboard-system .landing-card,
:root[data-theme="light"] body.zb-dashboard-system .mini-card,
:root[data-theme="light"] body.zb-dashboard-system .rule-modal,
:root[data-theme="light"] body.zb-dashboard-system .filter-panel,
:root[data-theme="light"] body.zb-dashboard-system .column-menu,
:root[data-theme="light"] body.zb-dashboard-system .column-filter-menu,
:root[data-theme="light"] body.zb-dashboard-system .control-drop,
:root[data-theme="light"] body.zb-dashboard-system .detail-panel,
:root[data-theme="light"] body.zb-dashboard-system .stack-panel,
:root[data-theme="light"] body.zb-dashboard-system .queue-panel,
:root[data-theme="light"] body.zb-dashboard-system .stats-toolbar,
:root[data-theme="light"] body.zb-dashboard-system .b2b-sidebar,
:root[data-theme="light"] body.zb-dashboard-system .b2b-detail,
:root[data-theme="light"] body.zb-dashboard-system .b2b-table-wrap {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .app-shell,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .app-shell-home,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .main-shell,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .home-view,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .settings-view,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .view-panel,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .main-view,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .b2b-view,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .workspace,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .route-workspace,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .settings-grid,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .home-grid,
:root[data-theme="light"] body.zb-dashboard-system.has-dashboard-background .toolbar {
  background: transparent !important;
  background-image: none !important;
}

:root[data-theme="light"] body.zb-dashboard-system input,
:root[data-theme="light"] body.zb-dashboard-system select,
:root[data-theme="light"] body.zb-dashboard-system textarea,
:root[data-theme="light"] body.zb-dashboard-system .input,
:root[data-theme="light"] body.zb-dashboard-system .scan-input,
:root[data-theme="light"] body.zb-dashboard-system .search-input,
:root[data-theme="light"] body.zb-dashboard-system .panel-search-input,
:root[data-theme="light"] body.zb-dashboard-system .mini-select,
:root[data-theme="light"] body.zb-dashboard-system .route-select {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 18%, transparent), transparent 80%),
    color-mix(in srgb, var(--color-primary) var(--control-fill-mix), var(--color-surface-raised)) !important;
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] body.zb-dashboard-system .btn,
:root[data-theme="light"] body.zb-dashboard-system .pill-btn,
:root[data-theme="light"] body.zb-dashboard-system .nav-btn,
:root[data-theme="light"] body.zb-dashboard-system .filter-button,
:root[data-theme="light"] body.zb-dashboard-system .filter-action,
:root[data-theme="light"] body.zb-dashboard-system .icon-button,
:root[data-theme="light"] body.zb-dashboard-system .password-toggle,
:root[data-theme="light"] body.zb-dashboard-system .date-picker-button,
:root[data-theme="light"] body.zb-dashboard-system .b2b-account-button,
:root[data-theme="light"] body.zb-dashboard-system .b2b-case-card,
:root[data-theme="light"] body.zb-dashboard-system .zb-shell-signout {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 78%),
    color-mix(in srgb, var(--color-primary) var(--button-fill-mix), var(--color-surface-alt)) !important;
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] body.zb-dashboard-system .btn-primary,
:root[data-theme="light"] body.zb-dashboard-system .btn.btn-primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 14%, transparent), transparent 74%),
    color-mix(in srgb, var(--color-primary) var(--button-primary-fill-mix), var(--color-surface-raised)) !important;
  border-color: color-mix(in srgb, var(--color-primary) 56%, var(--color-border)) !important;
  color: var(--button-primary-text) !important;
}

:root[data-theme="light"] body.zb-dashboard-system .btn.is-active,
:root[data-theme="light"] body.zb-dashboard-system .view-toggle .btn.active,
:root[data-theme="light"] body.zb-dashboard-system .mode-toggle .btn.active,
:root[data-theme="light"] body.zb-dashboard-system .view-tabs .btn.active,
:root[data-theme="light"] body.zb-dashboard-system .pill-btn.is-active,
:root[data-theme="light"] body.zb-dashboard-system .nav-btn.is-active,
:root[data-theme="light"] body.zb-dashboard-system .filter-button.active,
:root[data-theme="light"] body.zb-dashboard-system .btn[aria-pressed="true"],
:root[data-theme="light"] body.zb-dashboard-system .btn[aria-current="page"],
:root[data-theme="light"] body.zb-dashboard-system .b2b-account-button.active,
:root[data-theme="light"] body.zb-dashboard-system .b2b-case-card.active,
:root[data-theme="light"] body.zb-dashboard-system .metric-filter.active,
:root[data-theme="light"] body.zb-dashboard-system .metric-card.is-active,
:root[data-theme="light"] body.zb-dashboard-system .location-tile.active,
:root[data-theme="light"] body.zb-dashboard-system .account-card.is-active,
:root[data-theme="light"] body.zb-dashboard-system .queue-card.is-active,
:root[data-theme="light"] body.zb-dashboard-system .vehicle-card.is-active,
:root[data-theme="light"] body.zb-dashboard-system .driver-card.is-active {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 76%),
    color-mix(in srgb, var(--color-active) var(--button-active-fill-mix), var(--color-active-hover)) !important;
  border-color: color-mix(in srgb, var(--color-active-border) 70%, var(--color-active)) !important;
  color: var(--button-active-text) !important;
}

:root[data-theme="light"] body.zb-dashboard-system thead th,
:root[data-theme="light"] body.zb-dashboard-system .planning-table th,
:root[data-theme="light"] body.zb-dashboard-system .table-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 18%, transparent), transparent 76%),
    var(--table-header-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="light"] body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):nth-child(odd) > td,
:root[data-theme="light"] body.zb-dashboard-system .planning-table tbody tr:nth-child(odd) > td {
  background: var(--table-row-a) !important;
}

:root[data-theme="light"] body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):nth-child(even) > td,
:root[data-theme="light"] body.zb-dashboard-system .planning-table tbody tr:nth-child(even) > td {
  background: var(--table-row-b) !important;
}

:root[data-theme="light"] body.zb-dashboard-system tbody tr:not(.row-pending):not(.row-complete):not(.row-manual):not(.missing):not(.available):not(.from-kit):not(.expedited-row-missing):not(.expedited-row-complete):hover > td,
:root[data-theme="light"] body.zb-dashboard-system .planning-table tbody tr:hover > td {
  background: var(--table-row-hover) !important;
}

:root[data-theme="light"] body.zb-dashboard-system .btn.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .pill-btn.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .nav-btn.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .filter-button.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .filter-action.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .icon-button.is-clicked,
:root[data-theme="light"] body.zb-dashboard-system .zb-shell-signout.is-clicked {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-active) var(--button-click-fill-mix), var(--color-active-hover)) !important;
  color: var(--button-active-text) !important;
  border-color: var(--color-active-border) !important;
}

.visual-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.visual-settings-grid .field-wide,
.background-controls,
.background-preview-row,
.visual-settings-actions,
.visual-message {
  grid-column: 1 / -1;
}

.theme-toggle-row,
.density-toggle-row,
.background-actions,
.range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.visual-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.range-row label {
  flex: 1 1 220px;
  display: grid;
  gap: 6px;
}

.background-preview {
  width: 100%;
  min-height: 88px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--card-radius);
  background: var(--color-surface-alt);
  background-image: var(--dashboard-background-image);
  background-size: cover;
  background-position: center;
}

.visual-message {
  margin: 0;
  min-height: 20px;
  color: var(--color-text-muted);
}

.visual-message.error {
  color: var(--color-danger);
}

.visual-message.ok {
  color: var(--color-success);
}

.visual-message.warn {
  color: var(--color-warning);
}

@media (max-width: 1180px) {
  body.zb-dashboard-system .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.zb-dashboard-system .topbar-right,
  body.zb-dashboard-system .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body.zb-dashboard-system .metric-grid,
  body.zb-dashboard-system .metrics-grid,
  body.zb-dashboard-system .metric-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 780px) {
  body.zb-dashboard-system {
    overflow: auto;
  }

  body.zb-dashboard-system .app-shell {
    width: min(100%, calc(100vw - 12px));
    height: auto;
    min-height: calc(100dvh - var(--zb-shell-height, 0px) - 12px);
    margin: 6px auto;
  }

  body.zb-dashboard-system .topbar h1 {
    font-size: 24px;
  }

  body.zb-dashboard-system .panel-head,
  body.zb-dashboard-system .detail-header,
  body.zb-dashboard-system .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.zb-dashboard-system .panel-search-tools .panel-search-input {
    flex: 0 0 var(--control-height);
  }

  .visual-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Team palettes use recognizable colors with readable controls in both modes. */
:root[data-palette="bills"] { --color-primary:#4285de; --color-primary-hover:#00338d; --color-secondary:#c8102e; --color-accent:#f05265; }
:root[data-palette="lions"] { --color-primary:#379fd3; --color-primary-hover:#0076b6; --color-secondary:#a5acaf; --color-accent:#c3cbd0; }
:root[data-palette="buckeyes"] { --color-primary:#e6394a; --color-primary-hover:#ba0c2f; --color-secondary:#a7b1b7; --color-accent:#e4e6e7; }
:root[data-palette="colts"] { --color-primary:#598cce; --color-primary-hover:#013369; --color-secondary:#a5acaf; --color-accent:#e7edf4; }
:root[data-palette="wolverines"] { --color-primary:#588ed8; --color-primary-hover:#00274c; --color-secondary:#ffcb05; --color-accent:#ffcb05; }
:root[data-palette="spartans"] { --color-primary:#4aab7a; --color-primary-hover:#18453b; --color-secondary:#dce8e3; --color-accent:#a4d1bb; }
:root[data-theme="light"][data-palette="bills"] { --color-primary:#00338d; --color-primary-hover:#00256a; --color-secondary:#c8102e; --color-accent:#c8102e; }
:root[data-theme="light"][data-palette="lions"] { --color-primary:#00649b; --color-primary-hover:#004c76; --color-secondary:#596974; --color-accent:#0076b6; }
:root[data-theme="light"][data-palette="buckeyes"] { --color-primary:#ba0c2f; --color-primary-hover:#910925; --color-secondary:#5b6670; --color-accent:#ba0c2f; }
:root[data-theme="light"][data-palette="colts"] { --color-primary:#013369; --color-primary-hover:#01264e; --color-secondary:#52616c; --color-accent:#013369; }
:root[data-theme="light"][data-palette="wolverines"] { --color-primary:#00274c; --color-primary-hover:#001b35; --color-secondary:#b38b00; --color-accent:#9a7600; }
:root[data-theme="light"][data-palette="spartans"] { --color-primary:#18453b; --color-primary-hover:#103329; --color-secondary:#41645a; --color-accent:#18453b; }
:root[data-palette="bills"], :root[data-palette="lions"], :root[data-palette="buckeyes"], :root[data-palette="colts"], :root[data-palette="wolverines"], :root[data-palette="spartans"] {
  --accent-soft:color-mix(in srgb,var(--color-primary) 14%,transparent);
  --table-row-hover:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface-raised));
}
:root[data-theme="light"] {
  --surface-rgb:255,255,255; --surface-alt-rgb:244,247,251; --surface-raised-rgb:255,255,255;
  --table-header-rgb:220,229,239;
}
:root[data-theme="light"] body.zb-dashboard-system .btn.btn-primary {
  background:var(--color-primary) !important; color:#fff !important; border-color:var(--color-primary) !important;
}
:root[data-theme="light"] body.zb-dashboard-system .btn.btn-primary:hover { background:var(--color-primary-hover) !important; }

/* One compact title/action row across dashboards. Refresh is always rightmost. */
body.zb-dashboard-system .zb-view-header {
  display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center !important;
  justify-content:space-between; gap:8px 20px; margin:0 0 12px !important; padding:0 !important; min-height:44px;
}
body.zb-dashboard-system .zb-view-header > :first-child { min-width:0; flex:1 1 200px; }
body.zb-dashboard-system .zb-view-header h1 { margin:0 !important; font-size:calc(21px * var(--font-scale)) !important; line-height:1.25; }
body.zb-dashboard-system .zb-view-header .eyebrow { display:none; }
body.zb-dashboard-system .zb-view-header .subhead { margin:4px 0 0; font-size:var(--dashboard-font-size-sm); }
body.zb-dashboard-system .zb-view-actions {
  display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; justify-content:flex-end !important;
  gap:8px; margin-left:auto; flex:0 1 auto !important;
}
body.zb-dashboard-system .zb-view-actions .zb-main-refresh { order:100; min-height:var(--control-height); margin-left:4px; flex-shrink:0; }
body.zb-dashboard-system .zb-view-actions .status-stack { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body.zb-dashboard-system .zb-view-actions #loadStamp { max-width:270px; font-size:var(--dashboard-font-size-sm); }
body.zb-dashboard-system .zb-shell-brand { display:inline-flex; padding:0 4px; font-size:14px; letter-spacing:0.02em; }
body.zb-dashboard-system .zb-shell-tab { padding:0 8px; }
.zb-shell-menu { display:none; position:relative; }
.zb-shell-menu summary { list-style:none; display:flex; align-items:center; gap:12px; min-height:32px; padding:4px 10px; cursor:pointer; border:1px solid var(--color-border); border-radius:var(--button-radius); color:var(--color-text); background:var(--color-surface-alt); font-size:var(--dashboard-font-size-sm); white-space:nowrap; }
.zb-shell-menu summary::-webkit-details-marker { display:none; }
.zb-shell-menu summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.zb-shell-menu-links { position:absolute; top:calc(100% + 10px); left:0; width:330px; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; border:1px solid var(--color-border-strong); border-radius:var(--card-radius); background:rgb(var(--surface-raised-rgb)); box-shadow:var(--shadow-card); }
body.zb-dashboard-system .zb-shell-menu-links .zb-shell-tab { justify-content:flex-start; }
body.zb-dashboard-system .zb-shell-menu-links .zb-shell-tab[hidden] { display:none; }
.zb-nav-icon { width:15px; height:15px; flex:0 0 15px; }
.zb-shell-tab, .zb-shell-menu-label { display:inline-flex; align-items:center; gap:6px; }
@media(max-width:1580px) { .zb-shell-tabs > .zb-shell-nav { display:none; } .zb-shell-menu { display:block; } }
@media(max-width:640px) {
  :root { --zb-shell-height:88px; }
  .zb-shell-tabs { flex-wrap:wrap; gap:6px; padding:6px 10px; }
  .zb-shell-tabs > .zb-shell-menu { order:10; width:100%; }
  .zb-shell-menu summary { min-height:28px; padding:2px 8px; justify-content:space-between; }
  .zb-shell-menu-links { width:min(330px,calc(100vw - 20px)); }
  body.zb-dashboard-system .zb-shell-role { display:none; }
  body.zb-dashboard-system .zb-view-header h1 { font-size:calc(19px * var(--font-scale)) !important; }
  body.zb-dashboard-system .zb-view-actions { width:100%; }
}

/* Personal design details preserve status colors and standard widths. */
:root[data-corners="square"] { --card-radius:4px; --button-radius:4px; --control-radius:4px; }
:root[data-corners="soft"] { --card-radius:20px; --button-radius:12px; --control-radius:12px; }
:root[data-table-guides="rows"] body.zb-dashboard-system tbody td,
:root[data-table-guides="grid"] body.zb-dashboard-system tbody td { border-bottom:1px solid var(--color-border-strong); }
:root[data-table-guides="grid"] body.zb-dashboard-system th,
:root[data-table-guides="grid"] body.zb-dashboard-system td { border-right:1px solid var(--color-border-strong); }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* A flat deep-blue fill keeps every default selected/hovered label readable.
   The fill preference still controls the mix; there is no white glaze over text. */
:root[data-theme][data-palette="default"] body.zb-dashboard-system :is(
  .btn.btn-primary, .btn, .pill-btn, .nav-btn, .filter-button, .filter-action,
  .icon-button, .zb-shell-signout, .zb-shell-tab, .route-mode-button,
  .b2b-account-button, .b2b-case-card, .metric-filter, .metric-card, .metric,
  .location-tile, .account-card, .queue-card, .driver-card
):is(:hover, :active, .is-clicked, .is-active, .active, [aria-pressed="true"], [aria-current="page"]) {
  background: color-mix(in srgb, var(--color-active) var(--button-active-fill-mix), var(--color-active-hover)) !important;
  color: var(--button-active-text) !important;
  border-color: var(--color-active-border) !important;
  filter: none;
}

body.zb-dashboard-system :is(.metric-card.is-active, .metric-filter.active) :is(.metric-label, .metric-value, strong),
body.zb-dashboard-system .location-tile.active :is(strong, span:not(.location-ready), small),
body.zb-dashboard-system .b2b-account-button.active span,
body.zb-dashboard-system .b2b-case-card.active :is(span, small) {
  color: var(--button-active-text) !important;
}

:root[data-palette="default"] body.zb-dashboard-system :is(.metric-card, .metric-filter):hover :is(.metric-label, .metric-value, strong),
:root[data-palette="default"] body.zb-dashboard-system .location-tile:hover :is(strong, span:not(.location-ready), small),
:root[data-palette="default"] body.zb-dashboard-system .b2b-account-button:hover span,
:root[data-palette="default"] body.zb-dashboard-system .b2b-case-card:hover :is(span, small) {
  color: var(--button-active-text) !important;
}

body.zb-dashboard-system .location-ready { color: #07110c; }

/* Wolverines keeps its navy surfaces and maize action/selection colors. */
:root[data-theme][data-palette="wolverines"] {
  --color-active:#ffcb05; --color-active-hover:#ebbc00;
  --color-active-border:#ffcb05; --color-active-ring:#ffcb05;
  --button-primary-text:#00274c; --button-active-text:#00274c;
}
:root[data-theme="dark"][data-palette="wolverines"] {
  --color-background:#001b35; --surface-rgb:0,39,76;
  --surface-alt-rgb:7,48,86; --surface-raised-rgb:14,58,96;
  --table-header-rgb:0,31,62; --dashboard-overlay-rgb:0,21,43;
  --color-text:#f5f8fc; --color-text-muted:#b3c8df;
}
:root[data-theme][data-palette="wolverines"] body.zb-dashboard-system :is(
  .btn:not(.btn-danger), .pill-btn, .nav-btn, .filter-button, .filter-action,
  .icon-button, .password-toggle, .date-picker-button, .zb-shell-signout
) {
  background:color-mix(in srgb,#ffcb05 var(--button-fill-mix),#ffe57a) !important;
  color:#00274c !important; border-color:#ffcb05 !important;
}
:root[data-theme][data-palette="wolverines"] body.zb-dashboard-system :is(
  .btn:not(.btn-danger), .pill-btn, .nav-btn, .filter-button, .filter-action,
  .icon-button, .password-toggle, .date-picker-button, .zb-shell-signout,
  .zb-shell-tab, .category-button, .stats-period-tabs button,
  .stats-section-tabs button, .driver-card, .metric-card, .metric-filter, .metric,
  .location-tile, .b2b-account-button, .b2b-case-card
):is(:hover, :active, .is-clicked, .is-active, .active, [aria-pressed="true"], [aria-current="page"]) {
  background:color-mix(in srgb,#ffcb05 var(--button-active-fill-mix),#ebbc00) !important;
  color:#00274c !important; border-color:#ffcb05 !important;
}
:root[data-theme][data-palette="wolverines"] body.zb-dashboard-system :is(
  .category-button, .driver-card, .metric-card, .metric-filter, .metric, .location-tile,
  .b2b-account-button, .b2b-case-card
):is(:hover, .is-active, .active, [aria-pressed="true"]) :is(strong, small, span:not(.location-ready)) {
  color:#00274c !important;
}

/* Secondary labels inherit their control's readable foreground in every state. */
body.zb-dashboard-system :is(.b2b-account-button, .b2b-case-card) :is(span, small) {
  color: inherit;
}
body.zb-dashboard-system .driver-card:is(.is-active, :hover) :is(span, small),
body.zb-dashboard-system .metric:is(.is-active, :hover) :is(.metric-label, strong) {
  color: inherit !important;
}

:root[data-theme="light"] body.zb-dashboard-system :is(.user-avatar, .settings-icon) {
  color: var(--color-text);
}
:root[data-theme="light"] body.zb-dashboard-system .user-status-dot:not(.is-inactive) {
  color: #166534;
}
:root[data-theme="light"] body.zb-dashboard-system .priority-chip {
  background: #b45309;
  color: #fff;
}
body.zb-dashboard-system :is(.zb-message-badge, .zb-message-small-badge) {
  background: #dc2626;
  color: #fff;
}

/* Light teal highlights need deeper fills; orange and gold need dark labels. */
:root[data-theme="light"][data-palette="cyan"] {
  --color-primary: #0e7490;
  --color-primary-hover: #155e75;
  --color-active: #0e7490;
  --color-active-hover: #155e75;
}
:root[data-theme="light"][data-palette="turquoise"] {
  --color-primary: #0f766e;
  --color-primary-hover: #115e59;
  --color-active: #0f766e;
  --color-active-hover: #115e59;
}
:root[data-theme="light"][data-palette="cowboys"] {
  --color-primary: #59666c;
  --color-primary-hover: #475569;
}
:root[data-theme][data-palette="knicks"],
:root[data-theme][data-palette="lakers"] {
  --button-active-text: #122033;
}

/* Neutral surfaces with a light status tint avoid saturated legacy fills. */
:root[data-theme="light"] body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-missing > td {
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)) !important;
}
:root[data-theme="light"] body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-complete > td {
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface)) !important;
}
:root[data-theme="light"] body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-missing:hover > td {
  background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface)) !important;
}
:root[data-theme="light"] body.zb-dashboard-system #expeditedTable tbody tr.expedited-row-complete:hover > td {
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)) !important;
}