/* =============================================================
   hub-theme.css — strato di sola pelle per YoyoHub.
   Si carica DOPO styles.css, landing-volt.css e rinnovi-board.css.
   Non richiede nessuna modifica a index.html oltre al <link>,
   né ad app.js. Per tornare indietro basta togliere il <link>.
   Generato da build.sh — non modificare a mano: modifica theme/*.css
   ============================================================= */

/* ---------- 01-fondamenta.css ---------- */
/* =========================================================================
   01 · FONDAMENTA
   Font, gettoni di colore, fondo atmosferico. Tutto il resto del tema
   pesca da qui: nessun altro file deve scrivere un colore alla lettera.
   ========================================================================= */

/* ------------------------------------------------------- 1.1 · Sofia Pro --
   I file erano GIÀ in produzione, in public/fonts/sofia-pro/, ma nessuno li
   aveva mai dichiarati: la pagina scaricava Inter da Google e i font locali
   restavano lì inutilizzati. Qui li accendiamo.
   font-display:swap — il testo compare subito col font di sistema e poi
   scambia: meglio un lampo di font sbagliato che mezzo secondo di pagina
   bianca su una rete lenta.                                                 */
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProLight.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProLight-Italic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProRegular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProRegular-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProMedium-Italic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBold-Italic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBlack.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* --------------------------------------------------------- 1.2 · Gettoni --
   Ridefiniamo anche i --hrv2-* di produzione: sono usati in centinaia di
   regole che non riscriveremo mai una per una. Cambiando la sorgente,
   quelle regole seguono da sole.                                            */
:root{
  --font:'Sofia Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Fondo: non nero piatto ma un campo con quattro zone di colore molto
     diluite. Il vetro ha senso solo se dietro c'è qualcosa da rifrangere. */
  --ground:#0a0b0e;
  --amb-1:rgba(255,214,10,.20);   /* giallo, in alto a destra */
  --amb-2:rgba(76,141,255,.15);   /* blu, in basso a sinistra */
  --amb-3:rgba(167,139,250,.12);  /* viola, al centro */
  --amb-4:rgba(255,214,10,.10);   /* giallo, sotto la piega */

  /* Vetro */
  --glass-1:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --glass-3:rgba(255,255,255,.125);

  /* Superficie OPACA per i pannelli che galleggiano SOPRA il contenuto
     (menu a tendina). Il vetro va bene per un contenitore che sta nel
     flusso e ha dietro il fondo; un menu ha dietro del testo, e all'8% di
     bianco lo si legge attraverso. Non e' una sfumatura estetica: e' la
     differenza fra un menu e una lastra di plexiglass. */
  --surface-menu:#15171d;
  --glass-edge:rgba(255,255,255,.13);
  --glass-edge-hi:rgba(255,255,255,.22);
  --glass-spec:rgba(255,255,255,.16);
  /* Traccia: fondo di barre e contatori. Ha un gettone suo perché in tema
     chiaro il vetro diventa quasi bianco e una traccia "vetro su vetro"
     sparirebbe del tutto. */
  --track:rgba(255,255,255,.13);
  --blur:20px;
  --blur-sm:12px;

  /* Inchiostro */
  --ink:#f0f2f6;
  --ink-2:#a8afbc;
  --ink-3:#727a88;

  /* Accento: giallo pieno, e SOLO marchio.
     --accent      riempimenti, barre, bagliori
     --accent-text il giallo usato come TESTO: si scurisce in tema chiaro,
                   altrimenti su bianco non si legge
     --on-accent   il testo sopra il giallo */
  --accent:#ffd60a;
  --accent-2:#ffe14d;
  --accent-text:#ffd60a;
  --on-accent:#181300;
  --accent-soft:rgba(255,214,10,.14);
  --accent-line:rgba(255,214,10,.42);
  --accent-glow:rgba(255,214,10,.30);

  /* Stato. 'wait' è arancio, non giallo: il giallo adesso è il marchio e
     non deve voler dire anche "attenzione". */
  --won:#34d17f;   --won-soft:rgba(52,209,127,.15);
  --lost:#ff5a5f;  --lost-soft:rgba(255,90,95,.15);
  --live:#5b9dff;  --live-soft:rgba(91,157,255,.15);
  --hold:#b39cff;  --hold-soft:rgba(179,156,255,.15);
  --wait:#ff9f0a;  --wait-soft:rgba(255,159,10,.15);
  --off:#7c8494;   --off-soft:rgba(124,132,148,.15);

  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 2px 10px -4px rgba(0,0,0,.5);
  --shadow-2:0 14px 40px -18px rgba(0,0,0,.75);
  --shadow-3:0 32px 80px -24px rgba(0,0,0,.85);
  --speed:.2s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* --- rimappatura dei gettoni di produzione ---------------------------
     Da qui in giù non stiamo inventando nomi: stiamo riempiendo con la
     nuova tavolozza i gettoni che styles.css usa già ovunque.
     L'ambra diventa ARANCIO, non gialla: in produzione l'ambra faceva sia
     marchio sia avviso, e adesso i due ruoli si separano.                 */
  --hrv2-bg-elev-1:rgba(255,255,255,.055);
  --hrv2-bg-elev-2:rgba(255,255,255,.085);
  --hrv2-bg-elev-3:rgba(255,255,255,.125);
  --hrv2-border:var(--glass-edge);
  --hrv2-border-strong:var(--glass-edge-hi);
  --hrv2-text-primary:var(--ink);
  --hrv2-text-secondary:var(--ink-2);
  --hrv2-text-tertiary:var(--ink-3);
  --hrv2-accent-green:var(--won);      --hrv2-accent-green-soft:var(--won-soft);
  --hrv2-accent-amber:var(--wait);     --hrv2-accent-amber-soft:var(--wait-soft);
  --hrv2-accent-red:var(--lost);       --hrv2-accent-red-soft:var(--lost-soft);
  --hrv2-accent-blue:var(--live);      --hrv2-accent-blue-soft:var(--live-soft);
  --hrv2-accent-violet:var(--hold);    --hrv2-accent-violet-soft:var(--hold-soft);
  /* Sofia Pro anche dove prima c'era il monospaziato: le cifre restano
     incolonnate grazie a tabular-nums (vedi 1.4), che è il motivo vero per
     cui lì serviva un monospaziato. */
  --hrv2-mono:var(--font);
}

/* ----------------------------------------------------------- 1.3 · Fondo --
   I gradienti stanno direttamente sul body, non su uno pseudo-elemento in
   posizione fissa: uno strato in più creerebbe un contesto di
   impilamento e i menu a tendina di app.js finirebbero sotto.
   background-attachment:fixed tiene il campo fermo mentre la pagina scorre.

   2026-09-09 · Le misure erano in pixel (1100x700 e simili) e centrate più
   dentro di quelle del prototipo: su una finestra da 1512 il gradiente
   giallo diventava una macchia larga due terzi dello schermo, ed è il
   fondo "lavato" di oliva che in locale non c'è. Ora sono la conversione
   in percentuali di finestra delle misure del prototipo (che le disegna
   su uno strato inset:-20%, cioè 1,4 volte la finestra: 46% di quel
   riquadro = 64% di finestra, e le posizioni si spostano di conseguenza).

   Il primo strato è la GRANA: un puntino ogni 3px. Toglie il "digitale"
   alle superfici traslucide — il vetro su fondo perfettamente liscio
   sembra plastica. Nel prototipo è un ::after con opacity .3 su un bianco
   al 13%; qui non può essere uno strato a sé (vedi sopra: contesto di
   impilamento), quindi è un livello di background e l'opacità è già
   moltiplicata dentro il colore: .13 x .3 = .039. */
body{
  background-color:var(--ground);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.039) .5px, transparent 0),
    radial-gradient(64% 53% at  98% -17%, var(--amb-1), transparent 66%),
    radial-gradient(73% 62% at -14%  67%, var(--amb-2), transparent 68%),
    radial-gradient(64% 56% at  47%  28%, var(--amb-3), transparent 70%),
    radial-gradient(67% 53% at  84% 114%, var(--amb-4), transparent 68%);
  background-size:3px 3px, auto, auto, auto, auto;
  background-attachment:fixed;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  color:var(--ink);
}

/* ------------------------------------------------- 1.4 · Testo e numeri --
   Sofia Pro ovunque. Serve !important perché styles.css scrive 'Inter'
   alla lettera in una cinquantina di regole singole, che non riscriviamo.
   Il link a Google Fonts resta nell'HTML e continuerà a scaricare Inter:
   è uno spreco di pochi kB, e toglierlo richiederebbe di toccare l'HTML —
   cosa che questa migrazione non fa di proposito. */
body,body *,input,select,textarea,button,
h1,h2,h3,h4,h5,h6{font-family:var(--font)!important}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.006em;
}

/* Cifre incolonnate ovunque conti il confronto verticale: tabelle, valori
   dei KPI, importi. È ciò che il monospaziato serviva a ottenere. */
table,.data-table,
.stat-value,.profilo-kpi-value,.hr-kpi-value,.lv-chip-value,
td,th,.amount,.val{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- 1.5 · Dettagli --
   Barre di scorrimento in tono col vetro: quelle di sistema, chiare e
   spesse, spezzavano l'illusione della lastra. */
*{scrollbar-color:var(--glass-3) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--glass-3);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--glass-edge-hi);background-clip:content-box}

::selection{background:var(--accent-soft);color:var(--ink)}

/* Il focus visibile viveva solo come stringa dentro a11y-kanban.js e non
   veniva mai iniettato in pagina: chi naviga da tastiera non vedeva nulla. */
:where(a,button,input,select,textarea,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* Chi ha chiesto meno animazioni al sistema operativo deve essere servito. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- 02-guscio.css ---------- */
/* =========================================================================
   02 · GUSCIO
   Header, barra laterale, contenitore principale, intestazioni di pagina.
   Solo i due contenitori più grandi (header + sidebar) diventano vetro:
   .main-content resta trasparente di proposito, per lasciar vedere il
   fondo atmosferico dietro le schede — vedi 5.1.
   ========================================================================= */

/* --------------------------------------------------------- 2.1 · Header --
   In produzione esiste un SECONDO <header> (class="lv-hero", dentro la
   sezione Flotta & Rinnovi): un selettore d'elemento nudo "header{...}"
   lo avrebbe ridipinto per sbaglio. Lo scopo con l'ID del wrapper, che è
   figlio diretto solo dell'header vero.                                    */
#app-content > header{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border-bottom:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}

/* ------------------------------------------------------- 2.2 · Lockup --
   Il fulmine e "YoyoHub" oggi sono un gradiente viola/blu: stona con una
   tavolozza dove il giallo è l'unico marchio. Testo pieno, niente
   clip-text in gradiente; il bagliore sull'icona segue lo stesso giallo. */
.logo{ gap:.5rem; letter-spacing:-.01em; }
.logo-icon{
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.logo-text{
  background:none;
  -webkit-background-clip:unset;
  -webkit-text-fill-color:unset;
  background-clip:unset;
  color:var(--accent-text);
  font-weight:800;
}
/* "v2" è un tag di versione, non marchio: resta neutro per non litigare
   con il giallo del lockup. */
.logo-version{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-3);
}

/* ----------------------------------------------- 2.3 · Market switcher --
   Il badge che apre il menu resta una pastiglia piatta (niente vetro sui
   chip, regola del preambolo): solo ritinteggiata sui gettoni.
   Il pannello a tendina invece è un contenitore vero → vetro pieno.
   Attenzione: nessun overflow/transform sugli antenati, altrimenti il
   menu sparisce (vedi trappole del task).                                  */
.market-badge{
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-text);
}
.market-badge:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}

.market-dropdown{
  background:var(--glass-2);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}
.market-option{ color:var(--ink-2); }
.market-option:hover{
  background:var(--accent-soft);
  color:var(--ink);
}
.market-option.active{
  background:var(--accent-soft);
  color:var(--accent-text);
}

/* --------------------------------------------------- 2.4 · Blocco utente --
   Piccola capsula già dentro il vetro dell'header: basta un tono più
   chiaro dei gettoni, senza un secondo blur (sarebbe blur-su-blur, costa
   e non si vede).                                                          */
.user-profile{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
}
.user-name{ color:var(--ink); }
.user-role{ color:var(--ink-3); }
/* L'iniziale dell'utente era su gradiente indigo/blu: unico punto viola
   rimasto nel guscio. La riportiamo sul giallo di marchio. */
.user-avatar{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
}

/* --------------------------------------------- 2.5 · Pulsanti dell'header --
   Tema, Home, Esci: stessa famiglia di pulsante-vetro, solo "Esci" tiene
   il rosso semantico (--lost) invece del grigio neutro.                    */
.theme-toggle,
.back-button{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
.theme-toggle:hover,
.back-button:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
}

.logout-button{
  background:var(--lost-soft);
  border:1px solid rgba(255,90,95,.3);
  color:var(--lost);
}
.logout-button:hover{
  background:var(--lost-soft);
  border-color:var(--lost);
}

/* --------------------------------------------------------- 2.6 · Sidebar --
   Il secondo grande contenitore in vetro. NON tocchiamo position/width/
   transform: sono governati da app.js (toggleSidebar) e dal breakpoint
   mobile di produzione — qui cambiamo solo la pelle.                       */
.sidebar{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border-right:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}

/* Etichette di gruppo: guide silenziose, non voci di menu. */
.sidebar-group-label{
  color:var(--ink-3);
  letter-spacing:1px;
}

/* Voce di menu: stato di riposo neutro, hover leggero. */
.sidebar-menu a{
  color:var(--ink-2);
  border-radius:var(--r-sm);
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease);
}
.sidebar-menu a:hover{
  background:var(--glass-2);
  color:var(--ink);
}

/* Voce attiva: pastiglia in vetro rialzato + barretta gialla a sinistra.
   La barretta è un box-shadow inset, non un border: non sposta il testo
   di un px come farebbe un border-left aggiunto al layout.                 */
.sidebar-menu a.active{
  background:var(--glass-3);
  color:var(--ink);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 1px 0 var(--glass-spec);
}
.sidebar-menu a:hover .badge-exclusive{ background:var(--accent-soft); }

/* Le icone sono emoji nell'HTML: non si possono sostituire né ritingere,
   solo allineare a dimensione coerente. */
.sidebar-menu .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* --------------------------------------------------- 2.7 · Main content --
   Deliberatamente SENZA vetro: è la superficie che lascia vedere il fondo
   atmosferico dietro le schede, non un contenitore essa stessa. Qui non
   scriviamo nulla — l'assenza di regola è la scelta.                      */

/* ------------------------------------------------ 2.8 · Titoli di pagina --
   In produzione .content-title era 14px, la taglia di un'etichetta, non
   di un titolo. Stessa specificità del selettore di produzione (una sola
   classe): basta l'ordine di caricamento per vincere, niente !important. */
.content-title{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.content-subtitle{
  color:var(--ink-2);
  font-size:.8125rem;
}

/* ---------- 03-schede.css ---------- */
/* =========================================================================
   03 · SCHEDE E PANNELLI
   Ogni "rettangolo grigio" della dashboard diventa una lastra di vetro:
   stat-card, chart-card, table-card (solo guscio), profilo-kpi, hr-kpi,
   lv-chip, preview-item, pannelli .hrv2-*.
   I gettoni (colori, blur, ombre) li definisce 01-fondamenta.css: qui li
   usiamo soltanto, non se ne dichiara nessuno alla lettera.
   ========================================================================= */

/* -------------------------------------------------- 3.1 · Niente stiramenti --
   Difetto già visto: una scheda con dentro un blocco più alto delle altre
   trascina l'intera riga di una griglia/flex alla sua altezza, lasciando
   le vicine mezze vuote. align-items:start lo impedisce SENZA toccare
   colonne o gap, che restano affari di chi ha disegnato il layout.        */
body .stats-grid,
body .charts-grid,
body .profilo-kpi-grid,
body .hr-kpi-grid,
body .hrv2-kpi-row,
body .hrv2-profilo-cards,
body .hrv2-profilo-sparklines,
body .preview-grid,
body #fl-landing.lv-landing .lv-chip-row{
  align-items:start;
}

/* ================================================== 3.2 · STAT CARD ==== */
body .stat-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
body .stat-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
  transform:translateY(-1px);
}
/* Emoji di produzione: non si toccano, si vestono. Un fondo tondo in
   vetro le fa sembrare icone disegnate apposta invece che testo libero. */
body .stat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  font-size:1.05rem;line-height:1;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:50%;
}
body .stat-value{
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
}
body .stat-label{
  color:var(--ink-2);
}
body.light-mode .stat-card{background:var(--glass-1);border-color:var(--glass-edge);}
body.light-mode .stat-value{color:var(--ink);}
body.light-mode .stat-label{color:var(--ink-2);}

/* ---- 3.2.1 · Colore di stato sul valore, non a capriccio -------------
   Solo dove l'id dice chiaramente cos'è (esito o denaro): niente colori
   indovinati sulle card generiche di conteggio, che restano --ink.      */
body #kpi-contratti-approvati,
body #fatt-kpi-confermate,
body #tc-kpi-consegnati{ color:var(--won); }

body #kpi-contratti-respinti,
body #fatt-kpi-rifiutate,
body #tc-kpi-avvisi{ color:var(--lost); }

body #kpi-contratti-pending,
body #fatt-kpi-pending,
body #tc-kpi-in-attesa{ color:var(--wait); }

body #tc-kpi-in-consegna{ color:var(--live); }

body #kpi-provvigioni-totali,
body #mkt-budget-totale,
body #mkt-cpa-medio,
body #kpi-ricavi-consulenti,
body #fatt-kpi-totale,
body #profilo-ricavi-totali,
body #hr-profilo-fatturato,
body #hr-profilo-provv,
body #fatt-det-importo,
body #fatt-det-reale{ color:var(--accent-text); }

/* ================================================== 3.3 · CHART CARD === */
/* Il canvas Chart.js vive dentro .chart-container, dentro .chart-card:
   qui NON si tocca width/height/position/transform di nessuno dei due,
   e per prudenza niente transform nemmeno sul guscio .chart-card stesso
   (la regola assoluta del preambolo vale per l'intero contenitore, non
   solo per il genitore diretto del canvas). Il sollevamento al passaggio
   del mouse qui resta solo bordo+ombra, senza translateY.                */
body .chart-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease);
}
body .chart-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}
body .chart-header{
  border-bottom:1px solid var(--glass-edge);
  padding-bottom:.75rem;
}
body .chart-title{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.01em;
}
body.light-mode .chart-card{background:var(--glass-1);border-color:var(--glass-edge);}
body.light-mode .chart-title{color:var(--ink);}

/* ================================================== 3.4 · TABLE CARD === */
/* Solo il guscio: sfondo, bordo, intestazione. La tabella dentro non è
   compito di questo file.                                                */
body .table-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .table-header{
  border-bottom:1px solid var(--glass-edge);
}
body .table-title{
  color:var(--ink);
  font-weight:700;
}
body.light-mode .table-card{background:var(--glass-1);border-color:var(--glass-edge);}
body.light-mode .table-title{color:var(--ink);}
body.light-mode .table-header{border-bottom-color:var(--glass-edge);}

/* ================================================== 3.5 · PROFILO KPI == */
body .profilo-kpi-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
body .profilo-kpi-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
  transform:translateY(-1px);
}
/* .highlight è già una variante di produzione (card evidenziata): le
   diamo solo un tocco di vetro in più, il colore lo decide l'accento. */
body .profilo-kpi-card.highlight{
  background:var(--glass-2);
  border-color:var(--accent-line);
}
body .profilo-kpi-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-left:auto;margin-right:auto;
  font-size:.95rem;line-height:1;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:50%;
}
body .profilo-kpi-value{
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
}
body .profilo-kpi-card.highlight .profilo-kpi-value{ color:var(--ink); }
body .profilo-kpi-label{ color:var(--ink-2); }

/* ================================================== 3.6 · HR KPI ======= */
/* Solo le 4 classi assegnate: card, valore, etichetta, valore P.IVA.
   Icona e badge P.IVA restano fuori da questo file.                      */
body .hr-kpi-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
body .hr-kpi-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
  transform:translateY(-1px);
}
body .hr-kpi-value{
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
body .hr-kpi-label{ color:var(--ink-2); }
body .hr-piva-value{
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* La produzione ha già un blocco body.light-mode dedicato a HR con
   background/border espliciti: stessa forma di selettore, per vincere. */
body.light-mode .hr-kpi-card{background:var(--glass-1);border-color:var(--glass-edge);}
body.light-mode .hr-kpi-value,
body.light-mode .hr-piva-value{color:var(--ink);}
body.light-mode .hr-kpi-label{color:var(--ink-2);}

/* ================================================== 3.7 · LV CHIP ====== */
/* Le regole di produzione vivono dietro #fl-landing.lv-landing: per
   vincere a parità di cascata serve la stessa forma di selettore
   (id + 2 classi), non basta alzare genericamente la specificità.
   Chip = vetro semplice, niente backdrop-filter (sono tante e piccole). */
#fl-landing.lv-landing .lv-chip{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
#fl-landing.lv-landing .lv-chip-label{
  color:var(--ink-2);
}
/* Solo il colore di base: le varianti più specifiche di produzione
   (verde/viola per singolo chip, .lv-warn) hanno più classi e vincono
   comunque da sole — qui non le tocchiamo per non spegnere quel codice. */
#fl-landing.lv-landing .lv-chip-value{
  color:var(--ink);
  font-weight:900;
  letter-spacing:-.035em;
}

/* ================================================== 3.8 · PREVIEW ITEM = */
/* Non è una scheda: è una coppia etichetta/valore dentro una modale.
   Niente vetro qui, solo tipografia coerente col resto del tema.         */
body .preview-item .label{
  color:var(--ink-3);
}
body .preview-item .value{
  color:var(--ink);
}
body .preview-item .value.empty{
  color:var(--ink-3);
}

/* ================================================== 3.9 · PANNELLI HRV2 =
   Molte regole .hrv2-* pescano già dai gettoni --hrv2-* rimappati in
   01-fondamenta.css: qui aggiungiamo SOLO la ricetta del vetro (blur +
   filo di luce) ai contenitori veri (card, barre, pannello a tendina),
   mai alle righe (.hrv2-consulente-row) o ai blocchi dentro una riga
   (.hrv2-netto-block, .hrv2-expanded-detail): quelli restano piatti
   per leggibilità, come da regola "mai vetro su righe di tabella".      */
body .hrv2-kpi-card,
body .hrv2-toolbar,
body .hrv2-pagination,
body .hrv2-recap-bar,
body .hrv2-spark,
body .hrv2-profilo-card{
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
body .hrv2-kpi-card{
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  border-color:var(--glass-edge);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
body .hrv2-kpi-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
  transform:translateY(-1px);
}
body .hrv2-kpi-value{
  font-weight:900;
  letter-spacing:-.035em;
}
/* Il pannello a tendina del multi-select: vetro sì (è un "modale"
   piccolo), transform/position NO — restano quelli di produzione che
   lo posizionano sotto al trigger.                                      */
body .hrv2-ms-panel{
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 var(--glass-spec);
}
/* Gruppo di card/barre che in produzione hanno già un blocco light-mode
   dedicato (stessa selettore, stessa specificità, per vincerlo).
   .hrv2-consulente-row e .hrv2-expanded-detail restano fuori: sono righe,
   non schede — il bianco piatto di produzione per loro va bene così.    */
body.light-mode .hrv2-kpi-card,
body.light-mode .hrv2-toolbar,
body.light-mode .hrv2-pagination{
  background:var(--glass-1);
  border-color:var(--glass-edge);
}

/* ---------- 04-controlli.css ---------- */
/* =========================================================================
   04 · CONTROLLI
   Filtri, campi, select, pulsanti di utilità, linguette, paginazione,
   interruttori. È la parte più densa della migrazione: il committente ha
   chiesto esplicitamente che TUTTI i filtri restino — qui li ripitturiamo,
   non li tocchiamo nella struttura (nessun display:none, nessuna modifica
   a layout/position, solo pelle).
   I selettori sono scritti per pareggiare la specificità delle regole di
   styles.css che dobbiamo battere: a parità vinciamo noi perché il nostro
   foglio si carica per ultimo. Nessun !important in questo file: in
   styles.css nessuna delle regole che tocchiamo lo usa.
   ========================================================================= */

/* -------------------------------------------------- 4.1 · Barre filtro --
   Solo i contenitori che in produzione erano GIÀ una "barra" visibile
   (sfondo + bordo/padding) diventano vetro. I wrapper puramente di
   layout (.filter-row, .attivazioni-filters, .chart-filters, .fl-filters,
   .regioni-filters...) restano invisibili come prima: i campi dentro
   portano già il loro vetro (vedi 4.3) e aggiungere un secondo pannello
   dietro sarebbe un elemento nuovo, non una ripittura.
   flex-wrap:wrap dove mancava, così su schermo stretto i controlli vanno
   a capo invece di traboccare. */
/* #contratti-tabs e' uscito da questo elenco il 2026-09-09: da barra di
   vetro con le linguette dentro e' diventato una riga sottolineata come
   in locale (vedi 4.8). */
.kpi-period-container,
.table-search,
.contratti-filtri-bar,
.fl-tab-nav,
.mkt-period-bar {
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.6);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-spec);
  flex-wrap: wrap;
}

.kpi-period-container,
.fl-tab-nav,
.mkt-period-bar {
  border-radius: var(--r-md);
}

/* .table-search e .contratti-filtri-bar vivono dentro .table-card, che ha
   già gli angoli tondi del pannello: qui c'era solo un bordo inferiore di
   separazione, lo ripitturiamo invece di arrotondarlo. */
.table-search,
.contratti-filtri-bar {
  border: none;
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: none;
}

/* Separatori rimasti nudi: stesso trattamento del bordo vetro, senza
   trasformarli in pannelli (sono righe sottili, non contenitori). */
.table-pagination,
.pagination-controls {
  border-top-color: var(--glass-edge);
}

/* ------------------------------------------- 4.2 · Etichette dei filtri --
   Le etichette "Da / A" accanto alle date del periodo personalizzato KPI:
   stesso ruolo delle label di .form-group, stesso trattamento testuale. */
.date-range-inputs label {
  color: var(--ink-3);
}

/* ------------------------------------------- 4.3 · Campi — vetro rialzato
   Tutti i filtri, tutti: select, input di ricerca, date, campi dei form.
   Un solo blocco per lo stato di riposo così restano coerenti fra loro
   anche se in styles.css nascono in punti diversi con nomi diversi. */
.filter-select,
.fl-select,
.fl-search,
.chart-filter-select,
.mkt-select,
.kpi-team-select,
.kpi-period-select,
.kpi-date-input,
.search-input,
.form-group input,
.form-group select,
.form-group textarea {
  background-color: var(--glass-2);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}

/* Al passaggio del mouse il bordo schiarisce, niente altro: è il segnale
   "questo si può usare" senza sparare colore. */
.filter-select:hover,
.fl-select:hover,
.fl-search:hover,
.chart-filter-select:hover,
.mkt-select:hover,
.kpi-team-select:hover,
.kpi-period-select:hover,
.kpi-date-input:hover,
.search-input:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--glass-edge-hi);
}

/* Al fuoco: bordo giallo + alone. È l'unico punto in cui i campi mostrano
   il marchio, coerente col resto del tema. */
.filter-select:focus,
.fl-select:focus,
.fl-search:focus,
.chart-filter-select:focus,
.mkt-select:focus,
.kpi-team-select:focus,
.kpi-period-select:focus,
.kpi-date-input:focus,
.search-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background-color: var(--glass-3);
}

.search-input::placeholder,
.fl-search::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-3);
}

.form-group textarea {
  resize: vertical;
}

/* Campi disabilitati: leggibili ma chiaramente spenti, mai invisibili. */
.form-group input:disabled,
.form-group select:disabled {
  background-color: var(--glass-1);
  color: var(--ink-3);
  border-color: var(--glass-edge);
  opacity: .6;
}

/* -------------------------------------- 4.4 · Select nativi — normalizzati
   appearance:none toglie il rettangolo grigio di sistema (soprattutto
   macOS). La freccetta è due gradienti lineari, non un'immagine: così
   segue i gettoni (var()) invece di un colore fisso e non pesa in kB.
   padding-right fa spazio alla freccia senza toccare gli altri lati,
   che restano quelli già definiti da styles.css. */
select.filter-select,
select.fl-select,
select.chart-filter-select,
select.mkt-select,
select.kpi-team-select,
select.kpi-period-select,
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) center,
    calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* -------------------------------------------- 4.5 · Option dei select --
   Il menu aperto lo disegna il sistema operativo: possiamo solo dirgli
   colore di sfondo e colore testo, esplicitamente, altrimenti su alcuni
   browser (Safari/Windows soprattutto) le voci diventano bianco su
   bianco quando il resto della pagina è scuro. Niente vetro/blur qui:
   la lista nativa non lo supporta, serve un colore pieno. */
.filter-select option,
.fl-select option,
.chart-filter-select option,
.mkt-select option,
.kpi-team-select option,
.kpi-period-select option,
.form-group select option {
  background: var(--ground);
  color: var(--ink);
}

/* --------------------------------------- 4.6 · input[type="date"] — icona
   L'icona calendario del browser è nera per default: su vetro scuro
   sparisce. invert(.55) la porta a un grigio chiaro leggibile senza
   diventare un lampo di bianco puro. */
.kpi-date-input::-webkit-calendar-picker-indicator,
.filter-select[type="date"]::-webkit-calendar-picker-indicator,
.search-input[type="date"]::-webkit-calendar-picker-indicator,
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.55);
  cursor: pointer;
}

/* ---------------------------------- 4.7 · Pulsanti di utilità dei filtri
   .btn-csv oggi è verde di sistema in TUTTI i suoi usi (CSV, "Aggiorna",
   e — riciclato — anche la paginazione di Marketing/Attivazioni): lo
   trattiamo come pulsante secondario in vetro, mai più verde. */
.btn-csv {
  background: var(--glass-2);
  border: 1px solid var(--glass-edge);
  color: var(--ink-2);
}

.btn-csv:hover {
  background: var(--glass-3);
  border-color: var(--glass-edge-hi);
  color: var(--ink);
}

.btn-csv:disabled {
  opacity: .5;
  color: var(--off);
  cursor: not-allowed;
}

/* Paginazione tabelle (Precedente/Successiva) e paginazione Flotta
   (Prec/Succ): stesso trattamento vetro, stato disabilitato SPENTO ma
   sempre leggibile — mai opacity così bassa da sparire. */
.pagination-btn,
.fl-page-btn {
  background: var(--glass-2);
  border: 1px solid var(--glass-edge);
  color: var(--ink-2);
}

.pagination-btn:hover:not(:disabled),
.fl-page-btn:hover:not(:disabled) {
  background: var(--glass-3);
  border-color: var(--glass-edge-hi);
  color: var(--ink);
}

.pagination-btn:disabled,
.fl-page-btn:disabled {
  opacity: .55;
  color: var(--off);
  border-color: var(--glass-edge);
  cursor: not-allowed;
}

.pagination-current {
  color: var(--ink);
}

.pagination-info {
  color: var(--ink-3);
}

.pagination-info span {
  color: var(--ink);
}

/* --------------------------------------------- 4.8 · Linguette / Tab --
   Selettore di periodo (Oggi/7gg/30gg...): a riposo vetro leggero, attivo
   un richiamo giallo misurato — non un riempimento pieno, per non
   competere con le linguette Da Firmare/Firmati/Annullati qui sotto. */
.period-btn {
  background: var(--glass-1);
  border: 1px solid var(--glass-edge);
  color: var(--ink-2);
}

.period-btn:hover {
  border-color: var(--glass-edge-hi);
  color: var(--ink);
}

.period-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

/* Tab Flotta: era blu di sistema pieno, diventa lo stesso giallo pieno
   misurato usato per Da Firmare/Firmati/Annullati qui sotto — coerenza
   fra le due segmented-control della dashboard. */
.fl-tab-btn:hover {
  color: var(--ink);
}

.fl-tab-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* Tab Contratti (Da Firmare/Firmati/Annullati). Storia in due passi.
   Prima: "Da Firmare" era un blocco arancione con bagliore colorato che
   urlava più di tutto il resto della pagina, e Firmati/Annullati usavano
   verde e rosso pieni con lo stesso problema. Li avevamo uniformati a una
   sola pastiglia gialla piena.
   Poi (2026-09-09): nel prototipo approvato non sono pastiglie, sono testo
   con una riga sotto quella attiva — il riempimento pieno resta il segnale
   più forte che abbiamo, e qui serviva solo a dire "sei qui".
   Il colore per stato non torna: l'etichetta dice già di quale stato si
   tratta, il colore lo ripeteva.
   I tre selettori [data-tab=...] restano per pareggiare la specificità
   delle regole di styles.css (id + attributo + classe): a parità vinciamo
   noi per ordine di caricamento. */
#contratti-tabs {
  border-bottom: 1px solid var(--glass-edge);
}

#contratti-tabs .tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  color: var(--ink-3);
  font-weight: 500;
}

#contratti-tabs .tab-btn:hover:not(.active) {
  color: var(--ink-2);
  background: none;
}

#contratti-tabs .tab-btn[data-tab="da-firmare"].active,
#contratti-tabs .tab-btn[data-tab="firmati"].active,
#contratti-tabs .tab-btn[data-tab="annullati"].active {
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* --------------------------------------- 4.9 · Interruttore "Senza Rappel"
   Non è una linguetta di selezione ma un vero on/off: resta un tocco di
   vetro morbido, con l'interruttore stesso (la pallina) che passa al
   giallo di marchio quando attivo, invece del bianco/nero di sistema. */
.rappel-toggle-btn {
  background: var(--glass-1);
  border: 1px solid var(--glass-edge);
}

.rappel-toggle-btn:hover {
  background: var(--glass-2);
  border-color: var(--glass-edge-hi);
}

.rappel-toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.rappel-toggle-label {
  color: var(--ink-2);
}

.rappel-toggle-btn.active .rappel-toggle-label {
  color: var(--ink);
}

.rappel-toggle-switch {
  background: var(--glass-3);
}

.rappel-toggle-switch::after {
  background: var(--ink);
}

.rappel-toggle-btn.active .rappel-toggle-switch {
  background: var(--accent);
}

.rappel-toggle-btn.active .rappel-toggle-switch::after {
  background: var(--on-accent);
}

/* ---------- 05-tabelle.css ---------- */
/* =========================================================================
   05 · TABELLE
   .data-table e le sue varianti di produzione (.attivazioni-table sulla
   tabella dettaglio attivazioni e sulle fatture, .regioni-table sul
   riepilogo regioni). In produzione non condividono tutte le stesse
   classi — alcune tabelle (es. #fatt-table) portano SOLO .attivazioni-table
   senza .data-table — quindi ogni regola qui sotto elenca tutte le
   varianti che esistono davvero in index.html, mai solo .data-table da
   sola: altrimenti certe tabelle resterebbero col vecchio stile a righe.
   ========================================================================= */

/* --------------------------------------------------- 5.1 · Intestazione --
   La barra sopra la tabella (titolo + filtri). Niente vetro qui: il
   pannello che la contiene (.table-card) è già una lastra di vetro sua,
   un secondo strato qui darebbe un doppio bordo. Solo testo e separatore
   coerenti con i gettoni.                                                  */
.table-header{
  border-bottom:1px solid var(--glass-edge);
}
.table-title{
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.006em;
}

/* -------------------------------------------- 5.2 · Corpo della tabella --
   Righe: un filo sottilissimo a separarle, niente zebratura pesante.
   Al passaggio del mouse la riga si schiarisce appena — via background
   sul <tr>, che i <td> lasciano trasparire perché non hanno un fondo
   proprio (tranne .sticky-col, gestita a parte in 5.4).
   NIENTE backdrop-filter qui: sono centinaia di righe, il blur per
   ciascuna farebbe inginocchiare lo scroll.                                */
.data-table td,
.attivazioni-table td,
.regioni-table td{
  color:var(--ink-2);
  border-bottom:1px solid var(--glass-edge);
}

.data-table tbody tr:hover,
.attivazioni-table tbody tr:hover,
.regioni-table tbody tr:hover{
  background:var(--glass-2);
}

/* L'ingrandimento-al-volo della cella (produzione: overflow visibile,
   testo che va a capo) resta intatto: cambiamo solo il colore del fondo,
   non la meccanica — è quella che permette di leggere un valore troncato
   senza aprire un modale. */
.attivazioni-table td:hover{
  background:var(--glass-3);
}

/* Riga totali di regioni-table: testo pieno, non attenuato come le righe
   normali, per leggersi come somma e non come un dato qualunque. */
.regioni-table tfoot{
  background:var(--glass-1);
}
.regioni-table tfoot td{
  color:var(--ink);
  font-weight:600;
  border-top:1px solid var(--glass-edge-hi);
}

/* ------------------------------------------ 5.3 · Etichetta d'intestazione
   thead diventa un'etichetta: minuscola+maiuscoletta, spaziata, terziaria
   di colore. Appiccicata in alto quando la tabella scorre in verticale
   (il contenitore .table-scroll-container ha già overflow-y:auto e
   un'altezza massima in produzione, quindi lo scroll verticale esiste
   davvero su ogni tabella, non solo su quella delle attivazioni).
   Il fondo non può essere un semplice --glass-*: sotto scorrono le righe,
   e una lastra trasparente lascerebbe intravedere il testo che passa.
   Per questo affianchiamo un velo di vetro (tinta) a un fondo pieno
   (--ground) con due livelli di background sullo stesso elemento: niente
   colore scritto a mano, solo gettoni combinati.                          */
.data-table th,
.attivazioni-table th,
.regioni-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(var(--glass-3),var(--glass-3)),var(--ground);
  color:var(--ink-3);
  font-weight:600;
  text-transform:lowercase;
  font-variant:small-caps;
  letter-spacing:.08em;
  border-bottom:1px solid var(--glass-edge-hi);
}

/* -------------------------------------------- 5.4 · Prima colonna fissa --
   .sticky-col (già position:sticky;left:0 in produzione) tiene la riga
   leggibile mentre si scorre in orizzontale una tabella di 49 colonne.
   Stesso ragionamento del punto 5.3: fondo pieno via doppio background,
   mai un --glass-* da solo, altrimenti le colonne che scorrono sotto si
   vedrebbero in trasparenza attraverso la colonna fissa.
   Sulla cella d'angolo (th.sticky-col) serve lo stesso trattamento
   dell'intestazione, così l'angolo non stona rispetto al resto della riga
   d'intestazione quando si scorre in entrambe le direzioni insieme.       */
.sticky-col{
  background:linear-gradient(var(--glass-2),var(--glass-2)),var(--ground);
  color:var(--ink);
  font-weight:500;
}
.data-table th.sticky-col,
.attivazioni-table th.sticky-col{
  background:linear-gradient(var(--glass-3),var(--glass-3)),var(--ground);
  color:var(--ink-3);
}
/* La colonna fissa deve rispondere all'hover della riga come le altre
   celle, altrimenti resterebbe "spenta" mentre il resto della riga si
   illumina: qui il fondo pieno va rifatto sopra il velo di hover. */
.data-table tbody tr:hover .sticky-col,
.attivazioni-table tbody tr:hover .sticky-col{
  background:linear-gradient(var(--glass-3),var(--glass-3)),var(--ground);
}

/* -------------------------------------- 5.5 · Scorrimento orizzontale --
   Solo il contenitore scorre, mai la pagina: la barra è sottile e in
   tono col vetro invece che la barra di sistema grigia di produzione.    */
.table-scroll-container::-webkit-scrollbar-track{
  background:transparent;
}
.table-scroll-container::-webkit-scrollbar-thumb{
  background:var(--glass-3);
  border-radius:var(--r-pill);
}
.table-scroll-container::-webkit-scrollbar-thumb:hover{
  background:var(--glass-edge-hi);
}

/* --------------------------------------- 5.6 · Cifre incolonnate a destra
   Non esiste in produzione una classe "colonna numerica": le colonne di
   importi/conteggi vengono allineate qui per posizione, tabella per
   tabella, solo dove il contenuto è verificabilmente un numero (letto
   dalle intestazioni reali in index.html). Meglio poche colonne giuste
   che un nth-child alla cieca su tabelle che non abbiamo verificato.
   .col-hidden nasconde con display:none ma non sposta le colonne nel DOM:
   la posizione nth-child resta valida a prescindere da quali sono visibili.
   font-variant-numeric:tabular-nums è già globale (vedi 01), qui serve
   solo l'allineamento.                                                    */

/* Dettaglio attivazioni: N· · Canone CTR · Provv. Yoyomove · Anticipo ·
   Provv. Consulente · Diff. Date (gg) */
#attivazioni-table th:nth-child(3),  #attivazioni-table td:nth-child(3),
#attivazioni-table th:nth-child(14), #attivazioni-table td:nth-child(14),
#attivazioni-table th:nth-child(15), #attivazioni-table td:nth-child(15),
#attivazioni-table th:nth-child(36), #attivazioni-table td:nth-child(36),
#attivazioni-table th:nth-child(39), #attivazioni-table td:nth-child(39),
#attivazioni-table th:nth-child(46), #attivazioni-table td:nth-child(46){
  text-align:right;
}

/* Regioni: Totale · B2B · B2C · Provvigioni (€) · % sul Totale */
#regioni-table th:nth-child(n+2),
#regioni-table td:nth-child(n+2),
#regioni-table tfoot td:nth-child(n+2){
  text-align:right;
}

/* Fatturato consulenti: Dichiarato · Reale */
#fatt-table th:nth-child(4), #fatt-table td:nth-child(4),
#fatt-table th:nth-child(5), #fatt-table td:nth-child(5){
  text-align:right;
}

/* ------------------------------------------------ 5.7 · Pastiglie di stato
   .esito-badge (dettaglio attivazioni, log) e .status-badge (rinnovi):
   fondo -soft del colore semantico, testo pieno, angolo a pillola.
   Confermato→won, respinto/annullato→lost, in corso→live,
   attesa/informazioni mancanti/garanzia da chiarire→wait (arancio, MAI
   il giallo del marchio).                                                 */
.esito-badge,
.status-badge{
  border-radius:var(--r-pill);
}

.esito-badge.approvata,
.esito-badge.approvata-condizione,
.esito-badge.approvata-senza-contratto,
.esito-badge.approvata-con-contratto,
.status-badge.success{
  background:var(--won-soft);
  color:var(--won);
}

.esito-badge.respinta,
.esito-badge.approvata-annullata,
.status-badge.danger{
  background:var(--lost-soft);
  color:var(--lost);
}

.esito-badge.in-corso{
  background:var(--live-soft);
  color:var(--live);
}

.esito-badge.info-mancanti,
.esito-badge.richiesta-garanzia,
.status-badge.warning{
  background:var(--wait-soft);
  color:var(--wait);
}

/* --------------------------------------------------- 5.8 · Righe cliccabili
   .clickable-row è la classe esplicita di produzione. Alcune righe (es.
   dettaglio fatturato) non hanno una classe ma hanno un onclick diretto
   sul <tr>: selettore d'attributo, zero HTML toccato, stesso risultato. */
.data-table tbody tr.clickable-row,
.data-table tbody tr[onclick],
.attivazioni-table tbody tr[onclick]{
  cursor:pointer;
}
.data-table tbody tr.clickable-row:hover,
.data-table tbody tr[onclick]:hover,
.attivazioni-table tbody tr[onclick]:hover{
  background:var(--glass-2);
}

/* ---------- 06-modali.css ---------- */
/* =========================================================================
   06 · MODALI
   Overlay, pannello, testata/piede fissi con corpo che scorre, campi del
   modulo contratto (.ccc-*). Tutti i colori vengono dai gettoni di 01.
   ========================================================================= */

/* ------------------------------------------------------------- 6.1 · Velo --
   app.js apre/chiude le modali scrivendo style.display sull'overlay: non
   dobbiamo MAI toccare `display` qui, altrimenti restano bloccate aperte
   o non si aprono più. Restiliamo solo cio' che non governa la visibilità.
   Il colore di sfondo qui sotto non ha !important in produzione: la
   cascata naturale (noi carichiamo per ultimi) basta a vincere.            */
.modal-overlay{
  background:rgba(6,7,10,.72);
  backdrop-filter:blur(8px) saturate(1.3);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
}

/* --------------------------------------------------- 6.2 · Il pannello --
   `.modal-container` e `.modal-content` sono lo STESSO pannello: in
   produzione la seconda classe non ha mai avuto una regola propria, e le
   modali di Flotta (fl-modal-profilo, fl-import-modal, mkt-add-fonte-modal)
   che la usano si aprono senza sfondo, col testo che galleggia sulla
   pagina. Diamo alle due classi la stessa identica veste: il difetto
   sparisce senza toccare l'HTML.
   Niente `transform` qui: il pannello ospita <select> nativi (tendine di
   sistema) e in .ccc-modal-container anche le validazioni; un `transform`
   sull'ascendente creerebbe un contesto di impilamento che le porterebbe
   sotto. La `transform: scale()` di apertura che c'era già in produzione
   (sull'animazione .modal-overlay.active .modal-container) non la
   tocchiamo: non è nostra e non la aggiungiamo altrove.                    */
.modal-container,
.modal-content,
.ccc-modal-container{
  background:var(--glass-2);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge-hi);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3), inset 0 1px 0 var(--glass-spec);
}

/* #mkt-budget-modal ha una regola ID-specifica in styles.css
   (`#mkt-budget-modal .modal-content{background:#12141A...}`) che per
   specificità (ID) batte la nostra `.modal-content` di sopra: senza
   questa riga quella singola modale resterebbe con la lastra piatta
   vecchia invece del vetro. La riscriviamo qui con lo stesso selettore
   ID, così torna coerente col resto.                                      */
#mkt-budget-modal .modal-content{
  background:var(--glass-2);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge-hi);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3), inset 0 1px 0 var(--glass-spec);
}

/* Tema chiaro: stessa lastra di vetro, non un pannello bianco piatto —
   il fondo atmosferico chiaro deve restare visibile in trasparenza. */
body.light-mode .modal-container,
body.light-mode .modal-content,
body.light-mode .ccc-modal-container,
body.light-mode #mkt-budget-modal .modal-content{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
}

/* ------------------------------------------------- 6.3 · Testata e piede --
   Restano fermi, il corpo scorre: alcuni moduli (compila contratto) sono
   lunghissimi. `.modal-body`/`.ccc-body` prendono l'altezza e lo scroll
   proprio; header/footer restano fuori dal flusso di scorrimento perché
   .ccc-modal-container è già flex-column in produzione (flex-shrink:0 su
   header/footer, flex:1 su .ccc-body) — qui aggiungiamo solo la pelle.
   Per i pannelli che NON usano lo schema flex ccc (.modal-container
   "semplice"), impostiamo il tetto massimo di scorrimento direttamente
   sul corpo, senza toccare max-height/overflow del contenitore: quello
   resta quello di produzione, che già limita il pannello a 90vh.          */
.modal-header,
.ccc-header{
  background:transparent;
  border-bottom:1px solid var(--glass-edge);
}
.modal-header h2,
.modal-header h3,
.ccc-header h2{
  color:var(--ink);
}
.modal-footer,
.ccc-footer{
  background:transparent;
  border-top:1px solid var(--glass-edge);
}

/* Tema chiaro: produzione aveva `body.light-mode .modal-header` e
   `body.light-mode .ccc-header/.ccc-footer` con sfondo BIANCO PIENO
   (#f8fafc) — più specifiche delle regole appena sopra (classe+classe
   contro classe sola), quindi in tema chiaro avrebbero vinto loro e la
   testata sarebbe tornata un pannello opaco invece che vetro. Le
   riscriviamo qui con lo stesso livello di specificità.                   */
body.light-mode .modal-header,
body.light-mode .ccc-header,
body.light-mode .ccc-footer,
body.light-mode #mkt-budget-modal .modal-header{
  background:transparent;
  border-color:var(--glass-edge);
}

/* Corpo che scorre. Non tocchiamo .modal-container/.modal-content che
   restano il limite esterno (90vh, già impostato da produzione): qui
   diamo al corpo un tetto proprio così i pulsanti in fondo restano
   raggiungibili anche nei moduli più lunghi, senza tagliare contenuto. */
.modal-body{
  max-height:min(70vh,640px);
  overflow-y:auto;
}
/* .ccc-body ha già flex:1/overflow-y:auto da produzione dentro un
   contenitore flex-column: non serve toccare l'altezza, solo la pelle
   della barra di scorrimento (coerente col resto del tema, vedi 01.5). */
.ccc-body::-webkit-scrollbar-thumb{background:var(--glass-3)}
.ccc-body::-webkit-scrollbar-track{background:transparent}

/* Sezioni interne del modulo (separatori tra blocchi di campi). */
.modal-section{
  border-bottom-color:var(--glass-edge);
}
.modal-section-title,
.ccc-readonly-title,
.ccc-form-title{
  color:var(--ink-3);
}
.ccc-readonly-section{
  background:var(--glass-1);
  border-bottom-color:var(--glass-edge);
}
/* Stesso motivo di sopra: `body.light-mode .ccc-readonly-section` in
   produzione è opaco (#f1f5f9) e più specifico della regola sola sopra. */
body.light-mode .ccc-readonly-section{
  background:var(--glass-1);
  border-color:var(--glass-edge);
}
.ccc-ro-label{color:var(--ink-3)}
.ccc-ro-value{color:var(--ink)}

/* -------------------------------------------------------- 6.4 · Chiusura --
   Da X nuda a bottone tondo in vetro: un target di tocco vero, non un
   carattere che galleggia. */
.modal-close{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  color:var(--ink-2);
}
.modal-close:hover{
  background:var(--lost-soft);
  border-color:var(--lost);
  color:var(--lost);
}
/* #mkt-budget-modal ha anche una `.modal-close` ID-specifica in
   produzione (background:none, niente bordo): stesso motivo di 6.2,
   senza questa riga qui restava una "×" nuda invece del bottone tondo. */
#mkt-budget-modal .modal-close{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  color:var(--ink-2);
}
#mkt-budget-modal .modal-close:hover{
  background:var(--lost-soft);
  color:var(--lost);
}

/* --------------------------------------------------------- 6.5 · Pulsanti --
   Primario: giallo pieno, testo scuro leggibile sopra il giallo.
   Secondario: vetro con bordo, si schiarisce al passaggio.
   Distruttivo (annulla/elimina): rosso 'lost', mai giallo — il giallo qui
   significherebbe "azione di marca", non "attenzione, cancelli qualcosa". */
.btn-modal{
  border-radius:var(--r-sm);
  transition:background var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             color var(--speed) var(--ease),
             filter var(--speed) var(--ease);
}
.btn-modal-primary{
  background:var(--accent);
  color:var(--on-accent);
}
.btn-modal-primary:hover{
  filter:brightness(1.08);
}
.btn-modal-secondary{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.btn-modal-secondary:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.btn-modal-warning{
  background:var(--lost);
  color:var(--on-accent);
}
.btn-modal-warning:hover{
  filter:brightness(1.08);
}

.ccc-btn-primary{
  background:var(--accent);
  color:var(--on-accent);
}
.ccc-btn-primary:hover:not(:disabled){
  filter:brightness(1.08);
  background:var(--accent);
}
.ccc-btn-secondary{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.ccc-btn-secondary:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}

/* ------------------------------------------------- 6.6 · Campi .ccc-* --
   Stessa grammatica dei filtri: vetro rialzato, bordo che schiarisce al
   passaggio, bordo giallo + alone al fuoco. */
.ccc-label{
  color:var(--ink-2);
  font-weight:700;
}
.ccc-field-hint{color:var(--ink-3)}
.ccc-field-error{color:var(--lost)}
.ccc-error-banner{
  background:var(--lost-soft);
  border:1px solid var(--lost);
  color:var(--lost);
}

.ccc-input{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  color:var(--ink);
  transition:border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease),
             background var(--speed) var(--ease);
}
.ccc-input::placeholder{color:var(--ink-3)}
.ccc-input:hover:not(:disabled):not([readonly]){
  border-color:var(--glass-edge-hi);
}
.ccc-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}

/* Campi calcolati/di sola lettura: oggi sembravano modificabili come gli
   altri e confondevano chi compila. Fondo più spento, testo secondario,
   NESSUN alone al fuoco (togliamo lo stato :focus per questi due soli
   modificatori, il campo resta comunque non modificabile via HTML). */
.ccc-input-auto,
.ccc-input-readonly{
  background:var(--track);
  border-color:var(--glass-edge);
  color:var(--ink-2);
}
.ccc-input-auto:focus,
.ccc-input-readonly:focus{
  box-shadow:none;
  border-color:var(--glass-edge);
}

/* Tema chiaro: stessi ruoli, nessun colore scritto qui alla lettera — i
   valori arrivano dai gettoni di 01 (che a oggi non ha ancora un blocco
   body.light-mode proprio: finché non ce l'ha, questi campi restano sul
   valore scuro dei gettoni, coerenti col resto del pannello che è nello
   stesso stato). Le regole qui sotto esistono solo per battere le regole
   body.light-mode già opache di produzione, non per invertire colori. */
body.light-mode .ccc-label,
body.light-mode .ccc-readonly-title,
body.light-mode .ccc-form-title,
body.light-mode .ccc-ro-label{
  color:var(--ink-2);
}
body.light-mode .ccc-ro-value{color:var(--ink)}
body.light-mode .ccc-input{
  background:var(--glass-1);
  border-color:var(--glass-edge);
  color:var(--ink);
}
body.light-mode .ccc-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
body.light-mode .ccc-input-auto,
body.light-mode .ccc-input-readonly{
  background:var(--track);
  color:var(--ink-2);
}

/* ---------- 07-board.css ---------- */
/* =========================================================================
   07 · BOARD RINNOVI (Kanban) + LANDING VOLT
   Ridipinge rinnovi-board.css (820+ righe, board a colonne + sezione
   "Contratti Persi") e landing-volt.css (la landing di sezione "Flotta &
   Rinnovi"). Nessuna riga di quei due file viene toccata: qui si vince
   per cascata, essendo hub-theme.css caricato per ultimo (stessa
   specificità → l'ultima dichiarazione vince, vedi build.sh).
   Le colonne e le card della board sono generate a runtime da flotta.js
   (renderRinnoviBoard / _boardCardHTML): con lo strumento di prova a
   JavaScript disattivato NON compaiono — vestite "alla cieca" leggendo
   il sorgente, non viste. La landing invece è markup statico e si vede.
   ========================================================================= */

/* =========================================================================
   7.1 · RB-COL — le colonne sono lastre di vetro
   Layout INTOCCATO: fitBoardColumns() in flotta.js calcola --rb-col-w in
   px e lo scrive su .rinnovi-board ad ogni resize/render — è già quel
   meccanismo (non flex:1 1 0 nostro) a garantire che le 5 colonne entrino
   nella larghezza disponibile senza scroll orizzontale di pagina. Se
   sovrascrivessimo width/flex/max-width romperemmo i calcoli di JS.
   ========================================================================= */
.rb-col{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-top:3px solid var(--rb-accent, var(--off));
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}

/* Accenti di colonna rimappati sui gettoni di stato: stessa gerarchia di
   prima (attesa → in contatto → myboard → attivazione → esito), ma presa
   dalla stessa tavolozza semantica usata ovunque nel resto del tema. */
.rb-col1{ --rb-accent:var(--off); }    /* Pendenti — neutro */
.rb-col2{ --rb-accent:var(--wait); }   /* In contatto — attesa */
.rb-col3{ --rb-accent:var(--live); }   /* MyBoard — in corso */
.rb-col4{ --rb-accent:var(--hold); }   /* Attivazione — in sospeso */
.rb-col5{ --rb-accent:var(--won); }    /* Esito — chiuso */

.rb-col-head{
  background:linear-gradient(180deg, var(--glass-2) 0%, transparent 100%);
  border-bottom:1px solid var(--glass-edge);
}
.rb-col-title{ color:var(--ink); }
.rb-col-desc{ color:var(--ink-3); }

/* Contatore su fondo --track, come richiesto: il vetro sopra il vetro
   della colonna sparirebbe, la traccia resta leggibile in ogni tema. */
.rb-col-counter{ background:var(--track); color:var(--ink); }

.rb-empty{ color:var(--ink-3); }
.rb-empty-title{ color:var(--ink-2); }
.rb-empty-message{ color:var(--ink-3); }
.rb-empty .empty-hint{ color:var(--ink-3); }
.rb-empty--filtered{ color:var(--wait); }

/* =========================================================================
   7.2 · CHIP E PILLOLE DI FILTRO — restano piatte, mai vetro
   Regola del preambolo: niente backdrop-filter su chip/pastiglie (costa
   e toglie leggibilità quando sono tante). Solo retinte sui gettoni.
   ========================================================================= */
.rb-chip{ background:var(--track); border-color:var(--glass-edge); color:var(--ink-2); }
.rb-chip:hover{ background:var(--glass-2); border-color:var(--rb-accent, var(--glass-edge-hi)); color:var(--ink); }
.rb-chip.active{ background:var(--rb-accent, var(--accent)); color:var(--on-accent); }
.rb-chip-reset{ color:var(--lost); }
.rb-chip-reset:hover{ border-color:var(--lost); color:var(--lost); }

.rb-chips-toggle{ background:var(--track); border-color:var(--glass-edge); color:var(--ink-3); }
.rb-chips-toggle:hover{ background:var(--glass-2); color:var(--ink); border-color:var(--glass-edge-hi); }
.rb-chips-toggle.has-active{ color:var(--rb-accent, var(--ink)); border-color:var(--rb-accent, var(--glass-edge)); }
.rb-chips-toggle-count{ background:var(--rb-accent, var(--accent)); color:var(--on-accent); }

.rb-scad-row{ border-top-color:var(--glass-edge); }
.rb-scad-prefix{ color:var(--ink-3); }
.rb-scad-pill{ border-color:var(--glass-edge); color:var(--ink-2); }
.rb-scad-pill:hover{ background:var(--glass-2); color:var(--ink); border-color:var(--glass-edge-hi); }
.rb-scad-pill.active{ background:var(--glass-3); color:var(--ink); border-color:var(--glass-edge-hi); }
.rb-scad-pill-count{ background:var(--track); color:var(--ink-2); }
.rb-scad-pill.active .rb-scad-pill-count{ background:rgba(0,0,0,.35); color:var(--ink); }

.rb-consulente-input{ background:var(--track); border-color:var(--glass-edge); color:var(--ink); }
.rb-consulente-input::placeholder{ color:var(--ink-3); }
.rb-consulente-input:focus{ border-color:var(--rb-accent, var(--accent)); }
.rb-consulente-clear{ color:var(--ink-3); }
.rb-consulente-clear:hover{ color:var(--lost); background:var(--lost-soft); }

/* =========================================================================
   7.3 · RB-CARD — vetro leggero, MAI sfocato
   Sono decine per colonna: un backdrop-filter per card affonderebbe lo
   scroll. Il colore di sfondo semitrasparente basta a leggersi come
   "lastra sottile" contro il fondo atmosferico, senza costo di blur.
   ========================================================================= */
.rb-card{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  border-left:3px solid var(--glass-edge-hi); /* fallback fascia, vedi 7.4 */
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
.rb-card:hover{
  border-color:var(--rb-accent, var(--glass-edge-hi));
  /* transform:translateY(-1px) già in rinnovi-board.css — non duplicato,
     qui aggiungiamo solo il colore del bordo al passaggio del mouse. */
}

.rb-name{ color:var(--ink); }
.rb-meta{ color:var(--ink-3); }
.rb-consulente-name{ color:var(--ink); }

/* ---- 7.4 · Fascia di scadenza sul bordo sinistro della card --------------
   flotta.js non aggiunge una classe di stato alla card: scrive il colore
   della scadenza inline su .rb-scad (style="color:#hex", vedi
   _boardScadInfo() in flotta.js). Senza poter toccare il JS, leggiamo
   quello stesso colore con :has() + selettore d'attributo sul valore
   letterale dell'attributo style (che il browser conserva testuale finché
   nessuno tocca .style via JS — qui non succede). :has() è supportato da
   tutti i motori evergreen dal 2023-24, quindi è una base solida.
   Sono solo 3 fasce reali nei dati odierni (scaduto/urgente ≤30gg/
   tranquillo) più la "scadenza ipotetica" (viola, non è una vera fascia
   di rischio). Non esiste un quarto colore "prossimo" lato dati: se in
   futuro flotta.js lo introduce, va solo aggiunta una riga qui sotto. */
.rb-card:has(.rb-scad[style*="color:#ef4444" i]){ border-left-color:var(--lost); }   /* scaduto */
.rb-card:has(.rb-scad[style*="color:#f59e0b" i]){ border-left-color:var(--wait); }   /* ≤30gg alla scadenza */
.rb-card:has(.rb-scad[style*="color:#8b8f98" i]){ border-left-color:var(--off); }    /* tranquillo / nessuna scadenza */
.rb-card:has(.rb-scad[style*="color:#a78bfa" i]){ border-left-color:var(--hold); }   /* scadenza ipotetica */

/* =========================================================================
   7.5 · BADGE E STATI SULLA CARD
   ========================================================================= */
.rb-badge-unassigned{ background:var(--wait-soft); border-color:var(--wait); color:var(--wait); }
.rb-badge-match{ background:var(--won-soft); border-color:var(--won); color:var(--won); }

.rb-badge-esito.confermato{ background:var(--won-soft); color:var(--won); border-color:var(--won); }
.rb-badge-esito.perso{ background:var(--lost-soft); color:var(--lost); border-color:var(--lost); }
.rb-badge-esito.archiviato{ background:var(--off-soft); color:var(--ink-2); border-color:var(--glass-edge); }

.rb-badge-att.approvata{ background:var(--won-soft); color:var(--won); }
.rb-badge-att.condizione{ background:var(--wait-soft); color:var(--wait); }
.rb-badge-att.senza-contratto{ background:var(--live-soft); color:var(--live); }
.rb-badge-att.info-mancanti{ background:var(--wait-soft); color:var(--wait); }
.rb-badge-att.garanzia{ background:var(--hold-soft); color:var(--hold); }
.rb-badge-att.in-corso{ background:var(--track); color:var(--ink-3); }

.rb-days-contact{ color:var(--wait); }
.rb-hint{ color:var(--ink-3); }

.rb-myboard-btn{ background:var(--wait-soft); border-color:var(--wait); color:var(--wait); }
.rb-myboard-btn:hover{ background:var(--wait-soft); filter:brightness(1.15); }
.rb-myboard-input{ background:var(--track); border-color:var(--wait); color:var(--ink); }
.rb-myboard-input:focus{ border-color:var(--wait); }
.rb-myboard-help{ color:var(--ink-3); }
.rb-myboard-save{ background:var(--won); color:var(--on-accent); }
.rb-myboard-cancel{ background:var(--track); color:var(--ink-3); }
.rb-myboard-cancel:hover{ color:var(--ink); }
.rb-myboard-chip{ background:var(--live-soft); border-color:var(--live); color:var(--live); }

.rb-dev-btn{ border-color:var(--hold); color:var(--hold); }
.rb-dev-btn:hover{ border-color:var(--hold); color:var(--ink); }
.rb-dev-tag{ background:var(--hold); color:var(--on-accent); }

/* =========================================================================
   7.6 · CONNETTORE, TAB MOBILE
   ========================================================================= */
.rb-connector{ color:var(--glass-edge-hi); }
.rb-connector::before{ border-top-color:var(--glass-edge); }

.rb-mobile-tab{ background:var(--glass-1); border-color:var(--glass-edge); color:var(--ink-3); }
.rb-mobile-tab.active{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
.rb-mobile-tab-count{ background:var(--track); }

/* =========================================================================
   7.7 · KPI STRIP (fl-kpi-*) — fascia compatta sopra la board
   ========================================================================= */
.fl-kpi-strip{ background:var(--glass-1); border-color:var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-spec); }
.fl-kpi-cell{ border-right-color:var(--glass-edge); }
.fl-kpi-cell--hero{ background:linear-gradient(135deg, var(--glass-2) 0%, transparent 100%); }
.fl-kpi-cell-val{ color:var(--ink); }
.fl-kpi-cell-lbl{ color:var(--ink-3); }
.fl-kpi-cell--orange .fl-kpi-cell-val{ color:var(--wait); }
.fl-kpi-cell--blue .fl-kpi-cell-val{ color:var(--live); }
.fl-kpi-cell--green .fl-kpi-cell-val{ color:var(--won); }
.fl-kpi-cell--red .fl-kpi-cell-val{ color:var(--lost); }
.fl-kpi-cell--gray .fl-kpi-cell-val{ color:var(--ink-3); }
.fl-kpi-cell--purple .fl-kpi-cell-val{ color:var(--hold); }

/* =========================================================================
   7.8 · SEZIONE "CONTRATTI PERSI" — pannello secondario, subordinato
   Sotto la board, richiudibile (di default chiusa via [hidden], invariato).
   Meno vetro delle colonne (niente border-top colorato, raggio più
   piccolo, ombra più leggera): si legge come annesso, non come pari
   grado della board principale. Tinta rossa coerente con --lost, non più
   un rosso a sé stante.
   ========================================================================= */
.rp-persi-toggle{
  background:var(--lost-soft);
  border-color:color-mix(in srgb, var(--lost) 35%, transparent);
  color:var(--ink);
}
.rp-persi-toggle:hover{
  background:color-mix(in srgb, var(--lost) 16%, transparent);
  border-color:var(--lost);
}
.rp-persi-toggle:focus-visible{ outline-color:var(--lost); }
.rp-persi-caret{ color:var(--lost); }
.rp-persi-count{
  background:color-mix(in srgb, var(--lost) 18%, transparent);
  color:var(--lost);
  border-color:color-mix(in srgb, var(--lost) 30%, transparent);
}

.rp-persi-panel{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
}
.rp-persi-search, .rp-persi-select{
  background:var(--track);
  border-color:var(--glass-edge);
  color:var(--ink);
}
.rp-persi-search:focus, .rp-persi-select:focus{ border-color:var(--wait); }
.rp-persi-tbl thead th{ color:var(--ink-3); border-bottom-color:var(--glass-edge); background:var(--track); }
.rp-persi-tbl tbody tr{ border-bottom-color:var(--glass-edge); }
.rp-persi-tbl tbody tr:hover{ background:var(--glass-2); }
.rp-persi-tbl tbody td{ color:var(--ink-2); }
.rp-persi-tbl tbody td.rp-persi-num{ color:var(--ink); }
.rp-persi-tbl tbody td strong{ color:var(--ink); }
.rp-persi-tbl tbody td.rp-persi-muted{ color:var(--ink-3); }
.rp-persi-empty{ color:var(--ink-3); }

.rp-motivo-rinnovo_no{ background:var(--lost-soft); color:var(--lost); border-color:color-mix(in srgb, var(--lost) 30%, transparent); }
.rp-motivo-respinta{ background:var(--wait-soft); color:var(--wait); border-color:color-mix(in srgb, var(--wait) 30%, transparent); }

/* =========================================================================
   7.9 · LANDING VOLT (#fl-landing) — stessa grammatica del resto
   I gettoni --lv-* sono scoped su #fl-landing.lv-landing: ridefinendoli
   qui (stessa selettore, file caricato dopo) si retinge l'intera landing
   in un colpo solo, senza toccare le ~150 dichiarazioni che li usano.
   --lv-amber diventa il giallo di marchio pieno (è la metrica hero
   "Pendenti", il momento più da-brand della pagina); --lv-amber-warm
   resta arancio (stati di attesa/allerta) per non usare il giallo come
   "attenzione", come da regola del preambolo.
   ========================================================================= */
#fl-landing.lv-landing{
  --lv-glass-bg:var(--glass-1);
  --lv-glass-border:var(--glass-edge);
  --lv-bg:var(--on-accent);      /* usato solo come colore testo sopra --lv-accent al hover della CTA */
  --lv-ink:var(--ink);
  --lv-muted:var(--ink-2);
  --lv-amber:var(--accent);
  --lv-amber-warm:var(--wait);
  --lv-blue:var(--live);
  --lv-blue-tenue:var(--live);
  --lv-green:var(--won);
  --lv-red:var(--lost);
  --lv-violet:var(--hold);
  --lv-gray:var(--ink-3);
}

/* Pannelli: stessa ricetta di vetro del resto del tema (blur+saturate
   dal gettone, non più il valore fisso 40px scritto a mano). */
#fl-landing.lv-landing .lv-panel{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6) brightness(1.08);
  border-color:var(--glass-edge);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}
#fl-landing.lv-landing .lv-panel::before{
  background:linear-gradient(90deg, transparent, var(--glass-spec), transparent);
}
#fl-landing.lv-landing .lv-panel:hover{ border-color:var(--glass-edge-hi); }
#fl-landing.lv-landing .lv-panel-index{ color:var(--ink-3); }

/* Chip della landing: sono pastiglie, non contenitori — via il vetro
   (blur(20px) in produzione), stessa regola delle chip della board. */
#fl-landing.lv-landing .lv-chip{
  background:var(--track);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:var(--glass-edge);
}
#fl-landing.lv-landing .lv-chip-label{ color:var(--ink-2); }
#fl-landing.lv-landing .lv-chip-value{ color:var(--ink); }

#fl-landing.lv-landing .lv-pendenti-label{ color:var(--accent-2); }
#fl-landing.lv-landing .lv-micro-copy{ color:var(--ink-3); }
#fl-landing.lv-landing .lv-hero-sub p{ color:var(--ink-3); }
#fl-landing.lv-landing .lv-panel-heading{ color:var(--ink); }

/* Le due dichiarazioni sotto in landing-volt.css scrivono #f59e0b e
   #f0f2f7 alla lettera (fuori dai gettoni --lv-*, dentro il blocco "FIX
   LAYOUT" più recente): le rimappiamo qui una per una. */
#fl-landing.lv-landing .lv-rule{ background:var(--accent); }
#fl-landing.lv-landing .lv-kpi-giant{ color:var(--accent); }
#fl-landing.lv-landing .lv-hero-title{ color:var(--ink); }

#fl-landing.lv-landing .lv-cta{
  background:var(--glass-2);
  border-color:var(--glass-edge);
  color:var(--ink);
}
#fl-landing.lv-landing .lv-cta:hover{ color:var(--lv-bg); }

#fl-landing.lv-landing .lv-tag{ background:color-mix(in srgb, var(--lv-accent) 12%, transparent); border-color:color-mix(in srgb, var(--lv-accent) 45%, transparent); }

/* ------------------------------------------------ 7.10 · L'AURORA, DOMATA --
   DIFETTO TROVATO IN PRODUZIONE, e causato da questo tema.

   `landing-volt.css` dipinge dietro la landing di Flotta uno strato
   `.lv-aurora` in `position:fixed; inset:0`, con sei macchie sfocate in
   `mix-blend-mode: screen`. Funzionava perché sotto c'era un nero piatto:
   lo `screen` su nero schiarisce appena.

   Il nostro fondo però non è più piatto — sono quattro gradienti colorati —
   e `screen` contro colore non schiarisce: dilaga. Il risultato era un
   lavaggio verde/giallo/viola su tutta la finestra, barra laterale compresa
   (l'aurora è FISSA: copre il viewport, non la sezione, e la barra laterale
   è di vetro, quindi se la lasciava vedere attraverso).

   Due atmosfere sovrapposte sono una di troppo. Quella del tema resta, e
   l'aurora torna a fare quello per cui era nata: un alone locale dietro i
   pannelli. Niente fusione, opacità molto più bassa, sfocatura più larga. */
/* Primo e più importante: l'aurora smette di essere FISSA sulla finestra e
   torna dentro la sua sezione, di cui è figlia. Da fissa copriva il viewport
   intero e trapassava il vetro della barra laterale e dell'header, che sono
   traslucidi: era quello a tingere di verde mezza applicazione. */
#fl-landing.lv-landing{position:relative;isolation:isolate}
#fl-landing.lv-landing .lv-aurora,
#fl-landing.lv-landing .lv-grain{position:absolute}

#fl-landing.lv-landing .lv-blob{
  mix-blend-mode:normal;
  filter:blur(170px) saturate(115%);
}
/* Non tutte le macchie pesano uguale. Al 7% pari per tutte, le due fredde e
   soprattutto la verde-lime si sommavano in un campo verdastro sopra il
   pannello dei rinnovi: verde, in questa tavolozza, vuol dire "confermato",
   e un fondo verde su un pannello di scadenze dice la cosa sbagliata.
   Le fredde scendono, la verde-lime resta appena percettibile. */
#fl-landing.lv-landing .lv-blob-purple,
#fl-landing.lv-landing .lv-blob-magenta,
#fl-landing.lv-landing .lv-blob-purple2{
  opacity:.055;
}
#fl-landing.lv-landing .lv-blob-cyan,
#fl-landing.lv-landing .lv-blob-iceblue{
  opacity:.035;
}
#fl-landing.lv-landing .lv-blob-chartreuse{
  opacity:.015;
}

/* Anche la grana della landing si sommava alla nostra: ne basta una. */
#fl-landing.lv-landing .lv-grain{
  mix-blend-mode:normal;
  opacity:.03;
}

/* ---------- 08-chiaro.css ---------- */
/* =========================================================================
   08 · TEMA CHIARO
   Questo file arriva per ultimo di proposito.

   In produzione il tema chiaro è fatto di 213 regole `body.light-mode .x`
   con i colori scritti a mano, una per una. Non le riscriviamo: ribaltiamo
   i GETTONI sotto `body.light-mode`, così tutto ciò che usa var() segue da
   solo, e poi neutralizziamo a mano soltanto le regole di produzione che
   scrivono un colore alla lettera e quindi non seguirebbero.

   La specificità è la stessa della produzione (`body.light-mode .classe`),
   ma questo foglio si carica dopo: a parità, vince l'ultimo.
   ========================================================================= */

/* -------------------------------------------------- 8.1 · I gettoni ------
   Obiettivo dichiarato dal committente: chiarissimo, che si legga tutto.
   Il vetro resta, ma le lastre sono quasi bianche: il testo non sta mai su
   una superficie ambigua. La luce colorata vive nel FONDO, non sotto le
   parole.                                                                   */
body.light-mode{
  --ground:#f1efe9;
  /* Il giallo di fondo era al 50%: su una pagina chiara diventava una
     macchia calda sopra la testata, non una luce d'ambiente. Sceso a .30,
     il fondo resta vivo ma il contenuto sta su carta, non su una velatura. */
  --amb-1:rgba(255,214,10,.30);
  --amb-2:rgba(76,141,255,.13);
  --amb-3:rgba(167,139,250,.10);
  --amb-4:rgba(255,214,10,.15);

  --glass-1:rgba(255,255,255,.80);
  --glass-2:rgba(255,255,255,.92);
  --glass-3:#ffffff;
  /* In chiaro il menu opaco e' carta bianca piena, staccata dal fondo
     avorio della pagina dall'ombra e dal bordo. */
  --surface-menu:#ffffff;
  --glass-edge:rgba(18,21,27,.13);
  --glass-edge-hi:rgba(18,21,27,.24);
  --glass-spec:rgba(255,255,255,.95);
  /* La traccia delle barre ha un gettone suo proprio per questo caso: in
     chiaro il vetro è quasi bianco e una traccia "vetro su vetro" sparirebbe. */
  --track:rgba(18,21,27,.10);

  /* Contrasto misurato su bianco: ink 17:1 · ink-2 7,4:1 · ink-3 4,6:1 */
  --ink:#0f1216;
  --ink-2:#4b535f;
  --ink-3:#6f7784;

  --accent:#ffd60a;
  --accent-2:#ffc400;
  /* Il giallo come TESTO va scurito, altrimenti su bianco non si legge:
     questo bruno dorato sta a 5,6:1. Il giallo pieno resta per i riempimenti. */
  --accent-text:#8a6500;
  --on-accent:#191400;
  --accent-soft:rgba(255,214,10,.26);
  --accent-line:rgba(190,146,0,.62);
  --accent-glow:rgba(255,214,10,.45);

  /* Semantici scuriti per restare leggibili su bianco (tutti ≥ 4,5:1) */
  --won:#0a7d45;  --won-soft:rgba(10,125,69,.13);
  --lost:#c8262b; --lost-soft:rgba(200,38,43,.12);
  --live:#1e56cf; --live-soft:rgba(30,86,207,.12);
  --hold:#5f3fce; --hold-soft:rgba(95,63,206,.12);
  --wait:#a45f00; --wait-soft:rgba(164,95,0,.14);
  --off:#6b727e;  --off-soft:rgba(107,114,126,.13);

  --shadow-1:0 1px 3px rgba(18,21,27,.07),0 6px 16px -10px rgba(18,21,27,.12);
  --shadow-2:0 12px 30px -14px rgba(18,21,27,.20);
  --shadow-3:0 30px 66px -24px rgba(18,21,27,.26);

  /* Gli stessi gettoni di produzione, ribaltati: sono usati in centinaia di
     regole che non tocchiamo mai una per una. */
  --hrv2-bg-elev-1:rgba(255,255,255,.80);
  --hrv2-bg-elev-2:rgba(255,255,255,.92);
  --hrv2-bg-elev-3:#ffffff;
  --hrv2-border:var(--glass-edge);
  --hrv2-border-strong:var(--glass-edge-hi);
  --hrv2-text-primary:var(--ink);
  --hrv2-text-secondary:var(--ink-2);
  --hrv2-text-tertiary:var(--ink-3);
  --hrv2-accent-green:var(--won);   --hrv2-accent-green-soft:var(--won-soft);
  --hrv2-accent-amber:var(--wait);  --hrv2-accent-amber-soft:var(--wait-soft);
  --hrv2-accent-red:var(--lost);    --hrv2-accent-red-soft:var(--lost-soft);
  --hrv2-accent-blue:var(--live);   --hrv2-accent-blue-soft:var(--live-soft);
  --hrv2-accent-violet:var(--hold); --hrv2-accent-violet-soft:var(--hold-soft);
}

/* ------------------------------------------------------ 8.2 · Il fondo ---
   Stesso campo atmosferico del tema scuro, ma su carta chiara: il giallo
   sale, il blu e il viola restano appena accennati.
   Serve !important perché `body.light-mode { background: #F5F6F8 }` in
   produzione ha specificità (0,2,0) contro il nostro `body` (0,0,1).       */
body.light-mode{
  background-color:var(--ground)!important;
  /* 2026-09-09 · stessa geometria del tema scuro (vedi 1.3). Qui NON c'e'
     lo strato di grana: su carta chiara i puntini sporcano il testo invece
     di dare consistenza — nel prototipo infatti e' spento (--grain:0). */
  background-image:
    radial-gradient(64% 53% at  98% -17%, var(--amb-1), transparent 66%),
    radial-gradient(73% 62% at -14%  67%, var(--amb-2), transparent 68%),
    radial-gradient(64% 56% at  47%  28%, var(--amb-3), transparent 70%),
    radial-gradient(67% 53% at  84% 114%, var(--amb-4), transparent 68%)!important;
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--ink);
}

/* ----------------------------------------------- 8.3 · Le due superfici --
   Header e barra laterale in produzione diventano bianco pieno con bordo
   grigio: qui tornano lastre di vetro, coerenti col tema scuro.            */
body.light-mode header,
body.light-mode #app-content > header,
body.light-mode .sidebar{
  background:var(--glass-1);
  border-color:var(--glass-edge);
  box-shadow:var(--shadow-1),inset 0 1px 0 var(--glass-spec);
  color:var(--ink);
}

/* Il marchio resta nero anche in chiaro: un marchio non si inverte. */
body.light-mode .logo,
body.light-mode .logo-text{color:var(--ink)}

/* ---------------------------------------- 8.4 · Landing Flotta in chiaro --
   `landing-volt.css` non ha una sola regola per il tema chiaro: era stata
   scritta dando per scontato un fondo scuro. I gettoni --lv-* sono già
   rimappati sui nostri (vedi 07-board.css) e quindi seguono da soli, ma il
   giallo usato COME TESTO no: su carta chiara sparisce.
   Qui il giallo-testo diventa il bruno dorato di --accent-text; il giallo
   pieno resta dov'è un riempimento (filetti, barre), che sul chiaro si
   legge benissimo.                                                          */
body.light-mode #fl-landing.lv-landing .lv-kpi-giant,
body.light-mode #fl-landing.lv-landing .lv-accent,
body.light-mode #fl-landing.lv-landing .lv-tag,
body.light-mode #fl-landing.lv-landing .lv-pendenti-label{
  color:var(--accent-text);
}

/* Il numero gigante a peso 300 su fondo chiaro è troppo esile per reggere
   quella dimensione: un filo più di corpo e resta leggero ma leggibile. */
body.light-mode #fl-landing.lv-landing .lv-panel-rinnovi .lv-kpi-giant{
  font-weight:400;
}

/* Etichette e testo minuto: in chiaro devono stare sul secondario vero,
   non su un grigio pensato per il fondo nero. */
body.light-mode #fl-landing.lv-landing .lv-panel-index,
body.light-mode #fl-landing.lv-landing .lv-micro-copy,
body.light-mode #fl-landing.lv-landing .lv-chip-label,
body.light-mode #fl-landing.lv-landing .lv-hero-sub p{
  color:var(--ink-2);
}
body.light-mode #fl-landing.lv-landing .lv-hero-title,
body.light-mode #fl-landing.lv-landing .lv-panel-heading,
body.light-mode #fl-landing.lv-landing .lv-chip-value{
  color:var(--ink);
}

/* ---------- 09-rifiniture-a.css ---------- */
/* =========================================================================
   09 · RIFINITURE A
   Caccia agli avanzi della vecchia tavolozza nelle sezioni: Contratti & KPI,
   Attivazioni (dettaglio), Regioni, Marketing, Mappa Attivazioni (Dashboard).
   I file 01→08 hanno già vestito guscio/schede/controlli/tabelle/modali/
   board: qui restano solo le regole di styles.css troppo specifiche (classi
   uniche, ID, inline style) che quelle passate generiche non raggiungevano
   e che quindi mostravano ancora blu/verde/ambra/indaco di sistema.
   ========================================================================= */

/* ---------------------------------------------- 9.1 · KPI — stato valori --
   .stat-change vive sotto "Nuovi/Ricorrenti": positivo/negativo sono stati
   veri (won/lost), "warning" è un'attesa, quindi arancio wait — mai il
   giallo del marchio. */
.stat-change.positive {
  background: var(--won-soft);
  color: var(--won);
}
.stat-change.negative {
  background: var(--lost-soft);
  color: var(--lost);
}
.stat-change.warning {
  background: var(--wait-soft);
  color: var(--wait);
}

/* --------------------------------------- 9.2 · KPI — riquadro Provvigioni
   Mini-riepilogo Rappel dentro la card e stessa sezione nel modal di
   dettaglio ("Provvigioni Totali" → apri dettaglio): tutto verde di
   sistema perché "rappel confermato" è concettualmente un esito positivo,
   quindi won, mai il marchio. */
.kpi-rappel-mini-total span:last-child {
  color: var(--won);
}
.kpi-rappel-item {
  background: var(--glass-2);
  border-color: var(--glass-edge);
}
.kpi-rappel-result {
  color: var(--won);
}
.kpi-rappel-total {
  background: var(--won-soft);
  border-color: var(--won);
}
.kpi-rappel-total-value {
  color: var(--won);
}

/* --------------------------------------- 9.3 · Dashboard — mini stat ----
   "Statistiche Rapide" (B2B/B2C/Nuovi/Usati): 4 tessere nidificate dentro
   un chart-card già di vetro. Stesso trattamento delle icone tonde dei
   pannelli (glass-2 + bordo), senza un secondo blur sopra il primo. */
.mini-stat {
  background: var(--glass-2);
  border-color: var(--glass-edge);
}

/* ------------------------------------------ 9.4 · Attivazioni — pulsanti
   "Aggiorna" era blu di sistema, "Esporta CSV" verde di sistema: non sono
   marchio (non sono l'azione primaria della barra), quindi restano stato/
   utilità come già trattato .btn-csv in 04 — qui solo le due classi
   gemelle che 04 non copriva. */
/* Il colore di questi due e' passato al file 15 (15.2), dove sono diventati
   neutri: il verde qui voleva dire "confermato" e il blu non voleva dire
   niente, su due comandi che scaricano un file e ricaricano una lista. */

/* "+ Nuova Attivazione" invece È l'azione primaria della sezione: era già
   ambra (#FBBF24), qui diventa marchio vero (giallo pieno + testo scuro),
   coerente con .btn-modal-primary. */
.btn-add-attivazione {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-add-attivazione:hover {
  background: var(--accent);
  filter: brightness(1.08);
}

/* Il pannello a tendina "Tutti i canali": stesso trattamento degli altri
   piccoli pannelli flottanti (vedi hrv2-ms-panel in 03), qui riscritto per
   la sua classe di produzione perché non condivide quel selettore. */
.multi-select-dropdown {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  backdrop-filter: blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.6);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}
.multi-select-item {
  color: var(--ink-2);
}
.multi-select-item-all {
  color: var(--ink-2);
}
.multi-select-item input[type="checkbox"] {
  accent-color: var(--live);
}

/* ------------------------------------------- 9.5 · Attivazioni — Contratti
   Le card "Da Firmare/Firmati/Annullati" dentro Contratti & KPI: badge di
   stato, etichetta blu dei meta-dati, bottone verde "Compila" e il suo
   gemello indaco "Modifica" (tab Firmati). Stesso schema semantico degli
   .esito-badge già tradotti in 05: verde/teal→won, ambra→wait, indaco→hold,
   blu→live. */
.contratto-card {
  background: var(--glass-1);
  border-color: var(--glass-edge);
}
.contratto-card:hover {
  border-color: var(--glass-edge-hi);
}
.contratto-badge-approvata {
  background: var(--won-soft);
  color: var(--won);
  border-color: var(--won);
}
.contratto-badge-condizione {
  background: var(--wait-soft);
  color: var(--wait);
  border-color: var(--wait);
}
.contratto-badge-firmato {
  background: var(--won-soft);
  color: var(--won);
  border-color: var(--won);
}
.contratto-meta-label {
  color: var(--live);
}
.btn-compila-contratto {
  background: var(--won-soft);
  color: var(--won);
  border-color: var(--won);
}
.btn-compila-contratto:hover {
  filter: brightness(1.15);
}
.btn-modifica-contratto {
  background: var(--hold-soft);
  color: var(--hold);
  border-color: var(--hold);
}
.btn-modifica-contratto:hover {
  filter: brightness(1.15);
}
.contratti-count-label,
.contratti-loading,
.contratti-empty {
  color: var(--ink-2);
}
.contratti-error {
  color: var(--lost);
}

/* -------------------------------------------------- 9.6 · Marketing -----
   Valori CPA (buono/medio/alto), colonna Budget quando impostato, bottone
   "+ Aggiungi Fonte" e "Imposta Budget", righe cancellabili: stesso blu di
   sistema ovunque in produzione → live; ambra "medio" è un'attesa → wait;
   rosso "alto"/elimina → lost. */
.mkt-budget-cell.has-budget {
  color: var(--live);
}
.mkt-cpa-value.good {
  color: var(--won);
}
.mkt-cpa-value.medium {
  color: var(--wait);
}
.mkt-cpa-value.high {
  color: var(--lost);
}
.mkt-cpa-value.na {
  color: var(--ink-3);
}
.mkt-btn-budget {
  color: var(--ink-2);
}
.mkt-btn-budget:hover {
  border-color: var(--live);
  color: var(--live);
}
.mkt-btn-add-fonte {
  border-color: var(--live);
  color: var(--live);
}
.mkt-btn-add-fonte:hover {
  background: var(--live);
  color: #fff;
}
.mkt-btn-delete:hover {
  border-color: var(--lost);
  background: var(--lost-soft);
}

/* Modali "Aggiungi Fonte" e "Imposta Budget": in produzione i campi e i
   bottoni non hanno classi proprie, sono colorati con uno style="" scritto
   a mano direttamente nell'HTML. Un inline-style batte qualunque selettore
   CSS a prescindere dalla specificità: per vincerlo serve !important, qui
   e solo qui in questo file — esattamente come fa già styles.css sulle
   stesse righe (i valori sono negli attributi, non in una regola).        */
#mkt-add-fonte-modal .form-group label,
#mkt-budget-modal .form-group label {
  color: var(--ink-2) !important;
}
#mkt-add-fonte-mercato {
  color: var(--live) !important;
}
#mkt-modal-fonte-nome,
#mkt-modal-periodo {
  color: var(--ink) !important;
}
#mkt-add-fonte-nome,
#mkt-modal-budget {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-edge) !important;
  color: var(--ink) !important;
}
#mkt-add-fonte-nome:focus,
#mkt-modal-budget:focus {
  border-color: var(--accent-line) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#mkt-add-fonte-modal button[onclick="saveNewFonte()"],
#mkt-budget-modal button[onclick="saveMktBudget()"] {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}
#mkt-modal-btn-remove {
  color: var(--lost) !important;
  border: 1px solid var(--lost) !important;
}

/* =========================================================================
   9.7 · TEMA CHIARO
   I gettoni sopra seguono da soli sotto body.light-mode (arrivano da 01/08).
   Restano da battere solo le regole di produzione che in chiaro riscrivono
   un colore alla lettera invece di ripescare il gettone: stesso selettore,
   stessa specificità di styles.css, ultimo a caricare vince.              */

/* Unico caso reale nelle mie sezioni: l'hover di "Imposta Budget" aveva un
   blu di sistema scritto apposta per il tema chiaro. */
body.light-mode .mkt-btn-budget:hover {
  border-color: var(--live);
  color: var(--live);
}

/* "+ Nuova Attivazione" resta marchio anche in chiaro: stessa ambra di
   produzione, qui il giallo pieno del marchio (si legge bene anche su
   carta chiara, è un riempimento non un testo). */
body.light-mode .btn-add-attivazione {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- 09-rifiniture-b.css ---------- */
/* =========================================================================
   09B · RIFINITURE — Consulenti, HR & Compensi, HR Fatturazione,
         Verifica Proforma, Executive (andamento-yoyomove), Worldwide,
         Tempi di Consegna, Activity Log.
   I file 01→08 hanno già vestito guscio/schede/controlli/tabelle/modali/
   board con i gettoni. Qui si va a caccia degli avanzi: colori scritti a
   mano in styles.css (o peggio, in inline style dentro index.html) che
   nessuna var() raggiunge e che quindi affiorano ancora con la vecchia
   tavolozza — blu di sistema, verde acido, ambra/arancio, indaco.
   Dove il colore nasce da uno style="" inline, l'unico modo per vincere
   da un foglio esterno è !important: lo uso solo lì, e lo dico perché.
   ========================================================================= */

/* --------------------------------------------------- 9B.1 · HR & Compensi
   "Schema Bonus" era un gradiente arancione: è un bottone di marchio
   (l'unica azione evidenziata dell'header), quindi giallo pieno + testo
   scuro sopra, non arancio "in attesa". Stessa cosa per "Sync MyBoard"
   in Consulenti, che aveva già il giallo giusto ma scritto a mano.     */
body .hrv2-btn-gold{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:var(--on-accent);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
body .hrv2-btn-gold:hover{
  background:linear-gradient(180deg, var(--accent), var(--accent));
  color:var(--on-accent);
}
/* #syncMyboardBtn ha il gradiente scritto in inline style nell'HTML:
   stesso ragionamento del bottone gemello, vince solo con !important. */
body #syncMyboardBtn{
  background:linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  color:var(--on-accent) !important;
}

/* I sottotitoli "Attivazioni, fatt..." e "Noleggi e ricavi..." usano
   var(--hrv2-accent-violet), che 01-fondamenta rimappa su --hold: colore
   di stato legittimo altrove (bordo dei campi, badge "in sospeso"), ma qui
   fa solo da didascalia e non deve gridare quanto un'etichetta di stato.
   Li becco per attributo (nessuna classe li isola) e li riporto a ink-2,
   senza toccare le altre unità che usano davvero --hrv2-accent-violet.   */
body .hrv2-page-subtitle span[style*="accent-violet"]{
  color:var(--ink-2) !important;
}

/* ------------------------------------------- 9B.2 · Verifica Proforma ---
   I bottoni Rifiuta/Conferma della modale dettaglio fattura hanno il
   rosso e il verde scritti a mano in inline style (bootstrap-style,
   non i gettoni di stato): li riporto a --lost/--won.                   */
body #hr-fatturazione-section .btn-modal[style*="#e74c3c"]{
  background:var(--lost) !important;
  color:var(--on-accent) !important;
}
body #hr-fatturazione-section .btn-modal[style*="#27ae60"]{
  background:var(--won) !important;
  color:var(--on-accent) !important;
}
/* Le etichette "File Fattura / Note HR / Stato attuale" e il segnaposto
   "Caricamento fatture..." sono un grigio scritto a mano (#8B8F98):
   stesso peso di ink-3 nella nuova scala.                               */
#hr-fatturazione-section [style*="color:#8B8F98"]{
  color:var(--ink-3) !important;
}

/* ============================================ 9B.3 · Executive & Worldwide
   Le due sezioni condividono per intero la stessa famiglia di classi
   .ceo-* e .rappel-*: nessun file precedente le tocca (non si chiamano
   "stat-card" o "chart-card" come il resto dell'app), quindi arrivano
   ancora con sfondi #12141A scritti a mano — schede nere fisse che in
   tema chiaro restano nere sopra la pagina chiara. Le porto a vetro. */
body .ceo-filters-container{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .ceo-period-label{ color:var(--ink-3); }

/* I pulsanti del periodo (Mensile/Trimestrale/...) sono pastiglie dentro
   un contenitore già di vetro: niente blur su di loro, solo colore. */
body .ceo-period-btn{
  color:var(--ink-3);
  border-color:var(--glass-edge);
}
body .ceo-period-btn:hover{
  color:var(--ink);
  border-color:var(--glass-edge-hi);
}
body .ceo-period-btn.active{
  background:var(--glass-2);
  color:var(--ink);
  border-color:var(--glass-edge-hi);
}

/* I <select> di periodo: stessa ricetta "campo" usata in 04-controlli
   per .filter-select, qui ripetuta perché la classe è diversa. */
body .ceo-period-select{
  background-color:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
body .ceo-period-select:hover{ border-color:var(--glass-edge-hi); }
body .ceo-period-select:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Le card KPI: vetro pieno. La variante "primary" (Fatturato Totale) resta
   distinguibile con una lastra un filo più alta, non con un bianco 4%
   che in chiaro è quasi invisibile. */
body .ceo-stat-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .ceo-stat-card:hover{ border-color:var(--glass-edge-hi); }
body .ceo-stat-card.ceo-stat-primary{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
}
/* L'hover "cliccabile" era un blu di sistema (rgba(59,130,246,...)):
   diventa il tono live, coerente con gli altri stati interattivi. */
body .ceo-stat-card.ceo-stat-clickable:hover{
  border-color:var(--live);
  background:var(--live-soft);
}
body .ceo-stat-value{ color:var(--ink); }
body .ceo-stat-label{ color:var(--ink-2); }
body .ceo-stat-sublabel{ color:var(--ink-3); }
/* Le pillole +/- di variazione erano verde/rosso "acido" scritti a mano. */
body .ceo-stat-change.positive{
  background:var(--won-soft);
  color:var(--won);
}
body .ceo-stat-change.negative{
  background:var(--lost-soft);
  color:var(--lost);
}

/* Le card provider (LEASYS/ARVAL/AYVENS/DRIVALIA): stesso vetro, con un
   filo di bordo colorato per provider tradotto sugli stessi toni di stato
   già in uso altrove nell'app (non è un arcobaleno nuovo, sono gli stessi
   --live/--lost/--won). DRIVALIA non aveva un bordo dedicato in
   produzione e resta sul bordo neutro della card.                       */
body .ceo-provider-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .ceo-provider-card:hover{ border-color:var(--glass-edge-hi); }
/* styles.css ridefinisce ANCHE il background dentro queste tre varianti
   (stessa specificità di due classi): senza ripeterlo qui, quel background
   :#12141A tornerebbe a vincere sopra la card e resterebbe nera in chiaro. */
body .ceo-provider-card.provider-leasys{
  background:var(--glass-1);
  border-color:var(--live-soft);
}
body .ceo-provider-card.provider-arval{
  background:var(--glass-1);
  border-color:var(--lost-soft);
}
body .ceo-provider-card.provider-ayvens{
  background:var(--glass-1);
  border-color:var(--won-soft);
}
body .provider-logo{ color:var(--ink); }

/* Tabella di dettaglio KPI (si apre dalla card): stesso trattamento
   testuale delle altre tabelle, il totale finale resta il valore di
   marchio come già fatto altrove per le celle "totale".                */
body .ceo-kpi-breakdown-table th{ color:var(--ink-3); }
body .ceo-kpi-breakdown-table td{ color:var(--ink-2); }
body .ceo-kpi-breakdown-table td:last-child{ color:var(--ink); }
body .ceo-kpi-breakdown-table .row-total td{ color:var(--accent-text); }
body .ceo-kpi-section-title{ color:var(--ink-2); }
/* Titoletti di sotto-sezione ("Fatturato per Provider", "Rappel per
   Provider"...): bianco fisso #E8E9EB, invisibile sopra il vetro chiaro. */
body .ceo-section-title h2{ color:var(--ink); }
body .rappel-note{ color:var(--ink-3); }

/* Le card Rappel per provider: stesso sfondo #12141A scritto a mano,
   stessa cura. La barra di progresso era un gradiente blu di sistema:
   diventa tinta piatta --live (niente arcobaleni), il bonus finale
   torna verde di stato invece che verde acceso a sé stante.            */
body .rappel-card{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .rappel-provider{ color:var(--ink); }
body .rappel-period{ background:var(--glass-2); color:var(--ink-2); }
body .rappel-progress-bar{ background:var(--track); }
body .rappel-progress-fill{ background:var(--live); }
body .rappel-progress-labels{ color:var(--ink-3); }
body .rappel-bonus{ border-top-color:var(--glass-edge); }
body .rappel-bonus-label{ color:var(--ink-2); }
body .rappel-bonus-value{ color:var(--won); }
body .rappel-settings-btn{
  background:var(--glass-2);
  border-color:var(--glass-edge);
  color:var(--ink-2);
}
body .rappel-settings-btn:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
body .rappel-info,
body .rappel-contratti{ background:var(--glass-2); }
body .rappel-contratti-label{ color:var(--ink-2); }
body .rappel-contratti-value{ color:var(--ink); }

/* ---- Worldwide: gli stessi tre pannelli (breakdown, grafico andamento,
   consulenti per paese) sono scritti come <div style="background:#12141A">
   diretto in HTML, non hanno classe: li prendo per attributo, scoperti
   solo dentro #worldwide-section per non toccare pannelli identici che
   possono comparire in sezioni di altri agenti.                        */
#worldwide-section div[style*="#12141A"]{
  background:var(--glass-1) !important;
  border-color:var(--glass-edge) !important;
  backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.6);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
/* I titoli h3 dentro quei pannelli e la "x" di chiusura hanno anch'essi
   il colore scritto in style="": un bianco fisso che sopra al vetro
   chiaro (tema chiaro) sparirebbe. */
#worldwide-section [style*="color:#E8E9EB"]{ color:var(--ink) !important; }
#worldwide-section [style*="color:#8B8F98"]{ color:var(--ink-3) !important; }
/* Il bottone "Includi Rappel nel Fatturato": stesso discorso, sfondo e
   bordo bianco-trasparente scritti a mano diventano i gettoni vetro. */
body #ww-rappel-btn{
  background:var(--glass-2) !important;
  border-color:var(--glass-edge) !important;
}

/* ------------------------------------------- 9B.4 · Tempi di Consegna ---
   La card "Avvisi" ha il valore con color:#3B82F6 scritto in inline
   style: 03-schede.css lo aveva già rimappato su --lost tramite l'id,
   ma un inline style batte qualunque regola esterna che non sia
   !important, quindi qui è l'unico modo per farlo vincere davvero.      */
body #tc-kpi-avvisi{
  color:var(--lost) !important;
}

/* --------------------------------------- 9B.5 · Componente condiviso ---
   .btn-reload ("🔄 Aggiorna") è blu di sistema scritto a mano in
   styles.css; lo uso sia Tempi di Consegna sia Activity Log (e anche
   Attivazioni, non mia, che ne beneficia di riflesso senza conflitti). */
/* Anche qui: il colore di .btn-reload sta ora nel file 15 (15.2). */

/* ---------- 10-modali-kpi.css ---------- */
/* =========================================================================
   10 · MODALI DI DETTAGLIO KPI
   Restavano scoperte perché vivono fuori dalle <section>: gli agenti che
   lavoravano per sezione non le incontravano, e chi lavorava sulle modali
   ha vestito il pannello ma non il contenuto.
   Sono due: il dettaglio KPI di Tempi di consegna (con il breakdown rappel)
   e quello dell'Executive Dashboard.
   ========================================================================= */

/* ------------------------------------------- 10.1 · Riquadro di riepilogo --
   `#181B22` scritto alla lettera: restava un rettangolo nero fisso anche in
   tema chiaro, cioè un buco scuro dentro una pagina bianca. */
.kpi-detail-summary{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
.kpi-detail-label{color:var(--ink-2)}
.kpi-detail-value{
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
}
.kpi-detail-period{color:var(--ink-3)}

.kpi-breakdown-section h3{
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* Il totale rappel è un importo, non un avviso: sta sull'accento del
   marchio, che in chiaro si scurisce da sé (--accent-text). */
.kpi-rappel-total-value{color:var(--accent-text);font-variant-numeric:tabular-nums}

/* --------------------------------------- 10.2 · Tabella di scomposizione --
   Stessa grammatica delle altre tabelle: intestazione come etichetta,
   separatori sottili, numeri a destra e incolonnati. */
.ceo-kpi-breakdown-table th{
  color:var(--ink-3);
  border-bottom:1px solid var(--glass-edge);
  letter-spacing:.1em;
}
.ceo-kpi-breakdown-table td{
  color:var(--ink-2);
  border-bottom:1px solid var(--glass-edge);
}
.ceo-kpi-breakdown-table td:last-child{
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ceo-kpi-breakdown-table .row-total td{
  border-top:2px solid var(--glass-edge-hi);
  color:var(--accent-text);
}

/* La produzione riscrive questi tre colori a mano sotto body.light-mode:
   stessa forma di selettore, e questo foglio carica dopo. */
body.light-mode .ceo-kpi-breakdown-table td{
  color:var(--ink-2);
  border-bottom-color:var(--glass-edge);
}
body.light-mode .ceo-kpi-breakdown-table td:last-child{color:var(--ink)}
body.light-mode .ceo-kpi-breakdown-table .row-total td{
  color:var(--accent-text);
  border-top-color:var(--glass-edge-hi);
}

/* ---------- 11-fase2.css ---------- */
/* =========================================================================
   11 · FASE 2 — icone SVG, marchio, mercato in sidebar, profilo compatto,
   barra laterale richiudibile.
   Copre solo ciò che il markup di fase 2 introduce (prefisso yh-, vedi
   contratto). Il resto del guscio resta come vestito nei file 01→10:
   qui non ridichiariamo nulla che non cambi con questa fase.
   ========================================================================= */

/* -------------------------------------------------- 11.1 · Sprite icone --
   Il contenitore <svg class="yh-sprite"> subito dopo <body> non deve
   occupare spazio né essere visibile, ma NON può essere display:none:
   alcuni browser smettono di risolvere i <use> verso simboli dentro un
   nodo display:none. Lo si toglie dal flusso invece, cosa che non tocca
   la risoluzione dei riferimenti.                                          */
.yh-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

/* L'icona vera. I simboli disegnano quasi tutto senza fill/stroke propri
   (solo il glifo del logo e il puntino della mappa li scrivono a mano):
   per tutto il resto stroke/fill/stroke-width arrivano da qui, ed è per
   questo che devono stare sull'elemento <svg>, non sul suo contenitore. */
.yh-i{
  width:20px;
  height:20px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:currentColor;
  vertical-align:middle;
  transition:color var(--speed) var(--ease);
}

/* Nella barra laterale l'icona segue lo stato della voce, non il testo:
   spenta = terziario, in hover = secondario, attiva = accento. */
.sidebar-menu a .yh-i{ color:var(--ink-3); }
.sidebar-menu a:hover .yh-i{ color:var(--ink-2); }
.sidebar-menu a.active .yh-i{ color:var(--accent); }

/* Il contenitore <span class="icon"> in produzione era tarato sull'emoji
   (font-size 14px, width 18px): con un'icona vera dentro, la larghezza
   deve seguire l'icona (20px) o il testo accanto si sposta di qualche
   pixel appena l'icona è più larga della sua gabbia. */
.sidebar-menu .icon{
  width:20px;
  height:20px;
}

/* --------------------------------------------------- 11.2 · Il marchio ---
   La "Y" gialla dentro un riquadro nero rialzato. Colori scritti alla
   lettera e non a gettoni apposta: è un marchio, non deve invertirsi in
   tema chiaro (vedi anche 08-chiaro.css, che per lo stesso motivo lascia
   .logo-text sul solo `color`, senza toccare l'icona).                     */
.yh-logo-mark{
  position:relative;
  overflow:hidden; /* contiene il riflesso diagonale qui sotto, non un menu:
                       non è il .yh-market-slot della trappola del task */
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(158deg,#212227 0%,#0a0b0d 52%,#141519 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.75),
             0 4px 14px -4px rgba(0,0,0,.65),0 0 22px -6px var(--accent-glow);
}
/* Riflesso diagonale sul "vetro" del riquadro: una striscia di luce che lo
   attraversa, come su una superficie lucida vista di lato. */
.yh-logo-mark::before{
  content:'';
  position:absolute;
  inset:-45% -15%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
}
/* Alone caldo sotto il glifo: una piccola sorgente di luce gialla dietro
   la Y, per non farla sembrare piatta sul nero. */
.yh-logo-mark::after{
  content:'';
  position:absolute;
  left:50%;bottom:-8px;
  width:22px;height:14px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--accent-glow), transparent);
  filter:blur(2px);
}
.yh-logo-mark .yh-i{
  width:19px;height:19px;color:var(--accent);
  position:relative;
  z-index:1; /* sopra ai due pseudo-elementi qui sopra */
}

/* -------------------------------------------- 11.3 · Selettore mercato ---
   Diventa un blocco di contesto in cima alla barra laterale: lastra in
   vetro rialzato, con un'etichetta minuta sopra il valore. L'etichetta è
   contenuto generato (nessun testo del genere esiste nel markup): non
   nasconde nulla, aggiunge un titolo di sezione.
   TRAPPOLA: niente overflow/transform qui né sulla .sidebar, altrimenti
   .market-dropdown (position:absolute, figlio di .market-switcher) sparisce
   o finisce sotto un contesto di impilamento che non può attraversare.     */
.yh-market-slot{
  margin:10px 10px 6px;
  padding:12px 12px 10px;
  border-radius:var(--r-md);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
.yh-market-slot::before{
  content:'Mercato';
  display:block;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:7px;
}

/* --------------------------------------------- 11.4 · Blocco profilo ----
   #user-role stampa l'elenco intero dei team del TL (decine di nomi): il
   testo resta tutto nel DOM, qui si tronca solo la resa. ID perché la
   produzione stila .user-name/.user-role con classi: niente !important,
   basta la specificità naturale dell'id.
   .user-info è figlio flex di .user-profile (display:flex in produzione):
   senza min-width:0 un figlio flex non si restringe mai sotto la misura
   del proprio contenuto, ed è quello che farebbe esplodere di nuovo
   l'header anche con l'ellissi sui figli.                                  */
.user-info{
  min-width:0;
}
#user-name,
#user-role{
  display:block;
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Segnale visivo che c'è altro testo oltre l'ellissi (il testo integrale
   resta leggibile via title, gestito lato JS). */
#user-role{
  cursor:help;
}

/* ------------------------------------------ 11.5 · Barra richiudibile ---
   Soglia 1024px, la stessa usata dal JavaScript per decidere se applicare
   `yh-rail-off`. Sotto quella soglia non scriviamo nulla qui: il
   comportamento mobile (.sidebar.active + overlay, già gestito da
   styles.css) resta esattamente quello di oggi.                           */
@media (min-width:1025px){
  /* Il bottone esisteva già (display:none fuori dal mobile): qui lo
     rendiamo visibile anche su schermo largo e lo vestiamo come gli altri
     pulsanti-vetro dell'header (theme-toggle, back-button). */
  .mobile-menu-toggle{
    display:flex;
    background:var(--glass-2);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-sm);
    padding:7px;
  }
  .mobile-menu-toggle:hover{
    background:var(--glass-3);
    border-color:var(--glass-edge-hi);
  }

  /* body.yh-rail-off, gestito da app.js e ricordato in localStorage.
     visibility:hidden sull'intera barra è deliberato e autorizzato dal
     contratto per questo caso specifico: non è contenuto che nascondiamo
     di nostra iniziativa, è un contenitore che l'utente ha chiuso apposta
     (e infatti sparisce insieme alla sua larghezza, non da solo). Niente
     transform: sposterebbe .market-dropdown in un contesto di impilamento
     nuovo (vedi trappola 11.3) anche qui, anche se a barra chiusa la
     tendina non è comunque raggiungibile. */
  body.yh-rail-off .sidebar{
    width:0;
    min-width:0;
    border-right-width:0;
    visibility:hidden;
    transition:width var(--speed) var(--ease), visibility 0s var(--speed);
  }
  body.yh-rail-off .main-content{
    margin-left:0;
    max-width:100vw;
  }
}

/* Transizione morbida sulla larghezza quando la barra si apre/chiude.
   Non sostituisce la transition di produzione: la unisce, perché quella
   governa anche lo scorrimento della barra su mobile (transform). */
.sidebar{
  transition:width var(--speed) var(--ease), transform 0.3s ease;
}
.main-content{
  transition:margin-left var(--speed) var(--ease);
}
/* Le tre lineette del bottone erano bianco fisso: seguono l'inchiostro
   secondario come il resto dei controlli dell'header, su ogni larghezza
   (è un colore, non un comportamento: non tocca la regola "su schermo
   stretto lascia tutto com'è oggi", che riguarda apertura/chiusura). */
.mobile-menu-toggle span{
  background:var(--ink-2);
}

/* ---------- 12-fase3.css ---------- */
/* =========================================================================
   12 · FASE 3 — briciole di percorso, periodo in alto, scheletri di
   caricamento e, soprattutto, le MISURE.

   Le misure sono il vero contenuto di questo file. La produzione era tarata
   su un'interfaccia molto compatta: titolo di pagina 14px, titolo di grafico
   12px, intestazione di tabella 9px. Sono numeri da schermo piccolo, e su un
   monitor da lavoro si leggono male. Il prototipo lavora su una scala piu'
   grande (25 / 17 / 10.5) ed e' quella che l'utente ha approvato guardando
   le schermate.

   TUTTO cio' che tocca ingombri e corpi del testo sta dentro
   @media (min-width:1025px). Sotto quella soglia la produzione ha gia' le
   sue regole responsive, molte con !important, e questo foglio carica per
   ultimo: senza il confinamento le scavalcherebbe e romperebbe il telefono.
   Sopra la soglia, invece, nessuna media query di produzione e' in gioco.
   ========================================================================= */

/* ================================================ 12.1 · BRICIOLE ======== */
/* Aggiunta pura: dicono dove sei senza togliere niente. Il testo lo scrive
   yhUpdateCrumbs() leggendo la barra laterale, non un elenco a mano.       */
.yh-crumbs{
  display:none;                 /* acceso solo da 1025px in su, vedi 12.6 */
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.yh-crumb-up{
  font-size:13px;
  color:var(--ink-3);
  white-space:nowrap;
}
.yh-crumb-sep{
  color:var(--ink-3);
  opacity:.45;
}
.yh-crumb-now{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Se la voce non sta sotto nessun gruppo, separatore e primo livello
   spariscono invece di lasciare uno "/" appeso nel vuoto. */
.yh-crumbs-solo .yh-crumb-up,
.yh-crumbs-solo .yh-crumb-sep{ display:none; }

/* ============================================ 12.2 · PERIODO IN ALTO ===== */
/* Non sostituisce nessun filtro: e' uno specchio dell'etichetta che la
   sezione scrive gia' ("Dati: Mese Corrente"), e le due frecce muovono la
   tendina che esiste gia' dentro la sezione. Compare solo dove un periodo
   c'e' davvero (Dashboard e Contratti & KPI); altrove l'attributo hidden
   la toglie di scena.                                                      */
.yh-period{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
.yh-period[hidden]{ display:none; }

.yh-period-nav{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:none;background:none;cursor:pointer;
  border-radius:var(--r-pill);
  color:var(--ink-3);
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.yh-period-nav:hover:not(:disabled){ background:var(--glass-3); color:var(--ink); }
/* Freccia spenta invece che nascosta: si vede che il limite del periodo e'
   quello, non che il comando e' sparito. */
.yh-period-nav:disabled{ opacity:.3; cursor:default; }
.yh-period-nav .yh-i{ width:17px;height:17px; }

.yh-period-now{
  padding:0 12px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ================================= 12.3 · ULTIME EMOJI DEL GUSCIO ======== */
/* Sole/luna e le due icone di Home ed Esci: erano gli ultimi caratteri
   emoji rimasti nella barra in alto dopo la fase 2. Quale delle due icone
   del tema si veda lo decide questo CSS, non piu' una scrittura di testo
   dal JavaScript (che cancellerebbe entrambi gli SVG).                     */
.yh-theme-ico{ display:inline-flex; align-items:center; justify-content:center; }
.yh-theme-ico .yh-ico-moon{ display:none; }
body.light-mode .yh-theme-ico .yh-ico-sun{ display:none; }
body.light-mode .yh-theme-ico .yh-ico-moon{ display:inline-block; }

.back-button,
.logout-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.back-button .yh-i,
.logout-button .yh-i{ width:16px;height:16px; }

/* ============================== 12.4 · SCHELETRI DI CARICAMENTO ========== */
/* Il problema che l'utente aveva segnalato per primo: mentre i dati
   arrivano si vede una tabella vuota, e non si capisce se sta lavorando o
   se e' bloccata. Le parole "Caricamento..." erano gia' li': qui si
   aggiunge solo la forma. Le tre barre non fingono di essere dati veri —
   sono grigie, senza numeri, e pulsano per dire "in corso".                */
.yh-loading{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--ink-3);
  font-size:12.5px;
  font-weight:500;
}
.yh-loading::before{
  content:'';
  width:min(460px, 52vw);
  height:52px;
  background:
    linear-gradient(var(--glass-3),var(--glass-3)) left 0    top 0    / 100% 13px no-repeat,
    linear-gradient(var(--glass-2),var(--glass-2)) left 0    top 20px / 88%  13px no-repeat,
    linear-gradient(var(--glass-2),var(--glass-2)) left 0    top 40px / 64%  13px no-repeat;
  border-radius:4px;
  animation:yhSkel 1.25s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes yhSkel{
  0%,100%{ opacity:.45; }
  50%    { opacity:1; }
}
/* Chi guarda con "riduci animazioni" attivo vede comunque lo scheletro,
   solo fermo: l'informazione resta, il movimento no. */
@media (prefers-reduced-motion:reduce){
  .yh-loading::before{ animation:none; opacity:.8; }
  .auth-spinner{ animation:none; }
  .auth-loading-bar::after{ animation:none; width:100%; opacity:.5; }
}

/* ====================================== 12.5 · MISURE, DA 1025px IN SU === */
@media (min-width:1025px){

  :root{
    --yh-hdr-h:64px;
    --yh-rail-w:250px;
  }

  /* --- 12.5.1 · Barra in alto -------------------------------------------
     La produzione dichiarava margin-top:52px sul contenitore mentre la
     barra ne misurava 63: undici pixel di contenuto finivano sotto al
     vetro. Qui l'altezza diventa un numero solo, e tutti e tre i punti che
     la usavano lo leggono da li'.                                          */
  #app-content > header{
    height:var(--yh-hdr-h);
    padding:0 24px;
    display:flex;
    align-items:center;
  }
  #app-content > header > .header-content{
    width:100%;
    gap:16px;
  }
  .yh-crumbs{ display:flex; }

  .logo-text{ font-size:1.25rem; }
  .logo-version{ font-size:.62rem; }

  /* --- 12.5.2 · Impianto -------------------------------------------------- */
  .dashboard-container{ margin-top:var(--yh-hdr-h); }
  .sidebar{
    width:var(--yh-rail-w);
    height:calc(100vh - var(--yh-hdr-h));
  }
  .main-content{
    margin-left:var(--yh-rail-w);
    max-width:calc(100vw - var(--yh-rail-w));
    min-height:calc(100vh - var(--yh-hdr-h));
    padding:24px 28px;
  }

  /* --- 12.5.3 · Barra laterale --------------------------------------------
     Voci piu' alte e con un corpo leggibile: 12.5px su un menu che si legge
     tutto il giorno era il punto piu' stretto dell'interfaccia.             */
  .sidebar-menu li{ margin-bottom:2px; }
  .sidebar-menu a{
    font-size:13.5px;
    gap:11px;
    padding:8px 11px;
    margin:1px 10px;
    border-radius:10px;
  }
  .sidebar-group-label{
    font-size:9.5px;
    letter-spacing:1.4px;
    padding:14px 21px 6px;
  }
  .sidebar-divider{ margin:.55rem 1.3rem; }

  /* --- 12.5.4 · Testata di pagina -----------------------------------------
     Il titolo di sezione stava a 14px, cioe' due pixel e mezzo piu' del
     testo di una tabella: non faceva gerarchia. Passa a 25px, con il
     sottotitolo a 14 e una linea sotto che separa la testata dal contenuto. */
  .content-header{
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--glass-edge);
  }
  .content-title{
    font-size:25px;
    font-weight:700;
    letter-spacing:-.022em;
    line-height:1.15;
    margin-bottom:5px;
  }
  .content-subtitle{ font-size:14px; }

  /* --- 12.5.5 · Schede numeriche ------------------------------------------ */
  /* 2026-09-09 · 200px lasciava 5 colonne su 1192 di contenuto, e la sesta
     scheda di Contratti & KPI ("Nuovi / Ricorrenti") finiva da sola su una
     seconda riga. In locale le sei stanno in fila. 178px e' la misura del
     prototipo e ne fa entrare sei: 6x178 + 5x14 = 1138 su 1192.
     Tocca una sola griglia in tutta l'app — le altre .stats-grid hanno le
     colonne scritte in linea nel markup (repeat(2,1fr), repeat(4,1fr)).
     170 e non 178 perche' a 1440 di finestra (un MacBook) 178 lasciava
     ancora fuori la sesta: 6x170 + 5x14 = 1090 su 1120.
     auto-FIT e non auto-fill: con auto-fill, su 1865 ci stavano sette
     colonne e la settima restava vuota, lasciando le sei schede strette e
     un buco a destra. auto-fit chiude le colonne vuote. */
  .stats-grid{
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:14px;
    margin-bottom:22px;
  }
  .stat-card{ padding:17px 18px; }
  .stat-value{
    font-size:27px;
    letter-spacing:-.035em;
    margin-bottom:2px;
  }
  .stat-label{ font-size:12px; }
  .stat-card h3{ font-size:12px; }

  /* --- 12.5.6 · Grafici ---------------------------------------------------- */
  .charts-grid{ gap:14px; margin-bottom:22px; }
  .chart-card{ padding:18px; }
  .chart-header{ margin-bottom:18px; }
  .chart-title{
    font-size:17px;
    font-weight:700;
    letter-spacing:-.015em;
  }

  /* --- 12.5.7 · Tabelle ----------------------------------------------------
     Prudenza voluta: 12.5px sulle celle e non i 13.5 del prototipo. La
     tabella del Dettaglio Attivazioni ha 49 colonne, e ogni pixel di corpo
     in piu' la allarga di parecchio.                                        */
  .table-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:-.012em;
  }
  .data-table th{
    font-size:10px;
    letter-spacing:.09em;
    padding:9px 14px;
  }
  .data-table td{
    font-size:12.5px;
    padding:10px 14px;
  }
  .table-header{ margin-bottom:14px; }
}

/* ============================== 12.6 · IL GIRO GUIDATO (onboarding) ====== */
/* Era rimasto fuori da tutte le fasi precedenti perche' compare una volta
   sola, al primo accesso, e nelle prove non si vedeva mai: bolla con bordo
   viola, etichetta rossa, pulsante rosso e anello rosso attorno alla voce
   di menu. E' la prima cosa che un collega nuovo vede di YoyoHub, e non
   somigliava al resto. Qui torna nella tavolozza, in entrambi i temi.      */
.onboarding-bubble{
  background:var(--glass-2);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  color:var(--ink);
  border:1px solid var(--glass-edge-hi);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}
body.light-mode .onboarding-bubble{
  background:var(--glass-2);
  color:var(--ink);
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}

.onboarding-tag{
  background:var(--accent-soft);
  color:var(--accent-text);
  border:1px solid var(--accent-line);
}
.onboarding-title{ color:var(--ink); }
.onboarding-body{ color:var(--ink-2); }
.onboarding-body strong{ color:var(--ink); }
body.light-mode .onboarding-title{ color:var(--ink); }
body.light-mode .onboarding-body{ color:var(--ink-2); }
body.light-mode .onboarding-body strong{ color:var(--ink); }

.onboarding-close{ background:var(--glass-3); color:var(--ink-2); }
.onboarding-close:hover{ background:var(--glass-3); color:var(--ink); }
body.light-mode .onboarding-close{ background:var(--glass-3); color:var(--ink-2); }
body.light-mode .onboarding-close:hover{ background:var(--glass-3); color:var(--ink); }

.onboarding-dot{ background:var(--track); }
.onboarding-dot.active{ background:var(--accent); }

.onboarding-btn-skip{ color:var(--ink-3); border-color:var(--glass-edge); }
.onboarding-btn-skip:hover{ background:var(--glass-2); color:var(--ink-2); }
/* Il pulsante che porta avanti e' l'unico pieno della bolla: prende
   l'accento del marchio, come ogni azione principale altrove. */
.onboarding-btn-next{ background:var(--accent); color:var(--on-accent); }
.onboarding-btn-next:hover{ background:var(--accent-2); color:var(--on-accent); }

/* L'anello attorno alla voce indicata: giallo come tutto cio' che in questa
   interfaccia vuol dire "guarda qui". L'alone largo serve a distinguerlo
   dalla voce ATTIVA del menu, che e' gialla anche lei: quella e' una lastra
   piena con la barretta a sinistra, questo e' un faro puntato addosso. */
.onboarding-highlight{
  box-shadow:0 0 0 2px var(--accent),
             0 0 0 7px var(--accent-soft),
             0 0 34px 6px var(--accent-glow);
  border-radius:10px;
}

/* ================================ 12.7 · SCHEDE NUMERICHE, L'ETICHETTA === */
/* Il numero e' gia' grande; l'etichetta sopra diventa piccola e spaziata,
   cosi' la gerarchia si legge in un colpo d'occhio invece di essere due
   testi della stessa importanza uno sopra l'altro.                         */
@media (min-width:1025px){
  .stat-card h3,
  .stat-card .stat-label{
    font-size:10.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:var(--ink-3);
  }
  .stat-card h3{ margin-bottom:9px; }
  /* Dove l'etichetta viene PRIMA del numero (la Dashboard fa cosi') serve
     un respiro sotto, non sopra. */
  .stat-card .stat-label + .stat-value{ margin-top:6px; }
}

/* ---------- 13-fase5.css ---------- */
/* =========================================================================
   13 · FASE 5 — il guscio, seconda passata

   Nata da un confronto puntuale dell'utente fra produzione e prototipo:
   «le posizioni sono sfasate», «la bandiera del mercato è brutta», «la barra
   laterale è piccola», «il tasto esci sta sotto e ben ordinata».
   Sono quattro cose separate, tutte di posizione e di misura.

   Come per la fase 3, tutto ciò che tocca ingombri sta sopra i 1025px: sotto
   quella soglia la produzione ha le sue regole responsive con !important e
   questo foglio carica per ultimo.
   ========================================================================= */

/* ================================ 13.1 · MERCATO, UNA RIGA SOLA ========== */
/* Prima: pastiglia gialla con dentro due lettere ("IT"), e sopra l'etichetta
   "Mercato" disegnata dal CSS — due righe per due lettere, dentro un riquadro
   grande il triplo. Ora è una riga sola: bandiera, etichetta, nome del paese
   per esteso, freccia. Il nome lo scrive updateMarketBadge().              */
.yh-market-slot{
  margin:12px 12px 8px;
  padding:0;                 /* la pastiglia è il blocco: niente scatola dentro scatola */
  background:none;
  border:none;
  box-shadow:none;
  /* Contesto di impilamento proprio, così la tendina del mercato passa sopra
     l'elenco delle voci che nel DOM viene dopo. La tendina è DENTRO questo
     blocco, quindi sale insieme a lui.
     NIENTE overflow qui: la taglierebbe (trappola già documentata). */
  position:relative;
  z-index:5;
}
/* L'etichetta "Mercato" non è più generata dal CSS: adesso è markup vero
   dentro la pastiglia, scritto da updateMarketBadge(). */
.yh-market-slot::before{ content:none; }

.market-badge{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:11px 13px;
  border-radius:var(--r-md);
  /* Non è più gialla: il giallo è l'accento delle AZIONI e delle cose attive.
     Questo è un blocco di contesto, sta in vetro come le altre superfici. */
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-spec);
  color:var(--ink);
  cursor:pointer;
  transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.market-badge:hover{
  background:var(--glass-3);
  border-color:var(--accent-line);
}
.yh-mk-flag{ font-size:17px; line-height:1; flex:0 0 auto; }
.yh-mk-lbl{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.yh-mk-val{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yh-mk-chev{ margin-left:auto; width:17px; height:17px; color:var(--ink-3); flex:0 0 auto; }
/* La produzione disegnava la freccetta con un carattere (▾) in ::after. Ora
   la freccia è un'icona vera dentro la pastiglia: senza questo se ne
   vedrebbero due, una accanto all'altra. */
.market-badge::after{ content:none; }
/* Un solo mercato disponibile: la freccia prometterebbe una scelta che non
   c'è. Il blocco resta, dice comunque dove sei. */
.market-badge.single-market .yh-mk-chev{ display:none; }

/* La tendina si allarga quanto la pastiglia, non quanto le stava bene prima. */
.market-dropdown{ left:0; right:0; min-width:0; }

/* ============================= 13.2 · "ESCI" IN FONDO ALLA BARRA ========= */
/* Era in alto a destra, in fila con Home e il tema: tre pulsanti diversi
   ammucchiati nell'angolo. Uscire non è un'azione della testata, è la fine
   della colonna di navigazione — ed è dove sta nel prototipo.
   ATTENZIONE: la barra diventa una colonna flessibile, ma NON prende
   overflow:hidden. Il selettore mercato ha la sua tendina in assoluto lì
   dentro, e un overflow sulla barra la taglierebbe.                        */
.sidebar{
  display:flex;
  flex-direction:column;
  overflow:visible;
}
.sidebar > .sidebar-menu{
  flex:1 1 auto;
  min-height:0;      /* senza questo un figlio flex non scende sotto la misura
                        del proprio contenuto e la barra si allunga oltre lo
                        schermo invece di far scorrere l'elenco */
  overflow-y:auto;
}
.yh-rail-foot{
  flex:0 0 auto;
  padding:11px 12px;
  border-top:1px solid var(--glass-edge);
}
.yh-rail-foot .logout-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  font-size:13px;
  font-weight:600;
}

/* ==================================== 13.3 · POSIZIONI, DA 1025px IN SU == */
@media (min-width:1025px){

  /* La barra cresce: l'utente la vedeva stretta accanto a quella del
     prototipo, e aveva ragione — 250px con voci da 13.5px sono giuste per un
     portatile, strette per il monitor su cui si lavora tutto il giorno. */
  :root{ --yh-rail-w:264px; }

  /* --- 13.3.1 · Il marchio largo quanto la barra ------------------------
     È questo il «sfasate» dell'utente: in produzione le briciole partivano
     subito dopo il logo, a caso rispetto alla colonna del contenuto. Ora il
     blocco marchio misura esattamente la barra laterale e ha il suo filo
     verticale, quindi il filo dell'header e quello della barra sono la
     stessa linea, e le briciole partono dove parte il titolo di pagina. */
  #app-content > header{ padding:0 24px 0 0; }
  #app-content > header > .header-content{ height:100%; }

  .yh-brandblock{
    width:var(--yh-rail-w);
    flex:0 0 auto;
    height:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:16px;
    border-right:1px solid var(--glass-edge);
    box-sizing:border-box;
  }
  /* Stesso rientro del contenuto sotto (.main-content ha 28px): il primo
     livello delle briciole e il titolo di pagina cadono sulla stessa
     verticale. */
  /* 28px come il rientro di .main-content, MENO i 16px di gap che
     .header-content mette già fra il blocco marchio e le briciole:
     sommandoli il primo livello finiva quindici pixel più a destra del
     titolo di pagina, che è esattamente lo sfasamento da chiudere. */
  .yh-crumbs{ margin-left:12px; }

  /* --- 13.3.2 · Ordine dei comandi in alto a destra ---------------------
     Nel prototipo il blocco account è l'ultimo a destra, dopo gli strumenti.
     In produzione era il primo. È solo ordine visivo: nel DOM non si muove
     niente, quindi il giro del tasto TAB resta quello di prima. */
  .header-buttons{ gap:9px; }
  .header-buttons .yh-period{ order:1; }
  .header-buttons .theme-toggle{ order:2; }
  .header-buttons .back-button{ order:3; }
  .header-buttons .user-profile{ order:4; }

  /* --- 13.3.3 · Voci della barra più grandi ----------------------------- */
  .sidebar-menu a{
    font-size:14px;
    gap:12px;
    padding:9px 12px;
    margin:1px 11px;
  }
  .sidebar-menu .icon,
  .sidebar-menu a .yh-i{ width:21px; height:21px; }
  .sidebar-group-label{
    font-size:10px;
    letter-spacing:1.5px;
    padding:15px 23px 6px;
  }
}

/* ---------- 14-fase6.css ---------- */
/* =========================================================================
   14 · FASE 6 — le emoji dentro le sezioni

   La fase 2 aveva ripulito solo la barra laterale. Dentro le sezioni erano
   rimaste 130 faccine: 👥 📝 🚗 💰 nelle schede dei consulenti, ✅ ❌ ⏳ nei
   KPI dei contratti, 📧 📞 nei filtri delle attivazioni, 📥 🔄 💾 🗑 nei
   pulsanti. Un'emoji la disegna il sistema operativo: cambia da Mac a
   Windows, non segue il tema, non si colora, e accanto a un'icona di linea
   sembra un adesivo appiccicato sopra.

   Ora sono icone dello stesso alfabeto della barra laterale. Qui c'è solo
   la vestizione: i contenitori erano tarati sull'emoji (font-size 1.5rem)
   e con dentro un <svg> non avrebbero nessuna misura.
   ========================================================================= */

/* ============================== 14.1 · PIASTRELLE DELLE SCHEDE KPI ======= */
/* L'icona non galleggia più sul fondo della scheda: sta in una piastrella di
   vetro, come la "Y" del marchio in alto. Dà un punto d'appoggio alla
   colonna di testo che le sta sotto.                                       */
.stat-icon,
.ceo-stat-icon,
.profilo-kpi-icon,
.hr-kpi-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-spec);
  color:var(--ink-2);
  margin-bottom:12px;
}
.stat-icon .yh-i,
.ceo-stat-icon .yh-i,
.profilo-kpi-icon .yh-i,
.hr-kpi-icon .yh-i{ width:20px; height:20px; }

/* Le poche schede che avevano un filtro colore per distinguersi (hue-rotate
   sull'emoji verde/rossa) non hanno più un'emoji da ruotare: il colore lo
   dà il gettone semantico. */
.hr-kpi-icon[style*="hue-rotate(90deg)"]{ color:var(--won); filter:none; }
.hr-kpi-icon[style*="hue-rotate(270deg)"]{ color:var(--lost); filter:none; }

/* ================================= 14.2 · ICONE IN LINEA NELLE MODALI ==== */
/* Titolo di modale, titolo di sezione, riga informativa: l'icona sta accanto
   alle parole, alla loro altezza, non sopra come una decorazione.          */
.modal-icon,
.section-icon,
.info-icon,
.tipo-icon,
.edit-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-3);
  vertical-align:middle;
  margin-right:2px;
}
.modal-icon .yh-i{ width:21px; height:21px; color:var(--accent-text); }
.section-icon .yh-i{ width:18px; height:18px; }
.info-icon .yh-i,
.tipo-icon .yh-i,
.edit-icon .yh-i{ width:17px; height:17px; }

/* Il cerchio grande della finestra di conferma: è un avviso, e l'avviso in
   questa tavolozza è arancio — non il giallo del marchio, che vuol dire
   "questo è YoyoHub", non "attento". */
.confirm-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  border-radius:50%;
  background:var(--wait-soft);
  border:1px solid var(--wait-soft);
  color:var(--wait);
}
.confirm-icon .yh-i{ width:26px; height:26px; }

/* ==================================== 14.3 · ICONE DENTRO I PULSANTI ===== */
/* Erano "📥 CSV": emoji, spazio, parola. Ora l'icona è un elemento suo, e
   senza queste tre righe si appoggerebbe sulla linea di base del testo
   invece di stargli in mezzo.                                              */
.btn-csv,
.btn-reload,
.btn-screenshot,
.hrv2-btn-icon,
.btn-edit-piva,
.btn-save-piva,
.btn-modal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.btn-csv .yh-i,
.btn-reload .yh-i,
.btn-screenshot .yh-i,
.hrv2-btn-icon .yh-i,
.btn-edit-piva .yh-i,
.btn-save-piva .yh-i,
.btn-modal .yh-i{ width:16px; height:16px; }

/* Titoli di tabella e di pagina che avevano l'emoji davanti. */
.table-title,
.hrv2-page-title,
.hrv2-kpi-label{
  display:flex;
  align-items:center;
  gap:8px;
}
.table-title .yh-i,
.hrv2-kpi-label .yh-i{ width:17px; height:17px; color:var(--ink-3); flex:0 0 auto; }
.hrv2-page-title .yh-i{ width:22px; height:22px; color:var(--accent-text); flex:0 0 auto; }

/* ======================================= 14.4 · LA LENTE NELLE RICERCHE == */
/* Un segnaposto è testo: non può contenere un'icona. La lente 🔍 (e la
   busta 📧, e la cornetta 📞) sono state tolte dalle parole e ridisegnate
   qui come sfondo del campo. Il testo del segnaposto è rimasto identico,
   meno il simbolo davanti.
   L'SVG è scritto dentro l'URL perché il CSS non sa usare <use>: è l'unico
   posto del tema dove un'icona è duplicata invece che riferita.            */
.fl-search,
.rp-persi-search,
.search-input,
#activity-log-search{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727a88' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.6'/%3E%3Cpath d='M15.6 15.6 20.2 20.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:17px 17px;
  padding-left:38px;
}
/* In chiaro il grigio della lente sparirebbe sul bianco: stesso disegno,
   inchiostro più scuro.

   2026-09-09 · qui mancavano repeat/position/size, ed era un difetto vero:
   in tema chiaro la lente si ripeteva a tappeto dentro il campo, una fila
   di lenti sopra il testo. Motivo: la regola scura sopra le dichiara con
   specificità (0,1,0), ma in chiaro la produzione scrive `background:` in
   forma abbreviata con (0,2,0) — e l'abbreviata RIAZZERA ripetizione,
   posizione e misura. Vinceva lei, e la nostra riga in chiaro dichiarava
   la sola immagine. Vanno ripetute tutte e tre. */
body.light-mode .fl-search,
body.light-mode .rp-persi-search,
body.light-mode .search-input,
body.light-mode #activity-log-search{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7784' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.6'/%3E%3Cpath d='M15.6 15.6 20.2 20.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:17px 17px;
}

/* =============================== 14.5 · SERVIZI CHE PORTANO FUORI ======== */
/* Le voci sotto "Servizi esterni" aprono un'altra applicazione. Nel menu
   erano identiche a quelle interne: ci si clicca sopra pensando di restare
   dentro. La freccina in coda lo dice prima del clic — il simbolo esisteva
   dalla fase 2 e non era mai stato usato.                                   */
.sidebar-menu a .yh-ext{
  margin-left:auto;
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:var(--ink-3);
  opacity:.55;
  transition:opacity var(--speed) var(--ease);
}
.sidebar-menu a:hover .yh-ext{ opacity:1; }

/* ---------- 15-fase7.css ---------- */
/* =========================================================================
   15 · FASE 7 — larghezza piena e scala per schermi grandi

   Due cose, e la prima è un difetto vero, non una preferenza.

   1) La barra in alto NON arriva ai bordi. `.header-content` ha
      `max-width:1600px; margin:0 auto`: su un monitor da 1865px il suo
      contenuto sta fra 121 e 1721, cioè con 121px di vuoto a sinistra e
      144 a destra — mentre la barra laterale sotto parte da 0. Il logo
      sembra spostato dentro e il blocco profilo staccato dal bordo. È
      esattamente il «devono essere totalmente a destra e totalmente a
      sinistra» dell'utente. Misurato, non stimato.

   2) «In locale è grande, in produzione è piccolo.» Le misure sono le
      stesse: cambia la finestra. Il prototipo lo si guarda su ~1500px, la
      produzione su ~1865. Gli stessi 250px di barra sono il 16,7% di 1500
      e solo il 13,4% di 1865: tutto si rimpicciolisce rispetto allo
      schermo. Quindi serve un secondo scalino, sopra i 1600px, che riporti
      le proporzioni a quelle che l'utente ha approvato.
   ========================================================================= */

@media (min-width:1025px){
  /* Il tetto va tolto sul contenuto della barra, non sulla barra: il vetro
     e il filo sotto devono continuare a coprire tutta la finestra. */
  #app-content > header > .header-content{
    max-width:none;
    margin:0;
  }
}

/* ============================ 15.1 · SCHERMI GRANDI, DA 1600px IN SU ===== */
/* I numeri non sono inventati: sono le proporzioni del prototipo a 1500px
   riportate su una finestra più larga, arrotondate per difetto dove far
   crescere tutto in modo lineare non avrebbe senso (una barra laterale non
   deve diventare mezza pagina).                                            */
@media (min-width:1600px){

  :root{
    --yh-rail-w:296px;   /* 250 a 1500 → ~16% dello schermo, come nel prototipo */
    --yh-hdr-h:72px;
  }

  /* --- guscio -------------------------------------------------------- */
  .yh-brandblock{ padding-left:20px; gap:12px; }
  .logo-text{ font-size:1.45rem; }
  .yh-logo-mark{ width:34px; height:34px; border-radius:10px; }
  .yh-logo-mark .yh-i{ width:22px; height:22px; }

  .yh-crumb-up{ font-size:15px; }
  .yh-crumb-now{ font-size:16px; }

  .yh-period-now{ font-size:14px; padding:0 14px; }
  .yh-period-nav{ width:31px; height:31px; }
  .user-name{ font-size:.85rem; }
  .user-avatar{ width:34px; height:34px; }
  .theme-toggle .yh-i,
  .back-button .yh-i{ width:18px; height:18px; }
  .back-button{ font-size:.85rem; }

  .main-content{ padding:30px 34px; }

  /* --- barra laterale ------------------------------------------------ */
  .yh-mk-val{ font-size:15px; }
  .market-badge{ padding:13px 15px; }
  .sidebar-menu a{
    font-size:15px;
    gap:13px;
    padding:11px 13px;
    margin:2px 12px;
    border-radius:11px;
  }
  .sidebar-menu .icon,
  .sidebar-menu a .yh-i{ width:22px; height:22px; }
  .sidebar-group-label{ font-size:10.5px; padding:17px 25px 7px; }
  .yh-rail-foot .logout-button{ font-size:14px; padding:11px 14px; }

  /* --- testata di pagina --------------------------------------------- */
  .content-header{ margin-bottom:24px; padding-bottom:19px; }
  .content-title{ font-size:30px; }
  .content-subtitle{ font-size:15px; }

  /* --- schede numeriche ---------------------------------------------- */
  /* 230px riportava a 5 colonne (vedi 12.5.5): 190 tiene le sei in fila
     anche qui, restando piu' larghe che allo scalino precedente. */
  .stats-grid{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:16px;
    margin-bottom:26px;
  }
  .stat-card{ padding:20px 22px; }
  .stat-value{ font-size:32px; }
  .stat-label,
  .stat-card h3{ font-size:11.5px; }
  .stat-icon,
  .ceo-stat-icon,
  .profilo-kpi-icon,
  .hr-kpi-icon{ width:42px; height:42px; border-radius:12px; }
  .stat-icon .yh-i,
  .ceo-stat-icon .yh-i,
  .profilo-kpi-icon .yh-i,
  .hr-kpi-icon .yh-i{ width:22px; height:22px; }

  /* --- grafici -------------------------------------------------------- */
  .charts-grid{ gap:16px; margin-bottom:26px; }
  .chart-card{ padding:22px; }
  .chart-header{ margin-bottom:20px; }
  .chart-title{ font-size:19px; }

  /* --- tabelle --------------------------------------------------------
     Le celle salgono, ma con misura: il Dettaglio Attivazioni ha 49
     colonne e ogni pixel di corpo la allarga di parecchio.               */
  .table-title{ font-size:17px; }
  .data-table th{ font-size:11px; padding:11px 16px; }
  .data-table td{ font-size:13.5px; padding:12px 16px; }
  .table-header{ margin-bottom:16px; }

  /* --- controlli ------------------------------------------------------ */
  .fl-search,
  .rp-persi-search,
  .search-input,
  #activity-log-search{
    background-position:14px center;
    background-size:19px 19px;
    padding-left:42px;
  }
}

/* ============================ 15.2 · I DUE PULSANTI FUORI TAVOLOZZA ====== */
/* .btn-csv era verde #34D399 e .btn-reload blu #60A5FA: due colori della
   tavolozza vecchia, rimasti perché nessuna fase li aveva incrociati.
   Nella tavolozza nuova il verde vuol dire "confermato" e il blu non vuol
   dire niente: su un pulsante che scarica un file o ricarica una lista
   erano due semafori accesi a caso. Diventano neutri come gli altri comandi
   secondari; l'unica azione colorata di una sezione resta quella principale.
   Il corpo sale da 10 a 11,5px: erano i due testi più piccoli dell'intera
   applicazione.                                                            */
/* .btn-export e' il gemello di .btn-csv nella sezione Attivazioni: stessa
   famiglia, stesso trattamento. */
.btn-csv,
.btn-reload,
.btn-export{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  font-size:11.5px;
  padding:6px 11px;
  border-radius:var(--r-sm);
}
.btn-csv:hover,
.btn-reload:hover,
.btn-export:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.btn-csv:disabled,
.btn-reload:disabled,
.btn-export:disabled{ opacity:.45; }

@media (min-width:1600px){
  .btn-csv,
  .btn-reload,
  .btn-export{ font-size:12.5px; padding:7px 13px; }
}

/* ---------- 16-menu-bandiere.css ---------- */
/* =========================================================================
   16 · MENU OPACHI E BANDIERE DISEGNATE

   Due segnalazioni dell'utente, tutte e due giuste, e la seconda non era
   nostra ma va risolta lo stesso.
   ========================================================================= */

/* ================================ 16.1 · UN MENU NON È DI VETRO ========== */
/* La tendina dei mercati era `var(--glass-2)`, cioè bianco all'8,5%: sotto
   ci passavano le voci del menu e le si leggeva attraverso. In produzione,
   prima di noi, era `#1a1d24` — opaca. Vestendo tutto di vetro le abbiamo
   tolto l'unica cosa che le serviva davvero.

   La regola, che vale da qui in avanti: **il vetro è per i contenitori che
   stanno nel flusso e hanno dietro il fondo della pagina. Un pannello che
   galleggia sopra del testo è opaco.** Il blur resta: serve a staccare i
   bordi, non a far vedere cosa c'è sotto.                                  */
.market-dropdown,
.multi-select-dropdown,
.hrv2-ms-panel{
  background:var(--surface-menu);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:var(--shadow-2);
}
/* La bolla del giro guidato galleggia anche lei, sopra la pagina intera. */
.onboarding-bubble,
body.light-mode .onboarding-bubble{
  background:var(--surface-menu);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ==================================== 16.2 · BANDIERE, NON EMOJI ========= */
/* Su Windows le emoji-bandiera non esistono: il sistema mostra le due
   lettere del codice paese ("IT" al posto di 🇮🇹). È una scelta di
   Microsoft, non un carattere mancante, e non si aggira con un font.
   L'unica strada è disegnarle: sei <symbol> in cima al documento.

   Classe a parte e non `.yh-i`: quella impone `fill:none` e
   `stroke:currentColor`, che su una bandiera vorrebbe dire cancellarla.   */
.yh-flag{
  width:20px;
  height:14px;
  flex:0 0 auto;
  border-radius:2.5px;
  /* Il filo scuro serve al bianco delle bandiere: senza, la banda bianca
     dell'Italia e dell'Olanda si perde sul vetro chiaro. */
  box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.25);
  vertical-align:middle;
}
.market-option .yh-flag{ margin-right:2px; }
.yh-mk-flag .yh-flag{ width:22px; height:15px; }

@media (min-width:1600px){
  .yh-mk-flag .yh-flag{ width:24px; height:16px; }
}

/* ---------- 17-fase9.css ---------- */
/* =========================================================================
   17 · FASE 9 — l'atmosfera del fondo, il blocco utente, le schede KPI
   Nasce da un confronto diretto fra prototipo e produzione sulle due
   sezioni Dashboard e Contratti & KPI, chiesto dall'utente il 2026-09-09.
   Ogni blocco qui sotto chiude UNA differenza misurata, non immaginata.
   ========================================================================= */

/* 17.1 · Il fondo (grana + geometria delle luci) non sta qui: e' andato
   nella sua fonte unica, `01-fondamenta.css` §1.3 per il tema scuro e
   `08-chiaro.css` §8.2 per quello chiaro. Tenere una seconda copia qui
   voleva dire due posti da allineare a ogni ritocco — l'errore che ci e'
   gia' costato un giro con i colori dei pulsanti. */

/* ---------------------------------------------------- 17.2 · Il marchio --
   Misurato: in locale "YoyoHub" e' bianco (--ink), in produzione era
   giallo pieno. Il giallo resta dov'e' un marchio vero — la Y dentro il
   quadratino, che tiene anche il bagliore. Scritta e simbolo entrambi
   gialli erano due volte la stessa cosa, e rubavano l'accento ai dati.
   La misura NON si tocca: e' piu' grande di quella del prototipo perche'
   l'utente ha chiesto espressamente schermate piu' grandi (fase 7).       */
.logo-text{ color:var(--ink); }
body.light-mode .logo-text{ color:var(--ink); }

/* --------------------------------------------- 17.3 · Il blocco utente --
   Confronto misurato prototipo -> produzione:
     pastiglia   raggio 999px   ->  8px  (rettangolo)
     avatar      28px tondo     ->  30px quadrato con angoli
     avatar      vetro chiaro   ->  gradiente giallo, testo nero
   Il giallo pieno sull'avatar faceva del blocco utente l'elemento piu'
   acceso di tutta la testata: piu' di ogni dato. In locale e' vetro, e
   l'accento resta ai numeri. */
.user-profile{
  border-radius:999px;
  padding:4px 12px 4px 4px;
}
.user-avatar{
  border-radius:50%;
  background:var(--glass-3);
  background-image:none;
  border:1px solid var(--glass-edge-hi);
  color:var(--ink);
  font-weight:700;
}
body.light-mode .user-avatar{
  background:var(--glass-3);
  background-image:none;
  color:var(--ink);
}

/* ------------------------------------------ 17.4 · Il pulsante del tema --
   In locale i comandi di sola icona non hanno scatola: sono nudi e la
   scatola compare al passaggio del mouse. Qui sole e luna stavano in un
   riquadro fisso, che li faceva pesare quanto "Home" — che invece e' un
   comando con un'etichetta. Rimane a riquadro solo "Home".                */
.theme-toggle{
  background:transparent;
  border-color:transparent;
  border-radius:10px;
  color:var(--ink-2);
}
.theme-toggle:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge);
  color:var(--ink);
}

/* ------------------------------------------------- 17.5 · Schede KPI ----
   Ordine diverso, ed e' la differenza che si vede di piu' fra le due
   schermate di Contratti & KPI:
     locale      etichetta in alto a sinistra · icona in alto a destra ·
                 numero grande sotto
     produzione  icona in un cerchio in alto a sinistra · numero ·
                 etichetta sotto
   Il numero e' il motivo per cui la scheda esiste: deve stare sotto la
   sua etichetta, non sopra. L'icona e' un segnaposto, va al margine.

   Si fa senza toccare il markup: la scheda diventa una griglia a due
   colonne e i tre pezzi si dispongono da soli. Tutto cio' che la scheda
   contiene in piu' (il pulsante macchina fotografica, l'interruttore
   rappel, il dettaglio per provider) resta dov'era, in fondo, a tutta
   larghezza — per questo la regola generica sui figli sta per ultima.

   Vale per ogni .stat-card dell'app, non solo per queste due sezioni:
   il componente e' lo stesso ovunque (Marketing, Consulenti, HR usano
   la stessa identica terna icona/valore/etichetta), e lasciarne due
   diverse dalle altre sarebbe peggio del difetto di partenza.           */
.stats-grid .stat-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-content:start;
}
.stats-grid .stat-card > *{ grid-column:1 / -1; }
.stats-grid .stat-card > .stat-label{
  grid-column:1; grid-row:1;
  align-self:center;
}
.stats-grid .stat-card > .stat-icon{
  grid-column:2; grid-row:1;
  justify-self:end; align-self:start;
}
.stats-grid .stat-card > .stat-value{
  grid-column:1 / -1; grid-row:2;
  margin-top:8px;
}
/* L'icona perde il cerchio: nel prototipo e' un segno sottile al margine,
   non una pastiglia. Il fondo tondo era servito nella fase 2 per far
   sembrare icone le emoji di produzione — le emoji non ci sono piu'
   (fase 6), quindi la ragione e' decaduta. */
.stats-grid .stat-card > .stat-icon{
  width:auto; height:auto;
  background:none;
  border:none;
  border-radius:0;
  color:var(--ink-3);
}
/* Il pulsante macchina fotografica sta nell'angolo in alto a destra, dove
   ora va anche l'icona: si sovrapporrebbero. Compare al passaggio del
   mouse, quindi in quel momento l'icona si fa da parte. Vale per la sola
   scheda che quel pulsante ce l'ha davvero — in tutta l'app e' una. */
#kpi-card-attivazioni > .stat-icon{ transition:opacity var(--speed) var(--ease); }
#kpi-card-attivazioni:hover > .stat-icon{ opacity:0; }

/* 17.6 · Le linguette "Da Firmare / Firmati / Annullati" non stanno qui:
   `04-controlli.css` §4.8 le governava gia' (ci aveva tolto arancione,
   verde e rosso). Il passaggio da pastiglia piena a sottolineatura e'
   scritto li', dove sta il resto della loro storia. */

/* ------------------------------------------- 17.7 · La scheda principale --
   Nella Dashboard del prototipo la prima delle due schede — Attivazioni —
   non e' pari all'altra: ha il bordo giallo, una riga gialla sul filo
   superiore e un alone caldo dentro il vetro. E' il numero da cui si parte
   a leggere la pagina, e la gerarchia lo dice senza scrivere niente.
   In produzione le due erano identiche.
   `.stat-card` ha gia' position:relative e overflow:hidden, quindi non
   serve altro; il ::before pero' in produzione e' spento a mano
   (`.stat-card::before{display:none}`) e va riacceso. */
#mappa-attivazioni-section .stats-grid .stat-card:first-child{
  border-color:var(--accent-line);
}
#mappa-attivazioni-section .stats-grid .stat-card:first-child::before{
  content:'';display:block;
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 76%);
}
#mappa-attivazioni-section .stats-grid .stat-card:first-child::after{
  content:'';display:block;
  position:absolute;top:-60%;right:-25%;width:70%;height:170%;
  pointer-events:none;opacity:.55;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 66%);
}

/* ---------- 18-menu-profilo.css ---------- */
/* =========================================================================
   18 · LA TENDINA DEL PROFILO
   Nella fase 6 la freccetta sul blocco utente era stata lasciata fuori di
   proposito: non apriva niente, e un comando che non fa nulla e' peggio di
   un comando assente. Dal 2026-09-09 apre qualcosa — la voce per il
   pannello di amministrazione — ma solo per chi ha il ruolo `admin`.

   Chi non ce l'ha non vede la freccetta e il blocco non e' cliccabile:
   e' `yhAbilitaMenuProfilo()` a mettere la classe `.yh-acct-on`, e la
   chiama solo se il SERVER ha detto di si'. Il CSS qui sotto non protegge
   nulla e non deve dare l'impressione di farlo.
   ========================================================================= */

/* Il blocco diventa l'ancora della tendina. `position:relative` e basta:
   niente transform, niente overflow, o la tendina verrebbe tagliata (e'
   l'inciampo gia' preso con il menu dei mercati). */
.user-profile{
  position:relative;
}
.user-profile.yh-acct-on{
  cursor:pointer;
}
.user-profile.yh-acct-on:hover{
  border-color:var(--glass-edge-hi);
}
.user-profile.yh-acct-on:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* La freccetta e' l'unico segno che qui c'e' qualcosa da aprire: sta muta
   finche' non la si guarda, e ruota quando il menu e' aperto. */
.yh-acct-chev{
  width:14px;height:14px;
  margin-left:2px;margin-right:4px;
  color:var(--ink-3);
  flex:0 0 auto;
  transition:transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
/* Scritto a mano e non lasciato al foglio di stile del browser: `.yh-i` non
   dichiara `display`, quindi oggi la regola di sistema `[hidden]{display:none}`
   funziona — ma basta che un domani qualcuno dia un display alle icone e la
   freccetta ricomparirebbe a chi non e' admin. */
.yh-acct-chev[hidden]{ display:none; }
.user-profile.yh-acct-on:hover .yh-acct-chev{ color:var(--ink-2); }
.user-profile[aria-expanded="true"] .yh-acct-chev{
  transform:rotate(180deg);
  color:var(--ink);
}

/* ------------------------------------------------------- La tendina -----
   OPACA, non di vetro: galleggia sopra il contenuto della pagina, e la
   regola nata nella fase 8 dice che cio' che galleggia sopra del testo si
   legge attraverso se e' traslucido. Gettone `--surface-menu`, lo stesso
   della tendina dei mercati. */
.yh-acct-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:120;              /* l'header e' a 100: la tendina gli sta sopra */
  min-width:238px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--surface-menu);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
}
.yh-acct-menu[hidden]{ display:none; }

/* L'email non e' un comando: e' l'intestazione che dice di chi e' questo
   menu. Percio' non ha stato di passaggio del mouse. */
.yh-acct-mail{
  padding:8px 12px 9px;
  font-size:12px;
  color:var(--ink-3);
  word-break:break-all;
  border-bottom:1px solid var(--glass-edge);
  margin-bottom:4px;
}

.yh-acct-voce{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.yh-acct-voce .yh-i{
  width:16px;height:16px;
  color:var(--ink-3);
  flex:0 0 auto;
  transition:color var(--speed) var(--ease);
}
.yh-acct-voce:hover{
  background:var(--accent-soft);
  color:var(--ink);
}
.yh-acct-voce:hover .yh-i{ color:var(--accent-text); }
.yh-acct-voce:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

/* ---------- 19-flotta-caricamento.css ---------- */
/* =========================================================================
   19 · L'OVERLAY DI CARICAMENTO DI FLOTTA — non e' roba di questo lavoro

   Questo blocco NON l'ho scritto io. L'ha scritto l'agente che lavora su
   Flotta & Rinnovi, il 2026-09-10, e l'aveva messo in fondo a
   `public/css/hub-theme.css`. Ma quel file e' GENERATO: `build.sh` lo rimonta
   da zero concatenando `theme/*.css`, quindi al primo montaggio successivo le
   sue 39 righe sono state cancellate senza che nessuno se ne accorgesse.
   Le ho ripristinate da git e portate qui, che e' il solo posto dove
   sopravvivono a un montaggio.

   Percio' e' rimasto tutto com'era, compresi i colori scritti a mano
   (#3B82F6, #8B8F98) che nel resto del tema sarebbero gettoni: non e' mio, e
   correggerlo vorrebbe dire cambiare il lavoro di un altro senza che me
   l'abbia chiesto. Se un domani va ripulito, e' una riga per gettone.
   ========================================================================= */

/* ============================================================
   Overlay locale sezione Flotta (loading gate) — 2026-09-10
   Mostrato durante loadFlottaData() e rimosso al termine.
   ============================================================ */
.fl-section-loading {
    position: absolute;
    inset: 0;
    background: rgba(11, 13, 16, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    animation: flFadeIn 200ms ease;
}
.fl-section-loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: flSpin 800ms linear infinite;
}
.fl-section-loading-text {
    font-size: 0.85rem;
    color: #8B8F98;
    letter-spacing: 0.02em;
}
@keyframes flSpin {
    to { transform: rotate(360deg); }
}
@keyframes flFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}