:root {
  color-scheme: light;
  --app-bg: #eef1f4;
  --panel: #ffffff;
  --line: #cdd4da;
  --line-dark: #a7afb6;
  --text: #0a1722;
  --muted: #54626f;
  --link: #0a6cba;
  --header: #e3e8ee;
  --row: #ffffff;
  --row-alt: #f1f4f7;
  --row-hover: #dcecfb;
  --attention: #ffc4bc;
  --attention-strong: #d80032;
  --dot-soon: #fff2a8;
  --dot-very-soon: #ffd09a;
  --dot-expired: #ffb5ad;
  --chip-text: #ffffff;
  --focus: #ff6b5e;
  --blue: #0b75cf;
  --green: #58a800;
  --teal: #05a99c;
  --yellow: #af7500;
  --red: #c90028;
  --purple: #7555cc;
  --gray: #69747d;
  --topbar-height: 54px;
  font-family: Arial, Helvetica, sans-serif;
}

body[data-board-style="modern"] {
  --app-bg: #eef3f7;
  --panel: #ffffff;
  --line: #d2dbe3;
  --line-dark: #a9b8c5;
  --text: #132230;
  --muted: #5a6b7a;
  --link: #075f9f;
  --header: #dce7f0;
  --row: #ffffff;
  --row-alt: #f6f9fb;
  --row-hover: #e4f2ff;
  --attention: #ffd9d3;
  --attention-strong: #cf233f;
  --dot-soon: #fff5bf;
  --dot-very-soon: #ffd8a8;
  --dot-expired: #ffc6bd;
  --blue: #1769aa;
  --green: #4a9b35;
  --teal: #008f84;
  --yellow: #a96b00;
  --red: #bd1935;
  --gray: #637282;
  font-family: "Aptos", "Segoe UI", Tahoma, sans-serif;
}

body[data-board-style="command"] {
  color-scheme: dark;
  --app-bg: #071014;
  --panel: #0c171d;
  --line: #25434d;
  --line-dark: #437180;
  --text: #effaff;
  --muted: #9bb5bf;
  --link: #75d6ff;
  --header: #102832;
  --row: #09151a;
  --row-alt: #0f2027;
  --row-hover: #173541;
  --attention: #5a171a;
  --attention-strong: #ff3b4f;
  --dot-soon: #4d4512;
  --dot-very-soon: #633511;
  --dot-expired: #641b1e;
  --focus: #00d4ff;
  --blue: #168bd1;
  --green: #4ab548;
  --teal: #00a99d;
  --yellow: #d68a00;
  --red: #e53046;
  --gray: #697985;
  font-family: "Bahnschrift", "Segoe UI", Tahoma, sans-serif;
}

body[data-board-style="excel"] {
  --app-bg: #e9ebe6;
  --panel: #ffffff;
  --line: #c6c9c2;
  --line-dark: #9aa094;
  --text: #1a1a17;
  --muted: #4a4f47;
  --link: #0563c1;
  --header: #cfe3c4;
  --row: #ffffff;
  --row-alt: #f4f7f1;
  --row-hover: #d7e9f6;
  --attention: #f4cccc;
  --attention-strong: #cc0000;
  --dot-soon: #fff2cc;
  --dot-very-soon: #fce4d6;
  --dot-expired: #f4cccc;
  --blue: #2f75b5;
  --green: #70ad47;
  --teal: #00a99d;
  --yellow: #bf9000;
  --red: #c00000;
  --gray: #7f7f7f;
  font-family: "Aptos Narrow", "Arial Narrow", Arial, sans-serif;
}

body[data-board-style="gozal"] {
  --app-bg: #ecedef;
  --panel: #ffffff;
  --line: #d0d2d5;
  --line-dark: #1a1a1a;
  --text: #0a0a0a;
  --muted: #5b6168;
  --link: #c01015;
  --header: #161616;
  --row: #ffffff;
  --row-alt: #f4f5f6;
  --row-hover: #fdebec;
  --attention: #ffd2d2;
  --attention-strong: #c01015;
  --dot-soon: #fff2a8;
  --dot-very-soon: #ffd09a;
  --dot-expired: #ffb5ad;
  --focus: #c01015;
  --blue: #1f2937;
  --green: #4d9600;
  --teal: #007f78;
  --yellow: #ad7100;
  --red: #b40000;
  --purple: #6b4fc5;
  --gray: #666666;
  font-family: Arial, Helvetica, sans-serif;
}

body[data-board-style="midnight"] {
  color-scheme: dark;
  --app-bg: #0e1220;
  --panel: #161d2f;
  --line: #2a3450;
  --line-dark: #46527a;
  --text: #eef1fb;
  --muted: #9aa6c7;
  --link: #8ab4ff;
  --header: #1b2236;
  --row: #131a2b;
  --row-alt: #1a2236;
  --row-hover: #243358;
  --attention: #43223a;
  --attention-strong: #ff6b9d;
  --dot-soon: #4a431c;
  --dot-very-soon: #5a3a1d;
  --dot-expired: #5a2330;
  --focus: #7c9bff;
  --blue: #6f9bff;
  --green: #46c08a;
  --teal: #2fc4c0;
  --yellow: #e0a83a;
  --red: #ff6b8a;
  --purple: #a78bfa;
  --gray: #6b7799;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

body[data-board-style="slate"] {
  --app-bg: #eceff3;
  --panel: #ffffff;
  --line: #d4dae1;
  --line-dark: #aab4be;
  --text: #1f2933;
  --muted: #5c6b7a;
  --link: #2563a8;
  --header: #e2e8ef;
  --row: #ffffff;
  --row-alt: #f4f7fa;
  --row-hover: #e6eef7;
  --attention: #ffdcd6;
  --attention-strong: #c43048;
  --dot-soon: #fff2c2;
  --dot-very-soon: #ffdcae;
  --dot-expired: #ffc7bf;
  --focus: #3b82c4;
  --blue: #2f6fb0;
  --green: #3f9a4f;
  --teal: #0a9488;
  --yellow: #a87400;
  --red: #c43048;
  --purple: #6d52c0;
  --gray: #64727f;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

body[data-board-style="contrast"] {
  --app-bg: #ffffff;
  --panel: #ffffff;
  --line: #000000;
  --line-dark: #000000;
  --text: #000000;
  --muted: #1a1a1a;
  --link: #0033cc;
  --header: #e8e8e8;
  --row: #ffffff;
  --row-alt: #ededed;
  --row-hover: #fff09a;
  --attention: #ffccc2;
  --attention-strong: #cc0000;
  --dot-soon: #ffe35c;
  --dot-very-soon: #ffb35c;
  --dot-expired: #ff8f85;
  --focus: #cc0000;
  --blue: #003fcc;
  --green: #006b1f;
  --teal: #006b66;
  --yellow: #7a5000;
  --red: #cc0000;
  --purple: #5a23b0;
  --gray: #2e2e2e;
  font-family: Arial, Helvetica, sans-serif;
}

body[data-board-style="contrast"] .tracker-table th {
  border-color: #000000;
  text-transform: uppercase;
  font-size: 11px;
}

body.dark {
  color-scheme: dark;
  --app-bg: #11161a;
  --panel: #1a2026;
  --line: #39424a;
  --line-dark: #56616a;
  --text: #edf3f6;
  --muted: #9cabb6;
  --link: #6dbdff;
  --header: #222a31;
  --row: #151b20;
  --row-alt: #1e252b;
  --row-hover: #263746;
  --attention: #5e211f;
  --attention-strong: #ff7f75;
  --dot-soon: #4b421c;
  --dot-very-soon: #5b351d;
  --dot-expired: #5d2422;
  --focus: #ff8a7f;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
}

/* Fill the viewport with a flexible column so the page's main area (and its bottom
   scrollbar) always fits on-screen. The topbar wraps to different heights depending on
   width, so the old fixed `calc(100vh - var(--topbar-height))` let the board spill below
   the fold and hid the horizontal scrollbar. Flex makes the shell take exactly what's
   left under the real topbar height. */
body:not(.signed-out) {
  display: flex;
  flex-direction: column;
}
body:not(.signed-out) .topbar { flex: 0 0 auto; }
body:not(.signed-out) .board-shell,
body:not(.signed-out) .shop-shell,
body:not(.signed-out) .cases-shell,
body:not(.signed-out) .action-shell,
body:not(.signed-out) .dashboard-shell {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}

body.signed-out .topbar,
body.signed-out .board-shell,
body.signed-out .shop-shell,
body.signed-out .cases-shell,
body.signed-out .action-shell,
body.signed-out .dashboard-shell {
  display: none;
}

body[data-page="shop-map"] .board-shell,
body[data-page="shop-map"] .cases-shell,
body[data-page="shop-map"] .action-shell,
body[data-page="shop-map"] .dashboard-shell {
  display: none !important;
}

body[data-page="shop-map"] .shop-shell {
  display: grid !important;
}

body[data-page="cases"] .board-shell,
body[data-page="cases"] .shop-shell,
body[data-page="cases"] .action-shell,
body[data-page="cases"] .dashboard-shell {
  display: none !important;
}

body[data-page="cases"] .cases-shell {
  display: grid !important;
}

body[data-page="board"] .shop-shell,
body[data-page="board"] .cases-shell,
body[data-page="board"] .action-shell,
body[data-page="board"] .dashboard-shell {
  display: none !important;
}

body[data-page="actions"] .board-shell,
body[data-page="actions"] .shop-shell,
body[data-page="actions"] .cases-shell,
body[data-page="actions"] .dashboard-shell {
  display: none !important;
}

body[data-page="actions"] .action-shell {
  display: grid !important;
}

body[data-page="dashboard"] .board-shell,
body[data-page="dashboard"] .shop-shell,
body[data-page="dashboard"] .cases-shell,
body[data-page="dashboard"] .action-shell {
  display: none !important;
}

body[data-page="dashboard"] .dashboard-shell {
  display: grid !important;
}

body:not([data-page="dvir"]) .dvir-shell {
  display: none !important;
}

body[data-page="dvir"] .dvir-shell {
  display: grid !important;
}

body:not([data-page="assets"]) .assets-shell {
  display: none !important;
}

body[data-page="assets"] .assets-shell {
  display: grid !important;
}

body[data-page="shop-map"] .filters,
body[data-page="cases"] .filters,
body[data-page="actions"] .filters,
body[data-page="dashboard"] .filters,
body[data-page="dvir"] .filters,
body[data-page="assets"] .filters,
body[data-page="fleet-map"] .filters,
body[data-page="pm"] .filters {
  display: none !important;
}

body[data-page="shop-map"] .topbar,
body[data-page="cases"] .topbar,
body[data-page="actions"] .topbar,
body[data-page="dashboard"] .topbar,
body[data-page="dvir"] .topbar,
body[data-page="assets"] .topbar,
body[data-page="fleet-map"] .topbar,
body[data-page="pm"] .topbar {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "nav . toolbar";
}

.login-screen {
  display: grid;
  position: relative;
  isolation: isolate;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: #050505;
}

.login-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #050505 url("/gozal-login-bg.png") center center / cover no-repeat;
  content: "";
  opacity: 0.2;
  pointer-events: none;
}

.login-screen[hidden] {
  display: none;
}

.login-panel {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid #b40000;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
}

.login-brand {
  display: grid;
  gap: 10px;
  padding-bottom: 6px;
}

.login-panel h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

.text-logo {
  display: grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 7px solid #b40000;
  background: #fff;
  color: #000;
  text-transform: uppercase;
}

.text-logo strong {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 34px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 4px;
}

.text-logo .brand-inc,
.board-brand .brand-inc {
  color: #b40000;
}

.text-logo .brand-tagline {
  display: block;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 6px;
}

.login-panel label {
  display: grid;
  gap: 4px;
}

.login-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.topbar {
  display: grid;
  grid-template-columns: max-content minmax(520px, 1fr) max-content;
  grid-template-areas:
    "nav filters toolbar";
  align-items: stretch;
  min-width: 1024px;
  height: auto;
  min-height: var(--topbar-height);
  background: var(--header);
  border: 1px solid var(--line-dark);
  border-bottom: 0;
}

.nav-actions,
.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-right: 1px solid var(--line);
}

.nav-actions {
  grid-area: nav;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.toolbar {
  grid-area: toolbar;
  justify-content: flex-end;
  border-right: 0;
  border-left: 1px solid var(--line);
  position: relative;
  z-index: 2;
}

.board-brand {
  display: grid;
  flex: 0 0 160px;
  align-content: center;
  height: 30px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-left: 4px solid #b40000;
  border-radius: 3px;
  background: #fff;
  color: #000;
  text-transform: uppercase;
}

.board-brand strong {
  display: flex;
  gap: 5px;
  align-items: baseline;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  white-space: nowrap;
}

.board-brand .brand-tagline {
  display: block;
  color: #000;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 3.6px;
  white-space: nowrap;
}

.current-user {
  max-width: 86px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-select,
.density-select {
  width: 132px;
  min-height: 26px;
  padding: 2px 6px;
}

.density-select {
  width: 116px;
}

.nav-button,
.icon-button,
.plain-button,
.primary-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--link);
}

.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 76px;
  min-height: 30px;
  padding: 0 10px;
  border-color: #b8c3cc;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #eef3f7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(7, 19, 31, 0.08);
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav-button span {
  white-space: nowrap;
}

.nav-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.nav-button:hover {
  border-color: var(--line-dark);
  background: linear-gradient(#ffffff, #e4f2ff);
}

.icon-button:hover {
  border-color: var(--line-dark);
  background: rgba(0, 109, 188, 0.08);
}

.nav-button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(7, 19, 31, 0.16);
}

#headerBoardButton {
  display: none;
}

body[data-page="shop-map"] #shopMapButton,
body[data-page="cases"] #casesButton,
body[data-page="actions"] #actionQueueButton,
body[data-page="dashboard"] #dashboardButton {
  display: none;
}

body[data-page="shop-map"] #headerBoardButton,
body[data-page="cases"] #headerBoardButton,
body[data-page="actions"] #headerBoardButton,
body[data-page="dashboard"] #headerBoardButton {
  display: inline-flex;
}

.filters {
  grid-area: filters;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(82px, 0.44fr) minmax(142px, 0.62fr);
  gap: 6px;
  align-items: end;
  padding: 3px 6px 4px;
  border-top: 0;
}

.field,
.search-field,
.dialog-grid label,
.lease-grid label {
  display: grid;
  gap: 2px;
}

.field span {
  color: var(--text);
  font-size: 10px;
  line-height: 11px;
}

.dialog-grid span,
.lease-grid span {
  color: var(--text);
  font-size: 11px;
  line-height: 12px;
}

select,
input,
textarea {
  min-height: 26px;
  width: 100%;
  border: 1px solid var(--line-dark);
  background: var(--panel);
  color: var(--text);
  border-radius: 3px;
  padding: 3px 8px;
  outline: none;
}

select:focus,
input:focus,
textarea:focus,
[contenteditable="true"]:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px rgba(255, 107, 94, 0.35);
}

select {
  appearance: auto;
}

.manual-date-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
}

.manual-date-picker {
  min-width: 34px;
  padding: 2px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--link);
}

.icon-button svg {
  width: 16px;
  height: 16px;
}

.download-control {
  position: relative;
  display: inline-grid;
}

.download-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 50;
  display: grid;
  min-width: 162px;
  padding: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(7, 19, 31, 0.18);
}

.download-menu[hidden] {
  display: none;
}

.download-menu button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

.download-menu button:hover,
.download-menu button:focus-visible {
  background: rgba(0, 109, 188, 0.1);
  color: var(--link);
  outline: 0;
}

.board-shell {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-height));
  min-width: 1024px;
}

.shop-shell {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-height));
  min-width: 1024px;
  background: var(--app-bg);
}

.shop-shell[hidden] {
  display: none;
}

.cases-shell {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-height));
  min-width: 1024px;
  background: var(--app-bg);
}

.cases-shell[hidden] {
  display: none;
}

.action-shell,
.dashboard-shell {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-height));
  min-width: 1024px;
  background: var(--app-bg);
}

.action-shell[hidden],
.dashboard-shell[hidden] {
  display: none;
}

.cases-top,
.ops-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line-dark);
  border-bottom: 0;
  background: var(--panel);
}

.cases-top h2,
.ops-page-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.cases-status,
.ops-page-note {
  color: var(--muted);
}

.action-board {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line-dark);
  background: var(--panel);
  overflow: auto;
}

.action-card {
  display: grid;
  grid-template-columns: 92px 1fr minmax(260px, 0.82fr) minmax(240px, 0.72fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--yellow);
  background: var(--row);
}

.action-card.high {
  border-left-color: var(--red);
}

.action-card.medium {
  border-left-color: var(--yellow);
}

.action-card.low {
  border-left-color: var(--blue);
}

.action-priority {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--header);
  color: var(--text);
  font-weight: 800;
  text-transform: uppercase;
}

.action-card.high .action-priority {
  background: var(--red);
  color: #ffffff;
}

.action-card.medium .action-priority {
  background: var(--yellow);
  color: #ffffff;
}

.action-card.low .action-priority {
  background: var(--blue);
  color: #ffffff;
}

.action-main,
.action-case,
.action-advice {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.action-main strong,
.action-case strong,
.action-advice strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-main span,
.action-case span,
.action-advice span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line-dark);
  background: var(--panel);
  overflow: auto;
}

.kpi-card,
.dashboard-panel {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--row);
}

.kpi-card {
  min-height: 72px;
}

.kpi-card span {
  color: var(--muted);
}

.kpi-card strong {
  font-size: 24px;
  line-height: 1;
}

.dashboard-panel {
  grid-column: span 3;
  align-content: start;
}

.dashboard-panel.wide {
  grid-column: 1 / -1;
}

.dashboard-panel h3 {
  margin: 0;
  font-size: 14px;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mini-table th,
.mini-table td {
  height: 25px;
  padding: 3px 5px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.timeline-wrap {
  display: grid;
  gap: 8px;
  max-height: min(620px, calc(100vh - 120px));
  padding: 12px;
  overflow: auto;
}

.timeline-item {
  display: grid;
  grid-template-columns: 150px 110px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--row);
}

.timeline-item time,
.timeline-item span {
  color: var(--muted);
}

.cases-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(720px, 62vw);
}

.case-search-field {
  flex: 1 1 360px;
  min-width: 240px;
}

.case-sort-field {
  display: block;
  position: relative;
  flex: 0 0 230px;
}

.case-sort-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.case-sort-field select {
  min-height: 30px;
  height: 30px;
}

.case-columns-control {
  position: relative;
  flex: 0 0 auto;
}

.case-columns-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: 270px;
  max-height: min(460px, calc(100vh - 150px));
  padding: 10px;
  border: 1px solid var(--line-dark);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(7, 19, 31, 0.22);
  overflow: auto;
}

.case-columns-panel[hidden] {
  display: none;
}

.case-columns-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.case-columns-panel-head button {
  width: auto;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--row);
  color: var(--link);
  font-weight: 700;
  cursor: pointer;
}

.case-columns-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.case-column-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
}

.case-column-option:hover {
  background: var(--row-hover);
}

.case-column-option input {
  width: 14px;
  min-height: 14px;
  flex: 0 0 auto;
}

.cases-table-wrap {
  min-height: 0;
  border: 1px solid var(--line-dark);
  background: var(--panel);
  overflow: auto;
}

.cases-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.cases-table th,
.cases-table td {
  min-width: 96px;
  max-width: 200px;
  height: 26px;
  padding: 2px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.cases-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--header);
  color: var(--text);
  font-weight: 700;
}

.cases-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid var(--line-dark);
  background: #fff7d6;
  color: #111;
  font-weight: 700;
}

.cases-table tfoot .case-total-amount {
  background: #111;
  color: #fff;
  text-align: right;
  font-size: 13px;
}

.cases-table tbody tr {
  height: 26px;
  background: var(--row);
  cursor: default;
}

.cases-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}

.cases-table tbody tr:hover {
  background: var(--row-hover);
}

.cases-table tbody tr.has-live-editor {
  box-shadow: inset 0 0 0 2px rgba(175, 117, 0, 0.42);
}

.cases-table td.case-cell-live-editor {
  position: relative;
  padding-right: 58px;
  box-shadow: inset 0 -2px 0 var(--yellow);
}

.case-edit-presence-badge {
  position: absolute;
  top: 50%;
  right: 4px;
  max-width: 50px;
  height: 18px;
  padding: 1px 5px;
  border: 1px solid rgba(175, 117, 0, 0.55);
  border-radius: 999px;
  background: #fff0bf;
  color: #5c3a00;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
}

.cases-table .case-col-notes,
.cases-table .case-col-attachments {
  min-width: 220px;
}

.cases-table .case-col-caseId,
.cases-table .case-col-status,
.cases-table .case-col-priority {
  min-width: 78px;
}

.cases-table .case-col-caseId {
  min-width: 74px;
  max-width: 74px;
  width: 74px;
}

.cases-table .case-col-daysOpen {
  min-width: 70px;
  max-width: 70px;
  width: 70px;
  text-align: right;
}

.cases-table .case-col-createdAt,
.cases-table .case-col-lastUpdateDate,
.cases-table .case-col-editedAt {
  min-width: 112px;
  max-width: 112px;
  width: 112px;
}

.cases-table .case-col-driverChargedDate {
  min-width: 126px;
  max-width: 126px;
  width: 126px;
  padding-right: 3px;
  padding-left: 3px;
}

.case-date-input {
  width: 100%;
  min-height: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  line-height: 18px;
}

.cases-table .case-col-status {
  min-width: 116px;
  max-width: 116px;
  width: 116px;
}

.cases-table .case-col-responsibility {
  min-width: 86px;
  max-width: 86px;
  width: 86px;
}

.cases-table .case-col-paymentMethod {
  min-width: 108px;
  max-width: 108px;
  width: 108px;
}

.cases-table .case-col-truck,
.cases-table .case-col-trailer {
  min-width: 92px;
  max-width: 92px;
  width: 92px;
}

.cases-table .case-col-driver {
  min-width: 118px;
  max-width: 118px;
  width: 118px;
}

.cases-table .case-col-fleetMember,
.cases-table .case-col-serviceType {
  min-width: 96px;
  max-width: 96px;
  width: 96px;
}

.cases-table .case-col-priority {
  min-width: 70px;
  max-width: 70px;
  width: 70px;
  padding-right: 4px;
  padding-left: 4px;
  text-align: center;
}

.cases-table .case-col-alvysTicket {
  min-width: 72px;
  max-width: 72px;
  width: 72px;
}

.cases-table .case-col-estimatedAmount,
.cases-table .case-col-finalAmount {
  min-width: 96px;
  max-width: 96px;
  width: 96px;
  text-align: right;
}

.case-id-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 20px;
  min-height: 0;
  padding: 0 6px;
  border: 1px solid rgba(0, 109, 188, 0.35);
  border-radius: 3px;
  box-sizing: border-box;
  background: rgba(0, 109, 188, 0.08);
  color: var(--link);
  font: inherit;
  font-weight: 700;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-id-button:hover,
.case-id-button:focus {
  border-color: var(--link);
  background: rgba(0, 109, 188, 0.16);
  outline: none;
}

.case-chip {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  min-width: 0;
  max-width: none;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  box-sizing: border-box;
  background: var(--gray);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-priority-pill {
  width: 42px !important;
  min-width: 42px;
  max-width: 42px;
  padding-right: 0;
  padding-left: 0;
}

.case-status-pill {
  width: 100px;
}

.case-resp-pill {
  width: 72px;
}

.case-payment-pill {
  width: 92px;
}

.case-status-open {
  background: #0b75cf;
}

.case-status-progress {
  background: #7856d6;
}

.case-status-waiting {
  background: #bf7b00;
}

.case-status-closed {
  background: var(--green);
}

.case-priority-urgent {
  background: #c90028;
}

.case-priority-high {
  background: #f28c00;
}

.case-priority-low {
  background: var(--gray);
}

.case-priority-p3 {
  background: #236192;
}

.case-resp-cr {
  background: #006dbc;
}

.case-resp-dr {
  background: #00a99d;
}

.case-resp-vr {
  background: #7555cc;
}

.case-resp-wr {
  background: #69747d;
}

.case-resp-inv {
  background: #111111;
}

.case-resp-tbd {
  background: #af7500;
}

.case-resp-ne {
  background: #c90028;
}

.case-resp-fcr {
  background: #4d9600;
}

.case-resp-other {
  background: #53616e;
}

.case-pay-loves {
  background: #0b7f3a;
}

.case-pay-efs {
  background: #005bbb;
}

.case-pay-cc {
  background: #6f42c1;
}

.case-pay-driver {
  background: #b45309;
}

.case-pay-zelle {
  background: #6d1ed4;
}

.case-pay-bank {
  background: #334155;
}

.case-pay-tbd {
  background: #8a6d00;
}

.case-pay-none {
  background: #56616a;
}

.case-pay-warranty {
  background: #0d7a6f;
}

.case-pay-boss {
  background: #b8348a;
}

.case-pay-other {
  background: #53616e;
}

.case-record-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.shop-map-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line-dark);
  border-bottom: 0;
  background: var(--panel);
}

.shop-map-top h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1;
}

.shop-map-status {
  color: var(--muted);
}

.shop-map-layout {
  display: grid;
  grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--line-dark);
  background: var(--panel);
}

.shop-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 8px;
  border-right: 1px solid var(--line-dark);
  overflow: auto;
}

.shop-form {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
}

.shop-form[hidden] {
  display: none;
}

.shop-form-title {
  display: grid;
  gap: 1px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.shop-form-title strong {
  font-size: 13px;
  text-transform: uppercase;
}

.shop-form-title span {
  color: var(--muted);
}

.shop-form label {
  display: grid;
  gap: 3px;
}

.shop-form span {
  font-size: 11px;
}

.quick-note-group {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.quick-note-group legend {
  padding: 0 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.quick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quick-chip {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.quick-chip:hover,
.quick-chip.active {
  border-color: var(--attention-strong);
  background: var(--attention-strong);
  color: #ffffff;
}

.pin-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.coord-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-actions {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.25fr;
  gap: 6px;
  align-items: center;
}

.danger-button {
  color: var(--attention-strong);
  border-color: var(--line-dark);
}

.shop-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--row);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.shop-search:focus {
  outline: none;
  border-color: var(--focus);
}

.shop-list {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  overflow: auto;
}

.shop-list-item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--row);
  color: var(--text);
  text-align: left;
}

.shop-list-item strong,
.shop-list-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-list-item span {
  color: var(--muted);
  font-size: 11px;
}

.shop-list-item:hover,
.shop-list-item.active {
  border-color: var(--focus);
  background: var(--row-hover);
}

.empty-shop-list {
  padding: 10px;
  color: var(--muted);
}

.map-card {
  position: relative;
  min-height: 0;
}

.shop-map {
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: #1e252b;
}

.map-legend {
  background: rgba(255, 255, 255, 0.94);
  color: #1a1d21;
  padding: 7px 9px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 11px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 12px;
}

.map-legend strong {
  grid-column: 1 / -1;
  font-size: 11px;
  margin-bottom: 2px;
}

.map-legend-row {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.map-legend-row i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}

.shop-map-marker {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transform: rotate(-45deg);
}

.shop-map-marker.saved {
  background: var(--red);
}

.shop-map-marker.draft {
  background: var(--blue);
}

.shop-map-marker.trailer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #006dbc;
  transform: rotate(45deg);
}

.shop-map-marker.trailer::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: #ffffff;
  opacity: 0.9;
}

.shop-popup {
  display: grid;
  gap: 3px;
  min-width: 160px;
}

.shop-popup span {
  color: #4b5563;
}

.trailer-map-popup strong {
  color: #006dbc;
}

.last-signal-cell.no-signal {
  color: #8a1f11;
  font-weight: 700;
}

.last-signal-cell.signal-old {
  background: #fff4c2;
}

.last-signal-cell.signal-stale {
  background: #ffd4d4;
  color: #8a1f11;
  font-weight: 700;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(6, max-content) minmax(280px, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  background: var(--panel);
  border: 1px solid var(--line-dark);
  border-bottom: 0;
}

.summary-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 96px;
  white-space: nowrap;
}

.summary-label {
  color: var(--muted);
}

.summary-item strong {
  font-size: 14px;
}

.search-field {
  position: relative;
  justify-self: end;
  width: min(520px, 100%);
}

.search-field svg {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-field input {
  padding-left: 28px;
}

.sync-status {
  min-width: 120px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.table-wrap {
  overflow: auto;
  overflow-x: auto; /* explicit bottom slider to reach Status/Memo/Samsara/Last-update */
  border: 1px solid var(--line-dark);
  background: var(--panel);
  scrollbar-gutter: stable;
  scrollbar-width: auto; /* Firefox: normal (grabbable) bars, not thin */
  scrollbar-color: #9aa4b3 transparent;
}
/* Chunky, obvious scrollbars for the board table — especially the bottom slider. */
.table-wrap::-webkit-scrollbar { width: 14px; height: 14px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #aab3c2;
  border-radius: 8px;
  border: 3px solid var(--panel);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: #8b96a8; }
.table-wrap::-webkit-scrollbar-track { background: color-mix(in srgb, var(--panel) 55%, #cfd5df); }
.table-wrap::-webkit-scrollbar-corner { background: var(--panel); }

.tracker-table {
  width: 100%;
  min-width: 1750px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tracker-table th,
.tracker-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  height: 25px;
  padding: 1px 4px;
  line-height: 14px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tracker-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 19px;
  background: var(--header);
  color: var(--text);
  font-weight: 700;
}

.tracker-table tbody tr {
  background: var(--row);
}

.tracker-table tbody td {
  box-shadow: inset 0 -1px 0 var(--panel);
}

.tracker-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}

.tracker-table tbody tr.moving-alert-row {
  background: var(--attention);
}

/* Address links on the tinted alert row: blend the link toward the style's text colour
   (darker in light styles, lighter in dark ones) so it stays readable on the tint. */
.tracker-table tbody tr.moving-alert-row .map-link {
  color: color-mix(in srgb, var(--link) 60%, var(--text));
}

.tracker-table tbody tr.reserved-overdue-row {
  background: #fff1c2;
}

.tracker-table tbody tr.reserved-overdue-row .status-chip[data-status="RESERVED"] {
  background: #c56a00;
}

.tracker-table tbody tr:hover {
  background: var(--row-hover);
}

.tracker-table tbody tr:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.tracker-table tbody tr.status-break td {
  box-shadow: inset 0 3px 0 var(--line-dark);
}

.tracker-table tbody tr.area-break td {
  box-shadow: inset 0 2px 0 rgba(0, 109, 188, 0.22);
}

.tracker-table th:nth-child(1),
.tracker-table th:nth-child(2),
.tracker-table th:nth-child(3),
.tracker-table td:nth-child(1),
.tracker-table td:nth-child(2),
.tracker-table td:nth-child(3) {
  position: sticky;
  background: inherit;
}

.tracker-table th:nth-child(1),
.tracker-table td:nth-child(1) {
  left: 0;
  z-index: 4;
}

.tracker-table th:nth-child(2),
.tracker-table td:nth-child(2) {
  left: 78px;
  z-index: 4;
}

.tracker-table th:nth-child(3),
.tracker-table td:nth-child(3) {
  left: 161px;
  z-index: 4;
}

.tracker-table th:nth-child(1),
.tracker-table th:nth-child(2),
.tracker-table th:nth-child(3) {
  z-index: 7;
  background: var(--header);
}

.vendor-col {
  width: 78px;
}

.trailer-col {
  width: 83px;
}

.info-col {
  width: 58px;
}

.date-col {
  width: 126px;
}

.motion-col {
  width: 74px;
  text-align: center;
}

.yard-date-col {
  width: 126px;
}

.yard-motion-col {
  width: 86px;
  text-align: center;
}

.address-col {
  width: 178px;
}

.location-col {
  width: 188px;
}

.status-col {
  width: 84px;
}

.memo-col {
  width: 540px;
}

.comments-col {
  width: 280px;
}

.samsara-col {
  width: 150px;
}

.samsara-cell {
  vertical-align: middle;
}

.samsara-suggestion {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted, #6b7280);
  font-style: italic;
}

.samsara-suggestion.has-value {
  color: var(--text);
  font-style: normal;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #3f66e0) 12%, transparent);
  display: inline-block;
}

/* GPS-inferred (proximity) match — lower confidence than a real Samsara assignment. */
.samsara-suggestion.has-value.is-proximity {
  color: var(--muted, #6b7280);
  font-weight: 400;
  background: color-mix(in srgb, var(--muted, #6b7280) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--muted, #6b7280) 45%, transparent);
}

.update-col {
  width: 92px;
}

.vendor-cell {
  color: var(--text);
  font-weight: 500;
}

.tracker-table td.vendor-cell.expiration-soon-cell {
  background: var(--dot-soon);
  font-weight: 700;
}

.tracker-table td.vendor-cell.expiration-very-soon-cell {
  background: var(--dot-very-soon);
  font-weight: 700;
}

.tracker-table td.vendor-cell.expiration-expired-cell {
  background: var(--dot-expired);
  font-weight: 700;
}

.trailer-id {
  letter-spacing: 0;
}

.info-cell {
  padding-right: 2px;
  padding-left: 2px;
  text-align: center;
  white-space: nowrap;
}

.detail-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--link);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.detail-button.has-attention {
  background: var(--attention-strong);
}

.detail-button:hover {
  filter: brightness(0.92);
}

.row-badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 34px;
  overflow: hidden;
  vertical-align: middle;
}

.row-badge {
  display: inline-grid;
  align-items: center;
  max-width: 34px;
  min-height: 16px;
  padding: 1px 4px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--header);
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.row-badge {
  cursor: pointer;
}

.case-row-badge.open {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.live-edit-badge {
  max-width: 34px;
  border-color: #9a6500;
  background: #fff1c2;
  color: #5b3a00;
}

.tracker-table tbody tr.has-live-editor {
  outline: 2px solid rgba(191, 123, 0, 0.22);
  outline-offset: -2px;
}

.date-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 21px;
  height: 21px;
  min-width: 0;
  padding: 1px 5px;
  font: inherit;
  line-height: 17px;
}

.days-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 54px;
  min-height: 21px;
  height: 21px;
  padding: 1px 4px;
  text-align: center;
  font: inherit;
  line-height: 17px;
}

.yard-motion-cell {
  text-align: center;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  color: var(--link);
  text-decoration: none;
}

.map-link:hover {
  text-decoration: underline;
}

.map-link svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.map-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-cell {
  vertical-align: middle;
}

.location-text-cell {
  color: var(--text);
  vertical-align: middle;
}

.editable-cell {
  min-height: 20px;
  height: 20px;
  line-height: 18px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Click-to-edit cells (2026-09-23): plain values, a hover highlight + pencil, and the
   editor opens in place on click. */
.cell-view {
  position: relative;
  box-sizing: border-box;
  min-height: 20px;
  height: 20px;
  margin: 0 -3px;
  padding: 0 3px;
  border-radius: 4px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.cell-view:hover {
  background-color: rgba(11, 117, 207, 0.08);
  box-shadow: inset 0 0 0 1px rgba(11, 117, 207, 0.35);
}

.cell-view:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.cell-view:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 3px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b75cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 1px rgba(11, 117, 207, 0.25);
}

.cell-view.is-empty {
  color: var(--muted);
}

.cell-view.editable-cell:empty:hover::before {
  content: attr(data-placeholder);
  color: var(--muted);
  font-style: italic;
}

.days-view {
  text-align: center;
}

.tracker-table td.is-editing {
  overflow: visible;
}

.date-input:focus,
.days-input:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}

/* Memo / Driver info edit in the cell itself, spreadsheet style. The input takes exactly
   the resting text's box (same padding, width and height - set from the view in JS), and
   the border is an inset shadow that takes no space, so clicking never moves the text. */
.tracker-table .cell-text-input,
.tracker-table .cell-text-input:focus {
  box-sizing: border-box;
  display: block;
  width: calc(100% + 6px);
  min-width: 0;
  height: 20px;
  min-height: 0;
  margin: 0 -3px;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 2px rgba(255, 107, 94, 0.22);
}

/* Driver name autocomplete: a compact list under the cell. */
.driver-picker {
  position: fixed;
  z-index: 90;
  box-sizing: border-box;
  max-height: 208px;
  overflow-y: auto;
  padding: 3px 0;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(10, 23, 34, 0.18);
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.driver-picker[hidden] {
  display: none;
}

.driver-picker-item {
  padding: 4px 10px;
  overflow: hidden;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-picker-item:hover {
  background: rgba(11, 117, 207, 0.08);
}

.driver-picker-item.is-active {
  background: var(--blue);
  color: #ffffff;
}

.driver-picker-item.is-prefix {
  font-weight: 700;
}

.driver-picker-item.is-prefix + .driver-picker-item:not(.is-prefix) {
  margin-top: 3px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.driver-picker-empty {
  padding: 4px 10px;
  color: var(--muted);
}

body[data-board-density="focus"] .cell-view {
  min-height: 19px;
  height: 19px;
  line-height: 19px;
}

body[data-board-density="compact"] .cell-view {
  min-height: 17px;
  height: 17px;
  line-height: 17px;
}

@media (max-width: 700px) {
  body .tracker-table .date-view,
  body .tracker-table .days-view {
    min-height: 28px;
    height: 28px;
    line-height: 28px;
  }
}

.save-saving {
  box-shadow: inset 0 -2px 0 #f0ad00 !important;
}

.save-saved {
  box-shadow: inset 0 -2px 0 var(--green) !important;
}

.save-error {
  box-shadow: inset 0 -2px 0 var(--attention-strong) !important;
}

.readonly-cell {
  min-height: 20px;
  height: 20px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editable-cell * {
  line-height: inherit !important;
}

.editable-cell,
.editable-cell * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

.memo-text .bang {
  color: var(--attention-strong) !important;
  font-weight: 700 !important;
}

.status-picker {
  position: relative;
  height: 19px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 74px;
  height: 19px;
  padding: 0 2px 0 6px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 3px;
  color: var(--chip-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.status-chip svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.status-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-chip[data-status="AVAILABLE"] { background: #58a800; }
.status-chip[data-status="RESERVED"] { background: #00a6a6; }
.status-chip[data-status="USING"] { background: #0b75cf; }
.status-chip[data-status="LANE"] { background: #7b4fba; }
.status-chip[data-status="LIVE LANE"] { background: #4c51bf; }
.status-chip[data-status="LOAD OUT"] { background: #d98c00; }
.status-chip[data-status="GPS ISSUE"] { background: #d00032; }
.status-chip[data-status="TOWING RISK"] { background: #a34100; }
.status-chip[data-status="SHOP"] { background: #6b7280; }
.status-chip[data-status="LOADED"] { background: #2c7a7b; }
.status-chip[data-status="STORAGE"] { background: #607d8b; }
.status-chip[data-status="INACTIVE"] { background: #8a8f98; }
.status-chip[data-status="DAMAGED"] { background: #b91c1c; }
.status-chip[data-status="STOLEN"] { background: #111827; }
.status-chip[data-status="RENTED"] { background: #a16207; }
.status-chip[data-status="RETURNED"] { background: #2563eb; }
.status-chip[data-status="ANOTHER CARRIER"] { background: #be185d; }
.status-chip[data-status="TOTAL LOST"] { background: #7f1d1d; }
.status-chip[data-status="UNKNOWN"] { background: #525252; }

body[data-board-density="focus"] .tracker-table {
  min-width: 1600px;
}

body[data-board-density="focus"] .tracker-table th,
body[data-board-density="focus"] .tracker-table td {
  height: 22px;
  padding: 0 3px;
  line-height: 13px;
}

body[data-board-density="focus"] .date-input,
body[data-board-density="focus"] .days-input {
  min-height: 19px;
  height: 19px;
  padding: 0 4px;
}

body[data-board-density="focus"] .status-chip {
  height: 18px;
}

body[data-board-density="focus"] .memo-col {
  width: 380px;
}

body[data-board-density="focus"] .comments-col {
  width: 230px;
}

body[data-board-density="focus"] .address-col,
body[data-board-density="focus"] .location-col {
  width: 172px;
}

body[data-board-density="compact"] .tracker-table {
  min-width: 1500px;
}

body[data-board-density="compact"] .tracker-table th,
body[data-board-density="compact"] .tracker-table td {
  height: 20px;
  padding: 0 3px;
  line-height: 12px;
}

body[data-board-density="compact"] .date-input,
body[data-board-density="compact"] .days-input {
  min-height: 17px;
  height: 17px;
  padding: 0 3px;
}

body[data-board-density="compact"] .status-chip {
  height: 17px;
  font-size: 9px;
}

body[data-board-density="compact"] .memo-col {
  width: 320px;
}

body[data-board-density="compact"] .comments-col {
  width: 190px;
}

body[data-board-density="compact"] .address-col,
body[data-board-density="compact"] .location-col {
  width: 158px;
}

.status-menu {
  position: fixed;
  z-index: 10;
  width: 170px;
  max-height: min(520px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid #111;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.status-option {
  display: grid;
  grid-template-columns: 19px 1fr;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  text-transform: uppercase;
}

.status-option:hover,
.status-option.active {
  background: #1e73d5;
  color: #ffffff;
}

.status-option svg {
  width: 14px;
  height: 14px;
}

.empty-row td {
  height: 60px;
  color: var(--muted);
  padding-left: 18px;
  text-align: left;
}

.trailer-dialog {
  width: min(860px, calc(100vw - 32px));
  border: 1px solid var(--line-dark);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.trailer-dialog form,
.dialog-frame {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

.trailer-dialog::backdrop {
  background: rgba(6, 12, 18, 0.45);
}

.trailer-dialog header,
.trailer-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--header);
  border-bottom: 1px solid var(--line);
}

.trailer-dialog footer {
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.trailer-dialog h2 {
  margin: 0;
  font-size: 16px;
}

.dialog-status {
  margin: 0;
  padding: 0 18px;
  min-height: 0;
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
}

.dialog-status:empty {
  display: none;
}

.dvir-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  background: #e7e7e7;
  color: #333;
}

.dvir-chip.dvir-safe {
  background: #e3f6e8;
  color: #1c7c3a;
}

.dvir-chip.dvir-unsafe {
  background: #fbe3e1;
  color: #c0392b;
}

.dvir-chip.dvir-resolved {
  background: #e4eefb;
  color: #2456a6;
}

/* GPS health chips — shown under the Last-update column on the trailer board.
   Distinguish a sleeping tracker (normal) from a genuinely dead one. */
.gps-chip {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  background: #e7e7e7;
  color: #333;
  cursor: help;
  white-space: nowrap;
}
.gps-chip-live { background: #e3f6e8; color: #1c7c3a; }
.gps-chip-asleep { background: #e4eefb; color: #2456a6; }
.gps-chip-stale { background: #fff4c2; color: #7a5b00; }
.gps-chip-dead { background: #fbe3e1; color: #c0392b; }
.gps-chip-none { background: #ececec; color: #777; }

/* Only genuine problems tint the cell; sleepers stay calm. */
.last-signal-cell.gps-dead { background: #ffe1e1; }
.last-signal-cell.gps-stale { background: #fff8dd; }

body.dark .gps-chip, body[data-board-style="midnight"] .gps-chip, body[data-board-style="glass"] .gps-chip, body[data-board-style="command"] .gps-chip { background: #3a3a3a; color: #ddd; }
body.dark .gps-chip-live, body[data-board-style="midnight"] .gps-chip-live, body[data-board-style="glass"] .gps-chip-live, body[data-board-style="command"] .gps-chip-live { background: #1e3d29; color: #8fe0a6; }
body.dark .gps-chip-asleep, body[data-board-style="midnight"] .gps-chip-asleep, body[data-board-style="glass"] .gps-chip-asleep, body[data-board-style="command"] .gps-chip-asleep { background: #1f3450; color: #9cc4ff; }
body.dark .gps-chip-stale, body[data-board-style="midnight"] .gps-chip-stale, body[data-board-style="glass"] .gps-chip-stale, body[data-board-style="command"] .gps-chip-stale { background: #4b421c; color: #f0d47a; }
body.dark .gps-chip-dead, body[data-board-style="midnight"] .gps-chip-dead, body[data-board-style="glass"] .gps-chip-dead, body[data-board-style="command"] .gps-chip-dead { background: #5d2422; color: #ffb3ab; }
body.dark .gps-chip-none, body[data-board-style="midnight"] .gps-chip-none, body[data-board-style="glass"] .gps-chip-none, body[data-board-style="command"] .gps-chip-none { background: #333; color: #999; }
body.dark .last-signal-cell.gps-dead, body[data-board-style="midnight"] .last-signal-cell.gps-dead, body[data-board-style="glass"] .last-signal-cell.gps-dead, body[data-board-style="command"] .last-signal-cell.gps-dead { background: #5d2422; }
body.dark .last-signal-cell.gps-stale, body[data-board-style="midnight"] .last-signal-cell.gps-stale, body[data-board-style="glass"] .last-signal-cell.gps-stale, body[data-board-style="command"] .last-signal-cell.gps-stale { background: #4b421c; }

/* ============ AI companion: Scout, the dispatch buddy (Nova) ============ */

/* -- the companion mascot (shared SVG, sized by its container) -- */
.mascot-svg { width: 100%; height: 100%; display: block; overflow: visible; stroke: none; } /* no inherited icon outline; parts that want a line set their own */
/* Fills for the head, sheen, visor, headset, cups and mic come from the SVG's own
   gradients (mascotSvg in app.js); CSS keeps the lines, lights and mood colours. */
.mascot-headset { fill: none; stroke-width: 5.5; stroke-linecap: round; }
.mascot-headset-shine { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-linecap: round; }
.mascot-cup { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.8; }
.mascot-cuplight { fill: #3fe3ff; opacity: 0.9; transition: fill 0.2s ease; }
.mascot-visor-shadow { fill: #06103a; opacity: 0.35; }
.mascot-visor { stroke: rgba(156, 196, 255, 0.5); stroke-width: 1.2; }
.mascot-glare { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2; stroke-linecap: round; }
.mascot-glare-soft { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; stroke-linecap: round; }
.mascot-eye { fill: #3fe3ff; transition: fill 0.2s ease; }
.mascot-eye-spark { fill: #ffffff; opacity: 0.85; }
.mascot-smile { fill: none; stroke: #3fe3ff; stroke-width: 2.4; stroke-linecap: round; }
.mascot-mic { fill: none; stroke-width: 3; stroke-linecap: round; }
.mascot-miclight { fill: #3fe3ff; }
/* Annoyed, not evil (Sam, 2026-09-23: "professional cute, elite"): when Nova flags
   something its eyes turn warning-amber and narrow under angled lids, with crisp brows
   and a short stern mouth. No red eyes, no cartoon extras. */
.mascot-brow { fill: none; stroke: #ffc247; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 0.2s ease; }
.mascot-lid { fill: #111c2e; opacity: 0; transition: opacity 0.2s ease; }
.mascot-stern { fill: none; stroke: #ffc247; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.mascot-body { transform-box: fill-box; transform-origin: 50% 100%; animation: mascot-bob 3.4s ease-in-out infinite; }
.mascot-eyes { transform-box: fill-box; transform-origin: center; animation: mascot-blink 5s ease-in-out infinite; }
@keyframes mascot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes mascot-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
@media (prefers-reduced-motion: reduce) {
  .mascot-body, .mascot-eyes { animation: none; }
}

/* -- floating dog button -- */
.assistant-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  width: 66px;
  height: 66px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 10px 26px rgba(24, 45, 90, 0.32);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assistant-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(24, 45, 90, 0.34); }
.assistant-fab:active { transform: translateY(-1px) scale(0.99); }
.assistant-fab-dog { display: block; width: 100%; height: 100%; }
.assistant-fab-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2ec16b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(46, 193, 107, 0.5);
  animation: assistant-pulse 2.2s ease-out infinite;
}
@keyframes assistant-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 193, 107, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(46, 193, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 193, 107, 0); } }
.assistant-fab-bubble {
  position: absolute;
  right: 78px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  white-space: nowrap;
  background: #182d5a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.assistant-fab-bubble::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #182d5a;
  border-right-width: 0;
}
.assistant-fab:hover .assistant-fab-bubble,
.assistant-fab.speaking .assistant-fab-bubble { opacity: 1; transform: translateY(-50%) scale(1); }

/* Idle chatter can be a full sentence — let it wrap into a tidy bubble. */
.assistant-fab.speaking .assistant-fab-bubble {
  white-space: normal;
  max-width: 230px;
  width: max-content;
  line-height: 1.35;
  text-align: left;
}
/* Flip the bubble to Nova's right when it's parked on the left half of the screen. */
.assistant-fab.bubble-right .assistant-fab-bubble { right: auto; left: 78px; }
.assistant-fab.bubble-right .assistant-fab-bubble::after {
  right: auto; left: -5px;
  border-left-width: 0; border-left-color: transparent;
  border-right-width: 6px; border-right-color: #182d5a;
}
/* Little hop when Nova says something on its own. */
.assistant-fab.nudge { animation: nova-nudge 0.5s ease; }
@keyframes nova-nudge {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  65% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-fab.nudge { animation: none; }
}

/* attention badge + alert-mood face */
.assistant-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}
.assistant-fab.mood-alert .assistant-fab-dot { display: none; }
.assistant-fab.mood-alert .mascot-brow { opacity: 1; }
.assistant-fab.mood-alert .mascot-eye,
.assistant-fab.mood-alert .mascot-cuplight { fill: #ffc247; }
.assistant-fab.mood-alert .mascot-lid { opacity: 1; }
.assistant-fab.mood-alert .mascot-smile { opacity: 0; }
.assistant-fab.mood-alert .mascot-stern { opacity: 1; }
.assistant-fab.mood-alert .mascot-miclight { animation: mascot-alert-flash 1.2s steps(1, end) infinite; }
@keyframes mascot-alert-flash { 0%, 100% { fill: #3fe3ff; } 50% { fill: #ffb020; } }

/* Frown, hidden until Nova is angry (being thrown/bouncing). */
.mascot-frown { fill: none; stroke: #ffc247; stroke-width: 2.4; stroke-linecap: round; opacity: 0; }

/* Draggable / throwable Nova button */
.assistant-fab { cursor: grab; touch-action: none; }
.assistant-fab.grabbing { cursor: grabbing; }
.assistant-fab.grabbing .assistant-fab-bubble { display: none; }
/* Angry face while airborne after a throw */
.assistant-fab.thrown .mascot-brow { opacity: 1; }
.assistant-fab.thrown .mascot-eye,
.assistant-fab.thrown .mascot-cuplight { fill: #ffc247; }
.assistant-fab.thrown .mascot-lid { opacity: 1; }
.assistant-fab.thrown .mascot-smile,
.assistant-fab.thrown .mascot-stern { opacity: 0; }
.assistant-fab.thrown .mascot-frown { opacity: 1; }
.assistant-fab.thrown .mascot-body { animation: none; }
.assistant-fab.thrown:not(.speaking) .assistant-fab-bubble { display: none; }
/* Squash-and-stretch pulse on each bounce, scaled by impact via --nova-squash */
.assistant-fab.bounce-squish { animation: nova-squish 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes nova-squish {
  0% { transform: scale(calc(1 + var(--nova-squash, 0.18)), calc(1 - var(--nova-squash, 0.18))); }
  55% { transform: scale(calc(1 - var(--nova-squash, 0.18) * 0.55), calc(1 + var(--nova-squash, 0.18) * 0.55)); }
  100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-fab.bounce-squish { animation: none; }
}

/* Fleet Alerts admin dialog */
.alerts-dialog { max-width: 560px; width: min(560px, 94vw); }
.alerts-sub { margin: 0 0 12px; color: #6b7280; font-size: 13px; }
.alerts-status { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.alerts-chan { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fdecec; color: #b3141f; border: 1px solid #f6c9ce; }
.alerts-chan.ok { background: #e6f6ee; color: #1f9d55; border-color: #b7e4c9; }
.alerts-counts { font-size: 13px; color: #2b3242; margin-bottom: 10px; }
.alerts-preview { background: #0e1420; color: #d7e0ee; border-radius: 12px; padding: 14px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; max-height: 320px; overflow: auto; margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.alerts-actions { display: flex; align-items: center; gap: 12px; }
.alerts-result { font-size: 12.5px; color: #6b7280; }
.alerts-config { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 11px 13px; background: #f6f7f9; border: 1px solid #e7eaf0; border-radius: 12px; font-size: 12.5px; color: #2b3242; }
.alerts-config label { display: inline-flex; align-items: center; gap: 6px; }
.alerts-config input[type="number"] { width: 54px; padding: 5px 8px; border: 1px solid #d5dce8; border-radius: 8px; }
.alerts-config select { padding: 5px 8px; border: 1px solid #d5dce8; border-radius: 8px; }
.alerts-config .plain-button { border: 1px solid #cfdcf5; background: #f3f7ff; color: #1f4fb0; border-radius: 8px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
body.dark .alerts-config { background: #14161b; border-color: #2c313b; color: #d5dae4; }

/* "Needs attention" quick-filter toggle in the board filters */
.attention-toggle { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f0c9cd; background: #fff5f5; color: #c0392b; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
.attention-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.attention-toggle:hover { background: #ffe9e9; }
.attention-toggle.active { background: var(--gz-red, #d81f2a); color: #fff; border-color: var(--gz-red, #d81f2a); }
.attention-toggle b { font-weight: 800; }
body.dark .attention-toggle { background: #2a1418; border-color: #5a2730; color: #f0a49c; }

/* Autosave indicator (#syncStatus) — spinner while saving, green check when saved, red warning on error */
#syncStatus { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: color 0.2s ease; }
#syncStatus[data-state="busy"] { color: #6b7280; }
#syncStatus[data-state="busy"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cfd6e2; border-top-color: #6b7280; display: inline-block; animation: syncstatus-spin 0.7s linear infinite; }
#syncStatus[data-state="saved"] { color: #1f9d55; }
#syncStatus[data-state="saved"]::before { content: "✓"; font-weight: 800; }
#syncStatus[data-state="error"] { color: #d81f2a; }
#syncStatus[data-state="error"]::before { content: "⚠"; }
#syncStatus[data-state="info"] { color: #2563eb; }
@keyframes syncstatus-spin { to { transform: rotate(360deg); } }
body.dark #syncStatus[data-state="busy"]::before { border-color: #3a4150; border-top-color: #9aa4b5; }

/* one-click revert in the change-history dialog */
.history-revert { margin-left: auto; font-size: 11px; padding: 3px 9px; border: 1px solid #e2e6ee; border-radius: 7px; color: #b3141f; background: #fff; cursor: pointer; white-space: nowrap; }
.history-revert:hover { background: #fdecec; border-color: #f6c9ce; }
.history-revert:disabled { opacity: 0.6; cursor: default; }
body.dark .assistant-fab-badge { border-color: #20242c; }

/* -- the chat panel -- */
.assistant-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: min(400px, calc(100vw - 28px));
  height: min(600px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 35, 70, 0.32);
  overflow: hidden;
  transform-origin: bottom right;
  animation: assistant-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes assistant-pop { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* `display: flex` above would otherwise override the HTML `hidden` attribute, so the panel
   could never close. This makes hidden win. Same guard for the fab. */
.assistant-panel[hidden] { display: none !important; }
.assistant-fab[hidden] { display: none !important; }

.assistant-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 15px;
  background: linear-gradient(135deg, #2456c9 0%, #3f7ff0 55%, #23b6c9 120%);
  color: #fff;
}
.assistant-head-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}
.assistant-head-info { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.assistant-head-info strong { font-size: 16px; letter-spacing: 0.2px; }
.assistant-head-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.92; }
.assistant-online { width: 8px; height: 8px; border-radius: 50%; background: #4ff08a; box-shadow: 0 0 0 2px rgba(79, 240, 138, 0.35); }
.assistant-x {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.assistant-x:hover { background: rgba(255, 255, 255, 0.3); }
.assistant-clear {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.assistant-clear:hover { background: rgba(255, 255, 255, 0.3); }
.assistant-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assistant-speak-toggle.active { background: rgba(255, 255, 255, 0.42); }
.assistant-voice { height: 28px; max-width: 92px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 600; padding: 0 8px; cursor: pointer; }
.assistant-voice:hover { background: rgba(255, 255, 255, 0.28); }
.assistant-voice option { color: #1a1f2b; }
.assistant-mic { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: #eef1f6; color: #4a5568; cursor: pointer; display: grid; place-items: center; transition: background 0.14s ease, color 0.14s ease; }
.assistant-mic:hover { background: #e2e7f0; }
.assistant-mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assistant-mic.listening { background: #d81f2a; color: #fff; animation: nova-mic-pulse 1.1s infinite; }
@keyframes nova-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216, 31, 42, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(216, 31, 42, 0); } }
body.dark .assistant-mic { background: #23262e; color: #c9cfda; }
body.dark .assistant-mic:hover { background: #2c313b; }

.assistant-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f5f7fb;
}

/* welcome card */
.assistant-welcome { display: flex; gap: 10px; align-items: flex-start; }
.assistant-welcome-avatar {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%;
  background: transparent; padding: 0;
}
.assistant-welcome-body { background: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 13px; box-shadow: 0 2px 8px rgba(30, 50, 90, 0.06); }
.assistant-welcome-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: #2b3242; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.assistant-chip {
  border: 1px solid #cfdcf5;
  background: #f3f7ff;
  color: #1f4fb0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.assistant-chip:hover { background: #e2ecff; transform: translateY(-1px); }

/* message rows */
.assistant-row { display: flex; gap: 9px; align-items: flex-end; max-width: 100%; }
.assistant-row.bot { align-self: flex-start; max-width: 92%; }
.assistant-row.you { align-self: flex-end; }
.assistant-avatar {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%;
  background: transparent; padding: 0;
  align-self: flex-end;
}
.assistant-msg {
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Nova's alert list is one reason per line - keep the line breaks. */
  white-space: pre-line;
}
.assistant-bot {
  background: #fff;
  color: #1b2130;
  border-radius: 4px 15px 15px 15px;
  box-shadow: 0 2px 8px rgba(30, 50, 90, 0.06);
}
.assistant-you .assistant-msg,
.assistant-msg.assistant-you {
  background: linear-gradient(135deg, #2f6fe6, #2456c9);
  color: #fff;
  border-radius: 15px 4px 15px 15px;
  box-shadow: 0 3px 10px rgba(36, 86, 201, 0.28);
}
.assistant-error { background: #fdecea !important; color: #c0392b; box-shadow: none; }

/* typing indicator */
.assistant-typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px; }
.assistant-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa7bd; animation: assistant-dot 1.1s infinite ease-in-out; }
.assistant-typing span:nth-child(2) { animation-delay: 0.16s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes assistant-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* input row */
.assistant-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid #e9edf5;
}
.assistant-input input {
  flex: 1;
  padding: 11px 15px;
  border: 1px solid #d5dce8;
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.assistant-input input:focus { border-color: #3f7ff0; box-shadow: 0 0 0 3px rgba(63, 127, 240, 0.15); }
.assistant-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6fe6, #2456c9);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.14s ease, filter 0.14s ease;
}
.assistant-send:hover { filter: brightness(1.08); transform: scale(1.05); }
.assistant-send svg { width: 19px; height: 19px; fill: #fff; transform: translateX(1px); }

/* markdown inside bot bubbles */
.assistant-bot .assistant-h { font-weight: 700; margin: 6px 0 2px; }
.assistant-bot ul { margin: 5px 0; padding-left: 18px; }
.assistant-bot li { margin: 2px 0; }
.assistant-bot .assistant-table { border-collapse: collapse; margin: 7px 0; font-size: 12.5px; width: 100%; display: block; overflow-x: auto; }
.assistant-bot .assistant-table th,
.assistant-bot .assistant-table td { border: 1px solid #e2e7f0; padding: 4px 8px; text-align: left; white-space: nowrap; }
.assistant-bot .assistant-table th { background: #eef3fb; }
.assistant-bot code { background: rgba(20, 40, 90, 0.07); padding: 0 4px; border-radius: 4px; font-size: 12px; }

/* dark theme */
body.dark .assistant-fab { background: transparent; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
body.dark .assistant-panel { background: #191c22; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
body.dark .assistant-thread { background: #14161b; }
body.dark .assistant-welcome-body,
body.dark .assistant-bot { background: #23262e; color: #e8e8ea; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
body.dark .assistant-welcome-body p { color: #d5dae4; }
body.dark .assistant-chip { background: #22303f; border-color: #33475f; color: #a7c1e0; }
body.dark .assistant-chip:hover { background: #2a3c50; }
body.dark .assistant-input { background: #191c22; border-color: #2c313b; }
body.dark .assistant-input input { background: #14161b; border-color: #2c313b; color: #eee; }
body.dark .assistant-bot .assistant-table th,
body.dark .assistant-bot .assistant-table td { border-color: #333944; }
body.dark .assistant-bot .assistant-table th { background: #2b303a; }
body.dark .assistant-bot code { background: rgba(255, 255, 255, 0.1); }
body.dark .assistant-error { background: #3a2020 !important; color: #f0a49c; }

@media (max-width: 520px) {
  .assistant-panel { right: 8px; left: 8px; width: auto; bottom: 8px; height: min(78vh, calc(100vh - 16px)); }
}

.dvir-table th,
.dvir-table td {
  white-space: normal;
}

.dvir-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.dvir-sortable:hover {
  text-decoration: underline;
}

.dvir-sort-active {
  font-weight: 800;
}

.trailer-map-pin {
  background: transparent;
  border: 0;
}

.trailer-map-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.notif-control {
  position: relative;
  display: inline-flex;
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d80032;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.notif-panel {
  position: fixed;
  top: 58px;
  right: 14px;
  z-index: 9999;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
}

.notif-list {
  display: flex;
  flex-direction: column;
}

.notif-empty {
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
}

.notif-item {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--gray);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.notif-item:hover {
  background: var(--row-hover);
}

.notif-item.notif-sev-3 { border-left-color: var(--red); }
.notif-item.notif-sev-2 { border-left-color: var(--yellow); }
.notif-item.notif-sev-1 { border-left-color: var(--blue); }

.notif-cat {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.notif-text {
  font-size: 12.5px;
}

.notif-section {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.notif-section span {
  font-weight: 700;
}

.notif-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.notif-row .notif-cat {
  color: var(--text);
  font-size: 11px;
}

.notif-count {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--row-hover);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
}

.notif-when {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.notif-item .notif-text {
  color: var(--muted);
}

.notif-item.is-unread {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.notif-item.is-unread .notif-text {
  color: var(--text);
}

.toast-stack {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  transform: translateY(-12px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.toast.toast-in {
  transform: translateY(0);
  opacity: 1;
}

.toast.toast-out {
  transform: translateY(-12px);
  opacity: 0;
}

.toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.toast.toast-warn .toast-icon { background: rgba(255, 159, 10, 0.32); color: #ffb547; }
.toast.toast-alert .toast-icon { background: rgba(255, 69, 58, 0.34); color: #ff7b72; }

.toast-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.toast-body {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.82;
  line-height: 1.3;
}

.toast-close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.toast-close:hover {
  color: #fff;
}

.case-review-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffe08a;
  color: #6b4d00;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: help;
}

.cases-table tbody tr.case-needs-review {
  box-shadow: inset 3px 0 0 #e0a800;
}

.case-review-toggle.case-review-toggle[aria-pressed="true"] {
  background: #ffe08a;
  color: #6b4d00;
  border-color: #e0a800;
}

.case-review-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d80032;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.case-review-count[hidden] {
  display: none;
}

.asset-type-chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: #e6e8eb;
  color: #3c434b;
}

.asset-type-chip.asset-type-truck {
  background: #e4f0fb;
  color: #0b5ba3;
}

.asset-type-chip.asset-type-trailer {
  background: #dff3f2;
  color: #00706c;
}

.asset-exp {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.asset-exp-ok { background: transparent; color: var(--text); font-weight: 400; }
.asset-exp-soon { background: var(--dot-soon); color: #5b4a00; }
.asset-exp-verysoon { background: var(--dot-very-soon); color: #6b3600; }
.asset-exp-expired { background: var(--dot-expired); color: #7a1410; }
.asset-exp-none { color: var(--muted); font-weight: 400; }

.asset-docs-cell {
  white-space: normal;
}

.asset-doc-link {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  background: #eceef1;
  color: #3c434b;
}

.asset-doc-link:hover { filter: brightness(0.92); text-decoration: none; }
.asset-doc-link.asset-doc-dot { background: #fbe7e8; color: #a30e13; }
.asset-doc-link.asset-doc-reg { background: #e4f0fb; color: #0b5ba3; }
.asset-doc-link.asset-doc-ins { background: #eaf5de; color: #3f7a00; }
.asset-doc-link.asset-doc-title { background: #efe9fb; color: #5b3aa8; }

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  overflow: auto;
}

.dialog-grid .wide {
  grid-column: 1 / -1;
}

.lease-panel {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.lease-panel legend {
  padding: 0 6px;
  color: var(--text);
  font-weight: 700;
}

.lease-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-dialog {
  width: min(980px, calc(100vw - 32px));
}

.admin-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  overflow: auto;
}

.user-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(260px, 1.25fr) max-content;
  gap: 8px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.user-form label,
.access-picker {
  display: grid;
  gap: 2px;
}

.access-picker {
  margin: 0;
  padding: 7px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.access-picker legend {
  padding: 0 5px;
  font-weight: 700;
}

.access-grid,
.user-access-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.access-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--input);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.access-check input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.users-list {
  display: grid;
  gap: 6px;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.85fr) minmax(300px, 1.5fr) max-content;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--row);
}

.user-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-row span {
  color: var(--muted);
}

.user-actions {
  display: flex;
  gap: 6px;
  justify-content: end;
}

.history-dialog {
  width: min(1050px, calc(100vw - 32px));
}

.history-wrap {
  max-height: min(620px, calc(100vh - 120px));
  overflow: auto;
  padding: 12px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.history-table th,
.history-table td {
  border: 1px solid var(--line);
  padding: 5px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-table th {
  background: var(--header);
  font-weight: 700;
}

.plain-button,
.primary-button {
  min-height: 30px;
  padding: 0 13px;
  border-color: var(--line-dark);
  border-radius: 3px;
}

.plain-button {
  color: var(--text);
  background: var(--panel);
}

.primary-button {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
  font-weight: 700;
}

body[data-board-style="modern"] .topbar,
body[data-board-style="modern"] .summary-strip,
body[data-board-style="modern"] .table-wrap,
body[data-board-style="modern"] .trailer-dialog {
  border-color: var(--line);
}

body[data-board-style="modern"] .tracker-table th {
  font-size: 11px;
}

body[data-board-style="modern"] .tracker-table td {
  height: 28px;
}

body[data-board-style="modern"] .status-chip,
body[data-board-style="modern"] select,
body[data-board-style="modern"] input,
body[data-board-style="modern"] textarea {
  border-radius: 6px;
}

body[data-board-style="command"] .topbar,
body[data-board-style="command"] .summary-strip,
body[data-board-style="command"] .table-wrap {
  box-shadow: inset 0 -1px 0 rgba(117, 214, 255, 0.18);
}

body[data-board-style="command"] .tracker-table th {
  color: #bdf0ff;
  font-size: 10px;
  text-transform: uppercase;
}

body[data-board-style="command"] .summary-item strong {
  color: #75d6ff;
}

body[data-board-style="command"] .status-chip {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

body[data-board-style="excel"] {
  font-size: 11px;
}

body[data-board-style="excel"] .topbar,
body[data-board-style="excel"] .summary-strip,
body[data-board-style="excel"] .table-wrap {
  border-color: var(--line-dark);
}

body[data-board-style="excel"] .tracker-table td,
body[data-board-style="excel"] .tracker-table th {
  border-right: 1px solid var(--line);
}

body[data-board-style="excel"] .tracker-table th {
  border-bottom: 1px solid var(--line-dark);
}

body[data-board-style="excel"] .tracker-table th,
body[data-board-style="excel"] .tracker-table td {
  height: 22px;
  padding: 0 3px;
  line-height: 13px;
}

body[data-board-style="excel"] .tracker-table th {
  font-size: 11px;
  font-weight: 700;
}

body[data-board-style="excel"] .date-input,
body[data-board-style="excel"] .editable-cell {
  min-height: 18px;
}

body[data-board-style="excel"] .status-chip {
  height: 17px;
  border-radius: 0;
}

body[data-board-style="gozal"] .topbar,
body[data-board-style="gozal"] .summary-strip,
body[data-board-style="gozal"] .table-wrap {
  border-color: #111111;
}

body[data-board-style="gozal"] .topbar {
  background: #111111;
  color: #ffffff;
}

body[data-board-style="gozal"] .nav-actions,
body[data-board-style="gozal"] .toolbar {
  border-color: #3a1111;
}

body[data-board-style="gozal"] .field span {
  color: #ffffff;
}

body[data-board-style="gozal"] .nav-button,
body[data-board-style="gozal"] .icon-button {
  color: #ffffff;
}

body[data-board-style="gozal"] .nav-button {
  border-color: #5f1717;
  background: linear-gradient(#2b2b2b, #151515);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.35);
}

body[data-board-style="gozal"] .nav-button:hover,
body[data-board-style="gozal"] .icon-button:hover {
  border-color: #b40000;
  background: rgba(180, 0, 0, 0.22);
}

body[data-board-style="gozal"] .nav-button:hover {
  background: linear-gradient(#b40000, #760000);
}

body[data-board-style="gozal"] .summary-strip {
  border-top: 3px solid #b40000;
}

body[data-board-style="gozal"] .summary-item strong {
  color: #b40000;
}

body[data-board-style="gozal"] .tracker-table th,
body[data-board-style="gozal"] .cases-table th {
  background: #161616;
  color: #ffffff;
  border-color: #2a2a2a;
  border-bottom: 2px solid #c01015;
}

body[data-board-style="gozal"] .tracker-table tbody tr:nth-child(even) {
  background: #f6f6f6;
}

body[data-board-style="gozal"] .primary-button {
  background: #b40000;
  border-color: #b40000;
}

body.dark .login-panel {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 22, 26, 0.94);
}

body.dark .text-logo,
body.dark .board-brand {
  border-color: var(--line-dark);
  background: #0c1116;
  color: #f8fafc;
}

body.dark .text-logo .brand-tagline,
body.dark .board-brand .brand-tagline {
  color: #d7dde3;
}

body.dark .nav-button {
  border-color: var(--line);
  background: linear-gradient(#202a32, #151b20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.28);
}

body.dark .nav-button:hover,
body.dark .icon-button:hover,
body.dark .download-menu button:hover,
body.dark .download-menu button:focus-visible {
  background: rgba(109, 189, 255, 0.16);
}

body.dark .download-menu,
body.dark .case-columns-panel {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

body.dark .cases-table tfoot td {
  background: #312b18;
  color: #f9edc5;
}

body.dark .case-edit-presence-badge {
  border-color: #d68a00;
  background: #4c3717;
  color: #ffe3a3;
}

body.dark .tracker-table tbody tr.reserved-overdue-row, body[data-board-style="midnight"] .tracker-table tbody tr.reserved-overdue-row, body[data-board-style="glass"] .tracker-table tbody tr.reserved-overdue-row, body[data-board-style="command"] .tracker-table tbody tr.reserved-overdue-row {
  background: #4c3717;
}

body.dark .tracker-table tbody tr.reserved-overdue-row .status-chip[data-status="RESERVED"], body[data-board-style="midnight"] .tracker-table tbody tr.reserved-overdue-row .status-chip[data-status="RESERVED"], body[data-board-style="glass"] .tracker-table tbody tr.reserved-overdue-row .status-chip[data-status="RESERVED"], body[data-board-style="command"] .tracker-table tbody tr.reserved-overdue-row .status-chip[data-status="RESERVED"] {
  background: #b86500;
}

body.dark .last-signal-cell.signal-old, body[data-board-style="midnight"] .last-signal-cell.signal-old, body[data-board-style="glass"] .last-signal-cell.signal-old, body[data-board-style="command"] .last-signal-cell.signal-old {
  background: #4b421c;
}

body.dark .last-signal-cell.signal-stale, body[data-board-style="midnight"] .last-signal-cell.signal-stale, body[data-board-style="glass"] .last-signal-cell.signal-stale, body[data-board-style="command"] .last-signal-cell.signal-stale {
  background: #5d2422;
}

body.dark .live-edit-badge {
  border-color: #d68a00;
  background: #4c3717;
  color: #ffe3a3;
}

body.dark .shop-popup span {
  color: var(--muted);
}

body.dark .trailer-map-popup strong {
  color: var(--link);
}

body.dark[data-board-style="gozal"] .tracker-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}

@media (max-width: 2100px) and (min-width: 901px) {
  :root {
    --topbar-height: 88px;
  }

  /* Zoom fix (2026-09-23). The menu used to take its full width (max-content) and the
     toolbar got whatever was left - down to 0 - so at 110-200% zoom the right-aligned,
     non-wrapping toolbar spilled LEFT over the menu (health chip on "Action queue",
     "Alerts" text drawn over its own icon). Now the toolbar always gets the room it needs
     and the menu buttons wrap onto a second row instead of anything overlapping.
     The topbar height is auto and the page shells flex under it, so a taller bar is safe. */
  .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "nav toolbar"
      "filters filters";
    /* The base min-width: 1024px pushed refresh/notifications/logout off the right edge
       at ~200% zoom. The menu wraps now, so the bar can simply fit the window. */
    min-width: 0;
  }

  /* The menu stays on ONE row. Instead of wrapping or overlapping, app.js (fitNav) degrades
     it like a professional app: full labels -> icon-only -> least-used buttons fold into
     a "More" menu. It re-measures on every resize and zoom. */
  body:not([data-board-style="sidebar"]) .nav-actions {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  body:not([data-board-style="sidebar"]) .topbar.nav-compact .nav-actions .nav-button {
    /* Never shrink: a squeezed button hides the overflow that tells fitNav to fold
       buttons into "More" (seen at 1100px: 20px buttons with invisible icons). */
    flex: 0 0 auto;
    min-width: 34px;
    padding: 0 9px;
  }

  body:not([data-board-style="sidebar"]) .topbar.nav-compact .nav-actions .nav-button > span {
    display: none;
  }

  /* Sidebar style moves the menu into a fixed side column, so it never had the overlap -
     keep its original columns (toolbar spans the full width, exactly as before). */
  body[data-board-style="sidebar"] .topbar {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .filters {
    grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr) minmax(94px, 0.45fr) minmax(180px, 0.7fr);
    border-top: 1px solid var(--line);
  }

  body[data-page="shop-map"],
  body[data-page="cases"],
  body[data-page="actions"],
  body[data-page="dashboard"] {
    --topbar-height: 54px;
  }

  body[data-page="shop-map"] .topbar,
  body[data-page="cases"] .topbar,
  body[data-page="actions"] .topbar,
  body[data-page="dashboard"] .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "nav toolbar";
    min-height: var(--topbar-height);
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .login-screen {
    place-items: center;
    padding: 20px;
    min-height: 100dvh;
    overflow: hidden;
  }

  .login-screen::before {
    background-position: center center;
    background-size: cover;
  }

  .topbar,
  .board-shell,
  .shop-shell,
  .cases-shell,
  .action-shell,
  .dashboard-shell {
    min-width: 0;
  }

  .topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "filters"
      "toolbar";
    height: auto;
  }

  .nav-actions,
  .toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .toolbar {
    border-left: 0;
    overflow-x: auto;
  }

  .board-brand {
    flex: 1 1 170px;
    max-width: 190px;
  }

  .filters {
    grid-template-columns: 1fr 1fr;
    padding: 6px 8px;
  }

  .sort-field {
    grid-column: 1 / -1;
  }

  .board-shell {
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - 142px);
  }

  .shop-shell {
    display: block;
    height: auto;
    min-height: calc(100dvh - 142px);
  }

  .cases-shell,
  .action-shell,
  .dashboard-shell {
    height: auto;
    min-height: calc(100dvh - 142px);
  }

  body[data-page="shop-map"] .shop-shell {
    display: block !important;
  }

  .shop-shell[hidden] {
    display: none;
  }

  .shop-map-layout {
    grid-template-columns: 1fr;
  }

  .shop-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .shop-map {
    height: 64dvh;
    min-height: 420px;
  }

  .summary-strip {
    grid-template-columns: repeat(6, max-content) minmax(240px, 1fr);
    height: auto;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .sync-status {
    display: none;
  }

  .tracker-table {
    min-width: 1180px;
  }

  .action-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .action-case,
  .action-advice {
    grid-column: 2;
  }

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

  .dashboard-panel,
  .dashboard-panel.wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  body {
    background: #eef1f4;
    font-size: 13px;
  }

  body[data-board-style="command"] {
    background: var(--app-bg);
  }

  .topbar {
    border: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .login-screen {
    padding: 16px;
  }

  .login-screen::before {
    background-position: 48% center;
    background-size: auto 100%;
  }

  .login-panel {
    width: min(380px, calc(100vw - 28px));
    padding: 18px;
  }

  .text-logo {
    width: 100%;
    padding: 9px 12px;
  }

  .text-logo strong {
    gap: 8px;
    font-size: clamp(25px, 8vw, 34px);
    letter-spacing: 3px;
  }

  .text-logo .brand-tagline {
    font-size: clamp(8px, 2.6vw, 12px);
    letter-spacing: clamp(3px, 1.5vw, 6px);
  }

  .nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .board-brand {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
    height: 34px;
    padding: 4px 8px;
  }

  .board-brand strong {
    font-size: 20px;
  }

  .board-brand .brand-tagline {
    font-size: 7.5px;
  }

  .nav-button {
    width: 100%;
    min-height: 36px;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 7px;
  }

  .style-select,
  .density-select {
    flex: 0 0 160px;
  }

  .current-user {
    flex: 0 0 auto;
  }

  .board-shell {
    display: block;
    height: auto;
    min-height: calc(100dvh - 180px);
  }

  .ops-page-head {
    display: grid;
    gap: 4px;
    height: auto;
    padding: 8px;
  }

  .action-board,
  .dashboard-grid {
    padding: 8px;
    border-right: 0;
    border-left: 0;
  }

  .action-card {
    grid-template-columns: 1fr;
  }

  .action-case,
  .action-advice {
    grid-column: auto;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .shop-map-top {
    align-items: start;
    padding: 8px;
  }

  .shop-map-layout {
    border-right: 0;
    border-left: 0;
  }

  .coord-grid,
  .shop-actions {
    grid-template-columns: 1fr;
  }

  .shop-map {
    height: 58dvh;
    min-height: 360px;
  }

  .summary-strip {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-right: 0;
    border-left: 0;
    background: rgba(255, 255, 255, 0.96);
  }

  body[data-board-style="command"] .summary-strip {
    background: rgba(12, 23, 29, 0.96);
  }

  .summary-item {
    display: grid;
    min-width: 94px;
    gap: 1px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
  }

  .summary-item strong {
    font-size: 18px;
  }

  .search-field {
    flex: 0 0 min(300px, 78vw);
    width: auto;
    align-self: stretch;
  }

  .search-field input {
    min-height: 43px;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .tracker-table,
  .tracker-table tbody,
  .tracker-table tr,
  .tracker-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tracker-table {
    border-collapse: separate;
    border-spacing: 0;
    padding: 8px;
    table-layout: auto;
  }

  .tracker-table thead {
    display: none;
  }

  .tracker-table tbody tr {
    margin: 0 0 10px;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: var(--row);
    box-shadow: 0 2px 8px rgba(7, 19, 31, 0.08);
    overflow: hidden;
  }

  .tracker-table tbody tr:nth-child(even) {
    background: var(--row);
  }

  .tracker-table tbody tr.moving-alert-row {
    border-color: var(--attention-strong);
    box-shadow: 0 0 0 2px rgba(216, 0, 50, 0.12);
  }

  .tracker-table th:nth-child(1),
  .tracker-table th:nth-child(2),
  .tracker-table th:nth-child(3),
  .tracker-table td:nth-child(1),
  .tracker-table td:nth-child(2),
  .tracker-table td:nth-child(3) {
    position: static;
  }

  .tracker-table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    height: auto;
    padding: 7px 9px;
    border-right: 0;
    line-height: 18px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .tracker-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .tracker-table td:nth-child(1),
  .tracker-table td:nth-child(2) {
    display: inline-flex;
    width: 50%;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    background: var(--header);
    font-weight: 700;
  }

  .tracker-table td:nth-child(1)::before,
  .tracker-table td:nth-child(2)::before {
    margin-right: 8px;
  }

  .tracker-table td:nth-child(3) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .tracker-table td:nth-child(8),
  .tracker-table td:nth-child(9),
  .tracker-table td:nth-child(11),
  .tracker-table td:nth-child(12) {
    align-items: start;
  }

  .editable-cell {
    min-height: 28px;
    overflow: visible;
    white-space: normal;
  }

  .date-input,
  .days-input,
  .status-chip {
    min-height: 32px;
  }

  .date-input {
    min-width: 0;
  }

  .status-chip {
    width: min(170px, 100%);
    padding: 0 8px;
    font-size: 11px;
  }

  .detail-button {
    width: 26px;
    height: 26px;
    margin: 0;
    font-size: 12px;
  }

  .map-link {
    align-items: flex-start;
    white-space: normal;
  }

  .tracker-table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 8px;
    padding: 8px;
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 2px 10px rgba(7, 19, 31, 0.1);
    overflow: visible;
  }

  .tracker-table tbody tr:nth-child(even) {
    background: var(--panel);
  }

  .tracker-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    width: auto;
    gap: 2px;
    min-height: 0;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 15px;
  }

  .tracker-table td::before {
    font-size: 9px;
    line-height: 10px;
    letter-spacing: 0.02em;
  }

  .tracker-table td:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 1;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tracker-table td:nth-child(2)::before,
  .tracker-table td:nth-child(1)::before,
  .tracker-table td:nth-child(3)::before,
  .tracker-table td:nth-child(10)::before {
    display: none;
  }

  .tracker-table td:nth-child(2) .editable-cell {
    min-height: 22px;
    font-size: 18px;
    font-weight: 800;
    line-height: 22px;
  }

  .tracker-table td:nth-child(2) .readonly-cell {
    min-height: 22px;
    font-size: 18px;
    font-weight: 800;
    line-height: 22px;
  }

  .tracker-table td:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 2;
    display: block;
    min-height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
  }

  .tracker-table td:nth-child(1) .editable-cell {
    min-height: 16px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
  }

  .tracker-table td:nth-child(1) .readonly-cell {
    min-height: 16px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
  }

  .tracker-table td.vendor-cell.expiration-soon-cell,
  .tracker-table td.vendor-cell.expiration-very-soon-cell,
  .tracker-table td.vendor-cell.expiration-expired-cell {
    padding-left: 6px;
    border-left: 4px solid var(--attention-strong);
    border-radius: 4px;
  }

  .tracker-table td:nth-child(10) {
    grid-column: 3 / 5;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tracker-table td:nth-child(3) {
    grid-column: 4 / 5;
    grid-row: 2;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tracker-table td:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .tracker-table td:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 3;
  }

  .tracker-table td:nth-child(6) {
    grid-column: 1 / 3;
    grid-row: 4;
  }

  .tracker-table td:nth-child(7) {
    grid-column: 3 / 5;
    grid-row: 4;
  }

  .tracker-table td:nth-child(8),
  .tracker-table td:nth-child(9),
  .tracker-table td:nth-child(11),
  .tracker-table td:nth-child(12),
  .tracker-table td:nth-child(13) {
    grid-column: 1 / -1;
  }

  .tracker-table td:nth-child(13) {
    color: var(--muted);
    font-size: 11px;
  }

  .tracker-table td:nth-child(11) .editable-cell,
  .tracker-table td:nth-child(12) .editable-cell {
    max-height: 46px;
    overflow: auto;
  }

  .date-input,
  .days-input {
    min-height: 28px;
    height: 28px;
    padding: 1px 5px;
  }

  .status-chip {
    width: 118px;
    min-height: 28px;
    height: 28px;
    font-size: 10px;
  }

  .status-menu {
    left: 8px !important;
    right: 8px;
    width: auto;
    max-height: min(70dvh, 520px);
  }

  .trailer-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .dialog-grid,
  .lease-grid,
  .user-form {
    grid-template-columns: 1fr;
  }

  .user-row {
    grid-template-columns: 1fr;
  }

  .user-actions {
    justify-content: stretch;
  }

  .user-actions .plain-button {
    flex: 1;
  }

  .trailer-dialog header,
  .trailer-dialog footer {
    padding: 10px;
  }

  .trailer-dialog footer {
    position: sticky;
    bottom: 0;
    background: var(--header);
  }
}

/* ============ Sidebar Dashboard board style (Gozal red) ============ */
body[data-board-style="sidebar"] { --gz-red:#d81f2a; --gz-red-d:#b3141f; --gz-side:#14171d; background:#f4f6f9; }

/* nav-actions -> fixed left sidebar (pulled out of the topbar flow) */
body[data-board-style="sidebar"]:not(.signed-out) .nav-actions{
  position:fixed; left:0; top:0; bottom:0; width:198px; z-index:70;
  flex-direction:column; align-items:stretch; gap:3px; flex-wrap:nowrap;
  background:var(--gz-side); padding:14px 12px; overflow-y:auto; border-radius:0;
  border-right:1px solid #22262f;
}
body[data-board-style="sidebar"]:not(.signed-out) .board-brand{
  display:block; flex:0 0 auto; height:auto; width:100%;
  background:transparent; border:none; color:#fff; padding:4px 10px 14px; margin:0 0 4px;
}
body[data-board-style="sidebar"]:not(.signed-out) .board-brand strong{ font-size:16px; letter-spacing:2px; }
body[data-board-style="sidebar"]:not(.signed-out) .board-brand .brand-gozal{ color:var(--gz-red); }
body[data-board-style="sidebar"]:not(.signed-out) .board-brand .brand-inc{ color:#fff; }
body[data-board-style="sidebar"]:not(.signed-out) .board-brand .brand-tagline{ color:#6b7482; }
body[data-board-style="sidebar"] .nav-actions .nav-button{
  width:100%; justify-content:flex-start; gap:11px; border-radius:10px; box-shadow:none; font-weight:600;
  background:transparent; border:1px solid transparent; color:#a7afbd; padding:10px 12px;
}
body[data-board-style="sidebar"] .nav-actions .nav-button:hover{ background:#1d222b; color:#fff; }
body[data-board-style="sidebar"] .nav-actions .nav-button.active,
body[data-board-style="sidebar"] .nav-actions .nav-button.is-active,
body[data-board-style="sidebar"] .nav-actions .nav-button[aria-current="page"]{ background:var(--gz-red); color:#fff; border-color:var(--gz-red); }

/* shift everything right of the sidebar */
body[data-board-style="sidebar"]:not(.signed-out){ padding-left:198px; }

/* top header = filters + toolbar */
body[data-board-style="sidebar"]:not(.signed-out) .topbar{
  background:#fff; border-bottom:1px solid #e7eaf0; box-shadow:none; gap:12px; padding:12px 20px;
}

/* contained, app-like scroll on the board page: sidebar + top header + KPI tiles + column
   header all stay fixed; only the trailer rows scroll (Samsara / Motive feel). */
body[data-board-style="sidebar"][data-page="board"]:not(.signed-out){ height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body[data-board-style="sidebar"][data-page="board"]:not(.signed-out) .topbar{ flex:0 0 auto; }
body[data-board-style="sidebar"][data-page="board"]:not(.signed-out) .board-shell{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; height:auto;
}
body[data-board-style="sidebar"][data-page="board"]:not(.signed-out) .summary-strip{ flex:0 0 auto; }
body[data-board-style="sidebar"][data-page="board"]:not(.signed-out) .table-wrap{ flex:1 1 auto; min-height:0; overflow:auto; }
body[data-board-style="sidebar"] .tracker-table thead th{ position:sticky; top:0; z-index:4; }

/* KPI tiles */
body[data-board-style="sidebar"] .summary-strip{ gap:12px; padding:16px 20px; background:transparent; }
body[data-board-style="sidebar"] .summary-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:#fff; border:1px solid #e7eaf0; border-left:4px solid #9aa4b3; border-radius:14px;
  padding:11px 15px; box-shadow:0 2px 10px rgba(30,40,70,.04); min-width:112px;
}
body[data-board-style="sidebar"] .summary-item .summary-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#727b8a; font-weight:700; }
body[data-board-style="sidebar"] .summary-item strong{ font-size:25px; font-weight:800; color:#161b24; }
body[data-board-style="sidebar"] .summary-item:nth-child(1){ border-left-color:#6b7688; }
body[data-board-style="sidebar"] .summary-item:nth-child(2){ border-left-color:#1f9d55; }
body[data-board-style="sidebar"] .summary-item:nth-child(3){ border-left-color:#b9770a; }
body[data-board-style="sidebar"] .summary-item:nth-child(4){ border-left-color:#2563eb; }
body[data-board-style="sidebar"] .summary-item:nth-child(5){ border-left-color:#2563eb; }
body[data-board-style="sidebar"] .summary-item:nth-child(6){ border-left-color:var(--gz-red); }
body[data-board-style="sidebar"] .search-field{ background:#fff; border:1px solid #e7eaf0; border-radius:999px; }

/* table as a card */
body[data-board-style="sidebar"] .table-wrap{
  background:#fff; border:1px solid #e7eaf0; border-radius:16px; margin:0 20px 20px;
  box-shadow:0 4px 18px rgba(30,40,70,.05); overflow:hidden;
}
body[data-board-style="sidebar"] .tracker-table th{
  background:#fafbfc; text-transform:uppercase; font-size:10.5px; letter-spacing:.5px; color:#727b8a; font-weight:700; padding:12px; border-bottom:1px solid #e7eaf0;
}
body[data-board-style="sidebar"] .tracker-table td{ padding:9px 12px; border-color:#f1f2f5; }
body[data-board-style="sidebar"] .tracker-table tbody tr:hover{ background:#f8faff; }

/* status pills — keep the readable solid colors, just make them pill-shaped + show full label */
body[data-board-style="sidebar"] .status-col{ width:158px; }
body[data-board-style="sidebar"] .status-chip{
  width:auto; min-width:0; height:auto; gap:5px; justify-content:flex-start;
  border-radius:999px; padding:5px 12px; font-weight:700; font-size:11.5px; color:#fff; border:none; white-space:nowrap;
}
body[data-board-style="sidebar"] .status-chip span{ overflow:visible; text-overflow:clip; }

/* ---------- professional polish pass ---------- */
/* highlight the active page in the sidebar (Gozal red) */
body[data-board-style="sidebar"][data-page="board"] #homeButton,
body[data-board-style="sidebar"][data-page="shop-map"] #shopMapButton,
body[data-board-style="sidebar"][data-page="cases"] #casesButton,
body[data-board-style="sidebar"][data-page="actions"] #actionQueueButton,
body[data-board-style="sidebar"][data-page="dashboard"] #dashboardButton,
body[data-board-style="sidebar"][data-page="dvir"] #dvirButton,
body[data-board-style="sidebar"][data-page="assets"] #assetsButton{
  background:var(--gz-red); color:#fff; border-color:var(--gz-red);
}
/* smooth micro-interactions */
body[data-board-style="sidebar"] .nav-actions .nav-button,
body[data-board-style="sidebar"] .summary-item,
body[data-board-style="sidebar"] .tracker-table tbody tr{ transition:background .14s ease, transform .14s ease, box-shadow .14s ease, color .14s ease; }
body[data-board-style="sidebar"] .summary-item:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,40,70,.10); }
/* modern filter / toolbar controls */
body[data-board-style="sidebar"] .topbar select{
  border:1px solid #e2e6ee; border-radius:9px; background:#fff; min-height:36px; font-size:13px; color:#28303c; padding:6px 10px;
}
body[data-board-style="sidebar"] .topbar select:focus,
body[data-board-style="sidebar"] .search-field:focus-within{ outline:none; border-color:var(--gz-red); box-shadow:0 0 0 3px rgba(216,31,42,.14); }
/* thin, modern scrollbar for the trailer list */
body[data-board-style="sidebar"] .table-wrap::-webkit-scrollbar{ width:12px; height:12px; }
body[data-board-style="sidebar"] .table-wrap::-webkit-scrollbar-thumb{ background:#cdd3de; border-radius:8px; border:3px solid #fff; }
body[data-board-style="sidebar"] .table-wrap::-webkit-scrollbar-thumb:hover{ background:#b3bccb; }
body[data-board-style="sidebar"] .table-wrap::-webkit-scrollbar-track{ background:transparent; }
/* sticky column header casts a soft shadow so rows read as sliding under it */
body[data-board-style="sidebar"] .tracker-table thead th{ box-shadow:0 1px 0 #e7eaf0, 0 7px 9px -9px rgba(20,30,50,.35); }
/* tidy the numeric/date inline inputs so the grid feels even */
body[data-board-style="sidebar"] .tracker-table td input[type="number"],
body[data-board-style="sidebar"] .tracker-table td input[type="date"]{ border-radius:7px; border:1px solid #e7eaf0; }

/* collapse the sidebar back to a top bar on small screens */
@media (max-width:820px){
  body[data-board-style="sidebar"]:not(.signed-out){ padding-left:0; }
  body[data-board-style="sidebar"]:not(.signed-out) .nav-actions{ position:static; width:auto; flex-direction:row; overflow-x:auto; }
}

/* ===== Board health monitor chip + popover ===== */
.health-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.health-chip:hover { background: color-mix(in srgb, var(--panel) 80%, #000); }
.health-chip[hidden] { display: none !important; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa4b3; flex: 0 0 auto; }
.health-chip[data-status="ok"] .health-dot { background: #1f9d55; }
.health-chip[data-status="warn"] .health-dot { background: #d98c00; }
.health-chip[data-status="down"] .health-dot { background: #e5484d; animation: health-pulse 1.1s ease-in-out infinite; }
.health-chip[data-status="warn"] { border-color: #f0c9a0; }
.health-chip[data-status="down"] { border-color: #f0c9cd; background: #fff5f5; color: #b3141f; }
@keyframes health-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.health-popover {
  /* Body-level + fixed so the topbar's own stacking context (position:relative; z-index:2)
     can't trap it behind the table's sticky headers. Position is set from the chip in JS. */
  position: fixed;
  right: 12px;
  top: 90px;
  z-index: 10050;
  width: min(420px, 92vw);
  max-height: 60vh;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(20, 30, 50, 0.22);
  font-size: 12.5px;
  line-height: 1.5;
}
.health-popover[hidden] { display: none !important; }
.health-head { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.health-head[data-status="ok"] { color: #1f9d55; }
.health-head[data-status="warn"] { color: #b06f00; }
.health-head[data-status="down"] { color: #b3141f; }
.health-issues { margin: 0 0 10px; padding-left: 18px; }
.health-issues li { margin-bottom: 4px; }
.health-tasks { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.health-row { display: grid; grid-template-columns: 10px 116px 1fr; gap: 8px; align-items: baseline; }
.health-row-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.health-row-dot.ok { background: #1f9d55; }
.health-row-dot.bad { background: #e5484d; }
.health-row span:last-child { color: var(--muted); word-break: break-word; }
.health-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }

/* ===== PM (preventive maintenance) schedules ===== */
.pm-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pm-summary { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pm-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.pm-pill.overdue { background: #fdecec; border-color: #f6c9ce; color: #b3141f; }
.pm-pill.soon { background: #fff4e5; border-color: #f3d3a3; color: #98600a; }
.pm-pill.none { background: #eef1f5; border-color: #dbe1e9; color: #5a6b7a; }
.pm-pill.total { background: #eaf3ff; border-color: #c7ddf7; color: #1c5fa8; }
.pm-body { padding: 10px 12px 22px; overflow: auto; }
.pm-empty { color: var(--muted); padding: 18px 4px; }
.pm-group { margin-bottom: 20px; }
.pm-group h3 { margin: 4px 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pm-count { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.pm-table { width: 100%; }
.pm-table th { white-space: nowrap; }
.pm-table td { padding: 4px 6px; vertical-align: middle; }
.pm-unit { font-weight: 700; white-space: nowrap; }
.pm-table input[type="text"], .pm-table input[type="date"], .pm-table select {
  width: 100%; min-width: 92px; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--text); font-size: 12px;
}
.pm-table input:focus, .pm-table select:focus { outline: 2px solid #7aa7e6; outline-offset: -1px; }
.pm-chip { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pm-chip.overdue { background: #e5484d; color: #fff; }
.pm-chip.today { background: #d98c00; color: #fff; }
.pm-chip.soon { background: #fff4e5; color: #98600a; border: 1px solid #f3d3a3; }
.pm-chip.ok { background: #e6f6ee; color: #1f7a4d; border: 1px solid #b7e4c9; }
.pm-chip.far { background: #eef1f5; color: #5a6b7a; border: 1px solid #dbe1e9; }
.pm-chip.none { background: transparent; color: #98a2b3; border: 1px dashed #cbd3de; }
.pm-table .save-saving { border-color: #7aa7e6; }
.pm-table .save-saved { border-color: #1f9d55; }
.pm-table .save-error { border-color: #e5484d; background: #fff5f5; }

/* ---- Adaptive top menu: "More" overflow menu + compact toolbar (2026-09-23) ---- */
/* Rendered on <body> (position: fixed) so no stacking context in the topbar can trap it. */
.nav-more-menu {
  position: fixed;
  z-index: 10060;
  display: grid;
  gap: 2px;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #fff);
  box-shadow: 0 12px 28px rgba(7, 19, 31, 0.18);
}

.nav-more-button[hidden] {
  display: none !important; /* .nav-button's display would otherwise override [hidden] */
}

.nav-more-menu[hidden] {
  display: none;
}

.nav-more-menu .nav-button {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1500px) and (min-width: 901px) {
  /* A healthy board shrinks to its green dot (hover still says "Healthy").
     A degraded or down board keeps its full label at every size - a warning must never
     be hidden to save space. */
  body:not([data-board-style="sidebar"]) .health-chip[data-status="ok"] #healthChipText {
    display: none;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  body:not([data-board-style="sidebar"]) .toolbar .style-select,
  body:not([data-board-style="sidebar"]) .toolbar .density-select {
    max-width: 132px;
  }
}

/* One-click confirm next to a Samsara suggestion (writes "Using NAME" into Driver info). */
.samsara-accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.samsara-accept:hover,
.samsara-accept:focus-visible {
  border-color: #15803d;
  background: #15803d;
  color: #fff;
}

/* History dialog: "Show views" toggle */
.history-views-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}


/* ---- Fleet map page (2026-09-25): trailer cards beside a satellite map ---- */
body:not(.signed-out) .fleet-shell {
  flex: 1 1 auto;
  min-height: 0;
}

body:not([data-page="fleet-map"]) .fleet-shell,
body.signed-out .fleet-shell {
  display: none !important;
}

body[data-page="fleet-map"] .fleet-shell {
  display: grid !important;
}

.fleet-shell {
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  background: var(--app-bg);
}

.fleet-shell.is-panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.fleet-shell.is-panel-collapsed .fleet-panel {
  visibility: hidden;
  border: 0;
}

.fleet-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}

.fleet-panel-head {
  display: grid;
  gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}

.fleet-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--app-bg);
}

.fleet-search:focus-within {
  border-color: var(--blue);
}

.fleet-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.fleet-search input,
.fleet-search input:focus {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.fleet-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fleet-filters select {
  height: 30px;
  max-width: 170px;
  padding: 0 6px;
  font-size: 12px;
}

.fleet-attention-toggle {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.fleet-attention-toggle[aria-pressed="true"] {
  border-color: var(--attention-strong);
  background: var(--attention-strong);
  color: #ffffff;
}

.fleet-count {
  color: var(--muted);
  font-size: 12px;
}

.fleet-list {
  min-height: 0;
  overflow-y: auto;
}

.fleet-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* long Driver info must not widen the card */
  min-width: 0;
  gap: 4px;
  padding: 11px 14px 11px 12px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  cursor: pointer;
  outline: none;
}

.fleet-card:hover {
  background: var(--row-hover);
}

.fleet-card.is-selected {
  border-left-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

.fleet-card:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.fleet-card-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.fleet-card-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.fleet-status {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--status-color, #525252);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.fleet-card-line {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
}

.fleet-card-line svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fleet-card-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-card-line.is-muted {
  color: var(--muted);
}

.fleet-card-line.is-attention {
  color: var(--attention-strong);
  font-weight: 600;
}

.fleet-card-line.is-attention svg {
  stroke: currentColor;
}

.fleet-empty {
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.fleet-map-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fleet-map {
  position: absolute;
  inset: 0;
}

.fleet-panel-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.fleet-panel-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #1f2937;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.fleet-shell.is-panel-collapsed .fleet-panel-toggle svg {
  transform: rotate(180deg);
}

/* Markers: status-coloured squares, like Samsara's asset pins. */
.fleet-pin {
  border: 0;
  background: transparent;
}

.fleet-pin-mark {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background: var(--status-color, #525252);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.fleet-pin-mark.has-attention {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(216, 0, 50, 0.6);
}

.fleet-pin-mark.is-selected {
  border-width: 3px;
  box-shadow: 0 0 0 2px #0b75cf, 0 0 0 7px rgba(11, 117, 207, 0.35);
}

@media (max-width: 900px) {
  .fleet-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42vh minmax(320px, 1fr);
    padding: 6px;
  }

  .fleet-map-wrap {
    order: -1;
  }

  .fleet-panel-toggle {
    display: none;
  }
}

/* Clusters (far zoom only): dark, quiet bubbles instead of the plugin's yellow/green. */
.fleet-cluster {
  border: 0;
  background: transparent;
}

.fleet-cluster span {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #1f2937;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* Board column chooser (2026-09-25) - reuses the Cases chooser panel. */
.board-columns-button {
  min-width: 0;
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.board-columns-hidden-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
}

.board-columns-control .case-columns-panel {
  z-index: 60;
}

@media (min-width: 901px) {
  .tracker-table.has-hidden-columns {
    min-width: var(--board-min-width, 1750px) !important;
  }
}

/* PM by date or mileage + import (2026-09-26) */
.pm-table .pm-miles-input {
  width: 84px;
  text-align: right;
}

.pm-onload {
  min-width: 190px;
  font-size: 12px;
  line-height: 1.35;
}

.pm-onload .pm-load {
  display: block;
  font-weight: 600;
}

.pm-onload .pm-load-meta {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.pm-onload .pm-plan {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff4e5;
  border: 1px solid #f3d3a3;
  color: #98600a;
  font-size: 11px;
  font-weight: 700;
}

.pm-onload .pm-idle {
  color: var(--muted);
}

.pm-import-dialog {
  width: min(760px, calc(100vw - 32px));
}

.pm-import-body {
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: auto;
}

.pm-import-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pm-import-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
  resize: vertical;
}

.pm-import-preview {
  max-height: 260px;
  overflow: auto;
}

.pm-import-table {
  width: 100%;
}

.pm-import-table tr.pm-import-unknown td {
  color: var(--muted);
  text-decoration: line-through;
}

.pm-import-table tr.pm-import-unknown td:nth-child(2) {
  text-decoration: none;
  font-style: italic;
}

.pm-import-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.pm-onload .pm-shop {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.pm-onload .pm-stale {
  display: block;
  color: var(--attention-strong);
  font-weight: 600;
}

/* ---- Time clock + Team hours (2026-09-26) ---- */
body:not([data-page="timesheet"]) .timesheet-shell {
  display: none !important;
}

body[data-page="timesheet"] .timesheet-shell {
  display: grid !important;
}

body[data-page="timesheet"] .filters {
  display: none !important;
}

body[data-page="timesheet"] .topbar {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "nav . toolbar";
}

.time-clock-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.time-clock-button[hidden] {
  display: none;
}

.time-clock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.time-clock-button.is-on .time-clock-dot {
  background: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
}

.time-clock-button.is-long {
  border-color: #d98c00;
  background: #fff4e5;
  color: #7a4d00;
}

.time-clock-button.is-long .time-clock-dot {
  background: #d98c00;
  box-shadow: 0 0 0 3px rgba(217, 140, 0, 0.2);
}

.time-clock-panel {
  position: fixed;
  z-index: 10060;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(7, 19, 31, 0.22);
  font-size: 13px;
}

.time-clock-panel[hidden] {
  display: none;
}

.time-clock-head {
  font-weight: 600;
}

.time-clock-label {
  color: var(--muted);
  font-size: 12px;
}

.time-clock-panel textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.time-clock-actions {
  display: flex;
  justify-content: flex-end;
}

.time-clock-note {
  margin: 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fff4e5;
  color: #7a4d00;
  font-size: 12px;
  line-height: 1.4;
}

.time-clock-error {
  margin: 0;
  color: var(--attention-strong);
  font-size: 12px;
}

.timesheet-body {
  display: grid;
  gap: 16px;
  padding: 12px;
}

.ts-person h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 15px;
}

.ts-total {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.ts-table {
  width: 100%;
}

.ts-table td {
  padding: 5px 8px;
  vertical-align: middle;
}

.ts-hours {
  font-weight: 700;
  white-space: nowrap;
}

.ts-time {
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ts-time:hover {
  background: rgba(11, 117, 207, 0.1);
  box-shadow: inset 0 0 0 1px rgba(11, 117, 207, 0.35);
}

.ts-time-input {
  font: inherit;
  font-size: 12px;
}

.ts-empty {
  color: var(--muted);
}

.ts-live {
  color: #1f9d55;
  font-weight: 700;
}

.ts-flag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ts-flag-warn {
  border: 1px solid #f3d3a3;
  background: #fff4e5;
  color: #98600a;
}

.ts-flag-on {
  border: 1px solid #b7e4c9;
  background: #e6f6ee;
  color: #1f7a4d;
}

.ts-flag-muted {
  border: 1px solid #dbe1e9;
  background: #eef1f5;
  color: #5a6b7a;
}

.ts-handover {
  max-width: 360px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-idle,
.ts-foot {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* ---- PM page, clean grid (2026-09-26, Sam: "make it look smarter, remove what we don't
   need"): 11 columns instead of 16, cells read as plain text - the input frame appears
   on row hover or while editing, placeholders only show then too. ---- */
.pm-table {
  border-collapse: collapse;
}

.pm-table th {
  padding: 7px 8px;
  font-size: 11.5px;
  text-align: left;
}

.pm-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.pm-table tbody tr:hover {
  background: var(--row-hover);
}

.pm-table input.pm-plain,
.pm-table select.pm-plain {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}

.pm-table tr:hover input.pm-plain,
.pm-table tr:hover select.pm-plain {
  border-color: var(--line);
  background: var(--panel);
}

.pm-table input.pm-plain:focus,
.pm-table select.pm-plain:focus {
  border-color: var(--blue);
  background: var(--panel);
  box-shadow: 0 0 0 2px rgba(11, 117, 207, 0.18);
  outline: none;
}

.pm-table input.pm-plain::placeholder {
  color: transparent;
}

.pm-table tr:hover input.pm-plain::placeholder,
.pm-table input.pm-plain:focus::placeholder {
  color: var(--muted);
}

/* Empty date / time pickers show nothing at rest (no "yyyy-mm-dd", no "--:--"). */
.pm-table input.pm-plain.is-empty:not(:focus) {
  color: transparent;
}

.pm-table tr:hover input.pm-plain.is-empty:not(:focus) {
  color: var(--muted);
}

.pm-table input.pm-plain::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.pm-table tr:hover input.pm-plain::-webkit-calendar-picker-indicator,
.pm-table input.pm-plain:focus::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}

.pm-table select.pm-plain {
  appearance: none;
  cursor: pointer;
}

.pm-unit {
  min-width: 96px;
}

.pm-unit-name {
  padding-left: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.pm-table select.pm-group {
  width: auto;
  height: 20px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 11px;
}

.pm-date-cell {
  min-width: 128px;
}

.pm-date-cell input[type="time"].is-empty:not(:focus) {
  display: none;
}

.pm-table tr:hover .pm-date-cell input[type="time"].is-empty {
  display: block;
}

.pm-due {
  min-width: 118px;
  white-space: nowrap;
}

.pm-due-sub {
  display: block;
  margin-top: 2px;
  padding-left: 2px;
  color: var(--muted);
  font-size: 11px;
}

.pm-dueat {
  min-width: 110px;
}

.pm-dueat input.pm-plain {
  text-align: right;
}

.pm-every {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.pm-every input.pm-plain {
  height: 20px;
  font-size: 11px;
}

.pm-onload {
  min-width: 250px;
  max-width: 320px;
  white-space: normal;
}

.pm-last {
  min-width: 128px;
}

.pm-last input.pm-plain + input.pm-plain {
  height: 20px;
  color: var(--muted);
  font-size: 11px;
}

.pm-notes {
  min-width: 160px;
}

/* Status reads as a coloured label, still a dropdown on click. */
.pm-table select.pm-status {
  width: auto;
  min-width: 92px;
  font-weight: 700;
}

.pm-table select.pm-status[data-value="Planned"] { color: #1c5fa8; }
.pm-table select.pm-status[data-value="Confirmed"] { color: #1f7a4d; }
.pm-table select.pm-status[data-value="In shop"] { color: #98600a; }
.pm-table select.pm-status[data-value="Done"] { color: var(--muted); }
.pm-table select.pm-status[data-value=""] { color: var(--muted); font-weight: 400; }

/* Compact rows: the group is already the section title, and an empty last-PM odometer
   only needs to appear when you go to fill it in. */
.pm-table select.pm-group,
.pm-last input.pm-plain.is-empty + input.pm-plain.is-empty:not(:focus) {
  display: none;
}

.pm-table tr:hover select.pm-group,
.pm-table tr:hover .pm-last input.pm-plain + input.pm-plain {
  display: block;
}

/* The second measure sits beside the chip, not under it, so rows stay one line tall. */
.pm-due-sub {
  display: inline;
  margin: 0 0 0 6px;
  padding: 0;
}

.pm-table td.pm-due {
  min-width: 205px;
  overflow: visible;
}

/* One-line rows, no layout shift on hover (2026-09-26): side-by-side controls with their
   space reserved; hidden ones use visibility, never display. */
.pm-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-unit-name {
  flex: 0 0 auto;
}

.pm-table select.pm-group,
.pm-table tr:hover select.pm-group {
  display: inline-block;
  width: 72px;
  height: 22px;
  visibility: hidden;
}

.pm-table tr:hover select.pm-group,
.pm-table select.pm-group:focus {
  visibility: visible;
}

.pm-date-cell {
  min-width: 212px;
}

.pm-date-cell input[type="date"].pm-plain {
  width: 124px;
  flex: 0 0 124px;
}

.pm-date-cell input[type="time"].pm-plain,
.pm-date-cell input[type="time"].is-empty:not(:focus),
.pm-table tr:hover .pm-date-cell input[type="time"].is-empty {
  display: block;
  width: 84px;
  flex: 0 0 84px;
}

.pm-last {
  min-width: 222px;
}

.pm-last input[type="date"].pm-plain {
  width: 124px;
  flex: 0 0 124px;
}

.pm-last input.pm-plain + input.pm-plain,
.pm-last input.pm-plain.is-empty + input.pm-plain.is-empty:not(:focus),
.pm-table tr:hover .pm-last input.pm-plain + input.pm-plain {
  display: block;
  width: 92px;
  flex: 0 0 92px;
  height: 26px;
  font-size: 12px;
}

/* Own trucks' interval sits beside the due mileage, same line. */
.pm-dueat {
  min-width: 190px;
}

.pm-dueat {
  white-space: nowrap;
}

.pm-dueat > input.pm-plain {
  display: inline-block;
  width: 92px;
}

.pm-every {
  display: inline-flex;
  width: 92px;
  vertical-align: middle;
}

.pm-every input.pm-plain {
  width: 58px;
  height: 22px;
}

/* The PM table sizes columns by content (it inherited the Cases table's fixed layout,
   which split the width evenly and wrapped the unit cell). */
.pm-table.cases-table {
  table-layout: auto;
}

.pm-table input.pm-plain,
.pm-table select.pm-plain {
  margin: 0;
}

/* ---- PM grid v2 (2026-09-26, Sam: graphic issues when zooming) ----
   8 proportional columns (colgroup), fixed layout so every zoom level scales the same
   way; every row is one 36px line; long text ends in "..." with the full text on hover;
   only the cell under the mouse (or being edited) shows an input frame. */
.pm-table.pm-grid {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}

.pm-table.pm-grid th,
.pm-table.pm-grid td {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  height: 36px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.pm-table.pm-grid td.pm-due,
.pm-table.pm-grid td.pm-onload,
.pm-table.pm-grid td.pm-dueat,
.pm-table.pm-grid td.pm-unit {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
}

.pm-table.pm-grid .pm-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-table.pm-grid .pm-meta {
  color: var(--muted);
  font-weight: 400;
}

.pm-table.pm-grid .pm-stale {
  color: var(--attention-strong);
  font-weight: 600;
}

.pm-table.pm-grid .pm-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border: 1px solid #f3d3a3;
  border-radius: 999px;
  background: #fff4e5;
  color: #98600a;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  vertical-align: 1px;
}

.pm-table.pm-grid .pm-chip {
  padding: 2px 9px;
  font-size: 11.5px;
}

.pm-table.pm-grid .pm-unit-name {
  padding-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Frames: nothing at rest, nothing on plain row hover - only the hovered / focused cell. */
.pm-table.pm-grid tr:hover input.pm-plain,
.pm-table.pm-grid tr:hover select.pm-plain {
  border-color: transparent;
  background: transparent;
}

.pm-table.pm-grid td:hover input.pm-plain,
.pm-table.pm-grid td:hover select.pm-plain,
.pm-table.pm-grid input.pm-plain:focus,
.pm-table.pm-grid select.pm-plain:focus {
  border-color: var(--line-dark);
  background: var(--panel);
}

.pm-table.pm-grid input.pm-plain:focus,
.pm-table.pm-grid select.pm-plain:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(11, 117, 207, 0.18);
}

.pm-table.pm-grid tr:hover input.pm-plain::placeholder {
  color: transparent;
}

.pm-table.pm-grid td:hover input.pm-plain::placeholder,
.pm-table.pm-grid input.pm-plain:focus::placeholder {
  color: var(--muted);
}

.pm-table.pm-grid tr:hover input.pm-plain.is-empty:not(:focus) {
  color: transparent;
}

.pm-table.pm-grid td:hover input.pm-plain.is-empty:not(:focus) {
  color: var(--muted);
}

.pm-table.pm-grid tr:hover input.pm-plain::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.pm-table.pm-grid td:hover input.pm-plain::-webkit-calendar-picker-indicator,
.pm-table.pm-grid input.pm-plain:focus::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}

.pm-table.pm-grid input.pm-plain,
.pm-table.pm-grid select.pm-plain {
  height: 26px;
  font-size: 12.5px;
}

/* Group selector: only while the unit cell is hovered or focused (space kept). */
.pm-table.pm-grid select.pm-group,
.pm-table.pm-grid tr:hover select.pm-group {
  display: inline-block;
  width: 70px;
  flex: 0 0 70px;
  height: 22px;
  font-size: 11px;
  visibility: hidden;
}

.pm-table.pm-grid td.pm-unit:hover select.pm-group,
.pm-table.pm-grid select.pm-group:focus {
  visibility: visible;
}

.pm-table.pm-grid .pm-inline {
  gap: 4px;
}

.pm-table.pm-grid td.pm-unit .pm-inline {
  justify-content: space-between;
}

/* Due at: due mileage + (own trucks) interval, side by side. */
.pm-table.pm-grid td.pm-dueat input.pm-plain {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: right;
}

.pm-table.pm-grid td.pm-dueat input[data-pm-field="intervalMiles"] {
  flex: 0 0 58px;
  width: 58px;
  color: var(--muted);
  font-size: 11.5px;
}

.pm-table.pm-grid select.pm-status {
  width: 100%;
  min-width: 0;
}

/* Pages other than the board: the menu column may shrink (minmax(0, max-content)), so
   fitNav sees the overflow and folds buttons into "More" instead of pushing the whole
   page wider than the window when zoomed in (2026-09-26: 2023px page at 1100px). */
body:not([data-board-style="sidebar"])[data-page="shop-map"] .topbar,
body:not([data-board-style="sidebar"])[data-page="cases"] .topbar,
body:not([data-board-style="sidebar"])[data-page="actions"] .topbar,
body:not([data-board-style="sidebar"])[data-page="dashboard"] .topbar,
body:not([data-board-style="sidebar"])[data-page="dvir"] .topbar,
body:not([data-board-style="sidebar"])[data-page="assets"] .topbar,
body:not([data-board-style="sidebar"])[data-page="fleet-map"] .topbar,
body:not([data-board-style="sidebar"])[data-page="pm"] .topbar,
body:not([data-board-style="sidebar"])[data-page="timesheet"] .topbar {
  /* Two areas here ("nav toolbar"): the toolbar keeps its full width and the menu takes the
     rest, so a wider toolbar ("On shift 10h 16m", health text) shrinks the menu - which
     then folds into "More" - instead of sliding over it (2026-09-28). */
  grid-template-columns: minmax(0, 1fr) max-content;
}

/* Due date needs room for a full date at high zoom. */
.pm-table.pm-grid td input[type="date"].pm-plain {
  min-width: 0;
  padding: 2px 4px;
  font-size: 12px;
}

/* Very high zoom (>= ~175% on a 1080p screen): the signed-in name is the first thing to
   go - the toolbar must fit before anything pushes the page sideways. */
@media (max-width: 1100px) and (min-width: 901px) {
  .current-user {
    display: none;
  }
}

/* Between the phone layout (<= 900px) and 1024px - i.e. a 1080p screen zoomed to ~200% -
   the page shells may be narrower than 1024px; their tables scroll inside themselves,
   so the page itself never scrolls sideways. */
@media (max-width: 1100px) and (min-width: 901px) {
  .board-shell,
  .shop-shell,
  .cases-shell,
  .action-shell,
  .dashboard-shell,
  .fleet-shell {
    min-width: 0;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .summary-strip {
    grid-template-columns: repeat(6, max-content) minmax(110px, 1fr) max-content max-content;
    gap: 6px;
  }

  .summary-strip .sync-status {
    display: none;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .summary-strip {
    gap: 4px;
    padding: 3px 6px;
    grid-template-columns: repeat(6, max-content) minmax(96px, 1fr) max-content max-content;
  }
}

/* ---- Clock-in to edit + End shift handover (2026-09-26) ---- */
.time-clock-button.is-required {
  border-color: var(--blue);
  color: var(--blue);
}

.clockin-dialog,
.endshift-dialog {
  width: min(560px, calc(100vw - 32px));
}

.clockin-body,
.endshift-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  overflow: auto;
}

.clockin-lead {
  margin: 0;
  font-size: 14px;
}

.endshift-dialog h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.endshift-when {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.endshift-summary {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--row-alt);
  font-size: 13px;
}

.endshift-summary:empty {
  display: none;
}

.endshift-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endshift-field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.endshift-field small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
}

.endshift-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.endshift-send {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.endshift-send input:disabled + span {
  color: var(--muted);
}

/* Handover display (clock-in panel, prompt, Team hours). */
.ho-recent {
  display: grid;
  gap: 8px;
}

.ho-recent-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ho-card {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--row-alt);
}

.ho-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.ho-card-head span {
  color: var(--muted);
}

.ho-block {
  font-size: 12.5px;
  line-height: 1.4;
}

.ho-title {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.ho-block ul {
  margin: 2px 0 0;
  padding-left: 18px;
}

.ho-block p {
  margin: 2px 0 0;
}

.ho-summary,
.ho-clear {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}

.ts-table td.ts-handover {
  max-width: 420px;
  white-space: normal;
}

.ts-table td.ts-handover .ho-block {
  font-size: 12px;
}

.ts-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
}

.ts-setting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ts-setting small {
  color: var(--muted);
}

.ts-setting select {
  height: 28px;
  font-size: 12.5px;
}

body[data-page="timesheet"] .timesheet-shell {
  grid-template-rows: 44px auto minmax(0, 1fr);
}

.endshift-body {
  overflow-x: hidden;
}

.endshift-send input,
.ts-setting input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.endshift-send {
  justify-content: flex-start;
}

/* Team hours handover: compact line, expands in place on click. */
.ho-cell {
  cursor: pointer;
}

.ho-cell-line {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--row-alt);
  border: 1px solid var(--line);
  font-size: 12px;
  white-space: nowrap;
}

.ho-cell:hover .ho-cell-line {
  border-color: var(--blue);
}

.ho-cell-full {
  display: none;
  margin-top: 6px;
}

.ho-cell.is-open .ho-cell-full {
  display: grid;
  gap: 6px;
}

.ts-table td.ts-handover {
  min-width: 150px;
}

.ts-setting span {
  white-space: nowrap;
}

.ho-cell-line {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Clock-in rule state: impossible to miss when it is off. */
.ts-rule-state {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
  font-size: 11.5px;
  font-weight: 700;
}

.ts-rule-state.is-off {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}

.ts-rule-state:empty {
  display: none;
}

#tsRequireClockIn {
  cursor: pointer;
}

.endshift-carry {
  margin: 0;
  padding: 6px 10px;
  border-left: 3px solid var(--blue);
  background: var(--row-alt);
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- Handover v3: item status + organised card (2026-09-26) ---- */
.endshift-dialog {
  width: min(660px, calc(100vw - 32px));
}

.endshift-carry[hidden] {
  display: none;
}

.ho-rows {
  display: grid;
  gap: 4px;
}

.ho-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
}

.ho-row.is-progress {
  border-left-color: #d97706;
}

.ho-row.is-done {
  border-left-color: #16a34a;
  background: var(--row-alt);
}

.ho-row .ho-row-text {
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
}

.ho-row .ho-row-text:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-radius: 4px;
}

.ho-row.is-done .ho-row-text {
  color: var(--muted);
  text-decoration: line-through;
}

.ho-row-status {
  display: inline-flex;
  gap: 4px;
}

.ho-row-status button {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ho-row-status button:hover {
  border-color: var(--line-dark);
  color: var(--text);
}

.ho-row-status button[data-status="progress"][aria-pressed="true"] {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.ho-row-status button[data-status="done"][aria-pressed="true"] {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.ho-row-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ho-row-remove:hover {
  background: var(--row-alt);
  color: var(--text);
}

.ho-edit .ho-add {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px dashed var(--line-dark);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 560px) {
  .ho-row-status button span {
    display: none;
  }
}

/* Read-only handover: rows with a status icon column. */
.ho-title em {
  margin-left: 4px;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.ho-items {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.ho-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
}

.ho-item .ho-icon {
  text-align: center;
}

.ho-item.is-open .ho-icon {
  color: var(--muted);
  font-weight: 700;
}

.ho-item.is-done > span:last-child {
  color: var(--muted);
  text-decoration: line-through;
}

.ho-notes {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--panel);
}

.ho-notes p {
  margin: 0;
}

.ho-card .ho-block + .ho-block {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* ---- Off the clock: the board is read-only ---- */
body.off-clock #boardBody .cell-view,
body.off-clock #boardBody .status-chip,
body.off-clock #boardBody .samsara-accept,
body.off-clock #pmBody input,
body.off-clock #pmBody select,
body.off-clock #pmBody button,
body.off-clock #pmImportButton,
body.off-clock #addCaseButton {
  cursor: default;
}

body.off-clock #boardBody .cell-view:hover,
body.off-clock #boardBody .cell-view:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

body.off-clock #boardBody .samsara-accept,
body.off-clock #pmImportButton,
body.off-clock #addCaseButton {
  opacity: 0.45;
}

/* Buttons that only add or change things are hidden off the clock, not just greyed out
   (Sam, 2026-10-20: "hide the features when they are not allowed to use"). */
body.off-clock #addTrailerButton,
body.off-clock #syncButton,
body.off-clock #addCaseButton,
body.off-clock #pmImportButton,
body.off-clock #addShopButton {
  display: none !important;
}

.time-clock-button.is-nudged {
  animation: clock-nudge 0.9s ease-in-out 2;
}

@keyframes clock-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.35); }
}

.ho-row {
  align-items: start;
}

.ho-row .ho-row-text {
  display: block;
  height: auto;
  min-height: 28px;
  padding: 5px 4px;
  overflow: hidden;
  line-height: 18px;
  resize: none;
}

.ho-row-status,
.ho-row-remove {
  margin-top: 1px;
}

.ho-notes.ho-items {
  margin-top: 4px;
}

/* Team hours: active time (2026-09-27) */
.ts-active {
  white-space: nowrap;
}

.ts-active-time {
  font-weight: 600;
}

.ts-active-time.is-low {
  color: #b45309;
}

.ts-active-pct {
  color: var(--muted);
  font-size: 11.5px;
}

.ts-table td.ts-notes {
  max-width: none;
  overflow: visible;
  white-space: normal;
}

.ts-table td.ts-notes .ts-flag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  white-space: nowrap;
}

/* Shift summary: headline + short per-trailer lines (2026-09-27) */
.ho-summary {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
}

.ho-summary strong {
  font-weight: 600;
}

.ho-summary ul {
  display: grid;
  gap: 1px;
  margin: 3px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
}

.ho-card .ho-summary,
.ts-handover .ho-summary {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.endshift-summary .ho-summary span {
  overflow: visible;
  white-space: normal;
}

.endshift-summary ul {
  max-height: 150px;
  overflow: auto;
}

.ho-row .ho-row-text {
  field-sizing: content;
  max-height: 160px;
}

/* Off-the-clock panel: Start shift on top, handover scrolls (2026-09-28) */
.time-clock-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100vh - 72px);
  width: min(380px, calc(100vw - 24px));
}

.time-clock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.time-clock-top .primary-button {
  flex: none;
}

.time-clock-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/* The "Start your shift" window: the handover scrolls, the buttons stay in view. */
.clockin-dialog .clockin-body {
  min-height: 0;
}

/* ---- Main nav: every section always visible, current one highlighted (2026-09-28) ----
   Before, the current page's button was hidden and "Trailer board" only appeared on four
   pages - on DVIR / Assets / PM / Fleet map there was no button back to the board. */
#headerBoardButton:not([hidden]),
body[data-page] #shopMapButton:not([hidden]),
body[data-page] #casesButton:not([hidden]),
body[data-page] #actionQueueButton:not([hidden]),
body[data-page] #dashboardButton:not([hidden]) {
  display: inline-flex;
}

body[data-page="board"] #headerBoardButton,
body[data-page="shop-map"] #shopMapButton,
body[data-page="fleet-map"] #fleetMapButton,
body[data-page="cases"] #casesButton,
body[data-page="actions"] #actionQueueButton,
body[data-page="dashboard"] #dashboardButton,
body[data-page="dvir"] #dvirButton,
body[data-page="assets"] #assetsButton,
body[data-page="pm"] #pmButton {
  border-color: var(--blue);
  background: rgba(0, 109, 188, 0.12);
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}

body[data-board-style="sidebar"][data-page="board"] #headerBoardButton,
body[data-board-style="sidebar"][data-page="fleet-map"] #fleetMapButton,
body[data-board-style="sidebar"][data-page="pm"] #pmButton {
  border-color: var(--gz-red);
  background: var(--gz-red);
  color: #fff;
  box-shadow: none;
}

/* Add trailer belongs to the Trailer board only. */
body:not([data-page="board"]) #addTrailerButton {
  display: none !important;
}

/* Board page: the menu column may shrink too (it was max-content, so a wider menu pushed the
   toolbar off the right edge - 2400 px wide showed it ending at 2810 px). Filters keep their
   520 px; the menu folds to icons / "More" instead (2026-09-28). Sidebar style has its own. */
@media (min-width: 2101px) {
  /* Only the wide one-row layout ("nav filters toolbar"). At 2100 px and below the board
     uses two rows with its own columns - this rule must not reach it (it did on 09-28 and
     the toolbar slid over the menu at 1920 px). */
  body:not([data-board-style="sidebar"])[data-page="board"] .topbar {
    grid-template-columns: minmax(0, max-content) minmax(520px, 1fr) max-content;
  }
}

/* Returned / total-lost trailers: toggle next to Columns, rows shown muted (2026-09-28) */
.board-offfleet-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.board-offfleet-button[hidden] {
  display: none;
}

.board-offfleet-button[aria-pressed="true"] {
  border-color: var(--blue);
  background: rgba(0, 109, 188, 0.12);
  color: var(--blue);
}

.tracker-table tbody tr.is-offfleet > td {
  color: var(--muted);
}

.tracker-table tbody tr.is-offfleet > td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

/* Smaller "Returned / lost" button (Sam, 2026-09-28) */
.board-offfleet-button {
  min-height: 0;
  height: 26px;
  padding: 0 8px;
  gap: 4px;
  font-size: 12px;
}

.board-offfleet-button svg {
  width: 14px;
  height: 14px;
}

.board-offfleet-button .offfleet-count {
  padding: 0 5px;
  font-size: 10px;
}

/* "No handover" people: simple End shift window + Team hours chips (2026-09-28) */
.endshift-simple .endshift-carry,
.endshift-simple .ho-edit,
.endshift-simple .endshift-field,
.endshift-simple .endshift-send,
.endshift-simple #endShiftPost {
  display: none !important;
}

.ts-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ts-chip {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.ts-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: rgba(0, 109, 188, 0.12);
  color: var(--blue);
  font-weight: 600;
}

/* Password boxes are text boxes drawn as dots, so browsers never offer to save them
   (Sam, 2026-09-30). login.js falls back to a real password box if dots are unsupported. */
input.masked-password {
  -webkit-text-security: disc;
  text-security: disc;
  font-family: inherit;
  letter-spacing: 0.08em;
}

/* End shift: "Finished earlier?" when the last board use was hours ago (2026-10-05) */
.endshift-earlier {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid #f0c36d;
  border-left: 3px solid #d97706;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.08);
  font-size: 13px;
}

.endshift-earlier[hidden] {
  display: none;
}

.endshift-earlier label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.endshift-earlier input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.endshift-earlier p {
  margin: 0;
}

/* Trailer details: Delete (admins) - sits on the left, red; second click deletes (2026-10-07) */
.delete-trailer-button {
  margin-right: auto;
  border-color: #e3a3a8;
  color: #b42318;
}

.delete-trailer-button:hover,
.delete-trailer-button.is-armed {
  border-color: #b42318;
  background: #b42318;
  color: #ffffff;
}

/* ---- Team schedule + time-off planner (2026-10-14) ---- */
body:not([data-page="schedule"]) .schedule-shell {
  display: none !important;
}

body[data-page="schedule"] .schedule-shell {
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr);
}

body[data-page="schedule"] .filters {
  display: none !important;
}

body[data-page="schedule"] .topbar {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "nav . toolbar";
}

body:not([data-board-style="sidebar"])[data-page="schedule"] .topbar {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.schedule-body {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 12px;
  overflow: auto;
  align-content: start;
}

.schedule-body h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.sched-week,
.sched-people-wrap,
.sched-changes {
  grid-column: 1 / -1;
}

.sched-now,
.sched-plan,
.sched-week,
.sched-people-wrap,
.sched-changes {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.sched-plan-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
}

.sched-plan-form .field {
  display: grid;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}

.sched-plan-form input,
.sched-plan-form select {
  min-height: 30px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.sched-note input {
  width: 220px;
}

.sched-kind {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
  font-size: 13px;
}

.sched-kind legend {
  float: left;
  margin-right: 4px;
  color: var(--muted);
  font-size: 12px;
}

.sched-hint {
  margin: 8px 0 0;
  max-width: 90ch;
  color: var(--muted);
  font-size: 12px;
}

.sched-results {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sched-results:empty {
  display: none;
}

.sched-option {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sched-option.is-best {
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.sched-option header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sched-option h3 {
  margin: 0;
  font-size: 14px;
}

.sched-best {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--green);
  color: var(--chip-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sched-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}

.sched-chip {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

.sched-chip.is-you {
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}

.sched-chip.is-thin {
  border-color: var(--yellow);
  color: var(--yellow);
}

.sched-chip.is-gap {
  border-color: var(--red);
  color: var(--red);
  font-weight: 600;
}

.sched-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.sched-steps > li > b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sched-steps > li > b::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--who, var(--gray));
}

.sched-steps ul {
  margin: 2px 0 0;
  padding-left: 18px;
}

.sched-warn {
  margin: 0;
  padding: 6px 10px;
  border-left: 3px solid var(--yellow);
  font-size: 13px;
}

.sched-bad {
  color: var(--red);
}

.sched-good {
  color: var(--green);
}

.sched-week-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
  font-size: 12.5px;
}

.sched-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.sched-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.sched-legend i {
  width: 12px;
  height: 9px;
  border-radius: 2px;
}

.sched-health {
  color: var(--muted);
}

.sched-grid-wrap {
  overflow-x: auto;
}

.sched-grid {
  display: grid;
  grid-template-columns: 92px minmax(720px, 1fr);
  row-gap: 2px;
  font-variant-numeric: tabular-nums;
}

.sched-hours {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.sched-hours span {
  padding-left: 2px;
  border-left: 1px solid var(--line);
}

.sched-day-label {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
}

.sched-day {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--lanes), 15px) 16px;
  row-gap: 2px;
  padding-block: 5px;
  border-top: 1px solid var(--line);
}

.sched-lane {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--row-alt) 55%, transparent);
}



.sched-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding-inline: 4px;
  border-radius: 3px;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}

.sched-bar.is-changed {
  outline: 2px dashed var(--text);
  outline-offset: -2px;
}

.sched-cov {
  display: grid;
  grid-template-columns: repeat(var(--hours), 1fr);
  gap: 1px;
}

.sched-cov i {
  border-radius: 2px;
  background: var(--row-alt);
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}

.sched-cov {
  position: relative;
  z-index: 1;
}

.sched-cov i.is-c1 {
  background: color-mix(in srgb, var(--teal) 14%, var(--panel));
}

.sched-cov i.is-c2 {
  background: color-mix(in srgb, var(--teal) 32%, var(--panel));
  color: var(--text);
}

.sched-cov i.is-c3 {
  background: color-mix(in srgb, var(--teal) 52%, var(--panel));
  color: var(--text);
  font-weight: 600;
}

.sched-cov i.is-thin {
  box-shadow: inset 0 0 0 1.5px var(--yellow);
  color: var(--yellow);
  font-weight: 600;
}

.sched-cov i.is-gap {
  background: var(--attention);
  color: var(--attention-strong);
  font-weight: 700;
}

.sched-changes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sched-changes-table th,
.sched-changes-table td {
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.sched-changes-table th {
  border-top: 0;
  color: var(--muted);
  font-size: 12px;
}

.sched-changes-table small {
  color: var(--muted);
}

.sched-changes-table tr.is-past td {
  color: var(--muted);
}

.sched-changes-table tr.is-cancelled td {
  color: var(--muted);
  text-decoration: line-through;
}

.sched-changes-table tr.is-cancelled td small {
  text-decoration: none;
}

.sched-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.sched-team-body {
  display: grid;
  gap: 8px;
}

#scheduleTeamText {
  width: min(760px, 80vw);
  height: 52vh;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

.sched-team-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sched-kind input {
  width: auto;
  min-height: 0;
  margin: 0 4px 0 0;
}

.sched-kind label {
  display: inline-flex;
  align-items: center;
}

/* Assets: the three papers that matter (2026-10-14) */
.asset-doc-insp {
  border-color: #f2b8b5;
  background: #fdecea;
  color: #b42318;
}

.asset-doc-cab {
  border-color: #c9b8f0;
  background: #f1ecfd;
  color: #5b3cc4;
}

/* ---- Schedule: zones, busy window, people, on shift now (2026-10-14) ---- */
.sched-week-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.sched-week-top h3 {
  margin: 0;
}

.sched-zones {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sched-zone {
  padding: 5px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.sched-zone:last-child {
  border-right: 0;
}

.sched-zone[aria-pressed="true"] {
  background: var(--text);
  color: var(--panel);
}

.sched-zone:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.sched-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.sched-stat {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.sched-stat b {
  color: var(--text);
  font-size: 15px;
}

.sched-stat.is-good b {
  color: var(--green);
}

.sched-stat.is-warn b {
  color: var(--yellow);
}

.sched-stat.is-bad {
  border-color: var(--red);
}

.sched-stat.is-bad b {
  color: var(--red);
}

.sched-legend b {
  font-weight: 600;
  color: var(--muted);
}

.sched-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--muted);
}

.sched-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sched-key i {
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

.sched-key-heavy {
  background: color-mix(in srgb, var(--yellow) 30%, var(--panel));
}

.sched-key-changed {
  outline: 2px dashed var(--text);
  outline-offset: -2px;
}

.sched-key-thin {
  box-shadow: inset 0 0 0 1.5px var(--yellow);
}

.sched-key-gap {
  background: var(--attention);
}

.sched-heavy-layer {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
}

.sched-heavy {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--yellow) 22%, transparent);
}

.sched-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.sched-person {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sched-person header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.sched-person header i {
  align-self: center;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.sched-person header b {
  font-size: 15px;
}

.sched-person header span {
  color: var(--muted);
  font-size: 12px;
}

.sched-person table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.sched-person td {
  padding: 3px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.sched-person td:first-child {
  width: 3em;
  font-weight: 600;
}

.sched-person td:last-child {
  color: var(--muted);
  font-size: 11.5px;
  text-align: right;
}

.sched-person tr.is-off td {
  color: var(--muted);
  font-style: italic;
}

.sched-person tr.is-changed td em {
  color: var(--blue);
  font-style: normal;
  font-weight: 600;
}

.sched-person p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sched-now header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}

.sched-now header h3 {
  margin: 0;
}

.sched-now header > span:not(.sched-pill) {
  color: var(--muted);
  font-size: 12px;
}

.sched-now ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.sched-now li {
  display: grid;
  grid-template-columns: 11px max-content minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.sched-now li i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.sched-now li > span:not(.sched-pill) {
  color: var(--muted);
  font-size: 12px;
}

.sched-now li .sched-pill {
  grid-column: 2 / -1;
  justify-self: start;
}

.sched-now p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.sched-pill {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.sched-pill.is-in {
  background: color-mix(in srgb, var(--green) 18%, var(--panel));
  color: var(--green);
}

.sched-pill.is-out {
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--red);
}

.sched-pill.is-thin {
  background: color-mix(in srgb, var(--yellow) 18%, var(--panel));
  color: var(--yellow);
}

.sched-pill.is-gap {
  background: var(--attention);
  color: var(--attention-strong);
}

.sched-zones-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* The manager's own hours: shown, not counted as desk cover. */
.sched-bar.is-manager {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.22) 6px 9px);
}

.sched-legend small {
  color: var(--muted);
  font-size: 11px;
}

.sched-now li b small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

/* ---- Schedule views: table, day list, heatmap (2026-10-14) ---- */
.sched-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.sched-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sched-table th,
.sched-table td {
  padding: 7px 8px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.sched-table thead th {
  background: var(--header);
  font-size: 12px;
}

.sched-table tbody th {
  white-space: nowrap;
}

.sched-table tbody th i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
}

.sched-table td {
  box-shadow: inset 3px 0 0 var(--who, transparent);
}

.sched-table td span {
  font-weight: 600;
}

.sched-table td small {
  margin-left: 6px;
  color: var(--muted);
}

.sched-table td.is-off {
  color: var(--muted);
  font-style: italic;
  box-shadow: none;
}

.sched-table td.is-changed {
  outline: 2px dashed var(--text);
  outline-offset: -3px;
}

.sched-table-total {
  font-weight: 600;
  white-space: nowrap;
}

.sched-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
}

.sched-daycard {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sched-daycard h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.sched-daycard ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.sched-daycard li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
}

.sched-daycard li i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sched-daycard li span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sched-daycard li b {
  grid-column: 2;
}

.sched-daycard li.is-changed b::after {
  content: " (changed)";
  color: var(--blue);
  font-weight: 400;
}

.sched-daycard p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sched-heatmap {
  display: grid;
  grid-template-columns: 110px repeat(24, minmax(26px, 1fr));
  gap: 2px;
  min-width: 760px;
  font-variant-numeric: tabular-nums;
}

.sched-heatmap > span {
  color: var(--muted);
  font-size: 10.5px;
}

.sched-heatmap > b {
  align-self: center;
  font-size: 12.5px;
}

.sched-heatmap i {
  height: 30px;
  border-radius: 3px;
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  line-height: 30px;
  text-align: center;
}

.sched-heatmap i.is-c1 { background: color-mix(in srgb, var(--teal) 18%, var(--panel)); }
.sched-heatmap i.is-c2 { background: color-mix(in srgb, var(--teal) 38%, var(--panel)); }
.sched-heatmap i.is-c3 { background: color-mix(in srgb, var(--teal) 58%, var(--panel)); font-weight: 600; }
.sched-heatmap i.is-c4 { background: color-mix(in srgb, var(--teal) 78%, var(--panel)); font-weight: 600; }

.sched-heatmap i.is-thin {
  background: color-mix(in srgb, var(--yellow) 25%, var(--panel));
  box-shadow: inset 0 0 0 2px var(--yellow);
  font-weight: 700;
}

.sched-heatmap i.is-gap {
  background: var(--attention);
  color: var(--attention-strong);
  font-weight: 700;
}

.sched-heatmap i.is-busyhour {
  border-bottom: 3px solid color-mix(in srgb, var(--yellow) 70%, transparent);
}

/* ---- On shift now as one compact strip (2026-10-14: "taking too much space") ---- */
.schedule-body {
  grid-template-columns: minmax(0, 1fr);
}

.sched-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 12px;
}

.sched-now h3 {
  margin: 0;
  font-size: 14px;
}

.sched-now-time,
.sched-now-next {
  color: var(--muted);
  font-size: 12px;
}

.sched-now-next b {
  color: var(--text);
}

.sched-now ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sched-now li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

.sched-now li.is-extra {
  border-style: dashed;
}

.sched-now li i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.sched-now li > span {
  color: var(--muted);
  font-size: 12px;
}

.sched-now li em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

.sched-now li em.is-in {
  color: var(--green);
}

.sched-now li em.is-out {
  color: var(--red);
}

.sched-plan {
  padding-block: 10px;
}

.sched-plan h3 {
  margin-bottom: 6px;
}

.sched-plan .sched-hint {
  margin-top: 6px;
}

/* Read-only schedule for non-admins: the week and On shift now only. */
body.schedule-readonly #scheduleEditTeam,
body.schedule-readonly .sched-plan,
body.schedule-readonly .sched-changes {
  display: none !important;
}

/* ---- Calmer week (2026-10-14): thin coverage strip, warnings only when needed ---- */
.sched-day {
  grid-template-rows: repeat(var(--lanes), 15px) 6px;
}

.sched-day.is-plain {
  grid-template-rows: repeat(var(--lanes), 15px);
}

.sched-cov i {
  font-size: 0;
  line-height: 6px;
  border-radius: 1px;
}

.sched-cov i.is-thin {
  background: var(--yellow);
  box-shadow: none;
}

.sched-cov i.is-gap {
  background: var(--red);
}

.sched-warnings {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.sched-warnings li {
  padding: 5px 10px;
  border-left: 3px solid var(--line-dark);
  border-radius: 3px;
  background: var(--row-alt);
}

.sched-warnings li.is-gap {
  border-left-color: var(--red);
  color: var(--red);
  font-weight: 600;
}

.sched-warnings li.is-thin {
  border-left-color: var(--yellow);
}

.sched-warnings li.is-info {
  border-left-color: var(--blue);
  color: var(--muted);
}

.sched-table td.is-carry {
  color: var(--muted);
}

.sched-table td.is-carry small {
  display: block;
  margin: 2px 0 0;
  font-size: 11px;
}

/* System page (admins): health, credits, kill switches — 2026-10-16 */
.system-shell { grid-template-rows: 44px minmax(0, 1fr); }
.system-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.system-summary { color: var(--muted); font-size: 13px; }
.system-btn { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid var(--line-dark); border-radius: 4px;
  background: var(--panel); color: var(--text); cursor: pointer; }
.system-btn:hover { background: var(--row-hover); }
.system-btn:disabled { opacity: .5; cursor: default; }
.system-pause.confirm { background: var(--red); border-color: var(--red); color: #fff; }
.system-resume { border-color: var(--green); color: var(--green); font-weight: 600; }
.system-body { overflow: auto; padding: 14px 16px 24px; display: grid; gap: 14px; align-content: start; }
.system-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.system-credit { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.system-credit-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.system-credit-head span { color: var(--muted); }
.system-low { color: var(--red) !important; font-weight: 600; }
.system-bar { height: 8px; margin-top: 8px; background: var(--row-alt); border-radius: 4px; overflow: hidden; }
.system-bar i { display: block; height: 100%; background: var(--green); }
.system-bar i.warn { background: var(--yellow); }
.system-bar i.bad { background: var(--red); }
.system-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.system-table th { text-align: left; background: var(--header); padding: 7px 10px; border-bottom: 1px solid var(--line); }
.system-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.system-table td small { display: block; color: var(--muted); margin-top: 2px; }
.system-table td div + div { margin-top: 2px; color: var(--muted); }
.system-row.paused { background: color-mix(in srgb, var(--yellow) 10%, var(--panel)); }
.system-row.red { background: color-mix(in srgb, var(--red) 7%, var(--panel)); }
.system-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--gray); }
.system-dot.green { background: var(--green); }
.system-dot.amber { background: var(--yellow); }
.system-dot.red { background: var(--red); }
.system-dot.paused { background: var(--purple); }
.system-note { color: var(--muted); font-size: 12px; margin: 0; }
.system-available { color: var(--text) !important; font-weight: 700; font-size: 15px; }
.system-credit-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.system-entry { display: inline-flex; gap: 6px; }
.system-entry input { width: 110px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-dark); border-radius: 4px; }

/* Invoices page (2026-10-16): payables dashboard - summary cards, aging, vendors, then the list
   (Paid + note edited in the row). */
body[data-page="invoices"] .filters {
  display: none !important;
}
body[data-page="invoices"] #invoicesButton {
  border-color: var(--blue);
  background: rgba(0, 109, 188, 0.12);
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
body[data-board-style="sidebar"][data-page="invoices"] #invoicesButton {
  border-color: var(--gz-red);
  background: var(--gz-red);
  color: #fff;
  box-shadow: none;
}
.invoices-shell { grid-template-rows: 44px minmax(0, 1fr); }
.invoices-shell .cases-top { gap: 14px; }
.invoices-summary { color: var(--muted); font-size: 12px; }
.invoices-tools { margin-left: auto; }
.invoices-search { width: 260px; font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line-dark); border-radius: 4px;
  background: var(--panel); color: var(--text); }
/* No top padding: a sticky table header sticks below the padding, and rows showed through that gap. */
.invoices-body { overflow: auto; padding: 0 16px 24px; }

.inv-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding-top: 14px; }
.inv-kpi { display: grid; gap: 2px; text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-top: 3px solid var(--line-dark); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; }
.inv-kpi:hover { background: var(--row-hover); }
.inv-kpi.is-active { border-color: var(--blue); border-top-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.inv-kpi.is-bad { border-top-color: var(--red); }
.inv-kpi.is-bad strong { color: var(--red); }
.inv-kpi.is-warn { border-top-color: var(--yellow); }
.inv-kpi.is-good { border-top-color: var(--green); }
.inv-kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.inv-kpi strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-kpi-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inv-dash-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
/* the Alvys ticket a Deduct click created / found (2026-11-02) */
.inv-deduct .inv-alvys { display: block; font-weight: 600; color: var(--blue); }
.inv-deduct .inv-alvys.is-warn { color: #a86b00; }
/* Ask Invoice Helper (2026-11-02): one input, answers inline under it (no pop-ups) */
.inv-ask { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.inv-ask-form { display: flex; gap: 8px; }
.inv-ask-form input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-dark); border-radius: 6px;
  font: inherit; color: var(--text); background: var(--panel); }
.inv-ask-list:empty { display: none; }
.inv-ask-list { display: grid; gap: 8px; margin-top: 10px; }
.inv-ask-item { padding: 8px 10px; border-radius: 6px; background: var(--row-alt); }
.inv-ask-q { display: flex; justify-content: space-between; gap: 12px; }
.inv-ask-q span { flex: none; color: var(--muted); font-size: 12px; }
.inv-ask-answer { margin-top: 6px; white-space: pre-wrap; line-height: 1.45; }
.inv-ask-answer.is-error { color: var(--red); }
.inv-ask-clear { margin-left: 8px; font-size: 12px; }
.inv-ask-clearall { text-align: right; }
.inv-ask-wait { margin-top: 6px; color: var(--muted); }
.inv-ask-find { padding: 0 3px; border: 0; border-radius: 3px; font: inherit; font-weight: 700; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent); cursor: pointer; }
.inv-panel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 10px 12px; min-width: 0; }
.inv-panel-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.inv-panel-head span { color: var(--muted); font-size: 12px; }
.inv-aging-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--row-alt); }
.inv-age { flex-basis: 0; min-width: 4px; border: 0; padding: 0; cursor: pointer; }
.inv-age.is-active { outline: 2px solid var(--text); outline-offset: -2px; }
.age0 { background: var(--green); }
.age1 { background: var(--yellow); }
.age2 { background: #e07b39; }
.age3 { background: var(--red); }
.inv-aging-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.inv-age-key { display: grid; grid-template-columns: 10px 1fr; column-gap: 6px; align-items: center; text-align: left; font: inherit;
  font-size: 12px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); cursor: pointer; }
.inv-age-key:hover, .inv-age-key.is-active { border-color: var(--line-dark); background: var(--row-alt); }
.inv-age-key i { width: 10px; height: 10px; border-radius: 2px; }
.inv-age-key span { color: var(--muted); }
.inv-age-key b { grid-column: 2; font-size: 15px; font-variant-numeric: tabular-nums; }
.inv-age-key small { grid-column: 2; color: var(--muted); }
.inv-age-key small::after { content: " invoices"; }
.inv-vendors { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-vendors td { padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.inv-vendors tr:last-child td { border-bottom: 0; }
.inv-vendors tr[data-inv-vendor] { cursor: pointer; }
.inv-vendors tr[data-inv-vendor]:hover, .inv-vendors tr.is-active { background: var(--row-alt); }
.inv-vendors tr.is-active td:first-child { font-weight: 700; color: var(--blue); }
.inv-vendors .num { text-align: right; font-variant-numeric: tabular-nums; }

.inv-list-head { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
.invoices-tabs { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 4px; overflow: hidden; }
.invoices-tabs button { font: inherit; font-size: 13px; padding: 5px 12px; border: 0; border-right: 1px solid var(--line-dark);
  background: var(--panel); color: var(--text); cursor: pointer; }
.invoices-tabs button:last-child { border-right: 0; }
.invoices-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.invoices-tabs b { margin-left: 4px; font-weight: 600; opacity: .8; }
.inv-filter { display: inline-flex; gap: 6px; }
.inv-chip { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--blue); border-radius: 12px;
  background: rgba(0, 109, 188, 0.08); color: var(--blue); cursor: pointer; }
.inv-list-total { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.invoices-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.invoices-table .c-vendor { width: 9%; }
.invoices-table .c-number { width: 8%; }
.invoices-table .c-added { width: 7%; }
.invoices-table .c-date { width: 5%; }
/* NEW = added since this person's last visit; "What's wrong?" opens the AI summary line under the row (2026-10-20) */
.invoices-table tr.is-new td { background: color-mix(in srgb, var(--yellow) 14%, transparent) !important; }
.invoices-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--yellow); font-weight: 600; }
.inv-new { font-size: 10px; padding: 1px 5px; border-radius: 6px; background: var(--yellow); color: #3b2a00; vertical-align: 1px; }
/* Critical: a driver who owes on this invoice has left Gozal (2026-10-20) */
.invoices-table tr.is-critical td { background: color-mix(in srgb, var(--red) 9%, transparent) !important; }
.invoices-table tr.is-critical td:first-child { box-shadow: inset 4px 0 0 var(--red); font-weight: 700; }
.inv-left { display: inline-block; margin-left: 4px; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: var(--red); color: #fff;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.inv-whybtn { display: block; margin-top: 2px; font: inherit; font-size: 11px; font-weight: 600; color: var(--blue); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.inv-whybtn.is-open { color: var(--text); }
.invoices-table tr.inv-why-open td { white-space: normal; font-size: 12.5px; line-height: 1.45; padding: 8px 12px 10px 24px;
  background: color-mix(in srgb, var(--blue) 6%, transparent) !important; border-left: 3px solid var(--blue); }
.inv-whyline { margin-top: 3px; }
.invoices-table .c-due { width: 9%; }
.invoices-table .c-units { width: 9%; }
.invoices-table .c-amount { width: 8%; }
.invoices-table .c-status { width: 8%; }
.invoices-table .c-case { width: 14%; }   /* every case listed with its unit: "442329 Case 1484 · Alvys 1893" */
.invoices-table .c-why { width: auto; }
.invoices-table .c-deduct { width: 12%; }
.invoices-table .c-note { width: 9%; }
.invoices-table .c-file { width: 44px; }
.invoices-table th { position: sticky; top: 0; z-index: 2; text-align: left; background: var(--header); padding: 8px;
  border-bottom: 1px solid var(--line-dark); font-size: 12px; white-space: nowrap; }
.invoices-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.invoices-table tbody tr:last-child td { border-bottom: 0; }
.invoices-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.invoices-table tbody tr:hover td { background: var(--row-hover); }
.invoices-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.invoices-table td.num { font-weight: 600; }
.inv-number { font-variant-numeric: tabular-nums; }
.inv-why { white-space: normal !important; color: var(--muted); font-size: 12px; line-height: 1.35; }
.inv-why span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inv-muted { color: var(--muted); }
.inv-cases { white-space: normal !important; font-size: 12px; line-height: 1.35; }
.inv-case { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-case a { font-weight: 600; }
.inv-late { color: var(--red); font-style: normal; font-weight: 600; }
.inv-today { color: var(--yellow); font-style: normal; font-weight: 600; }
.inv-verdict { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; vertical-align: middle; }
.inv-verdict.inv-pay { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.inv-verdict.inv-dispute { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.inv-verdict.inv-check { color: #a86b00; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.inv-verdict.inv-driver { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); }
.inv-verdict.inv-paperwork, .inv-verdict.inv-none { color: var(--muted); background: var(--row-alt); }
/* Deductible (2026-10-19): what each driver owes on the invoice; link = record it + case Driver Paystub Date */
.inv-deducts { white-space: normal !important; font-size: 12px; line-height: 1.35; }
.inv-deduct { overflow: hidden; text-overflow: ellipsis; }
.inv-deduct a, .inv-deduct > button { font: inherit; font-weight: 600; color: var(--purple); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.inv-deduct.is-done { color: var(--green); font-weight: 600; }
.inv-deduct.is-pending { color: var(--muted); }
.inv-deduct.is-maybe { color: #a86b00; font-weight: 600; }
.inv-deduct.is-maybe small a, .inv-deduct.is-maybe small button { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.inv-deduct small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.inv-deduct small button { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.inv-note input { width: 100%; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: var(--text); }
.inv-note input:hover { border-color: var(--line); }
.inv-note input:focus { border-color: var(--blue); background: var(--panel); outline: none; }
/* 2026-10-26 (Sam): people colors, Reviewed / Dispute, filters, month sheets, case split */
.invoices-table .c-check { width: 10%; }
.inv-who { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 1px 7px;
  border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--who); background: color-mix(in srgb, var(--who) 14%, transparent);
  border-left: 3px solid var(--who); }
.invoices-table tr.has-who:not(.is-new):not(.is-critical) td:first-child { box-shadow: inset 3px 0 0 var(--who); }
.inv-checked { white-space: normal !important; font-size: 12px; line-height: 1.5; }
.inv-reviewed small { color: var(--muted); font-size: 11px; }
.inv-review { font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--line-dark); border-radius: 4px;
  background: var(--panel); color: var(--text); cursor: pointer; }
.inv-review:hover { border-color: var(--green); color: var(--green); }
.inv-dispute-link { font-size: 11.5px; color: var(--red) !important; }
.inv-dispute-tag { font: inherit; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; border: 0; cursor: pointer;
  color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.inv-dispute-tag.is-emailed { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.inv-dispute-tag.is-credited { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.inv-dispute-tag.is-vendor_right, .inv-dispute-tag.is-dropped { color: var(--muted); background: var(--row-alt); }
.invoices-table tr.inv-dispute-open td, .invoices-table tr.inv-split-open td { white-space: normal; font-size: 12.5px; line-height: 1.5;
  padding: 8px 12px 10px 24px; }
.invoices-table tr.inv-dispute-open td { background: color-mix(in srgb, var(--red) 5%, transparent) !important; border-left: 3px solid var(--red); }
.invoices-table tr.inv-split-open td { background: color-mix(in srgb, var(--purple) 5%, transparent) !important; border-left: 3px solid var(--purple); }
.inv-dispute-input { width: min(520px, 60%); font: inherit; font-size: 12.5px; padding: 4px 8px; margin: 0 6px; border: 1px solid var(--line-dark);
  border-radius: 4px; background: var(--panel); color: var(--text); }
.inv-dispute-input:focus { border-color: var(--red); outline: none; }
.inv-dispute-reason { margin-top: 3px; }
.inv-dispute-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.inv-dispute-end { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--muted); }
.inv-found { margin-top: 5px; font-size: 12px; }
.inv-btn { display: inline-block; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--line-dark);
  border-radius: 4px; background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; }
.inv-btn.is-red { border-color: var(--red); color: #fff; background: var(--red); }
.inv-btn.is-blue { border-color: var(--blue); color: #fff; background: var(--blue); }
.inv-btn.is-green { border-color: var(--green); color: var(--green); }
.inv-note.has-who, .inv-note[style] input { border-left: 3px solid var(--who); }
.inv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.inv-filters select, .inv-filters input[type="date"] { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-left: 4px; border: 1px solid var(--line-dark);
  border-radius: 4px; background: var(--panel); color: var(--text); }
.inv-bm { font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border: 1px solid var(--blue); border-radius: 14px;
  background: var(--panel); color: var(--blue); cursor: pointer; }
.inv-bm[aria-pressed="true"] { background: var(--blue); color: #fff; }
.inv-legend { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.inv-sheets { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--blue); }
.inv-sheets button { font: inherit; font-size: 12.5px; padding: 5px 14px; border: 1px solid var(--line-dark); border-bottom: 0;
  border-radius: 5px 5px 0 0; background: var(--row-alt); color: var(--text); cursor: pointer; white-space: nowrap; }
.inv-sheets button[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }
.inv-month { margin: 0 0 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px;
  font-size: 13px; }
.inv-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.inv-month-head > .inv-btn { margin-left: auto; }
.inv-chip.is-warn { border-color: var(--yellow); color: #8a5a00; background: color-mix(in srgb, var(--yellow) 18%, transparent); }
.inv-month-vendors { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.inv-month-vendors i { font-style: normal; color: var(--text); }
.inv-months { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-months th { text-align: left; font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--line-dark); }
.inv-months td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.inv-months .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-months tr[data-inv-month] { cursor: pointer; }
.inv-months tr[data-inv-month]:hover td { background: var(--row-hover); }
.inv-split-short { font-size: 11.5px; font-weight: 600; }
.inv-pay-driver { color: var(--purple); font-weight: 700; }
.inv-pay-company { color: var(--green); font-weight: 700; }
.inv-pay-lessor { color: var(--blue); font-weight: 700; }
.inv-pay-check { color: #a86b00; font-weight: 700; }
.inv-jobs { margin: 4px 0 0; padding-left: 18px; }
.inv-jobs li { margin: 1px 0; }
.inv-file { font-size: 12px; font-weight: 600; }
/* ---- Modern + compact (Sam 2026-10-26: "more modern and convenient") ---- */
.invoices-tabs { border: 0; gap: 4px; padding: 3px; background: var(--row-alt); border-radius: 10px; overflow: visible; }
.invoices-tabs button { border: 0 !important; border-radius: 8px; padding: 6px 12px; font-weight: 600; background: transparent; color: var(--muted); }
.invoices-tabs button:hover { color: var(--text); background: var(--panel); }
.invoices-tabs button[aria-selected="true"] { background: var(--panel); color: var(--blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.invoices-tabs b { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 18px;
  text-align: center; background: color-mix(in srgb, var(--muted) 16%, transparent); opacity: 1; }
.invoices-tabs button[aria-selected="true"] b { background: var(--blue); color: #fff; }
.inv-filters { gap: 8px; margin: 10px 0 12px; }
.inv-filters select, .inv-filters input[type="date"] { display: inline-block; width: auto; flex: 0 0 auto; min-width: 140px; margin: 0; height: 32px; padding: 0 28px 0 10px; border-radius: 8px; border-color: var(--line);
  font-weight: 500; }
.inv-filters select:focus, .inv-filters input:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue) 20%, transparent); }
.inv-bm { height: 32px; padding: 0 14px; border-radius: 8px; }
.inv-legend { gap: 10px; color: var(--muted); font-size: 12px; }
.inv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.inv-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--who);
  color: #fff; font-size: 9.5px; font-weight: 800; font-style: normal; letter-spacing: .02em; }
.inv-sheets { border-bottom: 1px solid var(--line); gap: 0; }
.inv-sheets button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 600;
  padding: 8px 14px; margin-bottom: -1px; }
.inv-sheets button:hover { color: var(--text); }
.inv-sheets button[aria-selected="true"] { background: none; color: var(--blue); border-bottom-color: var(--blue); }
.inv-month { border: 0; background: none; padding: 12px 0 14px; }
.inv-month-head { gap: 10px; margin-bottom: 10px; }
.inv-month-head h3 { margin: 0; font-size: 17px; }
.inv-month-head h3 span { font-size: 12px; font-weight: 500; color: var(--muted); }
.inv-stats { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(240px, 1.6fr); gap: 10px; }
.inv-stat { padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.inv-stat > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.inv-stat > b { display: block; margin-top: 2px; font-size: 20px; font-variant-numeric: tabular-nums; }
.inv-stat small { color: var(--muted); font-size: 12px; }
.inv-stat.is-driver > b { color: var(--purple); }
.inv-stat.is-dispute > b { color: var(--red); }
.inv-meter { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--row-alt); overflow: hidden; }
.inv-meter i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.inv-stat.is-vendors div { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 20px; }
.inv-stat.is-vendors div b { margin-left: auto; font-variant-numeric: tabular-nums; }
.inv-vbadge { display: inline-grid; place-items: center; width: 24px; height: 20px; flex: none; border-radius: 5px; font-size: 9.5px;
  font-weight: 800; font-style: normal; color: var(--v); background: color-mix(in srgb, var(--v) 14%, transparent); }
.inv-stat.is-vendors .inv-vbadge { width: 22px; height: 16px; font-size: 8.5px; }
.invoices-table { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.invoices-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 10px; }
.invoices-table td { padding: 7px 10px; height: 40px; }
.invoices-table tbody tr:nth-child(even) td { background: transparent; }
.invoices-table tbody tr[data-invoice-id]:hover td { background: var(--row-hover); }
.inv-vendor-cell { font-weight: 600; }
.inv-vendor-cell .inv-vbadge { margin-right: 8px; vertical-align: middle; }
.inv-vendor-cell span { vertical-align: middle; }
.inv-due-cell .inv-late, .invoices-table .inv-late { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11px; line-height: 18px;
  background: color-mix(in srgb, var(--red) 12%, transparent); }
.inv-vendors .inv-late { padding: 0 7px; border-radius: 9px; background: color-mix(in srgb, var(--red) 10%, transparent); }
.invoices-table tr.is-critical td { background: color-mix(in srgb, var(--red) 4%, transparent) !important; }
.invoices-table tr.is-critical td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.inv-checks { display: flex; align-items: center; gap: 6px; }
.inv-tick, .inv-flag { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line-dark); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.inv-tick:hover { border-color: var(--green); color: #fff; background: var(--green); }
.inv-flag:hover { border-color: var(--red); color: var(--red); }
/* a dispute is a round flag like the tick, in its status color (the words are in the line under the row): the
   Checked column never cuts it to "⚑ D" next to a reviewed chip */
.inv-flag.is-on { border-color: transparent; color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.inv-flag.is-emailed { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.inv-flag.is-credited { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.inv-flag.is-vendor_right, .inv-flag.is-dropped { color: var(--muted); background: var(--row-alt); }
/* Ignore (2026-10-31): a round button like the tick; an ignored row is greyed and says who left it out */
.inv-ignore { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line-dark); background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.inv-ignore:hover { border-color: var(--muted); color: var(--text); }
.inv-ignored { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; height: 28px; padding: 0 9px; border-radius: 14px; border: 0;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--row-alt); cursor: pointer; }
.inv-ignored[disabled] { cursor: default; }
.inv-ignored span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoices-table tr.is-ignored td { color: var(--muted); }
.invoices-table tr.is-ignored .inv-number { text-decoration: line-through; }
.inv-reviewed { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 100%; height: 28px; padding: 0 9px 0 3px; border-radius: 14px; border: 0;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--who); background: color-mix(in srgb, var(--who) 12%, transparent); cursor: pointer; }
.inv-reviewed[disabled] { cursor: default; }
.inv-reviewed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-verdict { border-radius: 6px; }
.inv-file { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.inv-file:hover { border-color: var(--blue); }
.inv-deduct a, .inv-deduct > button { text-decoration: none; }
.inv-deduct:not(.is-done):not(.is-pending):not(.is-maybe) { display: inline-block; margin: 1px 0; padding: 1px 8px; border-radius: 9px;
  background: color-mix(in srgb, var(--purple) 10%, transparent); }
.invoices-table .c-check { width: 11%; }
/* 2026-11-04 (Sam: "where are the reasons"): the fixed widths added up to 109%, so the Why column (reasons +
   "What's wrong?") was squeezed to nothing. Every column now has a share and they add up to 100%. */
.invoices-table .c-vendor { width: 7%; }
.invoices-table .c-number { width: 8%; }
.invoices-table .c-added { width: 6%; }
.invoices-table .c-date { width: 5%; }
.invoices-table .c-due { width: 6%; }
.invoices-table .c-units { width: 6%; }
.invoices-table .c-amount { width: 6%; }
.invoices-table .c-status { width: 7%; }
.invoices-table .c-check { width: 8%; }
.invoices-table .c-case { width: 12%; }
.invoices-table .c-why { width: 13%; }
.invoices-table .c-deduct { width: 12%; }
.invoices-table .c-note { width: 4%; }
@media (max-width: 1100px) { .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.inv-empty { text-align: center; color: var(--muted); padding: 24px !important; }
@media (max-width: 1100px) {
  .inv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inv-dash-row { grid-template-columns: 1fr; }
  .invoices-body { overflow-x: auto; }
  .invoices-table { min-width: 1180px; }
}

/* Clock-change notice in the week (2026-10-16). */
.sched-warnings li.is-clock {
  border-left-color: var(--blue);
}

.sched-clock li:first-child {
  font-size: 13.5px;
}

.sched-clock-popup .admin-body {
  display: grid;
  gap: 8px;
  max-width: 460px;
  font-size: 14px;
}

.sched-clock-popup p {
  margin: 0;
}

/* ================= Truck board (2026-10-18) — same grid feel as PM / Invoices ================= */
.trucks-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trucks-table { width: 100%; min-width: 1240px; table-layout: fixed; }
.trucks-shell .cases-table-wrap { overflow-x: auto; }
.trucks-table col.t-unit { width: 150px; }
.trucks-table col.t-driver { width: 150px; }
.trucks-table col.t-where { width: 190px; }
.trucks-table td { vertical-align: top; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.trucks-table tr.trk-row { cursor: pointer; }
.trucks-table tr.trk-row.open { background: var(--row-hover); }
.trk-state { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600;
  background: #eef1f5; color: #4a5361; white-space: nowrap; }
.trk-s-on-load { background: #e3f4ea; color: #17733f; }
.trk-s-heading-to-pickup { background: #e6effc; color: #1e55a8; }
.trk-s-booked { background: #f3ecfb; color: #6b3fa8; }
.trk-s-no-load { background: #fdf0e6; color: #a5521a; }
.trk-load b { font-weight: 700; }
.trk-cust { color: #4a5361; }
.trk-route { color: #222a35; }
.trk-when { color: #6b7380; font-size: 11.5px; }
.trk-more { color: #6b7380; font-size: 11px; margin-top: 2px; }
.trk-none { color: #a0a7b2; }
.trk-moving { color: #17733f; font-weight: 600; }
.trk-last { opacity: .8; }
.trk-detail td { background: #fafbfd; padding: 6px 10px 10px !important; }
.trk-stops { margin: 4px 0 8px; }
.trk-stops-head { font-size: 12px; color: #222a35; margin-bottom: 3px; }
.trk-stop { display: grid; grid-template-columns: 110px 1.4fr 150px 110px 1fr; gap: 8px; font-size: 11.5px; color: #4a5361;
  padding: 2px 0; border-bottom: 1px dashed var(--line); }
.trk-stops-empty { color: #6b7380; font-size: 12px; }

/* Screen-reader-only text (labels that must exist for accessibility but not show) — 2026-10-18: missing, so
   "Filter by asset type" showed above the Assets type picker. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Assets page (Sam 2026-10-18: "design is wrong") — compact toolbar, real column widths, headings aligned with the data */
.assets-shell .cases-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.assets-shell .case-search-field { width: 260px; }
.assets-shell .case-search-field input { height: 32px; box-sizing: border-box; }
.assets-type-field select { height: 32px; min-width: 150px; padding: 0 28px 0 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--line-dark); border-radius: 6px; background-color: #fff; }
body[data-board-style="sidebar"] .assets-type-field select { border-color: #e7eaf0; border-radius: 999px; }
body[data-board-style="sidebar"] .assets-type-field select:focus { outline: none; border-color: var(--gz-red); box-shadow: 0 0 0 3px rgba(216,31,42,.14); }
.assets-shell .cases-actions .nav-button { height: 32px; white-space: nowrap; }
.assets-table { width: 100%; }
.assets-table col.a-unit { width: 120px; }
.assets-table col.a-type { width: 96px; }
.assets-table col.a-date { width: 170px; }
.assets-table col.a-plate { width: 150px; }
.assets-table th { text-align: left; }
.assets-table td:first-child { font-weight: 600; }
.assets-table th, .assets-table td { max-width: none; }

/* Truck board page — same page rules as Invoices */
body[data-page="trucks"] .filters { display: none !important; }
body[data-page="trucks"] #trucksButton { border-color: var(--blue); background: rgba(0, 109, 188, 0.12); color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
body[data-board-style="sidebar"][data-page="trucks"] #trucksButton { border-color: var(--gz-red); background: var(--gz-red); color: #fff; box-shadow: none; }
.trucks-shell { grid-template-rows: auto minmax(0, 1fr); }
.trucks-shell .trucks-tools { margin-left: auto; }
.trk-pm { margin-top: 4px; font-size: 11px; color: #4a5361; }
.trk-pm b { font-weight: 600; }
.trk-pm.due { color: #a5521a; }
.trk-pm.over { color: #b3141f; font-weight: 600; }

/* A hidden page stays hidden (2026-10-20: PM, Trucks, System and Invoices share the
   .cases-shell class, and "body[data-page=cases] .cases-shell { display: grid !important }"
   showed them under the Cases table). Two [hidden] selectors so this outranks every
   page rule above, including ones added later. */
body > main[hidden][hidden] {
  display: none !important;
}

/* ---- Map page: Trailers | Shops in one side panel (2026-10-20) ---- */
.fleet-shell .fleet-panel {
  display: flex;
  flex-direction: column;
}

.map-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--line);
}

.map-tabs[hidden],
.map-tab[hidden],
.map-pane[hidden] {
  display: none !important;
}

.map-tab {
  flex: 1 1 0;
  height: 32px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.map-tab[aria-selected="true"] {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--blue);
}

.map-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.fleet-panel .map-pane.shop-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-right: 0;
  overflow-y: auto; /* a short screen can still reach Save under an open shop form */
}

.map-pane.shop-panel .shop-list {
  flex: 1 1 auto;
  min-height: 160px;
}

.map-shops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}

.map-shops-head .shop-map-status {
  font-size: 12px;
}

/* ================= Dispatch Vision (2026-10-22) — same grid feel as Truck board / Invoices ================= */
.dv-tools, .dv-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-filters { margin-top: 8px; }
.dv-filters[hidden] { display: none; }
.dv-st { width: 92px; text-transform: uppercase; }
.dv-days { width: auto; }
.dv-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dv-shell .cases-table-wrap { overflow-x: auto; padding-bottom: 16px; }
.dv-table { width: 100%; min-width: 1100px; }
.dv-table td { vertical-align: top; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.dv-table td.num, .dv-card td.num, .dv-table th.num, .dv-card th.num { text-align: right; white-space: nowrap; }
.dv-table tr.dv-strong td:first-child { box-shadow: inset 3px 0 0 var(--gz-red, #c8102e); }
.dv-table tr.dv-late td { background: rgba(217, 119, 6, .08); }
.dv-chip { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: #eef1f5; color: #4a5361; }
.dv-active { background: #e6effc; color: #1e55a8; }
.dv-booked { background: #e3f4ea; color: #17733f; }
.dv-covered { background: #fdecec; color: #a61b1b; }
.dv-expired { background: #f1f2f4; color: #6b7380; }
.dv-hidden { background: #f6f3ea; color: #7a6a3a; white-space: normal; }
.dv-empty { padding: 28px 12px; color: var(--muted); font-size: 13px; }
.dv-h { margin: 6px 0 8px; font-size: 14px; }
.dv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.dv-tile { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.dv-tile b { font-size: 24px; line-height: 1.1; color: var(--text); }
.dv-tile span { font-size: 12px; color: var(--muted); }
.dv-tile em { font-style: normal; font-size: 11.5px; color: var(--red, #a61b1b); margin-top: 2px; }
.dv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.dv-card { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 12px; min-width: 0; }
.dv-card h3 { margin: 0 0 10px; font-size: 13.5px; }
.dv-card .pm-table { width: 100%; }
.dv-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dv-pie svg { width: 190px; height: 190px; flex: none; }
.dv-pie-n { font-size: 26px; font-weight: 700; fill: var(--text); }
.dv-pie-l { font-size: 11px; fill: var(--muted); }
.dv-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; font-size: 12px; }
.dv-legend li { display: grid; grid-template-columns: 12px 1fr auto 38px; gap: 7px; align-items: center; padding: 2px 0; }
.dv-legend i { width: 10px; height: 10px; border-radius: 2px; }
.dv-legend span { color: var(--muted); text-align: right; }
.dv-bars { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.dv-bars li { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 44px; gap: 8px; align-items: center; padding: 3px 0; }
.dv-bars i { height: 10px; border-radius: 3px; background: var(--blue, #2563eb); opacity: .75; }
.dv-bars b { text-align: right; }
.dv-speed li { grid-template-columns: minmax(160px, 260px) 1fr 44px 110px; }
.dv-speed i { background: var(--gz-red, #c8102e); }
.dv-speed em { font-style: normal; color: var(--muted); font-size: 11.5px; }
@media (max-width: 640px) {
  .dv-pie svg { width: 150px; height: 150px; }
  .dv-bars li, .dv-speed li { grid-template-columns: 1fr 70px 40px; }
  .dv-speed em { display: none; }
}

.sched-person tr.is-carry td {
  color: var(--muted);
}

/* Dispatch Vision v2 (2026-10-22, "looks poor"): no trailer filter bar here, load-board rows */
body[data-page="dispatch"] .filters { display: none !important; }
body[data-page="dispatch"] #dispatchButton { border-color: var(--blue); background: rgba(0, 109, 188, 0.12); color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
body[data-board-style="sidebar"][data-page="dispatch"] #dispatchButton { border-color: var(--gz-red); background: var(--gz-red); color: #fff; box-shadow: none; }
.dv-shell .cases-top h2 { white-space: nowrap; }
.dv-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding: 6px 2px 10px; font-size: 12.5px; color: var(--muted); }
.dv-strip b { font-size: 18px; color: var(--text); margin-right: 3px; }
.dv-strip-hot b { color: #c2410c; }
.dv-strip-booked b { color: #17733f; }
.dv-strip-note { margin-left: auto; font-size: 11.5px; }
.dv-board { min-width: 1080px; table-layout: fixed; }
.dv-board col.c-age { width: 64px; }
.dv-board col.c-place { width: 19%; }
.dv-board col.c-mi { width: 70px; }
.dv-board col.c-rate { width: 104px; }
.dv-board col.c-broker { width: 22%; }
.dv-board col.c-truck { width: 18%; }
.dv-board col.c-act { width: 84px; }
.dv-board thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.dv-board td { padding-top: 7px; padding-bottom: 7px; }
.dv-board tbody tr:nth-child(even) td { background: var(--row-alt, rgba(0, 0, 0, .02)); }
.dv-board tr.dv-hot td { background: rgba(234, 88, 12, .07) !important; }
.dv-board tr.dv-hot td:first-child { box-shadow: inset 3px 0 0 #ea580c; }
.dv-board tr.dv-dim td { opacity: .6; }
.dv-age { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-age .dv-chip { display: block; width: fit-content; margin-top: 3px; }
.dv-sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.dv-eq { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; background: #fdf0e6; color: #a5521a; }
.dv-rate { font-size: 14px; }
.dv-norate { color: var(--muted); font-size: 11.5px; }
.dv-rpm { font-size: 11.5px; font-weight: 600; }
.dv-rpm-good { color: #15803d; }
.dv-rpm-ok { color: #b45309; }
.dv-rpm-low { color: #b91c1c; }
.dv-broker { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-hist { display: block; font-size: 11.5px; color: #8a6d00; }
.dv-hist.dv-new { color: var(--muted); }
.dv-act { text-align: right; }
.dv-reply { display: inline-block; padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; white-space: nowrap;
  color: var(--link, var(--blue)); text-decoration: none; background: var(--panel); }
.dv-reply:hover { border-color: var(--blue); background: rgba(0, 109, 188, .08); }
/* Dispatch Vision header: two rows (tabs + filters) - the shared 44px header row would clip the second one */
.dv-shell { grid-template-rows: auto minmax(0, 1fr); }
.dv-shell .cases-top { flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; padding: 8px 14px; }
.dv-shell .dv-tools { flex: 1 1 auto; }
.dv-shell .dv-tools .cases-status { margin-left: auto; font-size: 12px; white-space: nowrap; }
.dv-shell .dv-filters { flex: 1 1 100%; margin-top: 0; }
.dv-shell .dv-filters .invoices-search { height: 32px; }
.dv-shell #dvSearch { width: 280px; }
.dv-shell #dvBody { padding: 0 14px 16px; }
.dv-shell .dv-strip { padding-left: 0; }

/* ================= Dispatch Vision v3 - professional load board (DAT One / Truckstop rows, Samsara KPI cards) ================= */
.dvk-row { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) auto; gap: 10px; margin: 2px 0 12px; align-items: stretch; }
.dvk { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dvk-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dvk-v { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.dvk-s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvk-hot .dvk-v { color: #c2410c; }
.dvk-ok .dvk-v { color: #15803d; }
.dvk-note { align-self: end; font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-bottom: 4px; }
.dvb-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: auto; max-height: calc(100vh - 310px); }
.dvb { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.dvb col.w-age { width: 58px; } .dvb col.w-pu { width: 108px; } .dvb col.w-place { width: 17%; } .dvb col.w-dh { width: 64px; }
.dvb col.w-trip { width: 70px; } .dvb col.w-rate { width: 96px; } .dvb col.w-broker { width: 21%; } .dvb col.w-truck { width: 15%; }
.dvb col.w-act { width: 92px; }
.dvb thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line-dark, var(--line));
  padding: 9px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dvb th.num, .dvb td.num { text-align: right; }
.dvb td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.dvb tr.dvb-row { cursor: pointer; }
.dvb tr.dvb-row:hover td { background: var(--row-hover, rgba(0, 109, 188, .05)); }
.dvb tr.dvb-row.is-open td { background: rgba(0, 109, 188, .06); border-bottom-color: transparent; }
.dvb tr.is-hot td:first-child { box-shadow: inset 3px 0 0 #ea580c; }
.dvb tr.is-dim td { opacity: .55; }
.dvb-age { color: var(--muted); font-variant-numeric: tabular-nums; }
.dvb-strong { font-weight: 600; }
.dvb-st { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.dvb-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvb-muted { color: var(--muted); }
.dvb-est { color: var(--muted); margin-left: 1px; }
.dvb-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; background: #fdf0e6; color: #a5521a; vertical-align: 1px; }
.dvb-dh { font-variant-numeric: tabular-nums; font-weight: 600; }
.dvb-dh.is-hot { color: #c2410c; }
.dvb td.num { font-variant-numeric: tabular-nums; }
.dvb-rate { display: block; font-weight: 700; font-size: 13.5px; }
.dvb-rpm { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.dvb-rpm.dv-rpm-good { background: #e3f4ea; color: #15803d; }
.dvb-rpm.dv-rpm-ok { background: #fef3c7; color: #a16207; }
.dvb-rpm.dv-rpm-low { background: #fdecec; color: #b91c1c; }
.dvb-broker { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvr-chip { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.dvr-new { background: #eef1f5; color: #4a5361; }
.dvr-s5, .dvr-s4 { background: #e3f4ea; color: #15803d; }
.dvr-s3 { background: #e6effc; color: #1e55a8; }
.dvr-s2, .dvr-s1 { background: #fdf0e6; color: #a5521a; }
.dvr-loads { margin-left: 6px; font-size: 11.5px; color: var(--muted); }
.dvb-act { text-align: right; }
.dvb .dv-chip { margin-top: 3px; display: inline-block; }
.dv-reply { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line-dark, var(--line)); border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--panel); white-space: nowrap; }
.dv-reply svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.dv-reply:hover { border-color: var(--blue); color: var(--blue); }
.dv-btn { padding: 4px 10px; border: 1px solid var(--line-dark, var(--line)); border-radius: 6px; background: var(--panel); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); }
.dv-detail td { background: rgba(0, 109, 188, .04); padding: 4px 14px 12px 70px; }
.dv-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 20px; font-size: 12.5px; }
.dv-detail-grid span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dv-detail-grid b { font-weight: 500; overflow-wrap: anywhere; }
.dv-detail-act { display: flex; gap: 8px; margin-top: 10px; }
.dvb-foot { padding: 8px 2px 0; font-size: 11.5px; color: var(--muted); }
@media (max-width: 1100px) { .dvk-row { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .dvk-note { display: none; } }
/* status column (automatic: Active / Booked by us / Covered / taken / Expired) */
.dvb col.w-status { width: 118px; }
.dvb .dv-chip { margin-top: 0; font-size: 11px; padding: 2px 8px; }
.dvb .dv-chip.dv-active { background: #e6effc; color: #1e55a8; }
.dvb .dv-chip.dv-booked { background: #dcfce7; color: #15803d; }
.dvb .dv-chip.dv-covered { background: #fee2e2; color: #b91c1c; }
.dvb .dv-chip.dv-expired { background: #f1f2f4; color: #6b7380; }

/* ---- One driver on two trailers (2026-10-23) ---- */
.board-driver-conflict-button {
  border-color: #e3a24a;
  background: #fff6ea;
  color: #9a4f0d;
}

.board-driver-conflict-button[aria-pressed="true"] {
  border-color: #c26a12;
  background: #c26a12;
  color: #ffffff;
}

.tracker-table tbody tr.driver-conflict-row > td[data-label="Driver info"] {
  box-shadow: inset 3px 0 0 #e08a1e;
}

.driver-conflict {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 1px;
  color: #9a4f0d;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}

.driver-conflict-jump {
  padding: 0 4px;
  border: 1px solid #e8b878;
  border-radius: 4px;
  background: #fff4e3;
  color: #9a4f0d;
  font: inherit;
  line-height: 13px;
  cursor: pointer;
}

.driver-conflict-jump:hover {
  border-color: #c26a12;
  background: #ffe7c7;
}

.tracker-table tbody tr.row-flash > td {
  animation: row-flash 1.8s ease-out;
}

@keyframes row-flash {
  0%, 35% { background-color: #ffe2b8; }
  100% { background-color: transparent; }
}

/* ---- Same-height rows + Review one by one (Sam 2026-10-26) ---- */
.invoices-table tr[data-invoice-id] td { height: 44px; max-height: 44px; white-space: nowrap; }
.inv-why { display: table-cell; }
.inv-why span { display: inline-block; max-width: calc(100% - 92px); -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; }
.inv-whybtn { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; white-space: nowrap; }
.invoices-table tr[data-invoice-id] td > * { vertical-align: middle; }
.inv-cases, .inv-deducts { white-space: nowrap !important; }
.inv-case-line, .inv-deduct-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.inv-case-line .inv-case, .inv-deduct-line > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* every case on the bill, one under the other (0034282638: 3 trucks, 3 cases) */
.inv-case-line { flex-direction: column; align-items: flex-start; gap: 1px; }
.inv-case-line .inv-case { max-width: 100%; line-height: 1.35; }
.inv-deduct-line > .inv-deduct { display: inline-block; max-width: 100%; margin: 0; }
.inv-deduct-line button.inv-deduct { font: inherit; font-size: 12px; font-weight: 600; border: 0; cursor: pointer; padding: 1px 8px; border-radius: 9px;
  color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.inv-deduct-line button.inv-deduct.is-maybe { color: #a86b00; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.inv-deduct-line button.inv-deduct.is-pending { color: var(--muted); background: var(--row-alt); }
.inv-deduct-line button.inv-deduct.is-done { display: inline-flex; align-items: center; gap: 4px; color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent); padding-left: 2px; }
.inv-deduct-line button.inv-deduct.is-done .inv-avatar { width: 17px; height: 17px; font-size: 8.5px; }
.inv-more { flex: none; font: inherit; font-size: 11px; font-weight: 700; padding: 0 6px; border: 1px solid var(--line-dark); border-radius: 8px;
  background: var(--panel); color: var(--muted); cursor: pointer; }
.inv-left { font-size: 9.5px; padding: 1px 5px; }
.inv-why-deducts { margin-top: 6px; }
.inv-why-deducts .inv-deduct { margin: 3px 0; }
.inv-why-tickets { margin-top: 8px; }
.inv-why-tickets .inv-ticket { margin: 3px 0; color: var(--good, #2f9e44); }
.inv-ticket-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.inv-ticket-row input, .inv-ticket-row select { font: inherit; padding: 2px 6px; min-height: 26px; width: 92px;
  border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: 4px; background: transparent; color: inherit; }
.inv-ticket-row select { width: 64px; }
.inv-ticket-row .inv-ticket-what { flex: 1 1 260px; width: auto; min-width: 180px; }
.inv-dash-row { align-items: start; }
.inv-vendors td { padding-top: 4px; padding-bottom: 4px; }
.inv-stat.is-vendors div { line-height: 19px; }
.inv-review-start { height: 32px; }
.inv-review-start[disabled] { opacity: .55; cursor: default; }
#invoicesPage.is-reviewing .inv-kpis, #invoicesPage.is-reviewing .inv-dash-row, #invoicesPage.is-reviewing .inv-list-head,
#invoicesPage.is-reviewing .inv-filters, #invoicesPage.is-reviewing .inv-sheets, #invoicesPage.is-reviewing .inv-month,
#invoicesPage.is-reviewing .invoices-table, #invoicesPage.is-reviewing #invoicesNote { display: none !important; }
.inv-review { margin-bottom: 12px; }
.inv-rv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.inv-rv-bar b { font-size: 16px; }
.inv-rv-bar span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-rv-bar > .inv-meter { flex: 1; max-width: 360px; margin: 0 8px 0 0; }
.inv-rv-bar .inv-btn:first-of-type { margin-left: auto; }
.inv-rv-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); gap: 14px; }
.inv-rv-doc { height: calc(100vh - 210px); min-height: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.inv-rv-doc iframe { width: 100%; height: 100%; border: 0; }
.inv-rv-nofile { display: grid; place-items: center; height: 100%; color: var(--muted); }
.inv-rv-side { height: calc(100vh - 210px); min-height: 520px; overflow-y: auto; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; }
.inv-rv-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.inv-rv-head .inv-vbadge { width: 34px; height: 30px; font-size: 12px; border-radius: 8px; }
.inv-rv-head > div { flex: 1; min-width: 0; }
.inv-rv-head b { font-size: 15px; }
.inv-rv-head small { display: block; color: var(--muted); }
.inv-rv-head strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.inv-rv-side section { padding: 10px 0; border-bottom: 1px solid var(--line); }
.inv-rv-side section:last-child { border-bottom: 0; }
.inv-rv-side h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.inv-rv-side p { margin: 0 0 4px; line-height: 1.45; }
.inv-rv-reasons { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.inv-rv-cases { margin-top: 6px; }
.inv-rv-q { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; opacity: .8; }
.inv-rv-q.is-next { opacity: 1; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.inv-rv-q.is-answered { opacity: .85; background: var(--row-alt); }
.inv-rv-q.is-final { border-style: dashed; }
.inv-rv-q.is-final.is-next { border-style: solid; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); }
.inv-rv-q p { font-weight: 600; }
.inv-rv-q p i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; font-size: 10px;
  font-style: normal; background: var(--row-alt); color: var(--muted); vertical-align: 1px; }
.inv-rv-q > small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.inv-rv-answers { display: flex; gap: 8px; margin-top: 8px; }
.inv-rv-answers button { flex: 1; height: 34px; font: inherit; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--line-dark); background: var(--panel); color: var(--text); }
.inv-rv-yes:hover, .inv-rv-yes.is-on { border-color: var(--green); background: var(--green); color: #fff; }
.inv-rv-no:hover, .inv-rv-no.is-on { border-color: var(--red); background: var(--red); color: #fff; }
.inv-rv-q:not(.is-final) .inv-rv-yes:hover, .inv-rv-q:not(.is-final) .inv-rv-yes.is-on { border-color: var(--red); background: var(--red); }
.inv-rv-q:not(.is-final) .inv-rv-no:hover, .inv-rv-q:not(.is-final) .inv-rv-no.is-on { border-color: var(--green); background: var(--green); }
@media (max-width: 1100px) { .inv-rv-body { grid-template-columns: 1fr; } .inv-rv-doc { height: 60vh; } .inv-rv-side { height: auto; } }
/* Refresh = ask the PC's Invoice Helper to check the mailbox now (2026-10-26) */
.inv-refresh { height: 32px; margin-right: 8px; white-space: nowrap; }
.inv-refresh.is-busy { color: var(--blue); border-color: var(--blue); cursor: progress; opacity: 1; }

/* ---- Glass: holographic see-through panels (Sam, 2026-10-28) ----
   Sam's references: dark-blue glass screens with glowing cyan edges, a glossy light sheen
   across the top, and the background showing through - "not flat color". The page is a deep
   blue with soft light glows; every big surface is a tinted, blurred, glossy glass card.
   Blur only on the big surfaces (not every row), so scrolling stays smooth. Dark fixes
   (GPS chips, reserved rows...) are shared with Midnight further up. */
body[data-board-style="glass"] {
  color-scheme: dark;
  --app-bg: transparent;
  --panel: rgba(16, 40, 88, 0.42);
  --line: rgba(120, 190, 255, 0.14);
  --line-dark: rgba(120, 205, 255, 0.34);
  --text: #e9f4ff;
  --muted: #92abd2;
  --link: #6fd6ff;
  --header: rgba(20, 52, 112, 0.55);
  --row: rgba(12, 32, 74, 0.34);
  --row-alt: rgba(22, 50, 104, 0.26);
  --row-hover: rgba(56, 150, 255, 0.24);
  --attention: rgba(255, 70, 140, 0.24);
  --attention-strong: #ff5c9d;
  --dot-soon: rgba(240, 200, 60, 0.26);
  --dot-very-soon: rgba(255, 150, 60, 0.3);
  --dot-expired: rgba(255, 80, 100, 0.32);
  --focus: #3fd0ff;
  --blue: #4aa8ff;
  --green: #3ddc97;
  --teal: #2fe0d6;
  --yellow: #f2c14e;
  --red: #ff6b85;
  --purple: #a98bff;
  --gray: #7a8fb5;
  --glass-edge: rgba(110, 205, 255, 0.55);
  --glass-glow: rgba(40, 170, 255, 0.28);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* (no light-beam stripe: over the grid it looked like a smudge on the Memo column) */
  background:
    radial-gradient(900px 620px at 8% 0%, rgba(40, 170, 255, 0.45) 0, transparent 60%),
    radial-gradient(800px 600px at 96% 12%, rgba(120, 90, 255, 0.35) 0, transparent 60%),
    radial-gradient(1000px 700px at 55% 110%, rgba(0, 200, 230, 0.28) 0, transparent 62%),
    linear-gradient(160deg, #061230 0%, #0a1d4a 48%, #071535 100%);
  background-attachment: fixed;
}

/* Glass surfaces each paint as their own layer (the blur), so a later one - the table
   card - covered the drop-downs that open from the bars above it (Sam, 2026-10-28: the
   Columns menu showed behind the table). The bars that own drop-downs sit on top. */
body[data-board-style="glass"] .topbar {
  position: relative;
  z-index: 40;
}

body[data-board-style="glass"] .summary-strip,
body[data-board-style="glass"] .cases-top,
body[data-board-style="glass"] .ops-page-head {
  position: relative;
  z-index: 30;
}

/* Floating cards with a little air so the glow behind them shows */
body[data-board-style="glass"] .topbar {
  margin: 8px 8px 0;
  border-radius: 14px;
}

body[data-board-style="glass"] .board-shell,
body[data-board-style="glass"] .cases-shell {
  gap: 8px;
  padding: 8px;
}

/* The glass: tinted, blurred, a glossy reflection on the top half, a bright cyan edge
   and a soft outer glow */
body[data-board-style="glass"] .topbar,
body[data-board-style="glass"] .summary-strip,
body[data-board-style="glass"] .table-wrap,
body[data-board-style="glass"] .cases-top,
body[data-board-style="glass"] .cases-table-wrap,
body[data-board-style="glass"] .fleet-panel,
body[data-board-style="glass"] .fleet-map-wrap,
body[data-board-style="glass"] .ops-page-head,
body[data-board-style="glass"] .time-clock-panel,
body[data-board-style="glass"] .case-columns-panel,
body[data-board-style="glass"] .download-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(150deg, rgba(90, 170, 255, 0.16) 0, rgba(20, 60, 140, 0.1) 50%, rgba(10, 30, 80, 0.22) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    0 0 0 1px rgba(80, 180, 255, 0.08),
    0 0 26px var(--glass-glow),
    0 18px 40px rgba(0, 8, 30, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 30px rgba(60, 170, 255, 0.1);
}

body[data-board-style="glass"] .summary-strip,
body[data-board-style="glass"] .table-wrap,
body[data-board-style="glass"] .cases-table-wrap,
body[data-board-style="glass"] .fleet-panel,
body[data-board-style="glass"] .fleet-map-wrap {
  border-radius: 14px;
}

/* Drop-down menus sit over the busy grid: same glass, but nearly solid so the rows behind
   them don't read through the list */
body[data-board-style="glass"] .case-columns-panel,
body[data-board-style="glass"] .download-menu,
body[data-board-style="glass"] .time-clock-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 32%),
    rgba(9, 26, 62, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-radius: 12px;
}

/* Sticky header row and the three sticky left columns: frosted, so what scrolls under
   them blurs instead of showing through as text */
body[data-board-style="glass"] .tracker-table th,
body[data-board-style="glass"] .cases-table th {
  background: linear-gradient(180deg, rgba(60, 140, 255, 0.34), rgba(18, 48, 108, 0.62));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #cfeaff;
  text-shadow: 0 0 8px rgba(80, 190, 255, 0.45);
}

body[data-board-style="glass"] .tracker-table td:nth-child(-n+3) {
  background-image: linear-gradient(rgba(12, 32, 76, 0.6), rgba(12, 32, 76, 0.6));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body[data-board-style="glass"] .tracker-table tbody tr:hover,
body[data-board-style="glass"] .cases-table tbody tr:hover {
  box-shadow: inset 0 0 0 1px rgba(110, 205, 255, 0.45);
}

/* Summary numbers glow like the % rings in the reference */
body[data-board-style="glass"] .summary-item strong {
  color: #7fe0ff;
  text-shadow: 0 0 10px rgba(80, 200, 255, 0.6);
}

/* Dialogs: the same glass, a little more solid so forms stay easy to read and type in */
body[data-board-style="glass"] dialog {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 32%),
    rgba(10, 28, 66, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 0 34px var(--glass-glow), 0 30px 70px rgba(0, 6, 24, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body[data-board-style="glass"] dialog::backdrop {
  background: rgba(2, 8, 28, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body[data-board-style="glass"] input,
body[data-board-style="glass"] select,
body[data-board-style="glass"] textarea {
  background-color: rgba(8, 24, 60, 0.55);
  border-color: rgba(120, 200, 255, 0.3);
  color: var(--text);
}

body[data-board-style="glass"] input:focus,
body[data-board-style="glass"] select:focus,
body[data-board-style="glass"] textarea:focus {
  border-color: #3fd0ff;
  box-shadow: 0 0 0 3px rgba(63, 208, 255, 0.22);
}

body[data-board-style="glass"] .nav-button,
body[data-board-style="glass"] .icon-button,
body[data-board-style="glass"] .plain-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border-color: rgba(120, 200, 255, 0.32);
  color: #d8ecff;
}

body[data-board-style="glass"] .nav-button:hover,
body[data-board-style="glass"] .icon-button:hover,
body[data-board-style="glass"] .plain-button:hover {
  border-color: rgba(120, 220, 255, 0.75);
  box-shadow: 0 0 14px rgba(60, 190, 255, 0.4);
}

body[data-board-style="glass"] .primary-button {
  background: linear-gradient(135deg, #1fb8ff, #4a6bff);
  border-color: rgba(160, 230, 255, 0.7);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(40, 170, 255, 0.5);
}

/* ---- Hidden means hidden (Sam, 2026-11-02) ----
   Buttons a person has no access to were marked hidden, but .nav-button / .icon-button set
   their own display, which beats the [hidden] attribute - so everyone saw every icon
   (Dashboard, Invoices, System, Users, History, Backup...). This makes [hidden] always win. */
[hidden] {
  display: none !important;
}

/* ---- Users window (Sam, 2026-11-02) ----
   ".trailer-dialog form" (a flex column) beat ".user-form", so the add-user fields stacked
   on the right and the access boxes went vertical; the user rows also ran off the right
   edge on smaller screens, cutting off "Save access". */
.admin-dialog .user-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  max-height: none;
}

.admin-dialog .user-form > label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-dialog .user-form > label input,
.admin-dialog .user-form > label select {
  width: 100%;
}

.admin-dialog .user-form .access-picker {
  grid-column: 1 / -1;
}

.admin-dialog .user-form > .primary-button {
  grid-column: 4;
  justify-self: end;
}

/* Access boxes line up in even columns instead of wrapping raggedly */
.admin-dialog .access-grid,
.admin-dialog .user-access-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}

.admin-dialog .access-grid label.access-check,
.admin-dialog .user-access-editor label.access-check {
  display: flex;
  min-width: 0;
}

.admin-dialog .user-row {
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) max-content;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

.admin-dialog .user-access-editor {
  min-width: 0;
}

.admin-dialog .user-row .access-check span {
  color: var(--text);
}

.admin-dialog .user-actions {
  flex-wrap: nowrap;
}

#addUserStatus {
  padding: 0;
}

#addUserStatus.is-ok {
  color: var(--green, #1e8e4e);
}

@media (max-width: 760px) {
  .admin-dialog .user-form {
    grid-template-columns: 1fr 1fr;
  }

  .admin-dialog .user-form > .primary-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .admin-dialog .user-row {
    grid-template-columns: 1fr;
  }
}