/* Sarai portal — single stylesheet, no framework. Brand: docs/SARAI_BRAND.md
   (transit-network identity — paper surfaces, one blue accent, flat & calm). */
:root {
  --bg: #FAFAF8;          /* paper */
  --surface: #FFFFFF;     /* elevated card */
  --surface-2: #F1F1EC;   /* subtle raised / input fill */
  --border: #E2E2DC;      /* hairline */
  --text: #17181A;        /* ink */
  /* Slate — secondary text, and the most-used colour in the portal after --text
     (166 `color:` declarations here plus 33 in app.js). It was #7B7E76, which is
     3.95:1 on paper and 3.64:1 on --surface-2: under the 4.5:1 bar on every
     surface it is drawn on, in the token that colours nearly every secondary
     line in the product.
     Same hue (82.5deg) and saturation, darkened until the TIGHTEST surface
     clears with headroom — 4.77:1 on --surface-2, 5.17:1 on paper. Measured by
     tools/contrast.py, which now fails the build if this regresses.
     The half-dozen places that paint --muted rather than write in it (offline
     dots, a toggle knob, a card's left border) all mean "inactive", and read the
     same or slightly firmer for the change. */
  --muted: #696B64;
  --brand: #2F6BFF;       /* Sarai blue — THE accent */
  --brand-2: #2F6BFF;     /* single accent, no second blue */
  --brand-tint: #EAF0FF;  /* selected / hover fill behind blue */
  --good: #18A05E;        /* Sarai green — available/success */
  --warn: #F5A623;        /* Sarai amber — busy/limited */
  --bad: #D64545;         /* error red (kept, not a brand accent) */
  --radius: 14px;         /* cards */
  --radius-control: 10px; /* controls */
  --shadow: 0 1px 2px rgba(23, 24, 26, 0.06);  /* --shadow-1: borders preferred */
  --font: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* --- elevation scale + interaction (UX polish) --- */
  --shadow-1: 0 1px 2px rgba(23,24,26,.05), 0 1px 3px rgba(23,24,26,.04);
  --shadow-2: 0 4px 14px rgba(23,24,26,.08), 0 2px 5px rgba(23,24,26,.04);
  --shadow-pop: 0 12px 34px rgba(23,24,26,.14), 0 4px 10px rgba(23,24,26,.06);
  --ring: 0 0 0 3px rgba(47,107,255,.20);         /* focus / active input ring */
  --brand-ink: #1D4FD8;                            /* darker brand for TEXT on light */
  --brand-hover: #1D4FD8;                          /* primary button hover BG (keeps white legible) */
  --header-bg: rgba(250,250,248,.82);              /* sticky topbar, blurred */
  /* Theme-aware semantic fills for badges/pills/alerts */
  --good-bg: rgba(24,160,94,.12);  --good-fg: #0F7A44;
  --warn-bg: rgba(197,132,20,.14); --warn-fg: #97620E;
  --bad-bg:  rgba(214,69,69,.11);  --bad-fg:  #B23636;
  --brand-bg: rgba(47,107,255,.10);
}

[data-theme="dark"] {
  --bg: #17181A;          /* ink */
  --surface: #24262A;     /* ink-2 */
  --surface-2: #1F2024;
  --border: #2C2E33;
  --text: #FAFAF8;        /* paper */
  --muted: #9A9C97;       /* slate-dark */
  --brand-tint: #1B2740;  /* selected/hover fill behind blue, on ink */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* accent / good / warn unchanged */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);
  --shadow-pop: 0 16px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.4);
  --ring: 0 0 0 3px rgba(47,107,255,.32);
  --brand-ink: #7EA3FF;
  --brand-hover: #4C82FF;
  --header-bg: rgba(23,24,26,.78);
  --good-bg: rgba(46,160,67,.16);  --good-fg: #4EC76B;
  --warn-bg: rgba(210,153,34,.16); --warn-fg: #E3B341;
  --bad-bg:  rgba(248,81,73,.16);  --bad-fg:  #FF7B72;
  --brand-bg: rgba(47,107,255,.16);
}

/* Light/dark toggle — a quiet pill in the sidebar, an icon-only round button
   pinned to the login card corner. Colours track the theme tokens. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; justify-content: center; margin-bottom: 8px;
  padding: 9px 12px; border-radius: var(--radius-control);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand-ink); }
.theme-toggle .mi { font-size: 18px; }
.theme-toggle.compact {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-ink); text-decoration: none; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }

/* ----------------------------------------------------------------- icons */
/* Google Material Symbols (Rounded). Use via icon("name") -> <span class="mi">name</span> */
.mi {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  vertical-align: middle; user-select: none; flex: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.mi.sm { font-size: 18px; }
.mi.lg { font-size: 24px; }
.mi.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
/* icon + label buttons keep the two visually centred */
.btn-sm .mi, .btn .mi, .cmd-btn .mi { font-size: 18px; }
.btn-sm.icon-btn .mi { font-size: 19px; }

/* ----------------------------------------------------------------- layout */
/* Bound the shell to the viewport so the sidebar stays put and only the main
   content scrolls. (Mobile overrides this in the media query below.) */
.app-shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden; }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
  height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand .name { font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.brand .sub { color: var(--muted); font-size: 12px; font-weight: 400; }
/* Sarai node-on-line mark — theme-aware via CSS vars. */
.sarai-mark { display: block; flex: none; }
.sarai-mark line { stroke: var(--text); }
.sarai-mark circle { fill: var(--bg); stroke: var(--brand); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; color: var(--text);
  font-weight: 500;
}
.nav a .ico { width: 22px; text-align: center; opacity: .85; }
.nav a.active .ico { opacity: 1; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--brand); color: #fff; }
.sidebar .spacer { flex: 1; }
/* Hat switcher — shown when the account holds more than one role grant. */
.hat-switch { padding: 8px 12px 4px; }
.hat-switch label {
  display: block; color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px;
}
.hat-select {
  width: 100%; background: var(--bg, transparent); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.hat-select:hover { border-color: var(--brand); }
.who { padding: 10px 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.who .role { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.who .id { color: var(--muted); font-size: 11px; word-break: break-all; }
.btn-logout {
  margin-top: 10px; width: 100%; background: transparent; color: var(--muted);
  border: 1px solid var(--border); padding: 8px; border-radius: 8px; cursor: pointer;
}
.btn-logout:hover { color: var(--text); border-color: var(--brand); }
.btn-reqrole {
  margin-top: 10px; width: 100%; background: transparent; color: var(--muted);
  border: 1px solid var(--border); padding: 8px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit;
}
.btn-reqrole:hover { color: var(--text); border-color: var(--brand); }
.btn-reqrole .mi { font-size: 17px; }

.main { padding: 28px 32px; height: 100vh; overflow-y: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: 22px; }
.topbar .crumb { color: var(--muted); font-size: 13px; }

/* Mobile top bar + drawer backdrop — hidden on desktop, shown via media query. */
.mobile-bar { display: none; }
.nav-backdrop { display: none; }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Wider cells for values that must stay on one line (phone numbers, money up to
   "PKR 9,999,999.00"). */
.stats.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 30px; font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; word-break: break-word; }
/* Compact, single-line value — same size/weight everywhere it's used so cards in
   one row (e.g. wallet Balance + Currency) match. */
.stat .value.sm { font-size: clamp(17px, 2vw, 22px); white-space: nowrap; overflow-wrap: normal; word-break: normal;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .value.brand { color: var(--brand-ink); }

/* ------------------------------------------------------------------ table */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel .head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.panel .head h2 { margin: 0; font-size: 16px; }
.panel .head .count { color: var(--muted); font-size: 13px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tr:last-child td { border-bottom: none; }
td.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.empty { padding: 34px; text-align: center; color: var(--muted); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.badge.online, .badge.active, .badge.completed, .badge.success { background: rgba(46,160,67,.15); color: #4ec76b; }
.badge.offline, .badge.pending { background: rgba(210,153,34,.15); color: #e3b341; }
.badge.faulted, .badge.errored, .badge.failed, .badge.disabled, .badge.suspended { background: rgba(248,81,73,.15); color: #ff7b72; }
.badge.neutral { background: var(--surface-2); color: var(--muted); }

/* ------------------------------------------------------------------ login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { position: relative; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 30px; }
.login-card .brand { justify-content: center; padding-bottom: 6px; }
.login-card .tagline { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 13px; }
.tabs { display: flex; background: var(--surface-2); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.tabs button { flex: 1; background: transparent; color: var(--muted); border: none; padding: 9px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 14px; }
.tabs button.active { background: var(--brand); color: #fff; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 15px;
}
.field input:focus { outline: none; border-color: var(--brand); }
.btn {
  width: 100%; background: var(--brand); color: #fff; border: none;
  padding: 12px; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--brand-2); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.alert { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); color: #ff9d97; padding: 10px 12px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; }
.note { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); padding: 10px 12px; border-radius: 9px; font-size: 12.5px; margin-top: 16px; }
.note code { color: var(--text); }
.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }

.loading { color: var(--muted); padding: 30px; text-align: center; }

/* --------------------------------------------------------------- actions bar */
.view-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; gap: 8px; }
.btn-sm { background: var(--brand); color: #fff; border: none; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-sm:hover { background: var(--brand-2); }
.btn-sm.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-sm.has-label, .btn.has-label { display: inline-flex; align-items: center; gap: 6px; }
.btn-sm .btn-label { line-height: 1; }

/* field select/textarea (same look as input) */
.field select, .field textarea {
  width: 100%; padding: 11px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 15px;
  appearance: none; -webkit-appearance: none;
}
.field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
.field textarea { resize: vertical; min-height: 80px; }
.field select optgroup { color: var(--muted); font-weight: 700; }
.field select option { color: var(--text); }

/* per-field helper text + selected-preset explainer in modals */
.field-hint { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; }
.preset-hint {
  display: none; margin: 2px 0 14px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: 8px;
}
.preset-hint.show { display: block; }

/* --------------------------------------------------------------- modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: grid; place-items: center; z-index: 1000; padding: 20px;
}
.modal-dialog {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; padding: 2px 8px; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px 20px 0; }
.modal-err { min-height: 0; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 20px;
}
.modal-footer .btn-sm { padding: 9px 22px; font-size: 14px; }

/* ---- GetConfiguration result modal ---- */
.cfg-modal { max-width: 720px; }
.cfg-count {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--muted); vertical-align: middle;
}
.cfg-body { padding: 16px 20px 20px; }
.cfg-filter {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px;
}
.cfg-filter-ico { color: var(--muted); display: flex; }
.cfg-filter-ico .mi { font-size: 18px; }
.cfg-filter-inp {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-size: 14px; padding: 10px 0; font-family: var(--font);
}
/* `overflow: hidden` here was worse than no container: it clipped the sideways
   overflow instead of scrolling it, so a wide charger-config table lost its
   right-hand columns outright with no way to reach them. `auto` on both axes
   keeps the rounded corners clipping and makes the columns reachable. */
.cfg-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: auto; max-height: 52vh; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 9px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
}
.cfg-table tbody tr { border-bottom: 1px solid var(--border); }
.cfg-table tbody tr:last-child { border-bottom: none; }
.cfg-table tbody tr:hover { background: var(--surface-2); }
.cfg-table td { padding: 9px 14px; vertical-align: top; }
.cfg-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--text); word-break: break-all; }
.cfg-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); word-break: break-all; }
.cfg-ro-col { width: 1%; white-space: nowrap; }
.cfg-ro {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.cfg-ro.is-ro { background: rgba(147,161,177,.14); color: var(--muted); border: 1px solid var(--border); }
.cfg-ro.is-rw { background: rgba(46,160,67,.14); color: #4ec76b; border: 1px solid rgba(46,160,67,.35); }
.cfg-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.cfg-unknown { margin-top: 16px; }
.cfg-unknown-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.cfg-unknown-h .mi { font-size: 16px; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 3px 9px; border-radius: 7px; background: var(--bg);
  border: 1px solid var(--border); color: var(--muted);
}

/* --------------------------------------------------------------- act cell */
/* Keep this a real table-cell (NOT display:flex) so its height stretches
   with the row — a flex td collapses to content height and misaligns the
   row's bottom border. Spacing between buttons uses sibling margins. */
.act-cell { white-space: nowrap; padding-right: 8px; vertical-align: middle; }
.act-cell .btn-sm { vertical-align: middle; }
.act-cell .btn-sm + .btn-sm { margin-left: 6px; }
.btn-sm.danger { color: var(--bad-fg); border-color: rgba(248,81,73,.35); }
.btn-sm.danger:hover { background: rgba(248,81,73,.12); }
.btn-sm.icon-btn { padding: 4px 9px; font-size: 14px; }

/* --------------------------------------------------------------- edit mode */
.edit-only { display: none; }
.edit-mode .edit-only { display: inline-flex; }
/* icon+label buttons carry .has-label (display:inline-flex, specificity 0-2-0),
   which would otherwise outrank the single-class .edit-only hide rule and leave
   edit/delete buttons permanently visible. Match that specificity here. */
.btn-sm.edit-only { display: none; }
.edit-mode .btn-sm.edit-only { display: inline-flex; }
/* table columns that are edit-only need table-cell, not inline-flex */
th.edit-only, td.edit-only { display: none; }
.edit-mode th.edit-only, .edit-mode td.edit-only { display: table-cell; }

/* --------------------------------------------------------------- search bar */
.search-bar { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.search-bar input[type="search"] {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 13px; outline: none;
}
.search-bar input[type="search"]:focus { border-color: var(--brand); }

/* --------------------------------------------------------------- pager */
.pager { align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); }
.pager-info { flex: 1; color: var(--muted); font-size: 13px; }

/* --------------------------------------------------------------- copy-id */
td.copy-id { cursor: pointer; }
td.copy-id:hover { color: var(--brand-ink); text-decoration: underline dotted; }

/* --------------------------------------------------------------- bulk action bar */
.bulk-bar {
  align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--brand);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.edit-mode .bulk-bar { display: flex; }
.bulk-count { color: var(--muted); font-size: 13px; margin-right: auto; font-weight: 600; }

/* --------------------------------------------------------------- OCPP server banner */
.ocpp-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 14px; font-size: 13px;
}
.ocpp-banner-label { color: var(--muted); font-weight: 500; }
.ocpp-banner-val { color: var(--text); }
.ocpp-banner-sep { color: var(--border); }

/* --------------------------------------------------------------- checkbox */
input[type="checkbox"].row-chk, input[type="checkbox"]#chk-all {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand);
}

/* --------------------------------------------------------------- info modal kv list */
.kv-list { display: flex; flex-direction: column; gap: 0; }
.kv-row {
  display: grid; grid-template-columns: 160px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-key { color: var(--muted); font-size: 13px; font-weight: 500; }
.kv-val { font-size: 13px; word-break: break-all; }

/* ===================================================================
   DASHBOARD / DIGITAL TWIN
   =================================================================== */

/* ---- fleet stats strip ---- */
.fleet-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.fleet-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden;
}
.fleet-stat .fs-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.fleet-stat .fs-value { font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1; }
.fleet-stat.online  .fs-value { color: #4ec76b; }
.fleet-stat.charging .fs-value { color: var(--brand-ink); }
.fleet-stat.faulted .fs-value { color: #ff7b72; }
.fleet-stat .fs-dot {
  position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.fleet-stat.online  .fs-dot { background: #4ec76b; box-shadow: 0 0 0 4px rgba(78,199,107,.15); }
.fleet-stat.charging .fs-dot { background: var(--brand-2); box-shadow: 0 0 0 4px rgba(43,139,255,.15); animation: pulse-dot 1.6s infinite; }
.fleet-stat.faulted .fs-dot { background: #ff7b72; box-shadow: 0 0 0 4px rgba(248,81,73,.15); }

/* ---- dashboard toolbar + fleet command bar ---- */
.dash-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-toolbar .grow { flex: 1; }
.dash-search {
  flex: 1; min-width: 180px; max-width: 360px; padding: 8px 12px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; outline: none;
}
.dash-search:focus { border-color: var(--brand); }

.fleet-cmd-bar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--brand); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px;
}
.dash-select-mode .fleet-cmd-bar { display: flex; }
.fleet-cmd-bar .fcb-count { color: var(--brand-ink); font-weight: 700; font-size: 13px; margin-right: 6px; white-space: nowrap; }
.fleet-cmd-bar .fcb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

/* ---- station card grid ---- */
.station-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.station-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer; position: relative;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.station-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.station-card.st-online   { border-left-color: #4ec76b; }
.station-card.st-charging { border-left-color: var(--brand-2); }
.station-card.st-offline  { border-left-color: var(--muted); }
.station-card.st-faulted  { border-left-color: #ff7b72; }
.station-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(43,139,255,.35); }

.sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sc-id { font-weight: 700; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.sc-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.sc-check { display: none; }
.dash-select-mode .sc-check { display: inline-flex; }
.sc-ocpp { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

.conn-dots { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.conn-dot {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px 2px 6px;
}
.conn-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.conn-dot.cs-available::before { background: #4ec76b; }
.conn-dot.cs-charging::before  { background: var(--brand-2); animation: pulse-dot 1.4s infinite; }
.conn-dot.cs-busy::before      { background: #e3b341; }
.conn-dot.cs-faulted::before   { background: #ff7b72; }

.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sc-seen { color: var(--muted); font-size: 12px; }
.sc-energy {
  display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-size: 12.5px; font-weight: 600;
}
.sc-energy .mi { font-size: 15px; }
.station-card.st-charging .sc-energy { animation: glow 2s ease-in-out infinite; }

/* ---- detail slide-in panel ---- */
.dp-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 900; opacity: 0; transition: opacity .2s;
}
.dp-backdrop.show { opacity: 1; }
.detail-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 560px; max-width: 94vw; z-index: 901;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.45);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease;
}
.detail-panel.show { transform: translateX(0); }
.dp-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.dp-header .dp-headinfo { flex: 1; min-width: 0; }
.dp-header .dp-title { font-size: 16px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.dp-header .dp-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* #2: transport (Cloud/Bluetooth) chip + connect in the header */
.dp-transport { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; max-width: 66%; }
.tp-lights { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.tp-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.tp-chip .mi { font-size: 14px; }
/* Compact the connect/disconnect button so the header fits on one row */
/* Compact the connect/disconnect button under the transport lights. */
.dp-transport .btn-sm { padding: 5px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dp-transport .btn-sm .mi { font-size: 15px; }
.tp-cloud { color: #4ec76b; border-color: rgba(46,160,67,.4); background: rgba(46,160,67,.12); }
.tp-bluetooth { color: var(--brand-ink); border-color: rgba(43,139,255,.4); background: rgba(43,139,255,.12); }
.tp-offline { color: var(--muted); }
.tp-off { color: var(--muted); border-color: var(--border); background: transparent; opacity: .7; }
.lv-live.via-ble .lvl-pulse { background: var(--brand-2); }
/* Transport mode selector (Auto / Bluetooth / Cloud) in the Controls tab */
.mode-bar { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.mode-seg { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.mode-seg .mi { font-size: 17px; }
.mode-seg.active { background: rgba(43,139,255,.16); border-color: rgba(43,139,255,.5); color: var(--text); }
.mode-seg.off { opacity: .4; cursor: not-allowed; }
.mode-hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
.dp-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }

.dp-section { margin-bottom: 22px; }
.dp-section > h4 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.dp-section > h4 .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ec76b; animation: pulse-dot 1.6s infinite; }

.dp-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; }
.dp-kv .k { color: var(--muted); }
.dp-kv .v { word-break: break-all; }
.dp-kv .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* connectors detail list */
.dp-conn { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dp-conn:last-child { border-bottom: none; }
.dp-conn .cnum { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.dp-conn .cinfo { flex: 1; font-size: 13px; }
.dp-conn .cinfo .ctype { color: var(--muted); font-size: 12px; }

/* live session meter grid */
.meter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.meter-cell { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.meter-cell .ml { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.meter-cell .mv { font-size: 18px; font-weight: 700; margin-top: 3px; }
.meter-cell .mu { color: var(--muted); font-size: 12px; font-weight: 500; }

/* energy meter bar */
.energy-bar-wrap { margin-top: 10px; }
.energy-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.energy-bar > span { display: block; height: 100%; background: var(--brand); transition: width .4s; }

/* ---- command grid ---- */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cmd-btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; transition: border-color .12s, background .12s;
}
.cmd-btn:hover { border-color: var(--brand); background: var(--surface); }
.cmd-btn .ch { font-size: 12px; }
.cmd-btn .cd { color: var(--muted); font-size: 11px; font-weight: 500; }
.cmd-btn.warn:hover { border-color: var(--warn); }
.cmd-btn.danger:hover { border-color: var(--bad); }

/* ---- command log (feedback loop) ---- */
.cmd-log { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cmd-log:empty::after { content: "No commands sent yet."; color: var(--muted); font-size: 13px; }

/* Card is a flex column: header row always visible, detail slides below */
.cmd-log-item {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; overflow: hidden;
}
.cmd-log-item.s-pending  { border-color: rgba(210,153,34,.4); }
.cmd-log-item.s-accepted { border-color: rgba(46,160,67,.4); }
.cmd-log-item.s-rejected,
.cmd-log-item.s-timeout  { border-color: rgba(248,81,73,.4); }

/* Always-visible header row */
.cli-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; min-height: 0;
}
.cli-header .cli-ico { width: 20px; text-align: center; flex: none; font-size: 14px; }
.cli-header .cli-ico .mi { font-size: 18px; }
.cmd-log-item.s-accepted .cli-ico { color: #4ec76b; }
.cmd-log-item.s-rejected .cli-ico,
.cmd-log-item.s-timeout  .cli-ico { color: #ff7b72; }
.cmd-log-item.s-pending  .cli-ico { color: var(--brand-ink); }
.cli-header .cli-body { flex: 1; min-width: 0; }
.cli-header .cli-cmd { font-weight: 600; }
.cli-header .cli-meta { color: var(--muted); font-size: 11.5px; margin-top: 1px; word-break: break-all; }
.cli-header .cli-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.cmd-log-item.s-pending  .cli-status { color: #e3b341; }
.cmd-log-item.s-accepted .cli-status { color: #4ec76b; }
.cmd-log-item.s-rejected .cli-status,
.cmd-log-item.s-timeout  .cli-status { color: #ff7b72; }
.cli-expand { padding: 2px 4px !important; min-width: 0 !important; flex: none; }

/* Collapsible detail — separated by a top border (acts as divider) */
.cli-detail {
  overflow: hidden; max-height: 0;
  transition: max-height 0.25s ease;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 0px solid var(--border);
  padding: 0 12px;
  transition: max-height 0.25s ease, padding 0.25s ease, border-top-width 0s 0.25s;
}
.cli-detail.open {
  max-height: 800px; padding: 10px 12px;
  border-top-width: 1px;
  transition: max-height 0.25s ease, padding 0.25s ease, border-top-width 0s;
}
.cli-detail-row { display: flex; flex-direction: column; gap: 3px; }
.cli-dl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); opacity: .55; }
.cli-json {
  margin: 0; padding: 6px 9px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 10.5px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow-y: auto;
}
.cmd-spin {
  display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border);
  border-top-color: var(--brand-2); border-radius: 50%; animation: spin .7s linear infinite;
}

/* ---- OCPP frame log ---- */
.frame-log { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

/* Each row is a flex column: header always visible, payload slides below */
.frame-row { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.frame-row:last-child { border-bottom: none; }

.fr-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.fr-header .fr-dir { width: 18px; text-align: center; flex: none; }
.fr-header .fr-dir .mi { font-size: 16px; }
.frame-row.dir-in  .fr-dir { color: #4ec76b; }
.frame-row.dir-out .fr-dir { color: var(--brand-ink); }
.fr-header .fr-action { flex: 1; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fr-header .fr-time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fr-header .fr-expand { padding: 1px 3px !important; min-width: 0 !important; flex: none; }
.fr-header .fr-expand .mi { font-size: 15px; }

/* Payload pre — slides in below the header */
.fr-payload {
  overflow: hidden; max-height: 0;
  transition: max-height 0.22s ease, padding 0.22s ease, border-top-width 0s 0.22s;
  margin: 0; padding: 0 12px; border-top: 0px solid var(--border);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 10.5px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap; word-break: break-all;
}
.fr-payload.open {
  max-height: 400px; padding: 8px 12px;
  border-top-width: 1px;
  transition: max-height 0.22s ease, padding 0.22s ease, border-top-width 0s;
}
.frame-log-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- Web Bluetooth panel ---- */
.ble-panel { display: flex; flex-direction: column; gap: 10px; }
.ble-status { font-size: 13px; font-weight: 600; }
.ble-status.muted { color: var(--muted); font-weight: 500; }
.ble-status.good  { color: #4ec76b; }
.ble-status.bad   { color: #ff7b72; }
.ble-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ble-readout { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.ble-kv { font-size: 13px; color: var(--muted); }
.ble-kv b { color: var(--text); font-weight: 700; margin-left: 4px; }

/* ---- login support link ---- */
.login-support {
  margin-top: 18px; color: var(--muted); font-size: 13px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px;
}
.login-support a {
  color: #25D366; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.login-support a:hover { text-decoration: none; color: #1faa53; }
.login-support a .mi { font-size: 17px; line-height: 1; }

/* ---- login: switch between sign-in and sign-up ---- */
.login-switch { margin-top: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.login-switch a { color: var(--brand-ink); font-weight: 600; }
.login-switch a:hover { text-decoration: underline; }

/* ---- country-code + phone field (driver login) ---- */
.phone-field { display: flex; gap: 8px; }
.phone-field select {
  flex: none; width: 108px; padding: 11px 8px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px;
}
.phone-field input { flex: 1; min-width: 0; }
.phone-field select:focus { outline: none; border-color: var(--brand); }

/* ---- smart charging panel ---- */
.sc-panel { display: flex; flex-direction: column; gap: 10px; }
.sc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sc-field > span { font-weight: 600; }
.sc-sel, .sc-num { padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.sc-num { width: 110px; }
.sc-sel:focus, .sc-num:focus { outline: none; border-color: var(--brand); }
.sc-link { background: none; border: none; color: var(--brand-ink); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 13px; }
.sc-link .mi { font-size: 17px; }
.sc-sched { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.sc-sched-rows { display: flex; flex-direction: column; gap: 8px; }
.sc-srow { display: flex; gap: 10px; align-items: flex-end; }
.sc-list { display: flex; flex-direction: column; gap: 8px; }
.sc-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sc-psub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sc-empty { color: var(--muted); font-size: 13px; padding: 4px 0; }

/* ---- two-part onboarding chips in the station list (#3) ---- */
.ob-chips { display: inline-flex; gap: 6px; }
.ob-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 3px 9px 3px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); }
.ob-chip .mi { font-size: 15px; }
.ob-chip.ok { color: #4ec76b; border-color: rgba(46,160,67,.4); }
.ob-chip.todo { color: var(--warn-fg); border-color: rgba(210,153,34,.4); }
.ob-chip:hover { border-color: var(--brand); }
.ob-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); margin-top: 8px; }

/* ---- grouped sidebar nav (#6) ---- */
.nav-group { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 14px 12px 4px; opacity: .8; }
.nav-group:first-child { padding-top: 4px; }

/* ---- list/map view toggle (#5) ---- */
.view-toggle { display: inline-flex; align-self: flex-start; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.vt-btn { background: transparent; border: none; color: var(--muted); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.vt-btn .mi { font-size: 18px; }
.vt-btn.active { background: var(--brand); color: #fff; }

/* ---- view description banner ---- */
.view-desc {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; color: var(--muted); font-size: 13px;
}
.view-desc b { color: var(--text); font-weight: 600; }
.view-desc .mi { font-size: 18px; color: var(--brand-ink); }

/* ---- driver: find-a-charger ---- */
.dc-scan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.dc-scan-title { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.dc-scan-title .mi { color: var(--brand-ink); }
.dc-scan-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-scan-input { flex: 1; min-width: 180px; padding: 10px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.dc-scan-input:focus { outline: none; border-color: var(--brand); }
/* 3-mode charger search (near me / around a place / along a route) */
.dc-search { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.dc-search-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dc-stab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-stab .mi { font-size: 16px; }
.dc-stab.active { background: rgba(43,139,255,.14); border-color: rgba(43,139,255,.5); color: var(--text); }
.dc-search-body { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-search-note { color: var(--muted); font-size: 12px; margin-top: 8px; min-height: 14px; }

/* place autocomplete dropdown */
.ac-wrap { position: relative; flex: 1; min-width: 180px; display: flex; }
.ac-wrap .dc-scan-input { flex: 1; }
.ac-box { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1200;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; }
.ac-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; color: var(--text);
  cursor: pointer; border-bottom: 1px solid var(--border); }
.ac-item:last-child { border-bottom: none; }
.ac-item .mi { font-size: 16px; color: var(--muted); }
.ac-item.active, .ac-item:hover { background: rgba(43,139,255,.14); }
.dc-scan-note { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
/* Rate policy (admin) + per-charger pricing */
/* .panel has no body padding (only the head), so pad the form itself. */
.rp-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: start; padding: 20px 22px 8px; }
.rp-field { display: flex; flex-direction: column; gap: 6px; align-self: start; min-width: 0; }
.rp-field.rp-wide { grid-column: 1 / -1; }
.rp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 8px 22px 20px; flex-wrap: wrap; }
.rp-actions .modal-err { flex: 1 1 auto; margin: 0; }
@media (max-width: 760px) { .rp-form { grid-template-columns: 1fr; } .rp-field.rp-wide { grid-column: auto; } }
/* The scan input flex-grows in its usual row layout; here it's in a column, so
   stop it stretching to the (grid-stretched) field height — that was making the
   inputs different heights depending on whether the field had a hint. Give the
   form inputs a bit more breathing room than the compact scan inputs. */
.rp-field .dc-scan-input { flex: none; padding: 11px 13px; }
.rp-field textarea.dc-scan-input { padding: 12px 13px; resize: vertical; }
.rp-mylist { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rp-mylist .empty, .rp-mylist .alert, .rp-mylist .loading { margin: 4px 0; }
.rp-lab { font-size: 12.5px; font-weight: 600; color: var(--text); }
.rp-hint { font-size: 11.5px; color: var(--muted); }
.rp-sub { font-weight: 700; margin: 18px 0 4px; }
.rp-regions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rp-reg-row { display: flex; gap: 8px; align-items: center; }
.pr-panel { display: flex; flex-direction: column; gap: 10px; }
.pr-info { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 14px; color: var(--text); }
.cs-row .mi { font-size: 17px; color: var(--muted); }
.qr-video { width: 100%; max-height: 60vh; background: #000; border-radius: 10px; }
.dc-map { height: 320px; margin-bottom: 0; }
.search-area-btn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 800; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; }
.search-area-btn .mi { font-size: 15px; color: var(--brand-ink); }
.gm-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--brand-ink); text-decoration: none; margin-top: 4px; }
.gm-link .mi { font-size: 13px; }
.dc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-name { font-weight: 700; font-size: 16px; }
.dc-site { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 5px; }
.dc-site .mi { font-size: 16px; }
.dc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 2px; }
.dc-rate { font-weight: 700; color: var(--brand-ink); }
.dc-dist { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--brand-ink); background: rgba(43,139,255,.12); border-radius: 999px; padding: 2px 9px; margin-left: auto; margin-right: 8px; white-space: nowrap; }
.dc-dist .mi { font-size: 14px; }
.dc-conn { color: var(--muted); font-size: 12.5px; }
.dc-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.dc-actions .btn-sm { flex: 1; justify-content: center; }
.dc-actions a.btn-sm { text-decoration: none; }
.dc-actions button[disabled] { opacity: .5; cursor: default; }

/* ---- advisory line on cards ---- */
.dc-adv { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 8px 10px; border-radius: 9px; line-height: 1.35; }
.dc-adv .mi { font-size: 16px; }
.dc-adv.good { color: #4ec76b; background: rgba(46,160,67,.10); }
.dc-adv.brand { color: var(--brand-ink); background: rgba(43,139,255,.10); }
.dc-adv.warn { color: #e3b341; background: rgba(210,153,34,.10); }
.dc-adv.muted { color: var(--muted); background: var(--surface-2); }

/* ---- discover toolbar (filters + sort + community) ---- */
.dc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dc-chip-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-chip-btn .mi { font-size: 17px; color: var(--muted); }
.dc-chip-btn:hover { border-color: var(--brand); }
.dc-chip-btn.active { background: rgba(43,139,255,.14); border-color: rgba(43,139,255,.5); }
.dc-chip-btn.active .mi { color: var(--brand-ink); }
.dc-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-sort-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dc-sort-chip.active { background: rgba(43,139,255,.14); border-color: rgba(43,139,255,.5); color: var(--text); }

/* ---- filter panel ---- */
.dc-filter-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.dc-frow { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.dc-frow > span { font-weight: 600; }
.dc-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.dc-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.dc-conn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-conn-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dc-conn-chip.active { background: rgba(43,139,255,.14); border-color: rgba(43,139,255,.5); color: var(--text); }

/* ---- community chargers ---- */
.dc-comm-section { margin-top: 22px; }
.dc-comm-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.dc-comm-head .mi { color: #a888ff; }
.dc-comm-tag { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 2px 9px; }
.dc-comm-card { border-color: rgba(168,136,255,.35); }
.badge.community { background: rgba(168,136,255,.16); color: #c3adff; }
.map-pin.mp-community { background: #6b4fd0; border-color: #8a6bf0; color: #fff; }

/* ---- charger sheet extras ---- */
.cs-photo, .rp-photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.cs-speed { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-ink); font-weight: 700; font-size: 13px; }
.cs-speed .mi { font-size: 16px; }
.cs-warn { display: flex; align-items: center; gap: 6px; color: #e3b341; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.cs-warn .mi { font-size: 16px; }
.cs-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 8px; }
.cs-footer .btn-sm { width: 100%; justify-content: center; padding: 11px 12px; font-size: 14px; box-sizing: border-box; }
.cs-footer .cs-full { grid-column: 1 / -1; }
.cs-footer a.btn-sm { text-decoration: none; }
.cs-report { display: block; width: calc(100% - 40px); margin: 4px 20px 18px; padding: 9px; background: none;
  border: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.cs-report:hover { color: var(--text); }
.cs-report .mi { font-size: 16px; vertical-align: -3px; }
.cs-disclaimer { display: flex; gap: 8px; background: rgba(210,153,34,.10); border: 1px solid rgba(210,153,34,.35);
  color: #e3b341; border-radius: 10px; padding: 11px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; }
.cs-disclaimer .mi { font-size: 17px; flex-shrink: 0; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.cs-pill .mi { font-size: 14px; color: var(--muted); }
.cs-muted { color: var(--muted); font-size: 12.5px; }

/* ---- report-a-problem modal ---- */
.rp-reasons { display: flex; flex-direction: column; gap: 8px; }
.rp-reason { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14px; cursor: pointer; }
.rp-reason:hover { border-color: var(--brand); }
.rp-reason.active { background: rgba(43,139,255,.14); border-color: var(--brand); }
.rp-textarea { width: 100%; padding: 10px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; }
.rp-textarea:focus { outline: none; border-color: var(--brand); }
.rp-photo-row { margin-top: 10px; }
.rp-photo-prev { margin-top: 10px; }

/* ---- connect view ---- */
.dc-scan-hint { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 12.5px; margin-top: 12px; line-height: 1.45; }
.dc-scan-hint .mi { font-size: 16px; color: var(--brand-ink); }
.connect-active { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connect-active .ca-row { display: flex; align-items: center; gap: 12px; }
.connect-active .ca-row .mi { font-size: 26px; color: var(--good-fg); }
.connect-active .ca-sub { color: var(--muted); font-size: 13px; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 11px 18px; border-radius: 10px; box-shadow: var(--shadow);
  font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; z-index: 4000; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- driver "my charging" ---- */
.charge-hero {
  background: var(--brand-tint);
  border: 1px solid var(--brand); border-radius: var(--radius); padding: 22px; margin-bottom: 18px;
}
.charge-hero .ch-state { color: var(--brand-ink); font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.charge-hero .ch-energy { font-size: 40px; font-weight: 800; margin: 6px 0; }
.charge-hero .ch-meta { color: var(--muted); font-size: 13px; }

/* ============================================================ live twin panel */

/* ---- tabs ---- */
.dp-tabs { display: flex; gap: 2px; padding: 6px 14px 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.dp-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent;
  padding: 11px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-tab .mi { font-size: 18px; }
.dp-tab:hover { color: var(--text); }
.dp-tab.active { color: var(--brand-ink); border-bottom-color: var(--brand-2); }
.dp-pane { display: none; }
.dp-pane.active { display: block; }

/* ---- live view layout ---- */
.lv { display: flex; flex-direction: column; gap: 18px; }
.lv-section .lv-h { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }

/* status LEDs */
.lv-leds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-led {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.lv-led .lvl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); transition: background .25s, box-shadow .25s; }
.lv-led.on { color: var(--text); }
.lv-led.on .lvl-dot { background: var(--good); box-shadow: 0 0 0 3px rgba(46,160,67,.2); }
.lv-led.charging { color: var(--brand-ink); border-color: rgba(43,139,255,.4); }
.lv-led.charging .lvl-dot { background: var(--brand-2); box-shadow: 0 0 0 3px rgba(43,139,255,.2); animation: pulse-dot 1.4s infinite; }
.lv-led.fault { color: #ff7b72; border-color: rgba(248,81,73,.45); }
.lv-led.fault .lvl-dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(248,81,73,.22); animation: pulse-dot 1s infinite; }
.lv-live { margin-left: auto; }
.lv-live .lvl-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--good); animation: pulse-dot 1.4s infinite; }

/* radial gauges */
.lv-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gauge { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px 12px; text-align: center; }
.gauge-svg { width: 100%; height: auto; display: block; }
.g-track { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; }
.g-fill { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease, stroke .3s; }
.g-center { position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%); }
.g-val { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.g-unit { color: var(--muted); font-size: 12px; font-weight: 600; }
.g-label { margin-top: 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

/* readout tiles */
.lv-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lv-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 8px; text-align: center; transition: border-color .25s; }
.lv-tile .lt-val { font-size: 19px; font-weight: 800; line-height: 1; }
.lv-tile .lt-unit { color: var(--muted); font-size: 11px; font-weight: 600; }
.lv-tile .lt-label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; margin-top: 5px; }
.lv-tile.z-ok .lt-val { color: var(--good-fg); }
.lv-tile.z-warn { border-color: rgba(210,153,34,.5); }
.lv-tile.z-warn .lt-val { color: var(--warn-fg); }
.lv-tile.z-danger { border-color: rgba(248,81,73,.5); }
.lv-tile.z-danger .lt-val { color: #ff7b72; }

/* unsupported by charger firmware */
.gauge.na { opacity: 0.28; filter: grayscale(1); }
.gauge.na .g-label::after { content: " (n/a)"; }
.lv-tile.na { opacity: 0.28; filter: grayscale(1); }
.lv-tile.na .lt-label::after { content: " (n/a)"; }
.lgh-btn.na { opacity: 0.3; filter: grayscale(1); cursor: default; }
.cmd-btn.na { opacity: 0.35; filter: grayscale(1); }
.cmd-btn.na:hover { border-color: var(--border); background: transparent; cursor: default; }
option.na { color: var(--muted); font-style: italic; }

/* live trend graph */
.lv-graph-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.lv-graph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lgh-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.lgh-btns { display: flex; gap: 4px; }
.lgh-btn { background: var(--surface-2); color: var(--muted); border: none; border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 600; cursor: pointer; }
.lgh-btn:hover { color: var(--text); }
.lgh-btn.active { background: var(--brand); color: #fff; }
.live-graph { position: relative; height: 110px; }
.lg-svg { width: 100%; height: 100%; display: block; transition: opacity .3s; overflow: visible; cursor: crosshair; }
.lg-grid line { stroke: var(--border); stroke-width: 1; }
.lg-area { fill: rgba(43,139,255,.14); stroke: none; }
.lg-line { fill: none; stroke: var(--brand-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lg-dot { fill: var(--brand-2); stroke: var(--surface); stroke-width: 1.5; }
.lg-cross { stroke: var(--brand-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .1s; pointer-events: none; }
.lg-tip { position: absolute; display: none; transform: translateY(-2px); pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px;
  font-size: 12px; line-height: 1.35; box-shadow: var(--shadow); white-space: nowrap; z-index: 3; }
.lg-tip b { color: var(--text); font-weight: 700; }
.lg-tip span { color: var(--muted); margin-left: 6px; }
.lg-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }

/* connector switches */
.lv-conns { display: flex; flex-direction: column; gap: 8px; }
.conn-switch { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.cs-led { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--surface-2); }
.cs-led.cs-available { background: var(--good); box-shadow: 0 0 0 3px rgba(46,160,67,.18); }
.cs-led.cs-charging { background: var(--brand-2); box-shadow: 0 0 0 3px rgba(43,139,255,.2); animation: pulse-dot 1.4s infinite; }
.cs-led.cs-faulted { background: var(--bad); box-shadow: 0 0 0 3px rgba(248,81,73,.2); animation: pulse-dot 1s infinite; }
.cs-led.cs-off { background: var(--muted); }
.cs-meta { flex: 1; min-width: 0; }
.cs-name { font-weight: 600; font-size: 13px; }
.cs-stat { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.cs-toggle { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; flex: none; transition: background .2s, border-color .2s; padding: 0; }
.cs-toggle .cs-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: left .2s, background .2s; }
.cs-toggle.on { background: var(--brand); border-color: var(--brand); }
.cs-toggle.on .cs-knob { left: 20px; background: #fff; }

/* session info */
.lv-sess { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: 13px; align-items: center; }
.lv-sess.idle { display: block; }
.lv-sess .k { color: var(--muted); }
.lv-sess .lv-stop-btn { grid-column: 1 / -1; justify-content: center; margin-top: 12px; padding: 9px 14px; }

/* time-of-use rate windows editor (per-charger pricing) */
.pr-tou { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.pr-tou-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pr-tou-list { display: flex; flex-direction: column; gap: 8px; }
.pr-tou-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.pr-tou-row input[type="time"] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; }
.pr-tou-lbl { color: var(--muted); font-size: 12px; }
.pr-tou-price { width: 110px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.pr-tou-days { display: flex; gap: 3px; }
.pr-day { width: 24px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.pr-day.on { background: rgba(43,139,255,.18); border-color: var(--brand-2); color: var(--text); }
.pr-tou-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* analytics view */
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.an-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.an-kpi-v { font-size: 24px; font-weight: 800; line-height: 1.1; }
.an-kpi-l { color: var(--muted); font-size: 12px; margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }
.an-kpi-s { color: var(--brand-ink); font-size: 12px; font-weight: 600; margin-top: 2px; }
.an-h3 { margin: 22px 0 10px; font-size: 14px; }
.an-h4 { margin: 0 0 8px; font-size: 13px; }
.an-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; overflow-x: auto; }
.an-bar-col { flex: 1 1 auto; min-width: 5px; height: 100%; display: flex; align-items: flex-end; }
.an-bar { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
/* Analytics tables carry up to five columns of figures and had no scroll
   container at all, so on a narrow window they widened the PAGE — which on a
   phone puts the sidebar and the topbar out of reach. .table-scroll and
   .cfg-table-wrap were already doing this correctly elsewhere; these five
   tables simply never got one. */
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.an-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.an-table tr:last-child td { border-bottom: none; }
.an-u { font-weight: 600; }
.an-us { color: var(--muted); font-size: 11.5px; }
.an-r { text-align: right; font-weight: 700; white-space: nowrap; }
.an-empty { color: var(--muted); text-align: center; padding: 16px; }
.an-sub { color: var(--muted); font-size: 12px; margin: -4px 0 8px; }

/* Axed bar chart: y-axis (col 1) + plot (col 2), x-axis ticks under the plot. */
.an-figure { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 130px auto; gap: 4px 6px; margin-top: 4px; }
.an-figure > .an-empty { grid-column: 1 / -1; }
.an-yaxis { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; padding: 12px 2px; font-size: 10.5px; color: var(--muted); text-align: right; line-height: 1; }
.an-figure > .an-chart { grid-column: 2; grid-row: 1; position: relative; }
.an-xaxis { grid-column: 2; grid-row: 2; display: flex; gap: 3px; padding: 0 12px; }
.an-xtick { flex: 1 1 auto; min-width: 5px; text-align: center; font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: clip; }
.an-bar-col:hover .an-bar { filter: brightness(1.15); }
.an-tip { position: absolute; top: 8px; transform: translateX(-50%); background: var(--text); color: var(--surface);
  border-radius: 8px; padding: 5px 9px; font-size: 11.5px; white-space: nowrap; pointer-events: none; z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.an-tip-v { font-weight: 700; }
.an-tip-d { opacity: .75; font-size: 10.5px; margin-top: 1px; }

/* Clickable table cell link (sessions: drill into session / charger / user). */
.lnk { color: var(--brand-ink); cursor: pointer; text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* discounts */
.disc-form { margin-bottom: 16px; }
.disc-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.disc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.disc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.disc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.disc-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.disc-appr { color: var(--muted); font-size: 12px; margin: 8px 0; }
.disc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-sess .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.lv-sess .v .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ec76b; margin-right: 6px; animation: pulse-dot 1.6s infinite; }

/* ---------------------------------------------------------------- map view */
.map-container { width: 100%; height: 520px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
/* Fill the viewport below the stats tiles (Stations → Map) without page scroll. */
/* In the Stations view the map fills the remaining space exactly (flex), so the
   section never overflows the viewport and forces a page scroll. */
.map-container.fill { flex: 1; min-height: 0; height: auto; }
/* Bound the Stations view to the viewport (100vh minus .main padding + topbar),
   then let its body flex-fill. */
.stations-fill { height: calc(100vh - 130px); min-height: 420px; display: flex; flex-direction: column; }
.stations-fill > .stations-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* Dark Leaflet chrome to match the dark tiles. */
.leaflet-container { background: var(--bg); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--text); }
.leaflet-bar a { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.leaflet-bar a:hover { background: var(--surface); }
.map-pin { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s; }
.map-pin:hover { transform: scale(1.15); }
.map-pin .mi { font-size: 17px; line-height: 1; }
.mp-charging { background: var(--brand); border-color: var(--brand-dark, #0a5bc4); color: #fff; box-shadow: 0 0 0 4px rgba(43,139,255,.25), 0 2px 8px rgba(0,0,0,.18); animation: pulse-dot 1.6s infinite; }
.mp-online   { background: var(--good); border-color: #27a348; color: #fff; }
.mp-offline  { background: #e5484d; border-color: #b03a3e; color: #fff; }
.mp-site     { background: var(--warn, #f0a500); border-color: #c88400; color: #fff; }
.map-popup { min-width: 180px; padding: 12px 14px; position: relative; }
.mp-title  { font-weight: 700; font-size: 14px; margin-bottom: 2px; padding-right: 20px; }
.mp-sub    { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.mp-addr   { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; margin-bottom: 4px; }
.mp-addr .mi { font-size: 13px; }
.mp-photo  { width: 100%; max-height: 120px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; display: block; }
.mp-charging-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(43,139,255,.12); color: var(--brand-ink); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.mp-status { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.mp-actions { display: flex; gap: 6px; margin-top: 8px; }
.mp-actions .btn-sm { flex: 1; justify-content: center; padding: 6px 10px; font-size: 12px; }
.mp-actions .btn-sm .mi { font-size: 15px; }
/* Enriched info-window rows: power, rate, last-seen, amenities. */
.mp-line { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.mp-line .mi { font-size: 13px; flex: none; }
.mp-status { font-weight: 700; margin-bottom: 6px; }
.mp-status-online   { color: #18A05E; }
.mp-status-charging { color: #2F6BFF; }
.mp-status-offline  { color: #E5484D; }
.mp-amen { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.mp-chip { font-size: 10.5px; background: var(--surface-2); color: var(--muted); border-radius: 20px; padding: 2px 8px; text-transform: capitalize; }

/* Charger detail modal (sessions → charger, map info-window → Details). */
.cd-photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; display: block; }
.cd-title { font-size: 18px; font-weight: 750; }
.cd-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cd-badges { margin: 10px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cd-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; color: var(--text); }
.cd-row .mi { font-size: 16px; color: var(--muted); flex: none; }
.cd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.cd-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.cd-stat-v { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cd-stat-l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

/* ---- stations table expandable install-detail drawer */
.detail-drawer-cell { padding: 0 !important; border-top: none !important; }
.drawer-inner  { display: flex; gap: 14px; padding: 12px 16px; background: var(--surface2, rgba(255,255,255,.04)); border-bottom: 1px solid var(--border); }
.drawer-photo  { width: 100px; height: 75px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.drawer-info   { flex: 1; font-size: 13px; color: var(--text); }
.di-row        { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.di-row .mi    { font-size: 14px; color: var(--muted); }
.di-notes      { color: var(--muted); font-size: 12px; }
.di-head       { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.di-ws         { gap: 6px; }
.di-ws-url     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.di-link       { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; background: none; border: none; color: var(--brand2, #4da3ff); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.di-link .mi   { font-size: 15px; }
.di-link:hover { text-decoration: underline; }

/* -------------------------------------------------------- rate request cards */
.rr-card       { margin-bottom: 12px; }
.rr-head       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rr-title      { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.rr-date       { font-size: 12px; color: var(--muted); }
.rr-body       { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rr-row        { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13px; }
.rr-row span   { color: var(--muted); }
.rr-just       { flex-direction: column; gap: 2px; }
.rr-just span:last-child { color: var(--text); }
.rr-outcome    { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.rr-outcome.ok      { background: rgba(46,160,67,.1); border: 1px solid rgba(46,160,67,.25); }
.rr-outcome.danger  { background: rgba(218,54,51,.08); border: 1px solid rgba(218,54,51,.2); }
.rr-outcome-title   { font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rr-actions    { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.rr-err        { font-size: 12px; color: var(--danger, #da3633); }
.alert-ok      { color: #2ea043; background: rgba(46,160,67,.1); border: 1px solid rgba(46,160,67,.3); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-top: 8px; }

/* -------------------------------------------------------- support tickets */
.ticket-messages { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px 0; }
.tmsg { max-width: 80%; display: flex; flex-direction: column; gap: 3px; }
.tmsg-me    { align-self: flex-end; align-items: flex-end; }
.tmsg-other { align-self: flex-start; align-items: flex-start; }
.tmsg-body { background: var(--surface-2); border-radius: 12px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tmsg-me .tmsg-body { background: var(--brand); color: #fff; }
.tmsg-time { font-size: 11px; color: var(--muted); padding: 0 4px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes glow { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 820px) {
  /* auto header row + 1fr content row, so the header never stretches to absorb
     the free space left by min-height:100vh (default align-content: stretch). */
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }

  /* Sticky top bar with hamburger + compact brand. */
  .mobile-bar {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 10px 14px; background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
  }
  .nav-toggle {
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 5px 7px; cursor: pointer; line-height: 1; display: flex;
  }
  .nav-toggle .mi { font-size: 24px; }
  .mbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }

  /* Sidebar becomes an off-canvas slide-in drawer. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 84vw;
    flex-direction: column; align-items: stretch; gap: 6px;
    overflow-y: auto; padding: 18px 14px;
    border-right: 1px solid var(--border); border-bottom: none;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 50;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .nav { flex-direction: column; }
  .brand .sub { display: block; }
  .sidebar .spacer { display: block; flex: 1; }
  .who { border-top: 1px solid var(--border); border-left: none; }
  .who .id { display: block; }
  .btn-logout { width: 100%; margin: 10px 0 0; }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40;
  }
  .app-shell.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Fill the 1fr content row (not the full viewport) and scroll within it. */
  .main { padding: 16px; height: auto; min-height: 0; overflow-y: auto; }
  .detail-panel { width: 100vw; max-width: 100vw; }
  .lv-tiles { grid-template-columns: repeat(2, 1fr); }
  .topbar h1 { font-size: 19px; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}

/* Very narrow phones: single-column tiles/gauges and tighter command grid. */
@media (max-width: 460px) {
  .lv-tiles { grid-template-columns: repeat(2, 1fr); }
  .cmd-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .main { padding: 14px 12px; }
}

/* ============================================================ portal polish */
/* Dark-theme scrollbars everywhere (Chromium + Firefox). */
* { scrollbar-width: thin; scrollbar-color: #313d4d transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #313d4d; border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3f4d60; }
.sidebar::-webkit-scrollbar-thumb { border-color: var(--surface); }

/* ---- Find a Charger: search header scrolls away; the map sticks and fills the
   viewport height while the cards scroll the page beside it (Zillow/Airbnb). ---- */
.dc-head { /* normal flow — scrolls up out of view */ }
.dc-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
/* The map sticks and expands to fill the viewport as the header scrolls away. */
.dc-left { position: sticky; top: 16px; align-self: start; height: calc(100vh - 60px); }
/* The map wrapper must carry the height so the map's height:100% has a definite
   parent (otherwise it collapses to 0 and the map is blank). */
.dc-left .dc-mapwrap { height: 100%; }
.dc-left .dc-map { height: 100%; min-height: 0; margin-bottom: 0; }
.dc-right { min-width: 0; }              /* cards scroll with the page, no clipping */
.dc-right .dc-grid { grid-template-columns: 1fr; gap: 12px; }
.dc-right .dc-comm-section .dc-grid { grid-template-columns: 1fr; }
@media (max-width: 1040px) {
  .dc-split { grid-template-columns: 1fr; }
  .dc-left { position: static; height: auto; }
  .dc-left .dc-mapwrap { height: auto; }
  .dc-left .dc-map { height: 340px; min-height: 0; }
  .dc-comm-section { margin-top: 18px; }
  .dc-right .dc-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ---- Collapsible icon rail (desktop): expands on hover ---- */
@media (min-width: 821px) {
  .app-shell { grid-template-columns: 70px 1fr; }
  /* The sidebar is taken out of flow (fixed rail), so pin main to column 2 and
     leave the 70px column as the rail's reserved space. */
  .main { grid-column: 2; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 70px; z-index: 100;
    overflow: hidden; white-space: nowrap;
    transition: width .18s ease, box-shadow .18s ease;
  }
  .sidebar:hover { width: 240px; box-shadow: 10px 0 30px rgba(0,0,0,.45); overflow-y: auto; }
  /* Hide labels while collapsed; icons stay. */
  .sidebar .brand .name, .sidebar .brand .sub,
  .sidebar .nav a > span:not(.ico),
  .sidebar .nav-group, .sidebar .who, .sidebar .btn-logout, .sidebar .btn-reqrole {
    opacity: 0; transition: opacity .12s ease;
  }
  .sidebar:hover .brand .name, .sidebar:hover .brand .sub,
  .sidebar:hover .nav a > span:not(.ico),
  .sidebar:hover .nav-group, .sidebar:hover .who, .sidebar:hover .btn-logout, .sidebar:hover .btn-reqrole { opacity: 1; }
  .sidebar .nav a { gap: 12px; }
  .sidebar .brand { padding-left: 10px; }
  .sidebar .nav-group { min-height: 8px; padding-top: 12px; padding-bottom: 2px; }
  /* Theme toggle: icon-only while collapsed — its "Dark mode" label was
     overflowing the 70px rail. Label returns when the rail expands on hover. */
  .sidebar .theme-toggle { padding-left: 0; padding-right: 0; gap: 0; }
  .sidebar .theme-toggle span:not(.mi) { display: none; }
  .sidebar:hover .theme-toggle { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .sidebar:hover .theme-toggle span:not(.mi) { display: inline; }
  /* The hat switcher is unusable at rail width — reveal it only when expanded. */
  .sidebar .hat-switch { display: none; }
  .sidebar:hover .hat-switch { display: block; }
}

/* ---- driver-portal fixes: modal spacing, sliders, reserve, hover-link ---- */
/* Space custom-modal label rows so labels don't touch the field above. */
.modal-body .dc-frow { margin-top: 14px; }
.modal-body .dc-frow:first-child { margin-top: 0; }
.modal-body .dc-conn-chips { margin: 8px 0 4px; }
.modal-body .cs-disclaimer + .dc-frow { margin-top: 4px; }

/* Range sliders in the filter panel. */
.dc-frow .dc-fval { color: var(--brand-ink); font-weight: 700; margin-left: 6px; }
.dc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
  background: var(--surface-2); outline: none; }
.dc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brand-2); border: 2px solid var(--bg); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dc-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-2);
  border: 2px solid var(--bg); cursor: pointer; }

/* Near-me inline hint (replaces the old "Use my location" button). */
.dc-near-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; padding: 4px 0; }
.dc-near-hint .mi { font-size: 17px; color: var(--brand-ink); }
.dc-relocate { margin-left: 6px; background: none; border: none; color: var(--brand-ink); font-weight: 700;
  font-size: 13px; cursor: pointer; padding: 0; }
.dc-relocate:hover { text-decoration: underline; }

/* Reserve flow: quick-pick chips + arrival summary. */
.rsv-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.rsv-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.rsv-chip:hover { border-color: var(--brand); }
.rsv-chip.active { background: rgba(43,139,255,.16); border-color: var(--brand); }
.rsv-when { margin-top: 12px; color: var(--brand-ink); font-weight: 700; font-size: 14px; }

/* Hover-link between a list card and its map pin. */
.dc-card.dc-dim, .dc-comm-card.dc-dim { opacity: 0.4; transition: opacity .12s ease; }
.dc-card.dc-hl { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2), 0 8px 22px rgba(0,0,0,.35);
  transition: box-shadow .12s ease; }
.map-pin.mp-hl { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(43,139,255,.35), 0 3px 10px rgba(0,0,0,.3); z-index: 1000; }

/* ---- more portal fixes: filters modal, connector statuses, search pin ---- */
/* Extra breathing room so labels never touch the field/map/button above. */
.modal-body .dc-frow { margin-bottom: 8px; }
.modal-body .map-container { margin-top: 6px; }
.modal-body .rp-photo-prev { margin-top: 10px; }

/* Filters modal rows. */
.flt-row { margin-bottom: 18px; }
.flt-lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.flt-lbl .dc-fval { color: var(--brand-ink); font-weight: 700; margin-left: 6px; }

/* Connector status chips in the charger detail sheet. */
.cs-conns-lbl { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin: 4px 0 8px; }
.cs-conns-lbl .mi { font-size: 16px; }
.cs-conns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.cs-conn-chip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.cs-conn-chip b { margin-left: auto; font-weight: 700; text-transform: capitalize; }
.cs-conn-chip b.good, .cs-dot.good ~ b { }
.cs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cs-dot.good { background: #2ea043; } .cs-conn-chip b.good { color: #4ec76b; }
.cs-dot.warn { background: #d29922; } .cs-conn-chip b.warn { color: #e3b341; }
.cs-dot.bad { background: #f85149; } .cs-conn-chip b.bad { color: #ff7b72; }
.cs-dot.muted { background: var(--muted); } .cs-conn-chip b.muted { color: var(--muted); }

/* Searched-place pin (around a place). */
.map-pin.mp-search { background: #d13c4b; border-color: #ff7b86; color: #fff; }

/* Searched-place teardrop pin (Leaflet) — clearly a location, not a charger. */
.map-place-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0; background: #d13c4b; border: 2px solid #ff8a94;
  transform: rotate(-45deg); box-shadow: 0 3px 9px rgba(0,0,0,.45); }
.map-place-pin .mi { transform: rotate(45deg); color: #fff; font-size: 16px; }

/* Tighten the sticky header a touch so the map gets more room. */
.dc-view .dc-search { margin-bottom: 10px; }
.dc-view .dc-toolbar { margin-bottom: 10px; }

/* ---- Map info window (dark theme) — Google + Leaflet ---- */
.map-pop { min-width: 210px; max-width: 250px; padding: 13px 15px 14px; font-family: var(--font); color: var(--text); }
.map-pop-hd { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; margin-bottom: 5px; padding-right: 22px; }
.map-pop-name { font-weight: 700; font-size: 14.5px; color: var(--text); line-height: 1.25; }
.map-pop-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.map-pop-badge.good { background: rgba(46,160,67,.18); color: #4ec76b; }
.map-pop-badge.warn { background: rgba(210,153,34,.18); color: #e3b341; }
.map-pop-badge.muted { background: var(--surface-2); color: var(--muted); }
.map-pop-sub { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.map-pop-sub .mi, .map-pop-row .mi { font-size: 14px; color: var(--muted); }
.map-pop-row { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.map-pop-rate { color: var(--brand-ink); font-weight: 700; font-size: 13px; margin: 2px 0 11px; }
.map-pop-dist { color: var(--muted); font-weight: 600; }
.map-pop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 100%;
  background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 9px 12px; font-size: 13px;
  font-weight: 700; cursor: pointer; }
.map-pop-btn:hover { background: var(--brand-2); }
.map-pop-btn .mi { font-size: 17px; }

/* Google InfoWindow chrome → dark bubble + tail + close button. */
.gm-style .gm-style-iw-c { background: var(--surface) !important; border: 1px solid var(--border);
  border-radius: 14px !important; box-shadow: 0 10px 30px rgba(0,0,0,.55) !important; padding: 0 !important; }
.gm-style .gm-style-iw-d { background: transparent !important; overflow: hidden !important; padding: 0 !important; max-height: none !important; }
.gm-style .gm-style-iw-t::after { background: var(--surface) !important; box-shadow: -2px 2px 4px rgba(0,0,0,.25) !important; }
.gm-style .gm-style-iw-tc::after { background: var(--surface) !important; }
/* Hide Google's default close chrome entirely (it renders huge/misaligned once
   the bubble padding is zeroed and varies by API version) — we use our own
   .map-pop-close inside the content instead. */
.gm-style .gm-style-iw-chr,
.gm-style button.gm-ui-hover-effect,
.gm-style .gm-style-iw > button { display: none !important; }

/* Our own close (×) button, top-right of the card — Google + Leaflet. */
.map-pop { position: relative; }
.map-pop-close { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); cursor: pointer; z-index: 2;
  font-size: 15px; line-height: 1; }
.map-pop-close:hover { color: var(--text); background: var(--border); }
.map-pop-close .mi { font-size: 15px; }

/* Leaflet popup → same dark card. */
.map-pop-leaflet .leaflet-popup-content-wrapper { background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 0; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.map-pop-leaflet .leaflet-popup-content { margin: 0; }
.map-pop-leaflet .leaflet-popup-tip { background: var(--surface); border: 1px solid var(--border); }

/* ---- Install / Commission view ---- */
.install-pad { padding: 14px 16px 18px; }
.install-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.install-form .field { display: flex; flex-direction: column; gap: 5px; }
.install-form .field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.install-form .field .opt { color: var(--muted); font-weight: 400; }
.install-form input {
  background: var(--bg, transparent); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; width: 100%;
}
.install-form input:focus { outline: none; border-color: var(--brand); }
.install-form .btn { white-space: nowrap; }
.install-result {
  margin-top: 14px; padding: 14px; border: 1px solid var(--border);
  border-radius: 10px; background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.install-result .ir-ok { color: var(--good-fg); font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.install-result .ir-kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.install-result .ir-kv span { color: var(--muted); }
.install-result .ir-url { word-break: break-all; text-align: right; }
.install-result .ir-hint { color: var(--muted); font-size: 12.5px; margin: 8px 0 10px; line-height: 1.4; }
.install-list { display: flex; flex-direction: column; }
.install-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.install-row:first-child { border-top: 0; }
.install-row .ir-main { flex: 1; min-width: 0; }
.install-row .ir-name { font-weight: 650; font-size: 14.5px; }
.install-row .ir-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.install-row .ir-act { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) {
  .install-row { flex-wrap: wrap; }
  .install-row .ir-badge { order: 3; }
}

/* =====================================================================
   UX POLISH PASS — additive refinements layered last so they win by
   cascade order. Everything is token-driven; no structure changes.
   ===================================================================== */

/* Smooth, consistent interaction feedback across controls. */
.nav a, .btn, .btn-sm, .btn-logout, .hat-select, .theme-toggle,
.card, .panel, .badge, .field input, .field select, .field textarea,
.modal-close, tbody tr { transition: background-color .16s ease, border-color .16s ease,
  color .16s ease, box-shadow .16s ease, transform .12s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Keyboard focus is always visible. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px;
}

/* --- Sidebar & nav --- */
.sidebar { padding: 20px 12px; }
.brand .name { font-weight: 600; letter-spacing: -.02em; }
.nav a { font-weight: 500; letter-spacing: -.01em; position: relative; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-1); }
.nav a.active .ico { opacity: 1; }
.nav-group { margin-top: 6px; }

/* --- Topbar --- */
/* Full-bleed hairline: pull the bar out to the .main padding edges (28px 32px)
   so the bottom border spans the whole width instead of stopping at the text. */
.topbar { padding: 0 32px 16px; margin: 0 -32px 22px; border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.topbar .crumb { margin-top: 3px; text-transform: none; }
@media (max-width: 720px) { .topbar { padding: 0 16px 14px; margin: 0 -16px 18px; } }
@media (max-width: 520px) { .topbar { padding: 0 12px 14px; margin: 0 -12px 18px; } }

/* --- Cards & panels get real, quiet depth --- */
.card { box-shadow: var(--shadow-1); }
.panel { box-shadow: var(--shadow-1); }
.panel .head { background: linear-gradient(180deg, var(--surface-2), transparent); }
.panel .head h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.panel .head .count { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Count nested in the title (heads that also carry an action button) sits next
   to the title, not stranded between it and the button. */
.panel .head h2 .count { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }

/* --- Stat cards: quieter label, stronger number --- */
.stat .label { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--muted); }
.stat .value { font-weight: 750; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* --- Tables: row hover, calmer headers --- */
thead th { background: var(--surface); }
tbody tr:hover td { background: var(--surface-2); }
th { font-size: 11px; letter-spacing: .06em; }

/* --- Buttons: real hover (brand-2 == brand made hover a no-op), press,
       and a soft lift on the primary action --- */
.btn { box-shadow: var(--shadow-1); }
.btn:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--shadow-2); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-1); }
.btn-sm:hover:not(:disabled) { background: var(--brand-hover); }
.btn-sm:active:not(:disabled) { transform: translateY(1px); }
.btn-sm.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); color: var(--brand-ink); }

/* --- Inputs: a soft focus ring, not just a border colour --- */
.field input:focus, .field select:focus, .field textarea:focus,
.hat-select:focus, .install-form input:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}

/* --- Badges: theme-aware semantic fills (the old hardcoded greens/reds
       washed out on the light paper ground) --- */
.badge { padding: 3px 11px; font-weight: 650; letter-spacing: .01em; line-height: 1.5; }
.badge.online, .badge.active, .badge.completed, .badge.success, .badge.installed,
.badge.paid, .badge.done, .badge.resolved { background: var(--good-bg); color: var(--good-fg); }
.badge.offline, .badge.pending, .badge.in_progress, .badge.high { background: var(--warn-bg); color: var(--warn-fg); }
.badge.faulted, .badge.errored, .badge.failed, .badge.disabled, .badge.suspended,
.badge.urgent, .badge.cancelled { background: var(--bad-bg); color: var(--bad-fg); }
.badge.charging, .badge.assigned { background: rgba(43,139,255,.16); color: var(--brand-ink); }
.badge.neutral, .badge.open, .badge.closed, .badge.low, .badge.medium { background: var(--surface-2); color: var(--muted); }
.alert { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad-fg) 40%, transparent); color: var(--bad-fg); }

/* --- Modal: lift it off the page --- */
.modal-dialog { box-shadow: var(--shadow-pop); }

/* --- Login card gets the full elevation --- */
.login-card { box-shadow: var(--shadow-pop); }

/* --- Signup role picker (multi-select) --- */
.role-pick { display: flex; flex-direction: column; gap: 8px; }
.role-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 12px; cursor: pointer; color: var(--text); font-family: var(--font);
}
.role-opt:hover { border-color: var(--brand); }
.role-opt.selected { border-color: var(--brand); background: var(--brand-bg); box-shadow: var(--ring); }
.role-opt .ro-check {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border);
  display: grid; place-items: center; margin-top: 1px; color: transparent; background: var(--surface);
}
.role-opt .ro-check .mi { font-size: 15px; }
.role-opt.selected .ro-check { background: var(--brand); border-color: var(--brand); color: #fff; }
.role-opt .ro-ico { flex: none; color: var(--brand-ink); }
.role-opt .ro-ico .mi { font-size: 22px; }
.role-opt .ro-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-opt .ro-name { font-weight: 650; font-size: 14px; letter-spacing: -.01em; }
.role-opt .ro-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.field label .opt { color: var(--muted); font-weight: 400; }

/* ============================ Community charger moderation ============= */
.cc-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px; }
.chip { padding:6px 13px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer;
  transition:.15s; }
.chip:hover { border-color:var(--brand); color:var(--text); }
.chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.cc-vsel { margin-left:auto; padding:7px 10px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text); font-size:13px; }

.cc-list { display:flex; flex-direction:column; }
.cc-card { display:flex; gap:14px; align-items:flex-start; padding:14px 4px;
  border-top:1px solid var(--border); }
.cc-card:first-child { border-top:0; }
.cc-thumb { width:54px; height:54px; flex:none; border-radius:12px; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center; color:var(--muted); }
.cc-thumb img { width:100%; height:100%; object-fit:cover; }
.cc-thumb .mi { font-size:26px; }
.cc-main { flex:1; min-width:0; }
.cc-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cc-name { font-weight:700; font-size:15px; }
.cc-sub { color:var(--muted); font-size:13px; margin-top:3px; line-height:1.5; word-break:break-word; }
.cc-meta2 { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.cc-meta2 .mi { font-size:15px; vertical-align:-2px; margin-right:2px; }
.cc-meta2 .dot { opacity:.5; margin:0 4px; }
.cc-note { margin-top:6px; font-size:12.5px; color:var(--warn-fg); background:var(--warn-bg);
  border-radius:8px; padding:5px 9px; display:inline-flex; align-items:center; gap:6px; }
.cc-note .mi { font-size:16px; }
.cc-act { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:230px; }

.badge.verified { background:rgba(47,107,255,.15); color:var(--brand-ink);
  display:inline-flex; align-items:center; gap:3px; }
.badge.verified .mi { font-size:15px; }

/* add/edit community modal */
.cc-numrow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }
.cc-numrow .field { margin-top:0; }
.chip-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
/* No capitalize: these chips now carry real labels ("CCS2", "GB/T", "CHAdeMO"),
   and title-casing them turned proper names into "Ccs2" and "Gbt". */

/* "Who can charge here?" — one block per vehicle class, its connector list
   nested underneath, mirroring the app's add-charger form. */
.cc-serves { border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
  padding:12px 14px; margin-top:10px; }
.cc-serves-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cc-serves-name { font-weight:700; display:flex; align-items:center; gap:6px; flex:1; min-width:150px; }
.cc-serves-name .mi { color: var(--brand-ink); font-size:20px; }
.cc-serves-sub { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.cc-serves-sub .field-hint { margin:0 0 6px; }
/* Yes / No / Not stated, as a segmented control so the current answer and the
   available ones are both visible — a cycling chip showed neither. */
.cc-seg { display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.cc-seg button { appearance:none; border:0; background:transparent; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; cursor:pointer; white-space:nowrap; }
.cc-seg button + button { border-left:1px solid var(--border); }
.cc-seg button:hover { color:var(--text); }
.cc-seg button.on { background:var(--brand); color:#fff; }
.cc-seg button.on.danger { background:var(--bad); }
.cc-verify { display:flex; align-items:center; gap:8px; margin-top:14px; font-weight:600;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); cursor:pointer; }
.cc-verify input { width:18px; height:18px; accent-color:var(--brand); }
.cc-verify .mi { color: var(--brand-ink); }
.btn-sm.secondary.ok { color:var(--brand-ink); border-color:var(--brand); }
@media (max-width:640px){ .cc-numrow { grid-template-columns:1fr 1fr; } .cc-act { max-width:none; } }

/* community source-mode chips (Community / OCM / Google / ChargePK) */
.cc-modes { margin:4px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--border); gap:8px; }
.cc-modes .chip { padding:8px 15px; }
.cc-modes .chip .mi { font-size:16px; vertical-align:-3px; margin-right:5px; }
/* consistent vertical rhythm inside the community view */
.cc-filters { margin:14px 0 10px; }
.cc-modes + div .view-actions { margin-bottom:12px; }
.cc-list { margin-top:2px; }
.cc-title .badge.active .mi, .cc-title .badge .mi { font-size:14px; vertical-align:-2px; margin-right:2px; }

/* ===================== Call-and-verify wizard (split screen) =========== */
/* Flex column so the header + footer stay put and only the split scrolls
   (override the base .modal-dialog's whole-dialog overflow). */
.vw-dialog { max-width:900px; width:calc(100vw - 32px); max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden; }
.vw-dialog .modal-header { flex:none; }
.vw-split { display:grid; grid-template-columns:300px 1fr; gap:0; flex:1 1 auto; min-height:0; }
.vw-left { background:var(--surface-2); border-right:1px solid var(--border);
  padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.vw-src { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.vw-name { font-size:19px; font-weight:800; line-height:1.2; }
.vw-addr, .vw-op { font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:flex-start; }
.vw-addr .mi, .vw-op .mi { font-size:16px; flex:none; }
.vw-photo { width:100%; border-radius:12px; margin:4px 0; max-height:150px; object-fit:cover; }
.vw-calllabel { margin-top:8px; font-size:12px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:6px; }
.vw-calllabel .mi { font-size:16px; }
.vw-phone { font-size:24px; font-weight:800; color:#25D366; letter-spacing:.01em;
  text-decoration:none; word-break:break-all; line-height:1.15; display:inline-flex; align-items:center; gap:6px; }
.vw-phone:hover { text-decoration:underline; }
.vw-phone2 { font-size:15px; font-weight:700; color:#25D366; display:flex; align-items:center; gap:6px; }
.vw-phone2 .mi, .vw-phone .mi { font-size:18px; }
.vw-wa { font-size:11px; font-weight:800; color:#fff; background:#25D366; border-radius:999px; padding:2px 8px; letter-spacing:.02em; }
.vw-nophone { font-size:13px; color:var(--warn-fg); background:var(--warn-bg); border-radius:8px; padding:8px 10px; }
.vw-maps { font-size:13px; color:var(--brand-ink); font-weight:600; display:flex; align-items:center; gap:6px; margin-top:auto; }
.vw-maps .mi { font-size:16px; }

.vw-right { padding:18px 20px; overflow-y:auto; min-height:0; }
.vw-field { margin-bottom:12px; }
.vw-field > label { display:block; font-size:12.5px; font-weight:700; margin-bottom:5px; color:var(--text); }
.vw-field .vw-hint { font-weight:500; color:var(--muted); font-size:11.5px; }
.vw-field input { width:100%; padding:8px 10px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); color:var(--text); font-size:14px; }
.vw-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vw-footer { flex:none; flex-wrap:wrap; gap:8px; border-top:1px solid var(--border); }
.vw-footer .vw-hide { margin-right:auto; }

@media (max-width:720px){
  .vw-split { grid-template-columns:1fr; max-height:none; }
  .vw-left { border-right:0; border-bottom:1px solid var(--border); }
  .vw-row2 { grid-template-columns:1fr; }
}

/* nationwide sync progress */
.cc-sync { margin:10px 0 4px; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); }
.cc-sync-top { font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; }
.cc-sync-top .mi { font-size:17px; color: var(--brand-ink); }
.cc-sync-cur { font-weight:500; color:var(--muted); font-size:12.5px; }
.cc-sync-track { height:8px; border-radius:999px; background:var(--surface-2);
  overflow:hidden; margin:8px 0 6px; }
.cc-sync-fill { height:100%; background:var(--brand); border-radius:999px; transition:width .4s ease; }
.cc-sync-stat { font-size:12px; color:var(--muted); }
.cc-sync-stat b { color:var(--text); }

/* replace-on-upload checkbox in the Stored pane */
.cc-replace { display:inline-flex; align-items:center; gap:6px; font-size:13px;
  color:var(--muted); font-weight:600; cursor:pointer; white-space:nowrap; }
.cc-replace input { width:15px; height:15px; accent-color:var(--brand); }

/* duplicate badge + wizard duplicate/diff panel */
.badge.dup { background:var(--warn-bg); color:var(--warn-fg); display:inline-flex; align-items:center; gap:3px; border:0; cursor:pointer; font:inherit; }
.badge.dup:hover { filter:brightness(1.05); }
.badge.dup .mi { font-size:14px; }

/* Bulk-select moderation */
.cc-sel { flex:none; display:flex; align-items:center; padding-top:18px; }
.cc-sel input { width:18px; height:18px; cursor:pointer; }
.cc-bulkbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; justify-content:space-between; margin-bottom:8px; padding:10px 12px;
  background:var(--brand-bg, var(--surface-2)); border:1px solid var(--border); border-radius:10px; }
.cc-bulk-count { font-weight:700; }
.cc-bulk-btns { display:flex; flex-wrap:wrap; gap:6px; }

/* Duplicate comparison modal */
.dup-card { border:1px solid var(--border); border-radius:10px; padding:12px; margin-top:10px; }
.dup-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.dup-name { font-weight:700; }
.dup-dist { color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:3px; }
.dup-dist .mi { font-size:14px; }
.dup-diff-row { display:grid; grid-template-columns:110px 1fr 1fr; gap:8px; padding:3px 0; font-size:13px;
  border-top:1px solid var(--border); }
.dup-diff-row.head { color:var(--muted); font-weight:700; border-top:0; }
.dup-diff-row .k { color:var(--muted); }
.dup-diff-row .v i { color:var(--muted); }
.dup-act { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* Structured operating-hours picker */
.hours-detail { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.hours-daily, .hours-day { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hours-day .hd-name { width:92px; font-weight:600; }
.hours-day .hd-closed { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; }
.time-in { padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:inherit; }
.time-in:disabled { opacity:.45; }
/* the structured hours picker also appears inside the verify wizard's form */
.vw-right .hours-detail { margin-top:8px; }
.vw-right select { padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:inherit; }

/* Verify-wizard prev/next through the list */
.vw-nav { display:inline-flex; align-items:center; gap:4px; margin-left:auto; margin-right:6px; }
.vw-nav-pos { color:var(--muted); font-size:13px; font-weight:700; min-width:48px; text-align:center; }
.vw-dups { border:1px solid var(--warn); background:var(--warn-bg); border-radius:12px;
  padding:12px 14px; margin-bottom:16px; }
.vw-dups-head { font-weight:700; font-size:13px; color:var(--warn-fg); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.vw-dups-head .mi { font-size:16px; }
.vw-dup { background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; margin-top:8px; }
.vw-dup-top { font-size:13px; margin-bottom:6px; }
.vw-diff-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; font-size:12.5px;
  padding:3px 0; border-top:1px dashed var(--border); }
.vw-diff-head { font-weight:700; color:var(--muted); border-top:0; }
.vw-diff-k { color:var(--muted); }
.vw-diff-a { color:var(--text); font-weight:600; }
.vw-diff-b { color:var(--muted); }
.vw-diff-same { font-size:12.5px; color:var(--good-fg,#4ec76b); display:flex; align-items:center; gap:5px; }
.vw-diff-same .mi { font-size:15px; }
.vw-dup-act { margin-top:8px; }

/* ============================================================================
   DESIGN TRANSITION — new visual language (background, menu, App Usage).
   Tokens retuned toward the App-Usage design; alias names (--surf/--dim/…)
   let design-styled markup drop in. Applied last so it wins. Other sections
   inherit the new palette automatically and get their own pass later.
   ========================================================================== */
:root{
  --font:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  /* retuned neutrals + accent (light) */
  --bg:#f4f5f8; --surface:#ffffff; --surface-2:#fafbfc; --border:#e5e8ee;
  --text:#0e1218; --muted:#6b7383;
  --brand:#4c7dff; --brand-2:#4c7dff; --brand-ink:#3a5fd9; --brand-hover:#3a5fd9;
  --brand-tint:rgba(76,125,255,.10); --brand-bg:rgba(76,125,255,.10);
  /* aliases used by design-styled markup */
  --surf:var(--surface); --surf2:var(--surface-2); --line:var(--border);
  --dim:var(--muted); --dim2:#98a0ae; --raise:#ffffff; --line2:#d6dae2;
  --accent:#4c7dff; --accent-soft:rgba(76,125,255,.14); --accent-line:rgba(76,125,255,.35);
  --good-soft:rgba(16,185,129,.12); --warn-soft:rgba(245,158,11,.14); --bad-soft:rgba(255,111,111,.12);
  --pad:20px; --gap:16px; --kpi:34px;
}
[data-theme="dark"]{
  --bg:#0a0b0e; --surface:#13151a; --surface-2:#181b22; --border:#242832;
  --text:#f2f4f8; --muted:#8d95a3;
  --brand-ink:#8aa6ff; --brand-hover:#5c86ff; --brand-tint:rgba(76,125,255,.16); --brand-bg:rgba(76,125,255,.16);
  --dim2:#5e6673; --raise:#1e222a; --line2:#2f343f;
  --accent-soft:rgba(76,125,255,.16); --accent-line:rgba(76,125,255,.4);
  --good:#2fd39b; --warn:#f5b544; --bad:#ff6f6f;
  --good-soft:rgba(47,211,155,.14); --warn-soft:rgba(245,181,68,.14); --bad-soft:rgba(255,111,111,.14);
}
/* Shell: sidebar reads as the page, one hairline to the right; soft accent nav. */
.sidebar{ background:var(--bg); border-right:1px solid var(--border); }
.nav a{ border-radius:9px; }
.nav a:hover{ background:var(--surface-2); }
.nav a.active{ background:var(--accent-soft); color:var(--accent); box-shadow:none; }
.nav a.active .ico{ opacity:1; color:var(--accent); }
.nav-group{ color:var(--dim2); }
/* App Usage design cards */
.au-wrap{ display:flex; flex-direction:column; gap:var(--gap); max-width:1560px; }
.au-card{ border-radius:14px; background:var(--surf); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.au-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--gap); }
.au-kpi{ padding:var(--pad); border-radius:12px; background:var(--surf); border:1px solid var(--line); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px; }
.au-kpi .lab{ font-size:12px; font-weight:600; color:var(--dim); }
.au-kpi .val{ font-size:var(--kpi); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.au-kpi .sub{ font-size:12px; color:var(--dim2); }
.au-pill{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px; font-variant-numeric:tabular-nums; }
.au-2col{ display:grid; grid-template-columns:minmax(0,2.15fr) minmax(0,1fr); gap:var(--gap); align-items:start; }
@media (max-width:1080px){ .au-2col{ grid-template-columns:1fr; } }
.au-seg{ display:flex; padding:2px; gap:2px; border-radius:9px; background:var(--surf2); border:1px solid var(--line); }
.au-seg button{ height:28px; padding:0 11px; border:0; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:500; background:transparent; color:var(--dim); display:flex; align-items:center; gap:6px; }
.au-seg button.on{ background:var(--raise); color:var(--text); font-weight:600; box-shadow:var(--shadow-1); }
.au-mpill{ height:30px; padding:0 13px; border-radius:20px; border:1px solid var(--line); background:var(--surf2); color:var(--dim); cursor:pointer; font-size:12.5px; font-weight:500; }
.au-mpill.on{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600; }
.au-h{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.au-sub{ font-size:12.5px; color:var(--dim); margin-top:3px; font-variant-numeric:tabular-nums; }
.au-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
@keyframes au-pulse{0%{opacity:.35;transform:scale(.75)}70%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
/* App Usage — tabs, themed date pickers, palette, drawer, insight banners */
.au-tabs{ display:flex; gap:22px; overflow-x:auto; }
/* One full-bleed hairline under the whole tabs+range row: pull it out to the
   .main padding edges so it runs end to end, like the topbar on other sections.
   The App Usage view drops the topbar's own border so this is the only line. */
.au-tabrow{ border-bottom:1px solid var(--line); margin:0 -32px; padding:0 32px; }
@media (max-width: 720px) { .au-tabrow{ margin:0 -16px; padding:0 16px; } }
@media (max-width: 520px) { .au-tabrow{ margin:0 -12px; padding:0 12px; } }
.au-tab{ padding:0 0 10px; border:0; background:transparent; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--dim); white-space:nowrap; }
.au-tab:hover{ color:var(--text); }
.au-tab.on{ color:var(--text); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); }
.au-date{ padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surf2); color:var(--text); font-family:var(--mono); font-size:12px; outline:none; }
.au-date:focus{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.au-date::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
[data-theme="dark"] .au-date::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.5; }
.au-scrim{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.au-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:61; width:390px; max-width:92vw; background:var(--surf); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.7); padding:24px; overflow-y:auto; }
.au-palscrim{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; }
.au-pal{ width:540px; max-width:92vw; border-radius:14px; background:var(--surf); border:1px solid var(--line2); box-shadow:0 40px 90px -30px rgba(0,0,0,.6); overflow:hidden; }
.au-palrow{ display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:9px; cursor:pointer; }
.au-palrow:hover{ background:var(--surf2); }
.au-insight{ display:flex; gap:12px; padding:14px 16px; border-radius:12px; }
.au-frow{ display:flex; align-items:center; gap:16px; padding:11px var(--pad); border-top:1px solid var(--line); cursor:pointer; }
.au-frow:hover{ background:var(--surf2); }