/* ---------------------------------------------------------
   9. Semaforo / deadline-status badges
   --------------------------------------------------------- */
/* Chips (docs/ui/DESIGN_CONTRACT.md §4): radius 3px, leading dot in
   currentColor, tinted bg + border from --st-*. Never color alone. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-verde {
  background: var(--color-verde-bg);
  color: var(--color-verde);
  border: 1px solid var(--color-verde-border);
}

.badge-giallo {
  background: var(--color-giallo-bg);
  color: var(--color-giallo);
  border: 1px solid var(--color-giallo-border);
}

.badge-rosso {
  background: var(--color-rosso-bg);
  color: var(--color-rosso);
  border: 1px solid var(--color-rosso-border);
}

.badge-info {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent-fill);
}

.badge-grigio {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Fascia rischio (DVR) — 4 severity tiers, but the semantic status system
   only has 3 (ok/warn/bad). "alto" sits between medio (warn) and
   molto-alto (bad): rather than invent a 4th global semantic tier (or a
   bare literal hex, banned outside tokens.css), blend the two existing
   tokens with color-mix so it stays distinct without a new color that would
   need its own light/dark validation. Derives from already-themed tokens,
   so it themes correctly for free. */
.fascia--basso {
  background: var(--color-verde-bg);
  color: var(--color-verde);
  border: 1px solid var(--color-verde-border);
}

.fascia--medio {
  background: var(--color-giallo-bg);
  color: var(--color-giallo);
  border: 1px solid var(--color-giallo-border);
}

.fascia--alto {
  background: color-mix(in srgb, var(--st-warn-bg) 45%, var(--st-bad-bg) 55%);
  color: color-mix(in srgb, var(--st-warn) 35%, var(--st-bad) 65%);
  border: 1px solid color-mix(in srgb, var(--st-warn-border) 35%, var(--st-bad-border) 65%);
}

.fascia--molto-alto {
  background: var(--color-rosso-bg);
  color: var(--color-rosso);
  border: 1px solid var(--color-rosso-border);
}

/* Dot indicator inside badge */
.badge::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   9b. Status chip / donut / coverage bar (visualization primitives)
   Color-blind-safe: each chip carries a distinct icon SHAPE and a text
   label, so status is never conveyed by colour alone (WCAG 1.4.1).
   --------------------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-chip__icon { font-size: 0.95em; line-height: 1; }
.status-chip--ok      { color: var(--st-ok);      background: var(--st-ok-bg);      border-color: var(--st-ok-border); }
.status-chip--warn    { color: var(--st-warn);    background: var(--st-warn-bg);    border-color: var(--st-warn-border); }
.status-chip--bad     { color: var(--st-bad);     background: var(--st-bad-bg);     border-color: var(--st-bad-border); }
.status-chip--missing { color: var(--st-missing); background: var(--st-missing-bg); border-color: var(--st-missing-border); }
.status-chip--na      { color: var(--st-na);      background: var(--st-na-bg);      border-color: var(--st-na-border); }
.status-chip--non_gestito { color: var(--color-text-muted); background: transparent; border-style: dashed; border-color: var(--color-border); }
.status-chip--info    { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-fill); }
/* compact = grid cell: icon only on screen, label exposed to assistive tech */
.status-chip--compact { padding: 0.1em 0.3em; gap: 0; }

/* Field groups: a bare <fieldset>/<legend> (e.g. the dipendente and rischio
   forms) otherwise renders with the browser's inset grey "groove" border and a
   notched legend — incoherent with the app's clean card forms. Neutralise the
   border and turn the legend into a section subheading. Classed fieldsets
   (.form-fieldset boxed groups, .valspec-section) keep their own styling. */
fieldset:not([class]) {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-5);
  min-width: 0; /* fieldset's intrinsic min-width can break flex/grid layouts */
}
/* Section heading inside a long form — serif display face per §3. The
   underline used to be a colored (--area-accent-line) bar; §0.4 bans
   accent-colored borders on headers outright, so it is now a neutral
   hairline like every other card/section separator in the app. */
fieldset:not([class]) > legend {
  display: block;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  padding: 0 0 var(--sp-2);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

/* Grouped checkboxes inside a form (e.g. ambiti gestiti per azienda) */
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}
.form-fieldset > legend {
  padding: 0 var(--sp-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Donut % — inline SVG, no chart library. circle r=15.915 → circumference≈100,
   so stroke-dasharray="<pct> <100-pct>" maps percentage 1:1. */
.donut { width: 6.5rem; height: 6.5rem; display: block; }
.donut__track { stroke: var(--color-border); stroke-width: 3.4; }
.donut__value {
  stroke: var(--accent-fill);
  stroke-width: 3.4;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}
.donut--ok   .donut__value { stroke: var(--st-ok); }
.donut--warn .donut__value { stroke: var(--st-warn); }
.donut--bad  .donut__value { stroke: var(--st-bad); }
.donut__text { font: 700 8px var(--font-sans); fill: var(--color-text); }
.donut__sub  { font: 600 3.4px var(--font-sans); fill: var(--color-text-muted); }

/* Coverage bar — pure CSS width%, mobile-friendly. */
.cbar { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 7rem; width: 100%; }
.cbar__track {
  flex: 1;
  height: 0.5rem;
  min-width: 3rem;
  background: var(--accent-soft);
  border-radius: 2px;
  overflow: hidden;
}
.cbar__fill { height: 100%; border-radius: 2px; background: var(--accent-fill); }
.cbar__fill--ok   { background: var(--st-ok); }
.cbar__fill--warn { background: var(--st-warn); }
.cbar__fill--bad  { background: var(--st-bad); }
/* §6: the unfilled track is a lighter step of the fill's own ramp */
.cbar:has(.cbar__fill--ok)   .cbar__track { background: var(--st-ok-bg); }
.cbar:has(.cbar__fill--warn) .cbar__track { background: var(--st-warn-bg); }
.cbar:has(.cbar__fill--bad)  .cbar__track { background: var(--st-bad-bg); }
.cbar__pct {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 2.6rem;
  text-align: right;
}

.occupancy-meter,
[data-occupancy-meter] {
  --occupancy-pct: 0%;
  position: relative;
  display: block;
  width: 100%;
  min-width: 5rem;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--accent-soft);
}

.occupancy-meter::before,
[data-occupancy-meter]::before {
  content: "";
  display: block;
  width: var(--occupancy-pct);
  height: 100%;
  border-radius: inherit;
  background: var(--accent-fill);
  transition: width 0.18s ease;
}

.occupancy-meter:has(.occupancy-meter__fill)::before,
[data-occupancy-meter]:has(.occupancy-meter__fill)::before {
  content: none;
}

.occupancy-meter__fill {
  display: block;
  width: var(--occupancy-pct);
  height: 100%;
  border-radius: inherit;
  background: var(--accent-fill);
  transition: width 0.18s ease;
}

.occupancy-meter--warn,
[data-occupancy-meter].occupancy-meter--warn { background: var(--st-warn-bg); }
.occupancy-meter--full,
[data-occupancy-meter].occupancy-meter--full { background: var(--st-bad-bg); }

.occupancy-meter--warn::before,
.occupancy-meter--warn .occupancy-meter__fill {
  background: var(--st-warn);
}

.occupancy-meter--full::before,
.occupancy-meter--full .occupancy-meter__fill {
  background: var(--st-bad);
}