/* ==========================================================================
   SIMPLIX FLEET — quello che il tema del marchio non copre
   ==========================================================================
   `simplix-fleet.css` arriva da chi ha disegnato il marchio e si usa com'e':
   qui ci vanno solo i pezzi che il sito ha in piu' — la testata pubblica, la
   pagina di accesso, la scheda del mezzo. Niente di quello che c'e' gia'
   viene riscritto: sovrascrivere il tema vuol dire che il giorno che arriva
   una versione nuova le due cose litigano.
   ========================================================================== */

/* Testata del sito pubblico ------------------------------------------------ */
.sx-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sf-surface) 92%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--sf-border);
}

.sx-topbar__inner {
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: var(--sf-space-6);
}

.sx-topnav {
  margin-left: auto;
  display: flex;
  gap: var(--sf-space-6);
}

.sx-topnav a {
  color: var(--sf-text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.sx-topnav a:hover { color: var(--sf-blue-600); }

/* Apertura ----------------------------------------------------------------- */
.sx-hero-title { margin: 14px 0 18px; }

.sx-hero-azioni {
  margin-top: var(--sf-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-3);
}

/* Il pulsante secondario del tema e' pensato per fondo chiaro: sull'apertura
   scura sparirebbe. */
.sx-btn-chiaro {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
}

.sx-hero-scheda {
  display: grid;
  gap: var(--sf-space-3);
  padding: var(--sf-space-5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--sf-radius-xl);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.sx-hero-scheda__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-4);
  padding: 12px 14px;
  border-radius: var(--sf-radius-md);
  background: rgba(255,255,255,.90);
}

.sx-hero-scheda__targa {
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--sf-navy-900);
}

/* Dichiarato esempio, e scritto: un finto dato spacciato per vero e' il modo
   piu' rapido per far perdere fiducia alla prima verifica. */
.sx-hero-scheda__nota {
  margin: 4px 2px 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* Sezioni ------------------------------------------------------------------ */
.sx-sezione { padding: clamp(56px, 8vw, 96px) 0; }
.sx-sezione--soft { background: var(--sf-surface-soft); }

.sx-contenitore {
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
}

.sx-contenitore--stretto { max-width: 760px; }

.sx-sottotitolo {
  max-width: 68ch;
  margin: 10px 0 var(--sf-space-8);
  font-size: 15px;
}

.sx-feature { margin-top: var(--sf-space-6); }
.sx-feature .sf-title-md { margin: 0 0 8px; }
.sx-feature p { margin: 0; }

.sx-due {
  margin-top: var(--sf-space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sf-space-8);
}

.sx-testo { max-width: 68ch; }

/* Piede -------------------------------------------------------------------- */
.sx-footer {
  padding: var(--sf-space-10) 0;
  color: rgba(255,255,255,.72);
  background: var(--sf-gradient-hero);
}

.sx-footer__inner {
  display: flex;
  align-items: center;
  gap: var(--sf-space-5);
  flex-wrap: wrap;
}

.sx-footer__logo { height: 34px; width: auto; }
.sx-footer__nota { margin: 0; }

.sx-footer__link {
  margin-left: auto;
  color: #8BEAFF;
  font-weight: 700;
  text-decoration: none;
}

/* Accesso alla console ----------------------------------------------------- */
.sx-accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sf-space-6);
  background: var(--sf-gradient-hero);
}

.sx-accesso__scheda {
  width: min(100%, 420px);
  padding: var(--sf-space-8);
  border-radius: var(--sf-radius-xl);
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow-lg);
}

.sx-accesso__logo {
  height: 38px;
  width: auto;
  margin-bottom: var(--sf-space-6);
}

/* Avviso: una riga di testo rosso, al sole, e' la prima cosa che sparisce. */
.sx-avviso {
  margin: var(--sf-space-4) 0 0;
  padding: 12px 14px;
  border: 1px solid #FCA5A5;
  border-radius: var(--sf-radius-sm);
  background: #FEE2E2;
  color: #991B1B;
  font-size: 14px;
  font-weight: 600;
}

.sx-avviso--vuoto { display: none; }

/* Console ------------------------------------------------------------------ */
.sx-riga-strumenti {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--sf-space-5);
}

/* Ricerca e filtro sulla stessa riga: il campo del tema e' largo quanto la
   riga, e da solo manderebbe il filtro a capo. */
.sx-riga-strumenti .sf-input { flex: 1 1 260px; max-width: 420px; }
.sx-riga-strumenti .sf-select { flex: 0 0 220px; }

.sx-spinta { margin-left: auto; }

.sx-utente {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sf-space-4);
}

.sx-utente__nome { font-weight: 700; }

.sf-table tbody tr[data-mezzo] { cursor: pointer; }

.sx-vuoto {
  padding: var(--sf-space-10) var(--sf-space-5);
  text-align: center;
  color: var(--sf-text-secondary);
}

.sx-vuoto h3 { margin: 0 0 8px; color: var(--sf-text); }

/* Scheda del mezzo --------------------------------------------------------- */
.sx-scheda {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sf-space-5);
  align-items: start;
}

.sx-campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sf-space-4);
}

.sx-dati {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sf-space-4);
  margin: 0;
}

.sx-dati dt {
  color: var(--sf-text-secondary);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sx-dati dd {
  margin: 3px 0 0;
  font-weight: 600;
  /* Targhe, chilometri e date in colonna: le cifre devono incolonnarsi. */
  font-variant-numeric: tabular-nums;
}

.sx-elenco-documenti { display: grid; gap: var(--sf-space-3); }

/* Va a capo invece di stringersi: nella colonna stretta della scheda, il
   numero del documento e la data si spezzavano su tre righe per far posto
   alla pastiglia. */
.sx-documento {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sf-space-3) var(--sf-space-3);
  padding: 12px 14px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
}

/* Il testo prende tutta la riga, pastiglia e pulsante vanno sotto: cosi'
   tutti i documenti hanno la stessa forma, che sia lungo o corto. */
.sx-documento__testo { flex: 1 1 100%; min-width: 0; }
.sx-documento__tipo { font-weight: 700; text-transform: capitalize; }
.sx-documento__nota { color: var(--sf-text-secondary); font-size: 13px; }
.sx-documento .sf-btn { margin-left: auto; }

.sx-torna {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sf-space-4);
  color: var(--sf-text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.sx-titolo-riga {
  display: flex;
  align-items: center;
  gap: var(--sf-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--sf-space-5);
}

.sx-titolo-riga h1 { margin: 0; }

.sx-giorni { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* `revisione`, `assicurazione`: nel database sono minuscole perche' le
   scrive chi compila, in tabella si leggono come titoli. */
.sx-titolo-scadenza::first-letter { text-transform: uppercase; }

@media (max-width: 1100px) {
  .sx-scheda { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .sx-topnav { display: none; }
  .sx-due { grid-template-columns: 1fr; }
  .sx-campi { grid-template-columns: 1fr; }
  .sx-topbar__inner,
  .sx-contenitore { width: min(100% - 32px, 1280px); }
}

/* La barra in basso del tema e' disegnata per cinque voci; qui sono tre. */
@media (max-width: 860px) {
  .sf-bottom-nav { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   `hidden` deve vincere sul `display`.
   --------------------------------------------------------------------------
   `hidden` e' un attributo, e vale quanto una regola dell'autore: il
   `display: grid` di `.sf-app` e di `.sx-accesso` lo batte. Senza questa
   riga accesso e console stanno **tutti e due** nella pagina, uno sopra
   l'altro — e siccome l'accesso e' alto quanto lo schermo, dopo essere
   entrati si continua a vedere il modulo di accesso e la console resta
   sotto, fuori dalla vista.                                                */
[hidden] { display: none !important; }

/* Testata della console sul telefono ---------------------------------------
   Nome, ruolo e «Esci» in fila non ci stanno in 390 punti: il ruolo sparisce
   (lo si e' appena letto entrando) e il nome si accorcia, cosi' «Esci» resta
   raggiungibile e la pagina non scorre di lato.                            */
@media (max-width: 620px) {
  .sx-utente { gap: var(--sf-space-3); min-width: 0; }
  .sx-utente .sf-status { display: none; }
  .sx-utente__nome {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}