/* ESPlatform v2 — base layer & components */

@import url("tokens.css?v=2026080513");

*,
*::before,
*::after { box-sizing: border-box; }

/* Il `display: none` del foglio del browser su [hidden] ha specificita' zero:
   qualunque componente che dichiari un display (.btn, .badge, .row usano
   inline-flex) lo vince, e l'elemento resta in pagina nonostante l'attributo.
   Tre componenti se l'erano gia' rattoppato da soli (.tabs__panel,
   .report-preview__empty, .report-preview__loading); il JS invece si fidava
   di `el.hidden = true` e lasciava in pagina pillole vuote. Si chiude qui,
   una volta, per tutti. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base-size);
  line-height: var(--leading-base);
  color: var(--text-base);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body {
  min-height: 100vh;
}

/* Display type — Space Grotesk, tight tracking — for headings & titles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: -0.018em;
  font-weight: var(--weight-semi);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-primary-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* === Layout shell === */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

.app-shell[data-sidebar="collapsed"] {
  grid-template-columns: var(--sidebar-width-rail) 1fr;
}

/* Sidebar-less shell for "above the monitoring context" pages (all-monitorings
   list, onboarding empty state, create). Header spans full width; no sidebar
   column. The attribute selector matches the specificity of the collapsed rule
   above so this always wins. */
.app-shell--no-sidebar[data-sidebar] {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
}

.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  /* glass: translucent + blur + hairline + inset top highlight */
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-sidebar {
  grid-area: sidebar;
  background: var(--surface-raised);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-main {
  grid-area: main;
  padding: var(--space-6);
  overflow-y: auto;
  /* faint instrument-readout dot grid — structure from texture, not boxes */
  background-color: var(--surface-base);
  background-image: radial-gradient(var(--series-grid) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

.app-main__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* === Sidebar === */

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--hairline);
  height: var(--header-height);
  flex: none;
  text-decoration: none;
  color: inherit;
}

/* Full Enersense wordmark — colour variant for light, white for dark */
.sidebar__brand-logo {
  height: 24px;
  width: auto;
  display: block;
}
.sidebar__brand-logo--dark { display: none; }
[data-theme="dark"] .sidebar__brand-logo--light { display: none; }
[data-theme="dark"] .sidebar__brand-logo--dark { display: block; }

/* Custom company logo when it occupies the top brand slot */
.sidebar__brand-company {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Expand toggle — replaces the logo at the top of a collapsed rail. */
.sidebar__expand-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}
.sidebar__expand-toggle:hover { color: var(--text-strong); }
.sidebar__expand-toggle i[data-lucide],
.sidebar__expand-toggle svg { width: 22px; height: 22px; }

/* Collapsed rail: hide the logo, show the expand toggle in its place. */
.app-shell[data-sidebar="collapsed"] .sidebar__brand { display: none; }
.app-shell[data-sidebar="collapsed"] .sidebar__expand-toggle { display: flex; }

.sidebar__nav {
  padding: var(--space-4) var(--space-2);
  flex: 1;
  overflow-y: auto;
}

.sidebar__section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.app-shell[data-sidebar="collapsed"] .sidebar__section-title { visibility: hidden; height: 8px; }

.sidebar__section-title--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.sidebar__section-title--toggle i[data-lucide],
.sidebar__section-title--toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin: 2px var(--space-1);
  border-radius: var(--r-2);
  color: var(--text-base);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.sidebar__link:hover {
  background: var(--slate-100);
  color: var(--text-strong);
}

[data-theme="dark"] .sidebar__link:hover { background: var(--slate-800); }

/* Attivo = fondo + icona nel colore del brand. C'era anche una barra
   d'accento a sinistra: veniva dalla navigazione a rail, dove sta a filo del
   bordo e alta quanto la riga, ma qui era innestata su un pill gia' rientrato
   di dodici pixel, con un inset verticale di sei e il cap arrotondato. Non
   marcava nessun bordo perche' li' un bordo non c'e': era un adesivo appeso
   al pill, e faceva quattro segnali per un bit di stato. Il fondo ora e'
   --nav-active-bg, che segue la palette e parte un gradino piu' marcato. */
.sidebar__link[aria-current="page"] {
  background: var(--nav-active-bg);
  color: var(--text-strong);
  font-weight: var(--weight-semi);
}

.sidebar__link i[data-lucide],
.sidebar__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.sidebar__link[aria-current="page"] i[data-lucide],
.sidebar__link[aria-current="page"] svg { color: var(--brand-primary); }

.app-shell[data-sidebar="collapsed"] .sidebar__link span { display: none; }
.app-shell[data-sidebar="collapsed"] .sidebar__link { justify-content: center; }

.sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sidebar__footer-brand {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
.sidebar__footer-brand .sidebar__brand-logo { height: 20px; }
.app-shell[data-sidebar="collapsed"] .sidebar__footer-brand { display: none; }

/* Collapsed rail: the expand toggle lives at the top, so the whole footer
   (build label + collapse toggle) is hidden here. */
.app-shell[data-sidebar="collapsed"] .sidebar__footer { display: none; }

/* === Header === */

.app-header__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: -0.018em;
  color: var(--text-strong);
}

/* Header breadcrumb path (replaces the old duplicated page title) */
.app-header__path { flex-wrap: nowrap; min-width: 0; }
.app-header__path:empty { display: none; }

/* Brand logo shown in the header on sidebar-less pages (profile, monitorings
   list, onboarding) where the sidebar — and its brand — are absent. */
.app-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.app-header__brand-logo {
  height: 24px;
  width: auto;
  display: block;
}
.app-header__brand-logo--dark { display: none; }
[data-theme="dark"] .app-header__brand-logo--light { display: none; }
[data-theme="dark"] .app-header__brand-logo--dark { display: block; }

/* Per-monitoring company logo, centered in the header so the customer's brand
   sits front-and-center on the top bar regardless of switcher/actions width.
   Absolute + translate keeps it optically centered and out of the flex flow. */
.app-header__company-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.app-header__company-logo img {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.app-header__spacer { flex: 1; }

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cmd-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--hairline);
  background: var(--surface-base);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.cmd-trigger:hover { border-color: var(--brand-primary); color: var(--text-strong); }

/* La lente sta dentro una riga di testo: 15px, come le icone dei bottoni.
   Senza una misura lucide la lascia alla sua taglia di serie (24px) e la
   lente pesava piu' della parola «Cerca…» che accompagna. Il selettore vale
   sia sull'<i> (prima dell'idratazione) sia sull'<svg> che lo sostituisce:
   lucide scambia il TAG, quindi un selettore su `i` smette di matchare. */
.cmd-trigger i[data-lucide],
.cmd-trigger svg { width: 15px; height: 15px; flex: none; }

/* Header search trigger — a touch wider so the label has room to breathe */
.cmd-trigger--search { min-width: 240px; }
.cmd-trigger--search kbd { margin-left: auto; }

.cmd-trigger kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  color: var(--text-muted);
}

/* === Page layouts === */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Title column takes the remaining space and wraps its own text instead of
   squeezing the controls (date picker) on the right. */
.page-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.page-header > .row:last-child {
  flex-shrink: 0;
}

.page-header__title {
  overflow-wrap: anywhere;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: var(--leading-tight);
}

.page-header__subtitle {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* === Card === */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Opt out of the corner-clipping so a child popover (e.g. the date-range
   picker) can spill past the card edge instead of being cropped. */
.card--overflow {
  overflow: visible;
}

.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  margin: 0;
}

.card__body {
  padding: var(--space-5);
}

.card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-base);
}

/* === Button === */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-4);
  border-radius: var(--r-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--brand-primary-fg);
}
.btn--primary:hover:not(:disabled) { background: var(--brand-primary-hover); color: var(--brand-primary-fg); }

.btn--secondary {
  background: var(--surface-raised);
  border-color: var(--hairline);
  color: var(--text-strong);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }

.btn--ghost {
  background: transparent;
  color: var(--text-base);
}
.btn--ghost:hover:not(:disabled) { background: var(--slate-100); color: var(--text-strong); }
[data-theme="dark"] .btn--ghost:hover:not(:disabled) { background: var(--slate-800); }

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { filter: brightness(0.95); }

.btn--sm  { padding: 4px var(--space-3); font-size: var(--text-xs); }
.btn--lg  { padding: 12px var(--space-5); font-size: var(--text-md); }
.btn--icon { padding: 6px; gap: 0; }
.btn--icon.btn--sm { padding: 5px; }
/* Spin the icon while a refresh request is in flight. */
#map-refresh.is-loading svg { animation: spinner-rotate 0.7s linear infinite; }

.btn i[data-lucide], .btn svg { width: 16px; height: 16px; }

/* === Inputs === */

.input,
.select {
  display: block;
  width: 100%;
  padding: 9px var(--space-3);
  border-radius: var(--r-2);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-muted); }
/* L'alone era rgba(11,42,111,.12) scritto a mano: un navio fisso che in tema
   scuro misura 1.03:1 e non si vede, mentre ogni palette definisce gia' il
   proprio --shadow-focus (verde o magenta, con l'alpha giusta per il fondo). */
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
}

.input--with-icon {
  position: relative;
}
.input--with-icon i[data-lucide],
.input--with-icon svg {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.input--with-icon .input { padding-left: 36px; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-base);
}

.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

/* L'etichetta e' come si identifica un campo: non e' testo secondario.
   Su --text-muted misurava 4.28:1 in scuro verde e 4.05 in scuro enersense,
   sotto AA a 12px, ed era piu' silenziosa dei badge di metadato che la
   circondano. --text-base la porta a 7.3-8.0 in tutte le combinazioni. */
.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-base);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

/* === Table === */

.table-wrap {
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  background: var(--surface-raised);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table thead th {
  text-align: left;
  padding: var(--row-pad-y) var(--row-pad-x);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-base);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-base);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
.table tbody tr:hover { background: var(--surface-base); }
.table tbody tr[data-href] { cursor: pointer; }

/* Row actions — revealed on hover, always visible on touch/focus-within. */
.table tbody td .row-actions { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.table tbody tr:hover .row-actions,
.table tbody tr:focus-within .row-actions { opacity: 1; }

/* List tables — drag-to-reorder handle (generic; used by dashboards, maps…). */
.table__handle {
  width: 36px;
  color: var(--text-muted);
  cursor: grab;
  text-align: center;
  vertical-align: middle;
  touch-action: none;
  user-select: none;
}
.table__handle:active { cursor: grabbing; }
.table__handle:hover { color: var(--text-strong); }
.table__row--ghost {
  opacity: 0.5;
  background: var(--surface-base);
}
/* While a name sort is active, dragging is locked: dim and disable handles. */
.table tbody.is-sort-active .table__handle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* List tables — clickable name-sort header. */
.table th.is-sortable { padding: 0; }
.table__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: var(--row-pad-y) var(--row-pad-x);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.table__sort-btn:hover { color: var(--text-strong); }
.table__sort-ind {
  font-size: 11px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.table th.is-sorted .table__sort-ind { opacity: 1; color: var(--brand-primary); }

.table a {
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

.table__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.table__empty {
  padding: var(--space-9);
  text-align: center;
}

/* === Badge === */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--ok      { background: var(--success-bg); color: var(--success); }
.badge--warn    { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
/* Chip chiaro anche in tema scuro (scelta deliberata: vedi la nota sulla rampa
   --slate-* in tokens.css). Il testo pero' non puo' stare su --slate-600: la
   palette enersense scura rimappa quel gradino a #717798 per usarlo come testo
   muted, e su un fondo chiaro fisso scende a 3.96:1. --slate-700 e' scuro in
   tutte e quattro le combinazioni tema x palette (9.9-11.6:1). */
.badge--neutral { background: var(--slate-100);  color: var(--slate-700); }

/* === State chip === */
/* Pillole di STATO in tono di frase — non etichette di categoria (quello e'
   .badge, maiuscolo) e non input (quello e' .chip degli email-chips).
   Nate nella raccolta dati diagnosi (escluso / in carico / contesto) e promosse
   qui perche' il concetto e' ovunque: uno stato che deve leggersi come parola,
   non decifrarsi da un glifo.
   --off dice un'assenza e quindi e' tratteggiato e senza fondo; --ok e' l'unico
   pieno perche' segna uno stato definitivo (--success su --success-bg: 7,2,
   misurato quando --success e' stato promosso a green-800); --meta e' il tono
   neutro dei segnali di contesto. Il muted del tratteggio usa la stessa miscela
   40% base + muted gia' tarata in diagnosi (5,4-5,6 su card nei due temi);
   il fallback senza color-mix e' --text-base, piu' scuro del dovuto, che e'
   il verso giusto in cui sbagliare. */
.state-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}
.state-chip svg,
.state-chip i[data-lucide] { width: 12px; height: 12px; flex: 0 0 auto; }
.state-chip--off {
  color: var(--text-base);
  color: color-mix(in srgb, var(--text-base) 40%, var(--text-muted));
  border: 1px dashed currentColor;
}
.state-chip--ok {
  background: var(--success-bg);
  color: var(--success);
}
.state-chip--meta {
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  color: var(--text-base);
  color: color-mix(in srgb, var(--text-base) 40%, var(--text-muted));
}

/* === Email chip input (components/email_chips.html) === */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--r-pill);
  background: var(--slate-100);
  color: var(--text-strong);
  border: 1px solid var(--hairline);
  font-size: var(--text-sm);
  max-width: 100%;
}
[data-theme="dark"] .chip { background: var(--slate-800); }
.chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.chip__remove:hover { background: var(--danger-bg); color: var(--danger); }
.chip-input {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.chip-input .input { flex: 1 1 auto; }
.chip-input .btn { flex: none; }

/* Status LED — small solid core with a soft tinted halo so it reads as a
   deliberate indicator, not a stray dot. */
.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate-400);
  box-shadow: 0 0 0 3px rgba(147, 161, 153, 0.16);
}
/* Semantic status fills — kept palette-stable: --pos-fill is hijacked to the
   brand accent (pink) in branded palettes, so online uses --green-500 directly.
   --warn-fill / --neg-fill are soft amber/coral and stay put across palettes. */
.status-dot--ok      { background: var(--green-500); box-shadow: 0 0 0 3px rgba(22, 193, 114, 0.18); }
.status-dot--warn    { background: var(--warn-fill); box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.20); }
.status-dot--danger  { background: var(--neg-fill);  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18); }
.status-dot--neutral { background: var(--slate-400); box-shadow: 0 0 0 3px rgba(147, 161, 153, 0.16); }

/* === Monitoring switcher dropdown === */
.switcher-item {
  border-radius: var(--r-2);
}
.switcher-item > i:first-child {   /* building glyph — recede, let the name lead */
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  opacity: 0.7;
}
.switcher-logo {   /* company logo tile — mirrors the monitorings list treatment */
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--r-2);
  object-fit: contain;
  background: var(--surface-base);
  border: 1px solid var(--hairline);
}
/* Stesso trattamento della voce di sidebar attiva, stessa ragione: la barra
   d'accento se ne va e restano fondo e glifo nel colore del brand. Qui il
   fondo era --surface-base, che sul menu bianco vale 1.05:1 — cioe' niente:
   la barra stava reggendo il segnale da sola. */
.switcher-item--current {
  background: var(--nav-active-bg);
}
/* Due selettori come altrove nel foglio: lucide rimpiazza l'elemento i con un
   svg, quindi il primo copre il markup servito e il secondo quello dopo
   l'idratazione. Le righe con il logo aziendale portano un'immagine al posto
   del glifo e restano giustamente fuori. */
.switcher-item--current > i:first-child,
.switcher-item--current > svg:first-child {
  color: var(--brand-primary);
  opacity: 1;
}
/* Secondary action — lighter than the site rows below it. */
.switcher-all {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.switcher-all > i { width: 16px; height: 16px; }

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* === Empty state === */

.empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.empty__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-3);
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--space-4);
}

.empty__icon svg, .empty__icon i[data-lucide] {
  width: 22px; height: 22px;
  color: var(--text-muted);
}

.empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}

.empty__body {
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto var(--space-5);
  font-size: var(--text-sm);
}

/* === Auth pages === */

.auth-frame {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface-base);
  padding: var(--space-5);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--space-7) var(--space-8);
  box-shadow: var(--shadow-md);
}

.auth-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.auth-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.auth-footer__row > .row { gap: var(--space-3); }
.auth-footer select {
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
  min-width: 96px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.auth-brand-logo {
  height: 34px;
  width: auto;
  display: block;
}
.auth-brand-logo--dark { display: none; }
[data-theme="dark"] .auth-brand-logo--light { display: none; }
[data-theme="dark"] .auth-brand-logo--dark { display: block; }

.auth-card h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.auth-card .lede {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6);
}

.field-group { margin-bottom: var(--space-4); }
.field-group:last-of-type { margin-bottom: var(--space-6); }

/* === Toasts === */

.toast-region {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 50;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  max-width: 380px;
  pointer-events: auto;
  font-size: var(--text-sm);
  color: var(--text-strong);
  animation: toast-in var(--duration-base) var(--ease-out);
}

/* L'esito lo porta l'icona, non il colore: prima l'unico segnale era un bordo
   sinistro colorato, quindi "salvato" e "non riuscito" erano due schede
   identiche per chi non distingue i colori — e il messaggio non nomina mai
   l'esito. Le quattro sagome sono diverse fra loro, il colore le rinforza. */
.toast__icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.toast__icon svg { width: 18px; height: 18px; }
.toast--success .toast__icon { color: var(--success); }
.toast--warn    .toast__icon { color: var(--warning); }
.toast--danger  .toast__icon { color: var(--danger); }
.toast--info    .toast__icon { color: var(--info); }

/* Azione dentro il toast (v2Toast/diagnosiToast, {action:{label,onClick}}):
   l'«Annulla» di un atto reversibile vive nella finestra in cui l'esito è
   ancora sotto gli occhi. Allineata al centro della scheda, non al testo:
   è un comando del toast, non parte del messaggio. */
.toast .toast__action { flex: 0 0 auto; align-self: center; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Command palette === */

.cmd-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 100;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
}

.cmd-panel {
  width: 100%;
  max-width: 520px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cmd-input {
  width: 100%;
  border: 0;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  font-size: var(--text-md);
  color: var(--text-strong);
}
.cmd-input:focus { outline: none; }

.cmd-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
  max-height: 340px;
  overflow-y: auto;
}

.cmd-item {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-base);
  cursor: pointer;
}
.cmd-item:hover,
.cmd-item.is-active,
.cmd-item[aria-selected="true"] {
  background: var(--surface-base);
  color: var(--text-strong);
}

/* Input row: leading search icon + borderless field. */
.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-5);
}
.cmd-input-wrap > i,
.cmd-input-wrap > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.cmd-input-wrap .cmd-input {
  flex: 1;
  padding-left: 0;
}

/* Group heading inside the result list. */
.cmd-group {
  padding: var(--space-2) var(--space-5) var(--space-1);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmd-group:not(:first-child) {
  margin-top: var(--space-1);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}

/* A single result row (anchor). */
.cmd-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.cmd-result > i {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.cmd-result__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd-result__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cmd-empty {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Footer legend with keyboard hints. */
.cmd-footer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cmd-footer kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
}

/* === Utility helpers === */

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }

.row { display: flex; gap: var(--space-3); align-items: center; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

.muted { color: var(--text-muted); }
.strong { color: var(--text-strong); font-weight: var(--weight-semi); }
.mono { font-family: var(--font-mono); }

/* Codici e identificativi — VP_01, POD/PDR, P.IVA, ATECO, sotto-aree, #id.
   Un solo segno per tutta la piattaforma: mono su un fondo appena accennato,
   così l'identificativo si stacca dalla frase e dalle cifre senza diventare
   un badge (che è categoria) né una pillola di stato (che è .state-chip).
   Il fondo nasce dal testo, non da un grigio fisso: tiene in chiaro, in
   scuro e in ogni palette. La misura è relativa (em), così lo stesso segno
   sta in un h1 e in una cella di tabella senza doverlo ridichiarare. */
.code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-base) 9%, transparent);
  border-radius: var(--r-1);
  padding: 0 0.35em;
  white-space: nowrap;
}
/* Dentro un titolo il codice non deve competere con il titolo: scende di un
   gradino in più, così resta un'etichetta e non un secondo titolo. */
:is(h1, h2, h3) .code { font-size: 0.72em; vertical-align: 0.06em; }
/* Quando il codice è anche il modo per aprire la scheda, resta un link:
   il colore lo dice, il fondo resta lo stesso degli altri codici. */
a.code { color: var(--brand-primary); }
a.code:hover { color: var(--brand-primary-hover); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }

/* Testo per i soli lettori di schermo: nomina cio' che a schermo e' affidato
   a una forma o a un colore (l'esito di un toast, per esempio). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tabular { font-variant-numeric: tabular-nums; }

.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }

/* Tablet adaptations */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: var(--sidebar-width-rail) 1fr; }
  .app-shell .sidebar__link span,
  .app-shell .sidebar__brand,
  .app-shell .sidebar__footer,
  .app-shell .sidebar__section-title { display: none; }
  .app-shell .sidebar__expand-toggle { display: flex; }
  .app-shell .sidebar__link { justify-content: center; }
}

@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas: "header" "main";
  }
  .app-sidebar { display: none; }
  .app-main { padding: var(--space-4); }
}

/* === Phase 1 — design system additions === */

/* Icon base */
.icon {
  display: inline-block;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* === Spinner === */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  border-top-color: var(--brand-primary);
  animation: spinner-rotate 720ms linear infinite;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 0ms; } }

/* === Skeleton === */
.skel {
  display: block;
  border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 40%, var(--slate-100) 80%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  height: 14px;
}
[data-theme="dark"] .skel {
  background: linear-gradient(90deg, var(--slate-800) 0%, var(--slate-700) 40%, var(--slate-800) 80%);
  background-size: 200% 100%;
}
.skel--line  { height: 12px; }
.skel--text  { height: 14px; }
.skel--title { height: 22px; width: 60%; }
.skel--block { height: 80px; }
.skel--avatar { width: 40px; height: 40px; border-radius: 50%; }
.skel--counter { height: 36px; width: 120px; }
@keyframes skel-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation-duration: 0ms; } }

/* === Switch === */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-base);
}
.switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.switch__track {
  width: 36px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--slate-300);
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
.switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--brand-primary); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
[data-theme="dark"] .switch__track { background: var(--slate-700); }

/* AI-comment switch label: brand-tinted icon inline with the text, bold "AI". */
.switch__ai-label .icon,
.switch__ai-label svg { color: var(--brand-primary); vertical-align: text-bottom; }
.switch__ai-label strong { font-weight: 700; }
.switch__ai-label .muted { font-size: var(--text-xs); }

/* === Radio === */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-base);
  cursor: pointer;
}
.radio input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

/* === Segmented control === */
.segmented {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  background: var(--surface-base);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  padding: 6px var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-base);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.palette-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  flex: none;
}
/* Radio-backed segmented control (form-submittable) */
.segmented__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-base);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__opt:hover { color: var(--text-strong); }
.segmented__opt:has(input:checked) {
  background: var(--surface-raised);
  color: var(--text-strong);
  font-weight: var(--weight-semi);
  box-shadow: var(--shadow-sm);
}
.segmented__opt:has(input:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.segmented button:hover { color: var(--text-strong); }
.segmented button[aria-selected="true"],
.segmented button[aria-pressed="true"] {
  background: var(--surface-raised);
  color: var(--text-strong);
  font-weight: var(--weight-semi);
  box-shadow: var(--shadow-sm);
}

/* === Avatar === */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  user-select: none;
}
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-sm); }
.avatar--brand {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: #fff;
}
[data-theme="dark"] .avatar { background: var(--slate-700); color: var(--text-strong); }

/* === Tabs === */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tabs__list {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--text-strong); }
.tabs__tab[aria-selected="true"] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
.tabs__panel[hidden] { display: none; }

/* === Breadcrumb === */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* I passi del percorso sono link di navigazione, non testo di contorno:
   su --text-muted misuravano 4.28-4.49:1, sotto AA. */
.breadcrumb a { color: var(--text-base); }
.breadcrumb a:hover { color: var(--text-strong); }
/* Il separatore stava su --slate-300, cioe' 1.61:1: invisibile, e le briciole
   si leggevano come una frase unica. E' decorativo (aria-hidden), quindi basta
   la soglia 3:1 degli oggetti grafici, ma quella deve reggerla. */
.breadcrumb__sep { color: var(--text-muted); }
.breadcrumb__current { color: var(--text-strong); font-weight: var(--weight-medium); }

/* === Pagination === */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  border-radius: var(--r-2);
  padding: 2px;
}
.pagination button,
.pagination a {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-base);
  padding: 4px 10px;
  min-width: 32px;
  border-radius: var(--r-1);
  cursor: pointer;
  text-align: center;
}
.pagination button:hover:not(:disabled),
.pagination a:hover { background: var(--surface-base); color: var(--text-strong); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination [aria-current="page"] {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: var(--weight-semi);
}
.pagination [aria-current="page"]:hover {
  background: var(--brand-primary-hover);
  color: var(--text-on-brand);
}

/* === Tooltip === */
.tooltip-host { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-900);
  color: var(--slate-50);
  padding: 4px 8px;
  border-radius: var(--r-1);
  font-size: var(--text-xs);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 30;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--slate-900);
}
[data-theme="dark"] .tooltip { background: var(--slate-200); color: var(--slate-900); }
[data-theme="dark"] .tooltip::after { border-top-color: var(--slate-200); }

/* === Popover === */
.popover {
  position: absolute;
  z-index: 40;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  min-width: 220px;
}

/* === Modal (uses native <dialog>) === */
dialog.modal {
  border: 0;
  border-radius: var(--r-4);
  padding: 0;
  background: var(--surface-raised);
  color: var(--text-strong);
  max-width: 520px;
  width: calc(100% - var(--space-6));
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}
.modal__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  margin: 0;
}
.modal__body { padding: var(--space-5); }
.modal__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-base);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* === Drawer === */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  background: var(--surface-raised);
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.drawer[data-state="closed"] { transform: translateX(100%); }
.drawer__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  margin: 0;
}
.drawer__body {
  padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
}
.drawer__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* === Field group (helper for form labels + help + error) === */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.field__error {
  font-size: var(--text-xs);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 4px;
}
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--danger);
  /* Derivato da --danger invece che scritto a mano: il rosso chiaro fisso
     spariva sul fondo scuro, dove --danger e' un corallo diverso. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent);
}

/* Two-column field pairing inside CRUD form sections. Each direct child is a
   `.field` (or field-like wrapper); pairs sit side by side and the grid
   collapses to a single column on narrow viewports. Add `.field-grid__full`
   to a child that should span the full width (textareas, checklists, long
   selects with a hint, etc.). Vertical rhythm within the grid matches the
   `stack-4` spacing the form bodies used before. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.field-grid > .field-grid__full {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

.textarea {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--r-2);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 92px;
}
.textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
}

/* === Date range input === */
.daterange {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
  border-radius: var(--r-2);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.daterange__nav,
.daterange__label {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-base);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.daterange__nav:hover,
.daterange__label:hover { background: var(--surface-base); color: var(--text-strong); }
.daterange__label { font-weight: var(--weight-medium); color: var(--text-strong); }
.daterange { position: relative; }

/* Date-range picker popover (components/daterange_picker.html) */
.drp { width: max-content; }
.drp__body { display: flex; }
.drp__ranges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border-right: 1px solid var(--hairline);
  min-width: 148px;
}
.drp__range {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-base);
  border-radius: var(--r-2);
  cursor: pointer;
  white-space: nowrap;
}
.drp__range:hover { background: var(--surface-base); color: var(--text-strong); }
.drp__range.is-active {
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  font-weight: var(--weight-medium);
}
.drp__cal { padding: var(--space-3); }
.drp__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.drp__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.drp__navbtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-base);
  padding: 4px;
  border-radius: var(--r-1);
  cursor: pointer;
  display: inline-flex;
}
.drp__navbtn:hover { background: var(--surface-base); color: var(--text-strong); }
.drp__grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}
.drp__wd {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-bottom: var(--space-1);
  text-transform: capitalize;
}
.drp__day {
  appearance: none;
  border: 0;
  background: transparent;
  height: 32px;
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-base);
  border-radius: var(--r-2);
  cursor: pointer;
}
.drp__day:hover:not(:disabled) { background: var(--surface-base); color: var(--text-strong); }
.drp__day.is-blank { visibility: hidden; }
.drp__day.is-today { font-weight: var(--weight-medium); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.drp__day.is-in { background: var(--surface-base); border-radius: 0; }
.drp__day.is-start,
.drp__day.is-end {
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  font-weight: var(--weight-medium);
}
.drp__day.is-start { border-radius: var(--r-2) 0 0 var(--r-2); }
.drp__day.is-end { border-radius: 0 var(--r-2) var(--r-2) 0; }
.drp__day.is-start.is-end { border-radius: var(--r-2); }
.drp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--hairline);
}
.drp__sel {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* === Counter widget primitive === */
.counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.counter__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-size: 36px;
  line-height: 1;
}
.counter__unit {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.counter--sm .counter__value { font-size: 22px; }
.counter--lg .counter__value { font-size: 48px; }
.counter__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* === Kit page structure === */
.kit-nav {
  position: sticky;
  top: var(--space-3);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
}
.kit-nav a {
  color: var(--text-base);
  padding: 6px var(--space-3);
  border-radius: var(--r-1);
  border-left: 2px solid transparent;
}
.kit-nav a:hover { background: var(--surface-base); color: var(--text-strong); }
.kit-nav a[aria-current="true"] {
  border-left-color: var(--brand-primary);
  color: var(--text-strong);
  background: var(--surface-base);
}

.kit-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) {
  .kit-layout { grid-template-columns: 1fr; }
  .kit-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

.kit-section { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.kit-section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}
.kit-section__lede {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.kit-code {
  display: block;
  background: var(--slate-900);
  color: var(--slate-100);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  margin-top: var(--space-3);
}
[data-theme="dark"] .kit-code { background: var(--slate-800); }

/* === Launchpad === */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.kpi-card {
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Compact variant — small button-like pills (e.g. map view header) */
.kpi-grid--compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.kpi-grid--compact .kpi-card {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  align-items: center;
  border-radius: var(--r-2);
}
.kpi-grid--compact .kpi-card__icon {
  width: 24px;
  height: 24px;
}
.kpi-grid--compact .kpi-card__icon svg,
.kpi-grid--compact .kpi-card__icon i[data-lucide] { width: 14px; height: 14px; }
.kpi-grid--compact .kpi-card__label {
  margin-bottom: 0;
  font-size: 10px;
}
.kpi-grid--compact .kpi-card .counter__value { font-size: var(--text-sm); }
.kpi-grid--compact .kpi-card .strong.text-md { font-size: var(--text-sm); }
/* Keep long values (e.g. UID hashes) from stretching the pill */
.kpi-grid--compact .kpi-card .mono { max-width: 18ch; }
.kpi-grid--compact .kpi-card .counter__sub { font-size: 10px; }

/* Info strip variant — short, low-height cards (e.g. meter view header) */
.kpi-grid--info {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.kpi-grid--info .kpi-card {
  padding: var(--space-2) var(--space-3);
  align-items: center;
  gap: var(--space-2);
}
.kpi-grid--info .kpi-card__icon {
  width: 28px;
  height: 28px;
}
.kpi-grid--info .kpi-card__icon svg,
.kpi-grid--info .kpi-card__icon i[data-lucide] { width: 14px; height: 14px; }
.kpi-grid--info .kpi-card__label { margin-bottom: 0; }
.kpi-grid--info .kpi-card .strong.text-md { font-size: var(--text-sm); }

/* UID copy button — icon only, neutral */
.uid-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-top: 2px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.uid-copy:hover { color: var(--text-base); background: var(--surface-base); }
.uid-copy.is-copied { color: var(--text-base); }
.uid-copy svg, .uid-copy i[data-lucide] { width: 16px; height: 16px; }

.kpi-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.kpi-card__icon svg,
.kpi-card__icon i[data-lucide] { width: 18px; height: 18px; }

.kpi-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  line-height: 1.3;
}

.kpi-card .counter__value {
  white-space: nowrap;
  font-size: 28px;
}
.kpi-card .counter__value.muted {
  color: var(--slate-300);
  font-weight: var(--weight-regular);
}
[data-theme="dark"] .kpi-card .counter__value.muted { color: var(--slate-600); }

.kpi-card .counter--sm .counter__value {
  font-size: var(--text-md);
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-variant-numeric: normal;
}

/* Status variant (launchpad KPI strip) — chip in the state tone on top,
   number as the hero, and a status pill that names the state. The neutral/ok
   tone follows the brand accent (--brand-primary), so it tracks the user's
   colour profile; warning/critical stay on the semantic tokens so problems
   keep their conventional amber/red across both themes and palettes. */
.kpi-grid--status .kpi-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 108px;
}
.kpi-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.kpi-grid--status .kpi-card__label {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-chip {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  flex-shrink: 0;
}
.kpi-chip svg,
.kpi-chip i[data-lucide] { width: 15px; height: 15px; }
.kpi-chip--ok   { background: color-mix(in srgb, var(--brand-primary) 15%, transparent); color: var(--brand-primary); }
.kpi-chip--warn { background: var(--warning-bg); color: var(--warning); }
.kpi-chip--crit { background: var(--danger-bg);  color: var(--danger); }

.kpi-pill {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.kpi-pill--ok   { background: color-mix(in srgb, var(--brand-primary) 15%, transparent); color: var(--brand-primary); }
.kpi-pill--warn { background: var(--warning-bg); color: var(--warning); }
.kpi-pill--crit { background: var(--danger-bg);  color: var(--danger); }

.launchpad-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .launchpad-grid { grid-template-columns: 1fr; }
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.activity-item:last-child { border-bottom: 0; }
.activity-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.activity-item__icon svg,
.activity-item__icon i[data-lucide] { width: 14px; height: 14px; }
.activity-item__icon--ok    { background: var(--success-bg); color: var(--success); }
.activity-item__icon--warn  { background: var(--warning-bg); color: var(--warning); }
.activity-item__icon--danger { background: var(--danger-bg);  color: var(--danger); }

.shortcut-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shortcut {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--r-2);
  color: var(--text-base);
  transition: background var(--duration-fast) var(--ease-out);
}
.shortcut:hover {
  background: var(--surface-base);
  color: var(--text-strong);
}
.shortcut__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.shortcut:hover .shortcut__icon { border-color: var(--brand-primary); }
.shortcut__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shortcut__label {
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  font-size: var(--text-sm);
}
.shortcut__desc { font-size: var(--text-xs); color: var(--text-muted); }
.shortcut__chev {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  width: 16px; height: 16px;
}
.shortcut:hover .shortcut__chev { opacity: 1; }
.shortcut__label,
.shortcut__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Launchpad shortcut rail — user-pinned entities (drag-to-reorder + unpin) */
.shortcut-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.shortcut-item .shortcut { flex: 1; min-width: 0; }
.shortcut-item__handle {
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--text-muted);
  cursor: grab;
  flex-shrink: 0;
}
.shortcut-item__handle:active { cursor: grabbing; }
.shortcut-item__unpin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--r-2);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.shortcut-item__unpin:hover { background: var(--surface-base); color: var(--danger, #dc2626); }
.shortcut-item--ghost { opacity: 0.5; }
.shortcut-list--editing .shortcut { cursor: default; }

/* Star toggle — pin/unpin an entity to the launchpad from its list page.
   Built on .btn.btn--ghost.btn--sm.btn--icon so it sizes/aligns exactly like
   the row's settings button; we only override the colour. */
.shortcut-star { color: var(--text-muted); }
.shortcut-star.is-pinned { color: var(--brand-primary); }
.shortcut-star.is-pinned svg { fill: currentColor; }
.shortcut-star.is-pinned:hover { color: var(--brand-primary); }

/* Launchpad "add shortcut" picker — flat list rows (match the ⌘K palette,
   not boxed buttons). Group heading + selectable candidate row. */
.shortcut-pick__group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shortcut-pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text-base);
  text-align: left;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.shortcut-pick:hover { background: var(--surface-base); color: var(--text-strong); }
.shortcut-pick__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-pick__add { flex: none; color: var(--text-muted); font-size: 16px; line-height: 1; }

/* Hide elements until Alpine takes over */
[x-cloak] { display: none !important; }

.toast--out { opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }

/* === Map renderers ===================================================== */

/* Energy-structure tree (D3) */
.map-tree {
  position: relative;
  height: 560px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
  background-color: var(--surface-base);
  background-image: radial-gradient(var(--hairline) 1px, transparent 1px);
  background-size: 22px 22px;
}
.map-tree--editable .map-tree__node-g { cursor: grab; }
.map-tree--editable .map-tree__node-g.is-dragging { cursor: grabbing; }
.map-tree__svg { width: 100%; height: 100%; display: block; }
.map-tree__link { fill: none; stroke: var(--hairline-strong, var(--hairline)); stroke-width: 1.5px; }
.map-tree__node-g foreignObject { overflow: visible; }
.map-tree__node-g.is-dragging { opacity: .9; }

.map-tree-node {
  position: relative;
  width: 100%; height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.map-tree-node__open {
  position: absolute; top: 4px; right: 4px;
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  color: var(--text-muted);
  border-radius: var(--r-1);
  text-decoration: none;
  opacity: .55;
  transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.map-tree-node:hover .map-tree-node__open,
.is-selected .map-tree-node__open { opacity: 1; }
.map-tree-node__open:hover { color: var(--brand-primary); background: var(--surface-base); }
.map-tree__node-g.is-drop .map-tree-node {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary-soft, rgba(22,193,114,.25));
}
.map-tree-node__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-right: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-tree-node__value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-tree-node__unit { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.map-tree-node__barrow {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
}
.map-tree-node__bar {
  flex: 1 1 auto; min-width: 0;
  height: 4px; border-radius: var(--r-pill);
  background: var(--surface-base); border: 1px solid var(--hairline);
  overflow: hidden;
}
.map-tree-node__bar > span { display: block; height: 100%; background: var(--brand-primary); }
.map-tree-node__perc {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  line-height: 1;
}
.map-tree-node__toggle {
  position: absolute;
  bottom: -11px; left: 50%;
  transform: translateX(-50%);
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 2;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.map-tree-node__toggle:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--surface-base); }
.map-tree-node__toggle svg { transition: transform var(--duration-fast) var(--ease-out); }
.map-tree-node__toggle.is-collapsed svg { transform: rotate(-90deg); }

/* Synoptic overlay — same card markup as the tree */
.synoptic-wrap { position: relative; line-height: 0; }
.synoptic-layer { position: absolute; inset: 0; }
.synoptic-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 150px;
  line-height: normal;
  touch-action: none;
  user-select: none;
  z-index: 1;
}
.synoptic-node .map-tree-node { height: auto; }
.synoptic-node:hover { z-index: 2; }
.synoptic-node.is-dragging { z-index: 3; }
.synoptic-node.is-dragging .map-tree-node { box-shadow: var(--shadow-lg); }
.synoptic-node.is-selected .map-tree-node {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary-soft, rgba(22,193,114,.3)), var(--shadow-md);
}
.synoptic-node.is-placeholder .map-tree-node { border-style: dashed; }

/* --- Inline editor: stage + side panel --- */
.map-stage { display: flex; align-items: stretch; }
.map-stage__canvas { flex: 1; min-width: 0; position: relative; }
.map-stage .map-tree { height: 560px; border: 0; border-radius: 0; }

.map-fit-btn {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    background: var(--surface-raised);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.map-fit-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.map-fit-btn:active { background: var(--surface-base); }

.map-stage__canvas .map-tree__node-g,
.map-stage.is-editing .synoptic-node { cursor: pointer; }
.map-stage.is-editing .map-tree__node-g { cursor: grab; }
.map-stage.is-editing .map-tree__node-g.is-dragging { cursor: grabbing; }

.map-panel {
  width: 320px; flex-shrink: 0;
  border-left: 1px solid var(--hairline);
  background: var(--surface-raised);
  display: flex; flex-direction: column;
}
.map-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.map-panel__title { font-weight: var(--weight-semi); color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-panel__head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.map-panel__body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.map-panel__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); }
.map-panel__stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-base); border: 1px solid var(--hairline);
  border-radius: var(--r-2);
}

/* Tree node states */
.map-tree__node-g.is-selected .map-tree-node {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary-soft, rgba(22,193,114,.3));
}
.map-tree__node-g.is-placeholder .map-tree-node { border-style: dashed; background: var(--surface-base); }
.map-tree-node__hint { font-size: 10px; color: var(--text-muted); }
.map-tree__link--ghost { stroke-dasharray: 4 4; opacity: .5; }
.map-tree-node--root {
  width: auto; min-width: 0; box-shadow: none;
  background: var(--surface-base); border-style: dashed;
  align-items: center; justify-content: center;
}
.map-tree__node-g.is-synthetic .map-tree-node__name {
  text-transform: none; letter-spacing: 0; color: var(--text-muted);
}

/* Reports — mode selector (centered, prominent) */
.report-mode-bar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.segmented--lg {
  padding: 4px;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-sm);
}
.segmented--lg button {
  padding: 10px var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  border-radius: var(--r-2);
}
.segmented--lg button i[data-lucide],
.segmented--lg button svg { color: var(--text-muted); }
.segmented--lg button[aria-selected="true"] i[data-lucide],
.segmented--lg button[aria-selected="true"] svg { color: var(--brand-primary); }

/* Reports — Istantaneo two-column layout */
.report-istantaneo {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .report-istantaneo { grid-template-columns: 1fr; }
  .report-preview__body { min-height: 70vh; }
}

.report-record:hover { background: var(--surface-hover, rgba(0,0,0,0.03)); }
.report-record[data-active="1"] { background: var(--surface-selected, rgba(59,130,246,0.08)); }

/* Preview fills the row height set by the left column (form + history) */
.report-preview { display: flex; flex-direction: column; }
.report-preview__body { position: relative; flex: 1; min-height: 80vh; }
.report-preview__body #report-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.report-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-preview__empty[hidden] { display: none; }
.report-preview__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--surface-raised);
}
.report-preview__loading[hidden] { display: none; }
.report-preview__loading-text { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
/* Generic button loading state: spin the leading icon (mirrors #map-refresh). */
.btn.is-loading svg { animation: spinner-rotate 720ms linear infinite; }


/* ────────────────────────────────────────────────────────────────
   AI energy assistant — right-side chat drawer (Phase 2)
   Sits above the palette backdrop; slides in from the right edge.
   ──────────────────────────────────────────────────────────────── */
.assistant-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 101;
  display: flex;
  justify-content: flex-end;
  animation: assistant-scrim-in var(--duration-fast) var(--ease-out);
}
.assistant-panel {
  position: relative;
  width: 420px;
  max-width: 92vw;
  min-width: 360px;
  height: 100%;
  background: var(--surface-raised);
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: assistant-slide-in var(--duration-base) var(--ease-out);
}
/* Suppress the transform animation while the user is dragging the edge. */
.assistant-panel.is-resizing { animation: none; }

@keyframes assistant-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes assistant-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Left-edge drag handle. Invisible until hover/drag; widens the hit area
   beyond the visible hairline so it's easy to grab. */
.assistant-resize {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 8px;
  transform: translateX(-4px);
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}
.assistant-resize::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 4px;
  width: 2px;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out);
}
.assistant-resize:hover::after,
.assistant-panel.is-resizing .assistant-resize::after { background: var(--brand-primary); }

.assistant-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.assistant-head__lead {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
/* Branded icon chip so the sparkles mark reads as a deliberate element. */
.assistant-badge {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-3);
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
}
.assistant-badge > i { width: 18px; height: 18px; }
.assistant-head__title {
  font-weight: var(--weight-semi);
  color: var(--text-strong);
  line-height: var(--leading-tight, 1.2);
}
.assistant-head__sub {
  font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.assistant-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.assistant-intro p {
  font-size: var(--text-sm); color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.assistant-suggestions { display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-chip {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  background: var(--surface-base);
  color: var(--text-base);
  font-size: var(--text-sm);
  cursor: pointer;
}
.assistant-chip:hover { border-color: var(--brand-primary); color: var(--text-strong); }

.assistant-msg { display: flex; }
.assistant-msg--user { justify-content: flex-end; }
.assistant-bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-4);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.assistant-msg--user .assistant-bubble {
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  border-bottom-right-radius: var(--r-1);
}
.assistant-msg--assistant .assistant-bubble {
  background: var(--surface-base);
  color: var(--text-strong);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: var(--r-1);
}
.assistant-msg--error .assistant-bubble {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
}
.assistant-msg--note .assistant-bubble {
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--text-xs);
}

.assistant-typing { display: inline-flex; gap: 4px; align-items: center; }
.assistant-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: assistant-blink 1.2s infinite ease-in-out;
}
.assistant-typing span:nth-child(2) { animation-delay: .2s; }
.assistant-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes assistant-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.assistant-input {
  display: flex; gap: var(--space-2); align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
}
.assistant-input textarea {
  flex: 1; resize: none; max-height: 120px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-base);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--text-sm);
}
.assistant-input textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}

/* Inline chart proposed by the assistant (rendered via the dashboard renderer,
   whose .widget-card styles are lazy-loaded). Two-class selectors so they win
   over v2-dashboard.css, which loads after this file. */
.assistant-widget { display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-widget .assistant-chart {
  height: 240px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.assistant-widget .assistant-chart .widget-card__body { flex: 1; min-height: 0; }
.assistant-widget__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Unified "add to dashboard" control: primary button + dashboard picker fused
   into one pill, button on the left, select on the right. */
.assistant-add {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  height: 2.25rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.assistant-add__btn {
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm, 0.85rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--brand-primary-fg);
  background: var(--brand-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.assistant-add__btn:hover:not(:disabled) { background: var(--brand-primary-hover); }
.assistant-add__btn:disabled { opacity: 0.6; cursor: default; }
.assistant-add__select {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 14rem;
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-sm, 0.85rem);
  color: var(--color-text, inherit);
  background: var(--color-surface, #fff);
  border: 0;
  border-left: 1px solid var(--brand-primary);
  border-radius: 0;
  cursor: pointer;
}
.assistant-add__select:disabled { opacity: 0.6; cursor: default; }
.assistant-add:has(.assistant-add__btn:disabled) { opacity: 0.75; }

/* Proposed whole-dashboard card: a header naming the dashboard, a stacked
   preview of all its charts, and a single confirm action. */
.assistant-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border, #e2e5ea);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
}
.assistant-dashboard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.assistant-dashboard__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md, 8px);
  color: var(--brand-primary-fg);
  background: var(--brand-primary);
}
.assistant-dashboard__badge i { width: 1rem; height: 1rem; }
.assistant-dashboard__name { font-weight: 600; }
.assistant-dashboard__count {
  margin-left: auto;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}
.assistant-dashboard__grid { display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-dashboard__item { display: flex; flex-direction: column; }
.assistant-dashboard__item .assistant-chart {
  height: 200px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.assistant-dashboard__item .assistant-chart .widget-card__body { flex: 1; min-height: 0; }
.assistant-dashboard__hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

/* Proposed recurring-report card: cadence + target dashboard + recipients, with
   an optional preview of a brand-new dashboard, then a single confirm action. */
.assistant-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border, #e2e5ea);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
}
.assistant-report__head { display: flex; align-items: center; gap: var(--space-2); }
.assistant-report__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md, 8px);
  color: var(--brand-primary-fg);
  background: var(--brand-primary);
}
.assistant-report__badge i { width: 1rem; height: 1rem; }
.assistant-report__title { font-weight: 600; }
.assistant-report__freq {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--brand-primary);
  background: var(--brand-primary-soft, rgba(0, 0, 0, 0.05));
  border-radius: 999px;
}
.assistant-report__meta { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.assistant-report__meta > div { display: flex; gap: var(--space-2); font-size: var(--text-sm, 0.85rem); }
.assistant-report__meta dt {
  flex: 0 0 5.5rem;
  margin: 0;
  color: var(--color-text-muted, #6b7280);
}
.assistant-report__meta dd { margin: 0; min-width: 0; word-break: break-word; }
.assistant-report .assistant-dashboard__item .assistant-chart { height: 180px; }

/* Proposed energy-structure map: an indented tree preview of the meter
   hierarchy, then a single confirm action. Reuses .assistant-dashboard shell. */
.assistant-map__preview { font-size: var(--text-sm, 0.85rem); }
.assistant-map__tree { list-style: none; margin: 0; padding: 0; }
.assistant-map__tree .assistant-map__tree { margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--color-border, #e2e5ea); }
.assistant-map__tree li { position: relative; padding: 0.15rem 0; }
.assistant-map__node {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e5ea);
}

/* Read-only meter connectivity snapshot: a summary of online/offline/n.a. counts
   and a per-meter list with last contact / how long silent. No confirm action. */
.assistant-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border, #e2e5ea);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
}
.assistant-status__head { display: flex; align-items: center; gap: var(--space-2); }
.assistant-status__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md, 8px);
  color: var(--brand-primary-fg);
  background: var(--brand-primary);
}
.assistant-status__badge i { width: 1rem; height: 1rem; }
.assistant-status__title { font-weight: 600; }
.assistant-status__summary { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.assistant-status__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e5ea);
}
.assistant-status__dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-text-muted, #9aa1ac);
  flex: 0 0 auto;
}
.assistant-status__chip--online .assistant-status__dot,
.assistant-status__row--online .assistant-status__dot { background: #22a06b; }
.assistant-status__chip--offline .assistant-status__dot,
.assistant-status__row--offline .assistant-status__dot { background: #e5484d; }
.assistant-status__chip--na .assistant-status__dot,
.assistant-status__row--na .assistant-status__dot { background: #9aa1ac; }
.assistant-status__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.assistant-status__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.35rem 0;
  font-size: var(--text-sm, 0.85rem);
  border-top: 1px solid var(--color-border, #e2e5ea);
}
.assistant-status__row:first-child { border-top: none; }
.assistant-status__row .assistant-status__dot { align-self: center; }
.assistant-status__name { font-weight: 600; min-width: 0; word-break: break-word; }
.assistant-status__detail { margin-left: auto; color: var(--color-text-muted, #6b7280); text-align: right; }
.assistant-status__row--offline .assistant-status__detail { color: #e5484d; }
.assistant-status__empty,
.assistant-status__more {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

@media (max-width: 560px) {
  /* Full-width sheet on phones; edge-drag doesn't apply. */
  .assistant-panel { width: 100% !important; max-width: 100%; min-width: 0; }
  .assistant-resize { display: none; }
}


/* ===========================================================================
   Toni: disco e callout                                        [alert-status]
   ---------------------------------------------------------------------------
   I toni dei componenti si chiamano ok / warn / danger / info / neutral, i
   token si chiamano --success / --warning / --danger / --info: le pagine che
   disegnavano un cerchio colorato a mano scrivevano var(--ok-bg), che non
   esiste, e restavano senza colore proprio nei casi buoni. La traduzione si
   fa qui una volta sola, come già fa .badge--*.
   =========================================================================== */

.tone-disc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tone-disc--lg { width: 64px; height: 64px; }
.tone-disc--ok      { background: var(--success-bg); color: var(--success); }
.tone-disc--warn    { background: var(--warning-bg); color: var(--warning); }
.tone-disc--danger  { background: var(--danger-bg);  color: var(--danger); }
.tone-disc--info    { background: var(--info-bg);    color: var(--info); }
.tone-disc--neutral { background: var(--slate-100);  color: var(--slate-700); }

/* Callout — la striscia che dice cosa sta succedendo e cosa si può fare.
   Il tono colora l'icona e il fondo; il testo resta leggibile come il resto. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-3);
  margin-bottom: var(--space-5);
}
.callout__icon { display: grid; place-items: center; flex-shrink: 0; }
.callout__body { flex: 1; min-width: 0; }
.callout__title { font-weight: var(--weight-semi); color: var(--text-strong); }
.callout__text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.callout .btn { flex-shrink: 0; }
.callout--ok     { background: var(--success-bg); }
.callout--ok     .callout__icon { color: var(--success); }
.callout--warn   { background: var(--warning-bg); }
.callout--warn   .callout__icon { color: var(--warning); }
.callout--danger { background: var(--danger-bg); }
.callout--danger .callout__icon { color: var(--danger); }
.callout--info   { background: var(--info-bg); }
.callout--info   .callout__icon { color: var(--info); }

@media (max-width: 640px) {
  .callout { flex-wrap: wrap; }
}

/* ===========================================================================
   Apertura e piega                                             [alert-status]
   ---------------------------------------------------------------------------
   Una pagina che si apre sull'eccezione: l'apertura dice cosa non va (e il
   numero di quante volte), la piega tiene il quadro completo a un clic.
   =========================================================================== */

.lede {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-3);
  margin-bottom: var(--space-4);
}
.lede__body { flex: 1; min-width: 0; }
.lede__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-lg);
  color: var(--text-strong);
}
.lede__text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.lede__count {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lede .btn { flex-shrink: 0; }
.lede--ok      { background: var(--success-bg); }
.lede--ok      .lede__count { color: var(--success); }
.lede--warn    { background: var(--warning-bg); }
.lede--warn    .lede__count { color: var(--warning); }
.lede--danger  { background: var(--danger-bg); }
.lede--danger  .lede__count { color: var(--danger); }
.lede--neutral { background: var(--surface-base); border: 1px solid var(--hairline); }
.lede--neutral .lede__count { color: var(--text-muted); }

@media (max-width: 640px) {
  .lede { flex-wrap: wrap; }
}

.fold {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
}
.fold__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary:hover { color: var(--text-strong); }
.fold__summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.fold__caret { transition: transform 140ms ease; flex-shrink: 0; }
.fold[open] .fold__summary { border-bottom: 1px solid var(--hairline); }
.fold[open] .fold__caret { transform: rotate(90deg); }

/* Le tabelle sono l'unica cosa che può uscire dalla colonna: scorre la
   tabella, non la pagina. */
.table-scroll { overflow-x: auto; }

/* Due tabelle una sopra l'altra si leggono come una sola se le colonne cadono
   sulla stessa linea: le larghezze le detta il colgroup, non il contenuto. */
.table--fleet { table-layout: fixed; }
.table--fleet td:first-child { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .fold__caret { transition: none; }
}