/* =============================================================
   AFD-10 — shared chrome + primitives
   ============================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { color: var(--primary-hover); }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* desktop-only gate (helpdesk §G.10) */
.workstation-gate {
  display: none;
}
@media (max-width: 1023px) {
  .app-root { display: none; }
  .workstation-gate {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--sp-9);
    text-align: center;
    color: var(--fg-muted);
  }
  .workstation-gate h1 {
    font-size: var(--fs-22);
    color: var(--fg);
    margin: 0 0 var(--sp-4);
  }
}

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 44px;
  padding: 0 var(--sp-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--fg-strong);
  letter-spacing: 0.02em;
}
/* AFD-16 — real Shanyraq mark in the topbar (replaces the old placeholder
   .glyph square). The SVG carries its own Innoforce gradient, so no token
   colour here — just sizing/alignment. */
.topbar .logo .brand-mark {
  width: 22px; height: 22px;
  display: block;
  flex: 0 0 auto;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.topbar nav a {
  padding: 6px var(--sp-5);
  border-radius: var(--r-2);
  font-size: var(--fs-12);
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.topbar nav a:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.topbar nav a.active {
  background: var(--primary-bg);
  color: var(--primary);
}
.topbar nav #afdAdminNav {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}
.topbar nav #afdAdminNav.is-visible { display: inline-flex; }
.topbar .spacer { flex: 1; }
.topbar .right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-shrink: 0;
}

/* ---------- city picker (global UEM context) ---------- */
.city-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 28px;
  padding: 0 var(--sp-5);
  margin-left: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  max-width: 280px;
  white-space: nowrap;
}
.city-picker-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.city-picker-btn[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.city-picker-btn[data-scoped] {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary-bg-2);
}
.city-picker-btn .globe {
  display: inline-flex;
  color: var(--fg-subtle);
}
.city-picker-btn[data-scoped] .globe { color: var(--primary); }
.city-picker-btn .cp-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.city-picker-btn .cp-count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-sunk);
  color: var(--fg-subtle);
  padding: 1px 5px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.city-picker-btn[data-scoped] .cp-count {
  background: rgba(91, 95, 199, 0.18);
  color: var(--primary);
}
.city-picker-btn .caret {
  color: var(--fg-subtle);
  font-size: 9px;
}

#__cpwrap { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.cp-panel {
  position: absolute;
  pointer-events: auto;
  width: 340px;
  max-height: 540px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--fs-12);
  animation: cp-pop 160ms var(--ease) both;
}
@keyframes cp-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cp-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.cp-search .ico {
  color: var(--fg-subtle);
  font-size: 13px;
}
.cp-search input {
  flex: 1;
  height: 24px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: var(--fs-12);
}
.cp-search input::placeholder { color: var(--fg-subtle); }
.cp-search .cp-clear {
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-2);
}
.cp-search .cp-clear:hover { color: var(--fg); background: var(--surface-hover); }

.cp-master {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-alt);
  cursor: pointer;
  user-select: none;
}
.cp-master:hover { background: var(--surface-hover); }
.cp-master-lbl {
  font-weight: 600;
  color: var(--fg-strong);
}
.cp-master-meta {
  font-size: 10px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
}
.cp-master.is-all .cp-master-meta { color: var(--primary); }

.cp-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  position: relative;
  flex-shrink: 0;
}
.cp-check.on {
  background: var(--primary);
  border-color: var(--primary);
}
.cp-check.on::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--primary-fg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.cp-check.mixed {
  background: var(--primary-bg);
  border-color: var(--primary);
}
.cp-check.mixed::after {
  content: "";
  position: absolute;
  left: 3px; top: 6px;
  width: 8px; height: 2px;
  background: var(--primary);
  border-radius: 1px;
}

.cp-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cp-group {
  border-bottom: 1px solid var(--border-soft);
}
.cp-group:last-child { border-bottom: none; }
.cp-group-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border: none;
  background: var(--surface);
  color: var(--fg-subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.cp-group-head:hover { background: var(--surface-hover); }
.cp-group-name {}
.cp-group-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.cp-group-action {
  font-size: 10px;
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.cp-group-head:hover .cp-group-action { opacity: 1; }

.cp-group-body {
  display: flex;
  flex-direction: column;
}
.cp-city {
  display: grid;
  grid-template-columns: 18px 8px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 5px var(--sp-6) 5px var(--sp-7);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  font-size: var(--fs-12);
  border-left: 2px solid transparent;
}
.cp-city:hover { background: var(--surface-hover); }
.cp-city.on { border-left-color: var(--primary); background: var(--primary-bg); }
.cp-city.on:hover { background: var(--primary-bg-2); }
.cp-city-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--idle);
}
.cp-city-dot.s-ok    { background: var(--ok); }
.cp-city-dot.s-warn  { background: var(--warn); }
.cp-city-dot.s-bad   { background: var(--bad); }
.cp-city-dot.s-idle  { background: var(--idle); opacity: 0.5; }
.cp-city-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-city-code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
}
.cp-city-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--surface-sunk);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  min-width: 28px;
  text-align: center;
}
.cp-city.on .cp-city-count {
  background: var(--surface);
  color: var(--primary);
}

.cp-empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-6);
  color: var(--fg-muted);
}
.cp-empty a {
  color: var(--primary);
  margin-left: 4px;
}

.cp-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-alt);
}
.cp-footer-meta {
  font-size: 10px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.cp-footer-meta b {
  color: var(--fg-strong);
  font-weight: 600;
}
.cp-spacer { flex: 1; }
.cp-action {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: var(--fs-11);
  font-weight: 500;
  padding: 0 var(--sp-5);
  height: 24px;
  border-radius: var(--r-3);
  cursor: pointer;
}
.cp-action:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cp-action-primary {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}
.cp-action-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* ---------- end city picker ---------- */

/* connection state dot (helpdesk §C.1 + §E.2) */
.conn-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-11);
  color: var(--fg-muted);
  padding: 4px var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.conn-state:hover { border-color: var(--border); }
.conn-state .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok);
}
.conn-state[data-state="live"]   .dot { background: var(--ok);   animation: pulse-ok 2.2s ease-out infinite; }
.conn-state[data-state="reconn"] .dot { background: var(--warn); animation: pulse-warn 0.9s ease-out infinite; }
.conn-state[data-state="poll"]   .dot { background: var(--idle); }
.conn-state[data-state="live"]   .label::before { content: "Live"; }
.conn-state[data-state="reconn"] .label::before { content: "Переподключение"; }
.conn-state[data-state="poll"]   .label::before { content: "Polling 60s"; }

@keyframes pulse-ok {
  0%   { box-shadow: 0 0 0 0 rgba(47, 125, 75, 0.5); }
  100% { box-shadow: 0 0 0 8px rgba(47, 125, 75, 0); }
}
@keyframes pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(178, 116, 24, 0.55); }
  100% { box-shadow: 0 0 0 6px rgba(178, 116, 24, 0); }
}

/* role + theme + lang controls */
.toolbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.toolbtn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.toolbtn[aria-pressed="true"] {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary-bg-2);
}
.toolbtn .caret { color: var(--fg-subtle); font-size: 9px; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) 0 0;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
}
.user-chip .avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid; place-items: center;
  margin: 2px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.user-chip .role {
  font-size: var(--fs-11);
  color: var(--fg-muted);
  padding-right: var(--sp-4);
}

/* dropdown menu */
.menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
  min-width: 200px;
  z-index: 80;
  font-size: var(--fs-12);
}
.menu .item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 6px var(--sp-5);
  border-radius: var(--r-2);
  color: var(--fg);
  cursor: pointer;
}
.menu .item:hover { background: var(--surface-hover); }
.menu .item.active { background: var(--primary-bg); color: var(--primary); }
.menu .label-row { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); padding: var(--sp-3) var(--sp-5) var(--sp-2); }
.menu .sep { height: 1px; background: var(--border-soft); margin: var(--sp-2) 0; }

/* =========================================================
   Filter bar
   ========================================================= */
.filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.filterbar .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  margin-right: var(--sp-2);
}
.filterbar .group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  overflow: hidden;
}
.filterbar .group .seg {
  padding: 4px var(--sp-5);
  font-size: var(--fs-11);
  color: var(--fg-muted);
  cursor: pointer;
  border-right: 1px solid var(--border-soft);
  user-select: none;
  white-space: nowrap;
}
.filterbar .group .seg:last-child { border-right: none; }
.filterbar .group .seg:hover { background: var(--surface-hover); color: var(--fg); }
.filterbar .group .seg[aria-pressed="true"] {
  background: var(--primary-bg);
  color: var(--primary);
}

.field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  font-size: var(--fs-11);
  color: var(--fg);
}
.field input,
.field select {
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--fs-11);
  color: var(--fg);
  min-width: 0;
}
.field input[type="search"] { width: 160px; }
.field svg, .field .ico { color: var(--fg-subtle); }
.field.date-hint {
  min-width: 190px;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--fg-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--primary-bg);
  color: var(--primary);
  font-size: var(--fs-11);
  font-weight: 500;
}
.chip .x { cursor: pointer; opacity: 0.7; font-size: 11px; }
.chip .x:hover { opacity: 1; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 28px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { color: var(--bad); border-color: var(--bad-bg); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-hover); border-color: var(--border); }
.btn.sm { height: 24px; padding: 0 var(--sp-5); font-size: var(--fs-11); }
.btn.lg { height: 32px; padding: 0 var(--sp-7); }

/* =========================================================
   Status badges
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.badge .b-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge.ok    { background: var(--ok-bg);    color: var(--ok-fg); }
.badge.warn  { background: var(--warn-bg);  color: var(--warn-fg); }
.badge.idle  { background: var(--idle-bg);  color: var(--idle-fg); }
.badge.bad   { background: var(--bad-bg);   color: var(--bad-fg); }
.badge.muted { background: var(--surface-sunk); color: var(--fg-muted); }
.badge.speed { background: var(--speed-bg); color: var(--speed-fg); }
.badge.neutral { background: var(--surface-sunk); color: var(--fg-muted); }

/* AFD-12 B6 — placeholder (Roadmap) pages /admin/layouts + /admin/ads. Promoted
   from inline styles to token-driven classes (B7b-1 obs#2 — class-driven like the
   rest of the UI; raw px → --fs-* tokens; no parallel visual language). */
.placeholder-page { max-width: 880px; margin: 32px auto; padding: 24px; }
.placeholder-page .body { padding: 24px; }
.placeholder-page .lead { font-size: var(--fs-14); line-height: 1.6; color: var(--fg-strong); }
.placeholder-page .note { font-size: var(--fs-13); line-height: 1.6; color: var(--fg-muted); margin-top: 16px; }
.placeholder-page ul    { font-size: var(--fs-13); line-height: 1.7; color: var(--fg-muted); margin-top: 8px; }
.placeholder-page .foot { font-size: var(--fs-12); color: var(--fg-muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.placeholder-page .foot-link { font-size: var(--fs-12); color: var(--fg-muted); margin-top: 8px; }

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-11);
  color: var(--fg-muted);
}
.partner-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--idle);
}
.partner-badge[data-p="innoforce-almaty"]::before { background: var(--partner-1); }
.partner-badge[data-p="avtobys-astana"]::before   { background: var(--partner-2); }
.partner-badge[data-p="unassigned"]::before       { background: var(--partner-3); }

/* =========================================================
   Dense table (helpdesk §B.3)
   - sticky <th> only, NOT sticky thead (§F.3)
   ========================================================= */
.tbl-wrap {
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  position: relative;
}
table.dense {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-12);
  table-layout: fixed;
}
table.dense th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--th-h);
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding: 0 var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
table.dense th .sort {
  margin-left: var(--sp-2);
  opacity: 0.4;
  font-size: 9px;
}
table.dense th[aria-sort] .sort { opacity: 1; color: var(--primary); }
table.dense td {
  height: var(--row-h);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  vertical-align: middle;
}
table.dense tbody tr { cursor: pointer; }
table.dense tbody tr:hover { background: var(--surface-hover); }
table.dense tbody tr.flash {
  animation: row-flash 1.2s ease-out;
}
@keyframes row-flash {
  0%   { background: var(--warn-bg); }
  100% { background: transparent; }
}
table.dense tbody tr.flash-bad {
  animation: row-flash-bad 1.6s ease-out;
}
@keyframes row-flash-bad {
  0%   { background: var(--bad-bg); }
  100% { background: transparent; }
}
table.dense td.num,
table.dense th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dense td.mono { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg); }
table.dense td.muted { color: var(--fg-muted); }

/* =========================================================
   Cards / panels (helpdesk §B.4)
   ========================================================= */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel > .head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.panel > .head h3 {
  font-size: var(--fs-12);
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-strong);
}
.panel > .head .count {
  font-size: var(--fs-11);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
}
.panel > .head .spacer { flex: 1; }
.panel > .body { padding: var(--sp-6); }
.panel.flush > .body { padding: 0; }
.panel.scroll > .body { overflow: auto; }

/* kpi tile */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.kpi .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.kpi .val {
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi .delta {
  font-size: var(--fs-11);
  color: var(--fg-muted);
  display: flex; gap: var(--sp-3);
}
.kpi .delta.up    { color: var(--ok); }
.kpi .delta.down  { color: var(--bad); }

/* =========================================================
   Event feed
   ========================================================= */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: var(--fs-12);
}
.feed-item.is-new { animation: ticker-item-in 220ms var(--ease) both; }
.feed-item:hover { background: var(--surface-hover); }
.feed-item .rail {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  margin-top: 2px;
  background: var(--idle);
}
.feed-item[data-type="speed"]     .rail { background: var(--speed); }
.feed-item[data-type="route_off"] .rail { background: var(--hue-route); }
.feed-item[data-type="stop_missed"] .rail { background: var(--hue-stop); }
.feed-item[data-type="trip_started"] .rail,
.feed-item[data-type="trip_finished"] .rail { background: var(--hue-trip); }
.feed-item[data-type="fsm"]    .rail { background: var(--hue-fsm); }
.feed-item[data-type="offline"] .rail { background: var(--bad); }
.feed-item[data-severity="bad"] { background: linear-gradient(90deg, var(--bad-bg) 0%, transparent 80%); }

.feed-item .body { min-width: 0; }
.feed-item .title {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-weight: 500;
  color: var(--fg-strong);
  min-width: 0;
}
.feed-item .title span { min-width: 0; }
.feed-item .title .plate {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  background: var(--surface-sunk);
  padding: 0 4px;
  border-radius: 2px;
}
.feed-item .meta {
  font-size: var(--fs-11);
  color: var(--fg-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-item .ts {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--fg-subtle);
  white-space: nowrap;
}
@keyframes ticker-item-in {
  from { opacity: 0; transform: translateX(-18px) scale(0.94); background: var(--primary-bg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* =========================================================
   Skeleton + empty
   ========================================================= */
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunk), var(--surface-hover), var(--surface-sunk));
  background-size: 200% 100%;
  animation: skel 1.4s infinite linear;
  border-radius: var(--r-2);
}
@keyframes skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-12);
  color: var(--fg-muted);
}
.empty-state h4 { color: var(--fg); margin: 0 0 var(--sp-3); font-size: var(--fs-14); font-weight: 600; }

/* =========================================================
   Misc
   ========================================================= */
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.tnum { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
hr.sep {
  border: none;
  height: 1px;
  background: var(--border-soft);
  margin: var(--sp-5) 0;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface-sunk);
  color: var(--fg-muted);
}

/* focus ring */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--r-2);
}

/* leaflet overrides — flatten the default rounded popup, match operator chrome */
.leaflet-container {
  background: var(--bg-canvas);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
}
.leaflet-popup-content-wrapper {
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--border);
  padding: 0;
}
.leaflet-popup-content { margin: var(--sp-5) var(--sp-6); font-size: var(--fs-12); }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-control-zoom a {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border) !important;
}
.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .leaflet-control-attribution { background: rgba(0,0,0,0.5) !important; color: var(--fg-muted) !important; }
[data-theme="dark"] .leaflet-tile { filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.95); }
.local-basemap-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  color: var(--fg-muted);
  font-size: var(--fs-11);
  padding: 3px var(--sp-4);
}