/* =============================================================
   cns-theme.css — il vestito della dashboard consulenti.
   Stessa lingua visiva di yoyohub (gettoni, Sofia Pro, tema chiaro).
   Si carica DOPO tutti gli altri fogli di ogni pagina.
   Generato da build.sh — non modificare a mano: modifica
   design/tema/*.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.

   Viene da yoyohub (yoyohub-redesign/migrazione/theme/01-fondamenta.css):
   stessi gettoni, stessi valori, perche' la richiesta e' esattamente questa —
   il consulente passa da yoyohub.yoyomove.ai a my.yoyomove.ai e non deve
   accorgersi di aver cambiato prodotto. Se un valore cambia la', va cambiato
   anche qui.

   Differenza voluta: qui NON ci sono i gettoni --hrv2-*. In yoyohub servono a
   ridipingere una sezione (HR & Compensi) che nella dashboard non esiste.
   ========================================================================= */

/* ------------------------------------------------------- 1.1 · Sofia Pro --
   I nove file erano GIA' qui, in public/fonts/sofia-pro/, con gli stessi nomi
   che hanno in yoyohub. Li usava solo la landing di Flotta & Rinnovi; il resto
   della dashboard scaricava Poppins e Montserrat da Google.
   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 -- */
: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'e' 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 cio' che galleggia SOPRA il contenuto (menu a
     tendina, la barra laterale quando esce su schermo stretto). Un menu ha
     dietro del testo, e all'8% di bianco lo si legge attraverso: e' la
     differenza fra un menu e una lastra di plexiglass (lezione della fase 8
     di yoyohub). */
  --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. Gettone suo perche' in tema chiaro il
     vetro diventa quasi bianco e una traccia "vetro su vetro" sparirebbe. */
  --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
     --on-accent   il testo sopra il giallo
     Nella dashboard vecchia il giallo era #FFC107 (ambra): diventa il giallo
     di yoyohub, e l'ambra resta ai soli avvisi (--wait). */
  --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' e' arancio, non giallo: il giallo e' 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);
}

/* ----------------------------------------------------------- 1.3 · Fondo --
   I gradienti stanno direttamente sul body, non su uno pseudo-elemento in
   posizione fissa: uno strato in piu' creerebbe un contesto di impilamento e
   le finestre e i menu a tendina finirebbero sotto.
   background-attachment:fixed tiene il campo fermo mentre la pagina scorre.
   Le misure sono in percentuali di finestra (in pixel, su un monitor largo, il
   giallo diventava una macchia: e' gia' successo in yoyohub il 09/09).

   Il primo strato e' la GRANA: un puntino ogni 3px. Toglie il "digitale" alle
   superfici traslucide — il vetro su fondo perfettamente liscio sembra
   plastica.

   `styles.css` scrive `body{background:#0a0a0a}` con lo stesso peso (0,0,1):
   questo foglio si carica dopo, e a parita' vince l'ultimo. */
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: i fogli vecchi scrivono il font alla
   lettera in decine di regole singole (Poppins, Montserrat, Inter, Manrope,
   JetBrains Mono) che non riscriviamo una per una. `font-family` non e' uno dei
   meccanismi del JavaScript: questo !important non scavalca niente che il JS
   accenda o spenga.
   Il link a Google Fonts resta nelle pagine: toglierlo vuol dire toccare nove
   file per risparmiare pochi kB, e si fa insieme al guscio (fase 2). */
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
   delle schede, importi. E' cio' che il monospaziato serviva a ottenere. */
table,td,th,.data-table,
.stat-value,.crb-kpi-cell-val,.lv-chip-value,.lv-kpi-giant{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- 1.5 · Dettagli --
   Barre di scorrimento in tono col vetro: quelle di sistema, chiare e spesse,
   spezzano 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)}

/* Chi naviga da tastiera deve vedere dove si trova. */
: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-chiaro.css ---------- */
/* =========================================================================
   02 · TEMA CHIARO — i gettoni
   La dashboard vecchia non ha un tema chiaro: e' una delle due richieste del
   rifacimento ("come yoyohub, piu' il tema chiaro").

   Qui ci sono SOLO i gettoni ribaltati sotto `body.light-mode`, gli stessi
   valori di yoyohub (migrazione/theme/08-chiaro.css). Tutto cio' che nel tema
   usa var() segue da solo. Le regole che servono in chiaro per un componente
   preciso stanno nel file di quel componente, non qui: cosi' chi tocca la
   barra laterale trova in un posto solo come si comporta nei due temi.

   Nessuno mette ancora la classe `light-mode` sul body: l'interruttore arriva
   col guscio (fase 2). Fino ad allora questo file e' pronto e spento.
   ========================================================================= */

body.light-mode{
  --ground:#f1efe9;
  /* Il giallo di fondo in chiaro sta a .30: di piu' diventa una macchia calda
     sopra la testata, non una luce d'ambiente. */
  --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
     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);
  --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);
}

/* Il fondo in chiaro: stessa geometria dello scuro, senza lo strato di grana
   (su carta chiara i puntini sporcano il testo invece di dare consistenza). */
body.light-mode{
  background-color:var(--ground);
  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%);
  background-size:auto;
  background-repeat:no-repeat;
  color:var(--ink);
}

/* ---------- 03-guscio.css ---------- */
/* =========================================================================
   03 · IL GUSCIO
   Barra laterale, intestazione mobile, velo, caricamento iniziale, intestazione
   di pagina. Stessa ricetta di yoyohub (migrazione/theme/02-guscio.css e il
   pannello admin): la barra e' una lastra di vetro, la voce accesa e' vetro
   rialzato con il filo giallo a sinistra, "Esci" e' l'unico rosso.

   COSA NON SI TOCCA, e perche':
   · position, width, top/left e transform della barra. Sotto i 768px la barra
     esce da sinistra con `transform` e la classe `.open` (toggleSidebar, in
     ogni pagina); e `.main-content` ha margin-left:260px perche' la barra e'
     larga 260. Cambiare una di queste cose rompe il menu su telefono.
   · display delle voci di menu. `auth.js:47` spegne le voci vietate con
     `style.display='none'` in linea: qui non si dichiara MAI display su
     `.nav-item`, e mai con !important (lo verifica controlla-cns.py).
   · display/opacity di `.sidebar-overlay`, `.auth-loading`, `.app-content`:
     sono accesi e spenti dal JavaScript.
   ========================================================================= */


/* ------------------------------------------------ 3.1 · Le icone disegnate --
   Stesse misure e stesso tratto di yoyohub (.yh-i). */
.cns-i{
  width:20px;
  height:20px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
}
/* Il foglio di base del browser dichiara [hidden]{display:none} SOLO per gli
   elementi HTML: un <svg> sta in un altro namespace e l'attributo non avrebbe
   effetto. Senza questa riga nell'interruttore si vedrebbero sole E luna. */
.cns-i[hidden]{ display:none; }

/* Lo sprite sta nella pagina ma non deve occupare spazio. Niente display:none:
   in alcuni browser un <svg> spento non presta piu' i suoi <symbol> agli <use>. */
.cns-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}


/* ---------------------------------------------- 3.2 · Caricamento iniziale --
   Il velo "Verifica sessione..." che copre la pagina finche' il token non e'
   verificato. Solo pelle: la sua accensione e' della classe .hidden. */
.auth-loading{ background:var(--ground); }
.auth-spinner{
  border-color:var(--track);
  border-top-color:var(--accent);
}
.auth-loading-text{ color:var(--ink-2); }


/* ------------------------------------------------------ 3.3 · La barra -- */
.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 -1px 0 0 var(--glass-spec);
  padding:1.1rem .85rem 1rem;
}

/* Dal 14/09 marchio, interruttore del tema e riquadro utente stanno nella
   testata in alto (03b-testata.css), non piu' in cima alla barra. */

/* Il riquadro nero rialzato con la Y gialla. Qui — e solo qui — i colori sono
   scritti alla lettera: e' un marchio, e un marchio non si inverte quando si
   accende il tema chiaro. E' la stessa lastra di yoyohub e del pannello admin. */
.cns-marchio{
  width:30px; height:30px;
  flex:0 0 auto;
  border-radius:9px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  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);
}
.cns-marchio .cns-i{
  width:19px; height:19px;
  color:var(--accent);
  filter:drop-shadow(0 0 5px var(--accent-glow));
}

/* L'interruttore del tema: pulsante di sola icona, vetro. */
.cns-tema-btn{
  width:36px; height:36px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.cns-tema-btn:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.cns-tema-btn .cns-i{ width:18px; height:18px; }

/* Il blocco utente: capsula in vetro, un tono piu' chiaro della testata,
   senza un secondo blur (blur-su-blur costa e non si vede). */
.sidebar-user{
  gap:.7rem;
  padding:.7rem .75rem;
  margin-bottom:0;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
}
/* L'iniziale era su un gradiente giallo-viola: torna sul solo giallo di marchio. */
.sidebar-avatar{
  width:36px; height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
  font-weight:700;
  font-size:.85rem;
  box-shadow:0 0 18px -6px var(--accent-glow);
}
.sidebar-user-name{
  color:var(--ink);
  font-size:.875rem;
  font-weight:600;
  line-height:1.25;
}
.sidebar-user-team{
  color:var(--ink-3);
  font-size:.72rem;
  letter-spacing:.02em;
}

/* La colonna delle voci scorre per conto suo: la barra di scorrimento in tono. */
.sidebar-nav::-webkit-scrollbar-thumb{ background:var(--glass-3); }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background:var(--glass-edge-hi); }


/* ---------------------------------------------------- 3.4 · Sezioni e voci -- */
.nav-section{ margin-bottom:1.15rem; }
/* Etichette di gruppo: guide silenziose, non voci di menu. */
.nav-section-title{
  color:var(--ink-3);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  padding-left:.8rem;
  margin-bottom:.4rem;
}

.nav-item{
  gap:.75rem;
  padding:.6rem .8rem;
  margin-bottom:.15rem;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:.9rem;
  font-weight:400;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease);
}
.nav-item:hover{
  background:var(--glass-2);
  color:var(--ink);
}
/* Voce accesa: vetro rialzato + filo giallo a sinistra. Il filo e' un box-shadow
   inset e non un border: un bordo sposterebbe il testo di tre pixel. */
.nav-item.active{
  background:var(--glass-3);
  color:var(--ink);
  font-weight:500;
  box-shadow:inset 3px 0 0 var(--accent), inset 0 1px 0 var(--glass-spec);
}

.nav-item .nav-icon{
  width:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-3);
  transition:color var(--speed) var(--ease);
}
.nav-item:hover .nav-icon{ color:var(--ink-2); }
.nav-item.active .nav-icon{ color:var(--accent-text); }

/* "In arrivo". L'opacita' e i clic spenti sono di styles.css e restano: qui
   si ridipinge solo l'etichetta. La parola ("Coming Soon") la scrive il foglio
   vecchio con `content`, e non la riscriviamo: e' testo che l'utente legge. */
/* Voce ed etichetta non vanno mai a capo: con la parola lunga ("Yoyo Pro.Co.")
   e l'etichetta accanto, la voce si spezzava su due righe e l'etichetta pure
   ("COMING" sopra, "SOON" sotto) — visto alla prima installazione. */
.nav-item.coming-soon{ white-space:nowrap; }
.nav-item.coming-soon::after{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-3);
  border-radius:var(--r-pill);
  padding:.1rem .4rem;
  font-size:.5rem;
  letter-spacing:.05em;
  line-height:1.4;
  white-space:nowrap;
  flex:0 0 auto;
}


/* ----------------------------------------------------- 3.5 · Esci, in fondo --
   L'unico rosso del guscio, come in yoyohub: pulsante pieno largo quanto la
   barra, separato dalle voci da un filetto. */
.sidebar-footer{
  padding-top:.85rem;
  border-top:1px solid var(--glass-edge);
}
.logout-btn{
  justify-content:center;
  gap:.55rem;
  padding:.62rem .8rem;
  border-radius:var(--r-md);
  background:var(--lost-soft);
  border:1px solid color-mix(in srgb, var(--lost) 32%, transparent);
  color:var(--lost);
  font-size:.875rem;
  font-weight:600;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.logout-btn:hover{
  background:color-mix(in srgb, var(--lost) 22%, transparent);
  border-color:var(--lost);
}
.logout-btn .nav-icon{ width:18px; color:inherit; }
.logout-btn .cns-i{ width:18px; height:18px; }


/* ------------------------------------------- 3.6 · Contenuto e intestazione --
   Il contenuto resta SENZA vetro di proposito: e' la superficie che lascia
   vedere il fondo atmosferico dietro le schede. margin-left non si tocca. */
.main-content{
  padding:2rem 2.25rem 2.5rem;
}
.page-header{
  margin-bottom:1.75rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--glass-edge);
}
/* Il titolo era un gradiente giallo ritagliato nel testo: torna inchiostro
   pieno, il giallo resta al marchio. */
.page-title{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}
.page-subtitle{
  color:var(--ink-2);
  font-size:.875rem;
  margin-top:.35rem;
}


/* ------------------------------------------------ 3.7 · Su schermo stretto --
   Sotto i 768px la barra ESCE SOPRA il contenuto: diventa opaca, come ogni
   cosa che galleggia sopra del testo (lezione dei menu in yoyohub). E il
   blur va spento: un backdrop-filter rende l'elemento il riquadro di
   riferimento dei suoi figli fissi. */
.mobile-header{
  background:var(--surface-menu);
  border-bottom:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1);
  padding:.7rem 1rem;
}
.hamburger-btn{
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--ink);
  border:1px solid var(--glass-edge);
  background:var(--glass-2);
}
.mobile-logo{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--accent-text);
  font-weight:800;
  letter-spacing:-.01em;
}

/* Il velo dietro la barra aperta: il fondo della pagina diluito e sfocato.
   Solo il colore: display lo decide la classe .active. */
.sidebar-overlay{
  background:color-mix(in srgb, var(--ground) 55%, transparent);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

@media (max-width:768px){
  .sidebar{
    background:var(--surface-menu);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:var(--shadow-3);
  }
  .page-title{ font-size:1.45rem; }
}

/* ---------------------------------------------- Le voci che escono --
   Richiesta del 14/09: "fai capire quali sono i link esterni". Quattro voci
   di "Servizi" portano fuori dalla dashboard (Contratti, Preventivi: un altro
   strumento; Chatbot, eSign: una nuova scheda). La freccia che esce dal
   riquadro sta in fondo alla voce; la nota "esterni" accanto al titolo della
   sezione spiega la freccia una volta sola. Il markup lo mette servizi-cns.py. */
/* Lo spazio e' misurato: nella barra da 260px "Compilazione Contratti" occupa
   150px e con la freccia a 14px e lo spazio pieno andava a capo (visto il
   14/09). Freccia a 12px, spazio fra icona e testo un filo piu' stretto per
   tutte le voci (restano allineate), la freccia che rientra nel margine
   destro: 154px disponibili. */
.nav-item{ gap:.7rem; }
.nav-item:has(.cns-esterno){ white-space:nowrap; }
.nav-item .cns-esterno{
  width:12px; height:12px;
  margin-left:auto;
  margin-right:-.4rem;
  color:var(--ink-3);
  opacity:.8;
  transition:color var(--speed) var(--ease), opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.nav-item:hover .cns-esterno{
  color:var(--accent-text);
  opacity:1;
  transform:translate(1px,-1px);
}
.nav-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-right:.8rem;
}
.cns-nota-esterni{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.58rem;
  letter-spacing:.08em;
  color:var(--ink-3);
  cursor:help;
}
.cns-nota-esterni .cns-i{ width:11px; height:11px; }
/* Solo per i lettori di schermo ("si apre in una nuova scheda"): fuori
   dall'area visibile col ritaglio, non spento (uno spento non lo legge
   nessuno). */
.cns-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 03b-testata.css ---------- */
/* =========================================================================
   03b · LA TESTATA E LA BARRA NASCONDIBILE
   Richiesta dell'utente del 14/09: "sposta il rettangolo del profilo e team a
   destra come su yoyohub e rendi la barra laterale nascondibile".

   La testata e' l'intestazione che prima si vedeva solo su telefono
   (`.mobile-header`), ora a tutte le misure, come l'header di yoyohub:
     sinistra  hamburger (telefono) · "nascondi la barra" (computer) · Y · Yoyomove
     destra    riquadro utente (stesso elemento, spostato) · sole/luna
   Il markup lo mette testata-cns.py.

   La barra compatta (`body.cns-barra-compatta`, la mette tema.js o lo script
   d'avvio) vale solo da computer: si stringe a una colonna di icone, i nomi
   restano nel DOM (li leggono i lettori di schermo) e compaiono passando col
   mouse (`title`). Il testo si ritaglia con overflow, non si spegne: display
   delle voci resta affare di auth.js e dei permessi.
   ========================================================================= */

:root{
  --testata-h:60px;
  --barra-w:260px;
  --barra-compatta-w:72px;
}

/* ------------------------------------------------------ 3b.1 · Testata -- */
.cns-testata{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.6rem;
  position:fixed;
  top:0; left:0; right:0;
  width:auto;
  height:var(--testata-h);
  padding:0 1.1rem 0 .9rem;
  z-index:101;
  background:color-mix(in srgb, var(--surface-menu) 86%, transparent);
  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);
}
.cns-testata .mobile-logo{
  font-size:1.12rem;
  margin-left:.1rem;
}
.cns-compatta-btn{
  width:36px; height:36px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  cursor:pointer;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.cns-compatta-btn:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
.cns-compatta-btn .cns-i{
  width:18px; height:18px;
  transition:transform .22s var(--ease);
}
/* A barra compatta la freccetta dell'icona guarda verso destra: "riapri". */
body.cns-barra-compatta .cns-compatta-btn .cns-i{ transform:scaleX(-1); }

.cns-testata-destra{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
  min-width:0;
}
/* Il riquadro utente, a destra come in yoyohub: capsula bassa. */
.cns-testata .sidebar-user{
  gap:.6rem;
  min-width:0;
  padding:.28rem .9rem .28rem .28rem;
  border-radius:12px;
}
.cns-testata .sidebar-avatar{
  width:32px; height:32px;
  border-radius:9px;
  font-size:.78rem;
}
.cns-utente-testo{ min-width:0; }
.cns-testata .sidebar-user-name{
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:14rem;
}
.cns-testata .sidebar-user-team{
  font-size:.7rem;
  line-height:1.2;
}

/* --------------------------------------------- 3b.2 · Da computer ----- */
@media (min-width:769px){
  /* L'hamburger apre il cassetto del telefono: da computer non serve (al suo
     posto c'e' "nascondi la barra"). */
  .cns-testata .hamburger-btn{ display:none; }

  .sidebar{
    top:var(--testata-h);
    height:calc(100vh - var(--testata-h));
    width:var(--barra-w);
    transition:width .22s var(--ease), padding .22s var(--ease);
  }
  .main-content{
    padding-top:calc(var(--testata-h) + 2rem);
    transition:margin-left .22s var(--ease);
  }

  /* ---- barra compatta: sole icone ---- */
  body.cns-barra-compatta .sidebar{
    width:var(--barra-compatta-w);
    padding-left:.7rem;
    padding-right:.7rem;
  }
  body.cns-barra-compatta .main-content{ margin-left:var(--barra-compatta-w); }

  /* Il titolo di sezione diventa un filetto: il testo resta, ritagliato. */
  body.cns-barra-compatta .nav-section-title{
    height:1px;
    margin:.5rem .45rem .65rem;
    padding:0;
    overflow:hidden;
    color:transparent;
    background:var(--glass-edge);
  }
  /* Voci ed Esci: l'icona al centro della colonna, il nome oltre il bordo
     ritagliato. Il padding in % e' della larghezza della colonna:
     (colonna - icona) / 2 la mette in mezzo. */
  body.cns-barra-compatta .nav-item,
  body.cns-barra-compatta .logout-btn{
    justify-content:flex-start;
    gap:2rem;
    padding-left:calc((100% - 20px) / 2);
    padding-right:0;
    overflow:hidden;
    white-space:nowrap;
  }
  body.cns-barra-compatta .sidebar-footer{ padding-top:.7rem; }
}

/* ---------------------------------------------- 3b.3 · Da telefono ---- */
@media (max-width:768px){
  /* "Nascondi la barra" e' un comando da computer: su telefono la barra e'
     gia' un cassetto che si apre con l'hamburger. */
  .cns-testata .cns-compatta-btn{ display:none; }
  /* Nella testata stretta del riquadro utente restano le iniziali: nome e
     team ci stanno solo a scapito del marchio. */
  .cns-testata .cns-utente-testo{ display:none; }
  .cns-testata{
    gap:.5rem;
    padding:0 .75rem;
  }
  .cns-testata .sidebar-user{
    padding:0;
    background:none;
    border:0;
  }
  .sidebar{
    top:var(--testata-h);
    height:calc(100% - var(--testata-h));
  }
  .main-content{ padding:calc(var(--testata-h) + 1.25rem) 1rem 2rem; }
}

/* ---------- 04-primitive.css ---------- */
/* =========================================================================
   04 · PRIMITIVE COMUNI
   I pezzi che si ripetono da una pagina all'altra, vestiti una volta sola:
   schede statistiche (Dashboard, Tempi Consegna), gusci di grafici e
   tabelle (Dashboard, Attivazioni, Tempi Consegna, Ticket), filtri e
   ricerca, tabella dati, gettoni d'esito, paginazione, campi dei moduli,
   pulsanti, toast, stati vuoti.

   Stesse ricette di yoyohub (migrazione/theme/03-schede, 04-controlli,
   05-tabelle), selettori della dashboard. Solo gettoni: nessun colore alla
   lettera, cosi' il tema chiaro segue da solo.

   Peso: `body .x` (0,1,1) batte `.x` di styles.css (0,1,0) senza
   !important. Qui NON si toccano display, visibility, opacity dei toast
   (li accende utils.js con .show) ne' la misura dei contenitori dei
   grafici (Chart.js misura .chart-container).

   Le finestre (tk-modal, neweden, flotta) non hanno una classe comune:
   ognuna si veste con la sua pagina, in fase 4.
   ========================================================================= */

/* ---------------------------------------------- 4.1 · Niente stiramenti --
   Una scheda piu' alta trascinerebbe le vicine alla sua altezza. */
body .stats-grid,
body .charts-grid{
  align-items:start;
}

/* ===================================================== 4.2 · SCHEDE ==== */
/* Il vetro: una ricetta sola per tutti i gusci. */
body .stat-card,
body .chart-card,
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);
  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);
}
/* Il grafico: al passaggio solo bordo e ombra, niente spostamenti sopra
   un canvas misurato da Chart.js. */
body .chart-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}

/* Le emoji delle schede restano (sono contenuto): un tondo di vetro le fa
   leggere come icone. */
body .stat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  font-size:1.05rem;line-height:1;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:50%;
  margin-bottom:.75rem;
}
body .stat-value{
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
}
body .stat-label{
  color:var(--ink-2);
  font-size:.8rem;
}

body .chart-title,
body .table-title{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.01em;
}
body .table-header{
  padding-bottom:1rem;
  border-bottom:1px solid var(--glass-edge);
}

/* ===================================================== 4.3 · FILTRI ==== */
body .filter-select,
body .search-input{
  background-color:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:.85rem;
  min-height:38px;
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
             background-color var(--speed) var(--ease);
}
body .filter-select:hover,
body .search-input:hover{
  border-color:var(--glass-edge-hi);
}
body .filter-select:focus,
body .search-input:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
body .search-input::placeholder{
  color:var(--ink-3);
}
/* La tendina aperta la disegna il sistema: fondo pieno, mai trasparente. */
body .filter-select option{
  background:var(--surface-menu);
  color:var(--ink);
}

/* ============================================== 4.4 · TABELLA DATI ==== */
body .data-table th,
body .data-table td{
  border-bottom:1px solid var(--track);
}
/* Le intestazioni gialle diventano grigie e piccole, come in yoyohub: il
   giallo resta per cio' che conta (voce accesa, azioni). */
body .data-table th{
  color:var(--ink-3);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.1em;
  border-bottom-color:var(--glass-edge);
}
body .data-table td{
  color:var(--ink-2);
}
body .data-table tbody tr:hover{
  background:var(--glass-2);
}
body .data-table tbody tr:hover td{
  color:var(--ink);
}
body .data-table tbody tr:last-child td{
  border-bottom:none;
}

/* ============================================ 4.5 · GETTONI D'ESITO ==== */
/* Le quattro classi le sceglie il JS (utils.js getEsitoClass,
   tempi-consegna.js getStatoConsegnaClass): approved / rejected /
   pending / cancelled. */
body .esito-badge{
  display:inline-flex;align-items:center;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
}
body .esito-badge.approved{
  background:var(--won-soft);color:var(--won);
  border-color:color-mix(in srgb, var(--won) 28%, transparent);
}
body .esito-badge.rejected{
  background:var(--lost-soft);color:var(--lost);
  border-color:color-mix(in srgb, var(--lost) 28%, transparent);
}
/* "In corso" e' un'attesa, non il marchio: arancio, non giallo. */
body .esito-badge.pending{
  background:var(--wait-soft);color:var(--wait);
  border-color:color-mix(in srgb, var(--wait) 28%, transparent);
}
body .esito-badge.cancelled{
  background:var(--off-soft);color:var(--off);
  border-color:color-mix(in srgb, var(--off) 28%, transparent);
}

/* ============================================== 4.6 · PAGINAZIONE ===== */
body .table-pagination{
  border-top:1px solid var(--glass-edge);
}
body .pagination-info,
body .pagination-current{
  color:var(--ink-3);
}
body .pagination-btn{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  color:var(--ink);
  font-weight:600;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
body .pagination-btn:hover:not(:disabled){
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
}
body .pagination-btn:disabled{
  color:var(--ink-3);
}

/* ================================================== 4.7 · CAMPI ======== */
body .form-group label{
  color:var(--ink-2);
  font-weight:600;
  font-size:.8rem;
}
body .form-group input{
  background: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);
}
body .form-group input::placeholder{
  color:var(--ink-3);
}
body .form-group input:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ================================================ 4.8 · PULSANTI ======= */
body .btn-primary,
body .btn-secondary,
body .btn-danger,
body .btn-success{
  border-radius:var(--r-pill);
  font-weight:700;
  letter-spacing:.005em;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease),
             filter var(--speed) var(--ease);
}
/* Il giallo pieno: l'azione principale della pagina. */
body .btn-primary{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  box-shadow:0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
body .btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 10px 26px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
body .btn-primary:active{
  transform:translateY(0);
}
body .btn-primary:disabled{
  transform:none;
  filter:saturate(.4);
  cursor:default;
}
/* Il vetro: l'azione di contorno. */
body .btn-secondary{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
body .btn-secondary:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
}
body .btn-danger{
  background:var(--lost-soft);
  border:1px solid color-mix(in srgb, var(--lost) 32%, transparent);
  color:var(--lost);
}
body .btn-danger:hover{
  background:color-mix(in srgb, var(--lost) 22%, transparent);
}
body .btn-success{
  background:var(--won-soft);
  border:1px solid color-mix(in srgb, var(--won) 32%, transparent);
  color:var(--won);
}
body .btn-success:hover{
  background:color-mix(in srgb, var(--won) 22%, transparent);
}

/* =================================================== 4.9 · TOAST ======= */
/* Solo colori, forma e ombra: posizione, transform e opacity restano a
   styles.css e a utils.js (.show). Carta opaca con il filo di stato a
   sinistra, come i menu galleggianti: sopra il contenuto niente vetro. */
body .toast-notification{
  background:var(--surface-menu);
  color:var(--ink);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
  font-weight:600;
  font-size:.88rem;
}
body .toast-success{ box-shadow:inset 3px 0 0 var(--won),  var(--shadow-3); }
body .toast-error  { box-shadow:inset 3px 0 0 var(--lost), var(--shadow-3); }
body .toast-info   { box-shadow:inset 3px 0 0 var(--live), var(--shadow-3); }

/* ============================================== 4.10 · STATI VUOTI ===== */
body .empty-state{
  color:var(--ink-3);
  font-size:.9rem;
}

/* ------------------------------------------ 4.11 · Filtri su telefono -- */
/* Sopra le tabelle i filtri andavano a capo ognuno largo quanto il suo testo
   (visto il 14/09 su Attivazioni a 390px): due per riga, la ricerca intera. */
@media (max-width:768px){
  body .table-header .filters-row{ width:100%; }
  body .table-header .filters-row > .filter-select{
    flex:1 1 calc(50% - .4rem);
    min-width:0;
  }
  body .table-header .filters-row > .search-input{
    flex:1 1 100%;
    min-width:0;
  }
}

/* ---------- 05-dashboard-profilo.css ---------- */
/* =========================================================================
   05 · DASHBOARD E PROFILO
   Richiesta dell'utente del 14/09: "migliora le kpi e soprattutto la tabella
   'i tuoi obiettivi', fai che sia tutto piu' comprensibile e intuitivo;
   migliora il profilo".

   · Le schede numeriche dicono COSA contano (una riga sotto il numero) e il
     periodo e' scritto a parole accanto al titolo della sezione.
   · "I tuoi obiettivi": per ogni gara una barra sola — la tua strada fino al
     primo — e una frase ("Ti mancano 12 attivazioni per raggiungere il
     primo", "Sei in testa"). Prima erano due barre per riga e un "2 vs 14".
   · Il profilo apre con chi sei (iniziali, nome, team), poi le statistiche
     come schede, poi dati e password affiancati.
   ========================================================================= */

/* ------------------------------------------- 5.1 · Titolo di sezione -- */
.cns-sezione-testa{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  margin:0 0 .9rem;
}
.cns-sezione-titolo{
  margin:0;
  color:var(--ink);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.cns-periodo{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  padding:.2rem .75rem;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-text);
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
}

/* ------------------------------------------------ 5.2 · Schede numeri -- */
body .cns-kpi{
  --k:var(--accent);
  --k-testo:var(--accent-text);
  --k-soft:var(--accent-soft);
  position:relative;
  overflow:hidden;
  padding:1.25rem 1.35rem 1.2rem;
}
body .cns-kpi--blu  { --k:var(--live); --k-testo:var(--live); --k-soft:var(--live-soft); }
body .cns-kpi--verde{ --k:var(--won);  --k-testo:var(--won);  --k-soft:var(--won-soft); }
/* Il filo di colore in cima: lega la scheda alla sua icona. */
body .cns-kpi::before{
  content:"";
  position:absolute;
  top:0; left:1.35rem;
  width:2.2rem; height:3px;
  border-radius:0 0 3px 3px;
  background:var(--k);
}
body .cns-kpi-testa{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.85rem;
}
body .cns-kpi .stat-icon{
  width:34px; height:34px;
  margin:0;
  border-radius:10px;
  background:var(--k-soft);
  border-color:color-mix(in srgb, var(--k) 25%, transparent);
  color:var(--k-testo);
}
body .cns-kpi .stat-icon .cns-i{ width:18px; height:18px; }
body .cns-kpi .stat-label{
  margin:0;
  color:var(--ink-2);
  font-size:.82rem;
  font-weight:600;
}
body .cns-kpi .stat-value{
  margin:0 0 .45rem;
  font-size:2.15rem;
  line-height:1.05;
}
.cns-kpi-nota{
  margin:0;
  color:var(--ink-3);
  font-size:.74rem;
  line-height:1.4;
}

/* ----------------------------------------------- 5.3 · I tuoi obiettivi -- */
body .ranking-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);
  padding:1.35rem 1.4rem 1.4rem;
}
body .ranking-header{
  align-items:flex-start;
  margin-bottom:1.1rem;
}
body .ranking-title{
  color:var(--ink);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.cns-obiettivi-sotto{
  margin:.2rem 0 0;
  color:var(--ink-3);
  font-size:.8rem;
}
body .ranking-grid{
  gap:1rem;
  margin-top:0;
  align-items:start;
}
body .ranking-section{
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  padding:1.05rem 1.1rem 1.1rem;
}
body .ranking-section-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
  color:var(--ink);
  font-size:.9rem;
  font-weight:600;
}
.cns-gara-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.cns-gara-ico .cns-i{ width:16px; height:16px; }
.cns-gara-team{
  display:inline-block;
  margin-left:.25rem;
  padding:.05rem .5rem;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-text);
  font-size:.74rem;
  font-weight:700;
}
.cns-gara-nota{
  display:block;
  margin-top:.1rem;
  color:var(--ink-3);
  font-size:.72rem;
  font-weight:400;
}

.cns-gara + .cns-gara{
  margin-top:.95rem;
  padding-top:.95rem;
  border-top:1px dashed var(--track);
}
.cns-gara-riga{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
.cns-gara-cosa{
  color:var(--ink);
  font-size:.86rem;
  font-weight:600;
}
.cns-gara-conti{
  color:var(--ink-3);
  font-size:.74rem;
  white-space:nowrap;
}
.cns-gara-conti b{
  color:var(--ink);
  font-size:.95rem;
  font-weight:800;
}
.cns-gara-conti .cns-gara-tu{ color:var(--accent-text); }
.cns-gara-sep{ margin:0 .3rem; }

.cns-gara-pista{
  position:relative;
  height:10px;
  margin:.5rem 0 .45rem;
  border-radius:var(--r-pill);
  background:var(--track);
  overflow:hidden;
}
.cns-gara-riempi{
  height:100%;
  min-width:0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 12px -2px var(--accent-glow);
  transition:width .6s var(--ease);
}
.cns-gara-frase{
  display:flex;
  align-items:center;
  gap:.35rem;
  color:var(--ink-2);
  font-size:.78rem;
}
.cns-gara-frase b{
  color:var(--accent-text);
  font-weight:800;
}
.cns-gara-frase .cns-i{ width:15px; height:15px; }
.cns-gara--primo .cns-gara-riempi{
  background:var(--won);
  box-shadow:0 0 12px -2px var(--won);
}
.cns-gara--primo .cns-gara-frase{
  color:var(--won);
  font-weight:700;
}
.cns-gara--vuoto .cns-gara-frase{ color:var(--ink-3); }

/* ------------------------------------------- 5.4 · Ultime attivazioni -- */
body .activity-item{ border-bottom-color:var(--track); }
body .activity-client{ color:var(--ink); font-weight:600; }
body .activity-meta{ color:var(--ink-3); }

/* ----------------------------------------------------- 5.5 · Profilo -- */
.cns-profilo-eroe{
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin-bottom:1.75rem;
  padding:1.35rem 1.5rem;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-edge);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--accent-soft), transparent 55%),
    var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
.cns-profilo-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:64px; height:64px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 0 26px -8px var(--accent-glow);
}
.cns-profilo-chi{ min-width:0; }
.cns-profilo-nome{
  color:var(--ink);
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.cns-profilo-team{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.4rem;
  padding:.22rem .65rem;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  font-size:.78rem;
  font-weight:600;
}
.cns-profilo-team .cns-i{ width:14px; height:14px; }

body .profile-grid{ align-items:start; }
body .profile-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 .profile-card-title{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--ink);
  font-weight:700;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--glass-edge);
}
body .profile-card-title .cns-i{
  width:18px; height:18px;
  color:var(--accent-text);
}
body .profile-row{
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--track);
}
body .profile-row:last-child{ border-bottom:none; }
body .profile-label{ color:var(--ink-3); }
body .profile-value{
  color:var(--ink);
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
}
.cns-profilo-avviso{
  margin:-.35rem 0 1rem;
  color:var(--ink-3);
  font-size:.78rem;
}
.cns-myboard-stati{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:1rem;
}

@media (max-width:768px){
  .cns-profilo-eroe{ padding:1.1rem; gap:.9rem; }
  .cns-profilo-avatar{ width:52px; height:52px; border-radius:15px; font-size:1.1rem; }
  .cns-profilo-nome{ font-size:1.2rem; }
  body .cns-kpi .stat-value{ font-size:1.85rem; }
}

/* Le classi di stato scritte per esteso, anche quando coincidono coi valori
   di partenza: chi cerca `cns-kpi--oro` o `cns-gara-chi` le trova qui. */
body .cns-kpi--oro{ --k:var(--accent); --k-testo:var(--accent-text); --k-soft:var(--accent-soft); }
.cns-gara-chi{ color:var(--ink-3); }

/* ---------- 06-verifica-preforma.css ---------- */
/* =========================================================================
   06 · VERIFICA PREFORMA
   Fino al 14/09 lo stile di questa pagina stava in 74 righe di <style> dentro
   verifica-preforma.html, con i colori scritti alla lettera per lo scuro: in
   chiaro l'importo e i menu Mese/Anno erano bianco su bianco. Qui le stesse
   regole, coi gettoni. In pagina resta una riga sola (l'input file nascosto,
   che e' un meccanismo e non un vestito).

   Stati della preforma: inviata (dal consulente), confermata / rifiutata
   (dall'HR in yoyohub, server.js:5763). Nient'altro.
   ========================================================================= */

.preforma-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-bottom:1.5rem;
  align-items:start;
}
@media (max-width:768px){ .preforma-grid{ grid-template-columns:1fr; } }

.upload-card,
.riepilogo-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);
  padding:1.35rem 1.4rem 1.4rem;
  min-width:0;
}
.card-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.1rem;
  color:var(--ink);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.cns-card-ico{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color:var(--accent-text);
}
.cns-card-ico .cns-i{ width:17px; height:17px; }

/* ---- riepilogo del mese ---- */
.riepilogo-mese{
  display:inline-flex;
  margin-bottom:1.1rem;
  padding:.2rem .7rem;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  font-size:.8rem;
  font-weight:600;
}
.riepilogo-label{
  color:var(--ink-3);
  font-size:.8rem;
}
.riepilogo-importo{
  margin:.2rem 0 0;
  color:var(--accent-text);
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.1;
}
.cns-riepilogo-secondo{
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--track);
}
.cns-riepilogo-numero{
  margin-top:.15rem;
  color:var(--ink);
  font-size:1.4rem;
  font-weight:800;
}

/* ---- modulo di caricamento ---- */
.upload-card .form-group{ margin-bottom:1rem; }
.upload-card .form-group label{
  display:block;
  margin-bottom:.4rem;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.form-input,
.form-select{
  width:100%;
  min-height:42px;
  padding:.6rem .9rem;
  box-sizing:border-box;
  background-color:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:.9rem;
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.form-input::placeholder{ color:var(--ink-3); }
.form-input:hover,
.form-select:hover{ border-color:var(--glass-edge-hi); }
.form-input:focus,
.form-select:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.form-select option{
  background:var(--surface-menu);
  color:var(--ink);
}

.file-drop{
  padding:1.6rem 1rem;
  border:1.5px dashed var(--accent-line);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 4%, transparent);
  text-align:center;
  cursor:pointer;
  transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.file-drop:hover,
.file-drop.dragover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.file-drop-icon{
  display:inline-grid;
  place-items:center;
  width:44px; height:44px;
  margin-bottom:.55rem;
  border-radius:12px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.file-drop-icon .cns-i{ width:22px; height:22px; }
.file-drop-text{
  color:var(--ink-2);
  font-size:.84rem;
}
.file-drop-name{
  margin-top:.5rem;
  color:var(--accent-text);
  font-size:.88rem;
  font-weight:700;
  overflow-wrap:anywhere;
}

/* Il pulsante d'invio e' l'azione principale della pagina: lo stesso giallo
   pieno di .btn-primary, largo quanto la scheda. */
.btn-upload{
  width:100%;
  min-height:44px;
  margin-top:.4rem;
  padding:.75rem;
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--on-accent);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.btn-upload:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}
.btn-upload:disabled{
  filter:saturate(.4);
  transform:none;
  cursor:not-allowed;
}

/* ---- storico ---- */
/* La tabella la scrive lo script della pagina: su telefono scorre dentro la
   sua scheda invece di allargare la pagina (sbordava di 207px a 390px). */
#storicoContainer{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.storico-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  margin-top:.25rem;
}
.storico-table th{
  padding:.7rem .75rem;
  text-align:left;
  color:var(--ink-3);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid var(--glass-edge);
}
.storico-table td{
  padding:.75rem;
  color:var(--ink-2);
  font-size:.88rem;
  border-bottom:1px solid var(--track);
  vertical-align:middle;
}
.storico-table tbody tr:last-child td{ border-bottom:none; }
.storico-table tbody tr:hover td{
  background:var(--glass-2);
  color:var(--ink);
}
.storico-table td:first-child{ color:var(--ink); font-weight:600; }

.stato-badge{
  display:inline-flex;
  align-items:center;
  padding:.22rem .7rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.stato-inviata{
  background:var(--live-soft); color:var(--live);
  border-color:color-mix(in srgb, var(--live) 28%, transparent);
}
.stato-confermata{
  background:var(--won-soft); color:var(--won);
  border-color:color-mix(in srgb, var(--won) 28%, transparent);
}
.stato-rifiutata{
  background:var(--lost-soft); color:var(--lost);
  border-color:color-mix(in srgb, var(--lost) 28%, transparent);
}

.note-hr{
  color:var(--lost);
  font-size:.8rem;
  line-height:1.4;
}
.btn-download-small{
  display:inline-flex;
  align-items:center;
  padding:.25rem .7rem;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink);
  font-size:.74rem;
  font-weight:700;
  cursor:pointer;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.btn-download-small:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
}
.empty-storico{
  padding:2rem;
  color:var(--ink-3);
  font-size:.9rem;
  text-align:center;
}

/* ---------- 07-ticket.css ---------- */
/* =========================================================================
   07 · TICKET POST CONSEGNA
   tickets.css disegnava la pagina per lo scuro, coi colori alla lettera: in
   chiaro le descrizioni erano grigio chiaro su bianco, la finestra "Nuovo
   ticket" e il pannello del dettaglio restavano neri. Qui gli stessi pezzi,
   coi gettoni.

   Aprire e chiudere finestra e pannello e' affare di tickets.js
   (style.display): qui NON si toccano display, opacity, visibility, ne' la
   posizione dei due livelli. Solo superfici, testo, bordi.

   Colori dei gettoni: la categoria "contratto" era verde acqua, un colore che
   i gettoni di yoyohub non hanno. Resta verde acqua, con un gettone locale
   ribaltato per il chiaro (non si riusa --won: il verde vuol gia' dire
   "risolto").
   ========================================================================= */

:root{
  --cns-acqua:#2dd4bf;
  --cns-acqua-soft:rgba(45,212,191,.15);
}
body.light-mode{
  --cns-acqua:#0f766e;
  --cns-acqua-soft:rgba(15,118,110,.12);
}

/* ------------------------------------------------ 7.1 · Testata pagina -- */
/* "+ Nuovo ticket": il "+" e' testo, resta; il pulsante e' il giallo pieno
   delle primitive. */

/* ------------------------------------------------------- 7.2 · Lista -- */
.ticket-list{ gap:.6rem; }
.ticket-row{
  background:color-mix(in srgb, var(--ink) 2.5%, transparent);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  padding:.95rem 1.1rem;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease);
}
.ticket-row:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-1);
}
.ticket-contratto{
  color:var(--ink);
  font-size:.82rem;
  font-weight:600;
}
.ticket-descrizione{
  color:var(--ink-2);
  font-size:.85rem;
}
.ticket-data{
  color:var(--ink-3);
  font-size:.74rem;
}

/* ------------------------------------------------------ 7.3 · Gettoni -- */
.tk-badge{
  display:inline-flex;
  align-items:center;
  padding:.18rem .6rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:.7rem;
  font-weight:700;
  line-height:1.3;
}
/* Una ricetta: fondo tenue, testo pieno, bordo a meta'. Il colore lo dice la
   variabile. */
.tk-badge{ --b:var(--off); --b-soft:var(--off-soft); background:var(--b-soft); color:var(--b); border-color:color-mix(in srgb, var(--b) 26%, transparent); }

.tk-badge-categoria-consegna  { --b:var(--live);      --b-soft:var(--live-soft); }
.tk-badge-categoria-documenti { --b:var(--hold);      --b-soft:var(--hold-soft); }
.tk-badge-categoria-pagamento { --b:var(--wait);      --b-soft:var(--wait-soft); }
.tk-badge-categoria-contratto { --b:var(--cns-acqua); --b-soft:var(--cns-acqua-soft); }
.tk-badge-categoria-tecnico   { --b:var(--lost);      --b-soft:var(--lost-soft); }
.tk-badge-categoria-altro     { --b:var(--off);       --b-soft:var(--off-soft); }

.tk-badge-prio-urgente{ --b:var(--lost); --b-soft:var(--lost-soft); }
.tk-badge-prio-alta   { --b:var(--wait); --b-soft:var(--wait-soft); }
.tk-badge-prio-media  { --b:var(--live); --b-soft:var(--live-soft); }
.tk-badge-prio-bassa  { --b:var(--off);  --b-soft:var(--off-soft); }

.tk-badge-stato-aperto            { --b:var(--off);  --b-soft:var(--off-soft); }
.tk-badge-stato-in_lavorazione_hos{ --b:var(--hold); --b-soft:var(--hold-soft); }
.tk-badge-stato-in_lavorazione_cs { --b:var(--wait); --b-soft:var(--wait-soft); }
.tk-badge-stato-risolto           { --b:var(--won);  --b-soft:var(--won-soft); }
.tk-badge-stato-chiuso            { --b:var(--ink-3); --b-soft:var(--track); }

/* -------------------------------------------- 7.4 · Campi della pagina -- */
/* tickets.css vestiva solo `.main-content textarea`, ma la finestra "Nuovo
   ticket" sta FUORI da .main-content: la sua Descrizione restava un riquadro
   di sistema largo 160px (difetto gia' in produzione, visto il 14/09). */
.tk-modal textarea{
  width:100%;
  padding:.75rem .9rem;
  font-size:.9rem;
  line-height:1.45;
  resize:vertical;
}
.main-content textarea,
.tk-modal textarea{
  background: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);
}
.main-content textarea::placeholder,
.tk-modal textarea::placeholder{ color:var(--ink-3); }
.main-content textarea:focus,
.tk-modal textarea:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.cns-nota-campo{
  color:var(--ink-3);
  font-weight:400;
}

/* --------------------------------------- 7.5 · Finestra "Nuovo ticket" -- */
/* Galleggia sopra il contenuto: carta opaca, mai vetro. */
.tk-modal-overlay{
  background:color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.tk-modal{
  background:var(--surface-menu);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
}
.tk-modal-header{
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--glass-edge);
}
.tk-modal-title{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.tk-modal-close{
  width:34px; height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:10px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  font-size:1.35rem;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tk-modal-close:hover{
  background:var(--glass-3);
  color:var(--ink);
}
.tk-modal-body{ padding:1.3rem 1.4rem 1.4rem; }
/* I menu della finestra sono .filter-select larghi: stessa altezza dei campi. */
.tk-modal .filter-select{ min-height:42px; }

.tk-dropzone{
  border:1.5px dashed var(--accent-line);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 4%, transparent);
  transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.tk-dropzone:hover,
.tk-dropzone.dragover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.tk-dropzone-icon{
  display:inline-grid;
  place-items:center;
  width:40px; height:40px;
  margin-bottom:.45rem;
  border-radius:12px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.tk-dropzone-icon .cns-i{ width:20px; height:20px; }
.tk-dropzone-text{ color:var(--ink-2); }

.tk-file-item{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-sm);
  color:var(--ink-2);
}
.tk-file-remove{ color:var(--lost); }
.tk-file-remove:hover{ color:var(--ink); }

/* ------------------------------------------- 7.6 · Pannello dettaglio -- */
.tk-drawer-overlay{
  background:color-mix(in srgb, var(--ground) 55%, transparent);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.tk-drawer{
  background:var(--surface-menu);
  border-left:1px solid var(--glass-edge);
  box-shadow:var(--shadow-3);
}
.tk-drawer-header{ border-bottom:1px solid var(--glass-edge); }
.tk-drawer-title{
  color:var(--ink);
  font-size:1.02rem;
}
.tk-drawer-info{
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  color:var(--ink-2);
}
.tk-drawer-info-label{ color:var(--ink-3); }
.tk-drawer-info-value{ color:var(--ink); }

.tk-thread-label{
  color:var(--ink-3);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  border-bottom:1px solid var(--track);
}
.tk-thread .chat-loading{ color:var(--ink-3); }

.tk-msg{
  border-radius:14px;
  color:var(--ink);
}
.tk-msg-me { background:var(--live-soft); border:1px solid color-mix(in srgb, var(--live) 24%, transparent); }
.tk-msg-hos{ background:var(--hold-soft); border:1px solid color-mix(in srgb, var(--hold) 24%, transparent); }
.tk-msg-cs { background:var(--wait-soft); border:1px solid color-mix(in srgb, var(--wait) 24%, transparent); }
.tk-msg-name{ color:var(--ink-2); font-weight:700; }
.tk-msg-me  .tk-msg-name{ color:var(--live); }
.tk-msg-hos .tk-msg-name{ color:var(--hold); }
.tk-msg-cs  .tk-msg-name{ color:var(--wait); }
.tk-msg-text{ color:var(--ink); }
.tk-msg-time{ color:var(--ink-3); }
.tk-msg-allegati a{ color:var(--live); }
.tk-msg-allegati img{ border:1px solid var(--glass-edge); }
.tk-msg-allegato-file{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:var(--r-sm);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  font-size:.75rem;
}

.tk-composer{ border-top:1px solid var(--glass-edge); }
.tk-composer-row textarea{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-sm);
  color:var(--ink);
}
.tk-composer-row textarea::placeholder{ color:var(--ink-3); }
.tk-composer-row textarea:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.tk-attach-btn{
  display:grid;
  place-items:center;
  min-width:38px;
  min-height:36px;
  border-radius:10px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}
.tk-attach-btn:hover{
  background:var(--glass-3);
  color:var(--ink);
}
.tk-attach-btn .cns-i{ width:18px; height:18px; }
.tk-composer-closed-msg{ color:var(--ink-3); }

/* ---------- 08-tempi-consegna.css ---------- */
/* =========================================================================
   08 · TEMPI CONSEGNA
   · Le 4 schede: stessa scheda-numero della Dashboard (05). La griglia a 4
     colonne era scritta in linea e non si stringeva su telefono (sbordo di
     79px a 390px): ora e' una classe che scende a 2 e a 1 colonna.
   · "Avvisi" e' un filtro: la scheda si tocca. Da accesa ha il bordo arancio
     (prima lo scriveva il JS con style.border, ora mette cns-kpi-attiva).
   · "Tempo rimanente": i quattro casi con i colori di stato invece del
     giallo di marchio (in chiaro il giallo come testo non si leggeva).
   · Il pulsante della colonna Avvisi porta ai Ticket.

   Il pannello chat (.chat-panel) non si veste: openChat() non la chiama piu'
   nessuno dal passaggio ai Ticket (codice morto, segnalato, non toccato).
   ========================================================================= */

body .cns-kpi-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  margin-bottom:1.75rem;
}
@media (max-width:1100px){ body .cns-kpi-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:480px){ body .cns-kpi-4{ gap:.75rem; } }

body .cns-kpi--grigio { --k:var(--off);  --k-testo:var(--ink-2); --k-soft:var(--off-soft); }
body .cns-kpi--arancio{ --k:var(--wait); --k-testo:var(--wait);  --k-soft:var(--wait-soft); }
body .cns-kpi--arancio .stat-value{ color:var(--wait); }

.cns-kpi-cliccabile{ cursor:pointer; }
.cns-kpi-cliccabile:focus-visible{
  outline:2px solid var(--accent-line);
  outline-offset:2px;
}
body .cns-kpi-attiva,
body .cns-kpi-attiva:hover{
  border-color:var(--wait);
  box-shadow:0 0 0 1px var(--wait), var(--shadow-2), inset 0 1px 0 var(--glass-spec);
}

/* ---- tempo rimanente ---- */
.cns-tempo{ font-weight:600; white-space:nowrap; }
.cns-tempo--fatto  { color:var(--won); }
.cns-tempo--vuoto  { color:var(--ink-3); font-weight:400; }
.cns-tempo--ritardo{ color:var(--lost); }
.cns-tempo--manca  { color:var(--wait); }

.cns-cella-centro{ text-align:center; }

/* ---- pulsante "apri ticket" nella colonna Avvisi ---- */
body .ticket-open-btn{
  display:inline-grid;
  place-items:center;
  width:36px; height:36px;
  padding:0;
  border-radius:10px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
body .ticket-open-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent-text);
}
body .ticket-open-btn .chat-icon{ display:inline-grid; place-items:center; line-height:1; }
body .ticket-open-btn .cns-i{ width:18px; height:18px; }

/* ---------- 09-premi.css ---------- */
/* =========================================================================
   09 · CARTE PREMI — pagina "in arrivo"
   Le 31 righe di <style> che stavano in premi.html, coi gettoni. Il carattere
   della pagina resta: una carta che galleggia, il titolo, l'etichetta. La carta
   non e' piu' un'emoji ma l'icona del menu, ingrandita su una lastra di vetro.
   ========================================================================= */

.coming-soon-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding:2.5rem 1.5rem;
  text-align:center;
  background:
    radial-gradient(60% 55% at 50% 30%, var(--accent-soft), transparent 70%),
    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);
}
.coming-soon-icon{
  display:grid;
  place-items:center;
  width:96px; height:96px;
  margin-bottom:1.6rem;
  border-radius:26px;
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-2), 0 0 40px -12px var(--accent-glow), inset 0 1px 0 var(--glass-spec);
  color:var(--accent-text);
  animation:cns-galleggia 3s ease-in-out infinite;
}
.coming-soon-icon .cns-i{ width:46px; height:46px; stroke-width:1.3; }
@keyframes cns-galleggia{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
.coming-soon-title{
  margin-bottom:.7rem;
  color:var(--ink);
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.025em;
}
.coming-soon-desc{
  max-width:500px;
  margin-bottom:1.8rem;
  color:var(--ink-2);
  font-size:1.05rem;
  line-height:1.6;
}
.coming-soon-badge{
  padding:.5rem 1.3rem;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-text);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
}

/* ---------- 10-flotta.css ---------- */
/* =========================================================================
   10 · FLOTTA & RINNOVI
   Tre fogli vecchi disegnavano questa pagina per lo scuro, coi colori alla
   lettera: landing-volt.css (la landing), board-kanban.css (fascia numeri,
   board a 5 colonne, contratti persi), styles.css (elenco clienti, finestra
   di dettaglio). In chiaro la landing restava nera sotto una barra bianca e
   l'elenco era una pila di righe nere.

   Come in yoyohub (migrazione/theme/07-board.css): non si ridisegna, si
   ritinge coi gettoni. Layout, misure e meccanismi restano dei fogli vecchi
   e del JavaScript:
     · #fl-landing si spegne con style.setProperty('display','none','important')
       e le due sottoviste con style.display (flotta-rinnovi.js flOpenSub);
     · --rb-col-w e le colonne su telefono sono di board-kanban.js;
     · finestra (.flotta-modal-overlay.active) e avvisi (.show, --show):
       qui mai display, opacity, visibility.

   Pesi. board-kanban.css ha 20 regole `body.light-mode .rb-*` (0,2,1): le
   regole della board qui partono da `body #fl-sub-rinnovi` (1,1,1) e le
   superano senza !important. landing-volt.css scrive `#fl-landing.lv-landing
   .x` (1,2,0): qui `body #fl-landing.lv-landing .x` (1,2,1).
   ========================================================================= */

/* =================================================== 10.1 · LANDING ==== */
body #fl-landing.lv-landing{
  --lv-bg:transparent;
  --lv-fg:var(--ink);
  --lv-muted:var(--ink-2);
  /* Il numero gigante dei Pendenti e' giallo di marchio: come TESTO in chiaro
     va scurito, quindi accent-text (in scuro e' il giallo pieno). */
  --lv-amber:var(--accent-text);
  --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);
  --lv-glass:var(--glass-1);
  --lv-hair:var(--glass-edge);
  --lv-label-sm:var(--ink-3);
  --lv-label-lg:var(--accent-text);
  --lv-chip-bg:color-mix(in srgb, var(--ink) 4%, transparent);
  color:var(--ink);
  isolation:isolate;
}

/* L'aurora: in landing-volt.css e' uno strato FISSO su tutta la finestra, nero
   con sei macchie in mix-blend "screen". Sul nostro fondo colorato lo screen
   dilaga e, essendo fisso, tingeva anche testata e barra (lezione di yoyohub
   del 10/09). Torna un alone dentro la sezione, senza fusione, molto tenue. */
body #fl-landing.lv-landing .lv-aurora{
  position:absolute;
  background:transparent;
}
body #fl-landing.lv-landing .lv-grain{
  position:absolute;
  opacity:.03;
}
body #fl-landing.lv-landing .lv-blob{
  mix-blend-mode:normal;
  filter:blur(170px) saturate(115%);
}
body #fl-landing.lv-landing .lv-blob.lv-b1{ opacity:.08; }
body #fl-landing.lv-landing .lv-blob.lv-b2{ opacity:.05; }
body #fl-landing.lv-landing .lv-blob.lv-b3{ opacity:.05; }
body #fl-landing.lv-landing .lv-blob.lv-b4{ opacity:.015; }
body #fl-landing.lv-landing .lv-blob.lv-b5{ opacity:.05; }
body #fl-landing.lv-landing .lv-blob.lv-b6{ opacity:.03; }

/* Pannelli e chip: la ricetta del resto del tema. */
body #fl-landing.lv-landing .lv-glass{
  background:var(--glass-1);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border-color:var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-spec);
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
body #fl-landing.lv-landing .lv-glass::before{
  background:linear-gradient(90deg, transparent, var(--glass-spec), transparent);
}
body #fl-landing.lv-landing .lv-panel:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-3), inset 0 1px 0 var(--glass-spec);
}
body #fl-landing.lv-landing .lv-glass-chip{
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:var(--glass-edge);
  border-radius:var(--r-md);
}

/* I colori che il blocco "FIX LAYOUT" di landing-volt.css scrive alla lettera
   (fuori dai gettoni --lv-*). */
body #fl-landing.lv-landing .lv-eyebrow-group{ color:var(--ink-3); }
body #fl-landing.lv-landing .lv-statement{ color:var(--ink); }
body #fl-landing.lv-landing .lv-rinnovi-num{ color:var(--accent-text); }

/* Etichette dei pannelli: blu per la flotta, giallo per i rinnovi. */
body #fl-landing.lv-landing .lv-panel-tag{
  color:var(--live);
  border-color:color-mix(in srgb, var(--live) 38%, transparent);
  background:var(--live-soft);
}
body #fl-landing.lv-landing .lv-panel.lv-rinnovi .lv-panel-tag{
  color:var(--accent-text);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}

/* I due pulsanti-freccia. */
body #fl-landing.lv-landing .lv-cta{
  background:var(--glass-2);
  border-color:var(--glass-edge);
  color:var(--ink);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body #fl-landing.lv-landing .lv-panel.lv-rinnovi .lv-cta:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--ink);
}
body #fl-landing.lv-landing .lv-panel.lv-flotta .lv-cta:hover{
  border-color:var(--live);
  background:var(--live-soft);
  color:var(--ink);
}

/* ============================================ 10.2 · TORNA INDIETRO ==== */
body .fl-back{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem 1rem;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
  font-weight:600;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
body .fl-back:hover{
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}

/* ======================================= 10.3 · FASCIA DEI NUMERI ====== */
body #fl-sub-rinnovi .crb-kpi-strip{
  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 #fl-sub-rinnovi .crb-kpi-cell{ border-right-color:var(--track); }
body #fl-sub-rinnovi .crb-kpi-cell--hero{ background:linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%); }
body #fl-sub-rinnovi .crb-kpi-cell-val{ color:var(--ink); font-weight:900; letter-spacing:-.03em; }
body #fl-sub-rinnovi .crb-kpi-cell-lbl{ color:var(--ink-3); }
body #fl-sub-rinnovi .crb-kpi-cell--orange .crb-kpi-cell-val{ color:var(--wait); }
body #fl-sub-rinnovi .crb-kpi-cell--blue   .crb-kpi-cell-val{ color:var(--live); }
body #fl-sub-rinnovi .crb-kpi-cell--green  .crb-kpi-cell-val{ color:var(--won); }
body #fl-sub-rinnovi .crb-kpi-cell--red    .crb-kpi-cell-val{ color:var(--lost); }
body #fl-sub-rinnovi .crb-kpi-cell--gray   .crb-kpi-cell-val{ color:var(--ink-3); }
body #fl-sub-rinnovi .crb-kpi-cell--purple .crb-kpi-cell-val{ color:var(--hold); }

/* ============================================== 10.4 · LA BOARD ======== */
/* Colonne: lastre di vetro. Larghezze MAI toccate (--rb-col-w e' del JS). */
body #fl-sub-rinnovi .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));
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
/* Gli accenti di colonna sulla tavolozza di stato: attesa → in contatto →
   preventivo → attivazione → esito. */
body #fl-sub-rinnovi .rb-col1{ --rb-accent:var(--off); }
body #fl-sub-rinnovi .rb-col2{ --rb-accent:var(--wait); }
body #fl-sub-rinnovi .rb-col3{ --rb-accent:var(--live); }
body #fl-sub-rinnovi .rb-col4{ --rb-accent:var(--hold); }
body #fl-sub-rinnovi .rb-col5{ --rb-accent:var(--won); }

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

body #fl-sub-rinnovi .rb-empty,
body #fl-sub-rinnovi .rb-empty-message,
body #fl-sub-rinnovi .rb-empty .empty-hint{ color:var(--ink-3); }
body #fl-sub-rinnovi .rb-empty-title{ color:var(--ink-2); }
body #fl-sub-rinnovi .rb-empty--filtered{ color:var(--wait); }

/* Chip e pillole: piatte, mai vetro (sono tante). */
body #fl-sub-rinnovi .rb-chip{ background:var(--track); border-color:var(--glass-edge); color:var(--ink-2); }
body #fl-sub-rinnovi .rb-chip:hover{ background:var(--glass-2); border-color:var(--rb-accent, var(--glass-edge-hi)); color:var(--ink); }
body #fl-sub-rinnovi .rb-chip.active{ background:var(--rb-accent, var(--accent)); border-color:transparent; color:var(--on-accent); }
body #fl-sub-rinnovi .rb-chip-reset{ background:transparent; color:var(--lost); }
body #fl-sub-rinnovi .rb-chip-reset:hover{ border-color:var(--lost); color:var(--lost); }
body #fl-sub-rinnovi .rb-chips-toggle{ background:var(--track); border-color:var(--glass-edge); color:var(--ink-3); }
body #fl-sub-rinnovi .rb-chips-toggle:hover{ background:var(--glass-2); border-color:var(--glass-edge-hi); color:var(--ink); }
body #fl-sub-rinnovi .rb-chips-toggle.has-active{ color:var(--rb-accent, var(--ink)); border-color:var(--rb-accent, var(--glass-edge)); }
body #fl-sub-rinnovi .rb-chips-toggle-count{ background:var(--rb-accent, var(--accent)); color:var(--on-accent); }

body #fl-sub-rinnovi .rb-scad-row{ border-top-color:var(--glass-edge); }
body #fl-sub-rinnovi .rb-scad-prefix{ color:var(--ink-3); }
body #fl-sub-rinnovi .rb-scad-pill{ background:transparent; border-color:var(--glass-edge-hi); color:var(--ink-2); }
body #fl-sub-rinnovi .rb-scad-pill:hover{ background:var(--glass-2); border-color:var(--glass-edge-hi); color:var(--ink); }
body #fl-sub-rinnovi .rb-scad-pill.active{ background:var(--glass-3); border-color:var(--ink-3); color:var(--ink); }
body #fl-sub-rinnovi .rb-scad-pill-count{ background:var(--track); color:var(--ink-2); }
body #fl-sub-rinnovi .rb-scad-pill.active .rb-scad-pill-count{ background:var(--ink); color:var(--ground); }

/* Card: vetro leggero, niente sfocatura (sono decine). */
body #fl-sub-rinnovi .rb-card{
  background:color-mix(in srgb, var(--ink) 3%, var(--glass-1));
  border:1px solid var(--glass-edge);
  border-left:3px solid var(--glass-edge-hi);
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
body #fl-sub-rinnovi .rb-card:hover{ border-color:var(--rb-accent, var(--glass-edge-hi)); }
body #fl-sub-rinnovi .rb-name,
body #fl-sub-rinnovi .rb-consulente-name{ color:var(--ink); }
body #fl-sub-rinnovi .rb-meta{ color:var(--ink-3); }

/* La fascia di scadenza: prima il JS scriveva il colore in linea, ora mette
   rb-scad--<fascia> (board-kanban.js _boardScadInfo). Il colore va sulla
   scritta e, con :has(), sul filo sinistro della card. */
body #fl-sub-rinnovi .rb-scad--scaduto   { color:var(--lost); }
body #fl-sub-rinnovi .rb-scad--vicino    { color:var(--wait); }
body #fl-sub-rinnovi .rb-scad--tranquillo{ color:var(--ink-3); }
body #fl-sub-rinnovi .rb-scad--ipotetica { color:var(--hold); }
body #fl-sub-rinnovi .rb-card:has(.rb-scad--scaduto)  { border-left-color:var(--lost); }
body #fl-sub-rinnovi .rb-card:has(.rb-scad--vicino)   { border-left-color:var(--wait); }
body #fl-sub-rinnovi .rb-card:has(.rb-scad--ipotetica){ border-left-color:var(--hold); }

body #fl-sub-rinnovi .rb-badge-unassigned{ background:var(--wait-soft); border-color:color-mix(in srgb, var(--wait) 40%, transparent); color:var(--wait); }
body #fl-sub-rinnovi .rb-badge-match{ background:var(--won-soft); border-color:color-mix(in srgb, var(--won) 35%, transparent); color:var(--won); }
body #fl-sub-rinnovi .rb-badge-esito.confermato{ background:var(--won-soft); color:var(--won); border-color:color-mix(in srgb, var(--won) 38%, transparent); }
body #fl-sub-rinnovi .rb-badge-esito.perso{ background:var(--lost-soft); color:var(--lost); border-color:color-mix(in srgb, var(--lost) 38%, transparent); }
body #fl-sub-rinnovi .rb-badge-esito.archiviato{ background:var(--off-soft); color:var(--ink-2); border-color:var(--glass-edge); }
body #fl-sub-rinnovi .rb-badge-att.approvata{ background:var(--won-soft); color:var(--won); }
body #fl-sub-rinnovi .rb-badge-att.condizione{ background:var(--wait-soft); color:var(--wait); }
body #fl-sub-rinnovi .rb-badge-att.senza-contratto{ background:var(--live-soft); color:var(--live); }
body #fl-sub-rinnovi .rb-badge-att.info-mancanti{ background:var(--wait-soft); color:var(--wait); }
body #fl-sub-rinnovi .rb-badge-att.garanzia{ background:var(--hold-soft); color:var(--hold); }
body #fl-sub-rinnovi .rb-badge-att.in-corso{ background:var(--track); color:var(--ink-3); }

body #fl-sub-rinnovi .rb-days-contact{ color:var(--wait); }
body #fl-sub-rinnovi .rb-hint,
body #fl-sub-rinnovi .rb-myboard-help{ color:var(--ink-3); }
body #fl-sub-rinnovi .rb-myboard-btn{ background:var(--wait-soft); border-color:color-mix(in srgb, var(--wait) 45%, transparent); color:var(--wait); }
body #fl-sub-rinnovi .rb-myboard-btn:hover{ background:color-mix(in srgb, var(--wait) 22%, transparent); }
body #fl-sub-rinnovi .rb-myboard-input{ background:var(--glass-2); border-color:color-mix(in srgb, var(--wait) 45%, transparent); color:var(--ink); }
body #fl-sub-rinnovi .rb-myboard-input:focus{ border-color:var(--wait); }
body #fl-sub-rinnovi .rb-myboard-save{ background:var(--won); color:var(--on-accent); }
body #fl-sub-rinnovi .rb-myboard-cancel{ background:var(--track); color:var(--ink-3); }
body #fl-sub-rinnovi .rb-myboard-cancel:hover{ color:var(--ink); }
body #fl-sub-rinnovi .rb-myboard-chip{ background:var(--live-soft); border-color:color-mix(in srgb, var(--live) 35%, transparent); color:var(--live); }
body #fl-sub-rinnovi .rb-dev-btn{ border-color:var(--hold); color:var(--hold); }
body #fl-sub-rinnovi .rb-dev-btn:hover{ color:var(--ink); }
body #fl-sub-rinnovi .rb-dev-tag{ background:var(--hold); color:var(--on-accent); }
body #fl-sub-rinnovi .rb-card-nav{ border-bottom-color:color-mix(in srgb, var(--hold) 25%, transparent); }
body #fl-sub-rinnovi .rb-card-nav-btn{ border-color:color-mix(in srgb, var(--hold) 35%, transparent); color:var(--hold); }
body #fl-sub-rinnovi .rb-card-nav-btn:hover{ background:var(--hold-soft); color:var(--ink); border-color:var(--hold); }
body #fl-sub-rinnovi .rb-card-nav-btn--disabled{ border-color:var(--glass-edge); color:var(--ink-3); }
body #fl-sub-rinnovi .rb-card-nav-tag{ background:var(--hold-soft); color:var(--hold); }

body #fl-sub-rinnovi .rb-connector{ color:var(--glass-edge-hi); }
body #fl-sub-rinnovi .rb-connector::before{ border-top-color:var(--glass-edge); }
body #fl-sub-rinnovi .rb-mobile-tab{ background:var(--glass-1); border-color:var(--glass-edge); color:var(--ink-3); }
body #fl-sub-rinnovi .rb-mobile-tab.active{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); }
body #fl-sub-rinnovi .rb-mobile-tab-count{ background:var(--track); }

/* ======================================== 10.5 · CONTRATTI PERSI ======= */
body #fl-sub-rinnovi .rp-persi-toggle{
  background:var(--lost-soft);
  border-color:color-mix(in srgb, var(--lost) 32%, transparent);
  color:var(--ink);
}
body #fl-sub-rinnovi .rp-persi-toggle:hover{
  background:color-mix(in srgb, var(--lost) 18%, transparent);
  border-color:var(--lost);
}
body #fl-sub-rinnovi .rp-persi-toggle:focus-visible{ outline-color:var(--lost); }
body #fl-sub-rinnovi .rp-persi-caret{ color:var(--lost); }
body #fl-sub-rinnovi .rp-persi-count{
  background:color-mix(in srgb, var(--lost) 16%, transparent);
  border-color:color-mix(in srgb, var(--lost) 30%, transparent);
  color:var(--lost);
}
body #fl-sub-rinnovi .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);
}
body #fl-sub-rinnovi .rp-persi-search,
body #fl-sub-rinnovi .rp-persi-select{ background:var(--glass-2); border-color:var(--glass-edge); color:var(--ink); }
body #fl-sub-rinnovi .rp-persi-search:focus,
body #fl-sub-rinnovi .rp-persi-select:focus{ border-color:var(--accent-line); }
body #fl-sub-rinnovi .rp-persi-tbl thead th{ background:var(--track); border-bottom-color:var(--glass-edge); color:var(--ink-3); }
body #fl-sub-rinnovi .rp-persi-tbl tbody tr{ border-bottom-color:var(--track); }
body #fl-sub-rinnovi .rp-persi-tbl tbody tr:hover{ background:var(--glass-2); }
body #fl-sub-rinnovi .rp-persi-tbl tbody td{ color:var(--ink-2); }
body #fl-sub-rinnovi .rp-persi-tbl tbody td strong,
body #fl-sub-rinnovi .rp-persi-tbl tbody td.rp-persi-num{ color:var(--ink); }
body #fl-sub-rinnovi .rp-persi-tbl tbody td.rp-persi-muted,
body #fl-sub-rinnovi .rp-persi-empty{ color:var(--ink-3); }
body #fl-sub-rinnovi .rp-motivo-rinnovo_no{ background:var(--lost-soft); color:var(--lost); border-color:color-mix(in srgb, var(--lost) 30%, transparent); }
body #fl-sub-rinnovi .rp-motivo-respinta{ background:var(--wait-soft); color:var(--wait); border-color:color-mix(in srgb, var(--wait) 30%, transparent); }

/* ======================================= 10.6 · ELENCO DELLA FLOTTA ==== */
body .flotta-search,
body .flotta-filter-select{
  min-height:38px;
  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);
}
body .flotta-search::placeholder{ color:var(--ink-3); }
body .flotta-search:focus,
body .flotta-filter-select:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
body .flotta-filter-select option{ background:var(--surface-menu); color:var(--ink); }
body .flotta-refresh-btn,
body .flotta-page-btn{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  color:var(--ink-2);
  font-weight:600;
}
body .flotta-refresh-btn:hover,
body .flotta-page-btn:hover:not(:disabled){
  background:var(--glass-3);
  border-color:var(--glass-edge-hi);
  color:var(--ink);
}
body .flotta-results,
body .flotta-pagination,
body .flotta-empty{ color:var(--ink-3); }

body .flotta-card{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--glass-spec);
}
body .flotta-card:hover{
  border-color:var(--glass-edge-hi);
  box-shadow:var(--shadow-1), inset 0 1px 0 var(--glass-spec);
}
body .flotta-card.urgent    { border-left:3px solid var(--lost); }
body .flotta-card.confermato{ border-left:3px solid var(--won); }
body .flotta-card.trattativa{ border-left:3px solid var(--wait); }
body .flotta-card.perso     { border-left:3px solid var(--lost); }
body .flotta-card.ipotetica { border-left:3px solid var(--hold); }
body .flotta-card.alert-warning { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wait) 35%, transparent); }
body .flotta-card.alert-critical{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lost) 35%, transparent); }
body .flotta-card-nome{ color:var(--ink); }
body .flotta-card-meta,
body .flotta-scadenza-text{ color:var(--ink-3); }
body .flotta-card-provider{ color:var(--accent-text); }
body .flotta-card-auto{ color:var(--ink-2); }

/* Gettoni di stato, timer e urgenza: una ricetta, il colore dalla variabile. */
body .flotta-status-badge,
body .flotta-timer-badge,
body .flotta-urgenza-badge{
  --f:var(--off); --f-soft:var(--off-soft);
  background:var(--f-soft);
  color:var(--f);
  border:1px solid color-mix(in srgb, var(--f) 26%, transparent);
  border-radius:var(--r-pill);
}
body .flotta-status-badge.pending   { --f:var(--ink-2); --f-soft:var(--track); }
body .flotta-status-badge.urgent,
body .flotta-status-badge.perso     { --f:var(--lost); --f-soft:var(--lost-soft); }
body .flotta-status-badge.confermato{ --f:var(--won);  --f-soft:var(--won-soft); }
body .flotta-status-badge.trattativa{ --f:var(--wait); --f-soft:var(--wait-soft); }
body .flotta-status-badge.ipotetica { --f:var(--hold); --f-soft:var(--hold-soft); }
body .flotta-timer-badge.ok,
body .flotta-urgenza-badge.ok       { --f:var(--won);  --f-soft:var(--won-soft); }
body .flotta-timer-badge.warning,
body .flotta-urgenza-badge.warning  { --f:var(--wait); --f-soft:var(--wait-soft); }
body .flotta-timer-badge.critical,
body .flotta-urgenza-badge.critical { --f:var(--lost); --f-soft:var(--lost-soft); }

/* ================================= 10.7 · FINESTRA DEL CLIENTE ========= */
/* Solo superficie: aprirla e chiuderla e' .active (opacity/visibility di
   styles.css). Carta opaca, mai vetro. */
body .flotta-modal-overlay{
  background:color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body .flotta-modal{
  background:var(--surface-menu);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
}
body .flotta-modal-header{ border-bottom-color:var(--glass-edge); }
body .flotta-modal-header h3{ color:var(--ink); font-weight:700; }
body .flotta-modal-close{ color:var(--ink-3); }
body .flotta-modal-close:hover{ color:var(--ink); }
body .flotta-modal-footer{ border-top-color:var(--glass-edge); }
body .flotta-modal-save{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  font-weight:700;
  box-shadow:0 6px 18px -8px var(--accent-glow);
}
body .flotta-modal-save:hover{ filter:brightness(1.04); }

body .fm-nome{ color:var(--ink); }
body .fm-contatti{ color:var(--ink-3); }
body .fm-contatti a{ color:var(--accent-text); }
body .fm-section{
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
}
body .fm-section.fm-highlight{ border-color:var(--accent-line); }
body .fm-section h4{ color:var(--ink); }
body .fm-label,
body .fm-form-group label{ color:var(--ink-3); }
body .fm-value{ color:var(--ink); }
body .fm-value.accent{ color:var(--accent-text); }
body .fm-value.danger{ color:var(--lost); }
body .fm-value.ipotetica{ color:var(--hold); }

body .fm-form-group input,
body .fm-form-group select,
body .fm-com-row select,
body .fm-com-row input,
body .fm-scad-edit input,
body .fm-note-area{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-sm);
  color:var(--ink);
}
body .fm-form-group input:focus,
body .fm-form-group select:focus,
body .fm-com-row select:focus,
body .fm-com-row input:focus,
body .fm-note-area:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
body .fm-form-group input::placeholder,
body .fm-com-row input::placeholder,
body .fm-note-area::placeholder{ color:var(--ink-3); }

body .fm-com-remove{ border-color:var(--glass-edge); color:var(--ink-3); }
body .fm-com-remove:hover{ border-color:var(--lost); color:var(--lost); }
body .fm-btn-add-com{
  background:var(--glass-2);
  border:1px dashed var(--glass-edge-hi);
  border-radius:var(--r-pill);
  color:var(--ink-2);
}
body .fm-btn-add-com:hover{ border-color:var(--accent-line); color:var(--ink); }

/* Stili che flotta-rinnovi.js scriveva in linea (via il 14/09). */
body .fm-edit-mini{
  margin-left:6px;
  padding:0 2px;
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:.6;
  transition:opacity var(--speed) var(--ease);
}
body .fm-edit-mini:hover{ opacity:1; }
body .fm-save-mini,
body .fm-cancel-mini{
  padding:.2rem .6rem;
  border-radius:var(--r-pill);
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
}
body .fm-save-mini{ background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); }
body .fm-cancel-mini{ background:var(--glass-2); border:1px solid var(--glass-edge); color:var(--ink-2); }
.fm-nota-piccola{
  display:block;
  margin-top:.3rem;
  color:var(--ink-3);
}
.fm-label-note{
  display:block;
  margin-bottom:.35rem;
  color:var(--ink-3);
  font-size:.8rem;
}
body .fm-note-area{
  width:100%;
  padding:.6rem;
  resize:vertical;
}
.fm-com-vuoto{
  padding:.5rem;
  color:var(--ink-3);
  text-align:center;
}

/* ============================================ 10.8 · AVVISI ============ */
/* Posizione, comparsa e scomparsa restano ai fogli vecchi (.show, --show). */
body .flotta-toast,
body .board-toast{
  background:var(--surface-menu);
  color:var(--ink);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-3);
}
body .flotta-toast.success,
body .board-toast--success{ box-shadow:inset 3px 0 0 var(--won),  var(--shadow-3); }
body .flotta-toast.error,
body .board-toast--error  { box-shadow:inset 3px 0 0 var(--lost), var(--shadow-3); }
body .flotta-toast.warning{ box-shadow:inset 3px 0 0 var(--wait), var(--shadow-3); }
body .board-toast--info   { box-shadow:inset 3px 0 0 var(--live), var(--shadow-3); }