/* ============================================================
   WM DMS — SHELL DESIGN TOKENS
   Locked rules (DESIGN.md, 2026-10-18):
   - Backgrounds: black or white neutral only.
   - Blue ONLY in buttons, icons, and accents. No gradients,
     no yellow, no blue-tinted modules.
   - Sharp corners on surfaces (0px radii); nav BUTTONS are
     rounded (user adjustment, 2026-10-18), nav icons use
     rounded stroke caps/joins, and the Dashboard stat cards
     are rounded like the user's reference mockup.
   - Only the ACTIVE nav item carries a background.
   - Theme: Dark is the base. Light applies when the user picks
     it in Settings (data-theme="light" on <html>); with no
     pick (System) the OS preference decides, as before.
   ============================================================ */
:root {
  color-scheme: dark;
  /* Dark theme (matches the approved mockups) */
  --bg: #0b0b0c;            /* app background — near black */
  --bg-sidebar: #101011;    /* sidebar panel */
  --bg-card: #111113;       /* stat card fill — a step above the page */
  --badge-pending-bg: #3f3f46;   /* PENDING badge — neutral gray */
  --badge-pending-text: #d4d4d8;
  --border: #26262a;        /* hairline dividers */
  --text: #f4f4f5;          /* primary text */
  --text-dim: #a3a3ab;      /* secondary text / inactive nav */
  --accent: #2e6be6;        /* WM blue — buttons, icons, accents */
  --accent-hover: #4d85f0;  /* brighter blue — hover / active edge */
  --nav-active-bg: #20509e; /* active nav item fill (flat, no gradient) */
  --on-accent: #ffffff;     /* text on blue */
  --logo-text: #f4f4f5;     /* sidebar logo wordmark — light on the dark sidebar */
  --star: #f0b429;          /* gold accent — On Break dot */

  --sidebar-w: 264px;
  --radius-nav: 8px;        /* rounded corners on nav buttons */
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Light theme — the same overrides apply two ways: when the
   user picks Light in Settings (data-theme="light"), and in
   System mode (no data-theme) when the OS prefers light.
   Blue tokens stay identical in both themes. Keep the two
   blocks in sync. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-sidebar: #f4f4f5;
  --bg-card: #fafafa;
  --badge-pending-bg: #e4e4e7;
  --badge-pending-text: #3f3f46;
  --border: #e2e2e6;
  --text: #101012;
  --text-dim: #5b5b63;
  --logo-text: #18365c;   /* sidebar logo wordmark — navy, as in the reference artwork */
  --star: #c98f04;        /* darker gold so the star reads on white */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #ffffff;
    --bg-sidebar: #f4f4f5;
    --bg-card: #fafafa;
    --badge-pending-bg: #e4e4e7;
    --badge-pending-text: #3f3f46;
    --border: #e2e2e6;
    --text: #101012;
    --text-dim: #5b5b63;
    --logo-text: #18365c;   /* sidebar logo wordmark — navy, as in the reference artwork */
    --star: #c98f04;        /* darker gold so the star reads on white */
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------- App frame ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar content";
  height: 100dvh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  overflow-y: auto;
}

/* Sidebar brand: the inline-SVG WM DMS logo at the head of the sidebar.
   Compact lockup like the user's reference — fixed small width,
   aspect ratio kept by the viewBox, aligned with the nav items. */
.sidebar-brand { padding: 0 12px; margin-bottom: 18px; }

.sidebar-brand svg { display: block; width: 148px; height: auto; }

.sidebar-brand .brand-text {
  font-family: var(--font-ui);
  fill: var(--logo-text);
}

/* Logo separation gaps, in the sidebar's own background color:
   .brand-ol outlines the arrows so they lift off the green
   cargo panel (the white gaps in the original artwork), and
   .brand-gap is the halo that cuts the wheel arches out of
   the chassis. Both follow the theme with the sidebar. */
.sidebar-brand .brand-ol {
  stroke: var(--bg-sidebar);
  stroke-width: 5;
  stroke-linejoin: round;
}

.sidebar-brand .brand-gap { fill: var(--bg-sidebar); }

.nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 12px;
  margin-bottom: 14px;
}

.nav { display: flex; flex-direction: column; gap: 4px; }

/* Settings block: pinned to the bottom corner of the sidebar */
.sidebar-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 12px;
  background: transparent;   /* inactive items stay FLAT — locked rule */
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-nav);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav-item svg {
  width: 21px;
  height: 21px;
  flex: none;
  stroke: currentColor;
}

.nav-item:hover { color: var(--text); }
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The ONLY nav state with a background */
.nav-item.is-active {
  background: var(--nav-active-bg);
  border-left-color: var(--accent-hover);
  color: var(--on-accent);
  font-weight: 600;
}

/* ---------- Content area (pages mount here later) ---------- */
.content {
  grid-area: content;
  padding: 34px 38px;
  overflow-y: auto;
  min-width: 0;
}

.page-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ---------- Pages ---------- */
.page { margin-top: 28px; }
.page[hidden] { display: none; }

/* ---------- Dashboard ---------- */
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 22px;
}

.dash-sub {
  font-size: 15px;
  color: var(--text-dim);
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.dash-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-dim);
}

.dash-btn:hover { border-color: var(--text-dim); }
.dash-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ---------- Filter dropdown menu ----------
   Shared by the Loads and Drivers toolbar dropdowns. */
.filter-wrap { position: relative; }

.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 216px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

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

.filter-menu-label {
  padding: 7px 10px 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.filter-option:hover { background: rgba(127, 127, 135, 0.16); color: var(--text); }
.filter-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.filter-option .check {
  width: 15px;
  flex: none;
  color: var(--accent);
  font-weight: 700;
  visibility: hidden;
}

.filter-option[aria-checked="true"] { color: var(--text); font-weight: 600; }
.filter-option[aria-checked="true"] .check { visibility: visible; }

.filter-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-dim);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px 18px;
}

.stat-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.stat-ico {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--accent);
}

.stat-ico-dollar {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 15px;
  font-weight: 600;
}

.stat-dots {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 2px;
}

.stat-value {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-delta {
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.delta-arrow { color: var(--accent); font-weight: 700; }
.delta-good { color: #35b26a; font-weight: 600; }
.delta-bad { color: #e5534b; font-weight: 600; }

.stat-link {
  margin-top: 13px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.stat-link .u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stat-link:hover { color: var(--accent); }
.stat-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
}

.chart-panel { margin-top: 20px; }

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-meta {
  font-size: 13.5px;
  color: var(--text-dim);
  white-space: nowrap;
  padding-top: 4px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  background: var(--accent);
}

.swatch-last { background: #6d6d75; }
.swatch-reefer { background: #77777f; }
.swatch-flatbed { background: #45454c; }

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
}

.chart-svg text {
  fill: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12.5px;
}

.chart-grid { stroke: var(--border); stroke-width: 1; }
.bar-this { fill: var(--accent); }
.bar-last { fill: #6d6d75; }
.chart-svg rect:hover { filter: brightness(1.3); }

.donut-panel { margin-top: 20px; }

/* ---------- Active Loads table + details modal (Dashboard) ----------
   Added 2026-10-19 from the user's reference: an "Active Loads"
   panel on the Dashboard whose rows open the "Active Load &
   Driver Details" modal. The modal reuses the shell language —
   rounded panels, pill status badges, WM blue for the primary
   action — and the Routes map runtime for the mini route map.
   Rows carry no gray wash at rest or on hover (the same rule as
   the driver rows and route cards): the translucent fill shows
   only while the row is being pressed. */
.active-loads-panel { margin-top: 20px; }

/* The table never pushes past the panel: when the columns do
   not fit, the wrapper scrolls sideways inside the panel
   instead of the table spilling out of the page frame. */
.active-loads-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.active-loads-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.active-loads-table th {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
}

.active-loads-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 15px;
}

.active-loads-table tbody tr:last-child td { border-bottom: 0; }

.active-load-row { cursor: pointer; }
.active-load-row:active { background: rgba(127, 127, 135, 0.14); }
.active-load-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cell-load-id {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Modal --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.55);
}

.modal-backdrop[hidden] { display: none !important; }

.modal {
  width: min(880px, 100%);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover { color: var(--text); background: rgba(127, 127, 135, 0.16); }
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 16px;
}

.modal-h {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.modal-h:first-child { margin-top: 0; }

.modal-driver {
  display: flex;
  align-items: center;
  gap: 13px;
}

.modal-driver-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.modal-driver-unit {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-dim);
}

.modal-kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 14.5px;
}

.modal-kv dt { color: var(--text-dim); }
.modal-kv dd { margin: 0; font-weight: 600; text-align: right; }

.modal-dl { margin: 0; }
.modal-dl-top { margin-top: 14px; }

.modal-duty-pill { margin-top: 6px; }

.modal-lane {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 16.5px;
  font-weight: 700;
  flex-wrap: wrap;
}

.modal-lane .arrow { color: var(--text-dim); font-weight: 400; }

.modal-parties {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}

.modal-loadline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-load-id {
  font-family: var(--font-mono);
  font-size: 16.5px;
  font-weight: 600;
}

.modal-map {
  height: 196px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.modal-map-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-size: 14.5px;
  color: var(--text-dim);
  text-align: center;
}

.modal-map-fallback[hidden] { display: none; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

a.modal-action { text-decoration: none; }

/* --- Form modals (Add Load / Create Route) ---
   Same backdrop and card as the details modal above, narrower:
   they only carry their form fields. */
.modal-form { width: min(620px, 100%); }
.modal-form .form-grid { margin-top: 16px; }

.cell-broker {
  font-weight: 600;
  white-space: nowrap;
}

.cell-city { white-space: nowrap; }

.cell-rate {
  font-weight: 700;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 5px 11px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.badge:hover { filter: brightness(1.15); }
.badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.empty-row td {
  color: var(--text-dim);
  font-size: 15px;
}

.badge-verified { background: var(--accent); color: var(--on-accent); }
.badge-pending { background: var(--badge-pending-bg); color: var(--badge-pending-text); }

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.donut-svg {
  width: 148px;
  height: 148px;
  flex: none;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
}

/* ---------- Loads ---------- */
.loads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.loads-sub {
  font-size: 16px;
  color: var(--text-dim);
}

.loads-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 10px 12px 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.search-ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--text-dim);
}

.loads-search input {
  flex: 1;
  min-width: 120px;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

.loads-search input::placeholder { color: var(--text-dim); }

.loads-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--badge-pending-bg);
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.loads-select svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

.loads-select:hover { filter: brightness(1.12); }
.loads-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* A dropdown carrying a non-default choice gets the blue ring —
   the same "filter is on" signal as the Dashboard's Filtrar. */
.loads-select.is-active { box-shadow: 0 0 0 1.5px var(--accent); }

.loads-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.loads-table th {
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 16px 8px 14px;
  border-bottom: 1px solid var(--border);
}

.loads-table td {
  padding: 18px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 15px;
}

.loads-table .cell-broker { font-size: 17px; }

.cell-route {
  line-height: 1.5;
  white-space: nowrap;
}

.cell-equip { white-space: nowrap; }

/* On Loads the status badges are labels, not toggles */
.loads-table .badge { cursor: default; }
.loads-table .badge:hover { filter: none; }

/* ---------- Routes ---------- */
/* Route Planning & Optimization (2026-10-19), built from the
   user's reference: header row with + Create Route and
   Optimizar, then three columns — the Active Routes list
   (search, All / Active / Delayed tabs, one card per route),
   the live map with the truck chips, route lines and numbered
   stops, and the Route Details panel for the selected route.
   Shell colors only: black panels, WM blue reserved for the
   primary actions, the selected route and its line. */
.routes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.routes-sub {
  font-size: 16px;
  color: var(--text-dim);
}

.routes-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Result line for Optimizar / Create Route — appears under the
   header row only when there is something to report. */
.routes-note {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
}

.routes-note[hidden] { display: none; }

.routes-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
}

/* --- Left column: Active Routes --- */
.routes-search { margin-top: 16px; }

.routes-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.routes-tab {
  padding: 7px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.routes-tab:hover { color: var(--text); border-color: var(--text-dim); }
.routes-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.routes-tab.is-active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-bg);
  color: var(--on-accent);
}

.route-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.route-card {
  display: block;
  width: 100%;
  padding: 15px 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.route-card:last-child { border-bottom: 0; }

/* Same rule as the driver rows: no gray wash at rest or on
   hover — it shows only while the card is being pressed.
   The selected card is marked by the blue ring alone, the
   same "active" signal as the filter dropdowns. */
.route-card:active { background: rgba(127, 127, 135, 0.14); }
.route-card.is-selected {
  box-shadow: 0 0 0 1.5px var(--accent);
}

.route-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.route-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.route-card-name {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-card-stats {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.route-card-driver {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.avatar-sm { width: 34px; height: 34px; font-size: 12.5px; }

.route-card-driver-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.route-card-driver-unit {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* On Schedule rides on a green dot; Delayed reuses the red
   dot-delayed from the Drivers history statuses. Pending keeps
   the neutral gray dot. */
.status-dot.dot-schedule { background: #2fbf71; }

/* --- Center column: the map --- */
.map-panel {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.routes-map {
  flex: 1;
  width: 100%;
  min-height: 560px;
}

.routes-map-fallback { padding: 22px; }
.routes-map-fallback[hidden] { display: none; }

.routes-fallback-note {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.routes-fallback-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.routes-fallback-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.routes-fallback-list li:last-child { border-bottom: 0; }

/* Truck chip rendered by the map for each route's truck: an
   outlined pill with the truck glyph and the unit number. The
   outline carries the route's status color; the selected
   route's chip fills in. */
.truck-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 6px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.truck-chip svg { width: 17px; height: 17px; fill: var(--accent); }
.truck-chip.chip-delayed { border-color: #e5534b; }
.truck-chip.chip-delayed svg { fill: #e5534b; }
.truck-chip.chip-pending { border-color: #71717a; }
.truck-chip.chip-pending svg { fill: #a3a3ab; }

.truck-chip.is-sel { background: var(--accent); color: var(--on-accent); }
.truck-chip.is-sel svg { fill: var(--on-accent); }
.truck-chip.chip-delayed.is-sel { background: #e5534b; }
.truck-chip.chip-pending.is-sel { background: #52525b; }

/* --- Right column: Route Details --- */
.route-detail-name {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Timeline: origin and destination dots filled blue, stop dots
   hollow, joined by a hairline rail. */
.route-tl {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  position: relative;
}

.route-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border);
}

.tl-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 7px 0;
}

.tl-dot {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2.5px solid var(--accent);
  z-index: 1;
}

.tl-item.tl-end .tl-dot { background: var(--accent); }

.tl-body { display: block; min-width: 0; }

.tl-kind {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tl-place {
  display: block;
  margin-top: 1px;
  font-size: 15.5px;
  font-weight: 600;
}

.tl-time {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.route-stats {
  margin: 14px 0 0;
  border-top: 1px solid var(--border);
}

.route-stat {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.route-stat dt { color: var(--text-dim); }
.route-stat dd { margin: 0; font-weight: 600; text-align: right; }

.dispatch-info { margin-top: 14px; }
.dispatch-info[hidden] { display: none; }
.dispatch-info .route-stats { margin-top: 0; border-top: 0; }
.dispatch-info .route-stat:last-child { border-bottom: 0; }

.schedule-editor { margin-top: 16px; }
.schedule-editor[hidden] { display: none; }
.schedule-editor .form-field { margin-bottom: 10px; }

.route-actions-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.route-action {
  justify-content: center;
  width: 100%;
  padding: 11px 16px;
  font-size: 15px;
}

/* Routes on medium widths: list and details side by side on the
   first row, the map full width underneath. */
@media (max-width: 1240px) {
  .routes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .route-detail-panel { grid-column: 2; grid-row: 1; }
  .map-panel { grid-column: 1 / -1; grid-row: 2; }
  .routes-map { min-height: 430px; }
}

/* ---------- Drivers ---------- */
/* The old Carriers page rebuilt as driver profiles (2026-10-19),
   from the user's Driver Management reference: count line + Add
   Driver on the header row, then the driver list (search +
   Status / License Type filters) on the left and the selected
   driver's profile — hours of service remaining and load
   history — on the right. */
.drivers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.drivers-sub {
  font-size: 16px;
  color: var(--text-dim);
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: var(--on-accent);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.add-btn:hover { background: var(--accent-hover); }
.add-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-compact { padding: 10px 18px; font-size: 15px; }

/* Add-driver form: a panel that opens under the header row */
.driver-form { margin-top: 20px; }
.driver-form[hidden] { display: none; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

.form-field { display: flex; flex-direction: column; gap: 7px; }

.form-field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.form-field input,
.form-field select {
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.form-field input:focus,
.form-field select:focus { border-color: var(--accent); }
.form-field input::placeholder { color: var(--text-dim); }

.form-error {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #e5534b;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.drivers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}

/* List toolbar: search field + the shared dropdown buttons,
   sitting on a hairline inside the list panel. */
.drivers-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.drivers-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 168px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.drivers-search svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: var(--text-dim);
}

.drivers-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}

.drivers-search input::placeholder { color: var(--text-dim); }

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

.driver-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.driver-row:last-child { border-bottom: 0; }
/* No gray wash at rest, on hover, or on the selected row —
   the translucent fill sat over the list like fog. The wash
   shows only while the row is being pressed; the selected
   row is marked by a blue left edge instead of a fill. */
.driver-row:active { background: rgba(127, 127, 135, 0.16); }
.driver-row.is-selected { box-shadow: inset 3px 0 0 var(--accent); }
.driver-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Initials avatar — the app ships no driver photos, so the
   profile carries initials in the neutral badge tone. */
.avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-pending-bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar-lg { width: 84px; height: 84px; font-size: 26px; }

.driver-row-main { flex: 1; min-width: 0; }

.driver-row-name {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.driver-row-id {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Status pill: neutral fill, the meaning rides on the dot —
   the same green as the LIVE dot, gold for a break, red for a
   delay, blue for a load in transit. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--badge-pending-bg);
  color: var(--badge-pending-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--text-dim);
}

.dot-duty, .dot-delivered { background: #2fbf71; }
.dot-break { background: var(--star); }
.dot-delayed { background: #e5534b; }
.dot-transit { background: var(--accent); }

.drivers-empty {
  margin: 0;
  padding: 18px 8px 6px;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* ---------- Driver profile ---------- */
.profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-head-main { flex: 1; min-width: 0; }

.profile-name {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.profile-meta {
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.profile-status { align-self: flex-start; }

.profile-section { margin-top: 26px; }

.profile-section-title {
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 700;
}

.hos-row { margin-bottom: 15px; }
.hos-row:last-child { margin-bottom: 0; }

.hos-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 14px;
}

.hos-label { color: var(--text-dim); font-weight: 500; }
.hos-value { font-weight: 700; white-space: nowrap; }

.hos-track {
  height: 8px;
  border-radius: 999px;
  background: var(--badge-pending-bg);
  overflow: hidden;
}

.hos-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.hist-row:last-child { border-bottom: 0; padding-bottom: 2px; }

.hist-main { flex: 1; min-width: 0; }

.hist-load { font-size: 15px; font-weight: 600; }

.hist-lane {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-side { flex: none; text-align: right; }

.hist-eta {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.hist-empty { margin: 0; color: var(--text-dim); font-size: 14.5px; }

/* Drivers: the large PANELS keep sharp corners (0px); the
   small controls are NOT squared — the status pills stay
   pills, and the buttons, search field, dropdowns and form
   fields keep the same rounding as the rest of the app.
   Scoped to the Drivers section; avatars and status dots
   stay round — they are circles, not corners. */
[data-page-section="Drivers"] .panel {
  border-radius: 0;
}

/* Small print under a page's panels (the Settings footer) */
.page-foot {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ---------- Settings ---------- */
/* Same panel + form language as the rest of the app: card panels
   with hairline borders, form fields like the Drivers form, and
   the WM blue reserved for the primary button and the switches. */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 18px;
}

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

.saved-note {
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: #35b26a;
}

/* Appearance: the Dark / Light / System segmented control.
   The active option carries the same blue fill as the active
   nav item; the choice drives data-theme on <html> (System =
   no attribute, the OS decides). */
.theme-switch {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.theme-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.theme-opt svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
}

.theme-opt:hover { color: var(--text); }
.theme-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.theme-opt[aria-checked="true"] {
  background: var(--nav-active-bg);
  color: var(--on-accent);
}

.theme-opt[aria-checked="true"]:hover { color: var(--on-accent); }

/* Switch rows: name + what it does on the left, the switch on
   the right; hairline dividers between rows, like the tables. */
.set-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

.set-row:last-child { border-bottom: 0; padding-bottom: 2px; }

.set-text { flex: 1; min-width: 0; }

.set-name {
  font-size: 15.5px;
  font-weight: 600;
}

.set-desc {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.set-value-mono {
  flex: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
}

.switch {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  background: var(--badge-pending-bg);
  border: 1px solid var(--border);
  cursor: pointer;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: left 0.15s ease;
}

.switch[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

.switch[aria-checked="true"]::after {
  left: 22px;
  background: var(--on-accent);
}

.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .switch::after { transition: none; }
}

/* ---------- Laptop widths: keep the tables inside the content ----------
   On a laptop viewport (above the phone layout, below a wide
   desktop) the nowrap cells of the data tables add up wider than
   the content area: the table pokes out of its panel, the last
   column is cut off, and the page grows a sideways scrollbar. In
   this range the content and panels give back some padding, the
   table type steps down slightly, and the long text cells (names,
   routes, lanes) may wrap — the short token cells (phone, time,
   rate, badges) stay on one line, so every column fits with no
   horizontal scroll. The Drivers columns also narrow a step. */
@media (min-width: 761px) and (max-width: 1400px) {
  .content { padding: 30px 26px; }
  .panel { padding: 20px 16px; }

  .loads-table th { padding: 14px 6px; font-size: 14px; }

  .loads-table td { padding: 16px 6px; font-size: 14.5px; }

  .loads-table .cell-broker { font-size: 15.5px; white-space: normal; }

  .cell-route { white-space: normal; }

  .drivers-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .hist-lane { white-space: normal; }

  .active-loads-table th,
  .active-loads-table td { padding-left: 6px; padding-right: 6px; }
  .active-loads-table .cell-city { white-space: normal; }
}

/* ---------- Mobile: sidebar becomes a top nav strip ---------- */
@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar"
      "content";
  }

  .sidebar {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    overflow: visible;
  }

  .nav-label { display: none; }

  /* No room for the brand lockup on the phone top strip */
  .sidebar-brand { display: none; }

  .nav { flex: 1; flex-direction: row; gap: 2px; }

  /* On the top strip, Settings sits at the far end instead */
  .sidebar-bottom {
    margin-top: 0;
    margin-left: 2px;
    padding-top: 0;
    border-top: 0;
  }

  .sidebar-bottom .nav-item { flex: 0 0 auto; }

  .nav-item {
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    padding: 9px 4px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    font-size: 12.5px;
    text-align: center;
    justify-content: center;
  }

  .nav-item.is-active { border-bottom-color: var(--accent-hover); }

  .nav-item svg { width: 20px; height: 20px; }

  .content { padding: 24px 18px; }
  .page-title { font-size: 30px; }

  /* On the phone the filter buttons sit at the left edge, so
     their menus anchor to the left side instead of the right —
     otherwise they would run off the left of the screen. */
  .filter-menu { right: auto; left: 0; }

  /* Dashboard on phone: stat cards go 2-up and the panels
     stack (no sideways scroll). */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 14px; }
  .stat-label { font-size: 13.5px; }
  .stat-value { margin-top: 10px; font-size: 27px; }
  .stat-delta { font-size: 12px; }
  .stat-link { font-size: 13px; }

  .panel { padding: 16px; }
  .panel-title { font-size: 17px; }
  .panel-meta { white-space: normal; }

  .cell-broker { font-size: 15.5px; white-space: normal; }
  .cell-city { white-space: normal; }

  .donut-wrap { gap: 18px; }
  .donut-svg { width: 124px; height: 124px; }

  /* Active Loads: stack the modal columns on the phone and make
     the table one block per row (no sideways scroll). */
  .modal { padding: 18px 16px; }
  .modal-title { font-size: 19px; }
  .modal-cols { grid-template-columns: 1fr; gap: 6px; }
  .modal-map { height: 180px; }
  .modal-actions { justify-content: stretch; }
  .modal-actions .dash-btn,
  .modal-actions .add-btn { flex: 1; justify-content: center; }

  .active-loads-table thead { display: none; }
  .active-loads-table tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .active-loads-table td {
    display: block;
    padding: 2px 0;
    border-bottom: 0;
    font-size: 14px;
  }
  .cell-load-id { font-size: 15px; }

  /* Loads on phone: the search bar wraps (field first, the two
     dropdowns under it) and the table stacks one block per row. */
  .loads-search { flex-wrap: wrap; padding: 12px; }
  .loads-search input { flex: 1 1 200px; font-size: 15px; }
  .loads-select { font-size: 13.5px; padding: 8px 12px; }

  .loads-table thead { display: none; }
  .loads-table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .loads-table td {
    display: block;
    padding: 2px 0;
    border-bottom: 0;
    font-size: 14px;
  }
  .loads-table .cell-broker { font-size: 15.5px; }
  .cell-route { white-space: normal; }

  /* Drivers on phone: smaller add button, the form goes
     single-column, and the list and profile stack. */
  .add-btn { padding: 10px 16px; font-size: 15px; }
  .form-grid { grid-template-columns: 1fr; }

  .drivers-grid { grid-template-columns: 1fr; }
  .profile-head { flex-wrap: wrap; }
  .profile-name { font-size: 22px; }
  .hist-lane { white-space: normal; }

  /* Routes on phone: the three columns stack in DOM order —
     list, map, details — undoing the medium-width placement,
     and the header actions wrap under the count line. */
  .routes-grid { grid-template-columns: 1fr; }
  .route-detail-panel { grid-column: auto; grid-row: auto; }
  .map-panel { grid-column: auto; grid-row: auto; }
  .routes-map { min-height: 320px; }

  /* Settings on phone: the two columns stack and the company
     form goes single-column. */
  .settings-grid { grid-template-columns: 1fr; }
  .settings-form-grid { grid-template-columns: 1fr; }
  .set-name { font-size: 15px; }
}

/* ---------- Chat ---------- */
/* Three columns from the user's reference (2026-10-20): the
   chat list with Despachadores / Conductores tabs, the open
   conversation, and the driver's trip details with the mini
   map and quick actions. Same panels, blue, and sharp corners
   as the rest of the app; only the message bubbles are round,
   like the reference. The grid takes the viewport height left
   under the page title so the list and the thread scroll
   inside their columns. */
.chat-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
  height: calc(100dvh - 142px);
  min-height: 440px;
}

.chat-grid.chat-side-off { grid-template-columns: 330px minmax(0, 1fr) 0px; }

.chat-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* Left column: header, tabs, list */
.chat-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-search { flex: 1 1 auto; }

.chat-new-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.chat-new-btn svg { width: 18px; height: 18px; stroke: var(--on-accent); }
.chat-new-btn:hover { background: var(--accent-hover); }
.chat-new-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-new-menu { min-width: 230px; }

.chat-tabs { margin-top: 16px; }

.chat-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* With no rows the list gives up its height so the empty
   note sits under the tabs, not at the column's foot. */
.chat-list.is-empty { flex: none; }

.chat-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-row:last-child { border-bottom: 0; }
.chat-row.is-selected { box-shadow: inset 3px 0 0 var(--accent); }
.chat-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.chat-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-row-name { font-size: 15.5px; font-weight: 600; }
.chat-row-sub { font-size: 13px; color: var(--text-dim); }

.chat-row-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
}

.chat-row-preview {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center column: conversation */
.chat-main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.chat-main-empty[hidden],
.chat-conv[hidden],
#chatSideBody[hidden] { display: none; }

.chat-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-conv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.chat-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-head-name { font-size: 16.5px; font-weight: 600; }
.chat-head-sub { font-size: 13.5px; color: var(--text-dim); }

.chat-icon-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.chat-icon-btn svg { width: 18px; height: 18px; stroke: var(--text-dim); }
.chat-icon-btn:hover { border-color: var(--text-dim); }
.chat-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-thread-empty { margin: auto; text-align: center; }

/* Only outgoing bubbles exist: the thread holds the messages
   written here, and the app fabricates no replies. */
.chat-msg {
  align-self: flex-end;
  max-width: 78%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chat-bubble {
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.chat-msg-time {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.chat-composer {
  display: flex;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.chat-composer input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}

.chat-composer input::placeholder { color: var(--text-dim); }
.chat-composer input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chat-send-btn {
  width: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.chat-send-btn svg { width: 18px; height: 18px; stroke: var(--on-accent); }
.chat-send-btn:hover { background: var(--accent-hover); }
.chat-send-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Right column: profile, trip details, mini map, actions */
.chat-col-side { overflow-y: auto; }

.chat-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.chat-profile-name { margin-top: 10px; font-size: 19px; font-weight: 600; }
.chat-profile-sub { font-size: 14px; color: var(--text-dim); }

.chat-map {
  height: 180px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.chat-map-mount { height: 100%; }

.chat-map-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}

.chat-map-fallback[hidden] { display: none; }

.chat-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-action {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

/* Chat on medium widths: list and conversation side by side,
   the details panel full width underneath. */
@media (max-width: 1240px) {
  .chat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
  .chat-grid.chat-side-off { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chat-col-list, .chat-col-main { min-height: 480px; }
  .chat-col-side { grid-column: 1 / -1; overflow-y: visible; }
}

/* Chat on phone: the three columns stack — list, conversation,
   details — and each keeps an internal scroll area. */
@media (max-width: 760px) {
  .chat-grid { grid-template-columns: 1fr; height: auto; }
  .chat-col-list { min-height: 0; }
  .chat-list { max-height: 320px; }
  .chat-col-main { min-height: 430px; }
}