:root {
  --ink: #14231f;
  --muted: #59655f;
  --line: #d6ddd7;
  --paper: #f5f7f4;
  --panel: #ffffff;
  --green: #169A5A;
  --green-deep: #004B2E;
  --green-soft: #E7F6EE;
  --blue: #1d5f8f;
  --blue-soft: #e8f1f8;
  --amber: #9a5c00;
  --amber-soft: #fff3dc;
  --red: #ad3d3a;
  --red-soft: #fbedeb;
  --shadow: 0 8px 20px rgb(25 42 34 / 8%);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #5ca8df; outline-offset: 2px; }

.app-shell { min-height: 100vh; }

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px clamp(16px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 240px; }
.brand strong, .brand span span { display: block; }
.brand strong { font-size: 16px; }
.brand span span { color: var(--muted); font-size: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green-deep); border-radius: 7px; }
.brand-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.top-nav { display: flex; align-self: stretch; gap: 4px; }
.nav-tab { border: 0; border-bottom: 3px solid transparent; padding: 0 12px; color: var(--muted); background: transparent; font-weight: 700; }
.nav-tab:hover, .nav-tab.is-active { color: var(--green-deep); border-bottom-color: var(--green); }
/* CR-V17 step 2: says whether the screen is showing this device's records or the shared database.
   The scanner shell never shows it - the operator at the gate has nothing to decide about it. */
.cloud-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cloud-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #b7c4bf; }
.cloud-pill[data-state="connected"] { border-color: var(--green); color: var(--green-deep); }
.cloud-pill[data-state="connected"]::before { background: var(--green); }
/* Something this console changed was refused by the shared records. */
.cloud-pill[data-state="refused"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.cloud-pill[data-state="refused"]::before { background: var(--red); }
.cloud-pill:hover { border-color: var(--green-deep); color: var(--green-deep); }
body[data-shell="scanner"] .cloud-pill { display: none; }

.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.save-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #169A5A; }

main { padding: clamp(16px, 3vw, 36px); max-width: 1600px; margin: 0 auto; }
.view { display: none; }
.view.is-active { display: block; }
.hidden { display: none !important; }

.button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  background: var(--green);
  font-weight: 800;
}
.button:hover { filter: brightness(.95); }
.button.primary { background: var(--green); }
.button.secondary { color: var(--green-deep); border-color: #9eb6ad; background: #fff; }
.button.ghost { color: var(--green-deep); border-color: var(--line); background: #fff; }
.button.warning { color: #5d3900; background: #f3c66c; }
.button.danger { color: #fff; background: var(--red); }
.button.full { width: 100%; min-height: 52px; font-size: 16px; }
.button.compact { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.button-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.scanner-layout { display: grid; grid-template-columns: minmax(320px, 610px) minmax(250px, 350px); justify-content: center; align-items: start; gap: clamp(16px, 2.5vw, 28px); }
.handheld-shell { overflow: hidden; border: 1px solid #b9c4bd; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.device-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 16px 18px; color: #fff; background: var(--green-deep); }
.device-header p { margin: 0 0 2px; color: #b9d4cc; font-size: 12px; font-weight: 700; }
.device-header h1 { margin: 0; font-size: 19px; }
.device-header-side { display: grid; justify-items: end; gap: 6px; }
.device-login { color: #fff; font-size: 12px; font-weight: 700; text-align: right; }
.device-logout-link { margin-left: 8px; padding: 6px 2px; border: 0; background: transparent; color: #fff; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.device-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.device-badges span { padding: 3px 6px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 4px; color: #dcebe6; font-size: 10px; font-weight: 700; }

.scanner-alert { margin: 14px 16px 0; padding: 10px 12px; border-radius: 5px; font-size: 13px; font-weight: 700; }
.scanner-alert.neutral { color: #225474; background: var(--blue-soft); }
.scanner-alert.success { color: #004B2E; background: var(--green-soft); }
.scanner-alert.warning { color: #785000; background: var(--amber-soft); }
.scanner-alert.danger { color: #862d2b; background: var(--red-soft); }

.scanner-stage { padding: 18px 16px 16px; }
.screen-title { margin: 0; font-size: 21px; font-weight: 800; }
.screen-subtitle { margin: 4px 0 16px; color: var(--muted); font-size: 13px; }
.flow-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin: 0 0 16px; padding: 0; list-style: none; }
.flow-steps li { min-width: 0; padding: 5px 2px; color: var(--muted); border-top: 3px solid #d5ddd8; font-size: 10px; font-weight: 700; text-align: center; }
.flow-steps li.is-current { color: var(--green-deep); border-top-color: var(--green); }
.flow-steps span { display: block; font-size: 11px; }

.scanner-form { display: grid; gap: 14px; }
.form-row { display: grid; gap: 6px; }
label, .field-label { color: #34423c; font-size: 13px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #b8c5be; border-radius: 5px; padding: 11px 12px; color: var(--ink); background: #fff; }
input, select { min-height: 47px; }
textarea { resize: vertical; min-height: 68px; }
.scan-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.scan-input.single { grid-template-columns: minmax(0, 1fr); }
.scan-sample { min-width: 86px; }
.demo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip { padding: 5px 8px; border: 1px solid #c4d2cb; border-radius: 4px; color: #345045; background: #f6faf7; font-size: 11px; font-weight: 800; }
.demo-chip:hover { background: var(--green-soft); }

.direction-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big-action-btn { min-height: 76px; display: grid; align-content: center; gap: 2px; border: 2px solid #c5d0ca; border-radius: 7px; color: var(--ink); background: #fff; font-size: 16px; font-weight: 850; }
.big-action-btn span { font-size: 12px; letter-spacing: .08em; }
.big-action-btn.out.is-selected { border-color: var(--blue); color: #164d75; background: var(--blue-soft); }
.big-action-btn.in.is-selected { border-color: var(--green); color: #004B2E; background: var(--green-soft); }
.scan-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--line); background: #fbfcfb; }
.scan-preview div { min-width: 0; padding-left: 8px; border-left: 3px solid #c9d3cd; }
.scan-preview div.is-ready { border-left-color: var(--green); }
.scan-preview div.is-warning { border-left-color: var(--amber); }
.scan-preview span, .scan-preview strong { display: block; }
.scan-preview span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.scan-preview strong { overflow-wrap: anywhere; margin-top: 2px; font-size: 11px; }
.submit-transaction { margin-top: 2px; }

.supervisor-panel, .confirmation-panel { margin-top: 16px; padding: 16px; border: 1px solid #e2be70; border-radius: 6px; background: #fff8ea; }
.supervisor-panel h2, .confirmation-panel h2 { margin: 2px 0 6px; font-size: 18px; }
.supervisor-panel p, .confirmation-panel p { margin: 0 0 12px; }
.field-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }
.confirmation-panel { border-color: #8AC6A6; background: #F0FAF5; }

.movement-chip { display: inline-block; min-width: 36px; padding: 3px 5px; border-radius: 4px; font-size: 10px; font-weight: 900; text-align: center; }
.movement-chip.in { color: #004B2E; background: var(--green-soft); }
.movement-chip.out { color: #164c74; background: var(--blue-soft); }

.gate-context { display: grid; gap: 12px; }
.context-section { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.context-section h2 { margin: 2px 0 6px; font-size: 19px; }
.context-section p { margin: 0; color: var(--muted); font-size: 13px; }
.metrics-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metrics-panel div { padding: 10px; background: #f3f7f4; }
.metrics-panel span, .metrics-panel strong { display: block; }
.metrics-panel span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.metrics-panel strong { margin-top: 2px; font-size: 26px; }
.scanner-note { border-left: 4px solid var(--blue); }

.view-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 20px; }
.view-heading h1 { margin: 2px 0 6px; font-size: 28px; }
.view-heading p { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 2px 6px rgb(20 35 31 / 3%); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.panel-heading.tight { margin-bottom: 10px; }
.panel-heading h2 { margin: 2px 0 0; font-size: 18px; }
.panel-heading h3 { margin: 2px 0 0; font-size: 15px; }
.number-badge { min-width: 34px; display: inline-grid; place-items: center; padding: 5px 8px; border-radius: 4px; color: #004B2E; background: var(--green-soft); }

.admin-grid { display: grid; min-width: 0; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 16px; }

.table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
/* CR-V14 item 5, Patrick 2026-09-12: "the size of the panel is too wide. Goal should be to limit
   the width so that a slide bar is not needed to view all of the section's data." Abbreviating the
   headers got most of the way; the rest comes from tighter cells and letting text wrap instead of
   forcing every column onto one line. Identifiers keep nowrap, because a VIN or a barcode broken
   across two lines is harder to read than a slightly taller row. */
th, td { padding: 6px 7px; border-bottom: 1px solid #e3e8e4; text-align: left; vertical-align: top; }
/* Headers stay on one line now that they are abbreviated; breaking "CREDENTIAL" across two lines
   costs more width than it saves. Cell text wraps at spaces only, never mid-word. */
th { white-space: nowrap; }
td { white-space: normal; overflow-wrap: normal; word-break: normal; }
td.mono { white-space: nowrap; }
/* The movement history carries thirteen columns, so it gets a slightly smaller face to fit a
   laptop screen without a horizontal bar. Everything else stays at 13px. */
#searchView table { font-size: 12px; }
#searchView th, #searchView td { padding: 5px 6px; }
th { color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
/* CR-V35, Patrick 2026-10-07 ("Space between employee # & driver is excessive. Please shift left."): three crew-sheet rows in his roster carry a
   24-character "employee number" with no space in it, and that one value set the width of the whole Emp # column (about 220 px for a 6-character
   badge). The column is now a fixed width and a longer value breaks inside it; the name is a button, which centres its text, so it is left-aligned
   under its heading. */
.emp-cell { width: 76px; max-width: 76px; overflow-wrap: anywhere; }
.driver-name-link { text-align: left; }
.table-action { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.danger-text { color: var(--red); }
.success-text { color: var(--green); }
.status-badge { display: inline-block; padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.status-badge.authorized { color: #155c43; background: var(--green-soft); }
.status-badge.unauthorized { color: #855300; background: var(--amber-soft); }
.status-badge.expired { color: #862d2b; background: var(--red-soft); }
.status-badge.inactive { color: #59655f; background: #edf1ee; }
.status-badge.provisional { color: #855300; background: var(--amber-soft); }
.ability-grid-heading { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.ability-grid { display: grid; gap: 8px; }
.ability-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, 180px); gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fbfdfc; }
.ability-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ability-chip { display: inline-block; margin: 2px 3px 2px 0; padding: 3px 5px; border-radius: 4px; white-space: nowrap; font-size: 11px; font-weight: 800; }
.ability-chip.authorized { color: #155c43; background: var(--green-soft); }
.ability-chip.unauthorized { color: #855300; background: var(--amber-soft); }
.ability-chip.inactive { color: #59655f; background: #edf1ee; }
.empty-cell, .empty-state { color: var(--muted); text-align: center; }

.search-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.search-grid > div { display: grid; gap: 6px; }
.search-actions { display: flex !important; align-items: end; gap: 8px; }
.results-panel .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.results-table td { white-space: normal; }

.audit-filters { display: grid; grid-template-columns: 220px minmax(220px, 1fr); gap: 14px; margin-bottom: 16px; }
.audit-filters > div { display: grid; gap: 6px; }
.audit-list { display: grid; gap: 9px; }
.audit-event { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 5px; background: var(--panel); }
.audit-event.warning { border-left-color: var(--amber); }
.audit-event.approval { border-left-color: var(--blue); }
.audit-event.muted { border-left-color: #7e8a84; }
.audit-type { color: var(--green-deep); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.audit-event h2 { margin: 0 0 3px; font-size: 15px; }
.audit-event p, .audit-event time { margin: 0; color: var(--muted); font-size: 12px; }
.audit-event time { white-space: nowrap; }

@media (max-width: 1050px) {
  .scanner-layout { grid-template-columns: minmax(320px, 650px); }
  .gate-context { grid-template-columns: repeat(2, 1fr); }
  .scanner-note { grid-column: span 2; }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .topbar { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; gap: 8px; padding: 9px 12px; }
  .brand { min-width: 0; flex: 1; }
  .brand strong { font-size: 14px; }
  .top-actions { margin-left: 0; }
  .save-pill { display: none; }
  .top-nav { order: 3; width: 100%; min-height: 36px; justify-content: space-between; }
  .nav-tab { flex: 1; padding: 0 4px; font-size: 12px; }
  main { padding: 12px; }
  .scanner-layout { display: block; }
  .handheld-shell { border-radius: 6px; }
  .gate-context { grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .context-section { padding: 12px; }
  .context-section:nth-child(1), .scanner-note { grid-column: span 2; }
  .metrics-panel strong { font-size: 22px; }
  .flow-steps li { font-size: 8px; }
  .scan-preview { grid-template-columns: 1fr; }
  .view-heading { display: grid; }
  .view-heading h1 { font-size: 24px; }
  .search-grid { grid-template-columns: 1fr; }
  .search-actions { align-items: center; }
  .audit-filters { grid-template-columns: 1fr; }
  .audit-event { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 420px) {
  .device-header { padding: 14px; }
  .scanner-stage { padding: 15px 12px; }
  .device-badges { display: none; }
  .direction-actions { gap: 7px; }
  .big-action-btn { min-height: 68px; font-size: 14px; }
  .scan-input { grid-template-columns: minmax(0, 1fr) 74px; }
  .scan-sample { min-width: 0; padding-inline: 6px; }
  .gate-context { display: block; }
  .gate-context .context-section { margin-top: 10px; }
  .metrics-panel { display: grid; }
}

/* Original GateFlow-style handheld wizard, retained for the V0.2 data model. */
.scanner-layout { grid-template-columns: minmax(320px, 620px); }
.scanner-screen { display: grid; gap: 14px; }
.home-actions { display: grid; gap: 12px; }
.big-action-btn {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  box-shadow: 0 12px 24px rgb(20 48 40 / 18%);
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
}
.big-action-btn span {
  display: grid;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 6px;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
}
.big-action-btn.out { background: #215a9b; }
.big-action-btn.in { background: #169A5A; }
.compact-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.compact-metrics div { min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f6f9f7; }
/* CR-V17 step 4: movements waiting for a signal. One short line, only when there are any. */
.sync-status { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; background: #fff7e0; color: #6b4d00; border: 1px solid #ecd28a; }
.sync-status[data-tone="danger"] { background: #fdecec; color: #8a1c1c; border-color: #efb4b4; }
.compact-metrics span, .summary-list span, .detail-list span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.compact-metrics strong { display: block; margin-top: 3px; font-size: 23px; }
.progress-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dot { height: 8px; border-radius: 999px; background: #d7e1dd; }
.dot.done { background: #9BD5B6; }
.dot.active { background: var(--green); }
.wizard-step { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 8px 18px rgb(20 35 31 / 7%); }
.wizard-step .screen-subtitle { margin: -8px 0 0; }
.wizard-actions { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 2; margin: 0 -8px -8px; padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgb(255 255 255 / 88%), #fff 28%); }
.button-row.wizard-actions { margin-top: 0; }
.scan-group { display: grid; gap: 8px; }
.demo-chip { border-radius: 999px; color: #164e77; background: #e7f0fb; border-color: #bfd3ec; }
.summary-list { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.summary-list li { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: #f6f9f7; }
.summary-list strong { overflow-wrap: anywhere; font-size: 13px; }
.override-panel, .scanner-confirm { display: grid; gap: 13px; padding: 16px; border: 1px solid #e2be70; border-radius: 7px; background: #fff8ea; }
.scanner-confirm { border-color: #8AC6A6; background: #F0FAF5; }
.override-panel h2, .scanner-confirm h2 { margin: 0; font-size: 19px; }
.override-panel p, .scanner-confirm p { margin: 0; }
.detail-panel h2 { margin: 2px 0 10px; font-size: 18px; }
.detail-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.detail-list li { display: grid; gap: 2px; padding: 9px; background: #fff; list-style: none; }
.detail-list strong { overflow-wrap: anywhere; font-size: 12px; }

@media (max-width: 1050px) {
  .scanner-layout { grid-template-columns: minmax(320px, 620px); }
}

@media (max-width: 760px) {
  .big-action-btn { min-height: 82px; }
  .wizard-step { padding: 12px; gap: 11px; }
  .wizard-step .screen-subtitle { margin-top: -6px; }
  .scanner-stage:has(#scanWizard:not(.hidden)) { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  #driverInput, #barcodeInput, #supervisorInput { scroll-margin-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .wizard-actions { position: fixed; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 10; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 -5px 18px rgb(20 35 31 / 18%); }
  .wizard-step[data-step="3"] .summary-list li { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 8px; padding-block: 7px; }
}

@keyframes enterFadeMobile {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* V0.6 Supervisor and inventory review layout. */
.supervisor-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.supervisor-tab { min-height: 42px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 850; }
.supervisor-tab.is-active { border-bottom-color: var(--green); color: var(--green-deep); }
.supervisor-tab:focus-visible { outline: 3px solid #6fae9c; outline-offset: -3px; }
.supervisor-section { display: none; }
.supervisor-section.is-active { display: block; }
.supervisor-driver-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, .95fr); gap: 18px; align-items: start; }
.supervisor-side-stack { display: grid; gap: 18px; }
.driver-roster-panel { min-width: 0; }
.compact-panel { min-width: 0; }
.compact-panel > .button { margin: -2px 0 12px; }
.action-stack { display: grid; gap: 4px; min-width: 110px; }
/* CR-V18: one Actions menu per driver row instead of three stacked buttons. */
.row-actions { min-width: 118px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-deep); font-size: 12px; font-weight: 800; }
/* CR-V18: Active Driver Authorizations, one narrow line per driver. */
.compact-rows th, .compact-rows td { padding-top: 4px; padding-bottom: 4px; white-space: nowrap; }
.compact-rows .muted { color: var(--muted); font-size: 11px; }
/* CR-V18: the barcode label, previewed after Save Vehicle and printed on its own label-sized page. */
.label-preview { display: grid; place-items: center; min-width: 0; margin: 12px 0; padding: 12px; overflow: hidden; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.barcode-label { display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 3.6in; box-sizing: border-box; color: #000; text-align: center; }
.barcode-label-bars svg { display: block; width: 100%; height: auto; max-height: 0.95in; }
.barcode-label-code { margin: 0; font: 800 20px/1.1 ui-monospace, Consolas, monospace; letter-spacing: 2px; }
.barcode-label-meta { margin: 0; font-size: 11px; }
.label-print-sheet { display: none; }
/* CR-V17 step 5: what a role may not do is not offered. */
.role-hidden { display: none !important; }
/* The console waits for a sign-in; nothing behind it is shown or usable. */
.console-gate { display: grid; place-items: center; min-height: 60vh; padding: 24px 16px; }
.console-gate-card { max-width: 460px; }
body.console-locked main > .view, body.console-locked .top-nav { display: none !important; }
.demo-banner { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fff4d6; color: #6b4b00; font-size: 13px; font-weight: 700; }
.phone-signin-link { margin-top: 10px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.phone-signin-link.needs-signin { width: 100%; min-height: 52px; margin-top: 14px; padding: 10px 14px; border: 2px solid #004B2E; border-radius: 7px; background: #fff; color: #004B2E; font-size: 16px; font-weight: 800; text-decoration: none; }
.login-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin: 10px 0; }
.login-password { margin: 10px 0; padding: 12px; border: 2px solid var(--green); border-radius: 8px; background: #f2fbf6; }
.login-password-value { margin: 6px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: 1px; user-select: all; }
.vehicle-toolbar { grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px); }
.modal-wide { width: min(760px, calc(100vw - 28px)); }
.modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-panel form { display: grid; gap: 12px; }
.modal-panel .form-row { display: grid; gap: 5px; }
.modal-panel .field-status:not(:empty) { color: #a22b2b; min-height: 1em; }
/* A status that is not an error, such as whether a phone is signed in. */
.modal-panel .field-status.neutral:not(:empty) { color: var(--ink, #1f2a26); font-weight: 700; }

@media (max-width: 1050px) {
  .supervisor-driver-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .supervisor-tabs { margin-inline: -2px; }
  .supervisor-tab { flex: 1; padding-inline: 8px; }
  .modal-form-grid, .vehicle-toolbar, .ability-row { grid-template-columns: 1fr; }
  .bulk-toolbar { grid-template-columns: 1fr; }
  .brand > span:last-child { min-width: 0; }
  .brand > span:last-child > span { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions .compact { padding-inline: 9px; }
  .driver-roster-panel .panel-heading { flex-wrap: wrap; gap: 9px; }
  .driver-roster-panel .panel-heading .button { margin-left: 0; }
  .driver-roster-panel { overflow: hidden; }
}

/* ===================================================================
   Visual polish + usability pass (v0.2.1)
   Smoother transitions, hover/press feedback, table/row clarity, and
   shake/fade feedback for the scanner flow. No new features — purely
   presentational on top of the existing markup and structure above.
=================================================================== */

:root {
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-lift: 0 10px 22px rgb(20 35 31 / 12%);
}

/* Generic enter animation, restarted via JS (animateIn()) whenever a
   scanner screen / wizard step / tab becomes the active one. */
@keyframes enterFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.enter-anim { animation: enterFade 0.26s var(--ease) both; }

/* Shake feedback for invalid fields, restarted via JS (shake()). */
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake { animation: shakeX 0.4s var(--ease); }

/* Buttons + tabs: a touch of lift and smoother color/transform change. */
.button,
.big-action-btn,
.nav-tab,
.demo-chip {
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.button:hover:not(:disabled),
.big-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgb(20 35 31 / 10%);
}
.button:active:not(:disabled),
.big-action-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.96);
}
.demo-chip:hover { transform: translateY(-1px); }

/* Inputs: smoother focus/border transition instead of an abrupt snap. */
input, select, textarea {
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

/* Table rows: zebra striping + hover highlight for easier scanning of
   longer Search/Admin lists. */
tbody tr { transition: background-color 0.12s var(--ease); }
tbody tr:nth-child(even) { background: rgb(20 59 53 / 2.5%); }
tbody tr:hover { background: var(--green-soft); }

/* Audit cards: subtle lift on hover so the list feels responsive even
   though entries aren't clickable. */
.audit-event { transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease); }
.audit-event:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }


/* Progress dots: smooth fill/scale as a step completes. */
.dot { transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.dot.active { transform: scaleY(1.3); }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .enter-anim, .shake, .button, .big-action-btn, .demo-chip, .audit-event, .dot {
    animation: none !important;
    transition: none !important;
  }
}

/* Storage-unavailable warning state retained for the prototype notice. */
.save-pill.warn { color: var(--amber); }
.save-pill.warn .status-dot { background: #c98a1f; }

/* V0.4 scanner realism: one working location per handheld session plus
   compact controls for the handheld workflow. */
.working-location-bar {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #c7d7d0;
  border-radius: 6px;
  background: #f2f7f4;
}
.working-location-select { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 9px; }
.working-location-select label { color: var(--green-deep); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.working-location-select select { min-width: 0; margin: 0; }
.station-account { display: grid; gap: 2px; min-width: 170px; padding: 8px 10px; border-left: 1px solid var(--line); }
.station-account span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.station-account strong { color: var(--green-deep); font-size: 13px; }
.station-account .table-action { margin-top: 3px; }
.device-history-panel { margin-top: 16px; box-shadow: none; }
.scope-label { display: inline-block; color: var(--green-deep); font-size: 11px; font-weight: 800; white-space: nowrap; }
.connectivity-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.connectivity-strip span { padding: 3px 6px; border: 1px solid #d5e1db; border-radius: 4px; background: #fff; color: #3d584f; font-size: 10px; font-weight: 800; }
.connectivity-strip #onlineStatus { color: #004B2E; background: var(--green-soft); border-color: #A9DABD; }
.connectivity-strip #onlineStatus.offline { color: #8a5500; background: var(--amber-soft); border-color: #e5c480; }
.big-action-btn.start { background: #004B2E; }
.scanner-test-panel { border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; }
.scanner-test-panel summary { padding: 10px 12px; color: var(--green-deep); cursor: pointer; font-size: 12px; font-weight: 850; }
.scanner-test-panel dl { display: grid; gap: 1px; margin: 0; padding: 0 10px 10px; }
.scanner-test-panel dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; padding: 7px 8px; background: #fff; }
.scanner-test-panel dt { color: var(--muted); font-size: 11px; font-weight: 750; }
.scanner-test-panel dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--green-deep); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 750; text-align: right; }
.muted-small { color: var(--muted); font-size: 11px; }

.manual-entry-trigger { text-transform: none; }
.bulk-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 180px auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.bulk-toolbar > div { display: grid; gap: 6px; }
.license-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.license-summary div {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f7faf8;
}
.license-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.license-summary strong { display: block; font-size: 20px; }
.row-check {
  width: 18px;
  height: 18px;
  min-height: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(11 24 20 / 46%);
}
/* 081526 v7 edit #3: the add-user form is taller than the viewport once the ability matrix
   renders, and without this the lower roles were unreachable - no scrollbar at all. */
.modal-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(11 24 20 / 24%);
}
.modal-panel h2 { margin: 2px 0 0; font-size: 20px; }

@media (max-width: 420px) {
  .working-location-select { grid-template-columns: 1fr; gap: 4px; }
  .station-account { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .connectivity-strip { gap: 4px; }
  .connectivity-strip span { font-size: 9px; }
  .scanner-test-panel dl div { grid-template-columns: 1fr; gap: 2px; }
  .scanner-test-panel dd { text-align: left; }
}

@media (max-width: 900px) {
  .bulk-toolbar,
  .license-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .enter-anim { animation-name: enterFadeMobile; }
}

/* CR-V16-PATRICK-0913-001 */

/* A scanned employee # or approver ID is drawn as dots. Patrick, 2026-09-13: an operator who can
   read an ID off the screen can type it in later to let someone out. Tapping the field to type
   removes the class, because a person typing has to see what they typed. The value underneath is
   unchanged; only the drawing is. */
.id-masked { -webkit-text-security: disc; }

.sort-note { margin: -4px 0 10px; }
.results-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.results-more .field-status { min-height: 0; }
.print-only { display: none; }

/* The printed search: the results and a footer naming the criteria, when the search ran, how many
   rows are on the page, and who printed it. Everything else is left off the paper. */
@media print {
  @page { size: landscape; margin: 12mm; }
  html, body { background: #fff; }
  .topbar, #scannerView, #supervisorView, #searchForm, #searchPrintStatus, .results-more, .modal-backdrop { display: none !important; }
  main { max-width: none; padding: 0; }
  #searchView { display: block !important; }
  #searchView .panel { padding: 0; border: 0; box-shadow: none; }
  #searchView .table-wrap { overflow: visible; }
  #searchView table { font-size: 10px; }
  tbody tr:nth-child(even), tbody tr:hover { background: none; }
  .status-badge, .movement-chip { padding: 0; background: none !important; }
  .print-only { display: block !important; }
  .print-footer { margin-top: 12px; padding-top: 8px; border-top: 1px solid #000; font-size: 11px; break-inside: avoid; }
  .print-footer p { margin: 2px 0; }
  /* CR-V18: printing a barcode label prints the label and nothing else, on a 4 x 2 inch page. */
  body.printing-label > *:not(.label-print-sheet) { display: none !important; }
  body.printing-label .label-print-sheet { display: grid !important; place-items: center; page: label; width: 4in; height: 2in; }
}
@page label { size: 4in 2in; margin: 0.1in; }

/* CR-V19: the build stamp. Small and quiet: it is there to be checked, not read every time. */
.build-stamp { opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-line { margin: 10px 0 0; font-size: 13px; color: #5b6f68; font-variant-numeric: tabular-nums; }
.build-notice { display: block; margin-top: 4px; color: #8a4b00; font-weight: 700; }
.build-notice.hidden { display: none; }