/**
 * Quello che 2joy aggiunge allo stile di dossiero.
 *
 * Il grosso arriva dal kit (01-token, 02-base, 03-componenti): card, bottoni,
 * tabelle, badge, interruttori, il cassetto sul telefono. Qui dentro ci sono
 * solo le cose che in dossiero non esistono, e nessuna di queste riga scrive un
 * colore a mano: si usano le variabili, cosi' il tema chiaro viene gratis.
 */

/* ============ la porta ============ */
.pagina-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
}
.login-scatola { width: min(380px, 100%); }
.login-testa { margin-bottom: 18px; text-align: center; }
.login-testa .brand-title { font-size: 34px; letter-spacing: -0.04em; }

/* ============ il tasto che serve davvero ============ */
/* Chi ha il telefono in mano e' li' per inserire, non per navigare: il tasto lo
   segue in fondo allo schermo, sopra la tacca. Su schermo grande torna in alto
   a destra, dove non copre l'ultima riga di una tabella. */
.tasto-nuovo {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  box-shadow: var(--shadow);
}
.chi-sei { white-space: nowrap; }
@media (max-width: 720px) {
  .chi-sei { display: none; }          /* il nome lo sa gia' chi e' entrato */
  .content { padding-bottom: 86px; }   /* spazio sotto per il tasto */
}

/* ============ i punti di oggi ============ */
/* Tre bottoni grandi, non un menu a tendina: con i guanti addosso la differenza
   fra un tocco e una ricerca e' tutta qui. */
.punti { display: grid; gap: 10px; }
.punto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-muted);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.punto:hover { border-color: var(--accent); }
.punto.is-scelto {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.punto b { display: block; font-size: 16px; }
.punto small { color: var(--muted); }
.punto-avanzamento { flex: 0 0 auto; color: var(--muted); font-size: 13px; text-align: right; }
.punto-avanzamento b { font-size: 18px; color: var(--text); }

/* ============ la targa ============ */
/* Grande, maiuscola e spaziata: si legge da un metro e si controlla a colpo
   d'occhio di aver battuto quella giusta. */
.campo-targa {
  height: 60px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.campo-seriale { font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ============ gli avvisi sulla targa ============ */
/* Compaiono appena scritta la targa, come faceva il bot. Non bloccano niente:
   chi e' davanti alla macchina sa cose che il database non sa. */
.avvisi { display: grid; gap: 8px; margin-top: 10px; }
.avvisi:empty { display: none; }

/* ============ i tipi di intervento ============ */
.tipi { display: grid; gap: 10px; }
@media (min-width: 720px) { .tipi { grid-template-columns: repeat(2, 1fr); } }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo {
  display: block;
  position: relative;
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-muted);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.tipo:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.tipo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tipo small { display: block; color: var(--muted); font-weight: 400; }

/* ============ il lettore del QR ============ */
/* La finestra e' quella della fotocamera di dossiero (allegati.css): qui si
   aggiunge solo il mirino, che dice dove mettere il codice. */
.cam-qr .cam-mirino {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vw, 260px);
  aspect-ratio: 1;
  border: 3px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(2, 8, 20, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cam-qr .cam-conta { font-size: 14px; }

.seriale-riga { display: flex; gap: 8px; align-items: flex-start; }
.seriale-riga input { flex: 1 1 auto; }
.seriale-riga .btn { flex: 0 0 auto; min-height: 48px; }
.qr-esito { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qr-esito img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ============ bandierine ============ */
/* Rosso = fermati e chiedi. Ambra = guarda prima di andare avanti.
   Sono le uniche due che esistono, e vogliono dire sempre la stessa cosa. */
.flag { margin-right: 6px; }

/* ============ la scheda ============ */
.dati { display: grid; gap: 14px; }
@media (min-width: 640px) { .dati { grid-template-columns: repeat(2, 1fr); } }
.dato .hint { display: block; margin-bottom: 2px; }
.dato b { font-size: 16px; }
.dato-largo { grid-column: 1 / -1; }

.note-elenco { display: grid; gap: 10px; margin: 12px 0; }
.nota {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-muted);
}
.nota-testa { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

/* ============ la mappa della missione ============ */
.mappa {
  height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Leaflet disegna su fondo bianco: nel tema scuro le tessere restano chiare —
   e' giusto, una mappa illeggibile non aiuta nessuno — ma i comandi si
   accordano al resto. */
.mappa .leaflet-bar a {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}
.mappa .leaflet-popup-content-wrapper,
.mappa .leaflet-popup-tip { background: var(--panel); color: var(--text); }

/* ============ filtri ============ */
.filtri { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.filtri .btn { min-height: 44px; }

/* La foto della lettura del QR si distingue dalle altre: non e' una foto in
   piu', e' la prova dell'associazione fra quella box e quella macchina. */
.allegato-qr { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

/* ============ il marchio ============ */
/**
 * La parola «2joy» e' scritta, non disegnata: e' testo vero nella pagina, con
 * il carattere che l'app carica gia'. Cosi' non c'e' un'immagine da rifare a
 * ogni misura, si legge con la voce, e a schermo resta nitida su qualunque
 * schermo — che con un logo in PNG non succede.
 *
 * I colori sono i tre di chi c'e' dentro: il «2» e' il nero (o il bianco) del
 * marchio di 2hire, che e' monocromatico — quindi --text, che cambia da se' col
 * tema — e «joy» e' il giallo di Enjoy.
 */
.marchio-2 { color: var(--text); }
.marchio-joy { color: var(--joy); }

/* Il giallo di Enjoy e' #F4C82E: bellissimo sul blu notte, illeggibile sul
   bianco (1,8:1 contro il fondo chiaro). Quindi sul tema chiaro si scende di
   luminosita' restando sullo stesso giallo, come fa il kit con l'accento —
   ciano sul scuro, blu sul chiaro. Il colore di marca non cambia: cambia
   quanto e' scuro, perche' sotto c'e' un fondo diverso. */
:root { --joy: #F4C82E; }
body.theme-light { --joy: #A8760A; }

.brand-logo { object-fit: contain; }

/* ============ la pagina di accesso ============ */
.login-marchio {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
}
.login-testa .brand-title { display: block; font-size: 38px; letter-spacing: -0.04em; }
.login-aqs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--fs-small);
}
.login-aqs img { width: 74px; height: auto; }