/* ══ Subdivision muster report (registry/_subdivision_analytics.html) ════ */
/* Headline numbers reuse .stat; the status bar reuses .scope-meter, coloured by
   status via inline --st-* on each .seg. Only spacing is added here. */
.sa-bar { display: flex; margin: 2px 0 12px; }

/* Absence breakdown — inline chips. */
.sa-breakdown { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; }
.sa-breakdown li { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.sa-breakdown li.muted { color: var(--muted); }
.sa-breakdown .led { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sa-breakdown .lbl { color: var(--muted); }
.sa-breakdown .n { font-family: var(--font-mono); font-weight: 700; color: var(--text-strong); }

/* Attention (СЗЧ / long hospital) name lists. */
.sa-alert h4 { margin: 4px 0 8px; font-size: 13px; }
.sa-alert h4 + h4 { margin-top: 16px; }
.sa-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-alert-list li a {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: var(--radius);
  border-left: 2px solid var(--st, var(--danger)); background: var(--panel-2); min-width: 0;
}
.sa-alert-list li a:hover { background: var(--panel-3); text-decoration: none; }
/* Truncate the name so the nowrap «since» stamp on the right can't push the row
   (this list isn't in a grid, so it has no track to absorb the overflow). */
.sa-alert-list .nm { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-alert-list .since { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.sa-more { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; }

/* Strength-dynamics chart on the tab — capped so a full-width panel doesn't blow
   the shared chart up (the dashboard widget keeps its own grid-column size). */
.sa-chart { max-width: 520px; }

/* Subordinate roll-up table (за дочірніми підрозділами). */
.sa-subunits td small { display: block; color: var(--muted-2); font-size: 11px; white-space: normal; }
.sa-subunits th.num, .sa-subunits td.num { text-align: right; font-family: var(--font-mono); }
.sa-subunits td.num.strong { color: var(--accent-2); font-weight: 700; }
.sa-subunits td.num.danger { color: var(--danger); font-weight: 700; }
.sa-subunits .bar-col { width: 130px; }
.sa-mini-bar { flex: 1; height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.sa-mini-bar .fill { display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; }
/* The phone cards this table falls back to (see `_subdivision_analytics.html`). The bar
   field reads identically in a table cell and in a card field, so those two selectors
   name both surfaces rather than the table alone. The rest is the mono/emphasis
   treatment the `.num` columns carry, which `.list-card-fields dd` knows nothing about —
   scoped to `.sa-subunit-cards` so it stays this roll-up's, not every card list's. */
.sa-subunits td.bar-col,
.sa-subunit-cards dd.bar-col { display: flex; align-items: center; gap: 8px; }
.sa-subunits .pct,
.sa-subunit-cards .pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted); min-width: 34px; text-align: right; }
.sa-subunit-cards dd { font-family: var(--font-mono); }
.sa-subunit-cards dd.strong { color: var(--accent-2); font-weight: 700; }
.sa-subunit-cards dd.danger { color: var(--danger); font-weight: 700; }

/* Rank composition (склад за званнями). */
.sa-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sa-ranks .tier-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sa-ranks .tier-head .lbl { font-weight: 600; font-size: 13px; }
.sa-ranks .tier-head .n { font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); }
.sa-ranks .tier-ranks { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-ranks .rank-chip {
  font-size: 12px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.sa-ranks .rank-chip b { color: var(--text-strong); font-family: var(--font-mono); margin-left: 2px; }

/* Collapsible historical-dynamics section — staff analytics, folded by default. */
.sa-history { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.sa-history > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer;
  list-style: none; user-select: none;
}
.sa-history > summary::-webkit-details-marker { display: none; }
.sa-history > summary .sa-history-hint { color: var(--muted); font-size: 12.5px; }
.sa-history > summary .icon { margin-left: auto; transition: transform .15s ease; color: var(--muted); }
.sa-history[open] > summary .icon { transform: rotate(90deg); }
.sa-history[open] > summary { border-bottom: 1px solid var(--border); }
/* Inner chart cards keep their normal .panel padding/border — just gutter the
   section body so they don't sit flush against the details frame. */
.sa-history-body { padding: 0 16px 16px; }

/* Monthly historical bar charts (common/charts/_bar_chart.html). Colour comes from an
   inline --st-*/--accent var on each <rect>; only structure/spacing lives here. */
.bc { display: block; }
.bc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 2px;
  font-size: 11.5px; color: var(--muted); }
.bc-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle; }
.bc-grid { stroke: var(--border); stroke-width: 1; opacity: .45; }
.bc-baseline { stroke: var(--border-bright); stroke-width: 1.2; }
.bc-ylabel, .bc-xlabel { fill: var(--muted-2); font-family: var(--font-mono); font-size: 10px; }
.bc-bar { transition: opacity .1s; }
.bc-bar:hover { opacity: .75; }
.bc-empty { margin-top: 6px; font-size: 12px; }

/* Readiness column chart (common/charts/_readiness_chart.html). */
.rc { display: block; overflow: visible; }
.rc-legend { display: flex; gap: 16px; margin: 8px 0 4px; font-size: 12.5px; color: var(--muted); }
.rc-legend b { color: var(--text); font-weight: 700; margin-left: 3px; }
.rc-legend .rc-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--ok); margin-right: 6px; vertical-align: middle; }
.rc-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.rc-ylabel, .rc-xlabel { fill: var(--muted-2); font-family: var(--font-mono); font-size: 10px; }
.rc-bar { fill: var(--ok); pointer-events: none; }
.rc-hit { fill: transparent; cursor: crosshair; }
.rc-hit:hover { fill: var(--muted); opacity: .07; }

/* Phone view for the «Наявність» history charts. Placed after the .lc/.rc/.bc base
   rules so it wins on source order (all are single-class selectors). Strength &
   readiness swap their full SVG + legend for the mini charts; the monthly bar charts
   stay but bump their crushed tick labels. */
@media (max-width: 560px) {
  .lc-legend, .lc, .rc-legend, .rc { display: none; }
  .lc-minis { display: flex; }
  .bc-ylabel, .bc-xlabel { font-size: 15px; }
}