/*
 * app.css — CMS Route Deviation Checker
 *
 * Design system overview
 * ─────────────────────
 * Font:       DM Sans (Google Fonts) — all UI text
 *             DM Mono — tractor numbers, API keys, timestamps (monospace identity data)
 * Base size:  12px body, scaling up only for key numeric displays
 * Colors:     --red (#BD0500) primary brand/alert, --green (#16a34a) on-route, gray scale for structure
 * Radius:     6px (--radius) everywhere — consistent pill/card rounding
 * Shadows:    --shadow-sm (card lift), --shadow-nav (sticky header)
 *
 * Layout model
 * ─────────────
 * body → column flex, 100vh, overflow:hidden
 *   header (sticky, 76px)
 *   .tab-view (flex:1, only one visible at a time via .active)
 *     .mid-row → .panel | content | .panel-right (three-column for fleet map)
 *
 * Tab switching is handled by shared.js switchTab(). Only the .active .tab-view
 * is display:flex — all others are display:none.
 *
 * Status color convention (used across cards, badges, borders):
 *   Green (#16a34a / var(--green)) — on route, connected, ok
 *   Red   (#BD0500 / var(--red))   — off route, error, alert
 *   Gray  (var(--mid))             — no route, unknown, inactive
 *   Amber (var(--warn))            — warning, threshold approaching
 */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
/*
 * All colors, shadows, and radii referenced as CSS variables so changes
 * propagate everywhere without grep. --red2 is the hover-darker red.
 * --bg is the overall page background (#f9fafb ≈ near-white gray).
 * --border is the universal rule/outline color (light gray).
 */
:root {
  --red:    #BD0500;
  --red2:   #9f000b;
  --bg:     #f9fafb;
  --white:  #ffffff;
  --mid:    #6b7280;
  --dark:   #111827;
  --border: #e5e7eb;
  --green:  #16a34a;
  --blue:   #2563eb;
  --warn:   #d97706;
  --shadow-sm:  0 .125rem .25rem rgba(0,0,0,.075);
  --shadow-nav: 0 0 .25rem 0 rgba(0,0,0,.2), 0 .25rem 1rem 0 rgba(0,0,0,.2);
  --radius: 6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--dark);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:12px;}

/* ── HEADER ─────────────────────────────────────────────────── */
/*
 * Sticky 76px header containing:
 *   - Chalk logo (left)
 *   - Route Tracker nav group (dropdown: Fleet Map / Status Board / History)
 *   - Silo Monitor tab button
 *   - Settings tab button
 *   - Division filter chips + API status pill (right, margin-left:auto)
 *
 * Tab buttons align to the bottom of the header (align-items:flex-end) so the
 * active red underline (border-bottom) appears flush with the header's bottom edge.
 * margin-bottom:-1px pulls the active tab's border over the header's box-shadow line.
 */
header{background:var(--white);box-shadow:var(--shadow-nav);padding:0 1.25rem;height:76px;display:flex;align-items:flex-end;gap:1.25rem;flex-shrink:0;position:sticky;top:0;z-index:1000;}
.logo{display:flex;align-items:center;padding-bottom:10px;flex-shrink:0;}
.tab-btn{height:76px;padding:0 8px 14px;border:none;background:transparent;color:var(--mid);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;display:flex;align-items:flex-end;}
.tab-btn:hover{color:var(--dark);}
.tab-btn.active{color:var(--red);border-bottom-color:var(--red);}

/* Nav group — Route Tracker hover-reveal dropdown */
/* The dropdown appears on :hover of the .nav-group wrapper, not on click.      */
/* This keeps it accessible without JavaScript and avoids a click-outside handler. */
.nav-group{position:relative;height:76px;display:flex;align-items:flex-end;}
.nav-group-btn{height:76px;padding:0 8px 14px;border:none;background:transparent;color:var(--mid);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;display:flex;align-items:flex-end;gap:5px;white-space:nowrap;}
.nav-group-btn:hover{color:var(--dark);}
.nav-group-btn.active{color:var(--red);border-bottom-color:var(--red);}
.nav-group-btn svg{margin-bottom:1px;transition:transform .15s;}
.nav-group:hover .nav-group-btn{color:var(--dark);}
.nav-group:hover .nav-group-btn svg{transform:rotate(180deg);}
.nav-group-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);box-shadow:0 4px 16px rgba(0,0,0,.12);border-radius:0 0 6px 6px;min-width:160px;padding:6px 0;z-index:2000;}
.nav-group:hover .nav-group-menu{display:block;}
.nav-group-item{display:block;width:100%;padding:9px 18px;border:none;background:transparent;text-align:left;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mid);cursor:pointer;transition:color .1s,background .1s;white-space:nowrap;}
.nav-group-item:hover{color:var(--dark);background:#f8f8f8;}
.nav-group-item.active{color:var(--red);}

/* Header right: division chips + API status pill */
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;padding-bottom:12px;}

/* API status pill — three states: ok (green pulse), err (red), checking (amber) */
.api-status{font-size:12px;letter-spacing:.5px;padding:3px 10px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:5px;}
.api-status.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.api-status.ok .api-pulse{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:livePulse 1.6s ease-in-out infinite;flex-shrink:0;display:inline-block;vertical-align:middle;}
.api-status.err{background:#fef2f2;color:var(--red);border:1px solid #fecaca;}
.api-status.checking{background:#fffbeb;color:var(--warn);border:1px solid #fde68a;}

/* ── LAYOUT ─────────────────────────────────────────────────── */
/* Only the .active .tab-view is visible. All others are display:none.          */
/* flex-direction:column on .tab-view so toolbar/filter rows stack above content. */
.tab-view{display:none;flex:1;min-height:0;overflow:hidden;flex-direction:column;}
.tab-view.active{display:flex;}
/* .mid-row is the three-column row: left panel | map/content | right panel     */
.mid-row{display:flex;flex:1;overflow:hidden;min-height:0;}

/* ── PANELS ─────────────────────────────────────────────────── */
/*
 * .panel — 290px fixed-width side panels (left and right)
 * .panel-right — swaps border from right to left side
 * .panel-scroll — the scrollable inner area; thin 4px scrollbar
 * .sec — a bordered section within a panel (12px 14px padding, bottom border)
 * .sec-title — all-caps label for a panel section, often with a badge counter
 */
.panel{width:290px;flex-shrink:0;background:var(--white);display:flex;flex-direction:column;overflow:hidden;min-height:0;box-shadow:var(--shadow-sm);border-right:1px solid var(--border);}
.panel-right{border-right:none;border-left:1px solid var(--border);}
.panel-scroll{flex:1;overflow-y:auto;min-height:0;padding-bottom:20px;}
.panel-scroll::-webkit-scrollbar{width:4px;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.sec{padding:12px 14px;border-bottom:1px solid var(--border);}
.sec-title{font-size:12px;font-weight:600;letter-spacing:.8px;color:var(--mid);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;}

/* ── BADGES ─────────────────────────────────────────────────── */
/* Small count badges (red circle) — also color variants for ok/warn/blue states */
.badge{background:var(--red);color:#fff;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;}
.badge.ok{background:var(--green);}
.badge.blue{background:var(--blue);}
.badge.warn{background:var(--warn);}

/* .live-dot — legacy class, display:none (replaced by .status-ind system) */
.live-dot{display:none;}

/* ── STATUS INDICATOR ────────────────────────────────────────── */
/*
 * Unified live/error status indicator used in three places:
 *   - Fleet Map left panel (#liveDot + #liveDotLabel)
 *   - Status Board header (#liveDotMonitor + #liveDotMonitorLabel)
 *   - Silo tab toolbar (#silo-pulse + #silo-last-update)
 *
 * States:
 *   default     — gray dot, label reads "NOT LOADED"
 *   .live        — green pulsing dot, label reads "LIVE · HH:MM"
 *   .err         — red pulsing dot, label reads "CONNECTION LOST"
 *
 * IMPORTANT: .status-ind-dot uses display:inline-block (not default inline for <span>)
 * so width/height/border-radius apply. Without this, the dot collapses to zero size.
 *
 * !important on .status-ind-label font properties is required to override
 * parent container font rules that otherwise bleed in from .sec-title etc.
 */
.status-ind{display:inline-flex;align-items:center;gap:5px;}
.status-ind-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--border);display:inline-block;}
.status-ind-dot.live{background:#16a34a;animation:livePulse 1.6s ease-in-out infinite;}
.status-ind-dot.degraded{background:#d97706;animation:livePulse 1.6s ease-in-out infinite;}
.status-ind-dot.err{background:var(--red);animation:livePulse 1.6s ease-in-out infinite;}
.status-ind-label{font-size:11px !important;font-weight:600 !important;letter-spacing:.5px !important;text-transform:uppercase;color:var(--mid);font-family:'DM Sans',sans-serif !important;}
.status-ind-label.live{color:#15803d !important;}
.status-ind-label.degraded{color:#d97706 !important;}
.status-ind-label.err{color:var(--red) !important;}

/*
 * livePulse animation — opacity-only, no transform.
 * transform:scale() was considered but is imperceptible at 6px dot size
 * and adds GPU compositing cost for no visible benefit.
 */
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.pair-count-badge{color:#1c1d1f;font-weight:600;letter-spacing:0;}
#map{flex:1;}

/* ── BUTTONS ─────────────────────────────────────────────────── */
/*
 * .btn       — full-width base button (used in panels)
 * .btn-sm    — compact inline button (used in pair detail header)
 * Color variants: -red (primary action), -ghost (secondary), -green, -blue
 * All share the same disabled state: gray bg/text, not-allowed cursor.
 */
.btn{width:100%;padding:8px 14px;border:none;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:all .15s;margin-bottom:5px;}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red2);}
.btn-red:disabled,.btn-green:disabled,.btn-blue:disabled,.btn-ghost:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed;border-color:#d1d5db;}
.btn-ghost{background:#fff;color:var(--mid);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--mid);color:var(--dark);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:#15803d;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:#1d4ed8;}
.btn-sm{padding:4px 10px;font-size:12px;letter-spacing:.3px;border-radius:var(--radius);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;transition:all .12s;}

/* ── INPUTS ─────────────────────────────────────────────────── */
/*
 * .inp      — standard full-width text/number/date input (red focus border)
 * .tog      — toggle switch (custom CSS checkbox: unchecked=gray, checked=red)
 */
.inp{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:12px;background:#fff;color:var(--dark);outline:none;transition:border-color .15s;}
.inp:focus{border-color:var(--red);}
.tog{position:relative;width:30px;height:16px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;}
.tog-sl{position:absolute;inset:0;background:var(--border);border-radius:16px;cursor:pointer;transition:.2s;}
.tog-sl:before{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:.2s;}
.tog input:checked+.tog-sl{background:var(--red);}
.tog input:checked+.tog-sl:before{transform:translateX(14px);}

/* ── NOTES ─────────────────────────────────────────────────── */
/* Inline validation/status notes. showNote(id, msg, type) in shared.js controls these. */
/* States: default (gray), .warn (amber), .ok (green), .err (red) */
.note{font-size:12px;color:var(--mid);line-height:1.5;padding:6px 9px;background:var(--bg);border-radius:var(--radius);margin-top:6px;border:1px solid var(--border);}
.note.warn{background:#fffbeb;color:var(--warn);border-color:#fde68a;}
.note.ok{background:#f0fdf4;color:var(--green);border-color:#bbf7d0;}
.note.err{background:#fef2f2;color:var(--red);border-color:#fecaca;}

/* ── STOP PAIR LIST ─────────────────────────────────────────── */
/*
 * Each stop pair in the route manager left panel is a .pair-item.
 * .selected — blue border + light blue bg for the currently selected pair.
 * .pair-dot — colored status dot (green=auto-routed, blue=custom, red=missing).
 * .pair-badge — route source label (auto/edited/no route).
 * .pair-group-hdr — uppercase group label (Terminal/Mine/Drop Yard/Pad).
 * .div-badge — colored division chip (SA=blue, MID=purple, other=gray).
 */
.pair-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#fff;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;transition:border-color .12s;box-shadow:var(--shadow-sm);margin-bottom:3px;}
.pair-item:hover{border-color:var(--mid);}
.pair-item.selected{border-color:var(--blue);background:#eff6ff;}
.pair-group-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--mid);
  text-transform: uppercase;
  padding: 12px 4px 5px;
  margin-bottom: 5px;
  margin-top: 4px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pair-group-hdr::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}
.pair-group-hdr:first-child { padding-top: 2px; margin-top: 0; }
.div-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;display:inline-block;}
.div-badge.sa{background:#dbeafe;color:#1e40af;}   /* San Antonio — blue */
.div-badge.mid{background:#eeedfe;color:#3c3489;}  /* Midland — purple */
.div-badge.other{background:#f1efe8;color:#5f5e5a;} /* Unknown division */
.pair-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pair-names{flex:1;min-width:0;}
.pair-origin{font-size:12px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pair-dest{font-size:12px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pair-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;flex-shrink:0;letter-spacing:.3px;}
.pair-badge.auto{background:#e1f5ee;color:#0f6e56;}     /* OSRM/Google route */
.pair-badge.custom{background:#e6f1fb;color:#185fa5;}   /* User-edited waypoints */
.pair-badge.missing{background:#fcebeb;color:#a32d2d;}  /* No route saved yet */

/* ── ROUTE STATS (right panel default view) ─────────────────── */
/* Three stat rows: Auto / Edited / Missing route counts. */
.rm-stat{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.rm-stat:last-child{border-bottom:none;}
.rm-stat-label{color:var(--mid);}
.rm-stat-val{font-weight:700;color:var(--dark);}
.rm-stat-val.red{color:var(--red);}
.rm-stat-val.green{color:var(--green);}
.rm-stat-val.blue{color:var(--blue);}

/* ── TYPEAHEAD SEARCH DROPDOWN ──────────────────────────────── */
/*
 * Absolute-positioned autocomplete dropdown for the unified search input.
 * Positioned by JS (showSearchDropdown) to align below the input.
 * .dd-avatar — initials circle derived from driver first+last name initials.
 * .dd-more   — "+N more" hint shown when matches exceed MAX=5.
 */
.dd-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border);cursor:pointer;font-size:11px;transition:background .08s;}
.dd-row:last-child{border-bottom:none;}
.dd-row:hover,.dd-row.dd-active{background:#f8f9fa;}
.dd-avatar{width:24px;height:24px;border-radius:50%;background:#e2e3e5;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#818286;flex-shrink:0;}
.dd-info{flex:1;min-width:0;}
.dd-name{font-weight:600;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-meta{font-size:10px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.dd-status{flex-shrink:0;}
.dd-more{padding:6px 10px;font-size:10px;color:var(--mid);text-align:center;background:#f8f9fa;border-top:1px solid #f0f1f3;}

/* ── MINI ROUTE STAT ROW (left panel) ──────────────────────── */
/* Three mini cards showing auto/edited/missing counts at the top of the pair list. */
.route-mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:8px;}
.route-mini-card{background:#f8f9fa;border:1px solid var(--border);border-radius:var(--radius);padding:4px 6px;text-align:center;}
.route-mini-card .rmn{font-size:14px;font-weight:700;color:var(--dark);line-height:1.2;font-family:'DM Mono',monospace;}
.route-mini-card .rml{font-size:9px;color:var(--mid);letter-spacing:.3px;text-transform:uppercase;}
.route-mini-card .rmn.g{color:#0f6e56;}  /* auto routes — green */
.route-mini-card .rmn.b{color:#185fa5;}  /* edited routes — blue */
.route-mini-card .rmn.r{color:#a32d2d;}  /* missing routes — red; only shown if > 0 */

/* ── PAIR DETAIL (right panel — selected pair state) ────────── */
.pair-detail-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.pair-detail-names{font-size:12px;font-weight:700;color:var(--dark);line-height:1.4;}
.pair-detail-dest{font-size:12px;color:var(--mid);}
.pair-detail-meta{font-size:12px;color:var(--mid);margin-top:4px;}

/* ── FLEET CONTROLS ─────────────────────────────────────────── */
.fleet-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ── MONITOR TAB ─────────────────────────────────────────────── */
/*
 * .mon-topbar    — sticky header bar with stat cards + live indicator
 * .mon-stat-card — clickable filter cards (all/on/off/no-route); .active-filter = selected
 * .mon-grid      — auto-fill CSS grid of driver status cards (minmax 210px)
 * .drv-card      — individual driver status card
 *   Border-left color encodes status: green=ok, red=out, gray=no_route/unknown
 * .mon-log-panel — right-side event log panel (hidden on mobile)
 */
.monitor-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg);}
.mon-topbar{background:var(--white);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0;border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);}

/* Monitor stat cards — same colored top-border active state as fleet map */
.mon-stat-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: 8px 16px;
  text-align: center;
  min-width: 90px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.mon-stat-card:hover { border-color: #9ca3af; border-top-color: #9ca3af; }
.mon-stat-card.active-filter {
  border-color: var(--border);
  border-top-color: var(--dark);
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.mon-stat-card.out.active-filter { border-top-color: var(--red);   background: #fff5f5; }
.mon-stat-card.in.active-filter  { border-top-color: var(--green); background: #f0fdf4; }
.mon-stat-card.nr.active-filter  { border-top-color: var(--mid);   background: var(--bg); }
.mon-stat-card .msv {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  font-family: 'DM Mono', monospace;

  line-height: 1;
}
.mon-stat-card .msl {
  font-size: 9px;
  letter-spacing: .6px;
  color: var(--mid);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 600;
}
.mon-stat-card.out .msv { color: var(--red);   }
.mon-stat-card.in  .msv { color: var(--green); }
.mon-stat-card.nr  .msv { color: var(--mid);   }

.mon-body{display:flex;flex:1;overflow:hidden;}
.mon-grid-wrap{flex:1;overflow-y:auto;padding:14px;}
.mon-grid-wrap::-webkit-scrollbar{width:5px;}
.mon-grid-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}

/* Driver compliance cards */
.drv-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  padding: 12px 12px 10px;
  transition: box-shadow .15s;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.drv-card[onclick]:hover { box-shadow: 0 4px 12px rgba(0,0,0,.13); border-color: var(--mid); border-left-color: inherit; }
.drv-card.out         { border-left-color: var(--red);   }
.drv-card.ok          { border-left-color: var(--green); }
.drv-card.no_route    { border-left-color: var(--mid);   }
.drv-card.no_location,
.drv-card.unknown     { border-left-color: var(--border);}

/* Driver name — primary identity, larger and bolder */
.drv-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
/* Tractor number — secondary, monospace */
.drv-card-vehicle {
  font-size: 11px;
  color: var(--mid);
  font-family: 'DM Mono', monospace;
  margin-bottom: 8px;
}
/* Status badge — pill shape, color-coded background */
.drv-card-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 5px;
  font-family: 'DM Sans', sans-serif;
}
.drv-card-status.out      { background: #fdecea; color: var(--red);   }
.drv-card-status.ok       { background: #e8f5e9; color: #15803d;      }
.drv-card-status.no_route { background: var(--bg); color: var(--mid);   }
.drv-card-status.unknown,
.drv-card-status.no_location { background: var(--bg); color: var(--mid); }

/* Distance off route — shown when out, styled as secondary data */
.drv-card-dist {
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  font-family: 'DM Sans', sans-serif;
  margin-top: 2px;
}
/* Route segment line inside driver card */
.drv-card .mlr-seg {
  font-size: 11px;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 6px;
}
/* Last seen timestamp */
.drv-card-time {
  font-size: 11px;
  color: #9ca3af;
  font-family: 'DM Mono', monospace;
  margin-top: 2px;
}
.drv-card-time.stale-warn { color: var(--warn); }
.drv-card-time.stale-err  { color: var(--red);  }

/* ── HISTORY TAB ─────────────────────────────────────────────── */
/*
 * Two views toggled by setHistView() in history.js:
 *   #histDriverWrap — per-driver summary table with off-route % bar
 *   #histLogWrap    — raw event log table
 *
 * .hist-summary-cards — fleet-level KPI cards at the top (hidden until data loads)
 * .pct-bar-wrap / .pct-bar — inline percentage bar in the driver summary table
 * .hist-badge — status chip (ok=green, out=red, no_route=gray)
 * Row states: .out-row (pink bg), .ongoing (italic gray text)
 */
.hist-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg);}
.hist-filters{background:var(--white);padding:10px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hist-filter-label{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mid);}

/* KPI summary cards — these are the most important numbers, make them count */
.hist-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 0;
}
.hsc {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-sm);
}
.hsc.red-accent  { border-top-color: var(--red);   }
.hsc.green-accent{ border-top-color: var(--green); }
.hsc.blue-accent { border-top-color: var(--blue);  }
.hsc-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.hsc-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  font-family: 'DM Mono', monospace;

  line-height: 1;
}
.hsc-val.red   { color: var(--red);   }
.hsc-val.green { color: var(--green); }

/* View toggle — rounded pills */
.hist-view-toggle { display: flex; gap: 6px; padding: 14px 20px 0; }
.hvt-btn {
  height: 28px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--mid);
  transition: all .12s;
  letter-spacing: .3px;
}
.hvt-btn:hover { border-color: var(--mid); color: var(--dark); }
.hvt-btn.active { background: var(--dark); color: #fff; border-color: var(--dark); }

/* Driver summary table */
.hist-driver-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.hist-driver-table th{text-align:left;padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mid);border-bottom:2px solid var(--border);white-space:nowrap;background:var(--bg);position:sticky;top:0;z-index:1;box-shadow:0 2px 0 var(--border);}
.hist-driver-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--dark);vertical-align:middle;}
.hist-driver-table tr:hover td{background:var(--bg);}
.hist-driver-table tr.high-pct td { background: #fff8f8; }
.hist-driver-table tr.high-pct:hover td { background: #fef2f2; }

/* Inline horizontal percentage bar for off-route % column */
.pct-bar-wrap{width:100px;height:5px;background:var(--border);border-radius:3px;display:inline-block;vertical-align:middle;margin-right:6px;overflow:hidden;}
.pct-bar{height:100%;border-radius:3px;display:block;}
/* Percentage color thresholds: >=15% = red, >=5% = amber, <5% = green */
.pct-red  {color:var(--red);font-weight:700;}
.pct-amber{color:var(--warn);font-weight:700;}
.pct-green{color:var(--green);font-weight:700;}

/* .hist-inp — shared input/select style for the filter bar */
.hist-inp{border:1px solid var(--border);border-radius:var(--radius);padding:5px 8px;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;height:28px;}
.hist-inp:focus{outline:none;border-color:var(--red);}

/* ── CUSTOM SELECT WIDGET (.cms-sel-*) ──────────────────────── */
/*
 * Replaces native <select> elements (initialized by cmsSelectInit() in shared.js).
 * The native <select> is hidden but kept in the DOM for value access and change events.
 * .cms-sel-wrap    — outer container (position:relative for dropdown positioning)
 * .cms-sel-trigger — the visible button showing current selection
 * .cms-sel-menu    — the dropdown panel (display:none by default, block when .open)
 * .cms-sel-item    — individual option row; .cms-sel-selected = red text for active
 * .open class added to .cms-sel-wrap by JS; rotates caret SVG 180° when open.
 * z-index:3000 ensures it appears above toast notifications (z-index:9999 is toast).
 */
.cms-sel-wrap{position:relative;display:inline-block;}
.cms-sel-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-weight:600;font-family:'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--mid);background:#fff;cursor:pointer;white-space:nowrap;box-sizing:border-box;}
.cms-sel-trigger:hover{color:var(--dark);}
.cms-sel-trigger svg{flex-shrink:0;transition:transform .15s;}
.cms-sel-wrap.open .cms-sel-trigger{border-color:var(--red);color:var(--dark);}
.cms-sel-wrap.open .cms-sel-trigger svg{transform:rotate(180deg);}
.cms-sel-menu{display:none;position:absolute;top:100%;left:0;min-width:100%;background:var(--white);box-shadow:0 4px 16px rgba(0,0,0,.12);border-radius:0 0 6px 6px;padding:6px 0;z-index:3000;}
.cms-sel-wrap.open .cms-sel-menu{display:block;}
.cms-sel-item{display:block;width:100%;padding:9px 18px;border:none;background:transparent;text-align:left;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mid);cursor:pointer;white-space:nowrap;box-sizing:border-box;}
.cms-sel-item:hover{color:var(--dark);background:#f8f8f8;}
.cms-sel-item.cms-sel-selected{color:var(--red);}

/* Event log table (shared between monitor tab log panel and history event log) */
.hist-table-wrap{flex:1;overflow:auto;padding:16px 20px;}
.hist-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.hist-table th{text-align:left;padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mid);border-bottom:2px solid var(--border);white-space:nowrap;background:var(--bg);position:sticky;top:0;z-index:1;box-shadow:0 2px 0 var(--border);}
.hist-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--dark);vertical-align:middle;}
.hist-table tr:hover td{background:var(--bg);}
.hist-table tr.out-row td { background: #fff8f8; }
.hist-table tr.out-row:hover td { background: #fef2f2; }
/* Left accent border on off-route rows for instant scan reading */
.hist-table tr.out-row td:first-child { border-left: 3px solid var(--red); padding-left: 8px; }
.hist-table tr.ongoing td{color:var(--mid);font-style:italic;}
/* Status badges in the event log table */
.hist-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.3px;}
.hist-badge.ok{background:#e8f5e9;color:#15803d;}
.hist-badge.out{background:#fdecea;color:#BD0500;}
.hist-badge.no_route{background:#f1efe8;color:#5f5e5a;}
.hist-empty{text-align:center;padding:40px;color:var(--mid);font-size:13px;}
.hist-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* ── MONITOR EVENT LOG PANEL ────────────────────────────────── */
/* Right-side panel on the Status Board tab. Hidden on mobile (<768px). */
.mon-log-panel{width:360px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column;background:var(--white);}
.mon-log-header{padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--mid);text-transform:uppercase;flex-shrink:0;}
.mon-log-body{flex:1;overflow-y:auto;}
.mon-log-body::-webkit-scrollbar{width:4px;}
.mon-log-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.mon-log-row {
  padding: 8px 14px 8px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-size: 12px;
  transition: background .1s;
}
.mon-log-row:hover { background: var(--bg); }
.mon-log-row.out   { border-left-color: var(--red);   }
.mon-log-row.ok    { border-left-color: var(--green); }
.mon-log-row.selected {
  background: #f0f4ff;
  border-left-color: var(--blue);
  border-left-width: 3px;
}
.mon-log-row .mlr-driver{font-weight:600;color:var(--dark);}
.mon-log-row .mlr-status{font-weight:700;}
.mon-log-row .mlr-status.out{color:var(--red);}
.mon-log-row .mlr-status.ok{color:var(--green);}
.mon-log-row .mlr-seg{color:var(--mid);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.mon-log-row .mlr-meta{color:var(--mid);margin-top:2px;font-size:11px;font-family:'DM Mono',monospace;}
.mon-filter{display:flex;gap:6px;align-items:center;margin-left:auto;}
.mon-poll-btn{font-size:12px;font-weight:600;letter-spacing:.3px;background:var(--red);color:#fff;border:none;border-radius:var(--radius);padding:6px 14px;cursor:pointer;transition:background .15s;font-family:'DM Sans',sans-serif;}
.mon-poll-btn:hover{background:var(--red2);}
.mon-poll-btn:disabled{background:#d1d5db;cursor:not-allowed;}
.mon-poll-info{font-size:12px;color:var(--mid);text-align:right;line-height:1.7;}
.mon-poll-info strong{color:var(--dark);font-weight:600;}
.countdown{font-size:12px;color:var(--warn);font-weight:600;font-family:'DM Mono',monospace;}

/* ── GLOBAL EMPTY STATES ────────────────────────────────────── */
/*
 * .app-empty — consistent empty/loading state used across all tabs.
 * Variants: .app-empty.error (red), .app-empty.loading (spinner)
 * Use for: no data, no results, loading, error states.
 */
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  color: var(--mid);
  font-size: 12px;
}
.app-empty-icon {
  font-size: 24px;
  margin-bottom: 10px;
  opacity: .5;
}
.app-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
}
.app-empty-sub {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}
.app-empty.error .app-empty-title { color: var(--red); }
.app-empty.error { background: #fff5f5; border-radius: var(--radius); border: 1px solid #fecaca; }

/* ── GLOBAL LOADING SPINNER ─────────────────────────────────── */
/*
 * .app-spinner-wrap — centered spinner container
 * .app-spinner      — red rotating ring
 * .app-spinner-text — optional label below
 * Used in panels, table cells, and full-page loading states.
 */
.app-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 12px;
}
.app-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.app-spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.app-spinner-text {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--mid);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/*
 * Stack of transient notifications (fixed top-right, above everything).
 * Animate in from the right (toastIn keyframe). Fade out via JS opacity transition.
 * .toast.ok — green left border (success); default toast has red left border (error/info).
 * pointer-events:none on container so they don't block map interactions.
 */
.toast-container{position:fixed;top:64px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.toast{background:#fff;border-left:3px solid var(--red);border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--dark);max-width:320px;box-shadow:0 4px 16px rgba(0,0,0,.12);animation:toastIn .2s ease;pointer-events:auto;}
.toast.ok{border-left-color:var(--green);}
.toast-driver{font-weight:700;margin-bottom:3px;}
.toast-detail{color:var(--mid);font-size:12px;}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── INTEGRATIONS (Settings tab) ────────────────────────────── */
/*
 * .intg-slot        — vertical stack of integration provider cards
 * .intg-provider    — one provider card (logo + status dot + key input)
 *   .active-provider — green border (this slot is enabled)
 *   .coming-soon     — grayed out, cursor:not-allowed
 * .intg-logo-cell   — fixed 90×50 cell for provider logos (contain fit)
 * .intg-dot         — small status dot (.ok=green, .err=red, .idle=gray)
 * .intg-key-inp     — monospace API key input (DM Mono for token readability)
 * .spinner          — rotating border animation used on async save buttons
 */
.intg-slot{display:flex;flex-direction:column;gap:8px;}
.intg-provider{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fff;transition:border-color .15s;}
.intg-provider.active-provider{border-color:var(--green);}
.intg-provider.coming-soon{opacity:.5;cursor:not-allowed;}
.intg-logo-cell{width:90px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.intg-logo{width:90px;height:50px;object-fit:contain;display:block;}
.intg-info{flex:1;min-width:0;}
.intg-name{font-size:12px;font-weight:700;color:var(--dark);}
.intg-status{display:flex;align-items:center;gap:5px;}
.intg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.intg-dot.ok{background:var(--green);}
.intg-dot.err{background:var(--red);}
.intg-dot.idle{background:var(--mid);}
.intg-status-txt{font-size:11px;color:var(--mid);}
.intg-badge{font-size:9px;font-weight:700;padding:1px 7px;border-radius:10px;background:#e1f5ee;color:#0f6e56;margin-left:4px;}
.intg-badge.soon{background:var(--bg);color:var(--mid);}
.intg-key-wrap{display:flex;gap:6px;align-items:center;margin-top:8px;}
/* DM Mono is intentionally kept here for API key inputs — monospace
   makes token strings easier to read and spot errors in */
.intg-key-inp{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:'DM Mono',monospace;color:var(--dark);background:#fff;letter-spacing:.08em;}
.intg-key-inp:focus{outline:none;border-color:var(--red);}
.intg-key-btn{padding:5px 12px;font-size:11px;font-weight:700;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--dark);cursor:pointer;white-space:nowrap;transition:all .12s;}
.intg-key-btn:hover{background:var(--bg);}
.intg-radio{display:flex;align-items:center;cursor:pointer;}
.intg-radio input{accent-color:var(--red);margin:0;cursor:pointer;}
/* Spinner — used on async buttons during save operations */
.spinner{display:inline-block;width:10px;height:10px;border:2px solid #e5e7eb;border-top-color:var(--red);border-radius:50%;animation:spin .6s linear infinite;margin-right:4px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── DIVISION FILTER CHIPS ──────────────────────────────────── */
/*
 * .div-chip — clickable pill buttons in the header for SA/MID/All filtering.
 *   .active-chip — colored per division (SA=blue, MID=purple, All=dark border)
 * .fleet-stat-card — clickable status filter cards in the fleet map left panel.
 *   .active-filter — highlighted border + faint shadow
 *   Color variants: .fsc-out (red), .fsc-in (green), .fsc-nr (gray)
 */
.div-chip{display:inline-flex;align-items:center;gap:3px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:var(--bg);color:var(--mid);cursor:pointer;border:1.5px solid transparent;transition:all .15s;user-select:none;}
.div-chip:hover{border-color:var(--mid);}
.div-chip.active-chip{border-color:var(--dark);color:var(--dark);}

/* ── FLEET STATUS FILTER CARDS ───────────────────────────────── */
/*
 * 2×2 grid of clickable cards above the pair list.
 * Active state: colored top border + background tint + raised shadow.
 */
.fleet-stat-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: 8px 6px 7px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.fleet-stat-card:hover { border-color: #9ca3af; border-top-color: #9ca3af; }
.fleet-stat-card.active-filter {
  border-color: var(--border);
  border-top-color: var(--dark);
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.fleet-stat-card.active-filter .fsv { color: var(--dark); }
.fleet-stat-card.fsc-out.active-filter { border-top-color: var(--red);   background: #fff5f5; }
.fleet-stat-card.fsc-in.active-filter  { border-top-color: var(--green); background: #f0fdf4; }
.fleet-stat-card.fsc-nr.active-filter  { border-top-color: var(--mid);   background: var(--bg); }
.fleet-stat-card .fsv {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
  font-family: 'DM Mono', monospace;
}
.fleet-stat-card.fsc-in  .fsv { color: var(--green); }
.fleet-stat-card.fsc-out .fsv { color: var(--red);   }
.fleet-stat-card.fsc-nr  .fsv { color: var(--mid);   }
.fleet-stat-card .fsl {
  font-size: 9px;
  letter-spacing: .6px;
  color: var(--mid);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 600;
}

/* ── SETTINGS TAB ───────────────────────────────────────────── */
/*
 * Layout: .settings-wrap (row flex) = .settings-subnav (160px sidebar) | .settings-body (scrollable)
 * .settings-subnav — vertical sidebar nav with left red border on active item (Sandman+ pattern)
 * .settings-page   — sub-page content; only .active page is display:block
 * .settings-card   — white card with title, used for each settings section
 * .settings-row    — one setting row: label+hint left, control right
 * .settings-inp-sm / .settings-inp-md — small/medium number or text inputs
 * .tol-div-row     — per-division tolerance row (name left, number input right)
 * .recip-row       — alert recipient row (division readonly | email | toggle | delete)
 */
.settings-wrap{display:flex;flex-direction:row;flex:1;overflow:hidden;background:var(--bg);}
.settings-body{flex:1;overflow-y:auto;max-width:700px;padding:24px 20px;width:100%;}
.settings-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);padding:20px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.settings-card-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mid);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.settings-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{flex:1;}
.settings-row-label .lbl{font-size:12px;font-weight:600;color:var(--dark);}
.settings-row-label .hint{font-size:11px;color:var(--mid);margin-top:2px;}
.settings-inp-sm{width:110px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;}
.settings-inp-sm:focus{outline:none;border-color:var(--red);}
.settings-inp-md{width:220px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;}
.settings-inp-md:focus{outline:none;border-color:var(--red);}
.recip-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.recip-row:last-child{border-bottom:none;}
.recip-inp{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;}
.recip-inp:focus{outline:none;border-color:var(--red);}
.recip-del{background:none;border:none;color:var(--mid);cursor:pointer;font-size:16px;padding:0 4px;line-height:1;transition:color .12s;}
.recip-del:hover{color:var(--red);}
.tol-div-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.tol-div-row:last-child{border-bottom:none;}
.tol-div-name{flex:1;font-size:12px;font-weight:600;color:var(--dark);}
.tol-div-input-wrap{display:flex;align-items:center;gap:5px;}
.tol-div-input-wrap input{width:110px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;transition:border-color .15s;}
.tol-div-input-wrap input:focus{outline:none;border-color:var(--red);}
.tol-div-input-wrap span{font-size:11px;color:var(--mid);}
.tol-empty{font-size:11px;color:var(--mid);padding:12px 0;text-align:center;}

/* Settings sidebar nav — vertical left-border highlight pattern (matches Sandman+ app) */
.settings-subnav{display:flex;flex-direction:column;gap:0;width:160px;flex-shrink:0;border-right:1px solid var(--border);background:var(--white);padding:12px 0;}
.settings-subnav-btn{display:block;width:100%;padding:9px 18px;border:none;border-left:2px solid transparent;background:transparent;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mid);cursor:pointer;text-align:left;transition:color .12s,border-color .12s;white-space:nowrap;}
.settings-subnav-btn:hover{color:var(--dark);}
.settings-subnav-btn.active{color:var(--red);border-left-color:var(--red);}
.settings-page{display:none;}
.settings-page.active{display:block;}

/* ═══════════════════════════════════════════
   MOBILE — 768px and below
   Header switches to two-row layout.
   Fleet map goes vertical, right panel hidden.
   Status board stat cards wrap 2×2, log panel hidden.
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* HEADER: logo + hdr-right on row 1, tabs on row 2 */
  header {
    height: auto;
    flex-wrap: wrap;
    padding: 0 12px;
  }
  .logo       { order: 1; flex: 0 0 auto; padding: 8px 0; }
  .hdr-right  { order: 2; padding-bottom: 8px; }
  .tab-btn    { order: 3; height: 38px; padding: 0 6px 6px; font-size: 11px; flex: 1; letter-spacing: .4px; white-space: nowrap; }
  .nav-group  { order: 3; height: 38px; }
  .nav-group-btn { height: 38px; padding: 0 6px 6px; font-size: 11px; letter-spacing: .4px; }
  #divChips   { display: none; }  /* Division chips hidden on mobile — too cramped */
  .api-status { font-size: 10px; padding: 2px 6px; }

  /* FLEET MAP: vertical stack, right panel hidden */
  .mid-row     { flex-direction: column; }
  .panel       { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .panel-right { display: none; }
  #map         { min-height: 0; }

  /* STATUS BOARD: stat cards wrap 2×2, log panel hidden */
  .mon-topbar     { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .mon-stat-card  { flex: 1 1 calc(50% - 4px); min-width: unset; padding: 6px 8px; }
  .mon-stat-card .msv { font-size: 16px; }
  #monDriverSearch { width: 100% !important; }
  .mon-log-panel  { display: none; }
  .mon-grid       { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* HISTORY: tighter padding */
  .hist-filters   { padding: 8px 12px; }
  .hist-actions   { margin-left: 0; }
  .hist-table-wrap { padding: 10px 12px; }

  /* SEARCH DROPDOWN: span full width */
  #searchDropdown { width: calc(100vw - 24px) !important; left: 12px !important; }
}

/* ═══════════════════════════════════════════
   SMALL PHONES — 480px and below
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .tab-btn { font-size: 10px; letter-spacing: .3px; }
  .mon-grid { grid-template-columns: 1fr 1fr; }
  .hist-table { font-size: 11px; }
  .hist-table th, .hist-table td { padding: 5px 6px; }
  .drv-card-name, .drv-card-vehicle, .drv-card-status,
  .drv-card-dist, .drv-card-time { font-size: 11px; }
}

/* ── SILO MONITOR TAB ───────────────────────────────────────── */
/*
 * Layout:
 *   #view-silo (column flex)
 *     .silo-toolbar  — status indicator bar (live dot + timestamp)
 *     .silo-error    — error banner (hidden by default, .visible shows it)
 *     .silo-main     — scrollable content area, populated by silo.js initSiloContent()
 *
 * Division blocks (data-div-key="MID"|"SA") are shown/hidden by filterSiloDivisions()
 * in silo.js based on the activeDivisions Set from fleet.js.
 *
 * Site layout:
 *   Midland: .silo-td-zt-row — TreeDog (flex:2) | divider | Z&T (flex:1)
 *   TreeDog: .silo-td-grids — storage silos | C08 separator pill | operating silos
 *   San Antonio: simpler — just Abrego in a 4-column grid
 *
 * Silo card structure:
 *   .silo-card
 *     .silo-card-head  — colored dot + name + AVEVA tag info icon
 *     .silo-card-body  — SVG shape | stats (level % + tons)
 *
 * Conveyor flow indicators:
 *   .silo-flow-pill — vertical pill between storage and operating sections (C08)
 *   .silo-c08-pill  — horizontal pill in the Midland TreeDog grids layout
 *
 * .silo-pull-pill — "Pull X trucks/hr" recommendation badge in site headers
 */
#view-silo{background:var(--bg);}
.silo-toolbar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0;}
/* .silo-pulse — legacy, display:none; status indicator is now .status-ind pattern */
.silo-pulse{display:none;}
.silo-last-update{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mid);font-family:'DM Sans',sans-serif;}
.silo-error{margin:12px 20px 0;background:rgba(189,5,0,.07);border:1px solid var(--red);border-radius:var(--radius);padding:8px 12px;font-size:11px;font-family:'DM Sans',sans-serif;color:var(--red);display:none;}
.silo-error.visible{display:block;}
.silo-main{flex:1;overflow-y:auto;padding:16px 20px 28px;}
#silo-history-content{flex:1;overflow-y:auto;}

/* Silo division and site structure */
.silo-division-block{margin-bottom:28px;}
.silo-division-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:14px 0 10px;border-top:2px solid var(--border);}
.silo-division-block:first-child .silo-division-header{padding-top:0;border-top:none;}
.silo-division-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 12px;border-radius:var(--radius);white-space:nowrap;}
.silo-division-label.sa  { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.silo-division-label.mid { background:#eeedfe; color:#3c3489; border:1px solid #c4b5fd; }
.silo-division-label.other { background:var(--bg); color:var(--mid); border:1px solid var(--border); }
.silo-division-rule{flex:1;height:1px;background:var(--border);}
.silo-site-block{margin-bottom:20px;}
.silo-site-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.silo-site-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dark);
}
.silo-site-rule{flex:1;height:1px;background:var(--border);}
.silo-tph-badge{font-size:11px;background:var(--white);border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius);font-weight:500;white-space:nowrap;color:var(--dark);font-family:'DM Mono',monospace;}
.silo-tph-badge b{font-family:'DM Mono',monospace;}
.silo-tph-badge .dim{color:var(--mid);font-weight:400;font-family:'DM Mono',monospace;}
.silo-pull-pill{display:flex;align-items:center;gap:5px;background:var(--white);border:1px solid var(--border);padding:2px 10px;border-radius:var(--radius);font-size:11px;font-weight:500;white-space:nowrap;}
.silo-pull-pill .pp-lbl{color:var(--mid);font-weight:400;}
.silo-pull-pill .pp-tgt{color:var(--dark);font-weight:700;font-family:'DM Mono',monospace;}
.silo-sub-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;}

/* Silo cards */
.silo-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  transition: border-top-color .2s;
}
.silo-card.placeholder { opacity: .45; }
.silo-card.lvl-ok       { border-top-color: #94d8ac; }
.silo-card.lvl-warn     { border-top-color: #fcbf28; }
.silo-card.lvl-critical { border-top-color: var(--red); background: #fff9f9; }
.silo-card-head {
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}
.silo-card-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.silo-card-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dark);
}
.silo-card-body { padding: 10px; display: flex; align-items: center; gap: 10px; }
.silo-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.silo-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1px;
}
/* Level % — hero number */
.silo-stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-family: 'DM Mono', monospace;
}
.silo-stat-unit { font-size: 11px; font-weight: 400; color: var(--mid); font-family: 'DM Mono', monospace; }
/* Tons — secondary, smaller */
.silo-stat-tons {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  font-family: 'DM Mono', monospace;
}
/* Critical pulse — draws eye to low silos */
@keyframes siloWarn { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.silo-card.lvl-critical .silo-card-dot { animation: siloWarn 1.8s ease-in-out infinite; }

/* Silo grid layouts */
.silo-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.silo-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}

/* TreeDog side-by-side: storage left, flow arrow center, operating right */
.silo-side-by-side{display:flex;align-items:flex-start;gap:0;}
.silo-stg-col,.silo-op-col{flex:1 1 0;min-width:0;}
.silo-flow-col{flex:0 0 44px;display:flex;align-items:center;justify-content:center;padding:16px 0;}
.silo-flow-vert{display:flex;flex-direction:column;align-items:center;height:100%;gap:0;}
.silo-flow-line{flex:1;width:1px;background:linear-gradient(to bottom,transparent,var(--border) 30%,var(--border) 70%,transparent);min-height:16px;}
/* Conveyor flow pill — vertical between storage and operating sections */
.silo-flow-pill{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:6px 7px;font-size:10px;font-weight:600;color:var(--mid);white-space:nowrap;}
.silo-flow-pill .fa{font-size:11px;color:var(--red);line-height:1;}
.silo-flow-pill .ft{font-size:11px;font-weight:700;color:var(--dark);font-family:'DM Mono',monospace;line-height:1;}
.silo-flow-pill .fu{font-size:10px;color:var(--mid);font-weight:400;}

/* Midland TreeDog+Z&T two-column layout */
.silo-col-divider{background:var(--border);width:1px;margin:0 16px;}
.silo-td-zt-row{display:flex;align-items:flex-start;gap:0;}
.silo-td-wrapper{flex:2 1 0;min-width:0;}
.silo-zt-wrapper{flex:1 1 0;min-width:0;padding-left:16px;}
.silo-td-grids{display:flex;align-items:flex-start;gap:0;}

/* C08 separator — horizontal flow indicator between TreeDog storage and operating */
.silo-c08-sep{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0 0;}
.silo-c08-sep-line{flex:1;width:1px;background:var(--border);min-height:10px;}
.silo-c08-pill{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:6px 7px;font-size:10px;font-weight:600;color:var(--mid);white-space:nowrap;}
.silo-c08-pill .ft{font-family:'DM Mono',monospace;color:var(--dark);}

/* AVEVA tag info icon — "i" button in silo card header, shows tag FQN on hover */
.silo-info-wrap{margin-left:auto;position:relative;display:flex;align-items:center;cursor:default;}
.silo-info-btn{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.silo-info-btn span{font-size:7.5px;font-weight:700;color:var(--mid);font-style:italic;font-family:Georgia,serif;line-height:1;}
.silo-tooltip{position:absolute;right:0;top:calc(100% + 5px);background:var(--dark);color:#e2e4e8;font-size:10px;font-family:'DM Sans',sans-serif;padding:4px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;}
.silo-tooltip::after{content:'';position:absolute;right:4px;top:-3px;border:3px solid transparent;border-top:0;border-bottom-color:var(--dark);}
.silo-info-wrap:hover .silo-tooltip{opacity:1;}

/* Silo responsive: stack 4-col to 2-col at 900px, all to 1-col at 520px */
@media(max-width:900px){.silo-grid-4{grid-template-columns:repeat(2,1fr);}.silo-side-by-side{flex-direction:column;}.silo-td-zt-row{flex-direction:column;}.silo-zt-wrapper{padding-left:0;padding-top:16px;}}
@media(max-width:520px){.silo-grid-2,.silo-grid-4{grid-template-columns:1fr;}}


/* ── BOL LOOKUP TAB ──────────────────────────────────────────── */
/*
 * Centered single-column layout, max 680px.
 * Tab bar at top scales to any number of sources.
 * Compact inline search form, results stack below.
 * PDF action is primary — large full-width button in card.
 */

.bol-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Tab bar — scales to any number of sources */
.bol-tab-bar {
  display: flex;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  flex-shrink: 0;
  gap: 0;
}
.bol-tab {
  padding: 12px 20px 10px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.bol-tab:hover { color: var(--dark); }
.bol-tab.active { color: var(--red); border-bottom-color: var(--red); }

/* Search area — centered, max width */
.bol-search-area {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  flex-shrink: 0;
}

/* Mode pills */
.bol-mode-row { display: flex; gap: 6px; margin-bottom: 12px; }
.bol-mode-btn {
  padding: 5px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--mid);
  cursor: pointer;
  transition: all .12s;
}
.bol-mode-btn.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.bol-mode-btn:hover:not(.active) { border-color: var(--mid); color: var(--dark); }

/* Inline form row */
.bol-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 760px;
}

/* Search button */
.bol-search-btn {
  padding: 8px 18px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bol-search-btn:hover { background: var(--red2); }

/* Results area */
.bol-results-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.bol-results-area::-webkit-scrollbar { width: 5px; }
.bol-results-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Results header */
.bol-results-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
  max-width: 680px;
}

/* Result card */
.bol-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
  max-width: 680px;
  animation: bolSlideIn .18s ease;
}
@keyframes bolSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bol-card-body { padding: 14px 16px; }
.bol-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bol-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  color: #fff;
  flex-shrink: 0;
}
.bol-card-num {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.bol-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 16px;
  margin-bottom: 10px;
}
.bol-card-meta-item { font-size: 12px; color: var(--mid); }
.bol-card-meta-item strong { color: var(--dark); font-weight: 600; }

/* Weight row */
.bol-card-weights {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.bol-wt-group { display: flex; align-items: baseline; gap: 4px; }
.bol-wt-lbl { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mid); }
.bol-wt-num { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 600; color: var(--dark); }
.bol-wt-num.net { color: var(--red); font-size: 18px; font-weight: 700; }
.bol-wt-sep-dot { color: var(--border); }

/* PDF action — full width primary button */
.bol-btn-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 6px;
}
.bol-btn-pdf:hover { background: var(--red2); }
.bol-btn-pdf:disabled { background: #d1d5db; cursor: not-allowed; }

.bol-btn-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 0;
  background: var(--white);
  color: var(--mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.bol-btn-sec:hover { border-color: var(--mid); color: var(--dark); }


/* ── PIKADAY DATE PICKER ────────────────────────────────────── */
/*
 * Override Pikaday's default styles to match the app's design tokens.
 * DM Sans throughout, --red for selected/today, same border/shadow as .cms-sel-menu.
 */
.pika-single {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  background: var(--white);
  color: var(--dark);
  z-index: 3000;
}
.pika-title {
  padding: 8px 10px 4px;
  background: var(--white);
}
.pika-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  background: var(--white);
}
.pika-prev, .pika-next {
  opacity: .6;
}
.pika-prev:hover, .pika-next:hover { opacity: 1; }
.pika-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--mid);
  text-transform: uppercase;
  padding: 4px 0;
}
.pika-button {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--dark);
  background: none;
  border-radius: 4px;
  text-align: center;
  padding: 5px;
}
.pika-button:hover {
  background: var(--bg) !important;
  color: var(--dark) !important;
}
.is-today .pika-button {
  color: var(--red);
  font-weight: 700;
}
.is-selected .pika-button,
.has-event .pika-button {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: none;
}
.is-disabled .pika-button {
  opacity: .3;
  cursor: not-allowed;
}
.pika-select {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  background: var(--white);
  color: var(--dark);
}


/* ── DRIVER PRODUCTIVITY TAB ────────────────────────────────── */
#view-productivity {
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Driver table */
.prod-tbl { width: 100%; border-collapse: collapse; }
.prod-tbl thead th { padding: 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mid); text-align: left; background: var(--bg); border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.prod-tbl thead th.r { text-align: right; }
.prod-tbl tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.prod-tbl tbody tr:hover { background: var(--bg); }
.prod-tbl tbody td { padding: 10px 12px; font-size: 13px; vertical-align: middle; }
.prod-tbl tbody td.r { text-align: right; font-family: 'DM Mono', monospace; font-size: 12px; }
.prod-driver-name { font-weight: 700; font-size: 13px; }
.prod-driver-div { font-size: 10px; margin-top: 3px; }
.prod-rank { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--mid); font-weight: 600; }
/* Score badge */
.prod-sbadge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 600;
  padding: 3px 9px; min-width: 54px; border-radius: 3px;
}
.prod-sg  { background: #d2f0dc; color: #1a7a3a; }
.prod-sg2 { background: #e6f5ea; color: #2a8a4a; }
.prod-sa  { background: #fef3e2; color: #b86000; }
.prod-sp  { background: rgba(189,5,0,.08); color: var(--red); }
.prod-sn  { background: var(--bg); color: var(--mid); }
/* Score bar */
.prod-sbar-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.prod-sbar { flex: 1; max-width: 80px; height: 4px; background: var(--border); border-radius: 2px; }
.prod-sbar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
/* Detail header */
.prod-detail-hdr {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 10px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  flex-shrink: 0;
}
.prod-d-name { font-size: 18px; font-weight: 700; }
.prod-d-period { font-size: 11px; color: var(--mid); font-family: 'DM Mono', monospace; }
.prod-d-score-card {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px;
  border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius);
}
.prod-d-score-label { font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--mid); }
/* Shift/stop timeline */
.prod-day-block { margin-bottom: 16px; border: 1px solid var(--border); background: var(--white); border-radius: var(--radius); overflow: hidden; }
.prod-day-hdr { background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 14px; display: flex; align-items: center; gap: 10px; }
.prod-day-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dark); }
.prod-day-shifts { font-size: 11px; color: var(--mid); font-family: 'DM Mono', monospace; }
.prod-shift-block { border-top: 1px solid var(--border); }
.prod-shift-hdr { padding: 7px 14px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--mid); }
.prod-shift-id { font-size: 10px; color: var(--border); }
.prod-shift-summary { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--bg); border-bottom: 1px solid var(--border); font-family: 'DM Mono', monospace; font-size: 11px; flex-wrap: wrap; }
.prod-ss-label { font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--mid); }
.prod-ss-val { font-size: 12px; font-weight: 600; color: var(--dark); }
.prod-ss-delta-fast { color: #1a7a3a; font-weight: 600; }
.prod-ss-delta-slow { color: var(--red); font-weight: 600; }
/* Stop rows */
.prod-stop-timeline { padding: 0; }
.prod-stop-row { display: flex; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--border); gap: 10px; }
.prod-stop-num { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; color: var(--mid); opacity: .5; width: 18px; text-align: right; padding-top: 2px; flex-shrink: 0; }
.prod-stop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; background: var(--mid); }
.prod-dot-fast { background: #1a7a3a; }
.prod-dot-slow { background: var(--red); }
.prod-dot-na   { background: var(--border); }
.prod-dot-nonop { background: var(--border); }
.prod-stop-content { flex: 1; }
.prod-stop-loc { font-size: 13px; font-weight: 700; }
.prod-stop-type { font-size: 10px; color: var(--mid); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.prod-stop-metrics { display: flex; gap: 14px; margin-top: 5px; flex-wrap: wrap; align-items: center; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--mid); }
.prod-stop-metrics strong { color: var(--dark); font-weight: 600; }
.prod-d-fast { color: #1a7a3a; font-weight: 600; font-family: 'DM Mono', monospace; font-size: 11px; }
.prod-d-slow { color: var(--red); font-weight: 600; font-family: 'DM Mono', monospace; font-size: 11px; }
.prod-d-na { color: var(--mid); opacity: .5; font-family: 'DM Mono', monospace; font-size: 11px; }
/* Transit */
.prod-transit-row { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 44px; border-bottom: 1px solid var(--border); }
.prod-transit-arrow { color: var(--border); font-size: 12px; flex-shrink: 0; }
.prod-transit-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); opacity: .6; width: 50px; flex-shrink: 0; }
.prod-transit-data { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--mid); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Bundle */
.prod-bundle-wrap { border: 1px solid var(--warn); margin: 6px 14px; background: #fffdf0; border-radius: var(--radius); overflow: hidden; }
.prod-bundle-hdr { background: var(--warn); color: #111; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.prod-bundle-summary { padding: 6px 12px; background: #fff8e0; border-top: 1px solid #f0d060; display: flex; align-items: center; gap: 10px; font-family: 'DM Mono', monospace; font-size: 11px; flex-wrap: wrap; }