/* ============================================================
   HUB MARCO — design system
   Direzione (approvata 15/07/2026, rif. Martes OS migliorato):
   carta/crema, bordi netti 2px inchiostro, ombre piene offset,
   accenti salvia/rosa, etichette IBM Plex Mono maiuscole,
   numeri grandi Archivo 900. Zero build, responsive, zero CDN
   salvo Google Fonts.
   Token: --carta fondo pagina · --card superficie · --inchiostro
   testo/bordi · --salvia ok/attivo · --rosa attenzione/attesa ·
   --evid evidenziatore recap · --ombra offset 4px 4px 0.
   ============================================================ */

:root {
  --carta: #f3efe4;
  --card: #fcfaf3;
  --inchiostro: #17150f;
  --inchiostro-60: rgba(23, 21, 15, 0.6);
  --inchiostro-35: rgba(23, 21, 15, 0.35);
  --salvia: #bcd2b2;
  --salvia-fondo: #dce8d5;
  --rosa: #f0c6c2;
  --rosa-fondo: #f7dedb;
  --evid: #f5e27a;
  --bordo: 2px solid var(--inchiostro);
  --ombra: 4px 4px 0 var(--inchiostro);
  --ombra-sm: 3px 3px 0 var(--inchiostro);
  --raggio: 2px;
  --font-display: "Archivo", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- tipografia ---------- */

h1, h2, h3 { margin: 0; font-family: var(--font-display); }

.display {
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.etichetta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--inchiostro-60);
}

.numero-grande {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

/* ---------- struttura ---------- */

.hub-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* sidebar */

.sidebar {
  border-right: var(--bordo);
  background: var(--carta);
  padding: var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  position: sticky;
  top: 0;
  height: 100vh;
}

.marchio { display: flex; align-items: center; gap: 10px; }

.marchio-quadro {
  width: 34px; height: 34px;
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: var(--carta);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 700; font-size: 15px;
  box-shadow: var(--ombra-sm);
}

.marchio-nome { font-weight: 900; font-stretch: 125%; font-size: 15px; letter-spacing: 0.02em; }
.marchio-sotto { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inchiostro-60); }

.nav { display: flex; flex-direction: column; gap: var(--s2); }

.nav-voce {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 2px solid transparent;
  border-radius: var(--raggio);
  background: none;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--inchiostro);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.nav-voce svg { width: 16px; height: 16px; flex: none; }

.nav-voce:hover { border-color: var(--inchiostro); }

.nav-voce.attiva {
  border-color: var(--inchiostro);
  background: var(--salvia);
  box-shadow: var(--ombra-sm);
}

.nav-voce .badge-num { margin-left: auto; }

.nav-voce .presto {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--inchiostro-35);
  border-radius: var(--raggio);
  padding: 1px 5px;
  color: var(--inchiostro-60);
}

.badge-num {
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border: 2px solid var(--inchiostro);
  border-radius: var(--raggio);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

.badge-num.rosa { background: var(--rosa); }

.sidebar-fondo { margin-top: auto; }

/* area principale */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: var(--bordo);
  background: var(--carta);
  position: sticky; top: 0; z-index: 20;
}

.omnibox {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  max-width: 640px;
}

.omnibox input {
  flex: 1;
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--inchiostro);
}

.omnibox input::placeholder { color: var(--inchiostro-35); }
.omnibox input:focus { outline: none; box-shadow: var(--ombra-sm); }

.orologio {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--inchiostro-60);
  white-space: nowrap;
}

.contenuto {
  padding: var(--s5);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- componenti ---------- */

.card {
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  box-shadow: var(--ombra);
  padding: var(--s4);
}

.card.salvia { background: var(--salvia-fondo); }
.card.rosa { background: var(--rosa-fondo); }
.card.cliccabile { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.card.cliccabile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--inchiostro); }
.card.cliccabile:active { transform: translate(0, 0); box-shadow: var(--ombra-sm); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  box-shadow: var(--ombra-sm);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--inchiostro);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--inchiostro); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inchiostro); }
.btn.salvia { background: var(--salvia); }
.btn.rosa { background: var(--rosa); }
.btn.inchiostro { background: var(--inchiostro); color: var(--carta); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--ombra-sm); }

input[type="text"], input[type="password"], textarea, select {
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--inchiostro);
  width: 100%;
}

textarea { font-family: var(--font-mono); font-size: 13px; resize: vertical; min-height: 96px; }
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--ombra-sm); }

.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--inchiostro-60);
  border-bottom: var(--bordo);
  padding: 8px 10px;
}
.tabella td { padding: 10px; border-bottom: 1px solid var(--inchiostro-35); }
.tabella tr:last-child td { border-bottom: none; }

/* stato run/job */

.stato {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid var(--inchiostro);
  border-radius: var(--raggio);
  padding: 3px 8px;
  background: var(--card);
}
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--inchiostro-35); }
.stato.queued::before { background: var(--inchiostro-35); }
.stato.running { background: var(--evid); }
.stato.running::before { background: var(--inchiostro); animation: lampeggio 1s steps(2) infinite; }
.stato.awaiting_ok { background: var(--rosa); }
.stato.awaiting_ok::before { background: #b0443a; }
.stato.done { background: var(--salvia); }
.stato.done::before { background: #3c6b34; }
.stato.failed { background: var(--rosa); }
.stato.failed::before { background: #b0443a; }

@keyframes lampeggio { 50% { opacity: 0.2; } }

/* evidenziazione nel recap (signature) */

.evidenzia {
  font-weight: 700;
  background: var(--evid);
  border: 1.5px solid var(--inchiostro);
  border-radius: var(--raggio);
  padding: 0 6px;
  white-space: nowrap;
}

/* toast */

.toast-slot {
  position: fixed;
  bottom: var(--s4); right: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  z-index: 100;
}

.toast {
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  box-shadow: var(--ombra);
  padding: 12px 16px;
  font-size: 14px; font-weight: 600;
  max-width: 340px;
  animation: toast-entra 180ms ease;
}

.toast.ok { background: var(--salvia); }
.toast.err { background: var(--rosa); }

@keyframes toast-entra { from { transform: translateY(8px); opacity: 0; } }

/* banner segnaposto */

.banner-presto {
  border: 2px dashed var(--inchiostro);
  border-radius: var(--raggio);
  background: var(--evid);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: var(--s4);
}

/* runner (pannello esecuzione run) */

.runner-velo {
  position: fixed; inset: 0;
  background: rgba(23, 21, 15, 0.45);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--s3);
}

.runner-pannello {
  width: min(720px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--card);
  box-shadow: 8px 8px 0 var(--inchiostro);
  animation: toast-entra 160ms ease;
}

.runner-testa {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: var(--bordo);
}

.runner-testa h2 { font-size: 18px; font-weight: 900; font-stretch: 125%; }

.runner-chiudi {
  margin-left: auto;
  border: var(--bordo); border-radius: var(--raggio);
  background: var(--card);
  width: 32px; height: 32px;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.runner-chiudi:hover { background: var(--rosa); }

.runner-corpo { padding: var(--s4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.campo .obbligatorio { color: #b0443a; }

.runner-stream {
  border: var(--bordo);
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: var(--carta);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  padding: var(--s3);
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.runner-stream .riga-tool { opacity: 0.55; }
.runner-stream .riga-result { color: var(--evid); font-weight: 700; }
.runner-stream .riga-errore { color: var(--rosa); font-weight: 700; }

.runner-esito {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-size: 12px;
  flex-wrap: wrap;
}

/* stato vuoto */

.vuoto {
  border: 2px dashed var(--inchiostro-35);
  border-radius: var(--raggio);
  padding: var(--s5);
  text-align: center;
  color: var(--inchiostro-60);
}

/* griglie di utilità */

.griglia { display: grid; gap: var(--s4); }
.griglia.c2 { grid-template-columns: repeat(2, 1fr); }
.griglia.c3 { grid-template-columns: repeat(3, 1fr); }

.testata-tab { margin-bottom: var(--s4); }
.testata-tab h1 { font-size: clamp(26px, 4vw, 38px); }
.testata-tab .etichetta { margin-bottom: var(--s1); display: block; }

/* focus visibile ovunque */
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hub-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    border-right: none;
    border-top: var(--bordo);
    padding: var(--s2);
    overflow-x: auto;
    z-index: 30;
    background: var(--carta);
  }
  .marchio, .sidebar-fondo { display: none; }
  .nav { flex-direction: row; }
  .nav-voce { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .contenuto { padding: var(--s3) var(--s3) 96px; }
  .topbar { padding: var(--s2) var(--s3); }
  .orologio { display: none; }
  .griglia.c2, .griglia.c3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}