/* ============================================================
   Landing "Volt · cold glass" — TL
   Estratto da landing-v2/proposta-b-tl.html, prefissato lv- e
   scopato a #fl-landing.lv-landing per non collidere con lo
   stile esistente del playground (styles.css).

   Palette: Yoyomove brand (amber/blu/verde/rosso/viola) — vedi
   token qui sotto. Non magenta/cyan/chartreuse/purple.
   ============================================================ */

/* ---- Sofia Pro @font-face (locale, cartella fonts/sofia-pro a livello playground) ---- */
@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;
}

/* ---- Tokens locali (scoped, non :root) ---- */
#fl-landing.lv-landing{
  --lv-bg:#0a0b0d;
  --lv-ink:#e8ecf5;
  --lv-muted:#8b8f98;
  --lv-amber:#f59e0b;
  --lv-amber-warm:#fbbf24;
  --lv-blue:#3b82f6;
  --lv-blue-tenue:#60a5fa;
  --lv-green:#22c55e;
  --lv-red:#ef4444;
  --lv-violet:#a78bfa;
  --lv-gray:#6b7280;
  --lv-glass-bg:rgba(18,20,26,0.55);
  --lv-glass-border:rgba(255,255,255,0.10);

  position:relative;
  color:var(--lv-ink);
  font-family:'Manrope',sans-serif;
  font-weight:500;
  overflow-x:hidden;

  /* Layout: hero(28%) | rinnovi+flotta/monitoraggio(72%) — sovrascrive
     con priorità (ID+classe) l'eventuale .bento/.bento-grid legacy di
     styles.css che imponeva un grid 1fr 1fr non voluto su questo stesso
     elemento (stesse classi condivise nel markup). */
  display:grid;
  grid-template-columns:28fr 42fr 30fr;
  grid-template-rows:auto;
  gap:24px;
  align-items:stretch;
  max-width:1240px;
  margin:0 auto;
  padding:64px 40px 120px;
}

#fl-landing.lv-landing a{color:inherit;text-decoration:none;}
#fl-landing.lv-landing em{font-style:italic;}

/* ============ AURORA BACKGROUND ============ */
#fl-landing.lv-landing .lv-aurora{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
#fl-landing.lv-landing .lv-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(140px) saturate(140%);
  mix-blend-mode:screen;
  will-change:transform;
}
/* Blob 1 — grande, top-left: amber */
#fl-landing.lv-landing .lv-blob-purple{
  top:-14%;left:-12%;
  width:52vw;height:52vw;
  background:var(--lv-amber);
  opacity:0.35;
}
/* Blob 2 — centrale: blu */
#fl-landing.lv-landing .lv-blob-cyan{
  top:16%;left:32%;
  width:48vw;height:48vw;
  background:var(--lv-blue);
  opacity:0.28;
}
/* Blob 3 — bottom-right: viola tenue */
#fl-landing.lv-landing .lv-blob-magenta{
  bottom:-18%;right:-12%;
  width:58vw;height:58vw;
  background:var(--lv-violet);
  opacity:0.30;
}
/* Blob 4 — bottom-left, sottile: verde */
#fl-landing.lv-landing .lv-blob-iceblue{
  bottom:-14%;left:-8%;
  width:46vw;height:46vw;
  background:var(--lv-green);
  opacity:0.20;
}
/* Blob 5 — top-right piccolo: amber warm */
#fl-landing.lv-landing .lv-blob-chartreuse{
  top:-6%;right:6%;
  width:22vw;height:22vw;
  background:var(--lv-amber-warm);
  opacity:0.22;
}
/* Blob 6 — mid piccolo: blu tenue */
#fl-landing.lv-landing .lv-blob-purple2{
  top:48%;left:-16%;
  width:30vw;height:30vw;
  background:var(--lv-blue-tenue);
  opacity:0.18;
}

/* ============ GRAIN ============ */
#fl-landing.lv-landing .lv-grain{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.07;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ HERO ============ */
#fl-landing.lv-landing .lv-hero{
  position:relative;z-index:2;
  grid-column:1;
  grid-row:1;
  display:flex;flex-direction:column;justify-content:center;
  background:transparent;
  padding:0;
}
#fl-landing.lv-landing .lv-hero-title{
  font-family:'Sofia Pro',sans-serif;
  font-style:normal;font-weight:700;
  font-size:clamp(36px, 3.6vw, 88px);
  line-height:1.0;
  letter-spacing:-1px;
  max-width:100%;
}
#fl-landing.lv-landing .lv-accent{color:var(--lv-amber);}
#fl-landing.lv-landing .lv-hero-sub{
  display:flex;align-items:center;gap:14px;
  margin-top:26px;
}
#fl-landing.lv-landing .lv-hero-sub p{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:500;letter-spacing:1px;
  color:var(--lv-muted);
}
#fl-landing.lv-landing .lv-rule{
  width:44px;height:1px;
  background:linear-gradient(90deg, var(--lv-amber), transparent);
}

/* ============ COMPOSITION ============ */
#fl-landing.lv-landing .lv-composition{
  position:relative;z-index:2;
  grid-column:2 / 4;
  grid-row:1;
  display:grid;
  grid-template-columns:42fr 30fr;
  gap:24px;
  align-items:stretch;
}
#fl-landing.lv-landing .lv-col-left{display:flex;}
#fl-landing.lv-landing .lv-col-right{display:flex;flex-direction:column;gap:24px;}
/* Flotta ~55% altezza, Monitoraggio ~45% altezza della colonna destra */
#fl-landing.lv-landing .lv-col-right .lv-panel-flotta{flex:55 1 0%;}
#fl-landing.lv-landing .lv-col-right .lv-panel-monitoraggio{flex:45 1 0%;}

/* ============ GLASS PANEL ============ */
#fl-landing.lv-landing .lv-panel{
  position:relative;
  width:100%;
  background:var(--lv-glass-bg);
  backdrop-filter:blur(40px) saturate(160%) brightness(110%);
  -webkit-backdrop-filter:blur(40px) saturate(160%) brightness(110%);
  border:1px solid var(--lv-glass-border);
  border-radius:20px;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08);
  padding:40px 44px;
  display:flex;flex-direction:column;
  overflow:hidden;
  outline-offset:6px;
  cursor:pointer;
}
#fl-landing.lv-landing .lv-panel::before{
  content:'';
  position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}
#fl-landing.lv-landing .lv-panel-index{
  position:absolute;top:26px;right:30px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:2px;
  color:var(--lv-muted);
  opacity:0.7;
}

#fl-landing.lv-landing .lv-panel-rinnovi{
  --lv-accent:var(--lv-amber);
  outline:1px solid rgba(245,158,11,0.25);
}
#fl-landing.lv-landing .lv-panel-flotta{
  --lv-accent:var(--lv-blue);
  outline:1px solid rgba(59,130,246,0.25);
}
#fl-landing.lv-landing .lv-panel-monitoraggio{
  --lv-accent:var(--lv-green);
  outline:1px solid rgba(34,197,94,0.20);
}
/* Colonna destra più stretta (30%): padding e chip più contenuti */
#fl-landing.lv-landing .lv-panel-flotta,
#fl-landing.lv-landing .lv-panel-monitoraggio{
  padding:28px 30px;
}
#fl-landing.lv-landing .lv-panel-flotta .lv-chip,
#fl-landing.lv-landing .lv-panel-monitoraggio .lv-chip{
  padding:11px 14px;
}

#fl-landing.lv-landing .lv-tag{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--lv-accent);
  background:color-mix(in srgb, var(--lv-accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--lv-accent) 45%, transparent);
  border-radius:999px;
  padding:6px 13px;
}

#fl-landing.lv-landing .lv-cta{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lv-ink);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:14px 24px;
  transition:background .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
#fl-landing.lv-landing .lv-cta .lv-arrow{transition:transform .25s ease;font-size:14px;}
#fl-landing.lv-landing .lv-cta:hover{
  background:var(--lv-accent);
  border-color:var(--lv-accent);
  color:var(--lv-bg);
  transform:translateY(-2px);
  box-shadow:0 14px 32px -10px color-mix(in srgb, var(--lv-accent) 65%, transparent);
}
#fl-landing.lv-landing .lv-cta:hover .lv-arrow{transform:translateX(4px);}

/* ---- RINNOVI (hero panel) ---- */
#fl-landing.lv-landing .lv-pendenti-label{
  font-family:'Sofia Pro',sans-serif;
  font-size:13px;font-weight:900;
  letter-spacing:1.4px;text-transform:uppercase;
  color:#f7dcae;
  margin-top:22px;
}
#fl-landing.lv-landing .lv-panel-rinnovi .lv-kpi-giant{
  font-family:'Sofia Pro',sans-serif;
  font-style:normal;font-weight:300;
  font-size:clamp(120px, 13vw, 200px);
  line-height:0.85;
  color:var(--lv-amber);
  margin:24px 0 2px;
}
#fl-landing.lv-landing .lv-kpi-giant-rule{
  width:72px;height:2px;
  background:var(--lv-amber);
  opacity:0.6;
  margin:10px 0 22px;
}
#fl-landing.lv-landing .lv-micro-copy{
  font-family:'Sofia Pro',serif;
  font-style:italic;font-weight:400;
  font-size:12px;line-height:1.5;
  color:var(--lv-muted);
  max-width:32ch;
  margin-bottom:36px;
}

/* ---- MINI GLASS CHIPS (shared) ---- */
#fl-landing.lv-landing .lv-chip-row{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-bottom:40px;
}
#fl-landing.lv-landing .lv-chip{
  display:flex;flex-direction:column;gap:6px;
  background:rgba(20,25,55,0.35);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  padding:14px 18px;
}
#fl-landing.lv-landing .lv-chip-label{
  font-family:'Sofia Pro',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  color:#a5b0c8;
  display:flex;align-items:center;
  order:2;
}
#fl-landing.lv-landing .lv-chip-value{
  font-family:'Sofia Pro',sans-serif;
  font-style:normal;font-weight:700;
  font-size:40px;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--lv-ink);
  display:flex;align-items:center;
  order:1;
}
/* Confermati (1° chip) → verde, Trattativa (3° chip) → viola tenue */
#fl-landing.lv-landing .lv-panel-rinnovi .lv-chip-row .lv-chip:nth-child(1) .lv-chip-value{color:var(--lv-green);}
#fl-landing.lv-landing .lv-panel-rinnovi .lv-chip-row .lv-chip:nth-child(3) .lv-chip-value{color:var(--lv-violet);}
/* Scaduti / stato warning generico → rosso */
#fl-landing.lv-landing .lv-chip-value.lv-warn{color:var(--lv-red);}

#fl-landing.lv-landing .lv-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--lv-red);
  margin-left:9px;
  animation:lv-pulse 2s infinite;
}
@keyframes lv-pulse{
  0%{box-shadow:0 0 0 0 rgba(245,158,11,0.55);}
  70%{box-shadow:0 0 0 11px rgba(245,158,11,0);}
  100%{box-shadow:0 0 0 0 rgba(245,158,11,0);}
}

/* ---- FLOTTA / MONITORAGGIO shared heading ---- */
#fl-landing.lv-landing .lv-panel-heading{
  font-family:'Sofia Pro',sans-serif;
  font-style:normal;font-weight:500;
  font-size:22px;
  color:var(--lv-ink);
  margin:14px 0 4px;
}

/* ---- FLOTTA chip row (Contratti/Provider/Regioni) → blu ---- */
#fl-landing.lv-landing .lv-flotta-chips{
  margin:18px 0 30px;
}
#fl-landing.lv-landing .lv-flotta-chips .lv-chip-value{font-size:26px;color:var(--lv-blue);}

/* ---- MONITORAGGIO grid (Assegnati/Contattati → verde, warning → amber) ---- */
#fl-landing.lv-landing .lv-mon-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0 30px;
}
#fl-landing.lv-landing .lv-mon-grid .lv-chip-value{color:var(--lv-green);font-size:26px;}
#fl-landing.lv-landing .lv-mon-grid .lv-chip.lv-warn .lv-chip-value{color:var(--lv-amber-warm);}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  #fl-landing.lv-landing{grid-template-columns:1fr;padding:56px 20px 80px;}
  #fl-landing.lv-landing .lv-hero{grid-column:1;grid-row:auto;padding:0 0 32px;}
  #fl-landing.lv-landing .lv-composition{grid-column:1;grid-row:auto;grid-template-columns:1fr;gap:20px;}
  #fl-landing.lv-landing .lv-col-right .lv-panel-flotta,
  #fl-landing.lv-landing .lv-col-right .lv-panel-monitoraggio{flex:1 1 auto;}
  #fl-landing.lv-landing .lv-panel{padding:32px 28px;}
  #fl-landing.lv-landing .lv-panel-flotta,
  #fl-landing.lv-landing .lv-panel-monitoraggio{padding:28px 24px;}
  #fl-landing.lv-landing .lv-hero-title{font-size:clamp(38px, 11vw, 64px);}
  #fl-landing.lv-landing .lv-panel-rinnovi .lv-kpi-giant{font-size:clamp(110px, 30vw, 180px);}
  #fl-landing.lv-landing .lv-chip-row{gap:8px;}
  #fl-landing.lv-landing .lv-mon-grid{gap:8px;}
  #fl-landing.lv-landing .lv-chip{padding:12px 14px;}
  #fl-landing.lv-landing .lv-chip-value{font-size:32px;}
  #fl-landing.lv-landing .lv-mon-grid .lv-chip-value{font-size:28px;}
  #fl-landing.lv-landing .lv-flotta-chips .lv-chip-value{font-size:28px;}
}

/* ============================================================
   FIX LAYOUT — fit 100vh senza scroll interno (2026-09-04)
   Override mirato: hero compatto in alto + composition 2x2
   (Rinnovi dominante a sx, Flotta/Monitoraggio impilati a dx).
   Specificità pari a monte via #fl-landing.lv-landing + !important
   dove serve sovrascrivere il grid di base definito sopra.
   ============================================================ */

/* ---- Container principale ----
   Nota (2026-09-05): min/max-height basati su 100dvh erano tarati sul
   playground standalone (viewport intera libera). In prod TL il landing
   sta dentro .main-content (margin-left:230px, padding, shell header 52px
   + content-header ~48px) — calc su 100dvh produceva altezze
   incoerenti col parent, collassando le grid-template-rows 1fr 1fr di
   .lv-composition a zero. Fix: uso min-height fissa content-based e
   max-height:none, lascio scorrere naturalmente. */
#fl-landing.lv-landing{
  display:flex !important;
  flex-direction:column !important;
  gap:20px !important;
  min-height:640px;
  height:auto;
  max-height:none;
  overflow:visible !important;
  padding:20px 0 !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
}

/* ---- Hero compatto in alto ---- */
#fl-landing.lv-landing .lv-hero{
  flex:0 0 auto;
  background:transparent !important;
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:24px;
  min-height:60px;
  max-height:70px;
}
#fl-landing.lv-landing .lv-hero-title{
  font-family:'Sofia Pro',sans-serif;
  font-weight:700;
  font-size:clamp(22px, 2.6vw, 32px);
  letter-spacing:-0.02em;
  line-height:1;
  margin:0;
  color:#f0f2f7;
  white-space:nowrap;
}
#fl-landing.lv-landing .lv-hero-sub{
  display:flex; align-items:center; gap:12px;
}
#fl-landing.lv-landing .lv-hero-sub p{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:2px;
  color:#8b8f98; text-transform:uppercase; margin:0;
}
#fl-landing.lv-landing .lv-rule{
  width:32px; height:1px; background:#f59e0b; display:inline-block;
}

/* ---- Composition grid (2 col x 2 row) ----
   Nota (2026-09-05): grid-template-rows 1fr 1fr richiede che il grid
   parent abbia altezza calcolabile — con min-height 640px sul #fl-landing
   ora c'è. Rimosso overflow:hidden (tagliava contenuto se leggermente
   più alto); rimosso min-height:0 (necessario solo nei flex nested,
   qui il grid gestisce da solo). Row-height minima aggiunta per
   robustezza se il grid non ha spazio disponibile calcolabile. */
#fl-landing.lv-landing .lv-composition{
  flex:1 1 auto;
  display:grid !important;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows:minmax(280px, 1fr) minmax(280px, 1fr);
  gap:14px;
  overflow:visible;
  width:100%;
}
#fl-landing.lv-landing .lv-col-left{
  grid-row:1 / span 2; grid-column:1;
  display:flex; min-height:0;
}
#fl-landing.lv-landing .lv-col-right{
  grid-column:2; grid-row:1 / span 2;
  display:grid; grid-template-rows:1fr 1fr; gap:20px; min-height:0;
}

/* ---- Pannelli ---- */
#fl-landing.lv-landing .lv-panel{
  height:100%; min-height:0;
  display:flex; flex-direction:column;
  padding:clamp(16px, 2vw, 24px);
  box-sizing:border-box; overflow:hidden;
}
#fl-landing.lv-landing .lv-panel-rinnovi{ justify-content:space-between; }

/* ---- KPI + chip proporzionati ---- */
#fl-landing.lv-landing .lv-kpi-giant{
  font-family:'Sofia Pro',sans-serif;
  font-weight:300;
  font-size:clamp(80px, 13vh, 160px);
  line-height:0.85;
  margin:auto 0;
  color:#f59e0b;
}
#fl-landing.lv-landing .lv-chip-value{ font-size:clamp(22px, 2.4vh, 32px); }
#fl-landing.lv-landing .lv-chip-label{ font-size:10.5px; letter-spacing:1.2px; }
#fl-landing.lv-landing .lv-chip{ padding:8px 10px; }

/* ---- Responsive (override del breakpoint 900px sopra) ---- */
@media (max-width:900px){
  #fl-landing.lv-landing{
    height:auto !important; overflow:visible !important;
  }
  #fl-landing.lv-landing .lv-composition{
    grid-template-columns:1fr; grid-template-rows:auto auto auto;
  }
  #fl-landing.lv-landing .lv-col-right{
    grid-template-rows:auto auto;
  }
}

/* ============================================================
   BUGFIX — pannello interamente cliccabile (2026-09-04)
   ============================================================ */
#fl-landing.lv-landing .lv-panel{
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#fl-landing.lv-landing .lv-panel:hover{
  transform:translateY(-2px);
  border-color:rgba(255, 255, 255, 0.20);
}

/* Sonda diagnostica rimossa 2026-09-05 dopo aver identificato la
   vera causa: <main class="lv-composition"> matchato da
   `document.querySelectorAll('main section')` in displaySection()
   di app.js:268 → nascondeva anche i .lv-panel-*. Fix nel markup
   HTML (main→div), non nel CSS. */