/* Cloud Dashboard — sistema visivo condiviso.
   Struttura in due inchiostri: --void e --lumin. Il tema chiaro è il negativo dello scuro.
   Sopra la struttura, pochi fosfori che portano significato: un colore per provider,
   l'ambra per i soldi, il rosso per quello che va sistemato, un colore per tipo di riquadro.
   Niente grigi pieni: la gerarchia viene da corpo, densità di barre e inversione. */

@font-face{font-family:"Departure Mono";src:url("/static/vendor/fonts/DepartureMono-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/vendor/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/vendor/fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500 700;font-display:swap}

:root{
  --void:#000; --lumin:#fff;
  --bg:var(--void); --ink:var(--lumin);
  --rule:1px solid var(--ink);
  --display:"Departure Mono",ui-monospace,Menlo,monospace;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gap:16px; --pad:16px;
  color-scheme:dark;
  /* fosfori sul nero */
  --amber:#ffb23f; --hot:#ff5147; --ok:#8ee66b; --cool:#9fb4ff; --on-hot:#000;
  --p-anthropic:#ff8a5b; --p-openai:#3ddbb6; --p-gcp:#5aa2ff; --p-aws:#ffd84a;
  --p-azure:#5fd8f0; --p-stripe:#b18cff; --p-x1:#ff74b8; --p-x2:#c9e86a; --p-x3:#e9a7ff;
}
/* gli stessi fosfori, scuriti per stare sul bianco */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){--bg:var(--lumin);--ink:var(--void);color-scheme:light;
    --amber:#b06a00; --hot:#d01f17; --ok:#2e8a14; --cool:#3a55d0; --on-hot:#fff;
    --p-anthropic:#c4501f; --p-openai:#08876c; --p-gcp:#1d62cc; --p-aws:#8f6c00;
    --p-azure:#0a7d96; --p-stripe:#6a3fd0; --p-x1:#c22a78; --p-x2:#5b7a0a; --p-x3:#9a3fb8}
}
:root[data-theme="light"]{--bg:var(--lumin);--ink:var(--void);color-scheme:light;
  --amber:#b06a00; --hot:#d01f17; --ok:#2e8a14; --cool:#3a55d0; --on-hot:#fff;
  --p-anthropic:#c4501f; --p-openai:#08876c; --p-gcp:#1d62cc; --p-aws:#8f6c00;
  --p-azure:#0a7d96; --p-stripe:#6a3fd0; --p-x1:#c22a78; --p-x2:#5b7a0a; --p-x3:#9a3fb8}
:root[data-theme="dark"]{--bg:var(--void);--ink:var(--lumin);color-scheme:dark;
  --amber:#ffb23f; --hot:#ff5147; --ok:#8ee66b; --cool:#9fb4ff; --on-hot:#000;
  --p-anthropic:#ff8a5b; --p-openai:#3ddbb6; --p-gcp:#5aa2ff; --p-aws:#ffd84a;
  --p-azure:#5fd8f0; --p-stripe:#b18cff; --p-x1:#ff74b8; --p-x2:#c9e86a; --p-x3:#e9a7ff}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 13px/1.5 var(--mono);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
*{scrollbar-width:thin;scrollbar-color:var(--ink) var(--bg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--ink)}
::-webkit-scrollbar-track{background:var(--bg)}

/* ---- tipografia ---------------------------------------------------------- */
.label{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em}
.display{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:-.01em}
.num{text-align:right;white-space:nowrap}
.caps{text-transform:uppercase;letter-spacing:.06em}

/* ---- barra superiore ----------------------------------------------------- */
.top{border-bottom:var(--rule)}
.top-in{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px 12px;
  max-width:1480px;margin:0 auto;padding:14px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{display:block;height:30px;width:auto}
.brand b{display:block;font:400 15px/1.05 var(--display);text-transform:uppercase;letter-spacing:.04em}
.telemetry{display:flex;gap:28px;min-width:0;overflow:hidden}
.telemetry div{min-width:0}
.telemetry dt{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.telemetry dd{margin:2px 0 0;font:400 12px/1.3 var(--mono);text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:stretch;border:var(--rule)}
.nav a,.nav button{display:flex;align-items:center;padding:7px 14px;font:500 11px/1 var(--mono);
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;background:none;color:var(--ink);
  border:0;border-left:var(--rule);cursor:pointer}
.nav > :first-child{border-left:0}
.nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.nav a:hover:not([aria-current]),.nav button:hover{text-decoration:underline}
@media (max-width:480px){.nav.sections{max-width:100%;overflow-x:auto}.nav.sections a{padding:7px 8px}}   /* sei voci con Ufficio: su telefono stanno in riga */

main{padding:24px;max-width:1480px;margin:0 auto}

/* ---- riquadri ------------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.frame{border:var(--rule);min-width:0;display:flex;flex-direction:column}
.frame > header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px var(--pad);border-bottom:var(--rule)}
.frame > header h2{margin:0;font:500 14px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.frame > header .meta{font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-align:right}
.frame .body{padding:12px var(--pad) var(--pad);flex:1;min-width:0}
.frame .foot{border-top:var(--rule);padding:8px var(--pad);display:flex;justify-content:space-between;gap:12px;
  font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}
.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}

/* ---- tono del riquadro: dice a colpo d'occhio di che cosa parla ------------
   money = soldi spesi, split = ripartizioni, alert = da sistemare, info = stato e servizi.
   Colora il titolo, un tassello davanti al titolo e (via --mc) le misure a barre. */
.frame[data-tone] > header h2{display:flex;align-items:center;gap:10px;color:var(--tone)}
.frame[data-tone] > header h2::before{content:"";width:10px;height:10px;background:var(--tone);flex:none}
.frame[data-tone="money"]{--tone:var(--amber);--mc:var(--amber)}
.frame[data-tone="split"]{--tone:var(--cool);--mc:var(--cool)}
.frame[data-tone="alert"]{--tone:var(--hot)}
.frame[data-tone="info"]{--tone:var(--ok)}
.amber{color:var(--amber)}.hot{color:var(--hot)}.ok{color:var(--ok)}.cool{color:var(--cool)}


/* ---- barcode: il materiale del mondo --------------------------------------
   Riempimenti a barre verticali: usati per misure (meter), stati (errore) e
   come "grigio" fatto di densità invece che di tinta. */
.bars{background-image:repeating-linear-gradient(90deg,var(--mc,var(--ink)) 0 1px,transparent 1px 3px)}
.bars-dense{background-image:repeating-linear-gradient(90deg,var(--mc,var(--ink)) 0 2px,transparent 2px 3px)}
.bars-thin{background-image:repeating-linear-gradient(90deg,var(--mc,var(--ink)) 0 1px,transparent 1px 5px)}
.meter{height:10px;min-width:2px}

/* ---- tabelle ------------------------------------------------------------- */
table{width:100%;border-collapse:collapse}
th,td{padding:7px 10px 7px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--ink)}
th{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding-top:0}
tr:last-child td{border-bottom:0}
td:last-child,th:last-child{padding-right:0}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- stati: inversione, timbro, tratteggio -------------------------------- */
.inv{background:var(--ink);color:var(--bg)}
.inv td{border-bottom-color:var(--bg)}
.inv td:first-child,tr.open td:first-child,tr.lit td:first-child{padding-left:8px}
.inv td:last-child,tr.open td:last-child,tr.lit td:last-child{padding-right:8px}
.inv .bars,.inv .bars-dense,.inv .bars-thin{background-image:repeating-linear-gradient(90deg,var(--bg) 0 1px,transparent 1px 3px)}
.stamp{display:inline-block;padding:1px 6px;border:1px solid currentColor;font:500 11px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.stamp.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.inv .stamp.solid{background:var(--bg);color:var(--ink);border-color:var(--bg)}
/* allarme: la riga da sistemare è in negativo sul rosso, non sul bianco */
.alert{background:var(--hot);color:var(--on-hot)}
.alert td{border-bottom-color:var(--on-hot)}
.alert td:first-child{padding-left:8px}.alert td:last-child{padding-right:8px}
.alert .bars,.alert .bars-dense,.alert .bars-thin{--mc:var(--on-hot)}
.alert .stamp.solid{background:var(--on-hot);color:var(--hot);border-color:var(--on-hot)}
.stamp.hot{color:var(--hot)}.stamp.hot.solid{background:var(--hot);color:var(--on-hot);border-color:var(--hot)}
.stamp.warn{color:var(--amber)}.stamp.good{color:var(--ok)}
.hatch{position:relative;background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 4px)}
.hatch > *{position:relative;background:var(--bg);padding:0 6px}
.faint{opacity:.28}

/* ---- controlli ----------------------------------------------------------- */
.btn{--tick:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px);
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:var(--rule);background:var(--bg);
  color:var(--ink);font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.btn::before,.btn::after{content:"";width:14px;height:12px;background-image:var(--tick)}
.btn.plain::before,.btn.plain::after{display:none}
.btn:hover,.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--bg);color:var(--ink)}
.btn:disabled{cursor:progress;opacity:.5}
.btn.small{padding:5px 8px;font-size:11px;gap:6px}
.btn.small::before,.btn.small::after{width:8px;height:9px}
.link{background:none;border:0;padding:0;color:inherit;font:inherit;text-transform:inherit;
  letter-spacing:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

input,select,textarea{width:100%;background:var(--bg);color:var(--ink);border:var(--rule);border-radius:0;
  padding:8px 10px;font:400 13px/1.3 var(--mono);caret-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink);opacity:.55}
select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(var(--cal-invert,1))}
:root[data-theme="light"] input[type=date]{--cal-invert:0}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) input[type=date]{--cal-invert:0}}
input:focus,select:focus,textarea:focus{outline:1px solid var(--ink);outline-offset:2px}
textarea{min-height:90px;resize:vertical}
/* Safari su iPhone ingrandisce la pagina quando si tocca un campo sotto i 16px:
   sui dispositivi touch i campi stanno a 16px (lo zoom manuale resta libero). */
@media (pointer:coarse){input,select,textarea{font-size:16px}}
label.field{display:block}
label.field > span{display:block;margin-bottom:5px;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.form{display:grid;gap:12px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.err{min-height:18px;font:500 12px/1.4 var(--mono)}
.err:not(:empty)::before{content:"Errore: "}
.note{font:400 12px/1.55 var(--mono);max-width:72ch;margin:0 0 12px}
.empty{padding:18px 0;font:400 13px/1.5 var(--mono)}

/* ---- segnale di caricamento: una sola inversione per pagina ---------------- */
@media (prefers-reduced-motion:no-preference){
  body.flash{animation:negative 140ms steps(1) 1}
  @keyframes negative{0%{filter:invert(1)}100%{filter:none}}
  .scan{position:relative;overflow:hidden}
  .scan::after{content:"";position:absolute;inset:0 auto 0 -30%;width:30%;
    background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px);
    animation:scan 900ms cubic-bezier(.16,1,.3,1) infinite}
  @keyframes scan{to{left:100%}}
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .s3,.s4,.s5{grid-column:span 6}.s7,.s8{grid-column:span 12}
  .telemetry{display:none}
  .top-in{grid-template-columns:1fr auto auto}
}
@media (max-width:900px){   /* sei voci in riga non stanno accanto al marchio: vanno sotto */
  .top-in{grid-template-columns:1fr auto;gap:12px}
  .top-in .sections{grid-column:1 / -1;grid-row:2;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .top-in .sections a{justify-content:center;padding:11px 6px}
  .top-in .util{grid-row:1;grid-column:2}
}
@media (max-width:720px){
  .s3,.s4,.s5,.s6{grid-column:span 12}
  main{padding:16px}
  .top-in{padding:12px 16px}
  :root{--pad:12px;--gap:12px}
}