/* ============================================================
   Sistema di interfaccia — componenti
   Richiede tokens.css. Nessun valore letterale qui dentro.
   Ordine: impianto · navigazione · dati · azioni · moduli ·
           segnali · sovrapposizioni · utilità
   ============================================================ */

/* ── Impianto ─────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
.shell.wide { grid-template-columns: 1fr; }                 /* campo, tablet, app */
.page { padding: var(--s6) var(--s6) var(--s8); max-width: var(--page-max); }
.stack { display: grid; gap: var(--s4); }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: space-between; }
.spacer { flex: 1; }

/* ── Testata ──────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--shell); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-top);
}
.logo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--brand-grad);
  color: var(--on-brand); font-weight: 700; font-size: var(--t-strong);
}
.search {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-faint);
}
.search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); font: inherit; }
kbd {
  font: 500 var(--t-micro)/1 var(--font); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--s1) 6px;
}
.avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--t-meta); font-weight: 600;
}

/* ── Navigazione laterale ─────────────────────────────────── */
.rail { background: var(--shell); border-right: 1px solid var(--line); padding: var(--s4) var(--s3); }
.rail .group { font-size: var(--t-micro); font-weight: 600; color: var(--ink-faint); padding: var(--s3) var(--s2) 6px; }
.rail .group:first-child { padding-top: 0; }
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s2); border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none; font-size: var(--t-strong);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail a:hover { background: var(--line-soft); color: var(--ink); }
.rail a[aria-current] { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.rail a .count { font-size: var(--t-micro); font-weight: 600; color: var(--ink-faint); }
.rail a.locked { opacity: .45; pointer-events: none; }

/* ── Schede ───────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow);
}
.card > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft);
}
.card > header h2 { font-size: var(--t-strong); }
.card > header .meta { font-size: var(--t-meta); color: var(--ink-faint); font-weight: 400; }
.card > .body { padding: var(--s4); }
.card > footer { padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }

/* ── Indicatori ───────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.kpi {
  position: relative; overflow: hidden;
  background: var(--surface); background-image: var(--wash);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s4) var(--s4); box-shadow: var(--shadow);
}
/* Un solo indicatore per schermata porta la barra di accento: quello che conta. */
.kpi.lead::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--brand-grad);
}
.kpi .k { font-size: var(--t-meta); color: var(--ink-soft); }
.kpi .v { margin: 7px 0 6px; font-size: var(--t-figure); font-weight: 700; letter-spacing: var(--track-figure); }
.kpi .d { font-size: var(--t-meta); color: var(--ink-faint); }
.kpi .d b { font-weight: 600; color: var(--ink-soft); }
.kpi .d.up b { color: var(--pos); }
.kpi .d.warn b { color: var(--warn); }
.kpi .d.down b { color: var(--neg); }
.kpi .spark { display: block; margin-top: var(--s3); }

/* ── Tabelle ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: var(--t-meta); font-weight: 500; color: var(--ink-faint);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
td { height: var(--row-h); padding: 0 var(--s4); border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--line-soft); }
td.num, th.num { text-align: right; }
.person { display: flex; align-items: center; gap: var(--s2); }
.chip {
  width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--line-soft); color: var(--ink-soft); font-size: var(--t-micro); font-weight: 600;
}
/* Densità cantiere: la stessa tabella diventa una pila toccabile. */
.touch table, .touch thead, .touch tbody, .touch tr, .touch td { display: block; width: 100%; }
.touch thead { display: none; }
.touch tbody tr {
  background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--commessa, var(--brand));
  border-radius: var(--r-md); padding: var(--s3) var(--s4); margin-bottom: var(--s2);
}
.touch td { height: auto; min-height: 0; border: none; padding: 3px 0; }
.touch td[data-k]::before { content: attr(data-k) " · "; color: var(--ink-faint); font-size: var(--t-meta); }
.touch td.num { text-align: left; font-size: var(--t-title); font-weight: 700; }

/* ── Elenchi: priorità e attività ─────────────────────────── */
.priority {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s3);
  align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft);
}
.priority:last-child { border-bottom: none; }
.priority .dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--ink-faint); }
.priority .dot.neg { background: var(--neg); }
.priority .dot.warn { background: var(--warn); }
.priority .dot.info { background: var(--brand); }
.priority .text { font-size: var(--t-strong); font-weight: 500; }
/* La riga sotto dice perché è una priorità: senza, è solo un conteggio. */
.priority .why { display: block; margin-top: 2px; font-size: var(--t-meta); font-weight: 400; color: var(--ink-faint); }
.priority .go { font-size: var(--t-body); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Ogni informazione ha la sua colonna: cosa, stato, quando. Mai concatenate. */
.feed { margin: 0; padding: 0; list-style: none; }
.feed li {
  display: grid; grid-template-columns: minmax(0, 1fr) 148px 76px; gap: var(--s3);
  align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft);
}
.feed li:last-child { border-bottom: none; }
.feed .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .what b { font-weight: 600; }
.feed .what span { color: var(--ink-faint); }
.feed .when { text-align: right; font-size: var(--t-meta); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── Stati ────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  padding: var(--s1) var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-soft);
  font-size: var(--t-meta); font-weight: 500; white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.pill.ok    { color: var(--pos);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.pill.wait  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pill.run   { color: var(--brand-2); border-color: color-mix(in srgb, var(--brand-2) 35%, transparent); }
.pill.stop  { color: var(--neg);  border-color: color-mix(in srgb, var(--neg) 35%, transparent); }

/* ── Azioni ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 600 var(--t-body)/1 var(--font); padding: 11px var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--line-soft); }
.btn.primary { background: var(--brand-grad); border-color: transparent; color: var(--on-brand); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.quiet { border-color: transparent; color: var(--ink-soft); }
.btn.quiet:hover { color: var(--ink); }
.btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.touch { padding: var(--s4) var(--s5); font-size: var(--t-strong); border-radius: var(--r-md); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── Moduli di inserimento ────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field > label { font-size: var(--t-meta); color: var(--ink-soft); }
.field .hint { font-size: var(--t-meta); color: var(--ink-faint); }
.field .error { font-size: var(--t-meta); color: var(--neg); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px var(--s3); width: 100%;
  transition: border-color var(--fast) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--neg); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 96px; resize: vertical; line-height: var(--leading-body); }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--brand); }
.fields { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields .full { grid-column: 1 / -1; }

/* ── Schede a linguette ───────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button {
  font: 500 var(--t-body)/1 var(--font); color: var(--ink-soft); cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; padding: var(--s3);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

/* ── Segnali ──────────────────────────────────────────────── */
.banner {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.banner::before { content: ""; align-self: stretch; border-radius: var(--r-pill); background: var(--info); }
.banner.warn::before { background: var(--warn); }
.banner.neg::before { background: var(--neg); }
.banner.ok::before { background: var(--pos); }
.banner .t { font-weight: 600; }
.banner .t small { display: block; font-weight: 400; color: var(--ink-soft); }

/* Nota dell'assistente: motivo e azione, sempre entrambi. */
.insight { display: grid; gap: var(--s2); padding: var(--s4); border-top: 1px solid var(--line-soft); }
.insight .from { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-meta); font-weight: 600; color: var(--brand-2); }
[data-theme="chiaro"] .insight .from { color: color-mix(in srgb, var(--brand) 80%, #000); }
.insight p { margin: 0; color: var(--ink-soft); }
.insight p b { color: var(--ink); font-weight: 600; }

/* Lo schermo vuoto è un invito, non un messaggio di errore. */
.empty { display: grid; gap: var(--s3); justify-items: center; text-align: center; padding: var(--s8) var(--s5); color: var(--ink-soft); }
.empty h3 { color: var(--ink); }
.empty p { margin: 0; max-width: 46ch; }

.skeleton {
  background: linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft));
  background-size: 200% 100%; border-radius: var(--r-xs); animation: slide 1.2s infinite linear;
}
@keyframes slide { to { background-position: -200% 0; } }

/* ── Sovrapposizioni ──────────────────────────────────────── */
dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
  width: min(560px, calc(100vw - var(--s6)));
}
dialog::backdrop { background: rgba(4, 8, 14, .6); }
dialog > header { padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
dialog > .body { padding: var(--s4); }
dialog > footer { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }

.toast {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: var(--z-toast);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lift);
}

/* ── Grafici ──────────────────────────────────────────────── */
.chart svg { width: 100%; display: block; }
.chart .bar { fill: url(#brandColumn); }
.chart .axis { font-size: var(--t-micro); fill: var(--ink-faint); }
.chart .value { font-size: var(--t-micro); fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chart .rule { stroke: var(--line-soft); stroke-width: 1; }

/* ── Utilità (poche, volutamente) ─────────────────────────── */
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.meta { font-size: var(--t-meta); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ── Adattamento ──────────────────────────────────────────── */
@media (max-width: 1020px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .feed li { grid-template-columns: minmax(0, 1fr) auto; }
  .feed .when { display: none; }
  .page { padding: var(--s4) var(--s4) var(--s7); }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .btn { padding: var(--s3) var(--s4); }
}
@media print {
  .rail, .topbar, .actions, .toast { display: none !important; }
  .card { border-color: #ccc; box-shadow: none; }
}