/* ==========================================================================
   FleetHook app shell (Phase 2 redesign)
   Loaded AFTER styles.css on every signed-in page. styles.css still owns the
   component vocabulary the page scripts emit (.panel, .badge, .modal, .form-*),
   so this file restyles that vocabulary and adds the shell: a fixed navy
   sidebar, a white page header, and a light working surface. Rules are scoped
   under .app (or body) so they win over styles.css without !important.
   Palette matches the marketing site (assets/site.css).
   ========================================================================== */

:root, [data-theme="dark"], [data-theme="light"] {
  --navy: #12253F; --deep: #0B1729; --orange: #FA7305; --orange-ink: #E8630A;
  --ink: #12253F; --ink-2: #4A5A70; --ink-3: #5A6B82; --ink-4: #8A97AA;
  --line: #E6E9EF; --line-2: #D5DBE4; --bg: #EEF1F5; --bg-2: #F5F7FA; --card: #FFFFFF;
  --green: #22C55E; --green-ink: #15803D; --green-bg: #DCFCE7;
  --red: #DC2626; --red-ink: #B42318; --red-bg: #FEE2E2;
  --amber: #F59E0B; --amber-ink: #B45309; --amber-bg: #FEF3C7;
  --blue-bg: #E0E7FF; --blue-ink: #3730A3;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;
  --color-primary: var(--orange); --color-primary-hover: var(--orange-ink);
  --color-primary-highlight: rgba(250, 115, 5, .12);
  --color-success: var(--green-ink);
  --radius-md: 10px; --radius-lg: 14px;
  --side-w: 236px;
}

html { scroll-behavior: auto }
body.app-body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body);
  font-size: 15px; line-height: 1.45; min-height: 100dvh;
}
.app-body .skip-link { z-index: 2000 }

/* ---- layout ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh }

.app .sidebar {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy); color: #C7D0DD; border: 0; border-right: 1px solid rgba(255,255,255,.06);
  padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: none;
}
.side-brand { display: flex; align-items: center; padding: 4px 8px 16px }
.side-brand img { height: 34px; width: auto; display: block }
.app .sidebar nav { display: flex; flex-direction: column; gap: 4px }
.side-label { margin: 14px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7E8FA8 }
.app .sidebar .nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px;
  color: #C7D0DD; font-weight: 700; font-size: 14px; border: 0; transition: background .12s ease, color .12s ease;
}
.app .sidebar .nav-item svg { width: 18px; height: 18px; flex: none; opacity: .9 }
.app .sidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff }
.app .sidebar .nav-item.active { background: var(--orange); color: #fff; border: 0 }
.app .sidebar .nav-item .nav-count { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff }
.app .sidebar .nav-item .nav-count:empty { display: none }
.side-group[hidden] { display: none }
.side-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px }
.side-co { padding: 12px; border-radius: 12px; background: var(--deep); display: grid; gap: 2px }
.side-co .co-name { font-size: 12px; font-weight: 700; color: #9FAEC4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.side-co .co-plan { font-size: 13px; font-weight: 800; color: #fff }
.side-foot .ghost-btn { min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #C7D0DD; font-weight: 700; font-size: 13px; width: 100%; justify-content: center }
.side-foot .ghost-btn:hover { background: rgba(255,255,255,.06); color: #fff }

.app .dashboard-main {
  --color-text: var(--ink); --color-text-muted: var(--ink-3); --color-text-faint: var(--ink-4);
  --color-border: var(--line-2); --color-divider: var(--line); --color-surface: #fff; --color-surface-2: var(--bg-2);
  background: var(--bg); color: var(--ink); min-width: 0; overflow-x: clip; display: flex; flex-direction: column;
}
[data-theme="dark"] .app .dashboard-main { background: var(--bg) }

/* page header */
.app .dash-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 28px;
  background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
.app .dash-top h1, .app .dash-top h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--ink) }
.app .dash-top p { margin: 0; font-size: 13px; color: var(--ink-3); font-weight: 600 }
.app .dash-top .eyebrow { display: none }
.app .dash-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.top-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); min-width: 240px }
.top-search svg { flex: none; color: var(--ink-3) }
.top-search input { border: 0; background: transparent; font: inherit; font-size: 14px; flex: 1; min-width: 0; outline: none; color: var(--ink) }
.top-search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250,115,5,.15) }

.app .dash-body { padding: 20px 28px 40px; display: grid; gap: 18px; flex: 1 }

/* ---- buttons ----------------------------------------------------------- */
.app .dash-btn, .app .primary-btn, .app .secondary-btn, body .modal .primary-btn, body .modal .secondary-btn, body .modal-foot .dash-btn {
  min-height: 42px; padding: 0 16px; border-radius: 10px; font-weight: 800; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.app .dash-btn, .app .secondary-btn, body .modal .secondary-btn { background: #fff; color: var(--ink); border: 1px solid var(--line-2) }
.app .dash-btn:hover, .app .secondary-btn:hover, body .modal .secondary-btn:hover { border-color: var(--ink-4); background: var(--bg-2) }
.app .dash-btn.primary, .app .primary-btn, body .modal .primary-btn { background: var(--orange); color: #fff; border: 1px solid transparent }
.app .dash-btn.primary:hover, .app .primary-btn:hover, body .modal .primary-btn:hover { background: var(--orange-ink) }
.app .dash-btn.navy { background: var(--navy); color: #fff; border-color: transparent }
.app .dash-btn:active, .app .primary-btn:active { transform: translateY(1px) }
.app .dash-btn:disabled, .app .primary-btn:disabled, body .modal .primary-btn:disabled { opacity: .55; cursor: not-allowed }
.app .mini-btn { border-radius: 8px; min-height: 32px; font-weight: 800 }
.app .mini-btn:hover { border-color: var(--orange); color: var(--orange-ink) }

/* chips / segmented tabs */
.app .chip, .app .filter-chips button {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
  color: var(--ink); font-weight: 700; font-size: 13px;
}
.app .chip.active, .app .filter-chips button.active { background: var(--navy); border-color: var(--navy); color: #fff }
.app .seg-tabs { gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 0 }
.app .seg-tab { font-size: 14px; padding: 10px 14px; border-bottom-width: 3px; color: var(--ink-3) }
.app .seg-tab.active { color: var(--ink); border-bottom-color: var(--orange) }
.app .seg-count { background: var(--bg); color: var(--ink-3) }
.app .seg-tab.active .seg-count { background: rgba(250,115,5,.14); color: var(--orange-ink) }

/* ---- cards, KPIs, panels ---------------------------------------------- */
.app .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px }
.app .kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: none;
  display: grid; gap: 6px;
}
.app .kpi span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 }
.app .kpi strong { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink) }
.app .kpi.accent { background: var(--navy); border-color: var(--navy) }
.app .kpi.accent span { color: #9FAEC4 } .app .kpi.accent strong { color: #fff }

.app .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: none }
.app .panel-head { margin-bottom: 14px; padding-bottom: 0; align-items: center }
.app .panel-head h3 { font-size: 15px; font-weight: 800 }
.app .panel-meta { font-size: 12px; color: var(--ink-3); font-weight: 700 }
.app .app-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 18px }
.app .app-grid-single { grid-template-columns: 1fr }
.app .app-grid > * { min-width: 0 }
.app .perf-grid { gap: 12px }
.app .perf-tile { border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); padding: 14px }
.app .perf-tile span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px }
.app .perf-tile strong { font-size: 24px; font-weight: 800; letter-spacing: -.5px }

/* ---- tables ------------------------------------------------------------ */
.app th, .app td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle }
.app th { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2) }
.app thead tr th:first-child { border-top-left-radius: 8px } .app thead tr th:last-child { border-top-right-radius: 8px }
.app tbody tr:last-child td { border-bottom: 0 }
.app .row-click:hover, .app .row-click:focus-visible { background: #FFF5EC }
.app #board-body td:first-child, .app #jobs-body td:first-child, .app #inv-body td:first-child, .app #imp-body td:first-child, .app #lh-tab-body td:first-child { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--orange-ink) }
.app td.board-state { font-family: inherit; color: inherit; font-weight: inherit; font-size: inherit }
.app .board-state { padding: 28px 12px; color: var(--ink-3); font-weight: 600 }

/* ---- status badges ----------------------------------------------------- */
.app .badge, body .modal .badge { padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; background: var(--bg); color: var(--ink-3) }
.app .badge.enroute, body .modal .badge.enroute { background: #FFEDD5; color: var(--orange-ink) }
.app .badge.onscene, body .modal .badge.onscene { background: var(--blue-bg); color: var(--blue-ink) }
.app .badge.available, .app .badge.online, body .modal .badge.available { background: var(--green-bg); color: var(--green-ink) }
.app .badge.high, .app .badge.danger, body .modal .badge.high { background: var(--red-bg); color: var(--red-ink) }
.app .badge.idle, .app .badge.offline, .app .badge.stale { background: var(--bg); color: var(--ink-3) }
.app .truck-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em }
.app .live-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.18) }

/* ---- queue (needs a driver) -------------------------------------------- */
.app .queue-list { gap: 10px }
.app .queue-item {
  background: var(--card); border: 2px solid var(--orange); border-radius: 14px; padding: 14px 16px; gap: 14px;
  box-shadow: 0 6px 18px rgba(18,37,63,.06); color: var(--ink);
}
.app .queue-item strong { font-size: 15px; font-weight: 800 }
.app .queue-item p { font-size: 13px; color: var(--ink-2); margin: 2px 0 0 }
.app .queue-nearest { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 6px }
.app .queue-item-assigned { border: 1px solid var(--line); box-shadow: none; opacity: .92 }
.app .queue-divider { margin: 8px 0 2px }
.app .assign-select { border-radius: 10px; min-height: 40px; font-weight: 700; font-size: 13px; background: var(--bg-2) }
.app .queue-assign .assign-select { max-width: 180px }

/* ---- trucks list (dispatch right rail) --------------------------------- */
.truck-list { display: grid }
.truck-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line) }
.truck-row:last-child { border-bottom: 0 }
.truck-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none }
.truck-row.on .dot { background: var(--green) }
.truck-row.stale .dot { background: #9AA6B8 }
.truck-row .who { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.truck-row.off .who { color: var(--ink-4); font-weight: 700 }
.truck-row .meta { font-size: 12px; color: var(--ink-3); font-weight: 700; white-space: nowrap }
.truck-row .av { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; flex: none }
.truck-row.off .av { background: var(--line-2); color: var(--ink-3) }

/* ---- map --------------------------------------------------------------- */
.app .map-box { border-radius: 12px; border: 1px solid var(--line); background: #E3ECF4 }
.app .map-box-wide { height: 340px; min-height: 340px }
.app .map-box.map-tall { height: 420px; min-height: 420px }
.app .gps-pin { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,.35); display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800 }
.app .gps-pin.job { background: var(--orange) }
.app .gps-pin.stale { background: #9AA6B8; opacity: .8 }
.app .map-empty { font-weight: 600 }

/* ---- forms ------------------------------------------------------------- */
.app .form-field label, body .modal .form-field label { font-size: 11px; letter-spacing: .06em; color: var(--ink-3) }
.app .form-field input, .app .form-field select, .app .form-field textarea, .app .search-input, .app .assign-select,
body .modal .form-field input, body .modal .form-field select, body .modal .form-field textarea, body .modal .assign-select {
  border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink);
}
.app .form-field input:focus, .app .form-field select:focus, .app .form-field textarea:focus, .app .search-input:focus,
body .modal .form-field input:focus, body .modal .form-field select:focus, body .modal .form-field textarea:focus {
  outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250,115,5,.15);
}
.app .search-input { min-height: 42px; max-width: 360px; background: var(--bg-2) }
.app .form-section-label, body .modal .form-section-label { color: var(--orange-ink); font-size: 11px; letter-spacing: .1em }
body .modal .form-msg[data-kind="error"], .app .form-msg[data-kind="error"] { color: var(--red-ink) }
body .modal .form-msg[data-kind="ok"], .app .form-msg[data-kind="ok"] { color: var(--green-ink) }
body .modal .switch input:checked + .slider { background: var(--orange) }
body .modal .form-field .auth-choice:has(input:checked) { border-color: var(--orange); background: #FFF5EC }
body .modal .form-field .auth-choice input:checked { border-color: var(--orange); box-shadow: inset 0 0 0 4px var(--orange) }

/* ---- modals ------------------------------------------------------------ */
body .modal-overlay { background: rgba(11,23,41,.62) }
body .modal { border-radius: 16px; font-family: var(--font-body); --color-text: var(--ink); --color-text-muted: var(--ink-3); --color-border: var(--line-2); --color-divider: var(--line) }
body .modal-head { padding: 16px 20px }
body .modal-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -.3px }
body .modal-foot { padding: 14px 20px }
body .modal-close { border-radius: 8px }

/* New call: 3-step layout. The form is one flat grid built by newcall.js; the
   stepper wraps its sections into .nc-step panes and shows one at a time. */
.nc-steps { display: flex; gap: 6px; padding: 12px 20px 0; }
.nc-steps button { appearance: none; flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; text-align: left }
.nc-steps button .n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg); color: var(--ink-3); font-size: 12px; flex: none }
.nc-steps button.cur { color: var(--ink); background: var(--bg-2) }
.nc-steps button.cur .n { background: var(--orange); color: #fff }
.nc-steps button.done .n { background: var(--navy); color: #fff }
.nc-step[hidden] { display: none }
.nc-step { display: contents }
.nc-step[hidden] > * { display: none }
.nc-foot-row { display: flex; gap: 10px }
.nc-foot-row > * { flex: 1 }
.nc-foot-row .primary-btn[hidden], .nc-foot-row .dash-btn[hidden] { display: none }

/* ---- misc vocabulary used by data scripts ------------------------------ */
.app .avatar { background: var(--navy); color: #fff; font-weight: 800 }
.app .invite-row { border-radius: 10px }
.app .invite-code { font-family: var(--mono) }
.app .bar-fill { background: var(--orange) }
.app .legend-dot { background: var(--orange) }
.app .upgrade-state { background: var(--card); border-radius: 14px; box-shadow: none }
.app .upgrade-state .primary-btn { display: inline-flex }
.app .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 700; opacity: 0; transition: .18s ease; z-index: 1500; pointer-events: none }
.app .toast.show { opacity: 1; transform: translate(-50%, 0) }
.app .site-footer { display: none }
.app .call-card { font-family: var(--font-body) }

/* page-specific lift for the old `section-head` copy, which is gone now */
.app .section-head { display: none }

/* ---- LotHook page ------------------------------------------------------ */
.lh-plate-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end }
.lh-plate-form .form-field { flex: 1 1 180px }
.lh-plate-form input#lh-plate { font-family: var(--mono); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; min-height: 52px; font-weight: 600 }
.lh-verdict { border-radius: 14px; padding: 18px 20px; display: grid; gap: 6px; border: 2px solid var(--line) }
.lh-verdict .v-plate { font-family: var(--mono); font-size: 28px; letter-spacing: .12em; font-weight: 600 }
.lh-verdict .v-title { font-size: 18px; font-weight: 800 }
.lh-verdict .v-sub { font-size: 13px; color: var(--ink-2); font-weight: 600 }
.lh-verdict.ok { border-color: var(--green); background: var(--green-bg) }
.lh-verdict.ok .v-title { color: var(--green-ink) }
.lh-verdict.tow { border-color: var(--red); background: var(--red-bg) }
.lh-verdict.tow .v-title { color: var(--red-ink) }
.lh-verdict.warn { border-color: var(--amber); background: var(--amber-bg) }
.lh-verdict.warn .v-title { color: var(--amber-ink) }
.lh-verdict .v-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px }
.lh-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.lh-prop { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; cursor: pointer; font: inherit; color: inherit }
.lh-prop:hover, .lh-prop.sel { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250,115,5,.12) }
.lh-prop .p-name { font-weight: 800; font-size: 15px }
.lh-prop .p-sub { font-size: 13px; color: var(--ink-3); font-weight: 600 }
.lh-prop .p-tag { justify-self: start; margin-top: 6px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--green-bg); color: var(--green-ink); text-transform: uppercase; letter-spacing: .04em }
.lh-hist { display: grid; gap: 8px }
.lh-hist-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px }
.lh-hist-row .hp { font-family: var(--mono); font-weight: 600; letter-spacing: .08em }
.lh-hist-row .hm { color: var(--ink-3); margin-left: auto; white-space: nowrap }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .app .app-grid { grid-template-columns: 1fr }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr }
  .app .sidebar { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); z-index: 40 }
  .side-brand { padding: 0 6px 0 0; flex: none } .side-brand img { height: 26px }
  .app .sidebar nav { flex-direction: row; gap: 4px; flex: 0 0 auto }
  .app .sidebar .nav-item { min-height: 36px; padding: 0 10px; font-size: 13px; white-space: nowrap }
  .app .sidebar .nav-item svg { display: none }
  .side-label { display: none }
  .side-group nav { display: flex }
  .side-foot { margin-top: 0; padding-top: 0; flex: none; grid-auto-flow: column; align-items: center }
  .side-co { display: none }
  .side-foot .ghost-btn { width: auto; min-height: 36px; padding: 0 12px }
  .app .dash-top { padding: 12px 16px; position: static }
  .app .dash-top h1, .app .dash-top h3 { font-size: 19px }
  .app .dash-actions { margin-left: 0; width: 100% }
  .top-search { min-width: 0; flex: 1 }
  .app .dash-body { padding: 14px 16px 32px; gap: 14px }
  .app .map-box-wide, .app .map-box.map-tall { height: 280px; min-height: 280px }
  .nc-steps button span.t { display: none }
}

/* ---- polish ------------------------------------------------------------ */
.app .dash-top .live-dot { margin: 0 6px 0 4px; vertical-align: middle }
.app th { white-space: nowrap }
body .modal .form-field input[type="checkbox"], body .modal .form-field input[type="radio"],
.app .form-field input[type="checkbox"], .app .form-field input[type="radio"] { width: auto; min-height: 0; border: 0; box-shadow: none; accent-color: var(--orange) }
.lh-hist-row > span:nth-child(3) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.app .dash-top > div:first-child { flex: 1 1 240px; min-width: 0 }
.app .dash-top h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.app .cp-row input, .app .pp-row input, .app .li-row input, .app .li-row select, body .modal .li-row input, body .modal .li-row select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 .6rem; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; min-width: 0 }
.app .cp-row input:focus, .app .pp-row input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250,115,5,.15) }
.app .app-page-head h3 { font-size: 18px; font-weight: 800 }
.app .toolbar { margin-bottom: 14px }

/* New call: step-1 shortcut tiles (Police · no customer), same idea as the apps */
.nc-quick { display: flex; gap: 8px }
.nc-tile { appearance: none; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border-radius: 14px; border: 1px solid var(--line, #d7dee8); background: var(--surface, #fff); color: inherit; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer }
.nc-tile .nc-tile-ico { font-size: 18px; line-height: 1 }
.nc-tile.on { background: var(--orange); border-color: var(--orange); color: #fff }

/* Drivers: the onboarding checklist and office KPIs are owner tools. Set in CSS
   because ob-card.js renders after the role gate has already run. */
html[data-role="driver"] #ob-card-host,
html[data-role="driver"] .kpi-row { display: none !important; }