/*
 * La console.
 *
 * Scritto a mano di proposito: niente Tailwind, niente build step. Il gateway
 * si mette online copiando file, e aggiungere npm a un servizio che emette
 * fatture significa aggiungere una cosa che si può rompere fra il codice e le
 * fatture.
 *
 * Due regole tenute per tutto il foglio:
 * 1. i numeri sono sempre tabulari e allineati a destra — colonne di importi
 *    che ballano si leggono male e si confrontano peggio;
 * 2. il colore vuol dire una cosa sola: stato. Non decora niente.
 */

:root {
  --sfondo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #fafbfc;
  --bordo: #e3e6ea;
  --bordo-forte: #d0d5dc;

  --testo: #1a1f36;
  --testo-2: #5c6779;
  /* Era #8a94a6, cioè 3,06:1 su bianco — sotto il 4,5 di AA. Non è un colore
     decorativo: ci stanno le etichette di ogni coppia chiave/valore, le
     intestazioni di colonna e tutto ciò che porta `.fioco`. Adesso 4,9:1. */
  --testo-3: #67717f;

  --accento: #5b53e8;
  --accento-piano: #eeedfd;
  --accento-testo: #ffffff;

  --verde: #0f7b45;
  --verde-piano: #e3f6ec;
  --giallo: #96650a;
  --giallo-piano: #fdf3dd;
  --rosso: #c0304a;
  --rosso-piano: #fdeaed;
  --blu: #0a5ec7;
  --blu-piano: #e6f0fd;
  --viola: #6b3fc4;
  --viola-piano: #f0eafc;

  --raggio: 10px;
  --raggio-s: 6px;
  --ombra: 0 1px 2px rgba(26, 31, 54, .06), 0 1px 3px rgba(26, 31, 54, .04);

  /* L'altezza di un comando: campi, tendine e bottoni. Lasciati liberi ognuno
     prendeva la sua — campo 39, tendina 37, data 41, bottone 32 — e in una riga
     di filtri si vedevano quattro cime diverse allineate solo in fondo. È la
     misura naturale del campo di testo (8+8 di padding, 21 di riga, 2 di bordo),
     scelta perché è quella che non cambia. */
  --altezza-comando: 39px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0f1117;
    --superficie: #171a22;
    --superficie-2: #1c2029;
    --bordo: #272c38;
    --bordo-forte: #363c4a;

    --testo: #e8eaf0;
    --testo-2: #9aa3b5;
    /* Era #6c7689: 3,80:1 sul fondo scuro, sotto AA come il gemello chiaro. */
    --testo-3: #98a1b2;

    --accento: #8b83ff;
    --accento-piano: #23214a;
    --accento-testo: #12121e;

    --verde: #4ecb8a;
    --verde-piano: #10301f;
    --giallo: #e2b45a;
    --giallo-piano: #33270c;
    --rosso: #ff7a90;
    --rosso-piano: #3a1520;
    --blu: #63a8ff;
    --blu-piano: #10254a;
    --viola: #b394ff;
    --viola-piano: #241a44;

    --ombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Impianto ───────────────────────────────────────────────────────────── */

.guscio { display: flex; min-height: 100vh; }

.fianco {
  width: 232px;
  flex: 0 0 232px;
  background: var(--superficie);
  border-right: 1px solid var(--bordo);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marchio {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
  font-weight: 650; letter-spacing: -.01em;
  color: var(--testo);
}
.marchio:hover { text-decoration: none; }
.marchio .bollo {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accento); color: var(--accento-testo);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

.voce {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: var(--raggio-s);
  color: var(--testo-2); font-weight: 500; font-size: 14px;
}
.voce:hover { background: var(--superficie-2); color: var(--testo); text-decoration: none; }
.voce.attiva { background: var(--accento-piano); color: var(--accento); font-weight: 600; }
.voce .pallino {
  min-width: 20px; padding: 0 6px; height: 19px; border-radius: 10px;
  background: var(--rosso-piano); color: var(--rosso);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

.fianco .piede { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--bordo); }
.fianco .piede small { color: var(--testo-3); display: block; }

.corpo { flex: 1; min-width: 0; padding: 28px 32px 64px; }

.intestazione {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.intestazione h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; font-weight: 650; }
.intestazione p { margin: 5px 0 0; color: var(--testo-2); font-size: 14px; max-width: 62ch; }
.azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ─── Superfici ──────────────────────────────────────────────────────────── */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.scheda + .scheda { margin-top: 18px; }
/* ...ma non quando sono celle di griglia. Lì la distanza la fa gia' il gap, e il
   margine per di piu' accorcia la scheda stirata e la spinge in basso: le quattro
   cifre affiancate finivano con la prima alta 18px piu' delle altre tre, allineate
   in fondo invece che in cima. Il margine serve solo a chi sta impilato dentro una
   colonna — le due schede di una colonna della scheda documento. */
.griglia > .scheda + .scheda { margin-top: 0; }
.scheda > h2 {
  margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--bordo);
  font-size: 14px; font-weight: 620; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.scheda > h2 small { font-weight: 450; color: var(--testo-3); }
.scheda .dentro { padding: 18px; }

.griglia { display: grid; gap: 18px; }
/* Una cella di griglia di suo non scende sotto la larghezza minima di quello che
   contiene: una scheda con dentro una tabella larga sfondava la colonna invece di
   lasciarla scorrere. Con min-width:0 comanda la griglia, e a scorrere è .scorri. */
.griglia > * { min-width: 0; }
.griglia.k4 { grid-template-columns: repeat(4, 1fr); }
.griglia.k3 { grid-template-columns: repeat(3, 1fr); }
.griglia.k2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .griglia.k4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .griglia.k3, .griglia.k2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .griglia.k4 { grid-template-columns: 1fr; }
  .fianco { display: none; }
  .corpo { padding: 20px 16px 48px; }
}

/* ─── Cifre ──────────────────────────────────────────────────────────────── */

.cifra { padding: 16px 18px; }
.cifra .etichetta {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--testo-3); font-weight: 600;
}
.cifra .valore {
  font-size: 27px; font-weight: 650; letter-spacing: -.025em;
  margin-top: 7px; font-variant-numeric: tabular-nums;
}
.cifra .sotto { margin-top: 5px; font-size: 13px; color: var(--testo-2); }

.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.su { color: var(--verde); }
.delta.giu { color: var(--rosso); }

/* ─── Stati ──────────────────────────────────────────────────────────────── */

.stato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 620; white-space: nowrap;
}
.stato::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.stato.emesso, .stato.consegnato, .stato.applicato { background: var(--verde-piano); color: var(--verde); }
.stato.in_coda { background: var(--viola-piano); color: var(--viola); }
.stato.in_corso { background: var(--blu-piano); color: var(--blu); }
.stato.sospeso, .stato.ignorato, .stato.orfano { background: var(--giallo-piano); color: var(--giallo); }
.stato.errore, .stato.fallito, .stato.rifiutato { background: var(--rosso-piano); color: var(--rosso); }
.stato.spenta { background: var(--superficie-2); color: var(--testo-3); }

/* ─── Tabelle ────────────────────────────────────────────────────────────── */

.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th {
  text-align: left; padding: 9px 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--testo-3); font-weight: 650;
  border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
.tabella td { padding: 11px 18px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--superficie-2); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Globali, non dentro `.tabella`. Erano dichiarate solo lì, e nei template ci
   sono 44 usi fuori: ogni uuid, ogni chiave di idempotenza, il testo di ogni
   errore. Cioè esattamente i valori che si copiano carattere per carattere,
   resi in sans proporzionale dove `l` e `1`, `0` e `O` si confondono. Due
   regole con un nome in DESIGN.md cadevano in silenzio da sempre. */
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--testo-2); }
.fioco { color: var(--testo-3); }
/* `.intestazione p` fissa 14px e vince per specificità: senza questa riga
   l'uuid sotto il titolo sarebbe l'unico carattere macchina fuori scala. */
.intestazione p.mono { font-size: 12.5px; }

/*
 * Una tabella non si stringe sotto il suo contenuto: le intestazioni e le
 * colonne di numeri non vanno a capo, e le colonne mono — indirizzi webhook,
 * testo dell'errore — sono lunghe di natura. Sotto una certa larghezza la
 * larghezza minima vinceva su width:100%, la tabella usciva dalla scheda e a
 * scorrere in orizzontale era tutta la pagina: il fianco scivolava via, perché
 * sticky tiene solo l'asse verticale.
 *
 * Il contenimento va messo attorno, non sulla tabella: qui scorre solo la
 * griglia, mentre titolo, filtri e paginazione della scheda restano fermi.
 * overscroll-behavior evita che arrivati in fondo alla tabella il gesto passi
 * al browser e diventi «pagina indietro» — su un trackpad succede da solo, e
 * perdere i filtri appena impostati per una scrollata di troppo è una seccatura.
 */
.scorri { overflow-x: auto; overscroll-behavior-x: contain; }

.vuoto { padding: 44px 18px; text-align: center; color: var(--testo-3); }
.vuoto strong { display: block; color: var(--testo-2); margin-bottom: 5px; font-size: 15px; }

/* ─── Comandi ────────────────────────────────────────────────────────────── */

/* `line-height` e `min-height` non sono rifiniture: senza, la stessa classe rende
   due altezze diverse. Il foglio del browser mette `line-height: normal` sui
   `<button>` e non sugli `<a>`, quindi «Salva» veniva 32px e «Tutte le
   applicazioni», identica a vederla, 36. E accanto a un campo da 39 erano
   entrambe sbagliate. */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--altezza-comando);
  padding: 7px 13px; border-radius: var(--raggio-s);
  border: 1px solid var(--bordo-forte); background: var(--superficie);
  color: var(--testo); font-size: 13.5px; font-weight: 570; line-height: 1.5;
  cursor: pointer; font-family: inherit;
}
.bottone:hover { background: var(--superficie-2); text-decoration: none; }
.bottone.pieno { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); }
.bottone.pieno:hover { filter: brightness(1.08); }
.bottone.pericolo { color: var(--rosso); border-color: var(--bordo-forte); }
.bottone.pericolo:hover { background: var(--rosso-piano); }
/* Il piccolo vive dentro le righe di tabella, dove un comando alto quanto un
   campo raddoppierebbe l'altezza della riga: rinuncia all'altezza comune. */
.bottone.piccolo { min-height: 0; padding: 4px 9px; font-size: 12.5px; }
.bottone[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Moduli ─────────────────────────────────────────────────────────────── */

.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.campo .aiuto { font-size: 12.5px; color: var(--testo-3); margin-top: 5px; }
.campo .errore { font-size: 12.5px; color: var(--rosso); margin-top: 5px; font-weight: 550; }

/* Per esclusione, non per elenco. L'elenco dei tipi da vestire lasciava fuori
   `number`, cioè i quattro campi numerici delle impostazioni, che rendevano col
   grigio del browser in mezzo ai campi del sistema. Sono i campi a dichiarare
   cosa *non* sono: così un tipo che Django inizia a produrre domani — email,
   tel, datetime-local — nasce già vestito, invece di aspettare che qualcuno se
   ne accorga guardando la pagina. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=range]):not([type=color]),
select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--testo);
  font: inherit; font-size: 14px;
  /* Un'altezza sola, altrimenti ognuno prende la sua: la tendina si stringe a 37
     perché la riga di un `<option>` è più corta, e il campo data si allarga a 41
     per fare posto al calendario del browser. In una riga di filtri diventavano
     tre cime diverse. `height` e non `min-height`: la data va anche riportata
     giù, non solo tirata su. */
  height: var(--altezza-comando);
}
/* Il testo lungo cresce: qui l'altezza comune e' un minimo, non una misura. */
textarea { height: auto; min-height: var(--altezza-comando); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-piano);
}
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accento); }
.campo.interruttore { display: flex; align-items: center; gap: 9px; }
.campo.interruttore label { margin: 0; }

.filtri {
  display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--bordo);
}
.filtri .campo { margin: 0; min-width: 130px; }
.filtri .campo.largo { flex: 1; min-width: 220px; }

/* ─── Avvisi ─────────────────────────────────────────────────────────────── */

.avviso {
  padding: 12px 15px; border-radius: var(--raggio);
  border: 1px solid var(--bordo); background: var(--superficie);
  font-size: 14px; margin-bottom: 16px;
  display: flex; gap: 11px; align-items: flex-start;
}
.avviso .segno { font-size: 15px; line-height: 1.4; }
.avviso.buono { background: var(--verde-piano); border-color: transparent; color: var(--verde); }
.avviso.attenzione { background: var(--giallo-piano); border-color: transparent; color: var(--giallo); }
.avviso.brutto { background: var(--rosso-piano); border-color: transparent; color: var(--rosso); }
.avviso strong { font-weight: 650; }
.avviso a { color: inherit; text-decoration: underline; }
/* Su schermi molto stretti un nome come CHIAVE_CIFRATURA è una parola sola e non
   va a capo: teneva aperto l'avviso e con lui la pagina. Meglio spezzarlo. */
.avviso > div { min-width: 0; }
.avviso code { overflow-wrap: anywhere; }

/* Il testo di un errore di FIC. Non usa `.mono` perché quella porta con sé
   `--testo-2`, che dentro il fascione rosso spegnerebbe il colore dello stato:
   qui il colore si eredita. `pre-wrap` perché un errore multilinea altrimenti
   collassa in un blocco corsa, e il tetto perché il taglio a 5000 caratteri del
   worker può produrre sessanta righe che spingono cifra, payload e storico
   sotto la piega — proprio mentre si cerca di capire cosa è successo. */
.avviso .testo-errore {
  margin-top: 5px; font-size: 13px; font-family: var(--mono); color: inherit;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 18em; overflow-y: auto;
}

/* ─── Segreti ────────────────────────────────────────────────────────────── */

.segreto {
  display: flex; gap: 9px; align-items: center;
  background: var(--superficie-2); border: 1px dashed var(--bordo-forte);
  border-radius: var(--raggio-s); padding: 11px 13px;
  font-family: var(--mono); font-size: 13px; word-break: break-all;
}
.segreto code { flex: 1; }

/* ─── Grafico ────────────────────────────────────────────────────────────── */

/* Stessa storia delle tabelle: dodici mesi con l'etichetta per esteso («gen 26»
   nel report) non stanno in una scheda stretta. Scorre il grafico, non la pagina. */
.grafico { display: flex; align-items: flex-end; gap: 6px; height: 168px; padding: 6px 0;
           overflow-x: auto; overscroll-behavior-x: contain; }
.grafico .colonna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                    align-items: center; gap: 7px; height: 100%; }
.grafico .barra {
  width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px;
  background: var(--accento); min-height: 3px; opacity: .88;
  transition: opacity .12s;
}
.grafico .colonna:hover .barra { opacity: 1; }
.grafico .colonna.zero .barra { background: var(--bordo-forte); }
.grafico .etichetta-mese { font-size: 11px; color: var(--testo-3); white-space: nowrap; }

.barretta { height: 6px; border-radius: 3px; background: var(--bordo); overflow: hidden; }
.barretta > span { display: block; height: 100%; background: var(--accento); border-radius: 3px; }

/* ─── JSON ───────────────────────────────────────────────────────────────── */

details.json { border-top: 1px solid var(--bordo); }
details.json > summary {
  padding: 11px 18px; cursor: pointer; font-size: 13.5px; font-weight: 570;
  color: var(--testo-2); list-style: none;
}
details.json > summary::-webkit-details-marker { display: none; }
details.json > summary::before { content: '▸ '; color: var(--testo-3); }
details.json[open] > summary::before { content: '▾ '; }
details.json > summary:hover { background: var(--superficie-2); }
details.json pre {
  margin: 0; padding: 14px 18px; background: var(--superficie-2);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  overflow-x: auto; color: var(--testo-2); border-top: 1px solid var(--bordo);
}

/* ─── Coppie etichetta/valore ────────────────────────────────────────────── */

.coppie { display: grid; grid-template-columns: 190px 1fr; gap: 0; font-size: 14px; margin: 0; }
.coppie dt {
  padding: 9px 0; color: var(--testo-3); font-size: 13px;
  border-bottom: 1px solid var(--bordo);
}
.coppie dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--bordo);
  word-break: break-word;
}
.coppie dt:last-of-type, .coppie dd:last-of-type { border-bottom: 0; }
@media (max-width: 700px) { .coppie { grid-template-columns: 1fr; } .coppie dt { border: 0; padding-bottom: 0; } }

/* ─── Pagine ─────────────────────────────────────────────────────────────── */

.paginazione {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px; border-top: 1px solid var(--bordo);
  font-size: 13.5px; color: var(--testo-2);
}

/* ─── Accesso ────────────────────────────────────────────────────────────── */

.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.accesso .scatola { width: 100%; max-width: 372px; }
.accesso .marchio { justify-content: center; padding-bottom: 22px; font-size: 17px; }