/* ── Dashboard scope selector (topbar button + picker modal) ───────────── */
.scope-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 34px; padding: 0 12px; max-width: 260px;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3px;
  transition: color .12s, border-color .12s, background .12s;
}
.scope-btn:hover { color: var(--text); border-color: var(--border-bright); background: var(--panel-2); }
.scope-btn svg { flex: none; }
.scope-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-btn-caret { opacity: .6; }
.scope-btn.is-scoped {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 10%, var(--panel));
}

/* Sizing comes from the shared window ladder (`win-md` on the backdrop); layout
   from the shared `.win-body` + `.win-results` picker helpers. The only bespoke
   bit is `.scope-search` — a search field with an inset icon, which `.win-toolbar`
   doesn't provide; it just needs pinning (`flex: none`) as a `.win-body` child. */
.scope-search {
  flex: none; position: relative; display: flex; align-items: center; margin: 6px 0 14px;
}
.scope-search-icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.scope-search input { margin: 0; padding-left: 36px; }

/* Fixed grid so every column lines up down the list: name · stats · ✓.
   Nothing is content-sized, so names of any length and rows with/without СЗЧ stay
   on the same vertical rails. */
.scope-row {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 96px 14px;
  column-gap: 14px; min-height: 52px;
  text-decoration: none; padding: 8px 12px; border-radius: var(--radius);
  color: var(--text); border: 1px solid transparent;
  transition: background .1s, border-color .1s;
}
.scope-row + .scope-row { margin-top: 2px; }
.scope-row:hover { background: var(--panel-2); border-color: var(--border); }
.scope-row.is-current {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border));
}
/* Picker variant: a data-window-pick <button> reusing the scope-row look, so it
   needs the button resets. Drops the dashboard's current-check column (name +
   headcount), keeping the rows full-width and neat. */
.scope-row-pick {
  grid-template-columns: minmax(0, 1fr) 96px;
  width: 100%; background: none; font: inherit; cursor: pointer; text-align: left;
}
.scope-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scope-row-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-row-path {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Per-subdivision headcount readout: a labelled number cluster (LED-dotted, so
   colour carries the meaning) over a slim composition meter — в строю (green) and
   СЗЧ (red) as proportional segments of the total, matching the dashboard HUD.
   The three number cells are fixed-width, so total / у строю / СЗЧ align in
   columns across every row even when a row has no СЗЧ. */
.scope-row-stats {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--font-mono);
}
/* Three parallel indicators — усього · у строю · СЗЧ — evenly spaced on one grid,
   all the same size and weight; only the LED colour tells them apart. Their dots
   sit on fixed rails, so the readout lines up down the whole list and the meter
   below shares the exact same width. */
.scope-nums {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; font-size: 12px; font-weight: 600;
}
.scope-num { justify-self: start; display: inline-flex; align-items: center; gap: 5px; }
/* Inherits the global `.led` (colour/shape/flex); only the size differs. */
.scope-num .led { width: 6px; height: 6px; }
.scope-num.tot { color: var(--text); }
.scope-num.tot .led { background: var(--muted); }
.scope-num.ok { color: var(--ok); }
.scope-num.danger { color: var(--danger); }
/* A zero is a fact about something unfilled, not a figure to read — greyed
   wherever the app prints a hero number, so the filled ones carry the eye. */
.scope-num.empty, .panel-head-n.empty, .reach-num.empty,
.admin-card-num.empty { color: var(--muted-2); }
.scope-meter {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--panel-3); display: flex;
}
.scope-meter .seg { flex: none; height: 100%; min-width: 2px; }
.scope-meter .seg.ok { background: var(--ok); }
.scope-meter .seg.danger { background: var(--danger); }
.scope-row-check { grid-column: 3; justify-self: center; color: var(--accent-2); font-weight: 700; }