/* ============================================================================
   Track360 — Design System  (external, fully themeable)

   HOW TO RE-THEME
   ---------------
   Everything visual is driven by the CSS custom properties in :root below.
   • Change the brand colour ............ edit  --t-accent  (4 presets listed inline)
   • Switch the whole palette ........... edit the Surfaces / Text / Border groups
   • Recolour the map route / markers ... edit the "Map palette" group
       (these tokens are also read by the page JS via getComputedStyle, so the
        legend, the polyline on the map and the markers all stay in sync.)
   • Denser layout ...................... add class  "t-compact"  to the .t-app root

   The page markup only references these classes + tokens, never hard-coded
   colours, so a single edit here re-skins every page that links this file.
   ============================================================================ */

:root {
  /* ---- Brand accent (swap to re-theme) ------------------------------------ */
  --t-accent:        #ffcc00;   /* presets: #ffcc00 yellow · #0e7c86 teal · #1366d6 blue · #4f46e5 indigo */
  --t-accent-ink:    #18181b;   /* text / icon sitting on top of the accent */
  --t-accent-wash:   #fffdf2;   /* faint accent tint for active rows */

  /* ---- Surfaces & structure ----------------------------------------------- */
  --t-app-bg:        #f3f3f5;
  --t-surface:       #ffffff;   /* rail, cards */
  --t-surface-2:     #fafafa;   /* inset card */
  --t-surface-3:     #f0f0f2;   /* chips / count pills */
  --t-surface-4:     #ececef;
  --t-header-bg:     #0e0e11;
  --t-map-bg:        #1b1b1e;

  /* ---- Borders ------------------------------------------------------------ */
  --t-border:        #e4e4e7;
  --t-border-soft:   #eeeef0;
  --t-border-card:   #e7e7ea;
  --t-border-faint:  #f0f0f2;
  --t-header-border: #2c2c31;

  /* ---- Text --------------------------------------------------------------- */
  --t-text:          #18181b;
  --t-text-2:        #3f3f46;
  --t-text-3:        #52525b;
  --t-text-muted:    #71717a;
  --t-text-faint:    #a1a1aa;
  --t-label:         #808285;   /* uppercase section labels */
  --t-header-text:   #e4e4e7;
  --t-header-muted:  #9a9aa1;

  /* ---- Map palette (shared with JS — keep names in sync with the page) ----- */
  --t-speed-fast:     #ea580c;  /* 60+ km/h     */
  --t-speed-moderate: #d99a1c;  /* 40–59 km/h   */
  --t-speed-slow:     #16a34a;  /* below 40 km/h*/
  --t-speed-stopped:  #9ca3af;  /* not moving / engine off */
  --t-in-transit:     #8b5cf6;  /* moving · ignition off (carried on boat/tow) */
  --t-marker-start:   #2563eb;
  --t-marker-end:     #dc2626;
  --t-offline:        #d4920a;

  /* ---- Type & shape ------------------------------------------------------- */
  --t-font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --t-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-gap:        12px;
  --t-radius:     10px;
  --t-radius-sm:  9px;
  --t-radius-lg:  13px;
  --t-header-h:   58px;
  --t-rail-w:     374px;
  --t-shadow-pop: 0 8px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.04);
}

/* Compact density toggle */
.t-compact { --t-gap: 7px; }

/* ----------------------------------------------------------------------------
   Reset
   ---------------------------------------------------------------------------- */
/* Page-level: kill the default body margin so the header sits flush to the
   viewport edges (otherwise an 8px gap exposes the page background at the top). */
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--t-header-bg); overflow: hidden; }

/* Component-level (scoped to the themed shell so it never leaks onto un-migrated pages) */
.t-app *, .t-app *::before, .t-app *::after { margin: 0; padding: 0; box-sizing: border-box; }

.t-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--t-app-bg);
  color: var(--t-text);
  font-family: var(--t-font-sans);
  -webkit-font-smoothing: antialiased;
}

.t-mono { font-family: var(--t-font-mono); }

/* =============================== HEADER / NAV =============================== */
.t-header {
  height: var(--t-header-h);
  flex: none;
  background: var(--t-header-bg);
  display: flex;
  align-items: stretch;
  padding: 0 22px;
  gap: 30px;
}
.t-wordmark {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding-right: 6px; text-decoration: none;
}
.t-wordmark-text {
  font-weight: 700; font-size: 19px; line-height: 1;
  letter-spacing: -0.02em; color: #fff;
}
.t-wordmark-text span { color: var(--t-accent); }
.t-wordmark-bar { height: 3px; width: 100%; background: var(--t-accent); border-radius: 2px; }

.t-nav { display: flex; align-items: stretch; gap: 2px; }
.t-nav-tab {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 0 13px;
  font-size: 13.5px; font-weight: 500; color: var(--t-header-muted);
  cursor: pointer; text-decoration: none; transition: color .15s;
  white-space: nowrap;
}
.t-nav-tab svg { width: 17px; height: 17px; flex: none; opacity: .95; transition: color .15s, opacity .15s; }
.t-nav-tab:hover { color: #d4d4d8; }
.t-nav-tab:hover svg { opacity: 1; }
.t-nav-tab.is-active { color: #fff; font-weight: 600; }
.t-nav-tab.is-active svg { color: var(--t-accent); opacity: 1; }
/* Active "you are here" — soft accent pill (inset so it doesn't touch the bar edges) */
.t-nav-tab.is-active::before {
  content: ''; position: absolute; inset: 11px 3px; z-index: -1; border-radius: 8px;
  background: color-mix(in srgb, var(--t-accent) 15%, transparent);
}
/* Visual break between daily-ops links and the admin group */
.t-nav-sep { width: 1px; height: 20px; align-self: center; margin: 0 9px; background: var(--t-header-border); flex: none; }

.t-header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.t-iconbtn {
  position: relative; width: 34px; height: 34px; display: flex;
  align-items: center; justify-content: center; border-radius: 8px;
  color: #cfcfd4; cursor: pointer; background: none; border: none;
  transition: background .15s, color .15s;
}
.t-iconbtn:hover { background: rgba(255,255,255,.06); color: #fff; }
.t-iconbtn .t-dot-badge {
  position: absolute; top: 4px; right: 5px; min-width: 7px; height: 7px;
  border-radius: 9px; background: var(--t-accent); border: 1.5px solid var(--t-header-bg);
}
.t-iconbtn .t-count-badge {
  position: absolute; top: -2px; right: -3px; background: var(--t-marker-end);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 10px; padding: 2px 5px; border: 1.5px solid var(--t-header-bg);
}
.t-header-divider { width: 1px; height: 22px; background: var(--t-header-border); }
.t-userpill {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--t-header-border); border-radius: 20px;
  font-size: 12.5px; font-weight: 500; color: var(--t-header-text);
}
.t-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--t-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--t-accent-ink); flex: none;
}
.t-logout {
  font-size: 12.5px; font-weight: 500; color: var(--t-header-muted);
  cursor: pointer; background: none; border: none; font-family: inherit;
  transition: color .15s;
}
.t-logout:hover { color: #fff; }

/* notif dropdown (light card) */
.t-popover {
  position: absolute; top: 44px; right: 0; width: 340px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: var(--t-shadow-pop);
  z-index: 100; overflow: hidden; color: var(--t-text);
}
.t-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--t-border-soft);
}
.t-popover-title { font-size: 13px; font-weight: 700; color: var(--t-text); }
.t-link-btn {
  font-size: 11.5px; font-weight: 600; color: var(--t-text-3);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.t-popover-list { max-height: 360px; overflow-y: auto; }
.t-notif-row {
  padding: 10px 14px; border-bottom: 1px solid var(--t-border-faint);
  display: flex; gap: 10px; align-items: flex-start;
}
.t-notif-row.is-unread { background: var(--t-accent-wash); }
.t-notif-row .nr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 4px; }
.t-notif-row .nr-title { font-size: 12px; font-weight: 600; color: var(--t-text); }
.t-notif-row .nr-sub   { font-size: 11px; color: var(--t-text-muted); margin-top: 1px; }
.t-notif-row .nr-time  { font-size: 11px; color: var(--t-text-faint); margin-top: 1px; }
.t-popover-empty { padding: 24px; text-align: center; color: var(--t-text-faint); font-size: 13px; }

/* admin dropdown (Vehicles / API Access / Users) */
.t-nav-admin { position: relative; display: flex; align-items: stretch; }
.t-nav-admin-btn { background: none; border: none; font-family: inherit; }
.t-nav-caret { margin-left: 1px; opacity: .7; transition: transform .18s ease, opacity .15s; }
.t-nav-admin-btn:hover .t-nav-caret { opacity: 1; }
.t-nav-caret.is-open { transform: rotate(180deg); }
.t-nav-admin-btn.is-open { color: #fff; }

.t-nav-menu {
  position: absolute; top: calc(100% - 7px); left: 0; min-width: 236px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: var(--t-shadow-pop);
  z-index: 100; padding: 5px; color: var(--t-text);
}
.t-nav-menu-head {
  padding: 7px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-text-faint);
}
.t-nav-menu-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: var(--t-radius-sm); text-decoration: none; color: var(--t-text);
  transition: background .13s;
}
.t-nav-menu-item:hover { background: var(--t-surface-3); }
.t-nav-menu-item.is-active { background: var(--t-accent-wash); }
.t-nav-menu-item svg { width: 18px; height: 18px; flex: none; color: var(--t-text-muted); }
.t-nav-menu-item.is-active svg { color: var(--t-accent); }
.t-nav-menu-item span { display: flex; flex-direction: column; min-width: 0; }
.t-nav-menu-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.t-nav-menu-sub { font-size: 11px; color: var(--t-text-muted); line-height: 1.3; }

/* logout modal */
.t-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.t-modal {
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); padding: 24px; max-width: 360px; width: 90%;
  box-shadow: var(--t-shadow-pop); color: var(--t-text);
}
.t-modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.t-modal p  { color: var(--t-text-muted); font-size: 13px; margin-bottom: 20px; }
.t-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* =============================== BODY / RAIL =============================== */
.t-body { flex: 1; display: flex; min-height: 0; }

.t-rail {
  width: var(--t-rail-w); flex: none; background: var(--t-surface);
  border-right: 1px solid var(--t-border); display: flex; flex-direction: column;
  min-height: 0;
}
.t-rail-fixed { padding: 16px 18px 14px; border-bottom: 1px solid var(--t-border-soft); }
/* Form view fills the rail and scrolls on its own when it's the only view shown. */
.t-rail-form { flex: 1; overflow-y: auto; min-height: 0; border-bottom: none; }
.t-rail-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.t-rail-scroll::-webkit-scrollbar { width: 6px; }
.t-rail-scroll::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }

.t-section { padding: 16px 18px 6px; }
.t-section + .t-section { padding-top: 14px; }
.t-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em;
  color: var(--t-label); text-transform: uppercase;
}
.t-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* ---- Trip query block ---- */
.t-query-card {
  border: 1px solid var(--t-border-card); border-radius: var(--t-radius);
  background: var(--t-surface-2); padding: 11px 13px;
}
.t-query-plate { font-family: var(--t-font-mono); font-size: 14px; font-weight: 600; color: var(--t-text); letter-spacing: .01em; }
.t-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--t-text-3);
  background: var(--t-surface-4); border: 1px solid #e0e0e3; padding: 2px 6px; border-radius: 5px;
  text-transform: uppercase;
}
.t-query-row { display: flex; align-items: center; gap: 7px; color: var(--t-text-muted); }
.t-edit-link {
  font-size: 11.5px; font-weight: 600; color: var(--t-text-3);
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  background: none; border: none; font-family: inherit;
}

/* ---- Form controls ---- */
.t-field-label { font-size: 11px; color: var(--t-text-muted); margin: 8px 0 4px; }
.t-input, .t-select {
  width: 100%; background: var(--t-surface); border: 1px solid var(--t-border-card);
  color: var(--t-text); padding: 9px 11px; border-radius: var(--t-radius-sm);
  font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s;
}
.t-input:focus, .t-select:focus { border-color: var(--t-accent); }

/* ---- Searchable combobox (vehicle picker) ---- */
.t-combo { position: relative; }
.t-combo-input { width: 100%; padding-right: 28px; }
.t-combo-caret {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 10px; line-height: 1; color: var(--t-text-faint); cursor: pointer; user-select: none;
}
.t-combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: var(--t-shadow-pop);
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.t-combo-opt {
  padding: 7px 10px; border-radius: var(--t-radius-sm); cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
}
.t-combo-opt.is-hl { background: var(--t-surface-3); }
.t-combo-opt.is-active { background: color-mix(in srgb, var(--t-accent) 15%, transparent); }
.t-combo-opt-main { font-size: 13px; font-weight: 600; color: var(--t-text); }
.t-combo-opt-sub  { font-size: 11px; color: var(--t-text-muted); }
.t-combo-empty { padding: 16px; text-align: center; color: var(--t-text-faint); font-size: 12.5px; }

/* ---- Multi-select vehicle picker (search + checkboxes + chips) ---- */
.t-vp { display: flex; flex-direction: column; gap: 6px; }
.t-vp-search { margin-bottom: 0; }
.t-vp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.t-vp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--t-accent-wash); border: 1px solid color-mix(in srgb, var(--t-accent) 40%, var(--t-border));
  color: var(--t-text); font-size: 11.5px; font-weight: 600;
  padding: 2px 4px 2px 8px; border-radius: 6px; max-width: 100%;
}
.t-vp-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-vp-chip button {
  background: none; border: none; cursor: pointer; font-size: 10px; line-height: 1;
  color: var(--t-text-faint); padding: 2px 3px; border-radius: 4px; flex: none;
}
.t-vp-chip button:hover { color: var(--t-text); background: var(--t-surface-3); }
.t-vp-actions { display: flex; align-items: center; gap: 12px; min-height: 16px; }
.t-vp-list {
  border: 1px solid var(--t-border-card); border-radius: var(--t-radius-sm);
  max-height: 168px; overflow-y: auto; background: var(--t-surface);
}
.t-vp-row {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 10px; border-bottom: 1px solid var(--t-border-faint);
}
.t-vp-row:last-child { border-bottom: none; }
.t-vp-row:hover { background: var(--t-surface-2); }
.t-vp-row.is-sel { background: var(--t-accent-wash); }
.t-vp-row input { width: auto; flex: none; cursor: pointer; }
.t-vp-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.t-vp-row-main strong { font-size: 12.5px; font-weight: 600; color: var(--t-text); }
.t-vp-row-sub { font-size: 11px; color: var(--t-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-vp-row-type {
  font-size: 10px; font-weight: 600; text-transform: capitalize; color: var(--t-text-3);
  background: var(--t-surface-3); padding: 2px 7px; border-radius: 5px; flex: none;
}
.t-vp-empty { padding: 16px; text-align: center; color: var(--t-text-faint); font-size: 12.5px; }
.t-vp-summary { font-size: 11px; color: var(--t-text-muted); }
.t-vp-summary strong { color: var(--t-text-3); }

.t-row { display: flex; gap: 8px; }
.t-row > * { flex: 1; }
.t-warn {
  font-size: 11px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 8px; padding: 7px 9px; margin-top: 8px;
}

/* ---- Buttons ---- */
.t-btn {
  width: 100%; height: 42px; border: none; border-radius: var(--t-radius-sm);
  font-family: var(--t-font-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.t-btn-accent { background: var(--t-accent); color: var(--t-accent-ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.t-btn-accent:hover { filter: brightness(.96); }
.t-btn-dark { background: var(--t-text); color: #fff; }
.t-btn-dark:hover { filter: brightness(1.25); }
.t-btn:disabled { opacity: .55; cursor: not-allowed; }
.t-btn-block { margin-top: 12px; }

/* ---- Summary stat grid ---- */
.t-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-gap); }
.t-stat { border: 1px solid var(--t-border-card); border-radius: var(--t-radius); padding: 11px 12px; background: var(--t-surface); }
.t-stat-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--t-label); margin-bottom: 6px; text-transform: uppercase; }
.t-stat-val { font-family: var(--t-font-mono); font-size: 21px; font-weight: 600; color: var(--t-text); line-height: 1; }
.t-stat-unit { font-size: 12px; color: var(--t-text-faint); font-weight: 500; }
.t-pip { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---- Trip details ---- */
.t-detail-box { border: 1px solid var(--t-border-soft); border-radius: var(--t-radius); overflow: hidden; }
.t-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-bottom: 1px solid var(--t-border-faint); }
.t-detail-row:last-child { border-bottom: none; }
.t-detail-key { font-size: 12.5px; color: var(--t-text-3); display: flex; align-items: center; gap: 6px; }
.t-detail-val { font-family: var(--t-font-mono); font-size: 12.5px; font-weight: 500; color: var(--t-text); }

/* ---- Legend ---- */
.t-legend { display: flex; flex-direction: column; gap: 8px; }
.t-legend-item { display: flex; align-items: center; gap: 9px; }
.t-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.t-legend-line { width: 22px; height: 4px; border-radius: 3px; flex: none; }
.t-legend-car { width: 22px; height: 22px; flex: none; object-fit: contain; }
.t-legend-text { font-size: 12.5px; color: var(--t-text-2); flex: 1; }
.t-legend-text b { font-weight: 600; color: var(--t-text); }
.t-legend-toggle { font-size: 11px; font-weight: 600; color: var(--t-text-3); margin-left: auto; cursor: pointer; }

/* ---- Trip points list ---- */
.t-points-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.t-count-pill { font-family: var(--t-font-mono); font-size: 10.5px; font-weight: 600; color: var(--t-text-3); background: var(--t-surface-3); padding: 1px 7px; border-radius: 20px; }
.t-points { display: flex; flex-direction: column; }
.t-point { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.t-point:hover { background: var(--t-surface-2); }
.t-point.is-active { background: var(--t-accent-wash); box-shadow: inset 3px 0 0 var(--t-accent); }
.t-point-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.t-point-dot.is-offline { background: var(--t-surface) !important; border: 2px solid var(--t-offline); }
.t-point-time { font-family: var(--t-font-mono); font-size: 12.5px; color: var(--t-text-2); }
.t-point.is-active .t-point-time { color: var(--t-text); font-weight: 500; }
.t-point-speed { margin-left: auto; font-family: var(--t-font-mono); font-size: 12px; color: var(--t-text-faint); }

.t-empty { padding: 40px 24px; text-align: center; color: var(--t-text-faint); font-size: 13px; line-height: 1.6; }

/* =============================== MAP =============================== */
.t-map { flex: 1; position: relative; min-width: 0; background: var(--t-map-bg); overflow: hidden; }

/* basemap segmented control */
.t-basemap {
  position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; gap: 3px; padding: 3px;
  border-radius: var(--t-radius-sm); background: rgba(20,20,23,.82);
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px);
}
.t-basemap-btn {
  padding: 6px 13px; border-radius: 6px; border: none; background: none;
  color: #c8c8cd; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.t-basemap-btn:hover { color: #fff; }
.t-basemap-btn.is-active { background: var(--t-accent); color: var(--t-accent-ink); font-weight: 600; }

/* (collapsible map legend shell defined once, below — shared by Live Map's
   Vehicle Status panel and Trip History's colour key) */

/* zoom + fullscreen */
.t-mapctl {
  position: absolute; top: 64px; right: 16px; z-index: 5; display: flex; flex-direction: column;
  border-radius: var(--t-radius-sm); overflow: hidden; background: rgba(20,20,23,.82);
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px);
}
.t-mapctl-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: #e4e4e7; cursor: pointer; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.08); transition: background .15s;
}
.t-mapctl-btn:last-child { border-bottom: none; }
.t-mapctl-btn:hover { background: rgba(255,255,255,.07); }
.t-mapctl-btn.is-active { background: var(--t-accent); color: var(--t-accent-ink); }
.t-mapctl-btn.is-active:hover { background: var(--t-accent); filter: brightness(.95); }

/* ---- Find nearest vehicles ---- */
.t-nearest {
  position: absolute; top: 64px; left: 16px; z-index: 6; width: 280px; max-width: calc(100% - 32px);
  background: rgba(20,20,23,.86); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--t-radius); backdrop-filter: blur(10px); overflow: hidden;
}
.t-nearest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.t-nearest-title { font-size: 12px; font-weight: 600; color: #f4f4f5; }
.t-nearest-place { font-size: 10.5px; color: #9a9aa1; margin-top: 2px; line-height: 1.3; }
.t-nearest-x { background: none; border: none; color: #9a9aa1; cursor: pointer; font-size: 14px; line-height: 1; flex: none; }
.t-nearest-x:hover { color: #fff; }
.t-nearest-hint { padding: 14px; font-size: 12px; color: #c8c8cd; line-height: 1.45; }
.t-nearest-list { max-height: 320px; overflow-y: auto; }
.t-nearest-list::-webkit-scrollbar { width: 6px; }
.t-nearest-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.t-nearest-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .12s; }
.t-nearest-row:hover { background: rgba(255,255,255,.06); }
.t-nearest-rank { font-family: var(--t-font-mono); font-size: 11px; font-weight: 600; color: #9a9aa1; width: 14px; text-align: center; flex: none; }
.t-nearest-body { flex: 1; min-width: 0; }
.t-nearest-plate { font-family: var(--t-font-mono); font-size: 12.5px; font-weight: 600; color: #f4f4f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-nearest-unit { font-size: 10.5px; color: #9a9aa1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-nearest-dist { text-align: right; flex: none; }
.t-nearest-km { font-family: var(--t-font-mono); font-size: 12.5px; font-weight: 600; color: #fff; }
.t-nearest-dir { font-size: 10px; color: #9a9aa1; }
.t-nearest-empty { padding: 14px; font-size: 12px; color: #9a9aa1; }

/* ---- Playback bar ---- */
.t-playback {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-radius: var(--t-radius-lg); background: var(--t-surface);
  box-shadow: var(--t-shadow-pop); min-width: 520px; max-width: 92%;
}
.t-pb-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--t-text-3); cursor: pointer; background: none; border: none;
  transition: background .15s;
}
.t-pb-btn:hover { background: var(--t-surface-3); }
.t-pb-play {
  width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--t-text); color: #fff; cursor: pointer; border: none;
}
.t-pb-play:hover { filter: brightness(1.3); }
.t-pb-speed {
  background: var(--t-surface-2); border: 1px solid var(--t-border-card); color: var(--t-text);
  padding: 7px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: var(--t-font-mono);
  cursor: pointer; outline: none;
}
.t-pb-slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 5px;
  background: var(--t-border); border-radius: 3px; outline: none; cursor: pointer;
}
.t-pb-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  background: var(--t-text); border-radius: 50%; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.t-pb-slider::-moz-range-thumb {
  width: 15px; height: 15px; background: var(--t-text); border-radius: 50%;
  cursor: pointer; border: 2px solid #fff;
}
.t-pb-info { min-width: 132px; text-align: right; }
.t-pb-info strong { display: block; font-family: var(--t-font-mono); font-size: 13px; font-weight: 600; color: var(--t-text); }
.t-pb-info span { font-family: var(--t-font-mono); font-size: 11px; color: var(--t-text-faint); }

/* scale bar + attribution */
.t-scale { position: absolute; bottom: 16px; left: 16px; z-index: 4; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.t-scale-bar { display: flex; align-items: flex-end; gap: 6px; color: rgba(255,255,255,.55); }
.t-scale-bar .bar { width: 64px; height: 6px; border: 1.5px solid rgba(255,255,255,.5); border-top: none; }
.t-scale-bar span { font-family: var(--t-font-mono); font-size: 10.5px; margin-bottom: -2px; }
.t-attr { font-size: 10px; color: rgba(255,255,255,.32); letter-spacing: .02em; }

/* ---- Map markers (built in JS, themed here) ---- */
.t-marker-start, .t-marker-end {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.t-marker-start { background: var(--t-marker-start); }
.t-marker-end   { background: var(--t-marker-end); }
.t-marker-offline {
  width: 11px; height: 11px; border-radius: 50%; background: var(--t-map-bg);
  border: 2.5px solid var(--t-offline); cursor: pointer;
}
.t-marker-car {
  width: 28px; height: 28px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.t-marker-car::before {
  content: ''; position: absolute; inset: 0; background: var(--t-accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12);
  animation: t-car-pulse 2s ease-in-out infinite;
}
.t-marker-car svg { position: relative; width: 14px; height: 14px; fill: var(--t-accent-ink); transform-origin: center; }
@keyframes t-car-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,0,0,.10); }
  50%     { box-shadow: 0 0 0 9px rgba(0,0,0,.06); }
}

/* Mapbox popups → light theme */
.t-app .mapboxgl-popup-content {
  background: var(--t-surface); color: var(--t-text); border-radius: 8px;
  font-family: var(--t-font-sans); font-size: 12px; box-shadow: var(--t-shadow-pop);
}
.t-app .mapboxgl-popup-tip { border-top-color: var(--t-surface); border-bottom-color: var(--t-surface); }
.t-app .mapboxgl-popup-content strong { color: var(--t-text); }
.t-app .mapboxgl-ctrl-scale { background: rgba(20,20,23,.6); color: #fff; border-color: rgba(255,255,255,.4); }

/* ============================== LIVE MAP ==============================
   The live dashboard reuses the shell (.t-app, .t-header, .t-rail, .t-map)
   and adds: a realtime vehicle list, on-map stat pills + status legend,
   and a slide-in detail panel. Map-floating chrome is dark-translucent to
   stay legible over the basemap (matches .t-basemap / .t-mapctl).
   ===================================================================== */

/* ---- Header live-status cluster (rendered when $liveStatus is set) ---- */
.t-livestatus { display: flex; align-items: center; gap: 8px; }
.t-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-speed-slow); animation: t-pulse 2s infinite; flex: none; }
@keyframes t-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.t-status-text { font-size: 12px; color: var(--t-header-muted); white-space: nowrap; }
.t-header-pill {
  font-size: 11px; font-weight: 600; color: var(--t-header-text); white-space: nowrap;
  background: rgba(255,255,255,.06); border: 1px solid var(--t-header-border);
  padding: 3px 10px; border-radius: 20px;
}

/* ---- Sidebar: header / search / filters ---- */
.t-rail-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--t-border-soft); display: flex; align-items: center; justify-content: space-between; }
.t-rail-title { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; color: var(--t-label); text-transform: uppercase; }
.t-search-wrap { padding: 12px 18px; border-bottom: 1px solid var(--t-border-soft); }
.t-search {
  width: 100%; background: var(--t-surface-2); border: 1px solid var(--t-border-card);
  color: var(--t-text); padding: 9px 12px; border-radius: var(--t-radius-sm);
  font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s;
}
.t-search:focus { border-color: var(--t-accent); }
.t-search::placeholder { color: var(--t-text-faint); }
.t-filters { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--t-border-soft); }
.t-filter {
  flex: 1; padding: 6px 0; border-radius: 7px; border: 1px solid var(--t-border-card);
  background: var(--t-surface); color: var(--t-text-muted); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.t-filter:hover { background: var(--t-surface-2); }
.t-filter.is-active { background: var(--t-accent-wash); border-color: var(--t-accent); color: var(--t-text); }

/* ---- Vehicle list ---- */
.t-vlist { flex: 1; overflow-y: auto; min-height: 0; }
.t-vlist::-webkit-scrollbar { width: 6px; }
.t-vlist::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }
.t-vcard { padding: 12px 18px; border-bottom: 1px solid var(--t-border-soft); cursor: pointer; display: flex; align-items: flex-start; gap: 10px; transition: background .12s; }
.t-vcard:hover { background: var(--t-surface-2); }
.t-vcard.is-selected { background: var(--t-accent-wash); box-shadow: inset 3px 0 0 var(--t-accent); }
.t-vindicator { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.t-vbody { flex: 1; min-width: 0; }
.t-vplate { font-family: var(--t-font-mono); font-size: 13.5px; font-weight: 600; color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-vunit { font-size: 11px; color: var(--t-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-vmeta { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.t-vtime { font-family: var(--t-font-mono); font-size: 10px; color: var(--t-text-faint); margin-top: 5px; }
.t-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px; letter-spacing: .02em; white-space: nowrap; }
.t-chip-on    { background: #e7f6ee; color: #15803d; }
.t-chip-off   { background: #fdeaea; color: #b91c1c; }
.t-chip-speed { background: var(--t-surface-3); color: var(--t-text-3); font-family: var(--t-font-mono); }
.t-chip-buf   { background: #fdf2e3; color: #b45309; }
.t-chip-sleep { background: var(--t-surface-3); color: var(--t-text-3); }

/* ---- Watch star (add vehicle to map) ---- */
.t-vstar {
  flex: none; align-self: center; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; border-radius: 7px;
  color: var(--t-text-faint); transition: color .15s, background .15s;
}
.t-vstar:hover { background: var(--t-surface-3); color: var(--t-text-3); }
.t-vstar.is-on, .t-vstar.is-on:hover { color: var(--t-accent); }

/* ---- "Show on map" mode toggle ---- */
.t-maprow { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--t-border-soft); }
.t-maprow-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--t-label); text-transform: uppercase; }
.t-maptoggle { margin-left: auto; display: flex; gap: 4px; background: var(--t-surface-3); padding: 2px; border-radius: 8px; }
.t-mt-btn {
  display: inline-flex; align-items: center; padding: 4px 10px; border: none; border-radius: 6px;
  background: none; color: var(--t-text-muted); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s;
}
.t-mt-btn:hover { color: var(--t-text-3); }
.t-mt-btn.is-active { background: var(--t-surface); color: var(--t-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---- On-map stat pills ---- */
.t-stats { position: absolute; top: 16px; left: 16px; z-index: 4; display: flex; gap: 8px; pointer-events: none; }
.t-stat-pill {
  padding: 7px 14px; font-size: 12px; color: #c8c8cd;
  background: rgba(20,20,23,.82); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--t-radius); backdrop-filter: blur(8px);
}
.t-stat-pill strong { display: block; font-family: var(--t-font-mono); font-size: 17px; font-weight: 600; line-height: 1.15; color: #fff; }

/* ---- Collapsible on-map legend (shared shell) ----
   Used by the Live Map's Vehicle Status panel (.is-bl) and Trip History's
   speed colour key (.is-br). Collapses to a compact chip; expands to a 224px body. */
.t-maplegend {
  position: absolute; z-index: 5; overflow: hidden;
  background: rgba(20,20,23,.82); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--t-radius); backdrop-filter: blur(8px);
}
.t-maplegend.is-bl { bottom: 16px; left: 16px; }   /* Live Map */
.t-maplegend.is-br { bottom: 16px; right: 16px; }   /* Trip History — clears the centred playback bar */
.t-maplegend.is-open { width: 224px; }
.t-maplegend-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  color: #ededec; font-size: 12px; font-weight: 600; font-family: inherit;
  letter-spacing: .02em; white-space: nowrap;
}
.t-maplegend-head:hover { color: #fff; }
.t-maplegend-ico { color: var(--t-accent); flex: none; }
.t-maplegend-caret { margin-left: auto; flex: none; transition: transform .18s; opacity: .8; }
.t-maplegend.is-open .t-maplegend-caret { transform: rotate(180deg); }
.t-maplegend-body { padding: 2px 13px 12px; }
/* Trip History colour-key rows — recoloured for the dark surface */
.t-maplegend .t-legend { gap: 7px; }
.t-maplegend .t-legend-text { color: #c8c8cd; font-size: 12px; }
.t-maplegend .t-legend-text b { color: #fff; }
.t-maplegend .t-legend-toggle { color: #8d8d96; }
.t-maplegend .t-legend-item:hover .t-legend-toggle { color: var(--t-accent); }
.t-ml-title { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #9a9aa1; text-transform: uppercase; margin-bottom: 8px; }
.t-ml-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.t-ml-row img { width: 22px; height: 22px; flex: none; }
.t-ml-label { font-size: 12px; font-weight: 600; color: #e4e4e7; }
.t-ml-sub { font-size: 10px; color: #9a9aa1; }
.t-ml-count { margin-left: auto; font-family: var(--t-font-mono); font-size: 13px; font-weight: 600; color: #fff; }

/* ---- Slide-in detail panel (light, mirrors the rail) ---- */
.t-detail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 330px; z-index: 6;
  background: var(--t-surface); border-left: 1px solid var(--t-border);
  box-shadow: -8px 0 28px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; padding: 20px;
}
.t-detail.is-open { transform: translateX(0); }
.t-dp-close { float: right; background: none; border: none; color: var(--t-text-faint); font-size: 18px; line-height: 1; cursor: pointer; }
.t-dp-close:hover { color: var(--t-text); }
.t-dp-plate { font-family: var(--t-font-mono); font-size: 22px; font-weight: 600; color: var(--t-text); margin-top: 8px; }
.t-dp-unit { font-size: 13px; color: var(--t-text-muted); margin-top: 2px; margin-bottom: 16px; }
.t-dp-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.t-btn-ghost { background: var(--t-surface-3); color: var(--t-text-3); }
.t-btn-ghost:hover { filter: brightness(.97); }

/* ---- Share live location (detail panel) ---- */
.t-btn-share { background: var(--t-surface-3); color: var(--t-text); border: 1px solid var(--t-border-card); }
.t-btn-share:hover { background: var(--t-surface-2); }
.t-share { margin-top: 8px; }
.t-share-box { border: 1px solid var(--t-border-card); border-radius: var(--t-radius); padding: 12px; background: var(--t-surface-2); }
.t-share-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--t-text); margin-bottom: 10px; }
.t-share-x { background: none; border: none; color: var(--t-text-faint); cursor: pointer; font-size: 14px; line-height: 1; }
.t-share-x:hover { color: var(--t-text); }
.t-share-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--t-label); margin-bottom: 6px; }
.t-share-durations { display: flex; gap: 6px; }
.t-share-durations button { flex: 1; padding: 7px 0; border-radius: 7px; border: 1px solid var(--t-border-card); background: var(--t-surface); color: var(--t-text-muted); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s, color .15s; }
.t-share-durations button:hover { background: var(--t-surface-2); }
.t-share-durations button.is-active { background: var(--t-accent-wash); border-color: var(--t-accent); color: var(--t-text); }
.t-share-url { font-family: var(--t-font-mono); font-size: 11.5px; color: var(--t-text-2); background: var(--t-surface); border: 1px solid var(--t-border-card); border-radius: 7px; padding: 9px 10px; word-break: break-all; margin-bottom: 10px; }
.t-share-actions { display: flex; gap: 8px; }
.t-share-actions .t-btn { height: 38px; font-size: 12.5px; }
.t-share-new { width: 100%; margin-top: 8px; background: none; border: none; color: var(--t-text-muted); font-size: 11.5px; cursor: pointer; font-family: inherit; text-decoration: underline; }
.t-share-new:hover { color: var(--t-text); }

/* ============================== APP PAGES ==============================
   Shared chrome for the CRUD / report pages (Reports, Maintenance,
   Geofences, Vehicles, API Access, Users). Built from the same tokens, so
   editing :root re-themes these too.
   ===================================================================== */

/* content shell below the header */
.t-content { flex: 1; overflow-y: auto; min-height: 0; padding: 26px 30px; }
.t-content::-webkit-scrollbar { width: 9px; }
.t-content::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 5px; }
.t-container { max-width: 1180px; margin: 0 auto; }
.t-container-narrow { max-width: 640px; margin: 0 auto; }

/* page header */
.t-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.t-page-title { font-size: 21px; font-weight: 700; color: var(--t-text); letter-spacing: -0.01em; }
.t-page-sub { font-size: 13px; color: var(--t-text-muted); margin-top: 3px; }
.t-page-actions { display: flex; align-items: center; gap: 9px; }

/* tabs */
.t-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--t-border); margin-bottom: 20px; }
.t-tab { padding: 10px 15px; font-size: 13px; font-weight: 600; color: var(--t-text-muted); cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.t-tab:hover { color: var(--t-text-2); }
.t-tab.is-active { color: var(--t-text); border-bottom-color: var(--t-accent); }

/* cards */
.t-card { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); }
.t-card-pad { padding: 18px 20px; }
.t-card-head { padding: 15px 20px; border-bottom: 1px solid var(--t-border-soft); display: flex; align-items: center; justify-content: space-between; }
.t-card-title { font-size: 14px; font-weight: 700; color: var(--t-text); }

/* metric tiles */
.t-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--t-gap); margin-bottom: 22px; }

/* tables */
.t-table-wrap { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); overflow: hidden; }
.t-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.t-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-label); padding: 12px 16px; border-bottom: 1px solid var(--t-border); white-space: nowrap; background: var(--t-surface-2); }
.t-table td { padding: 13px 16px; border-bottom: 1px solid var(--t-border-soft); color: var(--t-text-2); vertical-align: middle; }
.t-table tbody tr:last-child td { border-bottom: none; }
.t-table tbody tr:hover td { background: var(--t-surface-2); }
.t-table .t-td-strong { color: var(--t-text); font-weight: 600; }
.t-table .t-td-mono { font-family: var(--t-font-mono); }
.t-th-sort { color: var(--t-label); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.t-th-sort:hover { color: var(--t-text-2); }

/* tags / status badges */
.t-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.t-tag-green  { background: #e7f6ee; color: #15803d; }
.t-tag-red    { background: #fdeaea; color: #b91c1c; }
.t-tag-amber  { background: #fdf2e3; color: #b45309; }
.t-tag-blue   { background: #e6effd; color: #1d4ed8; }
.t-tag-gray   { background: var(--t-surface-3); color: var(--t-text-3); }
.t-tag-accent { background: var(--t-accent-wash); color: #92710a; border: 1px solid var(--t-accent); }

/* forms */
.t-field { margin-bottom: 15px; }
.t-field > label { display: block; font-size: 12px; font-weight: 600; color: var(--t-text-3); margin-bottom: 6px; }
.t-input.is-error, .t-select.is-error { border-color: var(--t-marker-end); }
.t-error { color: #b91c1c; font-size: 11.5px; margin-top: 5px; }
.t-hint { color: var(--t-text-faint); font-size: 11.5px; margin-top: 5px; }
textarea.t-input { resize: vertical; min-height: 84px; line-height: 1.5; font-family: inherit; }

/* button sizes / variants for page actions */
.t-btn-sm { width: auto; height: auto; padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.t-btn-auto { width: auto; }
.t-btn-danger { background: #fdeaea; color: #b91c1c; }
.t-btn-danger:hover { filter: brightness(.97); }
.t-btn-outline { background: var(--t-surface); border: 1px solid var(--t-border-card); color: var(--t-text-3); }
.t-btn-outline:hover { background: var(--t-surface-2); }

/* structured dialog (head/body/foot) — extends .t-modal */
.t-modal.is-flush { padding: 0; max-width: 520px; }
.t-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--t-border-soft); display: flex; align-items: center; justify-content: space-between; }
.t-modal-head h3 { font-size: 15px; font-weight: 700; color: var(--t-text); }
.t-modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.t-modal-foot { padding: 14px 20px; border-top: 1px solid var(--t-border-soft); display: flex; gap: 8px; justify-content: flex-end; }

/* info / help icon button */
.t-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--t-text-faint); background: none;
  color: var(--t-text-faint); font-size: 11px; font-weight: 700;
  font-style: italic; line-height: 1; cursor: pointer; padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
  transition: color .12s, border-color .12s;
}
.t-info-btn:hover { color: var(--t-accent); border-color: var(--t-accent); }

/* help modal — explanation rows */
.t-help-lead { font-size: 13px; color: var(--t-text-muted); line-height: 1.55; margin: 0 0 16px; }
.t-help-group { margin-bottom: 16px; }
.t-help-group:last-child { margin-bottom: 0; }
.t-help-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t-text-3); margin: 0 0 8px; }
.t-help-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; }
.t-help-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 4px; }
.t-help-row b { font-size: 12.5px; font-weight: 700; color: var(--t-text); }
.t-help-row span { font-size: 12.5px; color: var(--t-text-muted); }
.t-help-row .t-help-how { display: block; margin-top: 2px; font-size: 11.5px; color: var(--t-text-3); }
.t-help-row .t-help-how b { font-size: 11.5px; color: var(--t-text-muted); }
.t-help-note { background: var(--t-surface-3); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; color: var(--t-text-muted); line-height: 1.55; }
.t-help-note b { color: var(--t-text); }
.t-help-caveat { font-size: 11.5px; font-style: italic; color: var(--t-text-3); margin: -3px 0 9px; line-height: 1.5; }

/* misc helpers */
.t-link { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.t-link:hover { text-decoration: underline; }
.t-link-muted { color: var(--t-text-3); text-decoration: none; }
.t-link-muted:hover { color: var(--t-text); }
.t-divider-h { height: 1px; background: var(--t-border-soft); margin: 18px 0; }
.t-flash { padding: 11px 15px; border-radius: var(--t-radius-sm); font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.t-flash-ok { background: #e7f6ee; color: #15803d; border: 1px solid #bbe6cd; }
.t-flash-err { background: #fdeaea; color: #b91c1c; border: 1px solid #f6c9c9; }
.t-empty-card { background: var(--t-surface); border: 1px dashed var(--t-border-card); border-radius: var(--t-radius); padding: 48px 24px; text-align: center; color: var(--t-text-faint); font-size: 13px; }

/* ============================================================
   Executive Dashboard
   ============================================================ */

/* Roomier rhythm than the default 12px gap — scoped to .t-dash so other
   pages keep the compact spacing. .t-card has no padding of its own. */
.t-dash { --t-gap: 18px; }
.t-content.t-dash { padding: 30px 34px; }
.t-dash .t-card { padding: 20px 22px; }
.t-dash .t-page-head { margin-bottom: 22px; }
.t-dash .t-kpi-grid,
.t-dash .t-dash-section,
.t-dash .t-dash-cols { margin-bottom: 18px; }
.t-dash .t-card .t-dash-cols { margin-bottom: 0; }   /* inner mini-chart row */
.t-dash .t-card:last-child { margin-bottom: 0; }

/* Segmented period toggle */
.t-seg { display: inline-flex; background: var(--t-surface-3); border-radius: var(--t-radius-sm); padding: 3px; gap: 2px; }
.t-seg button {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--t-text-muted);
  padding: 6px 13px; border-radius: 7px; transition: background .15s, color .15s;
}
.t-seg button.is-active { background: var(--t-surface); color: var(--t-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* KPI strip */
.t-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--t-gap); margin-bottom: var(--t-gap); }
@media (max-width: 1100px) { .t-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .t-kpi-grid { grid-template-columns: 1fr; } }
.t-kpi {
  background: var(--t-surface); border: 1px solid var(--t-border-card);
  border-radius: var(--t-radius); padding: 15px 16px; display: flex; flex-direction: column; gap: 7px;
}
.t-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-text-muted); }
.t-kpi-label svg { color: var(--t-text-faint); }
.t-kpi-val { font-family: var(--t-font-mono); font-size: 30px; font-weight: 600; color: var(--t-text); line-height: 1; }
.t-kpi-unit { font-size: 14px; color: var(--t-text-faint); font-weight: 500; margin-left: 3px; }
.t-kpi-foot { font-size: 11.5px; color: var(--t-text-muted); }
.t-kpi-flag.is-on { border-color: color-mix(in srgb, #ef4444 40%, var(--t-border-card)); background: color-mix(in srgb, #ef4444 5%, var(--t-surface)); }
.t-kpi-flag.is-on .t-kpi-val { color: #dc2626; }
.t-crit { color: #dc2626; font-weight: 700; }

.t-trend { font-weight: 700; }
.t-trend.up-good { color: #16a34a; }
.t-trend.up-bad  { color: #dc2626; }
.t-trend.flat    { color: var(--t-text-faint); }

/* Live status segmented bar */
.t-statusbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--t-surface-3); margin-top: 2px; }
.t-statusseg { height: 100%; }
.t-statuslegend { display: flex; flex-wrap: wrap; gap: 9px; font-size: 10.5px; color: var(--t-text-muted); font-weight: 600; }
.t-statuslegend span { display: inline-flex; align-items: center; gap: 4px; }

/* Section headers */
.t-dash-section { margin-bottom: var(--t-gap); }
.t-dash-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.t-dash-h h3 { font-size: 15px; font-weight: 700; color: var(--t-text); margin: 0; }
.t-dash-sub { font-size: 11.5px; color: var(--t-text-faint); }

/* Action center */
.t-allclear { display: flex; align-items: center; gap: 10px; padding: 18px; color: #16a34a; font-size: 13px; font-weight: 600; background: #f0fdf4; border-radius: var(--t-radius-sm); }
.t-action-list { display: flex; flex-direction: column; gap: 8px; }
.t-action { border: 1px solid var(--t-border-card); border-left-width: 4px; border-radius: var(--t-radius-sm); overflow: hidden; }
.t-action.sev-danger { border-left-color: #ef4444; }
.t-action.sev-warn   { border-left-color: #eab308; }
.t-action.sev-info   { border-left-color: #3b82f6; }
.t-action-head { display: flex; align-items: center; gap: 13px; padding: 12px 15px; cursor: pointer; transition: background .12s; }
.t-action-head:hover { background: var(--t-surface-2); }
.t-action-count {
  flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--t-font-mono); font-size: 16px; font-weight: 700;
}
.sev-danger .t-action-count { background: #fee2e2; color: #dc2626; }
.sev-warn   .t-action-count { background: #fef3c7; color: #b45309; }
.sev-info   .t-action-count { background: #dbeafe; color: #2563eb; }
.t-action-text { flex: 1; min-width: 0; }
.t-action-title { font-size: 13.5px; font-weight: 700; color: var(--t-text); }
.t-action-hint { font-size: 11.5px; color: var(--t-text-muted); margin-top: 1px; }
.t-action-chev { flex: none; font-size: 18px; color: var(--t-text-faint); font-weight: 600; width: 18px; text-align: center; }
.t-action-vehicles { border-top: 1px solid var(--t-border-faint); background: var(--t-surface-2); }
.t-action-veh {
  display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 47px; text-decoration: none;
  border-bottom: 1px solid var(--t-border-faint); transition: background .12s;
}
.t-action-veh:last-child { border-bottom: none; }
.t-action-veh:hover { background: var(--t-surface); }
.t-action-plate { font-family: var(--t-font-mono); font-size: 12.5px; font-weight: 600; color: var(--t-text); min-width: 84px; }
.t-action-unit { font-size: 12px; color: var(--t-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-action-detail { font-size: 11.5px; color: var(--t-text-3); }
.t-action-go { font-size: 11px; font-weight: 700; color: var(--t-accent-ink); background: var(--t-accent); padding: 3px 8px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.t-action-veh:hover .t-action-go { opacity: 1; }

/* Two-column dashboard rows */
.t-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-gap); margin-bottom: var(--t-gap); }
@media (max-width: 900px) { .t-dash-cols { grid-template-columns: 1fr; } }

/* Ranking list (top movers + alarms by type) */
.t-rank { display: flex; flex-direction: column; gap: 9px; }
.t-rank-row { display: flex; align-items: center; gap: 11px; text-decoration: none; }
a.t-rank-row:hover .t-rank-plate { color: var(--t-accent-ink); text-decoration: underline; }
.t-rank-n { flex: none; width: 18px; font-family: var(--t-font-mono); font-size: 12px; font-weight: 700; color: var(--t-text-faint); text-align: center; }
.t-rank-id { flex: none; width: 140px; min-width: 0; }
.t-rank-plate { display: block; font-family: var(--t-font-mono); font-size: 12.5px; font-weight: 600; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-rank-sub { display: block; font-size: 10.5px; color: var(--t-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-rank-bar { flex: 1; height: 8px; background: var(--t-surface-3); border-radius: 4px; overflow: hidden; }
.t-rank-bar .fill { display: block; height: 100%; background: var(--t-accent); border-radius: 4px; transition: width .3s; }
.t-rank-val { flex: none; width: 64px; text-align: right; font-family: var(--t-font-mono); font-size: 12px; font-weight: 600; color: var(--t-text-2); }

/* Risk chips */
.t-risk { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--t-border-faint); }
.t-risk-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-text-muted); margin-bottom: 9px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.t-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--t-surface-3); border-radius: 20px; text-decoration: none; font-family: var(--t-font-mono); font-size: 11.5px; font-weight: 600; color: var(--t-text-2); }
.t-chip:hover { background: var(--t-surface-4); }
.t-chip b { color: #dc2626; }

/* Mini bar charts */
.t-chart-cap { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--t-text-muted); margin-bottom: 8px; }
.t-spark { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 0 1px; }
.t-spark-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.t-spark-bar { width: 100%; background: var(--t-accent); border-radius: 2px 2px 0 0; min-height: 1px; transition: height .3s; }
.t-spark-bar.is-warn { background: #f59e0b; }
.t-spark-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--t-text-faint); margin-top: 5px; }

.t-dash-note { font-size: 11px; color: var(--t-text-faint); text-align: center; padding: 4px 0 8px; font-style: italic; }

[x-cloak] { display: none !important; }

/* ============================== MOBILE / RESPONSIVE ==============================
   The shell above is desktop-first: the top nav is one non-wrapping row and the
   rail is a fixed-width column beside the map. On a phone that overflows the nav
   and crushes the map to a sliver. Below 768px we therefore:
     • collapse the top nav into a fixed bottom tab bar (.t-tabbar) + "More" sheet
     • slim the header down to wordmark + notification bell
     • turn the Live-Map rail (.t-mapbody .t-rail) into a draggable bottom sheet that
       floats over a now-full-width map (height driven by --t-sheet-h from Alpine)
     • give the CRUD/report pages bottom padding so the tab bar never hides content
   Everything is token-driven, so re-theming :root still flows through here.
   =============================================================================== */

/* Bottom tab bar + drag handle are desktop-hidden; the media query switches them on. */
.t-tabbar     { display: none; }
.t-sheet-handle { display: none; }

@media (max-width: 768px) {
  :root { --t-tabbar-h: 56px; --t-safe-bottom: env(safe-area-inset-bottom, 0px); }

  /* dvh tracks the shrinking viewport when the mobile browser chrome slides away */
  .t-app { height: 100vh; height: 100dvh; }

  /* ---- Slim header: drop the inline tabs + account cluster, keep brand + bell ---- */
  .t-header { padding: 0 14px; gap: 12px; }
  .t-nav, .t-nav-sep,
  .t-livestatus, .t-header-pill, .t-header-divider,
  .t-userpill, .t-logout { display: none; }
  .t-header-right { gap: 4px; }
  .t-wordmark-text { font-size: 17px; }
  .t-popover { width: min(340px, calc(100vw - 24px)); right: -8px; }

  /* ---- Bottom tab bar ---- */
  .t-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--t-tabbar-h) + var(--t-safe-bottom));
    padding-bottom: var(--t-safe-bottom);
    background: var(--t-header-bg); border-top: 1px solid var(--t-header-border);
  }
  /* scoped to .t-tabbar so it never clashes with the in-page .t-tabs > .t-tab nav */
  .t-tabbar .t-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px 0; text-decoration: none; cursor: pointer;
    background: none; border: none; font-family: inherit; font-size: 10px; font-weight: 600;
    color: var(--t-header-muted); -webkit-tap-highlight-color: transparent;
  }
  .t-tabbar .t-tab svg { width: 22px; height: 22px; opacity: .9; }
  .t-tabbar .t-tab.is-active { color: #fff; }
  .t-tabbar .t-tab.is-active svg { color: var(--t-accent); opacity: 1; }

  /* ---- "More" sheet (remaining links + account + logout) ---- */
  .t-moresheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60; }
  .t-moresheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; color: var(--t-text);
    background: var(--t-surface); border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(18px + var(--t-safe-bottom));
    box-shadow: 0 -8px 28px rgba(0,0,0,.3);
  }
  .t-moresheet-grab { width: 38px; height: 4px; border-radius: 3px; background: var(--t-border); margin: 6px auto 14px; }
  .t-moresheet-user { display: flex; align-items: center; gap: 12px; padding: 2px 4px 14px; border-bottom: 1px solid var(--t-border-soft); }
  .t-moresheet-user .t-avatar { width: 40px; height: 40px; font-size: 16px; }
  .t-moresheet-name { font-size: 15px; font-weight: 700; color: var(--t-text); }
  .t-moresheet-mail { font-size: 12px; color: var(--t-text-muted); }
  .t-moresheet-links { display: flex; flex-direction: column; padding: 8px 0; }
  .t-moresheet-link {
    display: flex; align-items: center; gap: 14px; padding: 13px 8px; border-radius: 10px;
    text-decoration: none; color: var(--t-text); font-size: 15px; font-weight: 500;
  }
  .t-moresheet-link svg { width: 20px; height: 20px; color: var(--t-text-muted); flex: none; }
  .t-moresheet-link.is-active { background: var(--t-accent-wash); }
  .t-moresheet-link.is-active svg { color: var(--t-accent); }
  .t-moresheet-logout {
    width: 100%; margin-top: 6px; padding: 14px; border-radius: 11px; border: none;
    background: var(--t-surface-3); color: var(--t-marker-end);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  }

  /* slide-up transition helpers (toggled by Alpine on the More sheet) */
  .t-anim-enter { transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .26s; }
  .t-anim-down  { transform: translateY(100%); opacity: .4; }
  .t-anim-base  { transform: translateY(0); opacity: 1; }

  /* ---- CRUD / report pages: clear the tab bar, tighten side gutters ---- */
  .t-content { padding: 18px 16px calc(24px + var(--t-tabbar-h) + var(--t-safe-bottom)); }
  .t-page-head { margin-bottom: 16px; }

  /* ================= LIVE MAP → full-width map + bottom-sheet rail ================= */
  .t-mapbody .t-map { width: 100%; }

  .t-mapbody .t-rail {
    position: fixed; left: 0; right: 0; width: auto; z-index: 40;
    bottom: calc(var(--t-tabbar-h) + var(--t-safe-bottom));
    height: var(--t-sheet-h, 104px);
    max-height: calc(100dvh - var(--t-header-h) - var(--t-tabbar-h) - var(--t-safe-bottom) - 6px);
    border-right: none; border-top: 1px solid var(--t-border);
    border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18);
    overflow: hidden; transition: height .28s cubic-bezier(.4, 0, .2, 1);
  }
  .t-mapbody .t-rail.is-dragging { transition: none; }

  /* Grab bar — the drag/tap target that resizes the sheet */
  .t-mapbody .t-sheet-handle {
    display: flex; align-items: center; justify-content: center;
    height: 22px; flex: none; cursor: grab; touch-action: none;
  }
  .t-mapbody .t-sheet-handle::before {
    content: ''; width: 40px; height: 4px; border-radius: 3px; background: var(--t-border);
  }
  .t-mapbody .t-rail-head { padding-top: 6px; }

  /* Detail panel becomes its OWN draggable bottom sheet over the map (above the rail).
     Height is var-driven (--t-detail-h from Alpine, defaults to half-screen) so the map
     stays visible behind it; the inner .t-detail-scroll carries the padding + scroll,
     and the grab handle stays pinned. Drag up → full, flick down → dismiss. */
  .t-mapbody .t-detail {
    top: auto; left: 0; right: 0; width: 100%; z-index: 45;
    bottom: calc(var(--t-tabbar-h) + var(--t-safe-bottom));
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
    height: var(--t-detail-h, 50dvh);
    max-height: calc(100dvh - var(--t-header-h) - var(--t-tabbar-h) - 8px);
    border-left: none; border-top: 1px solid var(--t-border);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.22);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1);
  }
  .t-mapbody .t-detail.is-open { transform: translateY(0); }
  .t-mapbody .t-detail.is-dragging { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
  .t-mapbody .t-detail-scroll {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 18px 24px;
  }

  /* Map chrome: drop the heavy / touch-redundant bits on both map pages */
  .t-mapbody .t-mapctl, .t-mapbody .t-maplegend, .t-mapbody .t-scale { display: none; }

  /* LIVE MAP — stats strip up top, then the 5-button basemap row (both scroll sideways) */
  .t-live .t-stats {
    top: 10px; left: 10px; right: 10px; gap: 6px;
    overflow-x: auto; pointer-events: auto; scrollbar-width: none;
  }
  .t-live .t-stats::-webkit-scrollbar { display: none; }
  .t-live .t-stat-pill { flex: none; padding: 5px 11px; font-size: 10px; }
  .t-live .t-stat-pill strong { font-size: 14px; }
  .t-live .t-basemap {
    top: 50px; left: 10px; right: 10px; gap: 3px; max-width: none;
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  }
  .t-live .t-basemap::-webkit-scrollbar { display: none; }
  .t-live .t-basemap-btn { flex: none; padding: 6px 11px; font-size: 11px; }

  /* TRIP HISTORY — two short basemap controls keep their opposite top corners, just smaller */
  .t-trip .t-basemap { top: 12px; gap: 2px; }
  .t-trip .t-basemap-btn { padding: 5px 9px; font-size: 10.5px; }

  /* Playback bar (Trip History) — was min-width:520px; let it fit a phone */
  .t-playback {
    left: 10px; right: 10px; width: auto; min-width: 0; max-width: none;
    transform: none; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
    bottom: calc(var(--t-tabbar-h) + var(--t-safe-bottom) + 10px);
  }
  .t-pb-info { min-width: 0; }

  /* ================= CRUD / REPORT PAGES on mobile ================= */
  /* Page header stacks; actions go full-width and wrap */
  .t-page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .t-page-title { font-size: 19px; }
  .t-page-actions { flex-wrap: wrap; }
  .t-page-actions > * { flex: 1 1 auto; }
  .t-page-head .t-combo { min-width: 0 !important; width: 100%; }

  /* In-page tab nav (Reports) — let the 10 tabs scroll sideways instead of wrapping */
  .t-tabs {
    margin-bottom: 16px; gap: 0; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .t-tabs::-webkit-scrollbar { display: none; }
  .t-tabs .t-tab { flex: none; padding: 10px 13px; white-space: nowrap; }

  /* Data tables: scroll horizontally inside their card rather than blowing out the page */
  .t-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .t-table { min-width: 560px; }

  /* Segmented controls + dashboard density */
  .t-seg { width: 100%; }
  .t-seg button { flex: 1; }
  .t-content.t-dash { padding: 16px 14px calc(24px + var(--t-tabbar-h) + var(--t-safe-bottom)); }
  .t-dash { --t-gap: 12px; }
  .t-card-pad { padding: 15px 16px; }
  .t-card-head { padding: 13px 16px; }
}

/* Tablet / small-laptop: shrink the fixed rail before the phone breakpoint kicks in */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --t-rail-w: 320px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ENTERPRISE BACKBONE — notification inbox, bell footer, push banner, audit log.
   Token-driven so it reskins with the theme. (Phase 0)
   ════════════════════════════════════════════════════════════════════════════ */

/* Bell popover footer link */
.t-popover-foot {
  display: block; text-align: center; padding: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--t-accent-ink); text-decoration: none; border-top: 1px solid var(--t-border-soft);
}
.t-popover-foot:hover { background: var(--t-surface-2); }
/* Bell rows are anchors now — strip link styling */
a.t-notif-row { text-decoration: none; color: inherit; }

/* Web-push opt-in banner */
.t-push-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin-bottom: 16px;
}
.t-push-banner-title { font-weight: 600; font-size: 14px; color: var(--t-text); }
.t-push-banner-sub { font-size: 12.5px; color: var(--t-text-muted); margin-top: 2px; max-width: 64ch; }

/* Inbox filters */
.t-notif-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.t-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.t-chip.is-active { background: var(--t-accent-wash); border-color: var(--t-accent); color: var(--t-accent-ink); }
.t-toggle-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t-text-2); cursor: pointer; white-space: nowrap; }

/* Inbox list */
.t-notif-list-full { padding: 0; overflow: hidden; }
.t-notif-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--t-border-faint);
  text-decoration: none; color: inherit; transition: background .12s ease;
}
.t-notif-item:last-child { border-bottom: 0; }
.t-notif-item:hover { background: var(--t-surface-2); }
.t-notif-item.is-unread { background: var(--t-accent-wash); }
.t-notif-item.t-notif-sev-critical { border-left-color: var(--t-marker-end); }
.t-notif-item.t-notif-sev-warning  { border-left-color: var(--t-offline); }
.t-notif-item.t-notif-sev-info     { border-left-color: var(--t-border); }
.t-notif-item-main { flex: 1; min-width: 0; }
.t-notif-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.t-notif-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t-text-muted); }
.t-notif-item-time { font-size: 11px; color: var(--t-text-faint); white-space: nowrap; }
.t-notif-item-title { font-size: 13.5px; font-weight: 600; color: var(--t-text); }
.t-notif-item-body { font-size: 12.5px; color: var(--t-text-2); margin-top: 2px; }
.t-notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); margin-top: 6px; flex: none; }
.t-notif-empty { padding: 40px 16px; text-align: center; color: var(--t-text-muted); font-size: 13px; }
.t-notif-loadmore { padding: 14px; text-align: center; }

/* Audit log */
.t-audit-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.t-audit-table tbody tr:hover { background: var(--t-surface-2); }
.t-audit-pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; }
.t-audit-diff {
  background: var(--t-surface-2); border: 1px solid var(--t-border-soft); border-radius: var(--t-radius-sm);
  padding: 12px; font-family: var(--t-font-mono); font-size: 11.5px; color: var(--t-text-2);
  max-height: 320px; overflow: auto; white-space: pre-wrap; margin: 10px 0;
}

/* ── Smart Alerts Engine (Phase 2) ─────────────────────────────────────────── */
.t-link-danger { color: var(--t-marker-end); }

/* Enabled switch in the rule table */
.t-rule-switch {
  width: 38px; height: 22px; border-radius: 11px; background: var(--t-surface-4);
  border: 1px solid var(--t-border); position: relative; cursor: pointer; transition: background .15s ease;
}
.t-rule-switch.is-on { background: var(--t-accent); border-color: var(--t-accent); }
.t-rule-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.t-rule-switch.is-on .t-rule-knob { left: 18px; }

.t-rule-cond-fields { margin: 4px 0 6px; }
.t-rule-form .t-field-label { margin-top: 10px; }

/* Incident feed + map split */
.t-incident-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.t-incident-list { padding: 0; overflow: hidden; max-height: calc(100vh - 220px); overflow-y: auto; }
.t-incident-map { height: calc(100vh - 220px); border-radius: var(--t-radius); overflow: hidden; border: 1px solid var(--t-border-card); background: var(--t-map-bg); }
.t-incident-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--t-border-faint); cursor: pointer;
}
.t-incident-row:last-child { border-bottom: 0; }
.t-incident-row:hover { background: var(--t-surface-2); }
.t-incident-row.is-selected { background: var(--t-accent-wash); }
.t-incident-row.t-notif-sev-critical { border-left-color: var(--t-marker-end); }
.t-incident-row.t-notif-sev-warning  { border-left-color: var(--t-offline); }
.t-incident-row.t-notif-sev-info     { border-left-color: var(--t-border); }
.t-incident-main { flex: 1; min-width: 0; }
.t-incident-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.t-incident-title { font-size: 13.5px; font-weight: 600; color: var(--t-text); }
.t-incident-body { font-size: 12.5px; color: var(--t-text-2); margin-top: 2px; }
.t-incident-time { font-size: 11px; color: var(--t-text-faint); margin-top: 3px; }
.t-incident-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

/* Map pins by severity */
.t-incident-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.t-incident-pin-critical { background: var(--t-marker-end); }
.t-incident-pin-warning  { background: var(--t-offline); }
.t-incident-pin-info     { background: var(--t-text-muted); }

@media (max-width: 900px) {
  .t-incident-layout { grid-template-columns: 1fr; }
  .t-incident-map { height: 320px; order: -1; }
  .t-incident-list { max-height: none; }
}

/* ── Safety Scorecards (Phase 3) ───────────────────────────────────────────── */
.t-score-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.t-seg-sm button { padding: 4px 10px; font-size: 12px; }

/* Grade pill */
.t-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-weight: 700; font-size: 12px; color: #fff; }
.t-grade-a { background: var(--t-speed-slow); }
.t-grade-b { background: var(--t-speed-moderate); color: #1a1a1f; }
.t-grade-c { background: var(--t-offline); }
.t-grade-d { background: #fb7185; }
.t-grade-e { background: var(--t-marker-end); }

/* Leaderboard */
.t-lb { padding: 4px 0; }
.t-lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--t-border-faint); }
.t-lb-row:last-child { border-bottom: 0; }
.t-lb-row:hover { background: var(--t-surface-2); }
.t-lb-row.is-selected { background: var(--t-accent-wash); }
.t-lb-rank { width: 20px; text-align: center; font-size: 12px; color: var(--t-text-muted); font-variant-numeric: tabular-nums; }
.t-lb-main { flex: 1; min-width: 0; }
.t-lb-name { font-size: 13px; font-weight: 600; color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-lb-bar { height: 6px; border-radius: 3px; background: var(--t-surface-4); margin-top: 5px; overflow: hidden; }
.t-lb-bar span { display: block; height: 100%; border-radius: 3px; }
.t-lb-score { font-weight: 700; font-size: 15px; color: var(--t-text); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* Score gauge (conic ring) */
.t-gauge-wrap { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.t-gauge { --p: 0; --c: var(--t-accent);
  width: 110px; height: 110px; border-radius: 50%; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
  background: radial-gradient(closest-side, var(--t-surface) 78%, transparent 79% 100%),
              conic-gradient(var(--c) calc(var(--p) * 1%), var(--t-surface-4) 0); }
.t-gauge-score { font-size: 30px; font-weight: 700; color: var(--t-text); line-height: 1; }
.t-gauge-grade { font-size: 12px; font-weight: 700; color: var(--t-text-muted); margin-top: 2px; }
.t-gauge-meta { display: flex; flex-direction: column; gap: 6px; }

/* How-scoring-works explainer panel */
.t-help-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
@media (max-width: 760px) { .t-help-grid { grid-template-columns: 1fr; gap: 18px; } }
.t-help-text { font-size: 13.5px; line-height: 1.6; color: var(--t-text-2); margin: 4px 0 12px; }
.t-help-formula { font-family: var(--t-font-mono); font-size: 12.5px; color: var(--t-text); background: var(--t-surface-3);
  border: 1px solid var(--t-border-soft); border-radius: 7px; padding: 10px 12px; margin-bottom: 10px; }
.t-help-example { background: var(--t-surface-3); border: 1px solid var(--t-border-soft); border-radius: 7px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.55; color: var(--t-text-2); }
.t-help-example-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--t-text-muted); margin-right: 6px; }
.t-help-weights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.t-help-w { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--t-text-2);
  padding: 4px 0; border-bottom: 1px solid var(--t-border-faint); }
.t-help-w b { font-variant-numeric: tabular-nums; color: #dc2626; }
.t-help-grades { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.t-help-band { font-size: 12px; color: var(--t-text-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* Scorecard config — inline admin editor */
.t-help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 6px; }
.t-help-head .t-score-section { margin: 0; }
.t-w-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.t-w-edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--t-text-2); }
.t-w-edit-input { display: inline-flex; align-items: center; gap: 3px; color: #dc2626; font-weight: 600; }
.t-w-edit-input input, .t-band-edit input {
  width: 56px; background: var(--t-surface); border: 1px solid var(--t-border-card); color: var(--t-text);
  padding: 5px 7px; border-radius: var(--t-radius-sm); font-size: 13px; font-family: inherit;
  text-align: right; outline: none; font-variant-numeric: tabular-nums; transition: border-color .15s;
}
.t-w-edit-input input:focus, .t-band-edit input:focus { border-color: var(--t-accent); }
.t-band-edit-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.t-band-edit { display: inline-flex; align-items: center; gap: 6px; }
.t-w-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.t-w-edit-error { font-size: 12px; color: var(--t-marker-end); }

.t-score-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t-text-muted); margin: 16px 0 6px; }
.t-event-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--t-border-faint); font-size: 13px; text-transform: capitalize; }
.t-event-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.t-sparkbars { display: flex; align-items: flex-end; gap: 4px; height: 70px; padding: 6px 0; }
.t-sparkbar { flex: 1; min-width: 4px; border-radius: 2px 2px 0 0; align-self: flex-end; }

.t-risky-trip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--t-border-faint); text-decoration: none; color: inherit; }
.t-risky-time { font-size: 12.5px; font-weight: 600; color: var(--t-text); }
.t-risky-sub { font-size: 11.5px; color: var(--t-text-muted); }
.t-risky-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

@media (max-width: 900px) {
  .t-score-cols { grid-template-columns: 1fr; }
}

/* ── Garage form: address autocomplete + field hint (Garages admin) ── */
.t-geo-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 4px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-sm);
  box-shadow: var(--t-shadow-pop);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.t-geo-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--t-text-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--t-border-faint);
  cursor: pointer;
}
.t-geo-suggest-item:last-child { border-bottom: none; }
.t-geo-suggest-item:hover { background: var(--t-surface-3); color: var(--t-text); }
.t-field-hint { margin-top: 6px; font-size: 11.5px; color: var(--t-text-muted); }

/* ── Active-day chips (alert rule curfew / no-movement window) ── */
.t-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t-text-2);
  background: var(--t-surface-3);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-sm);
  cursor: pointer;
  user-select: none;
}
.t-day-chip.is-on {
  background: var(--t-accent);
  color: var(--t-accent-ink);
  border-color: var(--t-accent);
}

/* ── Vehicle → garage / destination distance + ETA (live map detail panel) ── */
.t-eta { margin-top: 14px; }
.t-eta-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-text-muted); margin-bottom: 7px;
}
.t-eta-list { display: flex; flex-direction: column; gap: 6px; }
.t-eta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px;
  background: var(--t-surface-2); border: 1px solid var(--t-border-soft);
  border-radius: var(--t-radius-sm); cursor: pointer;
}
.t-eta-row:hover { background: var(--t-surface-3); }
.t-eta-row.is-near { border-color: var(--t-accent); background: var(--t-accent-wash); }
.t-eta-body { min-width: 0; flex: 1; }
.t-eta-name { font-size: 13px; font-weight: 600; color: var(--t-text); display: flex; align-items: center; gap: 6px; }
.t-eta-near {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--t-accent-ink); background: var(--t-accent); padding: 1px 5px; border-radius: 4px;
}
.t-eta-sub {
  font-size: 11.5px; color: var(--t-text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-eta-metrics { text-align: right; white-space: nowrap; }
.t-eta-km { font-size: 12px; font-weight: 600; color: var(--t-text-2); }
.t-eta-time { font-size: 12px; color: var(--t-text); font-weight: 600; margin-top: 1px; }
.t-eta-muted { color: var(--t-text-faint); font-weight: 500; }
.t-eta-dest {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px;
  padding: 8px 10px; background: var(--t-surface-2);
  border: 1px solid var(--t-border-soft); border-radius: var(--t-radius-sm);
}
.t-eta-clear {
  flex-shrink: 0; width: 24px; height: 24px; border: none; background: none;
  color: var(--t-text-muted); cursor: pointer; font-size: 14px; border-radius: 6px;
}
.t-eta-clear:hover { background: var(--t-surface-3); color: var(--t-text); }

/* ── Route traffic key (live-map ETA route line) ── */
.t-traffic-key {
  margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  font-size: 11px; color: var(--t-text-muted);
}
.t-traffic-key-label { font-weight: 600; color: var(--t-text-2); margin-right: 2px; }
.t-tdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 4px; }

/* ── ETA empty/edge note (live-map distance panel) ── */
.t-eta-note {
  font-size: 12px; color: var(--t-text-muted);
  background: var(--t-surface-2); border: 1px solid var(--t-border-soft);
  border-radius: var(--t-radius-sm); padding: 9px 11px; line-height: 1.4;
}