/* NetGuardian — il foglio condiviso (17 ottobre 2026)
 *
 * Perché esiste: `docs/GRAFICA-E-ACCESSI.md` (17 agosto) ha misurato che **ogni
 * pagina dichiara la propria tavolozza**. Al 17 ottobre sono 16 pagine su 18, e
 * sono **cinque tavolozze diverse** — ma, verificato, con gli **stessi colori**:
 * cambia solo quali variabili ognuna si dichiara. Quindi una tavolozza sola,
 * con l'unione di tutte e tredici, copre ogni pagina senza cambiarne l'aspetto.
 *
 * E da qui si può scegliere il tema: con i colori in un posto solo, il chiaro è
 * **una tavolozza in più**, non sedici modifiche.
 *
 *   <html data-tema="chiaro">   ← il tema chiaro
 *   <html>                      ← il tema scuro, quello di sempre
 *
 * Il tema lo accende `tema.js` (un modulo, non uno script dentro l'HTML: la CSP
 * di nginx serve `script-src 'self'` e un `<script>` scritto nella pagina il
 * browser lo ignorerebbe in silenzio — c'è anche un test che lo impedisce).
 *
 * ⚠️ **Non è finito.** Restano 106 colori scritti a mano dentro le pagine
 * (soprattutto i veli dei badge, tipo `rgba(16,185,129,.15)`, e due
 * `color-scheme: dark`): sul chiaro quei veli sono troppo tenui e vanno
 * rinforzati. Si spostano qui una pagina alla volta, guardandoli. Fino ad
 * allora il tema chiaro è **una scelta**, non il predefinito.
 */

/* ─── Il carattere ───────────────────────────────────────────────────────────
   Le pagine chiedono Inter da sempre, ma nessuna lo caricava: finivano col
   carattere di sistema, diverso da computer a computer. Adesso i file stanno
   sul server (font-src 'self' lo permette): niente richieste esterne, niente
   dipendenze da Google, e tutte le pagine uguali ovunque.
   È un font variabile: un file solo copre dal normale (400) al neretto (800). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Il carattere tecnico (indirizzi MAC, codici, chiavi): richiesto da dodici
   pagine ma mai caricato — stessa cura di Inter, stesso posto. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── La tavolozza ────────────────────────────────────────────────────────────
   Stessa grafica del pannello Conjunx (app.conjunx.com): blu come accento,
   fondo grigio chiarissimo, pannelli bianchi nei due temi. */
:root {
  --fondo: #020617;
  --pannello: #0f172a;
  --pannello-2: #1e293b;
  --bordo: #334155;
  --testo: #e2e8f0;
  --tenue: #94a3b8;
  --spento: #64748b;
  --accento: #3b82f6;
  --verde: #22c55e;
  --ambra: #f59e0b;
  --rosso: #ef4444;
  --arancio: #f97316;
  --viola: #8b5cf6;
  /* Il testo sopra un pulsante colorato. Su fondo scuro e' quasi nero, come oggi. */
  --su-accento: #ffffff;
  /* Accenti chiari accanto ai nomi (linee, stati): sul scuro stanno bene. */
  --accento-2: #38bdf8;
  --allarme-tenue: #fca5a5;
  color-scheme: dark;
}

/* Il tema chiaro, come il pannello Conjunx: fondo grigio tenue, pannelli
   bianchi, bordi morbidi. I colori dei dati restano scuri: su bianco il rosso
   #ef4444 sta a 3,7:1, sotto la soglia di leggibilità — sul chiaro il rosso
   diventa #dc2626, e così ambra, verde, arancio e accento, ognuno scurito. */
[data-tema="chiaro"] {
  --fondo: #f8fafc;
  --pannello: #ffffff;
  --pannello-2: #f1f5f9;
  --bordo: #e2e8f0;
  --testo: #0f172a;
  --tenue: #475569;
  --spento: #94a3b8;
  --accento: #2563eb;
  --verde: #16a34a;
  --ambra: #d97706;
  --rosso: #dc2626;
  --arancio: #ea580c;
  --viola: #7c3aed;
  --su-accento: #ffffff;
  /* Sul chiaro gli stessi due accenti vanno scuriti, o non si vedono. */
  --accento-2: #0369a1;
  --allarme-tenue: #b91c1c;
  color-scheme: light;
}

/* ─── I contatori ────────────────────────────────────────────────────────────
   Sono la stessa informazione della riga di riepilogo, ma si vede e si tocca.
   Ognuno è un `<button>` perché ognuno è un filtro: un contatore che non porta
   da nessuna parte è un numero che si smette di guardare dopo la seconda volta. */
.contatori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.contatore {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--pannello);
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.contatore:hover {
  border-color: var(--accento);
  background: var(--pannello-2);
  transform: translateY(-1px);
}

.contatore:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

.contatore .numero {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  /* Le cifre a larghezza fissa non ballano quando il numero cambia. */
  font-variant-numeric: tabular-nums;
}

.contatore .etichetta {
  font-size: 14px;
  color: var(--tenue);
}

/* Il contatore delle cose da guardare: è l'unico che ha diritto al colore. */
.contatore.grave .numero { color: var(--arancio); }
.contatore.grave { border-color: var(--arancio); }

/* Gli informativi e i chiusi: presenti, ma in secondo piano. */
.contatore.tenue .numero { color: var(--spento); }

/* Il filtro che il contatore ha appena applicato: si vede che è acceso. */
.contatore.attivo {
  border-color: var(--accento);
  background: var(--pannello-2);
}

/* ─── Il pulsante del tema ───────────────────────────────────────────────────
   Sta in un angolo e non dentro la barra: la barra è scritta a mano in ogni
   pagina, e infilarlo lì significherebbe sedici modifiche per una cosa che
   deve solo esserci. */
.tema-pulsante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--pannello);
  color: var(--testo);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: border-color 150ms ease;
}

.tema-pulsante:hover { border-color: var(--accento); }
.tema-pulsante:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* L'icona è disegnata con `currentColor`: prende il colore del testo, quindi
   funziona in tutti e due i temi senza una regola in più. */
.tema-pulsante svg { width: 16px; height: 16px; flex: none; }

/* ─── Solo per chi legge con lo schermo ─────────────────────────────────────
   La frase estesa resta nel documento — è l'etichetta che uno schermo legge —
   ma non occupa spazio accanto ai contatori che la dicono già in grande. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .contatore { transition: none; }
  .contatore:hover { transform: none; }
  .tema-pulsante { transition: none; }
}

/* ─── Le icone ───────────────────────────────────────────────────────────────
   Disegnate in CSS con `mask` e `currentColor`: prendono il colore del testo,
   quindi funzionano in tutti e due i temi senza una regola in più, non sono
   immagini esterne (niente 404, niente file da copiare) e non richiedono
   `innerHTML` — che in questo prodotto è vietato da un test.
   Il disegno è un SVG in linea nella `mask`: serve solo la sua FORMA, il
   colore lo dà `background-color`.
   ⚠️ `img-src 'self' data:` nella CSP: le maschere `data:` sono ammesse. */
.icona {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.85;
}
/* Il nome del contatore: icona e parola sulla stessa riga, allineate al centro.
   Solo `.kpi .eti` — non tocca le altre liste. */
.kpi .eti {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icona-rete {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c3 3 4 6 4 10s-1 7-4 10c-3-3-4-6-4-10s1-7 4-10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c3 3 4 6 4 10s-1 7-4 10c-3-3-4-6-4-10s1-7 4-10'/%3E%3C/svg%3E");
}

.icona-dispositivi {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
}

.icona-sicurezza {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E");
}

.icona-sistema {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E");
}

/* Il contachilometri: la lancetta e il numero. Anche qui i colori sono variabili,
   quindi segue il tema senza una regola in più. */
.contachilometri { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.numero-chilo { font-size: 24px; font-weight: 700; fill: var(--testo); font-variant-numeric: tabular-nums; }

/* Un valore che si può cliccare: filtra l'inventario su di sé.
   Sembra testo finché non ci passi sopra — un inventario pieno di bottoni
   sarebbe illeggibile, e questo deve restare un elenco che si legge. */
.filtro-inline {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.filtro-inline:hover { border-bottom-color: var(--accento); color: var(--accento); }
.filtro-inline:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ─── L'intestazione del giorno nel registro ────────────────────────────────
   Un registro è una cronologia: il giorno è l'unità con cui lo si legge, e
   deve staccarsi dal resto senza essere un titolo. */
tr.giorno td {
  padding: 14px 8px 6px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
  background: var(--pannello-2);
}

/* ─── Le voci dei menu a tendina ────────────────────────────────────────────
   L'elenco che si apre da un `<select>` lo disegna il sistema operativo, non il
   foglio di stile: senza colori dichiarati, la riga evidenziata prende il colore
   di sistema e sul tema scuro diventa scura su scuro — la voce sotto il dito non
   si legge, che è il momento peggiore per non leggere.
   Dichiararli qui vale per tutte le pagine e per tutti e due i temi. */
select option {
  background-color: var(--pannello);
  color: var(--testo);
}
select option:checked,
select option:focus {
  background-color: var(--accento);
  color: var(--su-accento);
}