/* ══════════════════════════════════════════════════════════════════════════
   Escargo Transport — design system primitives (E1, §12)
   Matches the approved page references: deep-green sidebar, lime actions, white
   cards, subtle borders, clear tables, status chips, metric cards, map cards.
   Reuses the Escargo brand tokens; adds transport-specific primitives. Mobile-
   first responsive: sidebar → drawer, right rail → stacked, tables → cards.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --et-green-900: #0f3d2e;   /* sidebar base */
  --et-green-800: #12463a;   /* sidebar hover */
  --et-green-700: #1a5a45;   /* sidebar active tint */
  --et-lime: #84cc16;        /* primary action */
  --et-lime-600: #74b813;
  --et-lime-050: #f2fbe3;    /* lime tint fill */
  --et-ink: #0f172a;
  --et-body: #334155;
  --et-muted: #64748b;
  --et-line: #e5e7eb;
  --et-line-soft: #eef1f4;
  --et-bg: #f6f7f9;
  --et-card: #ffffff;
  --et-blue: #3b82f6;
  --et-amber: #f59e0b;
  --et-red: #ef4444;
  --et-grey: #94a3b8;
  --et-radius: 14px;
  --et-radius-sm: 10px;
  --et-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
}

/* ── App frame ────────────────────────────────────────────────────────── */
.et-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--et-bg); color: var(--et-body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.et-main { display: flex; flex-direction: column; min-width: 0; }
/* Base rule, NOT only inside the mobile media query. The scrim is the FIRST child of the
   .et-app grid; with no base display:none it is a plain block div at desktop, grid
   auto-placement hands it the 248px track, the sidebar takes 1fr and the content wraps
   to a 248px second-row track. Fixed positioning takes it out of flow whenever it is
   actually shown, so the ONLY thing this rule changes is that the scrim never
   participates in the grid. */
.et-scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 55; }
.et-content { padding: 26px 30px 60px; max-width: 1360px; width: 100%; margin: 0 auto; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.et-side { background: var(--et-green-900); color: #cde0d6; display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; position: sticky; top: 0; height: 100vh; }
.et-logo { display: flex; align-items: center; gap: 9px; padding: 6px 8px 18px; }
.et-logo img { height: 34px; width: auto; }
.et-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.et-nav a, .et-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: var(--et-radius-sm);
  color: #b9d3c5; font-size: 14px; font-weight: 600; text-decoration: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; }
.et-nav a:hover, .et-nav button:hover { background: var(--et-green-800); color: #eafff4; }
.et-nav a[aria-current="page"] { background: var(--et-green-700); color: #ffffff; }
.et-nav a[aria-current="page"] svg { color: var(--et-lime); }
.et-nav svg { width: 19px; height: 19px; flex: 0 0 auto; }
.et-nav .et-count { margin-left: auto; background: var(--et-lime); color: #14311f; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.et-side-help { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--et-radius-sm); background: var(--et-green-800); color: #d8eee2; font-size: 12.5px; font-weight: 600; text-decoration: none; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.et-top { display: flex; align-items: center; gap: 18px; padding: 14px 30px; background: var(--et-card); border-bottom: 1px solid var(--et-line); position: sticky; top: 0; z-index: 20; }
.et-top .et-brandline { font-size: 15px; font-weight: 800; color: var(--et-ink); white-space: nowrap; }
.et-search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 9px; background: var(--et-bg); border: 1px solid var(--et-line); border-radius: 999px; padding: 9px 16px; }
.et-search input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 14px; color: var(--et-ink); font-family: inherit; }
.et-top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.et-iconbtn { position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--et-line); background: var(--et-card); color: var(--et-body); display: grid; place-items: center; cursor: pointer; }
.et-iconbtn .et-dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--et-lime); color: #14311f; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.et-avatar { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--et-line); background: var(--et-card); cursor: pointer; }
.et-avatar .et-ini { width: 30px; height: 30px; border-radius: 999px; background: var(--et-green-700); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.et-avatar .et-nm { font-size: 13px; font-weight: 700; color: var(--et-ink); }

/* ── Page header ──────────────────────────────────────────────────────── */
.et-pagehead { margin-bottom: 20px; }
.et-pagehead h1 { font-size: 30px; font-weight: 800; color: var(--et-ink); margin: 0 0 4px; letter-spacing: -.5px; }
.et-pagehead p { margin: 0; color: var(--et-muted); font-size: 14px; }

/* ── Cards + grid ─────────────────────────────────────────────────────── */
.et-card { background: var(--et-card); border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow); }
.et-card-pad { padding: 18px; }
.et-grid { display: grid; gap: 16px; }
/* repeat(4, 1fr) could not shrink below its content at 375px: the metric cards ran to
   x=415 against a 375 client. auto-fit + a 0 floor wraps them by available space. */
.et-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.et-metric { min-width: 0; }
.et-metric .et-m-label, .et-metric .et-m-value { overflow-wrap: anywhere; }
.et-cols-3 { grid-template-columns: 2fr 1.4fr 1.2fr; }
.et-cols-3 > * { min-width: 0; }
/* Two-up detail columns. This EXISTS as a class rather than an inline style on purpose: the
   booking detail carried `style="grid-template-columns:1fr 1fr"`, and an inline declaration
   outranks every media query below, so the two cards stayed side by side at 375px (184px each,
   scrollWidth 382 against a 375 client) — the same overflow already fixed once for .et-metrics. */
.et-cols-2 { grid-template-columns: 1fr 1fr; }
.et-cols-2 > * { min-width: 0; }
.et-metric { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.et-metric .et-m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.et-metric .et-m-ico { width: 42px; height: 42px; border-radius: var(--et-radius-sm); background: var(--et-lime-050); color: var(--et-green-700); display: grid; place-items: center; }
.et-metric .et-m-label { font-size: 13px; color: var(--et-muted); font-weight: 600; }
.et-metric .et-m-value { font-size: 26px; font-weight: 800; color: var(--et-ink); line-height: 1.1; }
.et-metric .et-m-sub { font-size: 12px; color: var(--et-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.et-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: var(--et-radius-sm); font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid var(--et-line); background: var(--et-card); color: var(--et-body); }
.et-btn:hover { background: var(--et-bg); }
.et-btn-lime { background: var(--et-lime); border-color: var(--et-lime); color: #14311f; }
.et-btn-lime:hover { background: var(--et-lime-600); }
.et-btn-sm { padding: 7px 12px; font-size: 12.5px; }
.et-btn:disabled { opacity: .55; cursor: default; }

/* ── Status chips ─────────────────────────────────────────────────────── */
.et-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.et-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.et-chip.green { color: #15803d; background: #dcfce7; }
.et-chip.blue  { color: #1d4ed8; background: #dbeafe; }
.et-chip.amber { color: #b45309; background: #fef3c7; }
.et-chip.red   { color: #b91c1c; background: #fee2e2; }
.et-chip.grey  { color: #475569; background: #eef2f6; }

/* ── Tables ───────────────────────────────────────────────────────────── */
.et-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
.et-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.et-table th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--et-muted); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--et-line); }
.et-table td { padding: 13px 14px; border-bottom: 1px solid var(--et-line-soft); color: var(--et-ink); vertical-align: middle; }
.et-table tr:last-child td { border-bottom: 0; }
.et-table tr.et-sel td { background: var(--et-lime-050); }

/* ── Job card (reused across driver/dispatch/garage) ──────────────────── */
.et-jobcard { border: 1px solid var(--et-line); border-radius: var(--et-radius); padding: 14px; background: var(--et-card); }
.et-jobcard + .et-jobcard { margin-top: 10px; }
.et-route { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-body); }
.et-pin { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.et-pin.from { background: var(--et-lime); } .et-pin.to { background: var(--et-red); }

/* ── Section heads ────────────────────────────────────────────────────── */
/* Was a space-between flex row that could neither wrap nor shrink, so at 375px the
   heading plus its Refresh control (and, on the bookings view, a search field) ran to
   x=401 against a 375 client. Wrapping keeps every control reachable at its full label
   instead of hiding one; on desktop there is room and the row still reads as one line. */
.et-sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.et-sechead > * { min-width: 0; }
.et-sechead h2 { flex: 1 1 auto; }
.et-sechead h2 { font-size: 15px; font-weight: 800; color: var(--et-ink); margin: 0; }
.et-viewlink { font-size: 12.5px; font-weight: 700; color: var(--et-green-700); text-decoration: none; }

/* ── Map card ─────────────────────────────────────────────────────────── */
.et-mapcard { position: relative; border-radius: var(--et-radius); overflow: hidden; border: 1px solid var(--et-line); min-height: 220px; background: #eef2ee; }
.et-map { width: 100%; height: 100%; min-height: 220px; }

/* ── Loading / empty / error / permission states (§ required on every page) */
.et-skeleton { background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 37%, #eef1f4 63%); background-size: 400% 100%; animation: et-shimmer 1.4s ease infinite; border-radius: var(--et-radius-sm); }
@keyframes et-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.et-state { text-align: center; padding: 40px 24px; border: 1px dashed var(--et-line); border-radius: var(--et-radius); color: var(--et-muted); font-size: 13.5px; background: var(--et-card); }
.et-state b { display: block; color: var(--et-ink); font-size: 15px; font-weight: 800; margin-bottom: 5px; }
.et-state.error { border-color: #fecaca; background: #fff5f5; }
.et-state.error b { color: var(--et-red); }
.et-state.denied { border-color: #fde68a; background: #fffbeb; }

/* honest "not available yet" inline label for engines not built (vehicles/
   earnings/live-location) — never a fake value. */
.et-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--et-muted); }
.et-soon::before { content: "•"; color: var(--et-amber); }

/* ── Responsive: tablet collapses right rail; mobile drawer + stacked cards */
@media (max-width: 1080px) {
  .et-cols-3 { grid-template-columns: 1fr; }
  .et-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet: the sidebar becomes the 64px ICON RAIL ────────────────────────
   MEASURED, not guessed: .et-app computed `248px 1fr` at 1280, 1024 AND 768 —
   one structure for three very different devices — because the only nav
   breakpoint in this file was `max-width:760px`, which misses iPad portrait
   (768) by eight pixels. At 768 the desktop sidebar took 32.3% of the viewport
   and .et-menubtn was still display:none, so there was no way to reclaim it.

   This is the rail that app.css already runs for the garage shell at ≤900px
   ("the 900px icon rail (fine on a tablet)") — same 64px track, same
   centre-the-icon / drop-the-label treatment — not a new navigation system.
   Every destination stays reachable in one tap, which a drawer would cost two.

   Bounded at BOTH ends on purpose: ≥1100 is desktop and keeps the labelled
   sidebar; ≤760 keeps the drawer + hamburger this file already implements, and
   a lower bound is the only thing that stops the label-hiding rules leaking
   into the open drawer, where the labels must be visible.

   The labels are VISUALLY hidden, never display:none — an icon-only link with
   display:none on its text has no accessible name at all. */
@media (min-width: 761px) and (max-width: 1080px) {
  .et-app { grid-template-columns: 64px 1fr; }
  .et-side { padding: 16px 8px; align-items: center; }
  .et-logo { padding: 4px 0 14px; justify-content: center; width: 100%; }
  .et-logo img { height: auto; width: 100%; max-width: 46px; }
  .et-nav { width: 100%; }
  .et-nav a, .et-nav button { position: relative; justify-content: center; gap: 0; padding: 13px 0; }
  /* width:100% because .et-side centres its children in the rail — without it the
     support link shrinks to the 19px glyph and the tap target is narrower than the
     44px floor every other rail item meets. */
  .et-side-help { justify-content: center; padding: 13px 0; width: 100%; }
  /* The support glyph carries no width/height of its own — in the labelled sidebar it
     is sized by the leftover flex space, so in a centred 64px rail it measured 0×0 and
     the link became invisible AND untappable. Sized explicitly, exactly like .et-nav svg.
     (The desktop sidebar renders the same glyph at 99px for the same missing-intrinsic-
     size reason. That is pre-existing and NOT touched here — logged, not fixed.) */
  .et-side-help svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .et-nav a > span:not(.et-count),
  .et-nav button > span:not(.et-count),
  .et-side-help > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* The count is the one label that survives, as a corner badge — margin-left:auto
     is meaningless once the row is centred. */
  .et-nav .et-count { position: absolute; top: 3px; right: 4px; margin-left: 0; }
}

@media (max-width: 760px) {
  .et-app { grid-template-columns: 1fr; }
  .et-side { position: fixed; left: 0; top: 0; z-index: 60; width: 264px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .et-app.et-drawer-open .et-side { transform: translateX(0); }
  .et-app.et-drawer-open .et-scrim { display: block; }
  .et-top { padding: 12px 16px; } .et-content { padding: 18px 16px 90px; }
  .et-metrics { grid-template-columns: 1fr; }
  .et-cols-2 { grid-template-columns: 1fr; }
  .et-menubtn { display: grid !important; }
  .et-pagehead h1 { font-size: 24px; }
  /* The profile button rendered the FULL signed-in email and never shrank:
     .et-nm measured 162px, .et-avatar 249px, pushing .et-top-actions to right:499
     on a 375px viewport — 124px of horizontal scroll on EVERY business page, on
     every phone. The initials circle already carries the identity at this size,
     so the address is dropped rather than truncated to an ambiguous stub. */
  .et-top-actions { min-width: 0; gap: 8px; }
  .et-avatar { max-width: 100%; padding: 4px; }
  .et-avatar .et-nm { display: none; }
  /* tables become stacked cards on mobile */
  .et-table thead { display: none; }
  .et-table, .et-table tbody, .et-table tr, .et-table td { display: block; width: 100%; }
  .et-table tr { border: 1px solid var(--et-line); border-radius: var(--et-radius); margin-bottom: 10px; padding: 6px 4px; }
  .et-table td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; }
  .et-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--et-muted); text-transform: uppercase; letter-spacing: .04em; }
  .et-table td[data-label="Actions"] { white-space: normal !important; flex-wrap: wrap; }
  .et-table td[data-label="Actions"] > * { max-width: 100% !important; min-width: 0; }
  /* mobile bottom action bar */
  .et-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--et-card); border-top: 1px solid var(--et-line); }
  .et-bottombar .et-btn { flex: 1; }
}
.et-menubtn { display: none; width: 38px; height: 38px; border-radius: var(--et-radius-sm); border: 1px solid var(--et-line); background: var(--et-card); place-items: center; cursor: pointer; }

/* tiny phones: transport action buttons wrap instead of widening the page */
@media (max-width:360px){
  .et-btn{white-space:normal;max-width:100%;overflow-wrap:anywhere}
  .et-avatar{flex:none}
  .et-row,.et-head,.et-actions{flex-wrap:wrap;min-width:0}
}

/* phones: metric cards go 2-up and compact — three full-width stat cards were
   filling the entire first screen of Dispatch (visual pass 2026-09-02) */
@media (max-width:640px){
  .et-metrics{grid-template-columns:repeat(2,1fr);gap:12px}
  .et-metric{padding:14px}
  .et-metric .et-m-value{font-size:24px}
  .et-metric .et-m-ico{width:34px;height:34px}
}