/* anthill — dashboard TV, tema scuro unico (schermo grande, stanza illuminata).
 *
 * Colori: palette di stato validata (good/warning/critical) su superficie scura,
 * contrasto >= 3:1 su entrambe le superfici usate qui. Tre soli livelli di
 * severita' di proposito: la coppia warning/serious della palette completa non
 * regge la lettura a distanza (delta E normale 13.6).
 * Il colore non porta mai da solo il significato: ogni barra ha etichetta e
 * valore numerico, ogni stato ha icona e parola.
 */

:root {
  color-scheme: dark;

  --plane: #0d0d0d;        /* piano pagina */
  --surface: #1a1a19;      /* superficie card */
  --surface-2: #222220;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --ink-muted: #898781;
  --hairline: #2c2c2a;
  --border: rgba(255, 255, 255, 0.10);

  /* stato: fill + traccia (gradino piu' chiaro dello stesso colore) */
  --good: #0ca30c;
  --good-track: rgba(12, 163, 12, 0.18);
  --warn: #fab219;
  --warn-track: rgba(250, 178, 25, 0.18);
  --crit: #d03b3b;
  --crit-track: rgba(208, 59, 59, 0.20);

  /* identita', non stato: marca l'account attivo */
  --accent: #3987e5;

  --gap: clamp(0.4rem, 1.1vh, 1rem);
  --radius: 0.6rem;
}

* { box-sizing: border-box; }

html {
  /* Scala con la dimensione dello schermo: la stessa pagina deve reggere un
     monitor da 1080p e una TV 4K senza intervento. Tarato per la lettura da
     lontano (divano, non scrivania): a 1080p il testo di base sta intorno ai
     27px. Il tetto alto serve alle TV che dichiarano 3840 px reali. */
  font-size: clamp(17px, 0.75vw + 1.15vh, 52px);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;              /* niente scroll: e' un pannello, non un documento */
  background: var(--plane);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tnum { font-variant-numeric: tabular-nums; }

.app {
  height: 100vh;
  height: 100dvh;                /* dvh dove supportato, vh come fallback */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--gap);
  padding: var(--gap) calc(var(--gap) * 1.4);
}

/* Righe assegnate esplicitamente: il banner e' spesso hidden, e un grid item
   con display:none non occupa la sua riga — senza questi vincoli il contenuto
   scala di una riga e la barra di stato si prende l'1fr. */
.topbar { grid-row: 1; }
.banner { grid-row: 2; }
.grid { grid-row: 3; }
.statusbar { grid-row: 4; }

/* --- barra superiore -------------------------------------------------------- */

.topbar {
  /* Titolo a sinistra, orologio al centro, conto alla rovescia a destra.
     Le due colonne 1fr ai lati tengono l'orologio centrato sullo schermo, non
     fra i suoi vicini. Tre colonne per tre figli: un numero diverso farebbe
     slittare tutto. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--gap) * 2);
  min-width: 0;
}
.topbar > .refresh { justify-self: end; }

.clock {
  font-size: clamp(1.7rem, 4.6vh, 3.4rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.brand-mark { font-size: 1.5rem; line-height: 1; }
.brand-name { font-size: 1.6rem; font-weight: 650; letter-spacing: 0.01em; }

.refresh { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.refresh-text { font-size: 1.2rem; font-weight: 620; color: var(--good); white-space: nowrap; }
.refresh-track {
  display: block;
  width: clamp(5rem, 11vw, 11rem);
  height: 6px;
  background: var(--good-track);
  border-radius: 3px;
  overflow: hidden;
}
.refresh-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--good);
  border-radius: 0 3px 3px 0;
}
/* Offline: il verde passa a giallo. Il conto alla rovescia continua, ma i dati
   non sono piu' freschi e si deve vedere. */
.refresh.is-offline .refresh-text { color: var(--warn); }
.refresh.is-offline .refresh-track { background: var(--warn-track); }
.refresh.is-offline .refresh-fill { background: var(--warn); }

/* --- banner di avviso ------------------------------------------------------- */

.banner {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  font-size: 1.05rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
}
.banner[hidden] { display: none; }
.banner.is-warn { border-color: var(--warn); background: var(--warn-track); color: var(--ink); }
.banner.is-crit { border-color: var(--crit); background: var(--crit-track); color: var(--ink); }

/* --- griglia principale ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 21vw, 20rem);
  gap: var(--gap);
  min-height: 0;
}

.cards {
  /* Tutte le card della stessa altezza, card consigliata compresa: una sola
     griglia con grid-auto-rows, cosi' vale a qualunque numero di account e non
     serve nessun rapporto da tenere aggiornato. */
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}

/* --- card di un account (una sola, identica per tutti) ---------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sev, var(--good));
  border-radius: var(--radius);
  padding: calc(var(--gap) * 0.6) calc(var(--gap) * 1.4);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--gap) * 0.4);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* Esaurito, disabilitato, senza dato: la card si spegne, ma resta leggibile. */
.card.is-out { opacity: 0.62; }

/* Identita' a sinistra, eventuali badge in alto a destra. */
.card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.8rem;
  min-width: 0;
}

/* Nome ed email sulla stessa riga: due righe non ci starebbero nell'altezza
   di una card, con i corpi tarati per la lettura da lontano. */
.card-line { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.card-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-mail {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-body {
  display: grid;
  /* Figura a larghezza fissa: le barre partono allo stesso x in tutte le card. */
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--gap) * 1.4);
  min-height: 0;
  min-width: 0;
}

.card-figure { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.card-value {
  /* Cifre proporzionali, non tabellari: a questo corpo le tabellari sembrano
     larghe. E' la figura che detta l'altezza della card. */
  font-size: clamp(1.9rem, 6.6vh, 4rem);
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--sev, var(--ink));
}
.card-unit { font-size: 1.15rem; color: var(--ink-2); margin-top: 0.25rem; }

/* --- meter ------------------------------------------------------------------ */

.meters-host { min-width: 0; height: 100%; }
.meters { display: grid; gap: calc(var(--gap) * 0.7); min-width: 0; }

/* I tre meter si distribuiscono sull'altezza disponibile della card: la
   riempiono invece di lasciare una banda vuota, e barre piu' alte si leggono
   da lontano. */
.meters-host .meters { height: 100%; align-content: space-evenly; }
.meters-host .meter-track { height: clamp(12px, 2.4vh, 30px); }

.meter {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) 3.4rem 4.8rem;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  /* Interlinea compressa: con i corpi grandi il line-height di default sprecava
     ~10px per barra, ed erano quelli che facevano sfondare la card. Si guadagna
     spazio senza rimpicciolire nulla. */
  line-height: 1.15;
}
.meter-label { font-size: 1.05rem; color: var(--ink-2); white-space: nowrap; }
.meter-track {
  position: relative;
  height: clamp(9px, 1.5vh, 20px);
  background: var(--sev-track, var(--good-track));
  border-radius: 0.25rem;
  overflow: visible;
}
.meter-fill {
  display: block;                /* uno span inline ignorerebbe width/height */
  height: 100%;
  width: 0;
  background: var(--sev, var(--good));
  border-radius: 0 0.25rem 0.25rem 0;  /* estremita' dato arrotondata, base quadra */
}
/* La formichina cammina sul bordo del riempimento delle 5 ore. Posizionata in
   assoluto, quindi non tocca l'altezza della riga anche se sporge dalla barra. */
.meter-ant {
  position: absolute;
  top: 50%;
  left: 0;
  /* Proporzioni del viewBox (32x22): larga piu' che alta. */
  width: clamp(26px, 5.3vh, 64px);
  height: clamp(18px, 3.7vh, 44px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ant {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--ink);
}
.ant .ant-stroke { stroke: var(--ink); stroke-width: 1.5; }

/* Morta: a zampe in su, rossa e con l'occhio a croce. */
.meter-ant.is-dead .ant { fill: var(--crit); transform: rotate(180deg); }
.meter-ant.is-dead .ant .ant-stroke { stroke: var(--crit); }
.meter-ant.is-dead .ant .ant-eye { stroke: var(--ink); stroke-width: 1.5; }

.meter-expected {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink-muted);
  border-radius: 1px;
}
.meter-value {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.meter-reset {
  font-size: 0.95rem;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Larghezza fissa: senza questo il testo del reset, che varia, sposta le
     colonne e le barre non si allineano piu' fra una riga e l'altra. */
  text-align: left;
}

/* --- badge ------------------------------------------------------------------ */

/* In alto a destra, fuori dalla colonna dei grafici: le barre restano lunghe
   uguali in tutte le card, con o senza badge. */
.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.badges:empty { display: none; }
.badge {
  font-size: 0.88rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge.is-crit { border-color: var(--crit); color: var(--crit); }
.badge.is-warn { border-color: var(--warn); color: var(--warn); }

/* --- colonna dei due widget ------------------------------------------------- */

.col-stats {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--gap) * 1.3) calc(var(--gap) * 1.4);
  display: grid;
  /* Etichetta in alto, numero nello spazio centrale, grafico e didascalia in
     basso: il riquadro si riempie da solo, a qualunque altezza. */
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  gap: calc(var(--gap) * 0.5);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.tile-label {
  margin: 0;
  align-self: start;
  font-size: 0.95rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tile-value {
  /* Grande, ma deliberatamente piu' piccolo della figura hero: in una vista c'e'
     un solo numero protagonista, ed e' la disponibilita' dell'account migliore
     (hero a 11vh, questo a 8.5vh). */
  margin: 0;
  font-size: clamp(2.4rem, 8.5vh, 5.5rem);
  font-weight: 660;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--sev, var(--ink));
  white-space: nowrap;
}

.tile-caption {
  margin: 0;
  align-self: end;
  font-size: 0.95rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Un segmento per account, in ordine di ranking: si vede a colpo d'occhio
   quanti sono verdi e quanti rossi. Separati da un vuoto, non da un bordo. */
.segments { display: flex; gap: 2px; width: 100%; }
.segment {
  flex: 1 1 0;
  height: clamp(10px, 1.6vh, 22px);
  border-radius: 0.2rem;
  background: var(--sev, var(--ink-muted));
  min-width: 0;
}

/* Avanzamento della finestra che sta per resettarsi (5 ore o 7 giorni). */
.window-meter { display: grid; width: 100%; }
.window-meter[hidden] { display: none; }
.window-track {
  display: block;
  height: clamp(6px, 1vh, 12px);
  background: var(--hairline);
  border-radius: 0.2rem;
  overflow: hidden;
}
.window-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 0 0.2rem 0.2rem 0;
}

/* --- barra di stato --------------------------------------------------------- */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--gap) * 0.5);
  font-size: 0.68rem;
  color: var(--ink-muted);
}
.logout { margin: 0; }
.logout-btn {
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
}
.logout-btn:hover, .logout-btn:focus-visible { color: var(--ink); border-color: var(--ink-muted); }

/* --- severita' -------------------------------------------------------------- */

.sev-good { --sev: var(--good); --sev-track: var(--good-track); }
.sev-warn { --sev: var(--warn); --sev-track: var(--warn-track); }
.sev-crit { --sev: var(--crit); --sev-track: var(--crit-track); }
.sev-none { --sev: var(--ink-muted); --sev-track: var(--hairline); }

/* --- pagina di login ------------------------------------------------------- */

.login-page {
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.login-card {
  width: min(24rem, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.login-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; font-weight: 650; }
.login-sub { margin: 0; font-size: 0.8rem; color: var(--ink-muted); }
.login-field { display: flex; flex-direction: column; gap: 0.3rem; }
.login-field label { font-size: 0.75rem; color: var(--ink-2); }
.login-field input {
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
.login-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 620;
  padding: 0.55rem 0.7rem;
  color: #0d0d0d;
  background: var(--ink-2);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}
.login-btn:hover, .login-btn:focus-visible { background: var(--ink); }
.login-error {
  margin: 0;
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--crit);
  background: var(--crit-track);
  color: var(--ink);
}

.noscript { padding: 1rem; color: var(--ink-2); font-size: 0.9rem; }

/* Nel widget del reset: chi resetta e a che ora, in grande. */
.tile-big {
  margin: 0;
  align-self: end;
  font-size: clamp(1.3rem, 3.6vh, 2.8rem);
  font-weight: 640;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-big .tile-big-time { color: var(--ink-2); }