/* Console MyFitEvo — grafica approvata da Ivan (S03, docs/05-decisioni.md). */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --barra: #0f2540;
  --barra-bordo: #0a1a2e;
  --barra-attiva: #16314f;
  --barra-testo: #c9d6e5;
  --barra-accento: #8fb8e6;
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --bordo: #e2e5ea;
  --bordo-leggero: #eceef2;
  --testo: #16202e;
  --titolo: #0d1726;
  --testo-tenue: #5a6473;
  --primario: #1b4f8a;
  --primario-scuro: #123a66;
  --ok: #18643b;
  --ok-fondo: #e7f4ec;
  --info: #1b4f8a;
  --info-fondo: #e8f0f9;
  --attenzione: #8a4b06;
  --attenzione-fondo: #fdf1df;
  --pericolo: #a3201a;
  --pericolo-fondo: #fdeceb;
  --neutro: #4a5462;
  --neutro-fondo: #eef0f3;
  --carattere: "Geist", system-ui, sans-serif;
  --carattere-mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--primario); }
a:hover { color: var(--primario-scuro); }

.mono { font-family: var(--carattere-mono); }
.tenue { color: var(--testo-tenue); }
.nascosto { position: absolute; left: -9999px; }

/* Barra superiore */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  min-height: 56px;
  padding: 0 24px;
  background: var(--barra);
  border-bottom: 1px solid var(--barra-bordo);
  color: #ffffff;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  color: #ffffff;
  text-decoration: none;
}

.marchio:hover { color: #ffffff; }
.marchio strong { font-size: 15px; }
.marchio span { font-size: 12px; color: #a9bdd4; border-left: 1px solid #2b4a6f; padding-left: 10px; }

.menu { display: flex; flex-wrap: wrap; flex: 1 1 560px; align-self: stretch; }

.menu a, .menu span {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--barra-testo);
  border-bottom: 2px solid transparent;
}

.menu a[aria-current="page"] {
  color: #ffffff;
  font-weight: 600;
  background: var(--barra-attiva);
  border-bottom-color: var(--barra-accento);
}

.menu span[aria-disabled="true"] { color: #7f93aa; cursor: default; }

/* Intestazione di pagina */
.intestazione { background: var(--superficie); border-bottom: 1px solid var(--bordo); }

.intestazione-dentro, .contenuto {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 32px;
}

.intestazione-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.intestazione h1 { margin: 4px 0 0; font-size: 22px; font-weight: 600; color: var(--titolo); }
.sopratitolo { font-size: 12px; color: var(--testo-tenue); }

.contenuto { padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }

/* Riquadri */
.riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 8px; }

.riquadro > h2 {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordo-leggero);
  font-size: 14px;
  font-weight: 600;
}

.riepilogo { display: flex; flex-wrap: wrap; }

.riepilogo > div {
  flex: 1 1 180px;
  padding: 16px 20px;
  border-right: 1px solid var(--bordo-leggero);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.riepilogo > div:last-child { border-right: 0; }
.riepilogo .etichetta { font-size: 12px; color: var(--testo-tenue); }
.riepilogo .valore { font-family: var(--carattere-mono); font-size: 24px; font-weight: 500; }

/* Tabelle */
.scorre { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--testo-tenue); background: #fafbfc; padding: 10px 16px; }
td { padding: 12px 16px; border-top: 1px solid var(--bordo-leggero); }

.vuoto { padding: 40px 16px; text-align: center; color: var(--testo-tenue); }

/* Stati */
.stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.stato::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.stato-ok { color: var(--ok); background: var(--ok-fondo); }
.stato-info { color: var(--info); background: var(--info-fondo); }
.stato-attenzione { color: var(--attenzione); background: var(--attenzione-fondo); }
.stato-pericolo { color: var(--pericolo); background: var(--pericolo-fondo); }
.stato-neutro { color: var(--neutro); background: var(--neutro-fondo); }

/* Pulsanti */
.pulsante {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #cfd5dd;
  border-radius: 6px;
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.pulsante-primario { background: var(--primario); border-color: var(--primario); color: #ffffff; font-weight: 600; }
.pulsante-stop { background: var(--pericolo); border-color: var(--pericolo); color: #ffffff; font-weight: 600; }

/* Pagine di accesso */
.accesso { display: flex; justify-content: center; padding: 56px 16px; }
.scheda-accesso { width: 100%; max-width: 420px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.scheda-accesso h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--titolo); }

/* Moduli */
.modulo { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; }
.campo .aiuto { font-size: 12px; color: var(--testo-tenue); }
.campo input, .campo select, .campo textarea {
  height: 40px; padding: 0 12px; border: 1px solid #cfd5dd; border-radius: 6px;
  font: inherit; font-size: 14px; background: var(--superficie); color: var(--testo);
}
.campo textarea { height: auto; min-height: 88px; padding: 10px 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
.spunta { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.spunta input { width: 18px; height: 18px; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 20px; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Messaggi */
.avviso { padding: 10px 14px; border-radius: 6px; font-size: 13px; border: 1px solid; }
.avviso-errore { background: var(--pericolo-fondo); color: var(--pericolo); border-color: #f1c2bf; }
.avviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: #bfe0cb; }
.avviso-info { background: var(--info-fondo); color: var(--primario-scuro); border-color: #c9dbef; }
.validation-summary-valid { display: none; }
.field-validation-error { color: var(--pericolo); font-size: 12px; }

/* Utente in alto a destra */
.utente-barra { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-left: auto; font-size: 13px; }
.utente-barra .chi { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.utente-barra .chi small { color: #a9bdd4; font-size: 11px; }
.utente-barra a, .utente-barra button { color: #c9d6e5; font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer; padding: 8px 6px; text-decoration: none; }
.utente-barra a:hover, .utente-barra button:hover { color: #ffffff; }

.codici { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-family: var(--carattere-mono); font-size: 14px; }
.qr svg { width: 200px; height: 200px; }
dl.dettagli { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; padding: 16px; }
dl.dettagli dt { font-size: 12px; color: var(--testo-tenue); }
dl.dettagli dd { margin: 4px 0 0; }
.paginazione { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--bordo-leggero); font-size: 13px; }