/* ── Check-trees (the access-group editor) ──────────────────────────────────
   A whole small relation as checkboxes — flat, or nested by parent. Two panels
   side by side, because the locations list is read *against* the subdivisions
   picked beside it: tick a unit and its own places grey out as already covered.
   Behaviour is in js/forms/check-tree.js ([data-checktree]); the widget is
   common/widgets/check_tree.py:CheckTreeWidget. */
/* The grid itself is `components/panels.css`, off the shared `--panel-col`.
   Here: level with each other rather than `start`-aligned, because
   the two lists are a pair and one box ending 20px above the other (its subtitle
   wrapped one line further) reads as a mistake. Stretching means the shorter
   list's scroll box takes the slack, not the panel's padding. This is exactly the
   case a grid is right for and the perm sections are not — those pack as a column
   flow precisely because nothing there needs to stay level. */
.panel-pair { align-items: stretch; }
.panel-pair > .panel { display: flex; flex-direction: column; }
.panel-pair .checktree { flex: 1 1 auto; min-height: 0; }

.checktree { display: flex; flex-direction: column; }
.checktree-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
/* «Охоплено N із M», between the toolbar and the box it describes. */
.checktree-count {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .6px; color: var(--muted-2);
}
.checktree-search {
  flex: 1 1 160px; min-width: 0;
  padding: 6px 10px; font-size: 13px;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.checktree-search:focus { outline: none; border-color: var(--border-bright); }
/* Phone: the search takes the row and «Усі»/«Зняти» share the next one. Sharing a
   340px row with two buttons left the field ~155px, i.e. narrower than the unit names
   it is typed against — and it is the control that is actually used, the two buttons
   being one tap each. */
@media (max-width: 560px) {
  .checktree-search { flex: 1 1 100%; }
  .checktree-tools > .btn { flex: 1 1 0; justify-content: center; }
}

/* Scrolls rather than stretching the page: a formation is dozens of units, and
   the panel beside it has to stay level with this one. Framed as an inset box —
   a bare overflow cuts the last row mid-letter against the panel's own background,
   which reads as broken rendering instead of as «прокрути далі». The gutter is
   reserved so rows don't shift by a scrollbar's width when the search filters. */
.checktree-list {
  list-style: none; margin: 0; padding: 5px;
  flex: 1 1 auto; min-height: 190px; max-height: 42vh;
  overflow-y: auto; scrollbar-gutter: stable;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.checktree-children { list-style: none; margin: 0; padding-left: 18px; }
.checktree-node { margin: 0; }
.checktree-children > .checktree-node { border-left: 1px solid var(--border); }

/* On top of `.field-check` (which already undoes the uppercase mono field caption a
   <label> would otherwise inherit): the row fills its panel, aligns on the first
   line of a two-part label, and highlights under the cursor. */
.checktree-row {
  display: flex; align-items: baseline;
  padding: 5px 8px; border-radius: var(--radius);
}
/* One step further than the inset box the rows now sit in, or the hover would be
   invisible. */
.checktree-row:hover { background: var(--panel-3); }
.checktree-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.checktree-label { font-size: 14px; }
.checktree-meta { font-size: 12px; }
/* Covered by something already ticked (a parent unit, an owning subdivision):
   ticked and disabled, so it reads as included and submits nothing. */
.checktree-row.is-covered { cursor: default; }
.checktree-row.is-covered .checktree-label { color: var(--muted); }
.checktree-covered { margin-left: auto; font-size: 11px; white-space: nowrap; }