/* ============================================================
   FleetTrack — modern dashboard UI
   ============================================================ */

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --border: #e4e7f0;
  --text: #161b2e;
  --text-2: #58607a;
  --text-3: #8b92a9;

  --primary: #4f46e5;
  --primary-2: #6366f1;
  --primary-soft: #ecebfd;
  --green: #15a35a;
  --green-soft: #e3f7ec;
  --amber: #d4880b;
  --amber-soft: #fcf1dd;
  --red: #e0455a;
  --red-soft: #fde9ec;
  --gray-soft: #eceef4;

  /* vehicle status colors */
  --st-moving: #1d4ed8;   /* dark blue */
  --st-idle: #15a35a;     /* green */
  --st-nolocate: #e07b18; /* orange */
  --st-offline: #7c8499;  /* grey */
  --st-alarm: #dc2626;    /* red */

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 18px rgba(16, 24, 40, .09);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);

  --radius: 14px;
  --radius-sm: 10px;
  --rail-w: 78px;
  --ctx-h: 60px;
  --sidebar-w: 320px;

  /* tag pill: darken/lighten tag text for contrast on its own tint */
  --tag-ink: #000;
}

[data-theme="dark"] {
  --bg: #0b0f1a;
  --surface: #141a28;
  --surface-2: #1b2333;
  --border: #283146;
  --text: #e9ecf5;
  --text-2: #a4adc4;
  --text-3: #6a7389;

  --primary: #6d68f0;
  --primary-2: #7c79f5;
  --primary-soft: #20243f;
  --tag-ink: #fff;
  --green: #34d27b;
  --green-soft: #122e1f;
  --amber: #f3a623;
  --amber-soft: #312510;
  --red: #f15267;
  --red-soft: #341620;
  --gray-soft: #212a3c;

  --st-moving: #3b82f6;
  --st-idle: #34d27b;
  --st-nolocate: #f3a623;
  --st-offline: #6a7389;
  --st-alarm: #f25555;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}
button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: var(--font); }
.mobile-only { display: none; }

/* ============ APP SHELL ============ */
.app { display: flex; height: 100vh; height: 100dvh; }

/* ---- Left rail ---- */
.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  gap: 8px;
  z-index: 1000;
}

.rail-brand { padding: 6px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rail-brand-v { width: 32px; height: auto; }
.rail-brand-name { font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }

.rail-btn[hidden], .mob-btn[hidden] { display: none !important; }
#dashDeliveriesSection[hidden], #dashAlertsCard[hidden] { display: none !important; }
.rail-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border-radius: 12px;
  color: var(--text-3);
  position: relative;
  transition: background .15s, color .15s;
}
.rail-btn:hover { background: var(--surface-2); color: var(--text); }
.rail-btn.active { background: var(--primary-soft); color: var(--primary); }
.rail-label { font-size: 10px; font-weight: 600; letter-spacing: .01em; text-align: center; }
#railUserName { line-height: 1.2; max-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

.rail .badge {
  position: absolute;
  top: 4px; right: 14px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px;
  border-radius: 8px;
  display: grid; place-items: center;
  padding: 0 4px;
}

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* user menu (popover) */
.user-chip { position: relative; width: 100%; }
.user-menu {
  position: absolute;
  bottom: 4px; left: calc(100% + 10px);
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 1200;
}
.user-menu.open { display: block; }
.user-menu-head { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu-head strong { display: block; font-size: 13px; }
.user-menu-head span { font-size: 11.5px; color: var(--text-3); }
.user-menu-item {
  display: flex; width: 100%; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  text-align: left; transition: background .15s, color .15s;
}
.user-menu-item:hover { background: var(--surface-2); color: var(--text); }
.user-menu-item.danger { color: var(--red); }
.user-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* ---- Workspace ---- */
.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ctxbar {
  height: var(--ctx-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 800;
}
.ctx-menu { display: none; width: 38px; height: 38px; border-radius: 9px; color: var(--text-2); }
.ctx-menu:hover { background: var(--surface-2); }
.ctx-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ctx-title h1 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.ctx-company { font-size: 12px; color: var(--text-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.conn-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gray-soft);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.conn-pill.online { background: var(--green-soft); color: var(--green); }
.conn-pill.online .conn-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.conn-pill.offline { background: var(--red-soft); color: var(--red); }
.conn-pill.offline .conn-dot { background: var(--red); }
.conn-pill.mock { background: var(--amber-soft); color: var(--amber); }
.conn-pill.mock .conn-dot { background: var(--amber); }

.workspace-body { flex: 1; position: relative; min-height: 0; }

/* ---- View panels ---- */
.view-panel { position: absolute; inset: 0; display: none; }
.view-panel.open { display: block; }
.view-panel.map-view.open { display: flex; }
.view-inner { height: 100%; overflow-y: auto; padding: 22px; max-width: 1180px; margin: 0 auto; }

/* shared buttons */
.btn-primary {
  background: var(--primary); color: #fff;
  font-weight: 600; font-size: 13px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  transition: filter .15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); color: var(--text-2);
  transition: border-color .15s, color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-ghost.sm { padding: 5px 10px; font-size: 12px; }
.icon-btn { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); transition: background .15s; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.small { width: 30px; height: 30px; }
.muted { color: var(--text-3); font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.card-head h3 { font-size: 15px; font-weight: 700; }

/* ============ DASHBOARD ============ */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 12px;
}
.sc-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.sc-total { background: var(--primary-soft); color: var(--primary); }
.sc-moving { background: color-mix(in srgb, var(--st-moving) 14%, transparent); color: var(--st-moving); }
.sc-idle { background: color-mix(in srgb, var(--st-idle) 14%, transparent); color: var(--st-idle); }
.sc-nolocate { background: color-mix(in srgb, var(--st-nolocate) 16%, transparent); color: var(--st-nolocate); }
.sc-alarm { background: color-mix(in srgb, var(--st-alarm) 16%, transparent); color: var(--st-alarm); }
.sc-offline { background: var(--gray-soft); color: var(--text-3); }
.sc-body { display: flex; flex-direction: column; }
.sc-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sc-label { font-size: 12px; color: var(--text-3); font-weight: 600; }
.stat-card.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s; }
.stat-card.clickable:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.stat-card.clickable:active { transform: scale(.99); }

/* dashboard tags summary */
.dash-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dash-tag:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.dash-tag .dot { width: 9px; height: 9px; border-radius: 50%; }
.dash-tag b { font-weight: 800; background: var(--surface-2); border-radius: 999px; padding: 1px 9px; font-size: 12px; }

.dash-section-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 12px; }
.dash-section-head h3 { font-size: 14px; font-weight: 700; }
.deliv-cards { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.sc-deliv-active { background: color-mix(in srgb, var(--st-moving) 14%, transparent); color: var(--st-moving); }

.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }

.fleet-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--gray-soft); margin-bottom: 12px; }
.fleet-bar span { display: block; height: 100%; }
.fb-moving { background: var(--st-moving); }
.fb-idle { background: var(--st-idle); }
.fb-nolocate { background: var(--st-nolocate); }
.fb-alarm { background: var(--st-alarm); }
.fb-offline { background: var(--st-offline); }
.fleet-legend { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.fleet-legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.fleet-legend .dot { width: 9px; height: 9px; border-radius: 50%; }

.dash-list { display: flex; flex-direction: column; }
.dash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.dash-row:first-child { border-top: none; }
.dash-row .status-dot { flex-shrink: 0; }
.dash-row .dr-plate { font-weight: 600; }
.dash-row .dr-meta { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 600; }
.dash-row.clickable { cursor: pointer; border-radius: 8px; }
.dash-row.clickable:hover { background: var(--surface-2); }
.dash-empty { color: var(--text-3); font-size: 13px; padding: 18px 0; text-align: center; }

.dash-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--border); font-size: 12.5px; cursor: pointer; }
.dash-alert:first-child { border-top: none; }
.dash-alert:hover { background: var(--surface-2); border-radius: 8px; }
.dash-alert .alert-sev { margin-top: 1px; }
.dash-alert .da-body strong { display: block; color: var(--text); font-size: 13px; }
.dash-alert .da-body span { color: var(--text-3); }

/* ============ LIVE MAP VIEW ============ */
.map-view { overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 600;
  transition: margin-left .25s ease;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-head { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 12px; color: var(--text-3);
  transition: border-color .15s;
}
.search-box:focus-within { border-color: var(--primary); background: var(--surface); }
.search-box input { flex: 1; border: none; outline: none; background: none; padding: 10px 0; font-size: 13px; color: var(--text); }
.search-box input::placeholder { color: var(--text-3); }

.select-inline {
  width: 100%;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px; font-size: 13px; color: var(--text);
  outline: none; transition: border-color .15s;
}
.select-inline:focus { border-color: var(--primary); }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color .15s, background .15s, color .15s;
}
.seg-btn .dot { width: 8px; height: 8px; border-radius: 50%; }
.seg-btn b { font-weight: 800; color: var(--text); }
.seg-btn:hover { border-color: var(--text-3); }
.seg-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }

.tag-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-filter[hidden] { display: none; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--text-2);
  background: var(--surface); transition: border-color .15s, background .15s;
}
.tag-chip:hover { border-color: var(--text-3); }
.tag-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.tag-chip.mini { cursor: default; padding: 2px 8px; font-size: 11px; }

/* search clear button */
.search-clear { display: grid; place-items: center; background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 50%; }
.search-clear[hidden] { display: none; }
.search-clear:hover { color: var(--text); background: var(--surface-2); }

/* compact filter buttons (fleets + tags popovers) */
.filter-row { display: flex; gap: 8px; }
.popover-wrap { position: relative; flex: 1; min-width: 0; }
.popover-wrap[hidden] { display: none; }
.filter-btn {
  width: 100%; display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; transition: border-color .15s;
}
.filter-btn:hover { border-color: var(--text-3); }
.popover-wrap.open .filter-btn { border-color: var(--primary); background: var(--surface); }
.filter-btn > span:not(.filter-count) { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-btn > svg:first-of-type { color: var(--text-3); flex-shrink: 0; }
.filter-count { background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.filter-count[hidden] { display: none; }
.fm-caret { flex-shrink: 0; color: var(--text-3); transition: transform .15s; }
.popover-wrap.open .fm-caret { transform: rotate(180deg); }
.popover-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 6px; max-height: 260px; overflow-y: auto; min-width: 170px;
}
.popover-menu[hidden] { display: none; }
.fm-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.fm-opt:hover { background: var(--surface-2); }
.fm-opt input { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }
.fm-all { border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 3px; padding-bottom: 9px; }
#tagPopMenu .tag-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-clear { width: 100%; margin-top: 8px; background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px; text-align: left; }
.tag-clear[hidden] { display: none; }

/* slim status strip */
.status-strip { display: flex; flex-direction: column; gap: 7px; }
.status-line { display: flex; align-items: center; justify-content: space-between; }
.status-title { font-size: 12px; font-weight: 700; color: var(--text-2); }
.status-title b { color: var(--text); font-weight: 800; }
.status-reset { background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.status-reset[hidden] { display: none; }
.side-fleet-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.side-fleet-bar span { display: block; height: 100%; }
.status-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.sl-item {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.sl-item .dot { width: 8px; height: 8px; border-radius: 50%; }
.sl-item b { font-weight: 800; color: var(--text); }
.sl-item:hover { border-color: var(--text-3); }
.sl-item.active { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); color: var(--text); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.v-tags { flex: 1 1 0%; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.v-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.6; white-space: nowrap; flex-shrink: 0; }
.v-tag.more { background: var(--gray-soft); color: var(--text-2); }

.vehicle-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vehicle-list::-webkit-scrollbar { width: 8px; }
.vehicle-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.v-card {
  text-align: left; width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 7px;
}
.v-card:hover { border-color: var(--text-3); box-shadow: var(--shadow-sm); }
.v-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.v-card-top { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--st-offline); }
.status-dot.moving { background: var(--st-moving); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-moving) 22%, transparent); }
.status-dot.idle { background: var(--st-idle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-idle) 22%, transparent); }
.status-dot.nolocate { background: var(--st-nolocate); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-nolocate) 22%, transparent); }
.status-dot.alarm { background: var(--st-alarm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-alarm) 30%, transparent); animation: alarmpulse 1.2s infinite; }
.status-dot.offline { background: var(--st-offline); }
@keyframes alarmpulse { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-alarm) 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-alarm) 10%, transparent); } }
.v-plate { font-weight: 700; font-size: 13.5px; flex: 0 0 auto; min-width: 0; white-space: nowrap; color: var(--text); }
.v-plate.moving { color: var(--st-moving); }
.v-plate.idle { color: var(--st-idle); }
.v-plate.nolocate { color: var(--st-nolocate); }
.v-plate.alarm { color: var(--st-alarm); }
.v-plate.offline { color: var(--st-offline); }
.v-speed { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--gray-soft); color: var(--text-2); flex-shrink: 0; white-space: nowrap; }
.v-card .v-speed.moving { background: color-mix(in srgb, var(--st-moving) 15%, transparent); color: var(--st-moving); }
.v-card-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.v-time { display: flex; align-items: center; gap: 5px; }
.v-stale { color: var(--red); font-weight: 600; }
.list-empty { text-align: center; color: var(--text-3); padding: 40px 20px; font-size: 13px; }

.sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--border); }
.follow-toggle { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; user-select: none; }
.follow-toggle input { display: none; }
.switch { width: 34px; height: 19px; border-radius: 10px; background: var(--border); position: relative; transition: background .2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: var(--shadow-sm); }
.follow-toggle input:checked + .switch { background: var(--primary); }
.follow-toggle input:checked + .switch::after { transform: translateX(14px); }

.sidebar-collapse {
  position: absolute; left: var(--sidebar-w); top: 14px; z-index: 601;
  width: 24px; height: 40px;
  background: var(--surface); border: 1px solid var(--border); border-left: none;
  border-radius: 0 8px 8px 0; color: var(--text-3);
  display: grid; place-items: center;
  transition: left .25s ease; box-shadow: var(--shadow-sm);
}
.map-view:has(.sidebar.collapsed) .sidebar-collapse { left: 0; }
.map-view:has(.sidebar.collapsed) .sidebar-collapse svg { transform: rotate(180deg); }

/* ---- Map ---- */
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; z-index: 1; background: var(--surface-2); }
[data-theme="dark"] .leaflet-tile { filter: brightness(.7) invert(1) contrast(.85) hue-rotate(190deg) saturate(.45) brightness(.8); }
[data-theme="dark"] .leaflet-container { background: #0b0f1a; }
.leaflet-control-zoom a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

.map-tools { position: absolute; top: 14px; right: 14px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.map-tool { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: color .15s, background .15s; }
.map-tool:hover { color: var(--primary); }
.map-tool.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.v-marker { background: none !important; border: none !important; }
.v-marker-inner { display: flex; flex-direction: column; align-items: center; transform: translateY(-4px); }
.v-marker-pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--text-3); border: 2.5px solid #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; }
.v-marker-pin svg { transform: rotate(45deg); color: #fff; }
.v-marker-pin.moving { background: var(--st-moving); }
.v-marker-pin.idle { background: var(--st-idle); }
.v-marker-pin.nolocate { background: var(--st-nolocate); }
.v-marker-pin.alarm { background: var(--st-alarm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-alarm) 40%, transparent), var(--shadow-md); }
.v-marker-pin.offline { background: var(--st-offline); }
.v-marker-pin.untagged { background: var(--st-offline); }

/* color-by-region legend */
.tagcolor-legend { position: absolute; left: 12px; bottom: 12px; z-index: 460; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; max-width: 210px; max-height: 55%; overflow-y: auto; }
.tagcolor-legend[hidden] { display: none; }
.tcl-hd { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 2px 6px 6px; }
.tcl-note { font-size: 11px; color: var(--text-3); padding: 6px 6px 2px; }
.tcl-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text); background: none; border: none; cursor: pointer; text-align: left; }
.tcl-item[hidden] { display: none; }
.tcl-item:hover { background: var(--surface-2); }
.tcl-item.active { background: var(--primary-soft); }
.tcl-sw { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; background: var(--st-offline); }
.tcl-sw.all { background: conic-gradient(#2563eb, #16a34a, #d97706, #dc2626, #7c3aed, #0d9488, #2563eb); }

/* ===== Multi-view (vehicle wall) ===== */
.multi-wrap { height: 100%; display: flex; flex-direction: column; background: var(--surface-2); }
.multi-toolbar { position: relative; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 9px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; }
.mv-tb-group { display: flex; align-items: center; gap: 8px; }
.mv-tb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.mv-grid-opts { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.mv-gopt { border: none; background: none; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: color .12s, background .12s; }
.mv-gopt:hover { color: var(--text); }
.mv-gopt.active { background: var(--primary); color: #fff; }
.mv-zoom { accent-color: var(--primary); width: 110px; cursor: pointer; }
.mv-tb-spacer { flex: 1; }
.mv-pager { gap: 6px; }
.mv-pg-btn { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: color .12s, background .12s; }
.mv-pg-btn:hover { color: var(--primary); }
.mv-pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.mv-pg-info { font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 44px; text-align: center; }
.mv-count { font-size: 12px; color: var(--text-3); font-weight: 600; }

.multi-grid { flex: 1; min-height: 0; display: grid; gap: 4px; padding: 4px; grid-template-columns: repeat(var(--mv-cols, 3), 1fr); grid-template-rows: repeat(var(--mv-cols, 3), 1fr); }
.mv-pane { position: relative; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); cursor: pointer; min-height: 0; min-width: 0; transition: border-color .12s, box-shadow .12s; }
.mv-pane:hover { border-color: var(--primary); }
.mv-pane.mv-alarm { border-color: var(--st-alarm); box-shadow: 0 0 0 1.5px var(--st-alarm) inset; }
/* Leaflet forces position:relative on its map container, so size the canvas
   explicitly (width/height 100%) rather than relying on inset:0 to stretch. */
.mv-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.mv-canvas.leaflet-container { background: var(--surface-2); }
/* plate sits top-left, speed/time bottom-right — opposite corners so they
   never overlap, even on a dense 8×8 wall. */
.mv-top, .mv-bot { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 4px); pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mv-top { top: 0; left: 0; padding: 4px 8px 4px 6px; border-radius: 0 0 9px 0; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.mv-bot { bottom: 0; right: 0; padding: 3px 8px; border-radius: 9px 0 0 0; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.mv-plate { font-size: 12px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-meta { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mv-pane.mv-empty { background: var(--surface-2); border-style: dashed; cursor: default; }
.mv-pane.mv-empty:hover { border-color: var(--border); }
.mv-pane.mv-empty .mv-canvas { display: none; }
.mv-pane.mv-empty .mv-top { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mv-pane.mv-empty .mv-bot { display: none; }
.mv-pane.mv-empty .mv-plate { color: var(--text-3); }

/* vehicle picker dropdown */
.mv-veh-wrap { position: relative; }
.mv-veh-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s; }
.mv-veh-btn:hover { border-color: var(--primary); }
.mv-veh-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; }
.mv-veh-menu[hidden] { display: none; }
.mv-veh-head input { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; }
.mv-veh-actions { display: flex; gap: 6px; padding: 8px 1px 6px; }
.mv-veh-actions button { flex: 1; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; }
.mv-veh-actions button:hover { color: var(--primary); border-color: var(--primary); }
.mv-pick-list { max-height: 290px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.mv-pick-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); }
.mv-pick-item:hover { background: var(--surface-2); }
.mv-pick-item input { accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.mv-pick-plate { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-pick-empty { padding: 16px 8px; text-align: center; color: var(--text-3); font-size: 12px; }

/* zoom in/out buttons (toolbar master zoom) */
.mv-zoom-btn { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: grid; place-items: center; transition: color .12s, border-color .12s; }
.mv-zoom-btn:hover { color: var(--primary); border-color: var(--primary); }

/* per-channel zoom (top-right of each pane, revealed on hover) */
.mv-zoomctl { position: absolute; top: 4px; right: 4px; z-index: 3; display: flex; gap: 3px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.mv-pane:hover .mv-zoomctl { opacity: 1; pointer-events: auto; }
.mv-pane.mv-empty .mv-zoomctl { display: none; }
.mv-zc-btn { width: 21px; height: 21px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mv-zc-btn:hover { color: var(--primary); border-color: var(--primary); }
@media (hover: none) { .mv-zoomctl { opacity: 1; pointer-events: auto; } }

/* "+ Add vehicle" empty slot */
.mv-pane.mv-add { cursor: pointer; border-style: dashed; background: var(--surface-2); }
.mv-pane.mv-add:hover { border-color: var(--primary); background: var(--primary-soft); }
.mv-pane.mv-add .status-dot { display: none; }
.mv-pane.mv-add .mv-top { position: static; inset: auto; width: 100%; height: 100%; justify-content: center; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mv-pane.mv-add .mv-plate { color: var(--text-3); font-weight: 700; font-size: 13px; }
.mv-pane.mv-add:hover .mv-plate { color: var(--primary); }

/* per-pane assign popover */
.mv-assign { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 28%, transparent); }
.mv-assign[hidden] { display: none; }
.mv-assign-card { width: 320px; max-width: calc(100% - 32px); max-height: 76%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 12px; }
.mv-assign-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--text); padding-bottom: 10px; }
.mv-assign-close { width: 26px; height: 26px; border-radius: 7px; border: none; background: var(--surface-2); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.mv-assign-close:hover { color: var(--primary); }
.mv-assign-card > input { width: 100%; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; margin-bottom: 8px; }
.mv-assign-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mv-assign-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); text-align: left; }
.mv-assign-item:hover { background: var(--surface-2); }
.mv-assign-meta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); }

.mv-marker { background: none !important; border: none !important; }
.mv-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); background: var(--st-offline); border: 2px solid #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.mv-pin svg { transform: rotate(45deg); color: #fff; width: 11px; height: 11px; }
.mv-pin.moving { background: var(--st-moving); }
.mv-pin.idle { background: var(--st-idle); }
.mv-pin.nolocate { background: var(--st-nolocate); }
.mv-pin.alarm { background: var(--st-alarm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-alarm) 40%, transparent), var(--shadow-sm); }
.mv-pin.offline { background: var(--st-offline); }

@media (max-width: 780px) {
  .multi-grid { grid-template-rows: none; grid-auto-rows: 38vh; overflow-y: auto; }
  .multi-toolbar { gap: 10px; }
  .mv-tb-spacer { display: none; }
  .mv-count { display: none; }
}

/* Layer filter — shared between the floating map control and the per-page chip bars */
.map-filter { position: absolute; top: 14px; right: 64px; z-index: 500; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; width: 198px; max-height: 72%; overflow-y: auto; }
.map-filter[hidden] { display: none; }
.lf-hd { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 2px 6px 6px; }
.lf-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.lf-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; text-align: left; opacity: .6; transition: opacity .12s, background .12s; }
.lf-item.on { color: var(--text); opacity: 1; }
.lf-item:hover { background: var(--surface-2); }
.lf-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border); flex-shrink: 0; }
.lf-item.on .lf-box { background: var(--primary); border-color: var(--primary); }
.lf-sw { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; color: #fff; flex-shrink: 0; }
.lf-sw.lf-uncat { background: var(--text-3); }
.lf-name { flex: 1; }

/* Per-page chip layout */
.layer-filter.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.layer-filter.chips:empty { display: none; }
.layer-filter.chips .lf-hd { flex-basis: 100%; padding: 2px 0; }
.layer-filter.chips .lf-sep { display: none; }
.layer-filter.chips .lf-item { width: auto; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px 4px 7px; }
.layer-filter.chips .lf-item.on { border-color: var(--primary); background: var(--primary-soft); }

/* Off-map (filtered out) rows in the geofence / places lists */
.gf-item.off-map, .poi-item.off-map { opacity: .5; }
.off-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; flex-shrink: 0; }
.cat-vis.on { color: var(--primary); }
.v-marker-inner.selected .v-marker-pin { transform: rotate(-45deg) scale(1.14); box-shadow: 0 0 0 3px var(--text), 0 0 0 5px rgba(255,255,255,.92), var(--shadow-md); }
.v-marker-inner.selected .v-marker-label { margin-top: 19px; background: var(--primary); color: #fff; border-color: var(--primary); }
.v-marker-label { margin-top: 5px; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-family: var(--font); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 7px; white-space: nowrap; box-shadow: var(--shadow-sm); }

/* ============ DETAIL PANEL ============ */
.detail-panel {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  max-width: 980px; margin: 0 auto; z-index: 450;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 4px 18px 16px;
  transform: translateY(calc(100% + 24px));
  transition: transform .3s cubic-bezier(.32,.72,.33,1);
}
.detail-panel.open { transform: translateY(0); }
/* collapsed: slide down so only the grab strip peeks above the bottom edge */
.detail-panel.open.collapsed { transform: translateY(calc(100% - 32px)); }
.detail-grab { display: flex; justify-content: center; padding: 6px 0 2px; cursor: pointer; }
.detail-grab span { width: 38px; height: 4px; border-radius: 2px; background: var(--border); transition: background .15s, width .15s; }
.detail-grab:hover span { width: 52px; background: var(--text-3); }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 12px; }
.detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.detail-title h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.detail-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#detailPanel [data-field][hidden] { display: none !important; }
.chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--gray-soft); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.chip.moving { background: color-mix(in srgb, var(--st-moving) 14%, transparent); color: var(--st-moving); }
.chip.idle { background: color-mix(in srgb, var(--st-idle) 14%, transparent); color: var(--st-idle); }
.chip.nolocate { background: color-mix(in srgb, var(--st-nolocate) 16%, transparent); color: var(--st-nolocate); }
.chip.alarm { background: color-mix(in srgb, var(--st-alarm) 16%, transparent); color: var(--st-alarm); }
.chip.offline { background: var(--gray-soft); color: var(--text-3); }
.detail-actions { display: flex; align-items: center; gap: 8px; }
.detail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.metric { background: var(--surface-2); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric[hidden] { display: none !important; }
.metric-wide { grid-column: span 3; }
.m-span2 { grid-column: span 2; }
.m-span3 { grid-column: span 3; }
.m-span4 { grid-column: span 4; }
.metric-wrap .metric-value { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* field show/hide config popover */
.field-cfg { position: relative; }
.field-cfg-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 6px; max-height: 320px; overflow-y: auto; }
.field-cfg-menu[hidden] { display: none; }
.field-cfg-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 4px 8px 6px; }
.fc-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.fc-opt:hover { background: var(--surface-2); }
.fc-opt input { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }
.metric-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.metric-value { font-size: 13px; font-weight: 500; color: var(--text-2); white-space: normal; overflow-wrap: break-word; }
.metric-value b { font-size: 15px; font-weight: 800; color: var(--text); }
.metric-value.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; }
.metric-value.on { color: var(--green); font-weight: 700; }
.metric-value.off { color: var(--text-3); font-weight: 700; }
.io-chip { display: inline-grid; place-items: center; min-width: 26px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--gray-soft); color: var(--text-3); margin-right: 4px; padding: 0 6px; }
.io-chip.on { background: var(--green-soft); color: var(--green); }
/* named I/O channels (per-vehicle labelled inputs, e.g. door / wingbox) */
.io-named { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--gray-soft); color: var(--text-2); margin-right: 4px; white-space: nowrap; }
.io-named b { font-size: 11px; font-weight: 800; color: var(--text); }
.io-named.alert { background: var(--red-soft, #fde8e8); color: var(--red, #c0392b); }
.io-named.alert b { color: var(--red, #c0392b); }
.link-btn { color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ============ PLAYBACK ============ */
.playback-bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  max-width: 760px; margin: 0 auto; z-index: 470;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
}
.playback-bar[hidden] { display: none; }
.pb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-head strong { font-size: 14px; }
.pb-head input[type="date"] { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 13px; color: var(--text); outline: none; }
.pb-head input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--cal-filter, none); }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.pb-head .icon-btn { margin-left: auto; }
.pb-presets { display: flex; gap: 4px; }
.pb-preset { font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border); color: var(--text-2); transition: border-color .15s, color .15s, background .15s; }
.pb-preset:hover { border-color: var(--primary); color: var(--primary); }
.pb-preset.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pb-controls { display: flex; align-items: center; gap: 10px; }
.pb-controls input[type="range"] { flex: 1; accent-color: var(--primary); }
.pb-controls input[type="range"]:disabled { opacity: .4; }
.pb-play { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; }
.pb-play:disabled { opacity: .5; cursor: default; }
.pb-speed { width: auto; margin-top: 0; padding: 7px 8px; }
.pb-time { font-size: 12px; font-weight: 600; color: var(--text-2); min-width: 150px; text-align: right; white-space: nowrap; }
.pb-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pb-marker { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: var(--shadow-md); }
.pb-stop { width: 18px; height: 18px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); background: var(--text-2); border: 2px solid #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: #fff; }
.pb-stop svg { transform: rotate(45deg); }
.pb-clean-fields { display: inline-flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.pb-clean-fields label { display: inline-flex; align-items: center; gap: 5px; }
.pb-clean-fields input { width: 52px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12.5px; }
#map.playback-on .v-marker { display: none; }
#map.playback-on .v-marker.pb-keep { display: block; }

/* ============ REPORTS / ALERTS / GEOFENCE ============ */
.report-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.field label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.planned-row { display: flex; gap: 8px; }
.planned-row #tripDate { flex: 2; }
.planned-row #tripTime { flex: 1; }
.field-hint { font-size: 10.5px; line-height: 1.35; color: var(--text-3); }
.field select, .field input { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 10px; font-size: 13px; color: var(--text); outline: none; transition: border-color .15s; }
.field select:focus, .field input:focus { border-color: var(--primary); }
[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.report-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.report-result-head h3 { font-size: 15px; font-weight: 700; }
#repTableWrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.report-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.report-table tr:last-child td { border-bottom: none; }
.report-footer { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--text-2); }

/* Login log (admin) */
.login-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.login-pill.ok { background: var(--green-soft); color: var(--green); }
.login-pill.bad { background: var(--red-soft); color: var(--red); }
.login-table .login-ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); }
.login-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
.login-pager button[disabled] { opacity: .45; pointer-events: none; }
.idle-field[hidden] { display: none; }
.idle-inputs { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); height: 38px; }
.idle-inputs span { display: inline-flex; align-items: center; gap: 5px; }
.idle-inputs input { width: 52px; padding: 6px 7px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 13px; outline: none; }
.idle-inputs input:focus { border-color: var(--primary); }

.alert-item { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.alert-sev { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.alert-sev.high { background: var(--red-soft); color: var(--red); }
.alert-sev.med { background: var(--amber-soft); color: var(--amber); }
.alert-sev.low { background: var(--gray-soft); color: var(--text-2); }
.alert-body { flex: 1; font-size: 13px; color: var(--text-2); }
.alert-body strong { color: var(--text); }
.alert-body .muted { display: block; margin-top: 2px; font-size: 12px; }

.gf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gf-item { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .05s; }
.gf-item:hover { border-color: var(--accent); }
.gf-item:active { transform: scale(.997); }
.gf-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.gf-item-body strong { color: var(--text); }
.gf-item-body .muted { font-size: 12px; }
.gf-locate { flex-shrink: 0; }
.gf-cat { flex-shrink: 0; max-width: 140px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 11.5px; color: var(--text); outline: none; }
.gf-cat:focus { border-color: var(--primary); }
.gf-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gf-msg p { font-size: 13px; color: var(--text-2); margin: 0; }

/* Places / Geofences tabs */
.places-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.places-tab { padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.places-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ptab-panel[hidden] { display: none; }
.poi-showmap { margin-right: auto; }

/* POI list items */
.poi-item { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.poi-cat-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: #fff; }
.poi-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.poi-item-body strong { color: var(--text); }
.poi-item-body .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poi-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
#poiMap { width: 100%; height: 100%; min-height: 420px; }
.poi-marker-label { font: 700 10px Inter, sans-serif; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* Manage categories modal */
.cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cat-row-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.cat-form { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cat-form-title { font-size: 12px; font-weight: 700; color: var(--text-2); }
.cat-form-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.cat-form input[type="text"] { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); outline: none; }
.cat-form input[type="text"]:focus { border-color: var(--primary); }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-opt { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 16px; background: var(--surface); cursor: pointer; }
.emoji-opt.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cat-form-actions { display: flex; gap: 8px; margin-top: 6px; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--text-3); }
.empty-state svg { margin-bottom: 12px; opacity: .5; }
.empty-state h3 { color: var(--text); font-size: 15px; margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 380px; margin: 0 auto 16px; }

/* ============ TRIPS ============ */
.trips-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.trips-list { display: flex; flex-direction: column; gap: 10px; }

/* toolbar */
.trips-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.trips-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trips-toolbar .seg { gap: 6px; }
.trip-metrics { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.trips-tools-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trips-tools-row .search-box { flex: 1; min-width: 180px; margin: 0; }
.trips-tools-row .select-inline { width: auto; margin: 0; }
.trips-tools-row .btn-primary { margin-left: auto; }
.view-toggle { display: flex; border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--text-3); }
.view-toggle button.active { background: var(--primary); color: #fff; }

/* table view */
.trip-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.trip-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
.trip-table th:hover { color: var(--text); }
.trip-table th .sort-ar { font-size: 9px; }
.trip-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.trip-table tr:last-child td { border-bottom: none; }
.trip-table tbody tr { cursor: pointer; }
.trip-table tbody tr:hover { background: var(--surface-2); }
.trip-table .tt-plate { font-weight: 700; color: var(--text); }
.tt-prog { display: flex; align-items: center; gap: 7px; }
.tt-prog .prog-bar { width: 60px; }
.trips-empty { text-align: center; color: var(--text-3); padding: 40px 20px; font-size: 13px; }

.trip-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.trip-card:hover { border-color: var(--text-3); box-shadow: var(--shadow-md); }
.trip-card .tc-main { flex: 1; min-width: 0; }
.trip-card .tc-top { display: flex; align-items: center; gap: 8px; }
.trip-card .tc-plate { font-weight: 700; font-size: 14px; }
.tc-id { font-size: 11.5px; font-weight: 700; color: var(--text-3); font-family: ui-monospace, Menlo, monospace; }
.trip-card .tc-ref { font-size: 12px; color: var(--text-3); }
.trip-card .tc-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.trip-card .tc-prog { width: 120px; flex-shrink: 0; }
.prog-bar { height: 7px; border-radius: 4px; background: var(--gray-soft); overflow: hidden; }
.prog-bar span { display: block; height: 100%; background: var(--st-idle); }
.tc-prog small { font-size: 11px; color: var(--text-3); display: block; margin-top: 4px; text-align: right; }

.trip-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.trip-status.active { background: color-mix(in srgb, var(--st-moving) 14%, transparent); color: var(--st-moving); }
.trip-status.completed { background: var(--green-soft); color: var(--green); }
.trip-status.completed_issues { background: color-mix(in srgb, var(--st-nolocate) 16%, transparent); color: var(--st-nolocate); }
.trip-status.cancelled { background: var(--gray-soft); color: var(--text-3); }

/* create + detail modal: two columns (form/list | map) */
.modal-lg { max-width: 920px; width: 100%; }
.trip-create, .trip-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.trip-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--border); max-height: 70vh; overflow-y: auto; }
.trip-map-wrap { min-height: 420px; position: relative; }
#tripCreateMap, #tripDetailMap { width: 100%; height: 100%; min-height: 420px; }
.orders-head { display: flex; align-items: center; justify-content: space-between; }
.orders-head label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.pick-hint { font-size: 10.5px; line-height: 1.35; color: var(--text-3); }

.order-edit { border: 1px solid var(--border); border-radius: 10px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.order-edit .oe-top { display: flex; align-items: center; justify-content: space-between; }
.order-edit .oe-num { font-size: 12px; font-weight: 700; }
.order-edit input { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; color: var(--text); outline: none; width: 100%; }
.order-edit input:focus { border-color: var(--primary); }
.oe-point { display: flex; flex-direction: column; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.oe-point.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.oe-point-top { display: flex; align-items: center; gap: 8px; }
.oe-point .oe-label { font-size: 11px; font-weight: 700; width: 54px; flex-shrink: 0; }
.oe-point.pickup .oe-label { color: var(--st-moving); }
.oe-point.dropoff .oe-label { color: var(--st-nolocate); }
.oe-coord { flex: 1; font-size: 11.5px; color: var(--text-2); font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-coord.unset { color: var(--text-3); font-family: var(--font); font-style: italic; }
.oe-point-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oe-point .oe-save { flex-shrink: 0; color: var(--text-3); }
.oe-point .oe-save:hover { color: var(--primary); }
.oe-point-save { display: flex; gap: 6px; }
.oe-point-save[hidden] { display: none; }
.oe-point-save .oe-saveinput { flex: 1; min-width: 0; }
.oe-savego, .oe-savecancel { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px; border: 1.5px solid var(--border); color: var(--text-2); }
.oe-savego { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Per-row pickup/dropoff: icon + inline search + map button (+ save when set). */
.oe-point-row { display: flex; align-items: center; gap: 7px; }
.oe-icon { flex-shrink: 0; display: grid; place-items: center; width: 22px; }
.oe-point.pickup .oe-icon { color: var(--st-moving); }
.oe-point.dropoff .oe-icon { color: var(--st-nolocate); }
.oe-search { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--text); outline: none; }
.oe-search:focus { border-color: var(--primary); }
.oe-results { margin-top: 6px; max-height: 230px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: 4px; }
.oe-results[hidden] { display: none; }
.oe-map.active { background: var(--primary); color: #fff; }
.oe-map.active:hover { background: var(--primary); }
/* multidrop: stops head buttons */
.orders-head-btns { display: flex; align-items: center; gap: 6px; }
/* a delivery stop card */
.stop { border: 1px solid var(--border); border-radius: 8px; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.stop-row { display: flex; align-items: center; gap: 7px; }
.stop-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--st-nolocate); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.stop-expand svg { transition: transform .15s; }
.stop-expand.open svg { transform: rotate(180deg); }
.stop-details { display: flex; flex-direction: column; gap: 7px; padding-top: 7px; border-top: 1px dashed var(--border); }
.stop-details[hidden] { display: none; }
.stop-details input { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; color: var(--text); outline: none; width: 100%; }
.stop-details input:focus { border-color: var(--primary); }
.sd-override { display: flex; flex-direction: column; gap: 6px; }
.sd-override .oe-icon { color: var(--st-moving); }
.sd-override-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.sd-override-label .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.sd-actions { display: flex; align-items: center; gap: 6px; }
.sd-actions .stop-del { margin-left: auto; }
.oe-result { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 7px; background: none; border: none; cursor: pointer; }
.oe-result:hover { background: var(--surface-2); }
.oe-result-ic { font-size: 13px; line-height: 1.3; flex-shrink: 0; width: 16px; text-align: center; }
.oe-result-txt { min-width: 0; }
.oe-result-txt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-result-txt small { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-result-empty { padding: 8px 9px; font-size: 11.5px; color: var(--text-3); }
/* Set (place-on-map) and Save (bookmark) are icon buttons in the point row. */
.oe-saveinput { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--text); outline: none; }
.oe-saveinput:focus { border-color: var(--primary); }
.oe-del { color: var(--text-3); }
.oe-del:hover { color: var(--red); }

/* detail: orders + timeline */
.td-orders { padding: 16px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); max-height: 70vh; overflow-y: auto; }
.td-order { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.td-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.td-controls #tdShareTrip { margin-left: auto; }
.eta-chip { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); white-space: nowrap; }
.eta-chip + .route-toggle { margin-left: 6px; }
.route-toggle { width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); margin-left: auto; }
.route-toggle.on { color: var(--primary); }
.route-toggle:hover { background: var(--surface-2); }
.td-order .tdo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.td-order .tdo-head .ostatus { margin-left: 0; }
.td-order .tdo-ref { font-weight: 700; font-size: 13px; }
.td-order .tdo-route { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.td-order .tdo-route b { color: var(--text); font-weight: 600; }
.ostatus { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; background: var(--gray-soft); color: var(--text-2); white-space: nowrap; }
.ostatus.at_pickup, .ostatus.at_dropoff { background: color-mix(in srgb, var(--st-nolocate) 16%, transparent); color: var(--st-nolocate); }
.ostatus.en_route_pickup, .ostatus.en_route_dropoff { background: color-mix(in srgb, var(--st-moving) 14%, transparent); color: var(--st-moving); }
.ostatus.picked_up { background: var(--primary-soft); color: var(--primary); }
.ostatus.delivered { background: var(--green-soft); color: var(--green); }
.ostatus.cancelled, .ostatus.failed { background: var(--red-soft); color: var(--red); }

.timeline { display: flex; flex-direction: column; gap: 0; margin: 6px 0 10px; }
.tl-row { display: flex; gap: 9px; font-size: 11.5px; }
.tl-dot { width: 9px; flex-shrink: 0; position: relative; }
.tl-dot::before { content: ''; position: absolute; left: 3px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.tl-row:not(:last-child) .tl-dot::after { content: ''; position: absolute; left: 6px; top: 9px; bottom: -6px; width: 1.5px; background: var(--border); }
.tl-body { padding-bottom: 8px; }
.tl-body b { font-weight: 600; }
.tl-body span { color: var(--text-3); }
.tl-note { color: var(--text-2); font-size: 11.5px; font-style: italic; margin-top: 1px; }
.tl-photo { display: block; margin-top: 5px; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.pod-note { flex: 1; min-width: 120px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12px; color: var(--text); outline: none; }
.pod-note:focus { border-color: var(--green); }
.pod-photo-btn { cursor: pointer; }
.pod-file { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fail-reason { flex: 1; min-width: 120px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12px; color: var(--text); outline: none; }
.fail-reason:focus { border-color: var(--red); }
.tdo-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.tdo-actions .btn-ghost { padding: 6px 11px; font-size: 12px; }
.danger-btn { color: var(--red); border-color: var(--red-soft); }
.danger-btn:hover { border-color: var(--red); color: var(--red); }
.tdo-actions .btn-ghost.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tdo-share { margin-top: 9px; padding: 11px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2, rgba(0,0,0,.02)); }
.share-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.share-link { flex: 1 1 100%; min-width: 0; font-size: 12px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-family: ui-monospace, monospace; }
/* after the link wraps to its own line, keep "Expires…" left and the buttons right */
.share-row .share-exp { margin-right: auto; }
.tdo-share .btn-ghost { padding: 6px 11px; font-size: 12px; }
.share-user { flex: 1; font-size: 13px; font-weight: 600; }
.share-user-input { flex: 1; min-width: 0; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }

/* Shared with me (Phase B) */
.shared-intro { color: var(--muted); font-size: 13px; margin-bottom: 12px; max-width: 640px; }
.shared-card { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color .15s, transform .05s; }
.shared-card:hover { border-color: var(--primary); }
.shared-card:active { transform: scale(.997); }
.shared-card-main { flex: 1; min-width: 0; }
.shared-card-top { display: flex; align-items: center; gap: 9px; }
.shared-ref { font-weight: 700; }
.shared-card-sub { font-size: 13px; color: var(--text); margin-top: 3px; }
.shared-card-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.shared-card-arrow { color: var(--muted); flex-shrink: 0; }

/* Shared view tabs (with me / by me) */
.shared-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.shared-tab { padding: 7px 15px; border: none; background: none; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; }
.shared-tab:hover { color: var(--text); }
.shared-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.shared-pane[hidden] { display: none; }
.shared-out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* grouping toggle (text segmented control) */
.group-toggle { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius-sm); }
.group-toggle button { padding: 5px 11px; border: none; background: none; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.group-toggle button:hover { color: var(--text); }
.group-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* outbound (shared-by-me) rows */
.shareout-group-h { font-size: 11.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.shareout-group:first-child .shareout-group-h { margin-top: 2px; }
.shareout-group-n { background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; letter-spacing: 0; }
.shareout-row { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color .15s; margin-bottom: 8px; }
.shareout-row:hover { border-color: var(--primary); }
.shareout-main { flex: 1; min-width: 0; }
.shareout-top { display: flex; align-items: center; gap: 9px; }
.shareout-target { margin-top: 7px; }
.shareout-to { font-size: 12.5px; font-weight: 700; }
.shareout-to.user { color: var(--primary); }
.shareout-to.link { color: var(--text-2); }
.shareout-actions { display: flex; gap: 7px; flex-shrink: 0; }
.shareout-actions .btn-ghost { padding: 6px 11px; font-size: 12px; }
.sd-status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sd-meta { font-size: 13px; color: var(--muted); margin: 8px 0; }
.sd-stepper { display: flex; margin: 6px 0 14px; }
.sd-step { flex: 1; text-align: center; position: relative; font-size: 11px; color: var(--muted); font-weight: 600; }
.sd-step .b { width: 16px; height: 16px; border-radius: 50%; background: var(--border); margin: 0 auto 6px; position: relative; z-index: 1; }
.sd-step.done .b, .sd-step.cur .b { background: var(--primary); }
.sd-step.cur .b { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.sd-step.done, .sd-step.cur { color: var(--text); }
.sd-step:not(:first-child)::before { content: ''; position: absolute; left: -50%; top: 7px; width: 100%; height: 2px; background: var(--border); }
.sd-step.done::before, .sd-step.cur::before { background: var(--primary); }
#sharedDetailMap { height: 100%; min-height: 320px; border-radius: 12px; }
.pin { width: 24px; height: 24px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: grid; place-items: center; }
.pin span { transform: rotate(45deg); color: #fff; font: 700 10px Inter, sans-serif; }

/* ============ MODALS ============ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, .55); z-index: 1500; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; display: none; max-height: 90vh; overflow-y: auto; }
.modal.open { display: block; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal header h3 { font-size: 15px; font-weight: 700; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-body .field { min-width: 0; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.tag-row { display: flex; align-items: center; gap: 9px; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.tag-row:last-child { border-bottom: none; }
.tag-row .tag-assign { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }
.tag-row .tag-name { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 8px; padding: 6px 9px; font-size: 13px; color: var(--text); outline: none; }
.tag-row .tag-name:focus { border-color: var(--primary); background: var(--surface); }
.tag-row .tag-del { color: var(--text-3); flex-shrink: 0; }
.tag-row .tag-del:hover { color: var(--red); }
.tag-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag-new input[type="text"] { flex: 1; min-width: 110px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 13px; color: var(--text); outline: none; }
.tag-new input[type="text"]:focus { border-color: var(--primary); }
.color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.sel { border-color: var(--text); }
/* native colour input as a swatch (row recolor + new-tag custom) */
.tag-color, .swatch-custom { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; flex-shrink: 0; background: var(--surface-2); overflow: hidden; }
.tag-color::-webkit-color-swatch-wrapper, .swatch-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.tag-color::-webkit-color-swatch, .swatch-custom input::-webkit-color-swatch { border: none; border-radius: 5px; }
.swatch-custom { position: relative; display: grid; place-items: center; }
.swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch-custom span { font-size: 14px; font-weight: 700; color: var(--text-3); line-height: 1; }
.swatch-custom.sel { border-color: var(--text); border-width: 2px; }
.swatch-custom.sel span { color: #fff; }

/* ============ TOAST ============ */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 16px); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 2000; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: var(--shadow-lg); max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ LOGIN (dark, Vamos-branded) ============ */
.login-screen {
  position: fixed; inset: 0; z-index: 3000;
  background: #1a1512;
  overflow: hidden;
}
.login-screen[hidden] { display: none; }

/* bottom archipelago artwork */
.login-art {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
}
.login-art img { width: 100%; max-width: 1180px; height: auto; display: block; }

.login-content {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 7vh 48px 0;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px;
  align-items: start;
}

.login-intro { color: #fff; max-width: 460px; }
.login-intro h1 { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px; }
.login-intro > p { font-size: 15.5px; color: #b9b2ab; line-height: 1.6; margin-bottom: 26px; }
.login-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.login-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #e7e2dc; }
.lp-check { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.lp-check::after { content: ''; position: absolute; left: 4px; top: 4px; width: 11px; height: 6px; border-left: 2.4px solid #2f5dff; border-bottom: 2.4px solid #2f5dff; transform: rotate(-45deg); }

.login-right { display: flex; flex-direction: column; align-items: flex-end; }
.login-logo-img { height: 68px; width: auto; margin-bottom: 6px; }
.login-console-tag { font-size: 13px; color: #9a938b; font-weight: 600; letter-spacing: .02em; margin-bottom: 32px; }

.login-form { width: 100%; }
.login-form h2 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.login-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.lf { display: flex; flex-direction: column; gap: 7px; }
.lf label { font-size: 12.5px; font-weight: 600; color: #cfc9c2; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap svg { position: absolute; left: 13px; color: #8b847d; pointer-events: none; }
.input-wrap input {
  width: 100%;
  background: #241e1a;
  border: 1px solid #3a322c;
  border-radius: 10px;
  padding: 13px 13px 13px 38px;
  font-size: 14px; color: #fff;
  outline: none; transition: border-color .15s, background .15s;
}
.input-wrap input::placeholder { color: #6f6760; }
.input-wrap input:focus { border-color: #2f5dff; background: #2a2320; }

.login-error { color: #ff7a7a; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.login-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #2f5dff; color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 14px; border-radius: 11px;
  transition: filter .15s;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:disabled { opacity: .65; cursor: default; }
.login-foot { font-size: 12px; color: #8b847d; margin-top: 14px; text-align: center; }

/* ============ MOBILE BOTTOM NAV ============ */
.mobnav { display: none; }
.rail-scrim { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
  .stat-cards { grid-template-columns: repeat(3, 1fr); }
  .deliv-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --sidebar-w: 100%; }

  /* rail becomes a slide-in drawer */
  .rail {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .rail.open { transform: translateX(0); }
  .rail-scrim.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }

  .ctx-menu { display: grid; }
  .ctx-company { display: none; }

  .workspace { padding-bottom: 62px; }

  /* mobile bottom nav */
  .mobnav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 1100;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mob-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 10px; font-weight: 600; }
  .mob-btn.active { color: var(--primary); }

  /* live map: sidebar becomes a bottom sheet */
  .map-view { flex-direction: column; }
  .sidebar {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 58%;
    border-right: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(0);
    transition: transform .28s ease;
    z-index: 600;
  }
  .sidebar.collapsed { margin-left: 0; transform: translateY(calc(100% - 52px)); }
  .sidebar-head { border-radius: 18px 18px 0 0; }
  .sidebar-collapse {
    left: 50%; top: -34px; transform: translateX(-50%);
    width: 80px; height: 30px; border: 1px solid var(--border);
    border-radius: 9px 9px 0 0;
  }
  .map-view:has(.sidebar.collapsed) .sidebar-collapse { left: 50%; }
  .map-view:has(.sidebar.collapsed) .sidebar-collapse svg { transform: rotate(-90deg); }
  .sidebar-collapse svg { transform: rotate(90deg); }

  .detail-panel { left: 8px; right: 8px; bottom: 8px; padding: 4px 14px 14px; max-height: 70vh; overflow-y: auto; }
  .detail-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .detail-title h2 { white-space: nowrap; }
  .detail-actions { justify-content: flex-end; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-wide,
  .detail-grid .m-span2, .detail-grid .m-span3, .detail-grid .m-span4 { grid-column: span 2; }
  .detail-actions .btn-ghost { padding: 7px 10px; }

  .playback-bar { left: 8px; right: 8px; bottom: 8px; }
  .pb-time { min-width: 0; }

  .view-inner { padding: 16px; }
  .mobile-only { display: flex; }

  /* trips table sheds non-essential columns */
  .trips-tools-row .btn-primary { margin-left: 0; }
  .trip-table th:nth-child(3), .trip-table td:nth-child(3),
  .trip-table th:nth-child(4), .trip-table td:nth-child(4) { display: none; }

  /* trip modals stack on mobile */
  .trip-create, .trip-detail { grid-template-columns: 1fr; }
  .trip-form, .td-orders { border-right: none; border-bottom: 1px solid var(--border); max-height: none; }
  .trip-map-wrap { min-height: 300px; }
  #tripCreateMap, #tripDetailMap { min-height: 300px; }

  /* login: stack intro + form, shrink artwork */
  .login-screen { overflow-y: auto; }
  .login-content { grid-template-columns: 1fr; gap: 26px; padding: 5vh 22px 0; }
  .login-intro h1 { font-size: 28px; }
  .login-right { align-items: stretch; }
  .login-logo-img { height: 72px; align-self: flex-start; }
  .login-console-tag { margin-bottom: 20px; }
  .login-fields { grid-template-columns: 1fr; }
  .login-art { height: 38%; opacity: .5; }
}

@media (max-width: 420px) {
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-num { font-size: 22px; }
  .detail-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ===== Route fences (Geofences view tab) + off-route alert report ===== */
.rf-row { display: flex; flex-direction: column; gap: 10px; }
.rf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-head strong { font-size: 14px; }
.rf-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.rf-meta { font-size: 12px; }
.rf-actions { margin-left: auto; display: flex; gap: 6px; }
.rf-assign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--border); }
.rf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.rf-chip.active { background: rgba(124, 58, 237, .12); border-color: #7c3aed; color: #7c3aed; }
.rf-chip button { border: none; background: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; color: inherit; }
.rf-chip .rf-remove:hover { color: var(--st-alarm); }
.rf-add .rf-veh { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); }

.alerts-section { margin-bottom: 22px; }
.alerts-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 0 0 10px; }
.ra-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ra-filter { font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); }
.ra-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ra-table th { text-align: left; color: var(--text-2); font-weight: 600; padding: 8px 10px; border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.ra-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.ra-table tr:hover td { background: var(--surface-2); }
.ra-table a { color: #2563eb; text-decoration: none; }
.ra-wa { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.ra-wa.sent { background: rgba(22, 163, 74, .14); color: #16a34a; }
.ra-wa.failed { background: rgba(220, 38, 38, .14); color: var(--st-alarm); }
.ra-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* New-route modal: source toggle (Upload / From history) */
.rm-source-tabs { display: flex; gap: 6px; }
.rm-src { flex: 1; padding: 7px 10px; font-size: 12.5px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 8px; cursor: pointer; }
.rm-src.active { border-color: #7c3aed; background: rgba(124, 58, 237, .1); color: #7c3aed; }
.rm-row { display: flex; gap: 10px; }
.rm-row .field { flex: 1; }

/* Route "Show/Hide on map" toggle — active (shown) state */
.rf-map.on { border-color: #7c3aed; background: rgba(124, 58, 237, .12); color: #7c3aed; }