/*
 * Apex Slate Rail
 * Final visual layer for the Apex Logistics mockup.
 * Presentation only: existing IDs, data hooks, and application behavior remain unchanged.
 */

:root,
html[data-theme="light"] {
  --apex-canvas: #e9eef2;
  --apex-workspace: #f8f9f9;
  --apex-surface: #fffefd;
  --apex-surface-subtle: #f7f8f7;
  --apex-card-surface: var(--apex-surface-subtle);
  --apex-surface-muted: #eef1f2;
  --apex-surface-hover: #f2f4f4;
  --apex-ink: #26394f;
  --apex-ink-strong: #17283a;
  --apex-text: #3f5267;
  --apex-muted: #5d6f80;
  --apex-faint: #93a0ae;
  --apex-border: #e0e5e7;
  --apex-border-strong: #ccd5da;
  --apex-slate-border: #e0e5e7;
  --apex-rail: #2d4258;
  --apex-rail-deep: #24374b;
  --apex-rail-text: #eef3f7;
  --apex-focus: #577c9a;
  --apex-info: #537694;
  --apex-success: #16856b;
  --apex-warning: #a86712;
  --apex-danger: #bd3655;
  --apex-info-soft: #edf3f7;
  --apex-success-soft: #eaf6f2;
  --apex-warning-soft: #faf3e8;
  --apex-danger-soft: #fbeef1;
  --apex-info-line: #cad9e4;
  --apex-chart-bar: #2f68c7;
  --apex-success-line: #b9dfd3;
  --apex-warning-line: #e7d1ad;
  --apex-danger-line: #efc0ca;
  --apex-shadow-1: 0 1px 2px rgba(28, 45, 61, 0.04),
    0 7px 22px rgba(28, 45, 61, 0.035);
  --apex-shadow-2: 0 12px 32px rgba(28, 45, 61, 0.08);
  --apex-shadow-3: 0 24px 64px rgba(17, 29, 40, 0.18);
  --apex-focus-ring: 0 0 0 3px rgba(87, 124, 154, 0.22);

  --background: var(--apex-workspace);
  --foreground: var(--apex-ink);
  --card: var(--apex-card-surface);
  --card-foreground: var(--apex-ink);
  --primary: var(--apex-ink);
  --primary-foreground: #ffffff;
  --secondary: var(--apex-surface-muted);
  --secondary-foreground: var(--apex-ink);
  --card-subtle: var(--apex-card-surface);
  --muted-surface: var(--apex-surface-muted);
  --muted-foreground: var(--apex-muted);
  --accent-surface: var(--apex-info-soft);
  --accent-foreground: var(--apex-info);
  --border: var(--apex-border);
  --input: var(--apex-border-strong);
  --ring: var(--apex-focus);
  --navy: var(--apex-rail);
  --navy-2: var(--apex-rail-deep);
  --success: var(--apex-success);
  --success-surface: var(--apex-success-soft);
  --warning: var(--apex-warning);
  --warning-surface: var(--apex-warning-soft);
  --destructive: var(--apex-danger);
  --bg: var(--apex-workspace);
  --surface: var(--apex-surface);
  --surface-2: var(--apex-surface-subtle);
  --ink: var(--apex-ink);
  --muted: var(--apex-muted);
  --line: var(--apex-border);
  --brand: var(--apex-ink);
  --brand-2: var(--apex-rail);
  --accent: var(--apex-info);
  --danger: var(--apex-danger);
  --ok: var(--apex-success);
  --row-risk: var(--apex-danger);
  --row-watch: var(--apex-warning);
  --row-steady: var(--apex-success);
  --slate: var(--apex-faint);
  --ice: var(--apex-info-soft);

  --enterprise-canvas: var(--apex-canvas);
  --enterprise-canvas-raised: var(--apex-workspace);
  --enterprise-surface: var(--apex-surface);
  --enterprise-surface-subtle: var(--apex-surface-subtle);
  --enterprise-card-surface: var(--apex-card-surface);
  --enterprise-surface-muted: var(--apex-surface-muted);
  --enterprise-surface-hover: var(--apex-surface-hover);
  --enterprise-text: var(--apex-ink);
  --enterprise-text-soft: var(--apex-text);
  --enterprise-muted: var(--apex-muted);
  --enterprise-faint: var(--apex-faint);
  --enterprise-border: var(--apex-border);
  --enterprise-border-strong: var(--apex-border-strong);
  --enterprise-primary: var(--apex-ink);
  --enterprise-primary-hover: var(--apex-ink-strong);
  --enterprise-primary-soft: var(--apex-surface-muted);
  --enterprise-primary-line: var(--apex-border-strong);
  --enterprise-accent: var(--apex-info);
  --enterprise-accent-hover: var(--apex-ink);
  --enterprise-accent-soft: var(--apex-info-soft);
  --enterprise-accent-line: var(--apex-info-line);
  --enterprise-success: var(--apex-success);
  --enterprise-success-soft: var(--apex-success-soft);
  --enterprise-success-line: var(--apex-success-line);
  --enterprise-warning: var(--apex-warning);
  --enterprise-warning-soft: var(--apex-warning-soft);
  --enterprise-warning-line: var(--apex-warning-line);
  --enterprise-danger: var(--apex-danger);
  --enterprise-danger-soft: var(--apex-danger-soft);
  --enterprise-danger-line: var(--apex-danger-line);
  --enterprise-rail: var(--apex-rail);
  --enterprise-rail-raised: var(--apex-rail-deep);
  --enterprise-rail-text: var(--apex-rail-text);
  --enterprise-rail-muted: #c0ccd6;
  --enterprise-rail-border: rgba(255, 255, 255, 0.12);
  --enterprise-glass: var(--apex-surface);
  --enterprise-shadow-xs: var(--apex-shadow-1);
  --enterprise-shadow-sm: var(--apex-shadow-2);
  --enterprise-shadow-md: var(--apex-shadow-3);
  --enterprise-shadow-focus: var(--apex-focus-ring);
}

html[data-theme="dark"] {
  --apex-canvas: #050816;
  --apex-workspace: #080d20;
  --apex-surface: #0d1530;
  --apex-surface-subtle: #121d3c;
  --apex-surface-muted: #18284f;
  --apex-surface-hover: #203568;
  --apex-ink: #edf6ff;
  --apex-ink-strong: #ffffff;
  --apex-text: #cbd7ee;
  --apex-muted: #9caecb;
  --apex-faint: #687b9d;
  --apex-border: #263762;
  --apex-border-strong: #36518b;
  --apex-slate-border: #263762;
  --apex-rail: var(--apex-surface);
  --apex-rail-deep: #091126;
  --apex-rail-text: #edf6ff;
  --apex-focus: #3d76d4;
  --apex-info: #5f8fdd;
  --apex-success: #78d3a7;
  --apex-warning: #f1c66b;
  --apex-danger: #f08a9b;
  --apex-info-soft: #112f5e;
  --apex-success-soft: #1f342b;
  --apex-warning-soft: #342c1d;
  --apex-danger-soft: #352127;
  --apex-info-line: #2f68c7;
  --apex-chart-bar: #2f68c7;
  --apex-success-line: #3b6d57;
  --apex-warning-line: #705d32;
  --apex-danger-line: #70414c;
  --apex-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.42);
  --apex-shadow-2: 0 18px 44px rgba(0, 0, 0, 0.42);
  --apex-shadow-3: 0 32px 82px rgba(0, 0, 0, 0.62);
  --apex-focus-ring: 0 0 0 3px rgba(47, 104, 199, 0.32);

  --primary-foreground: #111111;
  --enterprise-rail-muted: #91a7bb;
  color-scheme: dark;
}

html {
  background: var(--apex-canvas) !important;
}

body,
body .app-shell.ui-app-shell,
body .main.ui-main {
  background-color: var(--apex-workspace) !important;
  background-image: none !important;
}

body {
  color: var(--apex-text) !important;
  font-family: Inter, "SF Pro Text", "SF Pro Display", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--apex-focus) !important;
  outline-offset: 2px !important;
  box-shadow: var(--apex-focus-ring) !important;
}

/* App shell and signature rail */
.app-shell.ui-app-shell {
  grid-template-columns: 224px minmax(0, 1fr) !important;
  min-height: 100dvh;
  overflow: visible;
}

.app-shell.ui-app-shell.sidebar-collapsed {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 100dvh;
  overflow: visible;
}

.sidebar.ui-sidebar {
  position: sticky !important;
  z-index: 40;
  top: 0;
  width: auto !important;
  height: 100dvh !important;
  padding: 20px 10px 14px !important;
  overflow: visible;
  border: 0 !important;
  border-right: 0 !important;
  background-color: var(--apex-rail) !important;
  background-image: none !important;
  color: var(--apex-rail-text) !important;
  box-shadow: none !important;
}

.brand.ui-sidebar-header {
  min-height: 56px;
  justify-content: center !important;
  padding: 0 0 18px !important;
  border: 0 !important;
}

.brand-logo-shell {
  display: grid;
  flex: 0 0 48px;
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: clip;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  clip-path: circle(50% at 50% 50%);
}

.brand-logo {
  display: block;
  width: 38px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
}

.brand-copy {
  display: none !important;
}

.sidebar .nav-label {
  position: absolute;
  z-index: 60;
  left: calc(100% + 14px);
  top: 50%;
  display: block !important;
  width: max-content;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid var(--apex-border-strong);
  border-radius: 6px;
  background: var(--apex-ink-strong);
  color: var(--apex-surface);
  box-shadow: var(--apex-shadow-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.nav-list.ui-sidebar-menu {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 7px !important;
  margin: 18px 0 !important;
  overflow: visible;
}

.nav-item.ui-sidebar-menu-button {
  position: relative;
  display: grid !important;
  width: 52px !important;
  min-width: 52px;
  height: 48px !important;
  min-height: 48px !important;
  place-items: center;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #c7d2dc !important;
  box-shadow: none !important;
  transform: none;
  transition: width 180ms ease, color 180ms ease, background-color 180ms ease,
    border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

.nav-item.ui-sidebar-menu-button::before {
  display: none !important;
}

.nav-item.ui-sidebar-menu-button::after {
  display: none !important;
}

html[data-theme="dark"] .sidebar .nav-label {
  background: #edf3f6;
  color: #17283a;
}

.nav-item.ui-sidebar-menu-button:not(.active):hover .nav-label,
.nav-item.ui-sidebar-menu-button:focus-visible .nav-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.nav-item.ui-sidebar-menu-button:not(.active):hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.nav-item.ui-sidebar-menu-button.active {
  z-index: 2;
  width: 74px !important;
  align-self: flex-end;
  margin-right: -10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #2d4258 !important;
  box-shadow: none !important;
  transform: none;
  isolation: isolate;
}

html[data-theme="dark"] .nav-item.ui-sidebar-menu-button.active {
  color: var(--apex-ink) !important;
}

.nav-item.ui-sidebar-menu-button.active::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -34px;
  bottom: -34px;
  left: 0;
  right: 0;
  display: block !important;
  width: auto;
  height: auto;
  border-radius: 0 !important;
  background: var(--apex-workspace);
  /* One path keeps both concave shoulders and the active tab visually continuous. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 116' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M74 0C74 18.78 58.78 34 40 34H24C10.75 34 0 44.75 0 58C0 71.25 10.75 82 24 82H40C58.78 82 74 97.22 74 116V0Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 116' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M74 0C74 18.78 58.78 34 40 34H24C10.75 34 0 44.75 0 58C0 71.25 10.75 82 24 82H40C58.78 82 74 97.22 74 116V0Z'/%3E%3C/svg%3E");
  mask-mode: alpha;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
}

.nav-item.ui-sidebar-menu-button.active::after {
  display: none !important;
}

.nav-item.ui-sidebar-menu-button .nav-icon,
.nav-item.ui-sidebar-menu-button:hover .nav-icon,
.nav-item.ui-sidebar-menu-button.active .nav-icon {
  display: grid;
  width: 32px !important;
  height: 32px !important;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

.nav-item.ui-sidebar-menu-button .nav-icon {
  position: relative;
  z-index: 1;
}

.nav-item.ui-sidebar-menu-button.active .nav-icon {
  transform: translateX(-9px);
}

.nav-item.ui-sidebar-menu-button .nav-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle.ui-button {
  display: grid !important;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px !important;
  place-items: center;
  align-self: center;
  margin: auto auto 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #b9c6d0 !important;
  box-shadow: none !important;
}

.sidebar-toggle.ui-button:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.app-shell:not(.sidebar-collapsed) .sidebar.ui-sidebar {
  padding: 20px 14px 14px !important;
  overflow: hidden;
}

.app-shell:not(.sidebar-collapsed) .brand.ui-sidebar-header {
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 6px 18px !important;
}

.app-shell:not(.sidebar-collapsed) .brand-copy {
  display: grid !important;
  min-width: 0;
  line-height: 1.05;
}

.app-shell:not(.sidebar-collapsed) .brand-copy strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 760;
}

.app-shell:not(.sidebar-collapsed) .brand-copy span {
  color: #a7b6c4;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.app-shell:not(.sidebar-collapsed) .nav-list.ui-sidebar-menu {
  align-items: stretch;
  gap: 6px !important;
}

.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button {
  width: 100% !important;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  justify-content: start;
  place-items: center start;
  gap: 10px;
  padding: 0 12px !important;
}

.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active {
  width: 100% !important;
  align-self: stretch;
  margin-right: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active::before,
.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active::after {
  display: none !important;
}

.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active .nav-icon {
  transform: none;
}

.app-shell:not(.sidebar-collapsed) .sidebar .nav-label {
  position: static;
  display: inline-block !important;
  width: auto;
  max-width: 132px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  text-overflow: ellipsis;
  transform: none;
}

.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button:hover .nav-label,
.app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button:focus-visible .nav-label {
  opacity: 1;
  transform: none;
}

.app-shell:not(.sidebar-collapsed) .sidebar-toggle.ui-button {
  width: 100% !important;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: start;
  gap: 10px;
  padding: 0 12px !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Workspace and global controls */
.main.ui-main {
  min-width: 0;
  width: 100%;
  padding: 0 20px 24px !important;
}

.topbar.ui-topbar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--apex-border) !important;
  background: var(--apex-workspace) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.topbar-actions {
  --topbar-control-height: 48px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
}

.topbar .search,
.search,
.table-search,
.ui-input-shell {
  min-height: 40px !important;
  border: 1px solid var(--apex-border-strong) !important;
  border-radius: 999px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-muted) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.topbar .search {
  width: min(420px, 38vw);
  height: var(--topbar-control-height) !important;
  min-height: var(--topbar-control-height) !important;
  padding-inline: 14px 16px !important;
}

.topbar .search input,
.search input,
.table-search input,
.ui-input-shell input {
  color: var(--apex-ink) !important;
}

.topbar .search input::placeholder,
.search input::placeholder,
.table-search input::placeholder,
.ui-input-shell input::placeholder {
  color: var(--apex-faint) !important;
}

.search:focus-within,
.table-search:focus-within,
.ui-input-shell:focus-within,
.topbar .search:focus-within {
  border-color: var(--apex-focus) !important;
  box-shadow: var(--apex-focus-ring) !important;
}

.ui-select-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
  color: var(--apex-ink);
}

.ui-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(-50%);
  pointer-events: none;
}

.ui-select,
select.ui-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 40px !important;
  border: 1px solid var(--apex-border-strong) !important;
  border-radius: 8px !important;
  background-color: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-ink) !important;
  box-shadow: var(--apex-shadow-1) !important;
  padding-inline: 14px 40px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
}

.ui-select:hover,
select.ui-select:hover {
  border-color: var(--apex-info-line) !important;
  background-color: var(--apex-surface-hover) !important;
}

.ui-select:focus-visible,
select.ui-select:focus-visible {
  border-color: var(--apex-focus) !important;
  box-shadow: var(--apex-focus-ring) !important;
  outline: none !important;
}

.ui-select--compact,
select.ui-select--compact {
  min-height: 36px !important;
  padding-inline: 12px 38px !important;
  font-size: 12px !important;
}

.ui-select--topbar,
select.ui-select--topbar {
  width: 208px;
  height: var(--topbar-control-height) !important;
  min-height: var(--topbar-control-height) !important;
  padding-inline: 16px 42px !important;
}

.topbar .ui-select,
.topbar .theme-toggle,
.topbar .reminder-button {
  height: var(--topbar-control-height) !important;
  min-height: var(--topbar-control-height) !important;
  border: 1px solid var(--apex-border-strong) !important;
  border-radius: 8px !important;
  background-color: var(--apex-surface-subtle) !important;
  color: var(--apex-ink) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.topbar .ui-select-wrap {
  width: 208px;
}

.topbar .theme-toggle,
.topbar .reminder-button {
  width: var(--topbar-control-height) !important;
  min-width: var(--topbar-control-height) !important;
  padding: 0 !important;
}

.topbar .ui-select:hover,
.topbar .theme-toggle:hover,
.topbar .reminder-button:hover {
  border-color: var(--apex-info-line) !important;
  background-color: var(--apex-surface-hover) !important;
}

.topbar .ui-select:focus-visible,
.topbar .theme-toggle:focus-visible,
.topbar .reminder-button:focus-visible {
  border-color: var(--apex-focus) !important;
  box-shadow: var(--apex-focus-ring) !important;
  outline: none !important;
}

.reminder-button::after {
  top: 5px !important;
  right: 5px !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--apex-success) !important;
  box-shadow: 0 0 0 2px var(--apex-surface) !important;
}

/* Page rhythm and typography */
.main.ui-main > .view.ui-page {
  width: 100%;
  min-width: 0;
  padding-top: 20px;
}

.main.ui-main > .view.ui-page > .dashboard-hero,
.main.ui-main > .view.ui-page > .board-command,
.main.ui-main > .view.ui-page > .section-heading,
.main.ui-main > .view.ui-page > .compact-summary,
.main.ui-main > .view.ui-page > .report-stat-grid,
.main.ui-main > .view.ui-page > .table-toolbar,
.main.ui-main > .view.ui-page > .operational-focus-filter,
.main.ui-main > .view.ui-page > .table-shell,
.main.ui-main > .view.ui-page > .table-footer,
.main.ui-main > .view.ui-page > .panel {
  width: 100%;
  box-sizing: border-box;
}

.view h2,
.view h3,
.modal h2,
.modal h3,
.detail-modal h2,
.detail-modal h3 {
  color: var(--apex-ink) !important;
  letter-spacing: 0 !important;
}

.view p,
.modal p,
.detail-modal p {
  color: var(--apex-muted) !important;
}

.view h2,
.dashboard-hero h2,
#load-board-view .board-command-title h2,
.view > .section-heading h2 {
  margin: 0 0 4px !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
}

.board-kicker,
#dashboard-view .board-kicker,
#load-board-view .board-kicker,
.dashboard-panel-header span,
.panel-header span,
.dashboard-kpi-card span,
.metric-card span,
.board-signal span {
  color: var(--apex-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

/* Page and command headers */
.dashboard-hero,
#load-board-view .board-command,
.view:not(#dashboard-view):not(#load-board-view) > .section-heading {
  position: relative;
  min-height: 96px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.dashboard-hero::before,
#load-board-view .board-command::before,
.view:not(#dashboard-view):not(#load-board-view) > .section-heading::before {
  display: none !important;
}

#quotes-view > .section-heading > div::before {
  content: "Quote desk";
}

.dashboard-hero {
  min-height: 98px;
  padding: 8px 0 18px !important;
}

#load-board-view .board-command {
  padding: 8px 0 16px !important;
}

.view:not(#dashboard-view):not(#load-board-view) > .section-heading {
  margin: 0 !important;
  padding: 8px 0 18px !important;
}

.dashboard-hero p,
#load-board-view .board-command-title p,
.view > .section-heading p {
  max-width: 860px;
  margin: 0 !important;
  color: var(--apex-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Controls */
.primary-action,
.ui-button-primary,
.board-command .primary-action,
.view > .section-heading .primary-action,
.primary-action.ui-button-primary {
  --apex-button-primary-bg: var(--apex-ink);
  --apex-button-primary-border: var(--apex-ink);
  --apex-button-primary-fg: #ffffff;
  --apex-button-primary-hover-bg: var(--apex-ink-strong);
  --apex-button-primary-hover-border: var(--apex-ink-strong);
  --apex-button-primary-hover-fg: #ffffff;
  min-height: 40px !important;
  padding: 8px 16px !important;
  border: 1px solid var(--apex-button-primary-border) !important;
  border-radius: 8px !important;
  background: var(--apex-button-primary-bg) !important;
  background-image: none !important;
  color: var(--apex-button-primary-fg) !important;
  box-shadow: 0 8px 20px rgba(38, 57, 79, 0.14) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  transform: none !important;
}

.primary-action:hover,
.ui-button-primary:hover,
.board-command .primary-action:hover,
.view > .section-heading .primary-action:hover,
.primary-action.ui-button-primary:hover {
  border-color: var(--apex-button-primary-hover-border) !important;
  background: var(--apex-button-primary-hover-bg) !important;
  color: var(--apex-button-primary-hover-fg) !important;
  box-shadow: 0 10px 24px rgba(38, 57, 79, 0.2) !important;
  transform: none !important;
}

html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .ui-button-primary,
html[data-theme="dark"] .board-command .primary-action,
html[data-theme="dark"] .view > .section-heading .primary-action,
html[data-theme="dark"] .primary-action.ui-button-primary {
  --apex-button-primary-bg: #2f68c7;
  --apex-button-primary-border: var(--apex-info-line);
  --apex-button-primary-fg: #ffffff;
  --apex-button-primary-hover-bg: #2458ad;
  --apex-button-primary-hover-border: #5f8fdd;
  --apex-button-primary-hover-fg: #ffffff;
  border-color: var(--apex-button-primary-border) !important;
  background: var(--apex-button-primary-bg) !important;
  color: var(--apex-button-primary-fg) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

.secondary-action,
.ui-button-outline,
.compact-action,
.text-button,
.icon-button {
  min-height: 40px;
  border: 1px solid var(--apex-border-strong) !important;
  border-radius: 8px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-ink) !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 600;
  transform: none !important;
}

.secondary-action:hover,
.ui-button-outline:hover,
.compact-action:hover,
.text-button:hover,
.icon-button:hover {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-hover) !important;
  color: var(--apex-ink-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.icon-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  padding: 0 !important;
}

input,
textarea,
.ui-select {
  border-color: var(--apex-border-strong) !important;
  border-radius: 6px !important;
  background: var(--apex-surface) !important;
  background-image: none;
  color: var(--apex-ink) !important;
}

/* Metrics */
.dashboard-kpi-grid,
.compact-summary,
.report-stat-grid {
  min-width: 0;
}

.dashboard-kpi-grid,
.compact-summary,
.report-stat-grid {
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 8px !important;
  background: var(--apex-surface) !important;
  box-shadow: var(--apex-shadow-1);
}

.dashboard-kpi-card,
.metric-card,
#load-board-view .board-signal,
#load-board-view .board-focus-card,
.compact-summary .summary-item,
.report-stat-card {
  position: relative;
  min-height: 96px !important;
  padding: 13px 14px !important;
  overflow: hidden;
  border: 1px solid var(--apex-border) !important;
  border-left: 1px solid var(--apex-border) !important;
  border-radius: 6px !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 160ms ease, background-color 160ms ease,
    box-shadow 160ms ease !important;
}

.dashboard-kpi-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--apex-border);
  border-radius: 999px;
  background: rgba(238, 245, 251, 0.72);
  color: var(--apex-muted);
  pointer-events: none;
}

.dashboard-kpi-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-kpi-card:hover .dashboard-kpi-icon {
  border-color: var(--apex-border-strong);
  background: var(--apex-surface);
  color: var(--apex-ink);
}

/*
 * Legacy state selectors carry higher specificity and !important. Keep KPI
 * surfaces neutral so semantic color lives in the data, not the card chrome.
 */
#dashboard-view .dashboard-kpi-card.critical,
#dashboard-view .dashboard-kpi-card.watch,
#dashboard-view .dashboard-kpi-card.billing,
#dashboard-view .dashboard-kpi-card.ready,
#load-board-view .board-signal.critical,
#load-board-view .board-signal.watch,
#load-board-view .board-signal.billing,
#load-board-view .board-signal.ready,
#load-board-view .board-focus-card,
body .compact-summary .summary-item.attention,
body .compact-summary .summary-item:nth-child(4),
body .compact-summary .summary-item:nth-child(5),
body .report-stat-card.watch {
  border: 1px solid var(--apex-border) !important;
  border-left: 1px solid var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

#dashboard-view .dashboard-kpi-card.critical span,
#dashboard-view .dashboard-kpi-card.watch span,
#dashboard-view .dashboard-kpi-card.billing span,
#dashboard-view .dashboard-kpi-card.ready span,
#load-board-view .board-signal.critical span,
#load-board-view .board-signal.watch span,
#load-board-view .board-signal.billing span,
#load-board-view .board-signal.ready span {
  color: var(--apex-muted) !important;
}

.dashboard-kpi-card::before,
.dashboard-kpi-card::after,
.metric-card::before,
.metric-card::after,
#load-board-view .board-signal::before,
#load-board-view .board-signal::after,
.compact-summary .summary-item::before,
.compact-summary .summary-item::after,
.report-stat-card::before,
.report-stat-card::after {
  display: none !important;
}

.dashboard-kpi-card:hover,
#load-board-view .board-signal:hover,
#load-board-view .board-focus-card:hover,
.compact-summary button.summary-item:hover,
button.metric-card:hover {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-hover) !important;
  box-shadow: var(--apex-shadow-1) !important;
  transform: none !important;
}

.dashboard-kpi-card strong,
#load-board-view .board-signal strong,
.metric-card strong,
.compact-summary .summary-item strong,
.report-stat-card strong {
  color: var(--apex-ink-strong) !important;
  font-variant-numeric: tabular-nums;
}

.dashboard-kpi-card small,
#load-board-view .board-signal small,
.metric-card small,
.compact-summary .summary-item small,
.report-stat-card small {
  color: var(--apex-muted) !important;
}

.dashboard-kpi-card.critical span,
#load-board-view .board-signal.critical span,
.compact-summary .summary-item.attention span,
.report-stat-card.watch span {
  color: var(--apex-danger) !important;
}

.dashboard-kpi-card.watch span,
.dashboard-kpi-card.billing span,
#load-board-view .board-signal.watch span,
#load-board-view .board-signal.billing span {
  color: var(--apex-warning) !important;
}

.dashboard-kpi-card.ready span,
#load-board-view .board-signal.ready span {
  color: var(--apex-success) !important;
}

/* Panels and repeated rows */
.dashboard-panel,
.panel.ui-card,
.settings-section.ui-card {
  border-color: var(--apex-border) !important;
  border-radius: 8px !important;
  background: var(--apex-card-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.table-shell,
.data-table-shell,
.data-table-footer,
.table-toolbar,
.data-table-toolbar,
#load-board-view .table-toolbar,
.modal,
.wide-modal,
.detail-modal,
.billing-detail-modal,
.ui-dialog-content,
.notification-panel {
  border-color: var(--apex-border) !important;
  border-radius: 8px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.dashboard-panel-header,
.panel-header,
.ui-card-header,
.table-shell thead th,
.data-table thead th,
.data-table-head {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
}

.dashboard-priority-panel {
  border-top: 1px solid var(--apex-border) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.dashboard-panel-header,
.panel-header,
.ui-card-header {
  min-height: 58px;
  padding: 12px 14px !important;
}

.dashboard-panel-header h3,
.panel-header h3,
.ui-card-header h3 {
  color: var(--apex-ink) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.dashboard-action-row,
.dashboard-reminder-row,
.dashboard-mini-row,
.dashboard-flow-row,
.mini-record-row,
.reminder-item,
.timeline-item {
  border-color: var(--apex-border) !important;
  background: var(--apex-card-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
}

.dashboard-action-row:hover,
.dashboard-reminder-row:hover,
.dashboard-mini-row:hover,
.dashboard-flow-row:hover,
.mini-record-row:hover,
.reminder-item:hover {
  background: var(--apex-surface-hover) !important;
}

.dashboard-flow-track,
.progress-track,
.trend-track {
  background: var(--apex-surface-muted) !important;
  background-image: none !important;
}

.dashboard-flow-track > span,
.progress-track > span,
.trend-track > span {
  background: var(--apex-ink) !important;
  background-image: none !important;
}

.dashboard-flow-row.available .dashboard-flow-track > span,
.dashboard-flow-row.delivered .dashboard-flow-track > span {
  background: var(--apex-success) !important;
}

.dashboard-flow-row.assigned .dashboard-flow-track > span,
.dashboard-flow-row.dispatched .dashboard-flow-track > span {
  background: var(--apex-warning) !important;
}

/* Dashboard cleanup: removed Load Flow and Upcoming Windows panels. */
.dashboard-cockpit {
  gap: 18px !important;
}

.dashboard-kpi-grid {
  gap: 14px !important;
  padding: 14px !important;
}

.dashboard-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "priority priority"
    "reminders billing" !important;
  gap: 18px !important;
  align-items: stretch;
}

.dashboard-priority-panel,
.dashboard-reminder-panel,
.dashboard-billing-panel {
  min-height: 100%;
}

.dashboard-panel-header,
.panel-header,
.ui-card-header {
  padding: 14px 16px !important;
}

.dashboard-action-row,
.dashboard-reminder-row,
.dashboard-mini-row {
  padding: 13px 16px !important;
}

.dashboard-action-queue {
  --queue-carrier: #254765;
  --queue-carrier-soft: #eef5fb;
  --queue-carrier-line: #c5d7e7;
  --queue-appointment: #315b7d;
  --queue-appointment-soft: #f1f6fa;
  --queue-appointment-line: #c9dbe9;
  --queue-storage: #4c7697;
  --queue-storage-soft: #f3f8fb;
  --queue-storage-line: #d2e1ec;
  --queue-customer: #6f90a8;
  --queue-customer-soft: #f5f8fa;
  --queue-customer-line: #d9e4eb;
  --queue-billing: #8ea6b8;
  --queue-billing-soft: #f7f9fb;
  --queue-billing-line: #e1e8ee;
  display: grid !important;
  grid-template-columns: minmax(250px, 0.3fr) minmax(0, 1fr);
  min-width: 0;
  align-items: stretch;
}

.dashboard-action-list {
  display: grid;
  min-width: 0;
}

.dashboard-action-row {
  grid-template-columns: 32px minmax(0, 1fr) minmax(150px, 0.42fr);
  min-height: 108px !important;
  align-items: center;
  gap: 14px;
  padding-block: 16px !important;
  cursor: pointer;
}

.dashboard-action-row:focus-visible {
  outline: 2px solid var(--apex-focus) !important;
  outline-offset: -2px !important;
}

.dashboard-action-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dashboard-risk-chip {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--apex-border-strong);
  border-radius: 999px;
  background: var(--apex-surface-subtle);
  color: var(--apex-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-action-main,
.dashboard-action-meta {
  align-content: center;
}

.dashboard-row-next-action {
  width: max-content;
  min-height: 30px;
  margin-top: 8px;
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid var(--apex-border-strong);
  border-radius: 8px;
  background: var(--apex-surface);
  color: var(--apex-ink);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.dashboard-row-next-action:hover {
  border-color: var(--queue-carrier-line);
  background: var(--queue-carrier-soft);
  color: var(--queue-carrier);
}

.dashboard-risk-chip.carrier {
  border-color: var(--queue-carrier-line);
  background: var(--queue-carrier-soft);
  color: var(--queue-carrier);
}

.dashboard-risk-chip.appointment {
  border-color: var(--queue-appointment-line);
  background: var(--queue-appointment-soft);
  color: var(--queue-appointment);
}

.dashboard-risk-chip.storage {
  border-color: var(--queue-storage-line);
  background: var(--queue-storage-soft);
  color: var(--queue-storage);
}

.dashboard-risk-chip.customer {
  border-color: var(--queue-customer-line);
  background: var(--queue-customer-soft);
  color: var(--queue-customer);
}

.dashboard-risk-chip.billing {
  border-color: var(--queue-billing-line);
  background: var(--queue-billing-soft);
  color: var(--queue-billing);
}

.dashboard-action-insights {
  display: grid;
  min-width: 0;
  min-height: 448px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 14px;
  padding: 16px;
  border-right: 1px solid var(--apex-border);
  background: linear-gradient(180deg, #f8fbff 0%, var(--apex-surface-subtle) 100%);
}

.dashboard-action-insight-top {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.dashboard-signal-donut {
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border-radius: 999px;
}

.dashboard-signal-donut::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: inherit;
  background: var(--apex-surface-subtle);
}

.dashboard-signal-donut span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--apex-muted);
}

.dashboard-signal-donut strong {
  color: var(--apex-ink);
  font-size: 28px;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-signal-donut small,
.dashboard-action-insight-copy span,
.dashboard-action-metric span {
  color: var(--apex-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.dashboard-action-insight-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.dashboard-action-insight-copy strong {
  color: var(--apex-ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

.dashboard-action-insight-copy small {
  color: var(--apex-muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-action-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(82px, 1fr);
  gap: 8px;
  min-height: 0;
}

.dashboard-action-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  align-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid var(--apex-border);
  border-radius: 8px;
  background: var(--apex-card-surface);
  color: var(--apex-text);
  text-align: left;
}

.dashboard-action-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--queue-carrier);
}

.dashboard-action-metric:hover {
  background: var(--apex-surface-hover);
}

.dashboard-action-metric strong {
  color: var(--apex-ink);
  font-size: 22px;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-action-metric.carrier::before {
  background: var(--queue-carrier);
}

.dashboard-action-metric.carrier strong {
  color: var(--queue-carrier);
}

.dashboard-action-metric.appointment::before {
  background: var(--queue-appointment);
}

.dashboard-action-metric.appointment strong {
  color: var(--queue-appointment);
}

.dashboard-action-metric.storage::before {
  background: var(--queue-storage);
}

.dashboard-action-metric.storage strong {
  color: var(--queue-storage);
}

.dashboard-action-metric.customer::before {
  background: var(--queue-customer);
}

.dashboard-action-metric.customer strong {
  color: var(--queue-customer);
}

.dashboard-action-metric.billing {
  grid-column: 1 / -1;
}

.dashboard-action-metric.billing::before {
  background: var(--queue-billing);
}

.dashboard-action-metric.billing strong {
  color: var(--queue-billing);
}

/* Load board */
#load-board-view {
  --apex-border: var(--apex-slate-border);
}

#load-board-view .board-command-main,
#load-board-view .board-command-title {
  min-width: 0;
}

#load-board-view .board-command-main {
  padding: 0 !important;
}

#load-board-view .board-signal-grid {
  width: 100%;
  box-sizing: border-box;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--apex-border);
  border-radius: 8px;
  background: var(--apex-surface);
  box-shadow: var(--apex-shadow-1);
}

.operational-focus-filter {
  min-height: 48px;
  margin: 10px 0 !important;
  padding: 7px 10px !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 8px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  box-shadow: var(--apex-shadow-1);
}

.legend-title {
  color: var(--apex-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

/* Toolbars, tabs, and tables */
.table-toolbar,
.data-table-toolbar,
#load-board-view .table-toolbar {
  gap: 10px !important;
  min-height: 60px;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 8px 8px 0 0 !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  box-shadow: var(--apex-shadow-1) !important;
}

.view-switch,
.table-filter-bar {
  min-height: 38px;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 8px !important;
  background: var(--apex-surface-subtle) !important;
}

.filter-chip,
.board-tab,
.focus-chip,
.legend-item,
.ui-tabs-trigger {
  min-height: 32px !important;
  padding: 6px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--apex-muted) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.filter-chip:hover,
.board-tab:hover,
.focus-chip:hover,
.legend-item:hover,
.ui-tabs-trigger:hover {
  background: var(--apex-surface-hover) !important;
  color: var(--apex-ink) !important;
}

.filter-chip.active,
.board-tab.active,
.focus-chip.active,
.legend-item.active,
.ui-tabs-trigger.active {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-ink) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

#load-board-view .operational-focus-filter .legend-item strong {
  border: 1px solid var(--apex-border-strong);
  background: var(--apex-surface-muted);
  color: var(--apex-ink);
  box-shadow: inset 0 0 0 1px var(--apex-surface-subtle);
}

#load-board-view .operational-focus-filter .legend-item.active strong {
  background: var(--apex-surface-hover);
}

.table-search {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.table-shell,
.data-table-shell,
#load-board-view .table-shell {
  margin: 0 !important;
  overflow: auto;
  border: 1px solid var(--apex-border) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: var(--apex-surface) !important;
  box-shadow: none !important;
  scrollbar-color: var(--apex-border-strong) transparent;
}

.table-shell table,
.data-table,
#load-board-view .load-table {
  color: var(--apex-text) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}

#load-board-view .grouped-load-table {
  min-width: 1236px;
}

#load-board-view .grouped-load-table [data-group-column="laneSchedule"] {
  width: 258px;
}

.table-shell thead th,
.data-table thead th,
.data-table-head {
  min-height: 44px;
  padding-block: 10px !important;
  border-color: var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  color: var(--apex-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.sortable-header,
.th-label {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
}

.table-shell tbody td,
.data-table tbody td,
.data-table-cell {
  min-height: 56px;
  padding-block: 10px !important;
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-text) !important;
  line-height: 1.4 !important;
}

.table-shell tbody td strong,
.data-table tbody td strong,
.cell-main {
  color: var(--apex-ink-strong) !important;
  font-weight: 650 !important;
}

.cell-sub,
.table-shell tbody td small,
.data-table tbody td small {
  color: var(--apex-muted) !important;
}

.table-shell tbody tr:hover td,
.data-table tbody tr:hover td,
.data-table-row:hover .data-table-cell {
  background: var(--apex-surface-hover) !important;
}

.data-table-footer,
.table-footer {
  display: flex !important;
  min-height: 60px;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid var(--apex-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  box-shadow: var(--apex-shadow-1) !important;
  color: var(--apex-muted) !important;
  font-size: 12px !important;
}

.table-footer > span,
.data-table-footer > span {
  margin-right: 0 !important;
  white-space: nowrap;
}

.table-footer label,
.data-table-footer label {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content;
  white-space: nowrap !important;
}

.table-footer .ui-select-wrap,
.data-table-footer .ui-select-wrap {
  width: 92px !important;
  min-width: 92px !important;
}

.table-footer .ui-select,
.data-table-footer .ui-select {
  width: 92px !important;
  min-width: 92px !important;
  min-height: 38px !important;
}

.pagination-actions {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px !important;
  margin-left: 0 !important;
}

.pagination-actions .icon-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
}

/* Badges and semantic states */
.pill,
.status-pill,
.priority-pill,
.risk-pill,
.status-badge,
#load-board-view .pill,
#load-board-view .status-pill,
#load-board-view .priority-pill,
#load-board-view .risk-pill {
  border: 1px solid var(--apex-border-strong) !important;
  border-radius: 999px !important;
  background: var(--apex-surface-muted) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.pill.move,
.status-pill.active,
.status-badge.move,
#load-board-view .pill.move {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  color: var(--apex-info) !important;
}

.pill.attention,
.pill.issue,
.risk-pill.high,
.priority-pill.high,
.status-badge.issue,
.status-badge.attention,
#load-board-view .pill.issue,
#load-board-view .risk-pill.high,
#load-board-view .priority-pill.high {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
  color: var(--apex-danger) !important;
}

.pill.warn,
.pill.billing,
.risk-pill.medium,
.priority-pill.medium,
.status-badge.warn,
.status-badge.billing,
#load-board-view .pill.warn,
#load-board-view .risk-pill.medium,
#load-board-view .priority-pill.medium {
  border-color: var(--apex-warning-line) !important;
  background: var(--apex-warning-soft) !important;
  color: var(--apex-warning) !important;
}

.pill.ok,
.pill.ready,
.risk-pill.low,
.priority-pill.low,
.status-badge.ok,
.status-badge.ready,
#load-board-view .pill.ready,
#load-board-view .risk-pill.low,
#load-board-view .priority-pill.low {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
  color: var(--apex-success) !important;
}

.date-chip,
#load-board-view .date-chip,
#load-board-view .doc-chip,
.summary-item,
.info-tile,
.copy-field-row,
.form-section,
.ui-form-section,
.wizard-panel,
.config-panel,
.quote-copy-card,
.quote-rate-grid > div,
.quote-accessorial-row {
  border-color: var(--apex-border) !important;
  background: var(--apex-card-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

#settings-view .wizard-steps button.active,
#settings-view .wizard-steps button.active:hover,
#settings-view .wizard-steps button.active:focus-visible {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  background-image: none !important;
  color: var(--apex-ink-strong) !important;
  box-shadow: inset 0 0 0 1px var(--apex-info-line) !important;
}

/* Reports */
.report-layout {
  gap: 12px !important;
}

.trend-chart {
  border-color: var(--apex-border) !important;
  background: var(--apex-card-surface) !important;
  background-image: none !important;
  box-shadow: var(--apex-shadow-1) !important;
}

html[data-theme="dark"] .trend-chart {
  background: var(--apex-card-surface) !important;
  background-image: none !important;
}

.trend-chart span {
  background: var(--apex-chart-bar) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.legend-dot.current {
  background: var(--apex-chart-bar) !important;
}

.legend-dot.previous {
  background: var(--apex-border-strong) !important;
}

/* Overlays and configuration */
.modal-backdrop,
.ui-dialog-overlay,
.detail-modal-backdrop,
.wide-modal-backdrop {
  background: rgba(16, 22, 29, 0.5) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

.modal,
.wide-modal,
.detail-modal,
.billing-detail-modal,
.ui-dialog-content {
  border: 1px solid var(--apex-border-strong) !important;
  box-shadow: var(--apex-shadow-3) !important;
}

.modal .panel-header,
.wide-modal .panel-header,
.detail-modal .panel-header,
.billing-detail-modal .panel-header,
.ui-dialog-content .ui-card-header {
  border-bottom: 1px solid var(--apex-border) !important;
  background: var(--apex-surface) !important;
}

.notification-panel {
  border-radius: 8px 0 0 8px !important;
  box-shadow: var(--apex-shadow-3) !important;
}

.notification-panel > .reminder-list {
  align-content: start;
  grid-auto-rows: max-content;
}

.notification-panel .reminder-item {
  min-height: 72px;
  padding: 12px !important;
}

.notification-panel .reminder-action-status {
  min-height: 20px;
  padding: 0 16px;
  color: var(--apex-success);
  font-size: 12px;
  font-weight: 650;
}

.notification-panel .reminder-item {
  align-items: stretch;
  flex-direction: column;
}

.notification-panel .reminder-item-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.notification-panel .reminder-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--apex-border);
}

.notification-panel .reminder-item-actions .ui-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.notification-panel .reminder-complete-button:hover,
.notification-panel .reminder-complete-button:focus-visible {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
  color: var(--apex-success) !important;
}

.notification-panel .reminder-remove-button:hover,
.notification-panel .reminder-remove-button:focus-visible {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
  color: var(--apex-danger) !important;
}

.notification-panel .reminder-empty-state {
  margin: 0;
}

.row-context-menu,
.ui-dropdown-content,
.searchable-select-menu,
.config-sidebar {
  border-color: var(--apex-border-strong) !important;
  border-radius: 8px !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: var(--apex-shadow-3) !important;
}

.row-context-menu button,
.ui-dropdown-content button,
.config-nav-item {
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--apex-text) !important;
}

.row-context-menu button:hover,
.ui-dropdown-content button:hover,
.config-nav-item:hover,
.config-nav-item.active {
  background: var(--apex-surface-hover) !important;
  color: var(--apex-ink) !important;
}

/* Remove old decorative treatments from operational surfaces. */
.board-command,
.dashboard-hero,
.section-heading,
.dashboard-kpi-card,
.metric-card,
.summary-item,
.report-stat-card,
.panel,
.dashboard-panel,
.table-toolbar,
.table-shell,
.table-footer,
.modal,
.detail-modal,
.wide-modal,
.notification-panel,
.form-section,
.ui-form-section,
.date-chip,
.info-tile {
  background-image: none !important;
}

@media (min-width: 1600px) {
  .main.ui-main {
    padding: 0 28px 32px !important;
  }

  .topbar.ui-topbar {
    min-height: 80px;
    padding-block: 16px !important;
  }

  .main.ui-main > .view.ui-page {
    padding-top: 26px;
  }

  .dashboard-hero {
    min-height: 126px;
    padding: 12px 0 24px !important;
  }

  .view h2,
  .dashboard-hero h2,
  #load-board-view .board-command-title h2,
  .view > .section-heading h2 {
    margin-bottom: 6px !important;
    font-size: 30px !important;
    line-height: 1.18 !important;
  }

  .dashboard-hero p,
  #load-board-view .board-command-title p,
  .view > .section-heading p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .dashboard-kpi-grid {
    gap: 12px !important;
    padding: 12px !important;
  }

  .dashboard-kpi-card,
  .metric-card,
  #load-board-view .board-signal,
  #load-board-view .board-focus-card,
  .compact-summary .summary-item,
  .report-stat-card {
    min-height: 112px !important;
    padding: 16px 17px !important;
  }

  .dashboard-kpi-card strong,
  #load-board-view .board-signal strong,
  .metric-card strong,
  .compact-summary .summary-item strong,
  .report-stat-card strong {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  .dashboard-kpi-card small,
  #load-board-view .board-signal small,
  .metric-card small,
  .compact-summary .summary-item small,
  .report-stat-card small {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .dashboard-layout {
    gap: 22px !important;
  }

  .dashboard-panel-header,
  .panel-header,
  .ui-card-header {
    min-height: 64px;
    padding: 14px 17px !important;
  }

  .dashboard-panel-header h3,
  .panel-header h3,
  .ui-card-header h3 {
    font-size: 16px !important;
  }

  .dashboard-action-row {
    min-height: 108px !important;
    gap: 12px;
    padding: 16px 15px !important;
  }

  .dashboard-action-main strong,
  .dashboard-action-meta strong,
  .dashboard-reminder-row strong,
  .dashboard-mini-row strong {
    font-size: 13px;
  }

  .dashboard-action-row small,
  .dashboard-reminder-row small,
  .dashboard-mini-row small {
    font-size: 11.5px;
  }
}

@media (max-width: 1280px) {
  .app-shell.ui-app-shell {
    grid-template-columns: 210px minmax(0, 1fr) !important;
  }

  .app-shell.ui-app-shell.sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed .sidebar.ui-sidebar {
    padding-inline: 7px !important;
  }

  .app-shell.sidebar-collapsed .nav-item.ui-sidebar-menu-button.active {
    width: 64px !important;
    margin-right: -7px !important;
    transform: none;
  }

  .app-shell.sidebar-collapsed .nav-item.ui-sidebar-menu-button.active .nav-icon {
    transform: translateX(-7px);
  }

  .app-shell.sidebar-collapsed .nav-item.ui-sidebar-menu-button.active::before {
    top: -30px;
    bottom: -30px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 108' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M64 0C64 16.57 50.57 30 34 30H24C10.75 30 0 40.75 0 54C0 67.25 10.75 78 24 78H34C50.57 78 64 91.43 64 108V0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 108' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M64 0C64 16.57 50.57 30 34 30H24C10.75 30 0 40.75 0 54C0 67.25 10.75 78 24 78H34C50.57 78 64 91.43 64 108V0Z'/%3E%3C/svg%3E");
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-action-queue {
    grid-template-columns: minmax(230px, 0.28fr) minmax(0, 1fr);
  }

  .dashboard-action-insight-top {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .dashboard-signal-donut {
    width: 112px;
    height: 112px;
  }
}

@media (max-width: 1024px) {
  .main.ui-main {
    padding-inline: 16px !important;
  }

  .topbar .search {
    width: min(360px, 42vw);
  }

  .dashboard-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "priority priority"
      "reminders billing" !important;
    gap: 16px !important;
  }

  .dashboard-action-queue {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-action-insights {
    border-top: 1px solid var(--apex-border);
    border-right: 0;
  }

  .compact-summary,
  .report-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .app-shell.ui-app-shell,
  .app-shell.ui-app-shell.sidebar-collapsed {
    display: block !important;
    min-height: 100dvh;
  }

  .sidebar.ui-sidebar {
    position: sticky !important;
    top: 0;
    width: 100% !important;
    height: auto !important;
    min-height: 60px;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    overflow: hidden;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
  }

  .brand.ui-sidebar-header {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 !important;
  }

  .brand-logo-shell {
    flex-basis: 40px;
    width: 40px !important;
    height: 40px !important;
  }

  .brand-logo {
    width: 32px !important;
    height: 24px !important;
  }

  .nav-list.ui-sidebar-menu {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 4px !important;
    margin: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .nav-list.ui-sidebar-menu::-webkit-scrollbar {
    display: none;
  }

  .nav-item.ui-sidebar-menu-button,
  .nav-item.ui-sidebar-menu-button.active {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    transform: none;
  }

  .nav-item.ui-sidebar-menu-button.active {
    align-self: center;
    margin-right: 0 !important;
    background: var(--apex-workspace) !important;
    box-shadow: none !important;
  }

  .nav-item.ui-sidebar-menu-button.active::before,
  .nav-item.ui-sidebar-menu-button.active::after {
    display: none !important;
  }

  .nav-item.ui-sidebar-menu-button.active .nav-icon {
    transform: none;
  }

  .sidebar .nav-label {
    display: none !important;
  }

  .sidebar-toggle.ui-button {
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  .main.ui-main {
    padding: 0 12px 18px !important;
  }

  .topbar.ui-topbar {
    position: relative !important;
    min-height: 64px;
    padding: 10px 0 !important;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .topbar .search {
    flex: 1 1 100%;
    width: 100%;
  }

  .topbar .ui-select-wrap {
    flex: 1 1 auto;
    width: auto;
  }

  .main.ui-main > .view.ui-page {
    padding-top: 14px;
  }

  .dashboard-hero,
  #load-board-view .board-command,
  .view:not(#dashboard-view):not(#load-board-view) > .section-heading {
    min-height: 0;
    padding: 6px 0 14px !important;
  }

  .dashboard-hero,
  .dashboard-hero-actions,
  #load-board-view .board-command-title,
  .view > .section-heading {
    align-items: flex-start !important;
  }

  .dashboard-hero,
  #load-board-view .board-command-title,
  .view > .section-heading {
    flex-direction: column !important;
  }

  .dashboard-hero-actions,
  .board-command .button-row,
  .view > .section-heading > .primary-action,
  .view > .section-heading > .secondary-action {
    width: 100%;
  }

  .dashboard-hero-actions > button,
  .board-command .button-row > button {
    flex: 1 1 0;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "priority"
      "reminders"
      "billing" !important;
    gap: 14px !important;
  }

  .table-toolbar,
  .data-table-toolbar,
  #load-board-view .table-toolbar {
    border-radius: 8px !important;
  }

  .table-shell,
  .data-table-shell,
  #load-board-view .table-shell {
    margin-top: 8px !important;
    border-top: 1px solid var(--apex-border) !important;
    border-radius: 8px 8px 0 0 !important;
  }

  .data-table-footer,
  .table-footer {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .table-footer > span,
  .data-table-footer > span {
    margin-right: auto !important;
  }
}

@media (max-width: 480px) {
  .view h2,
  .dashboard-hero h2,
  #load-board-view .board-command-title h2,
  .view > .section-heading h2 {
    font-size: 24px !important;
  }

  .dashboard-kpi-grid,
  .compact-summary,
  .report-stat-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-kpi-card,
  .metric-card,
  #load-board-view .board-signal,
  .compact-summary .summary-item,
  .report-stat-card {
    min-height: 84px !important;
  }

  .data-table-footer,
  .table-footer {
    align-items: stretch !important;
  }

  .table-footer > span,
  .data-table-footer > span {
    width: 100%;
  }

  .table-footer label,
  .data-table-footer label {
    flex: 1 1 auto !important;
  }
}

/* Navy dark mode
 * Normal chrome uses blue-black layers while cobalt is reserved for focus,
 * selection, and data emphasis.
 */
html[data-theme="dark"] body,
html[data-theme="dark"] body .app-shell.ui-app-shell,
html[data-theme="dark"] body .main.ui-main {
  background: var(--apex-workspace) !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .sidebar.ui-sidebar {
  border-right-color: var(--apex-border) !important;
  background: var(--apex-rail) !important;
  background-image: none !important;
  color: var(--apex-rail-text) !important;
}

html[data-theme="dark"] .brand-logo-shell {
  border-color: transparent !important;
  background: #ffffff !important;
}

html[data-theme="dark"] .brand-copy strong,
html[data-theme="dark"] .nav-item.ui-sidebar-menu-button.active,
html[data-theme="dark"] .app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active {
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .nav-item.ui-sidebar-menu-button {
  color: var(--apex-muted) !important;
}

html[data-theme="dark"] .nav-item.ui-sidebar-menu-button:not(.active):hover,
html[data-theme="dark"] .app-shell:not(.sidebar-collapsed) .nav-item.ui-sidebar-menu-button.active {
  border-color: rgba(47, 104, 199, 0.55) !important;
  background: rgba(47, 104, 199, 0.16) !important;
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .nav-item.ui-sidebar-menu-button.active::before {
  background: var(--apex-workspace) !important;
}

html[data-theme="dark"] .app-shell.sidebar-collapsed .nav-item.ui-sidebar-menu-button.active::before {
  filter: none;
}

html[data-theme="dark"] .nav-item.ui-sidebar-menu-button.active .nav-icon {
  color: #7fa8f1 !important;
}

html[data-theme="dark"] .topbar.ui-topbar {
  border-bottom-color: var(--apex-border) !important;
  background: var(--apex-workspace) !important;
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] #load-board-view .board-command,
html[data-theme="dark"] .view:not(#dashboard-view):not(#load-board-view) > .section-heading {
  border-color: var(--apex-border) !important;
  background: var(--apex-workspace) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .dashboard-kpi-grid,
html[data-theme="dark"] .compact-summary,
html[data-theme="dark"] .report-stat-grid,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .data-table-shell,
html[data-theme="dark"] .data-table-footer,
html[data-theme="dark"] .table-toolbar,
html[data-theme="dark"] .data-table-toolbar,
html[data-theme="dark"] #load-board-view .table-toolbar,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .wide-modal,
html[data-theme="dark"] .detail-modal,
html[data-theme="dark"] .billing-detail-modal,
html[data-theme="dark"] .ui-dialog-content,
html[data-theme="dark"] .notification-panel {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: var(--apex-shadow-1) !important;
}

html[data-theme="dark"] .dashboard-kpi-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] #load-board-view .board-signal,
html[data-theme="dark"] #load-board-view .board-focus-card,
html[data-theme="dark"] .compact-summary .summary-item,
html[data-theme="dark"] .report-stat-card,
html[data-theme="dark"] .info-tile,
html[data-theme="dark"] .dashboard-action-metric,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .panel.ui-card,
html[data-theme="dark"] .settings-section.ui-card {
  border-color: var(--apex-border) !important;
  border-left-color: var(--apex-border) !important;
  background: var(--apex-card-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dashboard-panel-header,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .ui-card-header,
html[data-theme="dark"] .table-shell thead th,
html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .data-table-head {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .dashboard-action-row,
html[data-theme="dark"] .dashboard-reminder-row,
html[data-theme="dark"] .dashboard-mini-row,
html[data-theme="dark"] .mini-record-row,
html[data-theme="dark"] .reminder-item,
html[data-theme="dark"] .timeline-item {
  border-color: var(--apex-border) !important;
  background: var(--apex-card-surface) !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .data-table tbody td,
html[data-theme="dark"] .data-table-cell,
html[data-theme="dark"] #load-board-view .load-table tbody td {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .dashboard-action-row:hover,
html[data-theme="dark"] .dashboard-reminder-row:hover,
html[data-theme="dark"] .dashboard-mini-row:hover,
html[data-theme="dark"] .mini-record-row:hover,
html[data-theme="dark"] .reminder-item:hover,
html[data-theme="dark"] .data-table tbody tr:hover td,
html[data-theme="dark"] .data-table-row:hover .data-table-cell,
html[data-theme="dark"] #load-board-view .load-table tbody tr:hover td {
  background: var(--apex-surface-hover) !important;
}

html[data-theme="dark"] .ui-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .ui-input-shell,
html[data-theme="dark"] .table-search,
html[data-theme="dark"] .search,
html[data-theme="dark"] .view-switch,
html[data-theme="dark"] #load-board-view .view-switch {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-ink) !important;
}

html[data-theme="dark"] .search input,
html[data-theme="dark"] .table-search input,
html[data-theme="dark"] .ui-input-shell input {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="dark"] .search input:focus,
html[data-theme="dark"] .search input:focus-visible,
html[data-theme="dark"] .table-search input:focus,
html[data-theme="dark"] .table-search input:focus-visible,
html[data-theme="dark"] .ui-input-shell input:focus,
html[data-theme="dark"] .ui-input-shell input:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .ui-button-outline,
html[data-theme="dark"] .compact-action,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .sidebar-toggle.ui-button {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-ink) !important;
}

html[data-theme="dark"] .secondary-action:hover,
html[data-theme="dark"] .ui-button-outline:hover,
html[data-theme="dark"] .compact-action:hover,
html[data-theme="dark"] .text-button:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .sidebar-toggle.ui-button:hover {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-surface-hover) !important;
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .ui-button-primary,
html[data-theme="dark"] .board-command .primary-action,
html[data-theme="dark"] .view > .section-heading .primary-action,
html[data-theme="dark"] .primary-action.ui-button-primary {
  border-color: var(--apex-info-line) !important;
  background: #2f68c7 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .primary-action:hover,
html[data-theme="dark"] .ui-button-primary:hover,
html[data-theme="dark"] .board-command .primary-action:hover,
html[data-theme="dark"] .view > .section-heading .primary-action:hover,
html[data-theme="dark"] .primary-action.ui-button-primary:hover {
  border-color: var(--apex-button-primary-hover-border) !important;
  background: var(--apex-button-primary-hover-bg) !important;
  background-image: none !important;
  color: var(--apex-button-primary-hover-fg) !important;
  box-shadow: 0 12px 28px rgba(47, 104, 199, 0.28) !important;
}

html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .ui-tabs-trigger.active,
html[data-theme="dark"] .view-switch .filter-chip.active,
html[data-theme="dark"] #load-board-view .view-switch .filter-chip.active {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.critical,
html[data-theme="dark"] #load-board-view .board-signal.critical,
html[data-theme="dark"] .compact-summary .summary-item.attention,
html[data-theme="dark"] .report-stat-card.watch {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.watch,
html[data-theme="dark"] #load-board-view .board-signal.watch,
html[data-theme="dark"] #load-board-view .board-signal.billing {
  border-color: var(--apex-warning-line) !important;
  background: var(--apex-warning-soft) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.ready,
html[data-theme="dark"] #load-board-view .board-signal.ready,
html[data-theme="dark"] #load-board-view .board-focus-card {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
}

/* Add tone-card-fill to the Load Board snapshot grid to restore colored fills. */
#load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal,
html[data-theme="dark"] #load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
}

#load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal:hover,
#load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal:focus-visible,
html[data-theme="dark"] #load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal:hover,
html[data-theme="dark"] #load-board-view .board-signal-grid:not(.tone-card-fill) .board-signal:focus-visible {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-hover) !important;
  background-image: none !important;
}

#load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.critical,
html[data-theme="dark"] #load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.critical {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
}

#load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.watch,
#load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.billing,
html[data-theme="dark"] #load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.watch,
html[data-theme="dark"] #load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.billing {
  border-color: var(--apex-warning-line) !important;
  background: var(--apex-warning-soft) !important;
}

#load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.ready,
html[data-theme="dark"] #load-board-view .board-signal-grid.action-snapshot.tone-card-fill .board-signal.ready {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
}

html[data-theme="dark"] .dashboard-action-queue {
  --queue-carrier: #5f8fdd;
  --queue-carrier-soft: var(--apex-surface-subtle);
  --queue-carrier-line: var(--apex-info-line);
  --queue-appointment: var(--apex-warning);
  --queue-appointment-soft: var(--apex-warning-soft);
  --queue-appointment-line: var(--apex-warning-line);
  --queue-storage: #769fdf;
  --queue-storage-soft: var(--apex-surface-subtle);
  --queue-storage-line: var(--apex-border-strong);
  --queue-customer: #477bcf;
  --queue-customer-soft: var(--apex-surface-subtle);
  --queue-customer-line: var(--apex-border-strong);
  --queue-billing: #9ebbea;
  --queue-billing-soft: var(--apex-surface-subtle);
  --queue-billing-line: var(--apex-border-strong);
}

html[data-theme="dark"] .dashboard-action-insights {
  border-right-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
}

html[data-theme="dark"] .dashboard-signal-donut::before {
  background: var(--apex-surface) !important;
  box-shadow: inset 0 0 0 1px var(--apex-border);
}

html[data-theme="dark"] .dashboard-signal-donut strong,
html[data-theme="dark"] .dashboard-action-insight-copy strong {
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .dashboard-signal-donut small,
html[data-theme="dark"] .dashboard-action-insight-copy span,
html[data-theme="dark"] .dashboard-action-insight-copy small,
html[data-theme="dark"] .dashboard-action-metric span {
  color: var(--apex-muted) !important;
}

html[data-theme="dark"] .dashboard-action-metric::before {
  background: var(--apex-border-strong) !important;
}

html[data-theme="dark"] .dashboard-action-metric.appointment::before {
  background: var(--apex-warning) !important;
}

html[data-theme="dark"] .dashboard-action-metric.carrier strong,
html[data-theme="dark"] .dashboard-action-metric.storage strong,
html[data-theme="dark"] .dashboard-action-metric.customer strong,
html[data-theme="dark"] .dashboard-action-metric.billing strong {
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .dashboard-action-metric.appointment strong {
  color: var(--apex-warning) !important;
}

html[data-theme="dark"] .dashboard-kpi-card .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.critical .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.watch .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.billing .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.ready .dashboard-kpi-icon {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-muted) !important;
  color: var(--apex-info) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dashboard-kpi-card:hover .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.critical:hover .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.watch:hover .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.billing:hover .dashboard-kpi-icon,
html[data-theme="dark"] .dashboard-kpi-card.ready:hover .dashboard-kpi-icon {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] .dashboard-kpi-card span,
html[data-theme="dark"] .metric-card span,
html[data-theme="dark"] .board-signal span,
html[data-theme="dark"] .dashboard-panel-header span,
html[data-theme="dark"] .board-kicker {
  color: var(--apex-muted) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.critical span,
html[data-theme="dark"] #load-board-view .board-signal.critical span,
html[data-theme="dark"] .compact-summary .summary-item.attention span,
html[data-theme="dark"] .report-stat-card.watch span,
html[data-theme="dark"] .status-pill.danger,
html[data-theme="dark"] .pill.danger {
  color: var(--apex-danger) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.watch span,
html[data-theme="dark"] #load-board-view .board-signal.watch span,
html[data-theme="dark"] #load-board-view .board-signal.billing span,
html[data-theme="dark"] .status-pill.warning,
html[data-theme="dark"] .pill.warning {
  color: var(--apex-warning) !important;
}

html[data-theme="dark"] .dashboard-kpi-card.ready span,
html[data-theme="dark"] #load-board-view .board-signal.ready span,
html[data-theme="dark"] .status-pill.success,
html[data-theme="dark"] .pill.success {
  color: var(--apex-success) !important;
}

html[data-theme="dark"] .table-shell .pill.ok,
html[data-theme="dark"] .table-shell .pill.ready,
html[data-theme="dark"] .table-shell .risk-pill.low,
html[data-theme="dark"] .table-shell .priority-pill.low,
html[data-theme="dark"] .table-shell .status-badge.ok,
html[data-theme="dark"] .table-shell .status-badge.ready,
html[data-theme="dark"] .data-table-shell .pill.ok,
html[data-theme="dark"] .data-table-shell .pill.ready,
html[data-theme="dark"] .data-table-shell .risk-pill.low,
html[data-theme="dark"] .data-table-shell .priority-pill.low,
html[data-theme="dark"] .data-table-shell .status-badge.ok,
html[data-theme="dark"] .data-table-shell .status-badge.ready,
html[data-theme="dark"] #load-board-view .table-shell .pill.ready,
html[data-theme="dark"] #load-board-view .table-shell .risk-pill.low,
html[data-theme="dark"] #load-board-view .table-shell .priority-pill.low {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  color: var(--apex-info) !important;
}

html[data-theme="dark"] .view:not(#dashboard-view) > .table-toolbar,
html[data-theme="dark"] .view:not(#dashboard-view) > .data-table-toolbar,
html[data-theme="dark"] #load-board-view .table-toolbar,
html[data-theme="dark"] .table-toolbar,
html[data-theme="dark"] .data-table-toolbar {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .view:not(#dashboard-view) > .table-shell,
html[data-theme="dark"] .view:not(#dashboard-view) > .data-table-shell,
html[data-theme="dark"] #load-board-view .table-shell,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .data-table-shell,
html[data-theme="dark"] .quote-table-shell,
html[data-theme="dark"] .billing-shell {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .view:not(#dashboard-view) > .table-footer,
html[data-theme="dark"] .view:not(#dashboard-view) > .data-table-footer,
html[data-theme="dark"] #load-board-view .table-footer,
html[data-theme="dark"] .table-footer,
html[data-theme="dark"] .data-table-footer {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  background-image: none !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .table-shell table,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .load-table,
html[data-theme="dark"] .quote-table,
html[data-theme="dark"] .billing-table,
html[data-theme="dark"] .customer-table,
html[data-theme="dark"] .carrier-table,
html[data-theme="dark"] #load-board-view .load-table {
  background: var(--apex-surface) !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .table-shell thead th,
html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .load-table thead th,
html[data-theme="dark"] .quote-table thead th,
html[data-theme="dark"] .billing-table thead th,
html[data-theme="dark"] .customer-table thead th,
html[data-theme="dark"] .carrier-table thead th,
html[data-theme="dark"] #load-board-view .load-table thead th {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-muted) !important;
}

html[data-theme="dark"] .table-shell tbody td,
html[data-theme="dark"] .data-table tbody td,
html[data-theme="dark"] .load-table tbody td,
html[data-theme="dark"] .quote-table tbody td,
html[data-theme="dark"] .billing-table tbody td,
html[data-theme="dark"] .customer-table tbody td,
html[data-theme="dark"] .carrier-table tbody td,
html[data-theme="dark"] #load-board-view .load-table tbody td {
  border-color: var(--apex-border) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-text) !important;
}

html[data-theme="dark"] .view-switch,
html[data-theme="dark"] .table-filter-bar,
html[data-theme="dark"] #load-board-view .view-switch {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
}

html[data-theme="dark"] .table-actions .secondary-action,
html[data-theme="dark"] .table-actions .compact-action,
html[data-theme="dark"] .table-actions .ui-button-outline,
html[data-theme="dark"] .table-actions .icon-button,
html[data-theme="dark"] .table-toolbar .secondary-action,
html[data-theme="dark"] .table-toolbar .compact-action,
html[data-theme="dark"] .table-toolbar .ui-button-outline,
html[data-theme="dark"] .table-toolbar .icon-button,
html[data-theme="dark"] .data-table-toolbar .secondary-action,
html[data-theme="dark"] .data-table-toolbar .compact-action,
html[data-theme="dark"] .data-table-toolbar .ui-button-outline,
html[data-theme="dark"] .data-table-toolbar .icon-button,
html[data-theme="dark"] #load-board-view .table-actions .secondary-action,
html[data-theme="dark"] #load-board-view .table-actions .compact-action,
html[data-theme="dark"] #load-board-view .table-actions .ui-button-outline,
html[data-theme="dark"] #load-board-view .table-actions .icon-button {
  border-color: var(--apex-border-strong) !important;
  background: var(--apex-surface-subtle) !important;
  background-image: none !important;
  color: var(--apex-ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .table-actions .secondary-action:hover,
html[data-theme="dark"] .table-actions .compact-action:hover,
html[data-theme="dark"] .table-actions .ui-button-outline:hover,
html[data-theme="dark"] .table-actions .icon-button:hover,
html[data-theme="dark"] .table-actions .secondary-action:focus-visible,
html[data-theme="dark"] .table-actions .compact-action:focus-visible,
html[data-theme="dark"] .table-actions .ui-button-outline:focus-visible,
html[data-theme="dark"] .table-actions .icon-button:focus-visible,
html[data-theme="dark"] .table-toolbar .secondary-action:hover,
html[data-theme="dark"] .table-toolbar .compact-action:hover,
html[data-theme="dark"] .table-toolbar .ui-button-outline:hover,
html[data-theme="dark"] .table-toolbar .icon-button:hover,
html[data-theme="dark"] .table-toolbar .secondary-action:focus-visible,
html[data-theme="dark"] .table-toolbar .compact-action:focus-visible,
html[data-theme="dark"] .table-toolbar .ui-button-outline:focus-visible,
html[data-theme="dark"] .table-toolbar .icon-button:focus-visible,
html[data-theme="dark"] .data-table-toolbar .secondary-action:hover,
html[data-theme="dark"] .data-table-toolbar .compact-action:hover,
html[data-theme="dark"] .data-table-toolbar .ui-button-outline:hover,
html[data-theme="dark"] .data-table-toolbar .icon-button:hover,
html[data-theme="dark"] .data-table-toolbar .secondary-action:focus-visible,
html[data-theme="dark"] .data-table-toolbar .compact-action:focus-visible,
html[data-theme="dark"] .data-table-toolbar .ui-button-outline:focus-visible,
html[data-theme="dark"] .data-table-toolbar .icon-button:focus-visible {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-surface-hover) !important;
  background-image: none !important;
  color: var(--apex-ink-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #load-board-view .data-table-row:hover .row-actions-button,
html[data-theme="dark"] #load-board-view .row-actions-button:hover,
html[data-theme="dark"] #load-board-view .row-actions-button:focus-visible,
html[data-theme="dark"] #load-board-view .row-action-menu[open] .row-actions-button,
html[data-theme="dark"] .billing-charge-menu .row-actions-button:hover,
html[data-theme="dark"] .billing-charge-menu .row-actions-button:focus-visible,
html[data-theme="dark"] .billing-charge-menu[open] .row-actions-button {
  border-color: var(--apex-info-line) !important;
  background: var(--apex-info-soft) !important;
  color: var(--apex-ink-strong) !important;
}

html[data-theme="dark"] #load-board-view .data-table-row:hover .row-actions-button span::before,
html[data-theme="dark"] #load-board-view .row-actions-button:hover span::before,
html[data-theme="dark"] #load-board-view .row-actions-button:focus-visible span::before,
html[data-theme="dark"] #load-board-view .row-action-menu[open] .row-actions-button span::before,
html[data-theme="dark"] .billing-charge-menu .row-actions-button:hover span::before,
html[data-theme="dark"] .billing-charge-menu .row-actions-button:focus-visible span::before,
html[data-theme="dark"] .billing-charge-menu[open] .row-actions-button span::before {
  background: #ffffff !important;
  box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff !important;
}

.copy-icon-button {
  position: relative;
}

.copy-icon-button.copied {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
  color: var(--apex-success) !important;
}

.copy-icon-button.copy-failed {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
  color: var(--apex-danger) !important;
}

.copy-icon-button[data-feedback]::after {
  position: absolute;
  right: -1px;
  bottom: calc(100% + 6px);
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid var(--apex-border-strong);
  border-radius: 6px;
  background: var(--apex-surface-hover);
  color: var(--apex-ink);
  box-shadow: var(--apex-shadow-1);
  content: attr(data-feedback);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

#settings-view .settings-access-banner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--apex-info-line);
  background: var(--apex-info-soft);
}

#settings-view .settings-access-banner > div {
  display: grid;
  gap: 5px;
}

#settings-view .settings-access-banner p,
#settings-view .settings-access-banner label,
#settings-view .settings-section p {
  color: var(--apex-muted);
}

#settings-view .settings-access-banner p {
  margin: 0;
}

#settings-view .settings-access-banner label {
  display: grid;
  flex: 0 0 min(320px, 34vw);
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
}

#settings-view .settings-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--apex-border);
  border-radius: 8px;
  background: var(--apex-surface-subtle);
}

#settings-view .settings-tabs .ui-tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px !important;
  padding: 8px 12px !important;
}

#settings-view .settings-tabs .status-badge {
  font-size: 9px;
}

#settings-view [role="tabpanel"][hidden] {
  display: none;
}

#settings-view #platform-settings-panel .platform-admin-section {
  margin-bottom: 16px;
}

#settings-view .settings-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

#settings-view .settings-section {
  min-width: 0;
  overflow: hidden;
}

#settings-view .settings-span-2 {
  grid-column: 1 / -1;
}

#settings-view .settings-form,
#settings-view .settings-inline-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

#settings-view .settings-form label,
#settings-view .settings-inline-form label,
#settings-view .team-member-add label {
  display: grid;
  gap: 6px;
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 650;
}

#settings-view .settings-inline-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  border-bottom: 1px solid var(--apex-border);
}

#settings-view .team-create-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

#settings-view .settings-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#settings-view .settings-save-status {
  min-height: 20px;
  color: var(--apex-success);
  font-size: 12px;
  font-weight: 650;
}

#settings-view .account-logo-editor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

#settings-view .account-logo-preview {
  display: grid;
  width: 72px;
  height: 72px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--apex-border-strong);
  border-radius: 8px;
  background: var(--apex-surface-muted);
  color: var(--apex-ink);
  font-size: 20px;
  font-weight: 760;
}

#settings-view .account-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#settings-view .settings-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#settings-view .settings-table {
  min-width: 760px;
}

#settings-view .settings-table th,
#settings-view .settings-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

#settings-view .settings-table .ui-button {
  min-height: 34px;
  padding: 7px 10px;
}

#settings-view .team-admin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

#settings-view .team-admin-card {
  overflow: hidden;
  border: 1px solid var(--apex-border);
  background: var(--apex-surface-subtle);
}

#settings-view .team-admin-header,
#settings-view .team-member-row,
#settings-view .team-member-add {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

#settings-view .team-admin-header {
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--apex-border);
}

#settings-view .team-admin-header > div,
#settings-view .team-member-row > span {
  display: grid;
  gap: 3px;
}

#settings-view .team-admin-header span,
#settings-view .team-admin-header small,
#settings-view .team-member-row small {
  color: var(--apex-muted);
  font-size: 11px;
}

#settings-view .team-member-list {
  display: grid;
}

#settings-view .team-member-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr) auto;
  border-bottom: 1px solid var(--apex-border);
  border-radius: 0;
}

#settings-view .team-member-add {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr) auto;
  align-items: end;
  background: var(--apex-surface);
}

#settings-view .settings-remove-button:hover,
#settings-view .settings-remove-button:focus-visible {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
  color: var(--apex-danger) !important;
}

#settings-view .platform-admin-section {
  border-color: var(--apex-info-line) !important;
}

@media (max-width: 980px) {
  #settings-view .settings-admin-grid,
  #settings-view .team-admin-list {
    grid-template-columns: minmax(0, 1fr);
  }

  #settings-view .settings-span-2 {
    grid-column: auto;
  }

  #settings-view .settings-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #settings-view .settings-access-banner {
    align-items: stretch;
    flex-direction: column;
  }

  #settings-view .settings-access-banner label {
    flex-basis: auto;
  }

  #settings-view .settings-inline-form,
  #settings-view .team-create-form,
  #settings-view .team-member-row,
  #settings-view .team-member-add {
    grid-template-columns: minmax(0, 1fr);
  }
}

#load-board-view .board-signal-grid.tone-card-fill .board-signal.critical,
html[data-theme="dark"] #load-board-view .board-signal-grid.tone-card-fill .board-signal.critical {
  border-color: var(--apex-danger-line) !important;
  background: var(--apex-danger-soft) !important;
}

#load-board-view .board-signal-grid.tone-card-fill .board-signal.watch,
#load-board-view .board-signal-grid.tone-card-fill .board-signal.billing,
html[data-theme="dark"] #load-board-view .board-signal-grid.tone-card-fill .board-signal.watch,
html[data-theme="dark"] #load-board-view .board-signal-grid.tone-card-fill .board-signal.billing {
  border-color: var(--apex-warning-line) !important;
  background: var(--apex-warning-soft) !important;
}

#load-board-view .board-signal-grid.tone-card-fill .board-signal.ready,
html[data-theme="dark"] #load-board-view .board-signal-grid.tone-card-fill .board-signal.ready {
  border-color: var(--apex-success-line) !important;
  background: var(--apex-success-soft) !important;
}

#load-board-view .board-signal.priority-task-card {
  cursor: default;
  position: relative !important;
  padding-right: 160px !important;
}

#load-board-view .board-signal.priority-task-card .priority-task-actions {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  z-index: 1;
}

#load-board-view .board-signal.priority-task-card .priority-task-actions .compact-action {
  min-width: 104px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
  white-space: nowrap;
}

#load-board-view .board-signal.priority-task-card .priority-task-actions .compact-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

#load-board-view .grouped-load-table {
  min-width: 1320px;
}

#load-board-view .grouped-load-table [data-group-column="priority"] {
  width: 150px;
}

#load-board-view .grouped-load-table [data-group-column="load"] {
  width: 150px;
}

#load-board-view .grouped-load-table [data-group-column="laneSchedule"] {
  width: 252px;
}

#load-board-view .grouped-load-table [data-group-column="statusAction"] {
  width: 225px;
}

#load-board-view .grouped-load-table [data-group-column="carrierTeam"] {
  width: 210px;
}

#load-board-view .grouped-load-table [data-group-column="moneyBilling"] {
  width: 145px;
}

#load-board-view .status-action-cell .scan-line {
  align-items: flex-start;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.28;
}

#load-board-view .status-action-cell .scan-line > * {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

#load-board-view .grouped-load-table [data-group-column="carrierTeam"] .scan-tag {
  max-width: none;
}

#detail-modal-backdrop .app-modal--detail .detail-header .info-tile.metric-card {
  min-height: 68px !important;
  padding: 11px 12px !important;
}

#detail-modal-backdrop .app-modal--detail .detail-header .info-tile.metric-card span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#detail-modal-backdrop .app-modal--detail .detail-header .info-tile.metric-card strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

#detail-modal-backdrop .app-modal--detail .detail-header .info-tile.metric-card .cell-sub {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

#detail-modal-backdrop .app-modal--detail .detail-header .info-tile.metric-card .pill {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}