/* La dashboard delle flotte di evvai.app (flotte.evvai.app). Lo stile di
   assets/admin/admin.css, design system v2: lime, inchiostro, crema; Inter Tight
   per i testi, JetBrains Mono per numeri e targhe. Telefono prima, menu laterale
   da 960 px; tema scuro quando lo chiede il sistema. */

@font-face { font-family: 'Inter Tight'; src: url('/fonts/InterTight-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/InterTight-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/InterTight-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --lime: #7FE84B;
  --inchiostro: #0F1410;
  --crema: #F6F3EC;
  --corallo: #FF7A59;
  --sole: #FFF4CC;
  --fondo: var(--crema);
  --carta: #FFFFFF;
  --testo: var(--inchiostro);
  --attenuato: #5C665E;
  --linea: #E1DED5;
  --ok: #2F7A12;
  --ok-tinta: #EAF9DF;
  --avviso: #B5432A;
  --avviso-tinta: #FFEDE7;
  --spento-tinta: #EFEDE7;
  --evidenza: var(--sole);
  --pulsante: var(--inchiostro);
  --pulsante-testo: var(--crema);
  --alto-testata: 58px;
  --raggio: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0B0F0C;
    --carta: #151B16;
    --testo: #F6F3EC;
    --attenuato: #9AA59C;
    --linea: #263027;
    --ok: #9BEF6E;
    --ok-tinta: #1D2E14;
    --avviso: #FF9D84;
    --avviso-tinta: #3A1D15;
    --spento-tinta: #1E241F;
    --evidenza: #3A3417;
    --pulsante: var(--lime);
    --pulsante-testo: var(--inchiostro);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font: 400 15px/1.45 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { letter-spacing: -0.01em; }
[hidden] { display: none !important; }

/* ─── Testata e menu ─── */
.cima { position: sticky; top: 0; z-index: 3; }
.testata {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-testata);
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--inchiostro);
  color: var(--crema);
}
.marchio { display: flex; }
.marchio img, .testata > img { display: block; width: 64px; height: auto; }
.etichetta-flotte { font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); }
.azienda { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.chi { margin-left: auto; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #B7C0B9; }
.testata .esci { margin-left: 8px; padding: 6px 12px; border: 1px solid #3A443C; border-radius: 10px; background: transparent; color: var(--crema); font-size: 13px; }

.schede {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--carta);
  border-bottom: 1px solid var(--linea);
  scrollbar-width: none;
}
.schede::-webkit-scrollbar { display: none; }
.schede a {
  flex: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--attenuato);
  text-decoration: none;
  white-space: nowrap;
}
.schede a:hover { color: var(--testo); background: var(--spento-tinta); }
.schede a.attiva { color: var(--inchiostro); background: var(--lime); }
.lingua { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; padding-left: 8px; font-size: 12.5px; color: var(--attenuato); }
.lingua select { padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--carta); color: var(--testo); font: inherit; font-size: 13px; }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px 16px 48px; }
main:focus { outline: none; }

@media (min-width: 960px) {
  body { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cima { display: contents; }
  .testata { position: sticky; top: 0; z-index: 3; grid-column: 1 / -1; }
  .schede {
    position: sticky;
    top: var(--alto-testata);
    grid-column: 1;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    height: calc(100vh - var(--alto-testata));
    padding: 16px 12px;
    overflow: auto;
    border-bottom: 0;
    border-right: 1px solid var(--linea);
  }
  .schede a { border-radius: 10px; }
  .lingua { margin: auto 0 0; padding: 12px 4px 0; border-top: 1px solid var(--linea); }
  main { grid-column: 2; padding: 24px 32px 64px; }
}

/* ─── Blocchi ─── */
.testata-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 4px 0 16px; }
.testata-pagina h1 { margin: 0; font-weight: 800; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.testata-pagina .sotto { margin: 4px 0 0; color: var(--attenuato); overflow-wrap: anywhere; }

.banner-sospesa { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--avviso-tinta); color: var(--avviso); font-weight: 600; }

.riquadro {
  min-width: 0;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
}
.riquadro h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.riquadro > a { display: inline-block; margin-top: 8px; font-size: 14px; }

.cifre { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin: 0 0 8px; }
.cifra { min-width: 0; }
.cifra dt { font-size: 12.5px; color: var(--attenuato); }
.cifra dd { margin: 2px 0 0; font: 600 16px/1.3 'Inter Tight', system-ui, -apple-system, sans-serif; overflow-wrap: anywhere; }
.cifra .nota { margin: 2px 0 0; }
.cifra.tono-ok dd { color: var(--ok); }
.cifra.tono-avviso dd { color: var(--avviso); }

.nota { margin: 8px 0 0; font-size: 13px; color: var(--attenuato); }
.vuoto { margin: 0; color: var(--attenuato); }
.caricamento { color: var(--attenuato); }
.piccolo { font-size: 12.5px; color: var(--attenuato); }
.blocco { display: block; }
.avviso { color: var(--avviso); }

.etichetta {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--spento-tinta);
  color: var(--attenuato);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.etichetta.tono-ok { background: var(--ok-tinta); color: var(--ok); }
.etichetta.tono-avviso { background: var(--avviso-tinta); color: var(--avviso); }

/* La targa come sul veicolo: carattere dei numeri, bordo pieno. */
.targa {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 1px 7px;
  border: 2px solid var(--testo);
  border-radius: 6px;
  background: var(--carta);
  font: 500 13px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.in-evidenza { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--evidenza); color: var(--testo); font-size: 13px; white-space: normal; }

/* ─── Moduli ─── */
.modulo { display: grid; gap: 12px; }
.modulo fieldset, .editor-ruolo fieldset { margin: 0; padding: 0; border: 0; }
.modulo legend, .editor-ruolo legend { margin-bottom: 6px; font-size: 12.5px; color: var(--attenuato); }
.esito p { margin: 4px 0 0; }
.filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.campo { display: grid; flex: 1 1 160px; gap: 4px; font-size: 12.5px; color: var(--attenuato); }
.campo input, .campo select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--carta);
  color: var(--testo);
  font: inherit;
  font-size: 15px;
}
select { font: inherit; }
td select { padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--carta); color: var(--testo); font-size: 14px; }
button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--pulsante);
  color: var(--pulsante-testo);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: progress; }
button.pericolo { background: var(--avviso-tinta); color: var(--avviso); }
button.link { padding: 8px 0; background: none; color: var(--testo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.azioni-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.azioni-riga button { padding: 7px 12px; font-size: 14px; }
.caselle { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.casella { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.editor-ruolo { display: grid; gap: 12px; }
details.modifica { margin-top: 8px; }
details.modifica summary { cursor: pointer; font-size: 14px; font-weight: 600; }
details.modifica[open] { min-width: 280px; padding: 10px 0 4px; white-space: normal; }
.notizia { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--ok-tinta); color: var(--ok); font-weight: 600; }
.notizia.tono-avviso { background: var(--avviso-tinta); color: var(--avviso); }

/* ─── Tabelle ─── */
.tabella-scorre { margin: 0 -16px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
  color: var(--attenuato);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; white-space: nowrap; }
td.lungo { min-width: 220px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
td.azioni { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.paginatore { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 24px; font-size: 14px; color: var(--attenuato); }

/* ─── Veicoli: una scheda per targa ─── */
.schede-veicoli { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 16px; }
.scheda-veicolo { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; }
.scheda-veicolo .targa { align-self: flex-start; font-size: 15px; }
.scheda-veicolo p { margin: 0; overflow-wrap: anywhere; }
.scheda-veicolo .azioni-riga { margin-top: 8px; }

@media (max-width: 480px) {
  .testata-pagina h1 { font-size: 22px; }
  .riquadro { padding: 14px; }
  .azienda { display: none; }
}

/* ─── Pagina d'accesso ─── */
body.pagina-accesso { display: block; }
.pagina-accesso .testata { position: static; }
main.accesso { max-width: 460px; padding-top: 28px; }
.scheda-accesso h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; line-height: 1.2; }
.scheda-accesso .sotto { margin: 0 0 16px; color: var(--attenuato); overflow-wrap: anywhere; }
.scheda-accesso h2 { margin: 18px 0 4px; font-size: 15px; font-weight: 600; }
.modulo-accesso { display: grid; gap: 12px; }
.modulo-accesso .campo { flex: none; }
.modulo-accesso .avviso { margin: 0; }
.lingua-altra { display: block; margin: 0 auto; font-size: 14px; }
.qr { margin: 0; padding: 12px; width: max-content; max-width: 100%; background: #FFFFFF; border-radius: 12px; }
.qr img { display: block; width: 220px; max-width: 100%; height: auto; }
.pulsante-secondario { display: inline-block; justify-self: start; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 12px; font-weight: 600; text-decoration: none; }
.chiave { margin: 8px 0 0; font: 500 15px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.codici-riserva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 16px; padding: 0; list-style-position: inside; font: 500 16px/1.5 'JetBrains Mono', ui-monospace, monospace; }
.conferma-semplice { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; }