/* Citorno Lab — il design system di Citorno (CLAUDE.md, «Regole UI»), senza stili inline: la CSP li vieta.
   Un accento (il blu di Citorno), il resto è la scala dei grigi caldi. Semantici solo per stato reale:
   menta = a posto, giallo = da guardare, rosso = da fare. Corpi dalla scala 27/19/15/13/12,5/11,5/8,5.
   Spaziature 4/8. Raggi: 20 card, 12 banner, 10 campi, 999 pillole. Ombra: --ombra-1. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/font/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/font/jetbrains.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --background: #F8F4E9; --card: #FFFFFF; --crema: #F6F1E3; --foreground: #1D1B1E;
  --tx2: #57534A; --tx3: #8E887B; --line: #E9E3D2; --line2: #F0EBDD; --muted: #EFE9D8;
  --acc: #394FB1; --accm: #E7EAF8;
  --giallo: #F2CE47; --gialm: #FBF0C9; --gialf: #7A6114;
  --menta: #CBE5D9; --menm: #E3F1E9; --menf: #3E6B4C;
  --corallo: #EF8B84; --rosm: #FBE4E2; --rosf: #A03A33;
  --ombra-1: 0 1px 2px rgba(29, 27, 30, .04);
  --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 13px/1.5 var(--sans); }
a { color: var(--acc); }
code { font-family: var(--mono); background: var(--crema); padding: 1px 4px; border-radius: 4px; font-size: 11.5px; overflow-wrap: anywhere; }
pre { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; background: var(--crema); border-radius: 10px; padding: 8px 12px; overflow-x: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
small { display: block; color: var(--tx3); font-size: 11.5px; }
b, strong { font-weight: 700; }

/* testata */
header { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.marchio { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--foreground); text-decoration: none; }
.marchio span { color: var(--tx3); font-weight: 600; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.menu a { padding: 4px 12px; border-radius: 999px; text-decoration: none; color: var(--tx2); font-size: 12.5px; font-weight: 600; }
@media (hover: hover) { .menu a:hover { background: var(--crema); color: var(--foreground); } }
.menu a[aria-current=page] { background: var(--accm); color: var(--acc); }
.menu a:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 1.5px solid var(--foreground); outline-offset: 2px; }
.utente { display: flex; align-items: center; gap: 12px; color: var(--tx3); font-size: 12.5px; }
.utente form { display: flex; align-items: center; gap: 8px; margin: 0; }
.utente .vecchia { color: var(--rosf); font-weight: 700; }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 48px; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; margin: 0 0 16px; box-shadow: var(--ombra-1); }
h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
h3 { margin: 16px 0 4px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .1em; }
.spiega { color: var(--tx2); margin: -4px 0 12px; font-size: 12.5px; }
.vuoto { color: var(--tx3); font-style: italic; }
.avviso { color: var(--rosf); }
.tenue { color: var(--tx3); }
.banner { border-radius: 12px; padding: 8px 16px; margin: 0 0 16px; font-weight: 600; }
.banner.rosso { background: var(--rosm); color: var(--rosf); }

/* stati — solo per stato reale */
.p { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }
.p.verde { background: var(--menf); } .p.giallo { background: var(--gialf); }
.p.rosso { background: var(--rosf); } .p.grigio { background: var(--tx3); }

/* panoramica */
.esito { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 16px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--ombra-1); }
.esito .p { width: 12px; height: 12px; margin: 0; }
.esito.rosso { background: var(--rosm); border-color: transparent; color: var(--rosf); }
.esito.giallo { background: var(--gialm); border-color: transparent; color: var(--gialf); }
.esito.verde { background: var(--menm); border-color: transparent; color: var(--menf); }
.allarmi { list-style: none; margin: 0; padding: 0; }
.allarmi li + li { border-top: 1px solid var(--line2); }
.allarmi a { display: flex; align-items: baseline; gap: 4px; padding: 8px 4px; color: var(--foreground); text-decoration: none; }
@media (hover: hover) { .allarmi a:hover { background: var(--crema); } }
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.scheda { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--foreground); text-decoration: none; background: var(--card); }
@media (hover: hover) { a.scheda:hover { background: var(--crema); } }
.scheda .t { display: block; font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .1em; }
.scheda b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.scheda.giallo { border-color: var(--giallo); }
.scheda.rosso { border-color: var(--corallo); }

/* tabelle: una card con i filetti */
.scorri { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { text-align: left; font-family: var(--mono); font-weight: 600; font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover td { background: var(--line2); } }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td:first-child .p:only-child { margin-right: 0; }
meter { width: 120px; height: 8px; vertical-align: middle; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .due { grid-template-columns: 1fr; } }
details > summary { cursor: pointer; }
section > details { margin-top: 8px; }
section > details > summary { color: var(--acc); font-size: 12.5px; font-weight: 600; }

/* albero delle cartelle: righe a colonne */
.albero { font-size: 12.5px; overflow-x: auto; }
.albero .riga { display: grid; grid-template-columns: minmax(280px, 1fr) 72px 88px 152px 56px; gap: 8px; align-items: baseline;
  padding: 4px 8px; border-bottom: 1px solid var(--line2); min-width: 700px; }
.albero summary.riga { list-style: none; }
.albero summary.riga::-webkit-details-marker { display: none; }
.albero summary.riga .nome::before { content: "▸ "; color: var(--tx3); }
.albero details[open] > summary.riga .nome::before { content: "▾ "; }
@media (hover: hover) { .albero .riga:hover { background: var(--crema); } }
.albero .intest { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); font-weight: 600; border-bottom-color: var(--line); }
.albero .c { color: var(--tx3); white-space: nowrap; }
.albero .nome.dir { font-weight: 700; }
.albero .nome em { color: var(--tx2); font-style: normal; font-size: 11.5px; margin-left: 8px; }
.albero .nome small { display: inline; margin-left: 4px; color: var(--rosf); }
.l1 { padding-left: 16px; } .l2 { padding-left: 32px; } .l3 { padding-left: 48px; } .l4 { padding-left: 64px; }
.l5 { padding-left: 80px; } .l6 { padding-left: 96px; } .l7 { padding-left: 112px; }

/* accesso */
.accesso { max-width: 380px; margin: 48px auto; background: var(--card); border: 1px solid var(--line); box-shadow: var(--ombra-1);
  border-radius: 20px; padding: 24px; display: grid; gap: 12px; }
.accesso h1 { font-size: 27px; }
.accesso label { display: grid; gap: 4px; color: var(--tx2); font-size: 12.5px; font-weight: 600; }
input { font: inherit; font-size: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--crema); color: var(--foreground); }
input:focus { border-color: var(--foreground); outline: none; }
button { font: inherit; font-weight: 700; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--foreground); color: var(--card); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.utente button { padding: 4px 12px; font-size: 12.5px; background: transparent; color: var(--tx2); border: 1px solid var(--line); }
.errore { color: var(--rosf); margin: 0; font-weight: 600; }
.qr { display: block; margin: 4px auto; width: 220px; height: 220px; image-rendering: pixelated; background: var(--card); border-radius: 12px; padding: 8px; border: 1px solid var(--line); }
.indietro { text-align: center; color: var(--tx3); font-size: 12.5px; }

@media (max-width: 640px) {
  header { gap: 4px 8px; }
  .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .utente > span { display: none; }
  section { padding: 16px; border-radius: 12px; }
  .esito { border-radius: 12px; }
}

/* traffico */
.etichetta { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.etichetta.noi { background: var(--menm); color: var(--menf); }
.etichetta.bloccato { background: var(--rosm); color: var(--rosf); }
.piede { color: var(--tx3); font-size: 11.5px; text-align: center; margin-top: 8px; }