/* =========================================================================
   REPO: yoyohub-v2
   MODULE: css/flotta-myboard.css
   PURPOSE: Vestito del pannello "Scadenze MyBoard · v2" (#fl-tab-myboard),
            dentro #fl-rinnovi-system: testata, barra filtri, striscia KPI,
            tabella ordinabile, blocchi raggruppati per consulente. Pannello di
            SOLA LETTURA — nessuna scrittura, nessuna modifica a flotta_rinnovi.

   GEMELLO di css/flotta-verifica.css: stessi gettoni di css/hub-theme.css,
   stessa struttura di testata/colonne/schede. Cambia solo il prefisso
   (`fmb-` invece di `flv-`) e qualche pezzo in piu' (striscia KPI, tabella,
   gruppi) che la Verifica scadenze non ha.

   COLORI: nessun colore scritto alla lettera (eccetto il verde/arancio/rosso
   della colonna Giorni, che sono informazione — non decorazione — e restano
   leggibili uguali in chiaro/scuro perche' presi dagli stessi gettoni
   semantici di flv-esito/flv-data: --won, --wait, --lost).

   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-10-02 — barra esterna nascosta davvero (!important),
   .fmb-toggle[hidden], colonne board da 180px, colonne visibili sul telefono,
   badge e selettore vista leggibili in tema chiaro.
   Prima: aggiunto .fmb-btn-primario/.fmb-avviso-attesa/
   .fmb-nota-lenta per il bottone "Carica da MyBoard" (niente piu' chiamate
   automatiche al cambio filtro, vedi js/flotta-myboard.js).
   ========================================================================= */

/* ==================================== 1 · TESTATA ========================= */
.fmb-pannello{ display:flex; flex-direction:column; gap:1rem; }

.fmb-testata{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem .9rem;
  margin-bottom:.2rem;
}
.fmb-titolo-riga{ display:flex; align-items:center; gap:.5rem; flex:1 1 auto; min-width:0; }
.fmb-titolo{
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.fmb-badge-v2{
  display:inline-flex;
  align-items:center;
  padding:.16rem .55rem;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--ink);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.fmb-aggiornato{
  font-size:.76rem;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ============================================== 2 · BARRA FILTRI ========= */
.fmb-barra{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem .8rem;
  padding:.85rem .9rem;
  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);
}
.fmb-barra-gruppo{ display:flex; flex-direction:column; gap:.3rem; }
.fmb-barra-et{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.fmb-pills{ display:flex; flex-wrap:wrap; gap:.35rem; }

/* Le pastiglie "Scadenza entro": stessa forma di .flv-chip, qui pero' sono
   scelta singola (radio-like), non multiselezione. */
.fmb-pill{
  padding:.28rem .7rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--track);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.76rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.fmb-pill:hover{ background:var(--glass-2); border-color:var(--glass-edge-hi); color:var(--ink); }
.fmb-pill:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
.fmb-pill[aria-pressed="true"]{
  background:var(--accent);
  border-color:transparent;
  color:var(--on-accent);
  font-weight:700;
}

.fmb-select{
  padding:.4rem .65rem;
  border-radius:var(--r-sm);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink);
  font-family:inherit;
  font-size:.82rem;
  max-width:220px;
}
.fmb-select:focus{ outline:none; border-color:var(--accent-line); background:var(--glass-2); }

/* Interruttori (Consegna veicolo / Raggruppa per consulente): stessa forma
   delle pastiglie, con aria-pressed per lo stato acceso — niente nuovo
   componente, stesso linguaggio visivo del resto della pagina. */
.fmb-toggle{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .7rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.fmb-toggle:hover{ background:var(--glass-2); border-color:var(--glass-edge-hi); color:var(--ink); }
.fmb-toggle:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
.fmb-toggle-pallino{
  width:.6rem; height:.6rem; border-radius:var(--r-pill);
  background:var(--ink-3);
  transition:background var(--speed) var(--ease);
}
.fmb-toggle[aria-pressed="true"]{ border-color:var(--accent-line); color:var(--ink); }
.fmb-toggle[aria-pressed="true"] .fmb-toggle-pallino{ background:var(--won); }

.fmb-cerca{
  flex:1 1 220px;
  min-width:0;
  padding:.45rem .8rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  color:var(--ink);
  font-size:.85rem;
}
.fmb-cerca::placeholder{ color:var(--ink-3); }
.fmb-cerca:focus{ outline:none; border-color:var(--accent-line); background:var(--glass-2); }

.fmb-azioni{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }

/* Bottone primario "Carica da MyBoard" (2026-10-02): e' l'UNICA azione che fa
   partire una richiesta vera, quindi si distingue dagli altri bottoni della
   testata (Torna, Esporta CSV, che restano .flv-nav-btn). Stessi gettoni di
   .flv-salva in flotta-verifica.css. Il testo con il conto alla rovescia
   ("Carica da MyBoard (18 s)") lo scrive flotta-myboard.js: qui serve solo
   che il bottone resti leggibile anche piu' largo del solito. */
.fmb-btn-primario{
  padding:6px 16px;
  border:none;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:var(--on-accent);
  font-family:inherit;
  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:filter var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.fmb-btn-primario:hover:not(:disabled){ filter:brightness(1.05); }
.fmb-btn-primario:disabled{ opacity:.55; cursor:default; }

/* Avviso "puo' impiegare fino a un minuto": visibile SOLO mentre la chiamata
   e' in corso (flotta-myboard.js alterna l'attributo [hidden]). Colore di
   attesa (--wait), non di errore: e' normale, non un problema. */
.fmb-avviso-attesa{
  margin:-.3rem 0 0;
  font-size:.8rem;
  font-weight:600;
  color:var(--wait);
}

/* Nota sotto la barra filtri: spiega perche' qui non si chiama MyBoard ad
   ogni click. Stesso trattamento di .fmb-kpi-nota (testo piccolo, discreto). */
.fmb-nota-lenta{
  margin:-.3rem 0 0;
  font-size:.78rem;
  line-height:1.4;
  color:var(--ink-3);
}

/* ================================================ 3 · STRISCIA KPI ======== */
.fmb-kpi-riga{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.6rem;
}
@media (max-width:900px){ .fmb-kpi-riga{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .fmb-kpi-riga{ grid-template-columns:1fr; } }

.fmb-kpi{
  padding:.75rem .85rem;
  border-radius:var(--r-md);
  border:1px solid var(--glass-edge);
  background:var(--glass-2);
}
.fmb-kpi-val{
  font-size:1.35rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  line-height:1.15;
}
.fmb-kpi-lbl{
  margin-top:.2rem;
  font-size:.74rem;
  line-height:1.35;
  color:var(--ink-3);
}
.fmb-kpi--warn .fmb-kpi-val{ color:var(--wait); }
.fmb-kpi--danger .fmb-kpi-val{ color:var(--lost); }
.fmb-kpi--ok .fmb-kpi-val{ color:var(--won); }

.fmb-kpi-nota{
  margin:.1rem 0 0;
  font-size:.76rem;
  line-height:1.4;
  color:var(--ink-3);
}

/* =============================================== 4 · TABELLA ============= */
.fmb-tabella-wrap{
  overflow-x:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
}
.fmb-tabella{
  width:100%;
  border-collapse:collapse;
  font-size:.84rem;
}
.fmb-tabella th,
.fmb-tabella td{
  padding:.55rem .7rem;
  text-align:left;
  border-bottom:1px solid var(--track);
  white-space:nowrap;
}
.fmb-tabella td.fmb-col-cliente{ white-space:normal; min-width:11rem; }
.fmb-tabella th{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--glass-2);
  position:sticky;
  top:0;
  user-select:none;
}
.fmb-th-ord{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.fmb-th-ord:hover{ color:var(--ink); }
.fmb-th-freccia{ font-size:.65rem; opacity:.85; }
.fmb-tabella tbody tr:hover{ background:var(--glass-2); }

.fmb-cliente-nome{ display:block; font-weight:600; color:var(--ink); }
.fmb-cliente-tel{ display:block; margin-top:.1rem; font-size:.76rem; color:var(--ink-3); }

.fmb-giorni{ font-weight:700; font-variant-numeric:tabular-nums; }
.fmb-giorni--scaduto{ color:var(--lost); }
.fmb-giorni--vicino{ color:var(--wait); }
.fmb-giorni--ok{ color:var(--won); }

.fmb-rinnovo-si{ color:var(--won); font-weight:700; }

.fmb-tabella-piede{
  display:flex;
  justify-content:center;
  padding:.8rem;
}
.fmb-mostra-altri{
  padding:.4rem 1rem;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-edge);
  background:var(--glass-2);
  color:var(--ink-2);
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
}
.fmb-mostra-altri:hover{ background:var(--glass-3); color:var(--ink); }

/* =============================================== 5 · GRUPPI (consulente) == */
.fmb-gruppi{ display:flex; flex-direction:column; gap:.6rem; }
.fmb-gruppo{
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
  overflow:hidden;
}
.fmb-gruppo-testa{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  width:100%;
  padding:.7rem .85rem;
  border:none;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  cursor:pointer;
  text-align:left;
}
.fmb-gruppo-testa:hover{ background:var(--glass-2); }
.fmb-gruppo-caret{ font-size:.7rem; color:var(--ink-3); transition:transform var(--speed) var(--ease); }
.fmb-gruppo[data-aperto="1"] .fmb-gruppo-caret{ transform:rotate(90deg); }
.fmb-gruppo-nome{ font-weight:700; }
.fmb-gruppo-conta{
  padding:.08rem .5rem;
  border-radius:var(--r-pill);
  background:var(--track);
  color:var(--ink-2);
  font-size:.74rem;
  font-weight:700;
}
.fmb-gruppo-mini{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-left:auto;
  font-size:.74rem;
  color:var(--ink-3);
}
.fmb-gruppo-mini span strong{ color:var(--ink-2); }
.fmb-gruppo-corpo{ border-top:1px solid var(--track); }
.fmb-gruppo-corpo[hidden]{ display:none; }

/* =============================================== 6 · STATI ================ */
.fmb-stato{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:2.5rem 1rem;
  text-align:center;
  color:var(--ink-3);
  font-size:.88rem;
}
.fmb-stato--errore{ color:var(--lost); }
.fmb-spinner{
  width:1.8rem;
  height:1.8rem;
  border-radius:50%;
  border:2px solid var(--track);
  border-top-color:var(--accent);
  animation:fmb-spin .8s linear infinite;
}
@keyframes fmb-spin{ to{ transform:rotate(360deg); } }

/* 2026-10-02 [AI] Vista «Schede»: board a colonne con le schede rb-* della
   board di prima (css/rinnovi-board.css). Qui solo il contenitore, i colori
   delle colonne e i dettagli delle schede MyBoard. */
.fmb-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr); /* 2026-10-02 [AI] era 210px: cinque colonne stanno nel riquadro senza tagliare l'ultima */
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-top: 6px;
}
.fmb-board .rb-col {
    width: auto;
    max-width: none;
    flex: none;
    max-height: calc(100vh - 300px);
}
.fmb-board .rb-col-body { overflow-y: auto; }
.fmb-col-scaduti { --rb-accent: #ef4444; }
.fmb-col-3 { --rb-accent: #f97316; }
.fmb-col-6 { --rb-accent: #f59e0b; }
.fmb-col-9 { --rb-accent: #3b82f6; }
.fmb-col-12 { --rb-accent: #a78bfa; }
.fmb-col-altro { --rb-accent: #64748b; }
.fmb-scheda { cursor: default; }
.fmb-scheda:hover { transform: none; }
.fmb-scheda-extra { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.fmb-scheda-dato { font-size: 0.68rem; color: #8B8F98; }
.fmb-scheda-badge {
    font-size: 0.66rem;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #C9CCD3;
}
.fmb-scheda-badge--avviso { border-color: rgba(245,158,11,0.5); color: #f59e0b; }
.fmb-scheda-badge--ok { border-color: rgba(34,197,94,0.5); color: #22c55e; }
/* 2026-10-02 [AI] tema chiaro: badge «Chiuso» e bordo Schede/Tabella erano
   bianco su bianco, quasi invisibili. */
body.light-mode .fmb-scheda-badge { border-color: rgba(15,23,42,0.18); color: #475569; }
body.light-mode .fmb-scheda-dato { color: #64748b; }
body.light-mode .fmb-vista { border-color: rgba(15,23,42,0.15); }
.fmb-barra-vista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmb-vista { display: inline-flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; }
.fmb-vista-btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.fmb-vista-btn[aria-pressed="true"] { background: #facc15; color: #111; font-weight: 600; }
@media (max-width: 767px) {
    /* 2026-10-02 [AI] soglia 760→767 come rinnovi-board.css, e colonne
       rimesse a display:flex: quel foglio sotto 768px nasconde ogni .rb-col
       che non ha .rb-col--mobileactive (le linguette della board vecchia,
       che qui non ci sono) e la board MyBoard sul telefono restava vuota. */
    .fmb-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
    .fmb-board .rb-col { display: flex; width: 100%; max-width: 100%; max-height: none; min-height: 0; }
}
.fmb-board .rb-no-results {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #8B8F98;
    padding: 14px 12px;
    text-align: center;
}

/* ===================== 2026-10-02 [AI] IMPAGINAZIONE IN TRE PASSI ========
   Testata con introduzione, poi tre riquadri numerati (1 cosa chiedere,
   2 riepilogo, 3 contratti). Stessi gettoni del tema. */
.fmb-testata--chiara{ flex-direction:column; align-items:stretch; gap:.55rem; }
.fmb-intro{ margin:0; max-width:70ch; font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.fmb-intro strong{ color:var(--ink); }
.fmb-stato-riga{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.fmb-stato-riga .flv-nav-btn{ margin-left:auto; }
.fmb-stato-pallino{ width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:0 0 auto; }
.fmb-stato-pallino.is-ok{ background:var(--won, #22c55e); box-shadow:0 0 0 3px color-mix(in srgb, var(--won, #22c55e) 25%, transparent); }
.fmb-stato-pallino.is-carica{ background:var(--wait, #f59e0b); animation:fmb-pulsa 1s ease-in-out infinite; }
.fmb-stato-pallino.is-errore{ background:var(--lost, #ef4444); }
@keyframes fmb-pulsa{ 50%{ opacity:.35; } }

.fmb-passo{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:1rem 1.1rem 1.1rem;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  background:var(--glass-1);
}
.fmb-passo .fmb-barra{ padding:0; border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; gap:1rem 1.4rem; align-items:flex-end; }
.fmb-passo-testa{ display:flex; align-items:flex-start; gap:.75rem; }
.fmb-passo-num{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-weight:800; font-size:.9rem;
}
.fmb-passo-titolo{ margin:0; font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.fmb-passo-sub{ margin:.2rem 0 0; font-size:.82rem; line-height:1.45; color:var(--ink-3); max-width:80ch; }
.fmb-passo-sub strong{ color:var(--ink-2); }

.fmb-segmenti{
  display:inline-flex; padding:3px; gap:2px;
  border-radius:var(--r-pill); border:1px solid var(--glass-edge);
  background:var(--track); cursor:pointer; font-family:inherit;
}
.fmb-segmento{ padding:.3rem .75rem; border-radius:var(--r-pill); font-size:.78rem; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.fmb-segmento.is-attivo{ background:var(--accent); color:var(--on-accent); }
.fmb-segmenti:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }

.fmb-carica-riga{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; padding-top:.2rem; border-top:1px dashed var(--glass-edge); }
.fmb-btn-grande{ padding:.6rem 1.2rem; font-size:.9rem; margin-top:.6rem; }
.fmb-in-attesa{
  margin-top:.6rem;
  padding:.35rem .7rem; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--wait, #f59e0b) 16%, transparent);
  color:var(--ink); font-size:.8rem; font-weight:600;
}
.fmb-carica-riga .fmb-avviso-attesa{ margin:.6rem 0 0; display:flex; align-items:center; gap:.45rem; }
.fmb-carica-riga .fmb-avviso-attesa[hidden]{ display:none; }

.fmb-kpi-riga{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.fmb-kpi-gruppo-titolo{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem; }
.fmb-kpi-griglia{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem; }
.fmb-kpi-spiega{ margin-top:.2rem; font-size:.7rem; line-height:1.35; color:var(--ink-3); }

.fmb-strumenti{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.fmb-strumenti .fmb-cerca{ flex:1 1 260px; }
.fmb-legenda{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.75rem; color:var(--ink-3); }
.fmb-legenda span{ display:inline-flex; align-items:center; gap:.35rem; }
.fmb-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.fmb-dot--rosso{ background:#ef4444; }
.fmb-dot--arancio{ background:#f59e0b; }
.fmb-dot--verde{ background:#22c55e; }
.fmb-dot--grigio{ background:#94a3b8; }

/* La barra in alto del contenitore Flotta (Torna / Verifica scadenze /
   macrogruppi) non vale per MyBoard: si nasconde finché il pannello è aperto,
   così resta un solo «Torna» e nessun filtro che qui non ha effetto. */
#fl-rinnovi-system:has(#fl-tab-myboard.active:not([hidden])) > div:first-child{ display:none !important; }
/* 2026-10-02 [AI] !important: quella barra ha display:flex scritto nell'HTML
   (style="..."), che senza !important vince su questo foglio. */

/* 2026-10-02 [AI] .fmb-toggle ha display:inline-flex, che vince
   sull'attributo hidden: senza questa riga «Raggruppa per consulente»
   resterebbe a schermo anche nella vista Schede. */
.fmb-toggle[hidden]{ display:none !important; }

@media (max-width: 600px){
  .fmb-kpi-griglia{ grid-template-columns:1fr 1fr; }
  .fmb-passo{ padding:.85rem; }
  .fmb-stato-riga .flv-nav-btn{ margin-left:0; }
}

/* ============ 2026-10-02 [AI] CRUSCOTTO — tutta la pagina in una schermata ===
   Sostituisce a schermo i tre riquadri impilati (le regole .fmb-passo /
   .fmb-testata--chiara qui sopra non sono più usate dal JS):
     - testata in una riga (.fmb-cima)
     - «1 Chiedi a MyBoard» in una riga (.fmb-domanda), Carica a destra
     - area alta quanto lo schermo (.fmb-area, altezza da adattaAltezza()):
       «2 Riepilogo» a sinistra (.fmb-riepilogo), «3 Contratti» a destra
       (.fmb-contratti) con la board che scorre dentro le colonne.
   Sotto i 900px torna una colonna sola, a flusso normale. */
.fmb-cruscotto{ gap:.65rem; }

.fmb-cima{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .9rem; }
.fmb-cima-titolo{ flex:1 1 340px; min-width:0; }
.fmb-cima .fmb-titolo{ display:flex; align-items:center; gap:.5rem; font-size:1.15rem; line-height:1.2; }
.fmb-cima-sub{ margin:.15rem 0 0; font-size:.78rem; line-height:1.35; color:var(--ink-3); }
.fmb-cima-stato{ display:inline-flex; align-items:center; gap:.45rem; min-width:0; max-width:360px; }
.fmb-cima-stato .fmb-aggiornato{ white-space:normal; line-height:1.3; }

/* Etichetta di tappa: il filo 1 → 2 → 3 senza riquadri impilati */
.fmb-tappa{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.fmb-tappa b{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-size:.66rem; letter-spacing:0;
}

/* 1 · domanda a MyBoard */
.fmb-domanda{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:.55rem 1.1rem;
  padding:.6rem .85rem; border-radius:var(--r-lg);
  border:1px solid var(--glass-edge); background:var(--glass-1);
}
.fmb-domanda{ gap:.5rem .85rem; }
.fmb-domanda > .fmb-tappa{ align-self:center; padding-right:.85rem; border-right:1px solid var(--glass-edge); white-space:normal; max-width:118px; line-height:1.2; }
.fmb-domanda .fmb-select{ max-width:170px; }
.fmb-campo{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.fmb-campo-et{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.fmb-domanda .fmb-pills{ flex-wrap:nowrap; gap:.25rem; }
.fmb-domanda .fmb-pill{ padding:.22rem .6rem; min-width:2.1rem; }
.fmb-domanda .fmb-segmento{ padding:.22rem .75rem; }
.fmb-domanda .fmb-select{ padding:.3rem .55rem; }
.fmb-domanda-azione{ margin-left:auto; display:flex; align-items:center; gap:.55rem; }
.fmb-domanda-azione .fmb-in-attesa{ margin:0; padding:.25rem .6rem; font-size:.74rem; white-space:nowrap; }
.fmb-domanda-azione .fmb-in-attesa[hidden]{ display:none; }
.fmb-domanda .fmb-btn-primario{ padding:.5rem 1.05rem; }
.fmb-domanda .fmb-avviso-attesa{ flex-basis:100%; margin:0; display:flex; align-items:center; gap:.45rem; font-size:.78rem; }
.fmb-domanda .fmb-avviso-attesa[hidden]{ display:none; }
.fmb-btn-primario.is-da-premere{ animation:fmb-richiamo 1.6s ease-in-out infinite; }
@keyframes fmb-richiamo{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Area alta quanto lo schermo */
.fmb-area{
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  gap:.75rem;
  height:var(--fmb-alto, calc(100vh - 300px));
  min-height:460px;
}

/* 2 · riepilogo a sinistra */
.fmb-riepilogo{
  display:flex; flex-direction:column; gap:.6rem;
  min-height:0; overflow-y:auto;
  padding:.75rem .7rem; border-radius:var(--r-lg);
  border:1px solid var(--glass-edge); background:var(--glass-1);
}
.fmb-riep-sub{ margin:0; font-size:.72rem; line-height:1.4; color:var(--ink-3); }
.fmb-kpi-lista{ display:flex; flex-direction:column; gap:.75rem; }
.fmb-kpi-lista .fmb-kpi-gruppo-titolo{ margin-bottom:.25rem; font-size:.62rem; }
.fmb-kpi--riga{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  grid-template-areas:"val testo" "barra barra";
  align-items:center;
  column-gap:.5rem;
  padding:.4rem .5rem .45rem;
  border-radius:var(--r-sm);
  border:0;
  background:transparent;
}
.fmb-kpi--riga + .fmb-kpi--riga{ border-top:1px solid var(--glass-edge); border-radius:0; }
.fmb-kpi--riga .fmb-kpi-val{ grid-area:val; font-size:1.15rem; text-align:right; }
.fmb-kpi-testo{ grid-area:testo; display:flex; flex-direction:column; min-width:0; }
.fmb-kpi--riga .fmb-kpi-lbl{ margin:0; font-size:.78rem; font-weight:600; color:var(--ink); line-height:1.25; }
.fmb-kpi--riga .fmb-kpi-spiega{ margin:0; font-size:.68rem; line-height:1.3; color:var(--ink-3); }
.fmb-kpi-barra{ grid-area:barra; display:block; height:3px; margin-top:.35rem; border-radius:3px; background:var(--track); overflow:hidden; }
.fmb-kpi-barra i{ display:block; height:100%; border-radius:3px; background:var(--ink-3); }
.fmb-kpi--warn .fmb-kpi-barra i{ background:var(--wait); }
.fmb-kpi--danger .fmb-kpi-barra i{ background:var(--lost); }
.fmb-riepilogo .fmb-legenda{ flex-direction:column; gap:.3rem; padding-top:.6rem; border-top:1px solid var(--glass-edge); font-size:.72rem; }
.fmb-legenda-titolo{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.fmb-riepilogo .fmb-kpi-nota{ margin:0; font-size:.68rem; }

/* 3 · contratti a destra */
.fmb-contratti{ display:flex; flex-direction:column; gap:.55rem; min-width:0; min-height:0; }
.fmb-contratti .fmb-strumenti{ flex:0 0 auto; gap:.5rem .7rem; }
.fmb-conteggio{ font-size:.76rem; color:var(--ink-3); white-space:nowrap; }
.fmb-contratti .fmb-cerca{ flex:1 1 200px; padding:.38rem .8rem; }
.fmb-contratti .fmb-select{ padding:.32rem .55rem; }
.fmb-contratti #fmb-corpo{ flex:1 1 auto; min-height:0; overflow:auto; }
.fmb-contratti .fmb-board{ height:100%; margin:0; padding-bottom:4px; gap:8px; }
.fmb-contratti .fmb-board .rb-col{ max-height:none; min-height:0; height:100%; }

/* Colonne */
.fmb-cruscotto .rb-col-head{ padding:9px 10px 8px; }
.fmb-cruscotto .rb-col-title{ font-size:.8rem; }
.fmb-cruscotto .rb-col-desc{ margin-top:2px; font-size:.64rem; }
.fmb-cruscotto .rb-col-body{ padding:7px; gap:6px; }

/* Colonna vuota = striscia stretta con il titolo in verticale */
.fmb-col--vuota{ align-items:center; opacity:.75; }
.fmb-col--vuota .rb-col-head{ border:0; background:none; padding:9px 0; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; }
.fmb-col--vuota .rb-col-head-top{ flex-direction:column; gap:6px; }
.fmb-col--vuota .rb-col-title{ writing-mode:vertical-rl; transform:rotate(180deg); flex:0 0 auto; font-size:.74rem; color:var(--ink-3); white-space:nowrap; }

/* Scheda compatta */
.fmb-sch{ padding:8px 9px 8px 10px; border-left:3px solid var(--fmb-tono, #94a3b8); cursor:pointer; }
.fmb-sch:hover{ transform:none; }
.fmb-sch:focus-visible{ outline:2px solid var(--accent-line); outline-offset:1px; }
.fmb-sch--rosso{ --fmb-tono:#ef4444; }
.fmb-sch--arancio{ --fmb-tono:#f59e0b; }
.fmb-sch--verde{ --fmb-tono:#22c55e; }
.fmb-sch--grigio{ --fmb-tono:#94a3b8; }
.fmb-sch .rb-name{ font-size:.8rem; }
.fmb-sch-r3{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:4px; min-width:0; }
.fmb-sch-giorni{
  flex:0 0 auto; padding:0 6px; border-radius:999px;
  font-size:.64rem; font-weight:700; line-height:1.6; font-variant-numeric:tabular-nums;
  color:var(--fmb-tono); background:color-mix(in srgb, var(--fmb-tono) 15%, transparent);
}
.fmb-sch-meta{ margin-top:1px; }
.fmb-sch .fmb-sch-scad{ margin:0; font-size:.68rem; color:var(--fmb-tono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.fmb-sch-r4{ display:flex; align-items:center; gap:6px; margin-top:5px; min-width:0; }
.fmb-sch .fmb-sch-consulente{ flex:1 1 auto; margin:0; gap:5px; min-width:0; }
.fmb-sch .rb-consulente-avatar{ width:16px; height:16px; font-size:.5rem; }
.fmb-sch .rb-consulente-name{ font-size:.7rem; font-weight:500; color:var(--ink-2); }
.fmb-sch-consulente--vuoto{ font-size:.68rem; color:var(--wait); }
.fmb-sch-stato{ flex:0 0 auto; font-size:.62rem; color:var(--ink-3); border:1px solid var(--glass-edge); border-radius:999px; padding:0 6px; line-height:1.5; }
/* stato MyBoard sulla riga dell'auto: l'auto si accorcia, lo stato resta intero */
.fmb-sch-r2{ display:flex; align-items:center; gap:6px; margin-top:1px; min-width:0; }
.fmb-sch-r2 .fmb-sch-meta{ flex:1 1 auto; min-width:0; margin:0; }
.fmb-sch-stato--chiuso{ color:var(--ink-2); }
.fmb-sch-stato--lavorazione{ color:var(--wait); border-color:color-mix(in srgb, var(--wait) 45%, transparent); }
.fmb-sch-dettagli{ display:none; flex-wrap:wrap; gap:3px 8px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--glass-edge); font-size:.68rem; color:var(--ink-2); }
.fmb-sch.is-aperta .fmb-sch-dettagli{ display:flex; }
.fmb-sch-avviso{ color:var(--wait); }
.fmb-sch-ok{ color:var(--won); }

/* Tabella e gruppi dentro l'area: scorrono lì, non allungano la pagina */
.fmb-contratti .fmb-tabella-wrap{ max-height:none; }

/* Schermi stretti: una colonna sola, flusso normale */
/* Fino a 1599px il riepilogo diventa una striscia sopra la board: le
   colonne prendono tutta la larghezza. Dai 1600px in su resta a sinistra. */
@media (max-width:1599px) and (min-width:901px){
  .fmb-area{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .fmb-riepilogo{ flex-direction:row; align-items:center; gap:.8rem; overflow:visible; padding:.45rem .7rem; }
  .fmb-riepilogo > .fmb-tappa{ white-space:normal; max-width:92px; line-height:1.2; }
  .fmb-riep-sub, .fmb-riepilogo .fmb-legenda, .fmb-riepilogo .fmb-kpi-nota{ display:none; }
  .fmb-kpi-lista{ flex-direction:row; flex:1 1 auto; gap:.9rem; min-width:0; }
  .fmb-kpi-gruppo{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); flex:1 1 0; min-width:0; }
  .fmb-kpi-gruppo .fmb-kpi-gruppo-titolo{ grid-column:1 / -1; margin:0 0 .15rem; }
  .fmb-kpi--riga{ grid-template-columns:auto minmax(0,1fr); column-gap:.35rem; padding:.15rem .4rem; }
  .fmb-kpi--riga + .fmb-kpi--riga{ border-top:0; border-left:1px solid var(--glass-edge); border-radius:0; }
  .fmb-kpi--riga .fmb-kpi-val{ font-size:1.05rem; text-align:left; }
  .fmb-kpi--riga .fmb-kpi-lbl{ font-size:.7rem; line-height:1.15; }
  .fmb-kpi--riga .fmb-kpi-spiega{ font-size:.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fmb-kpi-barra{ margin-top:.2rem; }
}
@media (max-width:1100px){
  .fmb-domanda > .fmb-tappa{ border-right:0; padding-right:0; flex-basis:100%; max-width:none; }
}
@media (max-width:900px){
  .fmb-area{ display:flex; flex-direction:column; height:auto; min-height:0; }
  .fmb-riepilogo{ overflow:visible; }
  .fmb-kpi-lista{ gap:.6rem; }
  /* riepilogo a due colonne per gruppo: metà altezza sul telefono */
  .fmb-kpi-gruppo{ display:grid; grid-template-columns:1fr 1fr; column-gap:.6rem; }
  .fmb-kpi-gruppo .fmb-kpi-gruppo-titolo{ grid-column:1 / -1; }
  .fmb-kpi--riga + .fmb-kpi--riga{ border-top:0; border-radius:var(--r-sm); }
  .fmb-kpi--riga{ grid-template-columns:1.8rem minmax(0,1fr); padding:.35rem .2rem; }
  .fmb-riepilogo .fmb-legenda{ flex-direction:row; flex-wrap:wrap; gap:.3rem .8rem; }
  .fmb-riepilogo .fmb-legenda-titolo{ flex-basis:100%; }
  .fmb-contratti #fmb-corpo{ overflow:visible; }
  .fmb-domanda-azione{ margin-left:0; flex-basis:100%; }
  .fmb-domanda-azione .fmb-btn-primario{ flex:1 1 auto; }
}
@media (max-width:767px){
  /* Board a scorrimento orizzontale, una colonna per schermata */
  .fmb-contratti .fmb-board{
    display:flex !important; height:auto; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .fmb-contratti .fmb-board .rb-col{ flex:0 0 86%; width:86%; max-width:86%; height:auto; max-height:70vh; scroll-snap-align:start; }
  .fmb-contratti .fmb-board .fmb-col--vuota{ flex:0 0 48px; width:48px; max-width:48px; }
  .fmb-domanda .fmb-pills{ flex-wrap:wrap; }
}
@media (max-width:600px){
  .fmb-cima-stato{ flex-basis:100%; max-width:none; }
}

/* Tema chiaro */
body.light-mode .fmb-sch .rb-consulente-name{ color:#334155; }
body.light-mode .fmb-col--vuota{ background:transparent; }

/* ============ 2026-10-02 [AI] 4 · PERSI — in fondo, sotto il cruscotto ======
   Per capire quanti contratti stiamo perdendo: numeri di MyBoard, persi per
   trimestre, chi ne perde di più, elenco a scomparsa. */
.fmb-persi{
  display:flex; flex-direction:column; gap:.7rem;
  margin-top:.4rem; padding:.9rem 1rem 1rem;
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--lost) 35%, var(--glass-edge));
  background:linear-gradient(180deg, color-mix(in srgb, var(--lost) 7%, transparent), transparent 70%), var(--glass-1);
  scroll-margin-top:80px;
}
.fmb-persi-testa{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; }
.fmb-persi-testa .fmb-tappa b{ background:var(--lost); color:#fff; }
.fmb-persi-griglia{ display:grid; grid-template-columns:minmax(240px, 1fr) minmax(0,1.6fr); gap:1.4rem; }
.fmb-persi-numeri{ display:flex; flex-direction:column; gap:.6rem; }
.fmb-persi-num{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"val lbl" "val spiega"; column-gap:.7rem; align-items:center; }
.fmb-persi-val{ grid-area:val; font-size:2.1rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.fmb-persi-lbl{ grid-area:lbl; font-size:.88rem; font-weight:700; color:var(--ink); }
.fmb-persi-spiega{ grid-area:spiega; font-size:.72rem; color:var(--ink-3); line-height:1.3; }
.fmb-persi-num--perso .fmb-persi-val{ color:var(--lost); }
.fmb-persi-num--recupero .fmb-persi-val{ color:var(--wait); }
.fmb-persi-quota{ margin:.1rem 0 0; font-size:.8rem; color:var(--ink-2); line-height:1.4; }
.fmb-persi-quota strong{ color:var(--lost); }
.fmb-persi-blocco{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.fmb-persi-titolo{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.15rem; }
.fmb-barra-riga{ display:grid; grid-template-columns:minmax(64px, 34%) minmax(0,1fr) 2.2rem; align-items:center; gap:.5rem; font-size:.74rem; }
.fmb-barra-nome{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fmb-barra-binario{ height:8px; border-radius:4px; background:var(--track); overflow:hidden; }
.fmb-barra-binario i{ display:block; height:100%; border-radius:4px; }
.fmb-barra--perso{ background:var(--lost); }
.fmb-barra--consulente{ background:color-mix(in srgb, var(--lost) 70%, var(--ink-3)); }
.fmb-barra-num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.fmb-persi-nota{ margin:0; font-size:.7rem; color:var(--ink-3); }
.fmb-persi-elenco summary{ cursor:pointer; font-size:.8rem; font-weight:600; color:var(--ink-2); padding:.3rem 0; }
.fmb-persi-elenco[open] summary{ margin-bottom:.4rem; }
.fmb-persi-elenco .fmb-tabella-wrap{ max-height:420px; overflow:auto; }
.fmb-kpi--vai{ cursor:pointer; }
.fmb-kpi--vai:hover .fmb-kpi-lbl{ text-decoration:underline; text-underline-offset:2px; }
.fmb-kpi--vai .fmb-kpi-lbl::after{ content:" ↓"; color:var(--ink-3); font-weight:500; }
@media (max-width:1100px){
  .fmb-persi-griglia{ grid-template-columns:1fr 1fr; }
  .fmb-persi-numeri{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:.8rem 2rem; }
}
@media (max-width:640px){
  .fmb-persi-griglia{ grid-template-columns:1fr; }
}