/* bcc-server/app/bcc/static/bcc.css
   BCC operator console chrome, themed to match the BLOS04 dashboard.
   All colour/typography primitives come from style.css (--svp, --surface,
   --ink, --muted, --line, .sim-card, quality rings, .status-chip, etc.).
   This file only adds BCC-specific layout: appbar, fleet selector, tab bar,
   device table and the inline detail panel. */

body.bcc-body { margin: 0; background: var(--bg); color: var(--ink); }
.bcc-main { width: var(--layout-w); margin: 18px auto 40px; }

/* ============ APPBAR (BLOS style) ============ */
.bcc-appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.bcc-appbar-row {
  width: var(--layout-w); margin: 0 auto;
  height: 84px; display: flex; align-items: center; gap: 16px;
}
.bcc-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.bcc-appbar-logo { height: 50px; width: auto; opacity: .95; display: block; border-radius: 8px; }
.bcc-brand-text { display: flex; flex-direction: column; line-height: 1; }
.bcc-brand-title {
  font-size: 1.2rem; font-weight: 800; color: var(--svp); letter-spacing: .3px;
}
.bcc-brand-subtitle {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-top: 4px;
}
.bcc-appbar-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bcc-appbar-nav a {
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: 8px 14px; border-radius: 10px; transition: background .15s, color .15s;
}
.bcc-appbar-nav a:hover { color: var(--svp-ink); background: rgba(77,170,212,.10); }
.bcc-appbar-nav a.active { color: #fff; background: var(--svp); }

@media (max-width: 700px) {
  .bcc-appbar-row { height: 64px; }
  .bcc-appbar-logo { height: 40px; }
  .bcc-brand-subtitle { display: none; }
}

/* ============ PAGE HEADING ============ */
.bcc-page-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 18px; }
.bcc-page-head h1 { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.bcc-page-head .bcc-sub { color: var(--muted); font-weight: 600; font-size: .92rem; }

/* ============ SECTION TITLES (BLOS convention) ============
   Mirror the BLOS device dashboard so every BCC tab + admin page shares one
   heading style: section <h2> in SVP blue at 1.15rem (device `.config-container
   h2`), sub-section <h3> in the darker SVP ink at 1.05rem (device `.dual-section
   h3`). Page-level <h1> in `.bcc-page-head` keeps its ink treatment, and modals
   are untouched (the `> h2/h3` child combinator only reaches top-level admin
   headings, never nested modal/overlay headings). */
.bcc-panel h2,
.bcc-main > h2 { color: var(--svp); font-size: 1.15rem; }
.bcc-page-head h2 { margin: 0; }            /* sits in the flex head, like the page <h1> */
.bcc-main > h2 { margin: 4px 0 14px; }      /* bare admin section title (Devices / Clients) */
.bcc-panel h3,
.bcc-main > h3 { color: var(--svp-ink); font-size: 1.05rem; }
.bcc-back {
  font-size: .9rem; color: var(--svp-ink); text-decoration: none; font-weight: 700;
}
.bcc-back:hover { text-decoration: underline; }

/* ============ FLEET SELECTOR CARDS ============ */
.bcc-fleet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.bcc-fleet-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bcc-fleet-card:hover {
  transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.10);
  border-color: var(--svp);
}
.bcc-fleet-card-top { display: flex; align-items: center; gap: 10px; }
.bcc-fleet-card-label { font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.bcc-fleet-card-layer {
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--svp-ink); background: rgba(77,170,212,.14);
  border: 1px solid rgba(77,170,212,.30); border-radius: 999px; padding: 2px 8px;
}
.bcc-fleet-card-subnet {
  margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; color: var(--muted);
}
.bcc-fleet-card-stats {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; gap: 22px;
}
.bcc-stat { display: flex; flex-direction: column; gap: 2px; }
.bcc-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.bcc-stat-num.online { color: var(--ok); }
.bcc-stat-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}

/* ============ EMPTY STATE ============ */
.bcc-empty {
  background: var(--surface); border: 1px dashed var(--line); border-radius: 16px;
  padding: 40px 24px; text-align: center; color: var(--muted); font-weight: 600;
}
.bcc-empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }

/* ============ TAB BAR (BLOS style, JS-driven) ============ */
.bcc-tabbar {
  display: flex; gap: 8px; background: var(--surface); padding: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: 16px;
}
.bcc-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-weight: 700; font-size: .95rem; font-family: inherit;
  white-space: nowrap;
}
.bcc-tab:hover { color: var(--svp-ink); }
.bcc-tab.active { background: var(--svp); color: #fff; }
.bcc-tabpanel { display: none; }
.bcc-tabpanel.active { display: block; }

/* ============ DEVICE TABLE ============ */
.bcc-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); overflow: hidden;
}
.bcc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bcc-table thead th {
  text-align: left; padding: 12px 16px; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.015);
}
.bcc-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bcc-table tbody tr:last-child td { border-bottom: 0; }
.bcc-row { cursor: pointer; transition: background .12s; }
.bcc-row:hover { background: rgba(77,170,212,.06); }
.bcc-row.open { background: rgba(77,170,212,.09); }
.bcc-row td:first-child { font-weight: 700; }
.bcc-serial-cell { display: flex; align-items: center; gap: 8px; }
.bcc-caret { color: var(--muted); transition: transform .15s; display: inline-block; }
.bcc-row.open .bcc-caret { transform: rotate(90deg); color: var(--svp); }

/* online dot */
.bcc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.bcc-dot.online { background: var(--ok); box-shadow: 0 0 0 3px rgba(46,125,50,.16); }
.bcc-dot.offline { background: #9aa6b2; }
.bcc-online-cell { display: flex; align-items: center; gap: 8px; }
.bcc-muted { color: var(--muted); }

/* ============ INLINE DETAIL PANEL ============ */
.bcc-detail-row > td { padding: 0 !important; border-bottom: 1px solid var(--line); background: var(--bg); }
.bcc-detail {
  padding: 18px; display: grid; gap: 16px;
  grid-template-columns: minmax(260px, 320px) 1fr;
}
@media (max-width: 820px) { .bcc-detail { grid-template-columns: 1fr; } }

.bcc-detail-section {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
}
.bcc-detail-section h3 {
  margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
  color: var(--svp-ink); font-size: .98rem;
}
.bcc-detail-col { display: flex; flex-direction: column; gap: 16px; }

/* identity / kv grid */
.bcc-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.bcc-kv dt { color: var(--muted); font-weight: 600; }
.bcc-kv dd { margin: 0; font-weight: 700; text-align: right; }

/* quality + throughput row inside detail */
.bcc-quality-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bcc-quality-meta { display: flex; flex-direction: column; gap: 8px; }
.bcc-tput { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.bcc-tput small { font-size: .8rem; color: var(--muted); font-weight: 600; }

/* SIM grid reuses .sim-card from style.css */
.bcc-sim-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.bcc-sim-grid .sim-card { width: 180px; }

.bcc-gps-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .9rem; }
.bcc-gps-summary .bcc-muted { font-weight: 600; }

/* compact Status block on the left column */
.bcc-status-section .bcc-kv { font-size: .85rem; }

/* Remote commands box (admin only) — full-width below the detail columns */
.bcc-cmd-box { padding: 0 18px 18px; }
.bcc-cmd-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 14px;
}
.bcc-cmd-form select, .bcc-cmd-form textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.bcc-cmd-form select { min-width: 150px; font-weight: 600; }
.bcc-cmd-form textarea {
  flex: 1; min-width: 220px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem;
}
.bcc-cmd-form select:focus, .bcc-cmd-form textarea:focus {
  outline: 2px solid var(--svp); border-color: var(--svp);
}
.bcc-cmd-msg { align-self: center; font-size: .85rem; font-weight: 600; color: var(--muted); }

/* network throughput chart */
.bcc-tput-chart-wrap { position: relative; height: 180px; width: 100%; }
.bcc-tput-note { display: block; margin-top: 6px; margin-bottom: 14px; font-size: .8rem; font-weight: 600; }
.bcc-tput-note:last-child { margin-bottom: 0; }

/* section header with a right-aligned action (the "+" breakdown button) */
.bcc-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
.bcc-section-head h3 { margin: 0; padding: 0; border: 0; flex: 1; }
.bcc-tput-expand {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--svp);
  font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s;
}
.bcc-tput-expand:hover { background: var(--svp); border-color: var(--svp); color: #fff; }

/* per-interface throughput modal (wider, left-aligned, two charts) */
.bcc-modal.bcc-tput-modal { max-width: 91vw; width: 91vw; text-align: left; }
/* charts inside the modal are much larger than the inline (global) chart */
.bcc-tput-modal .bcc-tput-chart-wrap { height: 320px; }
.bcc-tput-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bcc-tput-modal-head h3 { margin: 0; }
.bcc-tput-modal-close {
  border: 0; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.bcc-tput-modal-close:hover { color: var(--ink); }

/* configuration tab */
.bcc-config { padding: 18px 20px 22px; }
.bcc-config-group { margin-top: 10px; max-width: 520px; }
.bcc-config-label { font-weight: 800; color: var(--ink); }
.bcc-config-help { color: var(--muted); font-size: .85rem; margin: 2px 0 10px; }
.bcc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bcc-chip {
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink);
  border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.bcc-chip:hover { border-color: var(--svp); }
.bcc-chip.active { background: var(--svp); border-color: var(--svp); color: #fff; }

.bcc-config-row { display: flex; align-items: center; gap: 10px; }
.bcc-config-row label { font-weight: 700; color: var(--ink); font-size: .9rem; }
.bcc-config-row select {
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink);
  border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.bcc-config-row select:hover { border-color: var(--svp); }

.bcc-config-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.bcc-config-status { color: var(--muted); font-weight: 700; font-size: .85rem; }

.bcc-btn-primary {
  border: 0; background: var(--svp); color: #fff; border-radius: 10px;
  padding: 10px 18px; font-weight: 800; font-size: .92rem; cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.bcc-btn-primary:hover { filter: brightness(1.06); }
.bcc-btn-primary:disabled { opacity: .5; cursor: default; filter: none; }

/* save confirmation modal */
.bcc-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 32, .5);
}
.bcc-modal-overlay[hidden] { display: none; }
.bcc-modal {
  background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 28px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.bcc-modal h3 { margin: 6px 0 8px; }
.bcc-modal p { margin: 0 0 18px; color: var(--muted); font-weight: 600; }
.bcc-modal-icon {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #fff;
}
.bcc-modal-icon.ok { background: var(--ok, #16a34a); }
.bcc-modal-icon.err { background: var(--bad, #dc2626); }

/* ============ MAPS ============ */
.bcc-map {
  height: 560px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* ===== Navigation fleet map (WP-A): per-vehicle sprites + trails ===== */
/* divIcon wrapper: no default Leaflet box, let the sprite show through. */
.nav-veh-icon { background: none; border: 0; }
.nav-veh-rot { transform-origin: 50% 50%; will-change: transform; }
.nav-veh-img {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition: opacity .2s ease;
}
/* Stale vehicles (no fix > stale timeout) fade and desaturate (§7). */
.nav-veh-icon.nav-veh-stale .nav-veh-img { filter: grayscale(.6) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

/* Trail direction arrows (§2.11). */
.nav-trail-arrow-icon { background: none; border: 0; }
.nav-trail-arrow {
  font-size: 14px; line-height: 14px; font-weight: 900;
  text-align: center; transform-origin: 50% 50%;
}

/* ⚙ settings + ⤢ fullscreen buttons injected into the Leaflet zoom bar
   (fleet_map.js). They reuse .leaflet-control-zoom-in styling so they sit flush
   under + / − as one stacked bar; the floating mission toolbar lands below. */
.nav-map-btn { font-size: 15px; font-weight: 700; text-align: center; }
.nav-map-settings { font-size: 16px; }
body.gps-map-modal-open { overflow: hidden; }

/* Config opens from the in-map ⚙; the header button is a hidden click proxy. */
.nav-cfg-open-proxy { display: none !important; }

/* ===== BLOS-style Navigation layout: title + gear, HUD column + map ===== */
.nav-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nav-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--svp); }
.nav-cfg-gear {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--svp);
  font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-cfg-gear:hover { background: var(--svp); border-color: var(--svp); color: #fff; }
.nav-cfg-gear-sm { width: 28px; height: 28px; font-size: 1rem; }

/* The stage holds the HUD column + map; it is what goes fullscreen. The stage
   has no fixed height: the HUD (telemetry readout + 2×2 instrument cluster)
   defines the height and the map stretches to match it, so the map runs the
   full length of the compass column down to where the gauges end. */
/* nav-clone: layout superseded by gps_map_expand.css port.
.nav-stage { display: flex; gap: 14px; align-items: stretch; }
.nav-stage .bcc-map { flex: 1 1 auto; height: auto; align-self: stretch; min-width: 0; min-height: 520px; }
.nav-hud {
  flex: 0 0 clamp(360px, 30vw, 440px); width: clamp(360px, 30vw, 440px);
  display: flex; flex-direction: column; gap: 12px;
}
*/
.nav-hud-top { display: flex; align-items: center; gap: 8px; }
.nav-observe-select { flex: 1 1 auto; min-width: 0; font-weight: 700; }

/* Telemetry readout card (LAT / LON / ALT / GS / COURSE). */
/* nav-clone: readout styling superseded by ported .gps-telemetry-* rows.
.nav-readout {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
*/
/* Label / value rows styled 1:1 with the device .gps-telemetry-* rows. */
/* nav-clone: readout cell styling superseded.
.nav-readout th {
  text-align: left; color: var(--muted); font-weight: 700; font-size: .9rem;
  padding: 7px 12px; white-space: nowrap;
}
.nav-readout td {
  text-align: right; padding: 7px 12px; font-weight: 800; color: var(--ink);
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
*/

/* Instrument cluster: dark panel, 2×2 gauges (BLOS device parity). */
/* nav-clone: instrument cluster superseded by ported .gps-instruments grid.
.nav-instruments {
  --bcc-skyhawk-dial-scale: 1.24;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px;
  background: linear-gradient(180deg, #171b21 0%, #0e1116 100%);
  border: 1px solid #29313c; border-radius: 12px;
  padding: 12px; color: #e2e8f0;
  box-shadow: inset 0 0 18px rgba(0,0,0,.28), 0 1px 4px rgba(15,23,42,.08);
}
*/

/* Vehicle list rows */
.nav-veh-list { display: flex; flex-direction: column; gap: 4px; }
.nav-veh-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent;
}
.nav-veh-row:hover { background: rgba(77,170,212,.10); }
.nav-veh-row.is-focused { background: rgba(77,170,212,.16); border-color: #4DAAD4; }
.nav-veh-row.is-stale { opacity: .65; }
.nav-veh-row-icon { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; }
.nav-list-icon-img { max-width: 26px; max-height: 26px; display: block; }
.nav-list-icon-letter {
  width: 22px; height: 22px; border-radius: 50%; background: #4DAAD4; color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.nav-veh-row-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nav-veh-row-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-veh-row-state { font-size: .72rem; font-weight: 700; }
.nav-veh-row-state.is-online { color: var(--ok, #16a34a); }
.nav-veh-row-state.is-stale { color: var(--bad, #dc2626); }
.nav-veh-row-ctrls { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.nav-veh-row-color { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.nav-veh-row-vis { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; font-size: 14px; border-radius: 6px; line-height: 1; }
.nav-veh-row-vis:hover { background: rgba(0,0,0,.06); }
.nav-veh-row-vis.is-hidden { opacity: .55; }

/* Selects + display settings */
/* Inputs / selects sized 1:1 with the device (height 40, 10px radius, 15px). */
.nav-select {
  width: 100%; height: 40px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: inherit; font-size: 15px;
}
.nav-side-empty { color: var(--muted); font-size: .85rem; padding: 4px 2px; }
/* Display-unit field: label above, full-width select (device .gps-ui-field). */
.nav-setting { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; font-size: .9rem; font-weight: 700; color: var(--ink); }
.nav-setting .nav-select { flex: none; width: 100%; }

/* On/off switch */
.nav-switch { position: relative; display: inline-block; width: 42px; height: 22px; flex: 0 0 auto; }
.nav-switch input { opacity: 0; width: 0; height: 0; }
.nav-switch-slider { position: absolute; inset: 0; background: var(--line); border-radius: 22px; transition: background .15s ease; cursor: pointer; }
.nav-switch-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.nav-switch input:checked + .nav-switch-slider { background: #4DAAD4; }
.nav-switch input:checked + .nav-switch-slider::before { transform: translateX(20px); }

/* Observed-BLOS name + live/stale badge in the HUD top row */
.nav-tel-name { font-weight: 800; font-size: .95rem; color: var(--ink); padding: 0 2px; }
.nav-tel-state { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nav-tel-state.is-live { color: var(--ok, #16a34a); background: rgba(22,163,74,.12); }
.nav-tel-state.is-stale { color: var(--bad, #dc2626); background: rgba(220,38,38,.12); }

/* Flight instruments (skyhawk dials) inside the dark cluster panel — metal
   chassis bezel with corner screws and an inset shadow, cloned from the BLOS
   device dashboard. */
/* nav-clone: chassis/screws/dials superseded by ported gps_map_expand.css.
.flight-indicator {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; align-items: center; gap: 12px;
  width: 100%; min-height: 236px;
}
.instrument-chassis {
  --bcc-instrument-max-size: 250px;
  position: relative;
  width: min(100%, var(--bcc-instrument-max-size));
  aspect-ratio: 1 / 1;
  padding: 18px;
  background: linear-gradient(135deg, #4b4e53 0%, #2a2c2f 100%);
  border-radius: 12px;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.15),
    inset -1px -1px 2px rgba(0,0,0,0.8),
    0 12px 20px rgba(0,0,0,0.55);
  border: 1px solid #090a0c;
  overflow: hidden;
}
.instrument-chassis::after {
  content: ""; position: absolute; inset: 18px; border-radius: 50%;
  box-shadow: inset 0 6px 15px rgba(0,0,0,1); pointer-events: none; z-index: 4;
}
.instrument-chassis .screw {
  position: absolute; width: 16px; height: 16px;
  background: linear-gradient(135deg, #b0b0b0 0%, #4a4a4a 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.9),
    0 2px 4px rgba(0,0,0,0.9);
  z-index: 6;
}
.instrument-chassis .screw::before,
.instrument-chassis .screw::after {
  content: ""; position: absolute; background: rgba(0,0,0,0.82);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.instrument-chassis .screw::before { top: 2px; left: 7px; width: 2px; height: 12px; }
.instrument-chassis .screw::after { top: 7px; left: 2px; width: 12px; height: 2px; }
.instrument-chassis .screw.tl { top: 10px; left: 10px; transform: rotate(15deg); }
.instrument-chassis .screw.tr { top: 10px; right: 10px; transform: rotate(75deg); }
.instrument-chassis .screw.bl { bottom: 10px; left: 10px; transform: rotate(120deg); }
.instrument-chassis .screw.br { bottom: 10px; right: 10px; transform: rotate(-35deg); }
.flight-indicator__dial {
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%; overflow: hidden;
}
.flight-indicator__dial canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 50%; }
.flight-indicator__dial--skyhawk .instrument {
  position: absolute; top: 50%; left: 50%; display: block;
  width: 100%; height: 100%; max-width: none; max-height: none;
  transform: translate(-50%, -50%) scale(var(--bcc-skyhawk-dial-scale, 1.22));
  transform-origin: center center;
  filter: contrast(1.16) saturate(1.12) brightness(1.02);
}
.flight-indicator__meta { display: flex; justify-content: center; align-items: center; }
.flight-indicator__name {
  font-size: .86rem; letter-spacing: .04em; color: #d8dee8;
  font-weight: 400; text-align: center;
}
*/

/* ===== Fullscreen: HUD column + map fill the WHOLE viewport (Mission view) =====
   Zero padding + edge-to-edge map so every available pixel shows map, right down
   to the bottom of the screen. The HUD keeps its own inner padding so its cards
   aren't glued to the screen edge. */
/* nav-clone: fullscreen layout superseded by #nav-stage.nav-stage-fullscreen grid in gps_map_expand.css.
.nav-stage-fullscreen {
  position: fixed; inset: 0; z-index: 1200; height: 100vh; height: 100dvh; gap: 0;
  background: var(--bg); padding: 0; transition: inset .22s ease;
}
.nav-stage-fullscreen .nav-hud {
  flex: 0 0 360px; width: 360px; align-self: stretch;
  overflow: auto; padding: 10px 12px; background: var(--bg);
}
.nav-stage-fullscreen .bcc-map { border-radius: 0; border: 0; height: 100%; min-height: 0; }

@media (max-width: 900px) {
  .nav-stage { flex-direction: column; height: auto; }
  .nav-hud { flex-basis: auto; width: 100%; }
  .nav-stage .bcc-map { height: 420px; }
  .nav-stage-fullscreen { flex-direction: column; }
  .nav-stage-fullscreen .nav-hud { width: 100%; margin: 0 0 12px; flex-basis: auto; }
}
*/

/* ===== Navigation Configuration modal ===== */
body.bcc-modal-open { overflow: hidden; }
#nav-cfg-modal { z-index: 1400; }   /* above the fullscreen nav stage (z 1200) */
.bcc-btn-ghost {
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink);
  border-radius: 10px; padding: 10px 18px; font-weight: 800; font-size: .92rem; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.bcc-btn-ghost:hover { background: rgba(77,170,212,.08); border-color: var(--svp); }

/* Restyled 1:1 with the BLOS device Navigation Configuration modal (.navcfg-*
   / .gps-ui-* / .dual-section): cards with the white→blue gradient + underlined
   section titles, stacked label-over-input fields, device input/select sizing,
   and svp-blue action buttons. */
.bcc-modal.nav-cfg {
  max-width: 760px; width: 96vw; max-height: 90vh; text-align: left;
  padding: 0; display: flex; flex-direction: column;
  border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.nav-cfg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
}
.nav-cfg-head h3 { margin: 0; color: var(--svp); font-size: 1.1rem; font-weight: 900; }
.nav-cfg-body {
  padding: 12px 16px 8px; overflow: auto; display: flex; flex-direction: column; gap: 14px;
}
/* Card = device .dual-section with the navcfg gradient treatment. */
.nav-cfg-card {
  border: 1px solid #c8d3df; border-radius: 14px; padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.nav-cfg-card-title {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
  color: var(--svp-ink, var(--svp)); font-size: 1.05rem; font-weight: 800;
}
.nav-cfg-help { color: #64748b; font-size: .82rem; line-height: 1.35; margin: 0 0 10px; }
.nav-cfg-subhead {
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
/* Toggle pair: label + switch sit side-by-side, left aligned (device .gps-ui-toggle-line). */
.nav-cfg-toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; align-items: start; }
.nav-cfg-toggle { display: flex; flex-direction: column; gap: 6px; }
.nav-cfg-toggle-head { display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; }
.nav-cfg-label { font-weight: 700; color: var(--ink); }
.nav-cfg-toggle .nav-cfg-help { margin: 0; }
/* Display units: stacked label-over-select fields in a responsive grid. */
.nav-cfg-display { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.nav-cfg-foot {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px 14px; border-top: 1px solid var(--line);
}
/* Action buttons sized like device .navcfg-btn. */
.nav-cfg-foot .bcc-btn-primary, .nav-cfg-foot .bcc-btn-ghost {
  height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .nav-cfg-toggle-row { grid-template-columns: 1fr; }
  .nav-cfg-display { grid-template-columns: 1fr 1fr; }
}

/* ============ LOGIN (themed) ============ */
.bcc-login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 24px; box-sizing: border-box;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(77,170,212,.22), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(12,92,122,.16), transparent 60%),
    var(--bg);
}
.bcc-login-card {
  box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(12,92,122,.18); padding: 34px 30px 30px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 14px; width: 340px; max-width: 100%;
  position: relative; overflow: hidden;
}
/* SVP-blue accent bar across the top of the card */
.bcc-login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--svp), var(--svp-ink));
}
.bcc-login-logo { width: 116px; margin: 4px auto 2px; display: block; }
.bcc-login-card h1 {
  margin: 0; font-size: 1.22rem; color: var(--svp); text-align: center;
  font-weight: 800; letter-spacing: .01em;
}
.bcc-login-card .bcc-login-sub {
  margin: -4px 0 8px; text-align: center; color: var(--muted);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
}
.bcc-login-card input {
  box-sizing: border-box; width: 100%; display: block;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bcc-login-card input::placeholder { color: var(--muted); }
.bcc-login-card input:focus {
  outline: none; border-color: var(--svp);
  box-shadow: 0 0 0 3px rgba(77,170,212,.22);
}
.bcc-login-card button {
  box-sizing: border-box; width: 100%; display: block;
  padding: 12px; border: 0; border-radius: 10px; background: var(--svp); color: #fff;
  font-weight: 800; cursor: pointer; font-size: .95rem; margin-top: 6px;
  letter-spacing: .02em; transition: background .15s ease, transform .05s ease;
}
.bcc-login-card button:hover { background: var(--svp-ink); }
.bcc-login-card button:active { transform: translateY(1px); }
.bcc-error {
  color: var(--bad); margin: 0; text-align: center; font-weight: 700; font-size: .9rem;
  background: rgba(192,57,43,.10); border: 1px solid rgba(192,57,43,.30);
  border-radius: 8px; padding: 8px 10px;
}

/* ============ ADMIN (devices) — keep usable, themed ============ */
.bcc-admin-form {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.bcc-admin-form input {
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink);
}
.bcc-admin-form button {
  padding: 9px 16px; border: 0; border-radius: 9px; background: var(--svp); color: #fff;
  font-weight: 700; cursor: pointer;
}
.bcc-msg { color: var(--svp-ink); font-weight: 700; }
.bcc-status-online { color: var(--ok); font-weight: 700; }
.bcc-status-offline { color: var(--muted); }

/* Per-row action cluster (edit gear / enable-disable / delete). */
.bcc-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bcc-row-actions form { margin: 0; }
.bcc-row-actions button {
  padding: 7px 12px; border: 0; border-radius: 9px; background: var(--svp); color: #fff;
  font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.bcc-icon-btn {
  background: var(--bg) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; padding: 7px 10px !important;
}
.bcc-icon-btn.active { background: var(--svp) !important; color: #fff !important; border-color: var(--svp) !important; }
.bcc-btn-danger { background: var(--bad) !important; }

/* Inline edit row revealed by the gear button. */
.bcc-edit-row > td { background: var(--surface); padding: 0 16px 14px; }
.bcc-edit-field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.bcc-edit-field input { min-width: 180px; }
.bcc-edit-field.bcc-edit-wide input { min-width: 340px; }
.bcc-admin-form input:disabled { opacity: .6; cursor: not-allowed; }

/* Multi-tenant chrome */
.bcc-appbar-user { color: var(--muted); font-weight: 700; margin-left: .35rem; }
.bcc-check { display: inline-flex; align-items: center; gap: .25rem;
  margin: 0 .5rem .25rem 0; font-weight: 600; }

/* ============ CLIENTS — accordion admin ============ */
.bcc-clients-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.bcc-clients-head h2 { margin: 0; }
.bcc-clients-head .bcc-sub { margin: 4px 0 0; max-width: 62ch; }
.bcc-clients-head .bcc-btn-primary { flex: none; display: inline-flex; align-items: center; gap: 6px; }

.bcc-add-card {
  margin: 14px 0 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 14px 2px;
}
.bcc-add-card .bcc-admin-form { background: transparent; border: 0; padding: 8px 0; align-items: flex-end; }

.bcc-client-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.bcc-client-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.bcc-client-card.open { border-color: var(--svp); box-shadow: 0 6px 24px rgba(77,170,212,.14); }

.bcc-client-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); font: inherit;
}
.bcc-client-head:hover { background: rgba(77,170,212,.06); }
.bcc-client-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  background: var(--svp); color: #fff;
}
.bcc-client-id-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bcc-client-name { font-weight: 800; font-size: 1rem; }
.bcc-client-sub { color: var(--muted); font-size: .85rem; font-weight: 600; }
.bcc-client-badge {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: rgba(77,170,212,.12); color: var(--svp-ink); border: 1px solid var(--line);
}
.bcc-client-chev { flex: none; color: var(--muted); transition: transform .18s; }
.bcc-client-card.open .bcc-client-chev { transform: rotate(180deg); }

.bcc-client-body { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
.bcc-client-body .bcc-edit-field { margin-top: 14px; }
.bcc-client-body .bcc-edit-field input {
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit;
}
.bcc-field-label {
  margin: 16px 0 8px; font-size: .8rem; font-weight: 700; color: var(--muted);
}
.bcc-client-body .js-adv-toggle { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; }

.bcc-client-adv {
  margin-top: 14px; padding: 14px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--bg);
}
.bcc-client-meta { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 12px; }
.bcc-client-meta > div { display: flex; flex-direction: column; gap: 3px; }
.bcc-client-meta span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.bcc-client-meta code { font-size: .85rem; color: var(--ink); }

.bcc-client-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.bcc-client-foot .bcc-btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.bcc-client-delete { margin-top: 12px; }
.bcc-client-delete .bcc-btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 9px; color: #fff;
  font-weight: 700; cursor: pointer;
}
.bcc-chip label, label.bcc-chip { cursor: pointer; }

.bcc-empty {
  margin-top: 18px; padding: 28px; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line); border-radius: 14px;
}

/* Read-only key/value rows inside System Configuration .dual-section cards */
.cfg-body { display: flex; flex-direction: column; }
.cfg-kv { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.cfg-kv:last-child { border-bottom: 0; }
.cfg-kv .k { color: var(--muted); font-weight: 700; }
.cfg-kv .v { font-weight: 700; text-align: right; }

/* ===========================================================================
   WP-C — Navigation planning & recording tools (waypoints, danger zones,
   imported tracks, fleet recording). Built on the same tokens as the rest of
   the nav sidebar; primitives from style.css.
   =========================================================================== */
.nav-tools { display: flex; flex-direction: column; gap: 6px; }
.nav-tool { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.nav-tool-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--ink); text-align: left;
}
.nav-tool-head:hover { color: var(--svp-ink); background: rgba(77,170,212,.08); }
.nav-tool-caret { color: var(--muted); transition: transform .15s; display: inline-block; }
.nav-tool.open .nav-tool-caret { transform: rotate(90deg); color: var(--svp); }
.nav-tool-body { padding: 10px 11px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }

/* forms */
.nav-form { display: flex; flex-direction: column; gap: 7px; }
.nav-form-row { display: flex; gap: 6px; align-items: center; }
.nav-form-row > * { flex: 1 1 auto; }
.nav-flabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.nav-input, .nav-select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%;
}
.nav-input:focus, .nav-select:focus { outline: 2px solid var(--svp); border-color: var(--svp); }
textarea.nav-input { resize: vertical; }
input[type="color"].wp-color, input[type="color"].dz-color {
  padding: 2px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer;
}
.nav-check { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink); }
.nav-coord-grp { display: flex; gap: 4px; }
.nav-coord-grp input { width: 100%; }
.nav-coord-grp select { flex: 0 0 52px; }

/* buttons */
.nav-btn {
  font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer;
  color: var(--svp-ink); background: rgba(77,170,212,.12);
  border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; white-space: nowrap;
}
.nav-btn:hover { background: rgba(77,170,212,.2); }
.nav-btn.active { background: var(--svp); color: #fff; }
.nav-btn-primary { background: var(--svp); color: #fff; }
.nav-btn-primary:hover { background: var(--svp-ink); }
.nav-btn-wide { display: block; text-align: center; text-decoration: none; }
.nav-status { font-size: .8rem; color: var(--muted); min-height: 1em; }

/* shared list rows */
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-list-empty { font-size: .82rem; color: var(--muted); padding: 4px 2px; }
.nav-list-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 7px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.nav-list-row.editing { border-color: var(--svp); box-shadow: 0 0 0 2px rgba(77,170,212,.18); }
.nav-list-main { flex: 1 1 auto; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.nav-list-main strong { font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-list-main small { font-size: .74rem; color: var(--muted); }
.nav-swatch { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.nav-mini {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--muted); font-size: .85rem; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-mini:hover { color: var(--svp-ink); border-color: var(--svp); }

/* recording */
.nav-form.recording .rec-start, .nav-tool .recording { }
.rec-live { color: var(--bad); font-weight: 800; font-size: .76rem; }

/* playback modal (reuses .bcc-modal-overlay chrome) */
.nav-pb-modal { width: min(960px, 94vw); max-width: 94vw; padding: 0; overflow: hidden; }
.nav-pb-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.nav-pb-head h3 { margin: 0; flex: 1 1 auto; color: var(--svp-ink); }
.nav-pb-gpx { text-decoration: none; }
.nav-pb-map { height: min(56vh, 520px); width: 100%; }
.nav-pb-controls { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.nav-pb-controls .nav-pb-scrub { flex: 1 1 auto; }
.nav-pb-play { flex: 0 0 auto; min-width: 46px; }
.nav-pb-speed { flex: 0 0 80px; }
.nav-pb-time { flex: 0 0 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.nav-pb-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 16px; }
.nav-pb-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink); }

/* ===========================================================================
   Fleet chat (Chat tab) — list + message view + composer. Polling only.
   Reuses theme tokens (--surface/--ink/--muted/--line/--ok) + SVP blue #4DAAD4.
   =========================================================================== */
.bcc-tab-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  font-size: .72rem; line-height: 18px; text-align: center;
  border-radius: 9px; background: #ef4444; color: #fff; vertical-align: middle;
}
.bcc-chat { display: flex; gap: 14px; height: 70vh; min-height: 420px; }
.bcc-chat-list {
  flex: 0 0 260px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.bcc-chat-list-head {
  padding: 12px 14px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.bcc-chat-convs { overflow-y: auto; flex: 1; }
.bcc-chat-conv {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
  text-align: left; color: var(--ink); border-bottom: 1px solid var(--line);
}
.bcc-chat-conv:hover { background: rgba(77,170,212,.08); }
.bcc-chat-conv.active { background: rgba(77,170,212,.16); }
.bcc-chat-conv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcc-chat-conv-unread {
  min-width: 18px; padding: 0 5px; font-size: .72rem; line-height: 18px;
  text-align: center; border-radius: 9px; background: #ef4444; color: #fff;
}
.bcc-chat-main {
  flex: 1; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.bcc-chat-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 10px;
}
.bcc-chat-title { font-weight: 600; color: var(--ink); }
.bcc-chat-presence { color: var(--muted); font-size: .85rem; }
.bcc-chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bcc-chat-msg { max-width: 72%; padding: 8px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.bcc-chat-msg.mine { align-self: flex-end; background: #4DAAD4; border-color: #4DAAD4; color: #fff; }
.bcc-chat-msg.mine .bcc-muted { color: rgba(255,255,255,.8); }
.bcc-chat-msg-meta { font-size: .74rem; color: var(--muted); margin-bottom: 2px; }
.bcc-chat-msg.mine .bcc-chat-msg-meta { color: rgba(255,255,255,.9); }
.bcc-chat-msg-body { white-space: pre-wrap; word-break: break-word; }
.bcc-chat-file { color: inherit; text-decoration: underline; }
.bcc-chat-composer { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bcc-chat-input { resize: vertical; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--ink); font: inherit; }
.bcc-chat-composer-actions { display: flex; align-items: center; gap: 10px; }
.bcc-chat-attach, .bcc-chat-loc { cursor: pointer; font-size: 1.2rem; line-height: 1; border: 0; background: transparent; }
.bcc-chat-send { margin-left: auto; }

/* ===== Intercom operator console (WP-E) ===================================
   Restyled to match the BLOS device intercom panel (src/static/css/intercom.css)
   pixel-for-pixel: cards, kicker labels, status pill, master switch, roster.
   intercom_console.js is UNTOUCHED — every selector below targets the exact
   class names / ids it already emits. Roster span order (dot · role · name ·
   mute) is remapped to the BLOS visual order (dot · name · role · mute-right)
   with flex `order`, so no JS markup change is needed. ====================== */

/* ── Shell ── outer box mirrors the BLOS `.config-container` the panel sits in:
   the whole intercom is encased in one surface card, with the inner cards nested
   inside it (box-in-box), and the title rendered in SVP blue like BLOS. */
.intercom-room {
  display: flex; flex-direction: column; gap: 18px; max-width: 680px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin: 16px 0; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.intercom-room-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.intercom-room-head h2 { margin: 0; font-size: 22px; letter-spacing: .2px; color: var(--svp); }
.intercom-kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.intercom-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.intercom-card[hidden] { display: none; }

/* ── Status pill (JS sets `ic-chip ic-chip-<state>`) ── */
.ic-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  white-space: nowrap; line-height: 1.4;
}
.ic-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ic-chip-connected    { color: #15803d; border-color: rgba(21,128,61,.3);  background: rgba(21,128,61,.08); }
.ic-chip-connecting,
.ic-chip-reconnecting { color: #b45309; border-color: rgba(180,83,9,.3);   background: rgba(180,83,9,.08); }
.ic-chip-connecting::before,
.ic-chip-reconnecting::before { animation: intercom-pulse 1.1s ease-in-out infinite; }
.ic-chip-error        { color: #b91c1c; border-color: rgba(185,28,28,.3);  background: rgba(185,28,28,.08); }
.ic-chip-stopped      { color: var(--muted); }
@keyframes intercom-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Master switch (BLOS .intercom-switch) ── */
.intercom-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.intercom-switch-copy strong { display: block; font-size: 15px; }
.intercom-switch-copy span { color: var(--muted); font-size: 13px; }
.intercom-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex: 0 0 auto; }
.intercom-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.intercom-switch .intercom-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.intercom-switch .intercom-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; }
.intercom-switch input:checked + .intercom-switch-track { background: var(--svp); }
.intercom-switch input:checked + .intercom-switch-track::before { transform: translateX(22px); }
.intercom-switch input:focus-visible + .intercom-switch-track { outline: 3px solid rgba(70,130,209,.5); outline-offset: 2px; }

/* ── Controls (mute / talkmode / ptt) — JS toggles `ic-active` ── */
.ic-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ic-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ic-btn:hover:not(:disabled) { border-color: var(--svp); }
.ic-btn:disabled { opacity: .5; cursor: not-allowed; }
#ic-mute.ic-active { background: #fff1f2; color: #b91c1c; border-color: rgba(185,28,28,.3); }
.ic-ptt { user-select: none; touch-action: none; }
.ic-ptt[hidden] { display: none; }
.ic-ptt.ic-active { background: var(--svp); color: #fff; border-color: var(--svp); }

/* ── Roster (JS emits: dot · rolechip · name · mute-icon) ── */
.ic-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ic-roster-empty { color: var(--muted); font-size: 13px; padding: 10px 4px; }
.ic-roster-empty[hidden] { display: none; }
.ic-roster-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background .15s ease; }
.ic-roster-row:hover { background: var(--bg); }
.ic-roster-row.ic-self { background: rgba(77,170,212,.08); }

.ic-dot { order: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: 0 0 auto; transition: background .15s ease, box-shadow .15s ease; }
.ic-dot-talking { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: intercom-talk 1.1s ease-out infinite; }
.ic-dot-muted { background: #9aa6b2; }
@keyframes intercom-talk { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

.ic-name { order: 2; font-weight: 600; font-size: 14px; }
.ic-dot-talking ~ .ic-name { color: #15803d; }
.ic-you { color: var(--muted); font-weight: 400; font-size: .85em; }
.ic-rolechip { order: 3; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: transparent; }
.ic-rolechip-op { color: var(--svp); border-color: var(--svp); }
.ic-muted-icon { order: 4; margin-left: auto; color: #b91c1c; font-size: 15px; }

/* ── Mic-permission banner (JS toggles the `hidden` attribute) ── */
.ic-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px;
  background: #fff7ed; border: 1px solid rgba(180,83,9,.35); color: #92400e;
}
.ic-banner[hidden] { display: none; }
.ic-banner-body { flex: 1 1 220px; }
.ic-banner-body strong { display: block; font-size: 14px; }
.ic-banner-text { font-size: 13px; }
#ic-banner-allow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: none;
  background: #b45309; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
}
#ic-banner-allow:hover { filter: brightness(1.06); }

/* ── Engine-unavailable explainer + relay help line ── */
.ic-unavailable { font-size: 13px; color: var(--muted); }
.ic-unavailable[hidden] { display: none; }
.ic-unavailable code { font-size: .85em; }
.ic-help { color: #b91c1c; font-size: 13px; }
.ic-help[hidden] { display: none; }
.ic-help code { font-size: .9em; }

/* ── Dark mode (mirror BLOS intercom.css) ── */
html.theme-dark .intercom-card { background: var(--surface); border-color: var(--line); }
html.theme-dark .ic-btn { background: var(--surface); }
html.theme-dark .ic-banner { background: rgba(180,83,9,.14); color: #fbbf24; border-color: rgba(180,83,9,.4); }
html.theme-dark #ic-mute.ic-active { background: rgba(185,28,28,.18); color: #fca5a5; }

/* ===== Fleet Alerts (2026-06-30) ===== */
:root { --warn-amber: #f59e0b; }
.alerts-head-actions{ display:flex; align-items:center; gap:.6rem; }
.alerts-filters .chip{ border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:.15rem .7rem; cursor:pointer; font-size:.85rem; }
.alerts-filters .chip.active{ color:var(--ink); border-color:var(--svp); }
.bcc-gear{ background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  font-size:1.1rem; padding:.2rem .5rem; color:var(--muted); }
.alert-row{ display:flex; align-items:stretch; gap:.6rem; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); margin:.4rem 0; overflow:hidden; }
.alert-rail{ width:5px; background:var(--muted); flex:0 0 5px; }
.alert-row.sev-info .alert-rail, .alert-row.sev-advisory .alert-rail{ background:var(--muted); }
.alert-row.sev-caution .alert-rail{ background:var(--warn-amber); }
.alert-row.sev-warning .alert-rail, .alert-row.sev-critical .alert-rail{ background:var(--bad); }
.alert-main{ flex:1; padding:.45rem .6rem; min-width:0; }
.alert-line1{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.alert-dev{ font-weight:600; color:var(--ink); }
.alert-label{ color:var(--svp); font-weight:600; }
.alert-pill{ font-size:.7rem; padding:.05rem .45rem; border-radius:999px; }
.alert-pill.on{ background:var(--bad); color:#fff; } .alert-pill.off{ background:var(--line); color:var(--muted); }
.alert-pill.info{ background:var(--svp); color:#fff; }  /* informational (non-red) active alert — no ack needed */
.alert-ack{ font-size:.72rem; color:var(--ok); }
.alert-msg{ color:var(--ink); margin-top:.15rem; }
.alert-meta{ color:var(--muted); font-size:.78rem; margin-top:.1rem; text-transform:capitalize; }
.alert-row .ack-btn{ align-self:center; margin-right:.5rem; }
/* tab badge color by highest active severity */
.bcc-tab-badge.sev-caution{ background:var(--warn-amber); }
.bcc-tab-badge.sev-info, .bcc-tab-badge.sev-advisory{ background:var(--muted); }
/* toast */
.bcc-toast{ position:fixed; right:1rem; bottom:1rem; background:var(--ink); color:#fff;
  padding:.6rem .9rem; border-radius:10px; max-width:340px; opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s; z-index:9999; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.bcc-toast.show{ opacity:1; transform:translateY(0); }