:root {
  color-scheme: dark;
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-secondary: #2563eb;
  --color-accent: #f59e0b;
  --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: #f8fffe;
  --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(13, 148, 136, 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(13, 148, 136, 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: #0f766e;
  --color-primary-hover: #115e59;
  --color-secondary: #1d4ed8;
  --color-accent: #b45309;
  --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: #5d6f84;
  --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: #dff3f0;
  --dashboard-background-dim: 0.1;
  --dashboard-overlay-rgb: 232, 238, 245;
  --button-primary-text: #082f2d;
  --button-active-text: #062e2c;
  --bg: var(--color-background);
  --bg-2: #f6f9fc;
}

: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);
}

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 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) var(--button-click-fill-mix), var(--color-surface-raised));
  border-color: var(--color-primary);
  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 .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 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) var(--button-click-fill-mix), var(--color-surface-raised)) !important;
  border-color: var(--color-primary) !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;
  }
}