/* =========================================================================
   REPO: yoyohub-v2
   MODULE: css/flotta-verifica.css
   PURPOSE: Vestito della schermata "Verifica scadenze" (#fl-tab-verifica),
            il pannello a due colonne dentro #fl-rinnovi-system: "Da
            verificare" a sinistra, "Confermati" a destra, piu' la finestra
            che apre un solo contratto.

   GEMELLA di dashboard-consulenti/design/tema/12-verifica-scadenze.css: le
   due schermate devono somigliarsi, quindi misure e struttura sono le stesse.
   Cambia solo il prefisso (li' `cns-ver-`, qui `flv-`, coerente con gli altri
   prefissi di questo repo: fl-, rb-, rp-, lv-) e manca tutta la parte della
   carta sulla landing: qui alla schermata si arriva da un bottone dentro
   #fl-rinnovi-system, non da una carta nuova sulla landing.

   COLORI: nessun colore scritto alla lettera. Ogni valore e' un gettone di
   css/hub-theme.css (:root), e `body.light-mode` nello stesso foglio li
   ribalta tutti — quindi questo foglio segue da solo il tema chiaro senza
   una sola regola in piu'. L'unica eccezione e' il velo nero della finestra,
   che deve restare scuro anche in tema chiaro (come .modal-overlay in
   styles.css, che fa lo stesso).

   PESI: le classi `flv-*` nascono oggi e nessun altro foglio le contende,
   quindi bastano selettori semplici e non serve nessun !important.

   NON TOCCA NIENTE DI ESISTENTE: nessun selettore di questo foglio ridipinge
   regole gia' scritte altrove. Si puo' togliere il <link> e il resto della
   pagina resta identico.

   LAST REVIEWED: 2026-09-21 — prima stesura.
   ========================================================================= */

/* ==================================== 1 · TESTATA DELLA SOTTO-VISTA ====== */
.flv-intro{ margin:.2rem 0 .35rem; }
.flv-titolo{
  margin:0;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.flv-sottotitolo{
  margin:.3rem 0 0;
  max-width:62ch;
  font-size:.9rem;
  line-height:1.5;
  color:var(--ink-2);
}

.flv-barra{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin:1rem 0 1.1rem;
}
.flv-cerca{
  flex:1 1 320px;
  min-width:0;
  padding:.62rem .95rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink);
  font-size:.9rem;
  transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.flv-cerca::placeholder{ color:var(--ink-3); }
.flv-cerca:focus{
  outline:none;
  background:var(--glass-2);
  border-color:var(--accent-line);
}
.flv-barra-nota{
  font-size:.8rem;
  color:var(--ink-3);
}

/* ============================================== 2 · LE DUE COLONNE ======= */
.flv-colonne{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
/* Sotto i 900px una colonna sotto l'altra: affiancate diventerebbero due
   strisce troppo strette per leggere nome cliente, veicolo e consulente. */
@media (max-width:900px){
  .flv-colonne{ grid-template-columns:1fr; }
}

.flv-col{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:1rem;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}

.flv-col-testa{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--track);
}
.flv-col-titolo{
  margin:0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.flv-col-conta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  padding:.12rem .5rem;
  border-radius:var(--r-pill);
  background:var(--track);
  color:var(--ink-2);
  font-size:.78rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* Il pallino di colore e' l'unica differenza fra le due teste: a sinistra
   "da fare" (arancio d'attesa), a destra "fatto" (verde). */
.flv-col-pallino{
  width:.55rem;
  height:.55rem;
  border-radius:var(--r-pill);
  flex:0 0 auto;
}
.flv-col--dav .flv-col-pallino{ background:var(--wait); }
.flv-col--conf .flv-col-pallino{ background:var(--won); }
.flv-col--dav .flv-col-conta{ background:var(--wait-soft); color:var(--wait); }
.flv-col--conf .flv-col-conta{ background:var(--won-soft); color:var(--won); }

.flv-col-desc{
  margin:.55rem 0 .2rem;
  font-size:.82rem;
  line-height:1.45;
  color:var(--ink-3);
}

.flv-lista{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.6rem;
}
.flv-vuoto{
  margin:1.2rem 0;
  text-align:center;
  font-size:.85rem;
  color:var(--ink-3);
}

/* ============================================ 2b · LE PASTIGLIE ========== */
/* Le stesse quattro della board a 5 colonne (`.rb-chip` in css/styles.css),
   con le stesse parole: Pendenti · Non urgenti · Senza scadenza · Ipotetici.
   Una riga per colonna, e le due righe sono indipendenti.

   Differenza con `.rb-chip`: li' i colori sono scritti alla lettera e il tema
   chiaro va ridipinto a parte; qui ogni valore e' un gettone di
   css/hub-theme.css, quindi il chiaro segue da solo. La forma — pillola
   piccola, 600 di peso, numeri a larghezza fissa, spunta quando e' accesa,
   azzeramento tratteggiato in rosso — e' la stessa.

   Come nella board, le pastiglie stanno dietro un tasto "Filtri" chiuso di
   partenza (`.rb-chips-toggle`): quattro pastiglie sempre aperte in una
   colonna stretta spingerebbero le schede sotto il bordo dello schermo. Il
   numerino sul tasto dice quante sono accese anche quando la riga e' chiusa.

   `flex-wrap:wrap` e' quello che su telefono manda le pastiglie a capo invece
   di farle sbordare: la colonna a 390px e' larga ~350px e le quattro
   pastiglie non ci stanno su una riga sola.

   GEMELLA di dashboard-consulenti/design/tema/12-verifica-scadenze.css (12.3b):
   stesse misure, cambia solo il prefisso. */
.flv-filtri{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  margin:.55rem 0 .1rem;
}
/* Le pastiglie vanno su una riga tutta loro, sotto il tasto: `flex:1 1 100%`
   le manda a capo in blocco invece di lasciarle appese accanto al tasto. */
.flv-chips{
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
}
/* Chiusa, la riga delle pastiglie e' vuota: niente spazio sprecato. */
.flv-chips:empty{ display:none; }

.flv-filtri-tasto{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.24rem .6rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--track);
  color:var(--ink-3);
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.flv-filtri-tasto:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.flv-filtri-tasto:focus-visible{
  outline:2px solid var(--accent-line);
  outline-offset:2px;
}
/* Con almeno un filtro acceso il tasto si fa notare: altrimenti si chiude la
   riga, ci si dimentica del filtro e l'elenco sembra incompleto senza motivo. */
.flv-filtri-tasto.con-attivi{
  color:var(--ink);
  border-color:var(--accent-line);
}
.flv-filtri-freccia{ font-size:.58rem; line-height:1; opacity:.8; }
.flv-filtri-attivi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.05rem;
  padding:0 .25rem;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--on-accent);
  font-size:.65rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.flv-chip{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  max-width:100%;
  padding:.24rem .6rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--track);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.35;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.flv-chip:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.flv-chip:focus-visible{
  outline:2px solid var(--accent-line);
  outline-offset:2px;
}
.flv-chip.attiva{
  background:var(--accent);
  border-color:transparent;
  color:var(--on-accent);
  font-weight:700;
}
.flv-chip-spunta{ font-size:.68rem; line-height:1; }
/* Il conteggio: numeri a larghezza fissa, cosi' non ballano quando cambiano. */
.flv-chip-conta{
  font-size:.7rem;
  font-variant-numeric:tabular-nums;
  opacity:.72;
}
/* La × che azzera i filtri della sola colonna in cui si trova. Tratteggiata
   come `.rb-chip-reset`: si legge subito che non e' un filtro in piu'. */
.flv-chip-azzera{
  background:transparent;
  border-style:dashed;
  color:var(--lost);
  font-weight:700;
}
.flv-chip-azzera:hover{
  background:transparent;
  border-color:var(--lost);
  color:var(--lost);
}

/* ================================================== 3 · LE SCHEDE ======== */
.flv-scheda{
  display:block;
  width:100%;
  text-align:left;
  padding:.7rem .8rem;
  border-radius:var(--r-md);
  border:1px solid var(--glass-edge);
  background:var(--glass-2);
  color:var(--ink);
  font-family:inherit;
  cursor:pointer;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.flv-scheda:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  transform:translateY(-1px);
}
.flv-scheda:focus-visible{
  outline:2px solid var(--accent-line);
  outline-offset:2px;
}
/* nome, meta, consulente, riga e firma sono <span>: la scheda e' un <button>,
   che accetta solo contenuto in linea. Il blocco lo mette il foglio, non il
   tag. */
.flv-scheda-nome{
  display:block;
  font-size:.92rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.flv-scheda-meta{
  display:block;
  margin-top:.2rem;
  font-size:.8rem;
  line-height:1.4;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}
/* La riga del consulente e' separata dalla meta apposta: da yoyohub si
   vedono anche i contratti che NON hanno nessun consulente, ed e' una delle
   informazioni che si cercano di piu' qui dentro. */
.flv-scheda-cons{
  display:block;
  margin-top:.2rem;
  font-size:.8rem;
  line-height:1.4;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}
.flv-scheda-cons--senza{ color:var(--lost); font-weight:600; }

.flv-scheda-riga{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-top:.45rem;
}

/* Il gettone della data: tre stati, perche' e' l'informazione per cui esiste
   questa schermata. Data vera = neutra; ipotetica = da confermare; assente =
   il caso piu' urgente, ed e' quello che l'ordinamento mette per primo. */
.flv-data{
  display:inline-flex;
  align-items:center;
  padding:.16rem .55rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:.76rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.flv-data--reale{ background:var(--track); color:var(--ink-2); }
.flv-data--ipotetica{ background:var(--wait-soft); color:var(--wait); border-color:var(--wait-soft); }
.flv-data--manca{ background:var(--lost-soft); color:var(--lost); border-color:var(--lost-soft); }

.flv-esito{
  display:inline-flex;
  align-items:center;
  padding:.16rem .55rem;
  border-radius:var(--r-pill);
  font-size:.76rem;
  font-weight:600;
}
.flv-esito--si{ background:var(--won-soft); color:var(--won); }
.flv-esito--no{ background:var(--lost-soft); color:var(--lost); }
.flv-esito--altro{ background:var(--live-soft); color:var(--live); }
.flv-esito--nessuno{ background:var(--off-soft); color:var(--off); }

/* La riga "verificato da ... il ...": firma di chi ha controllato. */
.flv-firma{
  display:block;
  margin-top:.45rem;
  padding-top:.45rem;
  border-top:1px solid var(--track);
  font-size:.76rem;
  line-height:1.45;
  color:var(--ink-3);
  overflow-wrap:anywhere;
}
.flv-firma strong{ color:var(--ink-2); font-weight:600; }

/* =============================================== 4 · PAGINAZIONE ========= */
.flv-pag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-top:.8rem;
  padding-top:.7rem;
  border-top:1px solid var(--track);
}
.flv-pag-btn{
  padding:.35rem .8rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--glass-2);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.flv-pag-btn:hover:not(:disabled){
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.flv-pag-btn:disabled{ opacity:.4; cursor:default; }
.flv-pag-info{
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}

/* ============================ 5 · BOTTONE DI INGRESSO / RITORNO ========== */
/* Il bottone che porta qui dalla board e quello che riporta alla board.
   Stessa stazza di .fl-back-btn (6px 14px, .85rem) ma disegnato coi gettoni
   invece che coi colori alla lettera. */
.flv-nav-btn{
  padding:6px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.flv-nav-btn:hover{
  background:var(--glass-2);
  border-color:var(--accent-line);
  color:var(--ink);
}
.flv-nav-riga{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-bottom:.9rem;
}

/* ==================================== 6 · FINESTRA DI UN CONTRATTO ======= */
/* Meccanismo identico alle finestre gia' in uso in questa pagina
   (.modal-overlay di styles.css): sempre nel DOM, si accende con la classe
   `active` dal JavaScript. Qui opacity e visibility SONO il meccanismo,
   quindi stanno scritte apposta.
   z-index 99998: appena sotto .modal-overlay (99999), cosi' se un giorno una
   finestra di sistema dovesse aprirsi sopra questa, ci riesce. */
.flv-modal-overlay{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:3vh 1rem;
  overflow-y:auto;
  /* Velo scuro anche in tema chiaro: e' l'unico valore alla lettera del
     foglio, come in .modal-overlay di styles.css. Un velo "a gettone"
     diventerebbe bianco su bianco col tema chiaro. */
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(var(--blur-sm));
  -webkit-backdrop-filter:blur(var(--blur-sm));
  opacity:0;
  visibility:hidden;
  transition:opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
}
.flv-modal-overlay.active{ opacity:1; visibility:visible; }

.flv-modal{
  width:100%;
  max-width:560px;
  max-height:92vh;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  /* Superficie OPACA, non vetro: dietro c'e' l'elenco e in trasparenza il
     testo della finestra si leggerebbe sopra quello delle schede. */
  background:var(--surface-menu);
  box-shadow:var(--shadow-3);
  color:var(--ink);
}

.flv-modal-testa{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:1rem 1.1rem .8rem;
  border-bottom:1px solid var(--glass-edge);
}
.flv-modal-titolo{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.flv-modal-chiudi{
  flex:0 0 auto;
  width:2rem;
  height:2rem;
  border:none;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-3);
  font-family:inherit;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.flv-modal-chiudi:hover{ background:var(--track); color:var(--ink); }

.flv-modal-corpo{
  padding:1rem 1.1rem;
  overflow-y:auto;
}

.flv-sez{ margin-bottom:1.1rem; }
.flv-sez:last-child{ margin-bottom:0; }
.flv-sez-tit{
  margin:0 0 .55rem;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.flv-campi{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.55rem .9rem;
}
@media (max-width:520px){
  .flv-campi{ grid-template-columns:1fr; }
}
.flv-campo{ min-width:0; }
.flv-campo-et{
  display:block;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.flv-campo-val{
  display:block;
  margin-top:.12rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink);
  overflow-wrap:anywhere;
}
/* Stesso rosso della scheda per "Senza consulente": e' un buco da riempire,
   non un dato neutro. */
.flv-campo-val--vuoto{ color:var(--lost); }

.flv-campo-data{
  display:block;
  width:100%;
  margin-top:.15rem;
  padding:.55rem .7rem;
  border-radius:var(--r-sm);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink);
  font-family:inherit;
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.flv-campo-data:focus{
  outline:none;
  border-color:var(--accent-line);
  background:var(--glass-2);
}
.flv-aiuto{
  margin:.4rem 0 0;
  font-size:.78rem;
  line-height:1.45;
  color:var(--ink-3);
}

.flv-esiti{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.flv-esito-btn{
  flex:1 1 9rem;
  padding:.55rem .7rem;
  border-radius:var(--r-md);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.flv-esito-btn:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.flv-esito-btn[aria-pressed="true"]{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--ink);
}

.flv-modal-piede{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1.1rem;
  border-top:1px solid var(--glass-edge);
}
.flv-msg{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  font-size:.82rem;
  line-height:1.4;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}
.flv-msg--errore{ color:var(--lost); }
.flv-msg--ok{ color:var(--won); }

.flv-salva{
  flex:0 0 auto;
  padding:.55rem 1.4rem;
  border:none;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--on-accent);
  font-family:inherit;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  transition:filter var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.flv-salva:hover:not(:disabled){ filter:brightness(1.04); }
.flv-salva:disabled{ opacity:.55; cursor:default; }