/* ============================================================
   AIMAZING · LIQUID GLASS — overlay stile "Sobrio" (Apple)
   FASE 1: GUSCIO (sidebar/topbar flottanti + bottom-nav/sheet mobile + bottoni + token)
   Linkato per ULTIMO su ogni pagina → vince per ordine/specificità.
   Vetro solo sul chrome; card/tabelle restano nella Fase 2.
   Tutto guidato da --bs-primary => white-label safe.
   Filtro SVG #lg-soft iniettato da liquid-glass.js.
   ============================================================ */

:root,
:root[data-bs-theme="light"]{
  --lg-page:#edecf3;
  --lg-glass:rgba(255,255,255,.62);
  --lg-glass-brd:rgba(255,255,255,.72);
  --lg-panel:rgba(255,255,255,.9);
  --lg-panel-brd:rgba(40,25,90,.07);
  --lg-panel-shadow:0 10px 30px rgba(40,25,90,.10), 0 2px 6px rgba(40,25,90,.05), inset 0 1px 0 rgba(255,255,255,.6);
  /* mobile floating nav/sheet (liquid glass) */
  --lg-navglass:rgba(255,255,255,.34);
  --lg-navbrd:rgba(255,255,255,.6);
  --lg-navink:rgba(22,18,31,.6);
  --lg-navpill:rgba(255,255,255,.66);
  --lg-chrome-shadow:0 12px 34px rgba(20,18,40,.12);
  --lg-ease-spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-bs-theme="dark"]{
  --lg-page:#0e0d12;
  --lg-glass:rgba(26,23,34,.6);
  --lg-glass-brd:rgba(255,255,255,.1);
  --lg-panel:rgba(28,25,38,.9);
  --lg-panel-brd:rgba(255,255,255,.08);
  --lg-panel-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  --lg-navglass:rgba(30,28,40,.38);
  --lg-navbrd:rgba(255,255,255,.13);
  --lg-navink:rgba(236,232,245,.58);
  --lg-navpill:rgba(255,255,255,.16);
  --lg-chrome-shadow:0 14px 40px rgba(0,0,0,.5);
  --lg-ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Canvas + whisper di colore (niente aurora: sobrio) ---------- */
body#page-top{
  background-color:var(--lg-page);
  background-image:
    radial-gradient(60vw 42vh at 6% -4%, rgba(var(--bs-primary-rgb),.06), transparent 60%),
    radial-gradient(52vw 40vh at 100% -2%, rgba(var(--bs-primary-rgb),.05), transparent 55%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
#wrapper{background:transparent;}
#content-wrapper{background:transparent !important;}

/* ============================================================
   DESKTOP — sidebar + topbar FLOTTANTI in vetro
   (solo ≥768px; sotto, la sidebar è nascosta e c'è la shell mobile)
   ============================================================ */
@media (min-width:768px){
  nav.sidebar{
    margin:18px 0 18px 18px;
    width:264px !important;overflow-y:auto;overflow-x:hidden;
    height:calc(100vh - 36px);
    min-height:calc(100vh - 36px);
    position:sticky;
    top:18px;
    align-self:flex-start;
    border-radius:24px;
    background:var(--lg-panel) !important;
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--lg-panel-brd);
    box-shadow:var(--lg-panel-shadow);
  }
  nav.sidebar > .container-fluid{
    height:100%;
    /* Bootstrap applica space-between ai container interni delle navbar:
       nella sidebar spingerebbe la lista in fondo quando le voci Voice mancano. */
    justify-content:flex-start !important;
    align-items:stretch !important;
  }

  .topbar{
    margin:18px 18px 22px 18px;
    border-radius:20px;
    background:var(--lg-panel) !important;
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--lg-panel-brd);
    box-shadow:var(--lg-panel-shadow);
    padding:14px 18px 14px 22px;
    min-height:78px;
  }
}

/* ---------- Sidebar nav items (glass pill + spring) ---------- */
.sidebar .nav-item .nav-link{
  border-radius:14px;
  margin:2px 12px;
  padding:11px 14px;
  font-weight:600;
  transition:background .25s ease, transform .25s var(--lg-ease-spring), color .2s;
}
.sidebar .nav-item .nav-link i{transition:transform .3s var(--lg-ease-spring);}
.sidebar .nav-item .nav-link:hover{
  background:rgba(var(--bs-primary-rgb),.08);
  transform:translateX(3px);
}
.sidebar .nav-item .nav-link:hover i{transform:scale(1.14);}
.sidebar .nav-item .nav-link.active{
  background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.20), rgba(var(--bs-primary-rgb),.05)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(var(--bs-primary-rgb),.16);
  width:auto !important;
  margin:2px 12px !important;
  border-radius:14px !important;
  padding:11px 14px !important;
}
.sidebar .sidebar-heading{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.7;
}
.sidebar .sidebar-divider{display:none !important;}
.sidebar #accordionSidebar{margin-top:4px !important;}
/* voci a piena larghezza: la pill deve allargarsi fino ai bordi (come mockup) */
.sidebar .container-fluid,
.sidebar .navbar-nav,
.sidebar .nav-item{width:100% !important;}
.sidebar .nav-item .nav-link{display:flex !important;align-items:center;gap:8px;width:auto !important;}

/* sidebar toggle → pastiglia di vetro */
#sidebarToggle{
  width:34px;height:34px;
  border:1px solid var(--lg-glass-brd) !important;
  background:rgba(var(--bs-primary-rgb),.10) !important;
  transition:transform .25s var(--lg-ease-spring), background .2s;
}
#sidebarToggle:hover{transform:scale(1.08);background:rgba(var(--bs-primary-rgb),.18) !important;}

/* ---------- Bottoni (spring + rounded) ---------- */
.btn{border-radius:12px;}
.btn-primary{
  border:none;
  box-shadow:0 6px 16px rgba(var(--bs-primary-rgb),.28);
  transition:transform .2s var(--lg-ease-spring), box-shadow .2s ease, filter .2s;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(var(--bs-primary-rgb),.42);
  filter:brightness(1.04);
}
.btn-outline-primary{
  border-radius:12px;
  transition:transform .2s var(--lg-ease-spring), box-shadow .2s ease;
}
.btn-outline-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--bs-primary-rgb),.22);}

/* dropdown menu (topbar) = pannellino di vetro */
.topbar .dropdown-menu{
  border:1px solid var(--lg-glass-brd);
  border-radius:16px;
  background:var(--lg-glass);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--lg-chrome-shadow);
  padding:8px;
}
.topbar .dropdown-menu .dropdown-item{border-radius:10px;padding:8px 12px;font-weight:600;transition:background .15s;}
.topbar .dropdown-menu .dropdown-item:hover{background:rgba(var(--bs-primary-rgb),.10);}

/* ============================================================
   MOBILE (<768px) — bottom nav + navigation sheet in LIQUID GLASS flottante
   Override delle regole di shellMobile.css (caricato prima).
   ============================================================ */
@media (max-width:767.98px){
  /* spazio per la nav flottante */
  #content-wrapper,
  body#page-top{
    padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Bottom nav flottante ---- */
  #mobile-bottom-nav{
    left:12px !important; right:12px !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    height:66px !important;
    padding-bottom:0 !important;
    border-radius:28px !important;
    border-top:none !important;
    isolation:isolate;
    background:var(--lg-navglass) !important;
    box-shadow:0 14px 34px rgba(20,10,40,.24), 0 3px 8px rgba(20,10,40,.14) !important;
  }
  #mobile-bottom-nav::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
    -webkit-backdrop-filter:blur(18px) saturate(190%);
    backdrop-filter:blur(18px) saturate(190%);
    filter:url(#lg-soft);
  }
  #mobile-bottom-nav::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    border:1px solid var(--lg-navbrd);
    box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.55), inset -1px -1px 1px rgba(255,255,255,.18);
  }
  #mobile-bottom-nav a,
  #mobile-bottom-nav button{
    position:relative;
    z-index:1;
    color:var(--lg-navink) !important;
    gap:4px;
  }
  #mobile-bottom-nav a i,
  #mobile-bottom-nav button i{font-size:20px !important;transition:transform .3s var(--lg-ease-spring);}
  #mobile-bottom-nav a:active,
  #mobile-bottom-nav button:active{transform:scale(.9);}
  #mobile-bottom-nav a.active,
  #mobile-bottom-nav .active{color:var(--bs-primary) !important;opacity:1 !important;}
  #mobile-bottom-nav .active i{transform:translateY(-1px);}
  /* capsula di vetro sull'attivo */
  #mobile-bottom-nav .active::before{
    content:""; position:absolute; inset:7px 6px; border-radius:19px; z-index:-1;
    background:var(--lg-navpill);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px rgba(20,10,40,.14);
    animation:lgPillPop .4s var(--lg-ease-spring);
  }

  /* ---- Navigation sheet flottante in vetro ---- */
  #mobile-nav-sheet .mns-content{
    left:12px !important; right:12px !important; bottom:12px !important;
    border-radius:30px !important;
    padding:16px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    isolation:isolate;
    background:var(--lg-navglass) !important;
    box-shadow:0 20px 50px rgba(20,10,40,.28), 0 4px 12px rgba(20,10,40,.16) !important;
  }
  /* chiusura: nascondi del tutto lo sheet flottante (compensa il bottom:12px) */
  #mobile-nav-sheet:not(.open) .mns-content{
    transform:translateY(calc(100% + 12px + env(safe-area-inset-bottom, 0px))) !important;
  }
  #mobile-nav-sheet .mns-content::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
    -webkit-backdrop-filter:blur(24px) saturate(190%);
    backdrop-filter:blur(24px) saturate(190%);
    filter:url(#lg-soft);
  }
  #mobile-nav-sheet .mns-content::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    border:1px solid var(--lg-navbrd);
    box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(255,255,255,.15);
  }
  #mobile-nav-sheet .mns-header h6{font-weight:800;}
  /* tessere del menu = tile di vetro */
  #mobile-nav-sheet .mns-grid a,
  #mobile-nav-sheet .mns-grid button{
    border-radius:17px !important;
    background:var(--lg-navpill) !important;
    border:1px solid var(--lg-navbrd) !important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important;
    transition:transform .2s var(--lg-ease-spring);
  }
  #mobile-nav-sheet .mns-grid a:active,
  #mobile-nav-sheet .mns-grid button:active{transform:scale(.95);}
  #mobile-nav-sheet .mns-grid i{color:var(--bs-primary) !important;}
}

@keyframes lgPillPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

/* ============================================================
   FASE 2 — SUPERFICI CONTENUTO (card, tabelle, modali, dropdown, form)
   + chat + login. Sobrio: contenuti pieni/solidi, vetro solo dove è
   "chrome" (modali, dropdown, backdrop). Tutto da --bs-primary.
   ============================================================ */

/* rimuove il divider fisso sotto la topbar (ridondante con topbar flottante) */
@media (min-width:768px){
  #content > div.d-none.d-sm-block[style*="border-bottom:"]{display:none !important;}
}

/* --- Card contenuto (piene, premium) --- */
.card{
  border-radius:20px !important;
  border:none !important;
  box-shadow:0 1px 3px rgba(20,10,40,.04), 0 12px 32px rgba(30,18,70,.06);
  transition:transform .3s var(--lg-ease-spring), box-shadow .3s ease;
}
[data-bs-theme="dark"] .card{box-shadow:0 1px 3px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.45);}
.card:hover{box-shadow:0 4px 10px rgba(20,10,40,.06), 0 18px 44px rgba(30,18,70,.10) !important;}
[data-bs-theme="dark"] .card:hover{box-shadow:0 18px 44px rgba(0,0,0,.55) !important;}
.card-header{background:transparent !important;border-bottom:none !important;}
.kpi-card .kpi-icon{border-radius:16px;}
.kpi-card::before{border-radius:20px 20px 0 0;}

/* --- Tabelle (rifinitura, in aggiunta a dashboard.css) --- */
.table thead th{border-bottom-color:rgba(var(--bs-primary-rgb),.16) !important;}

/* --- Dropdown (tutti): pannello di vetro --- */
.dropdown-menu{
  border:1px solid var(--lg-glass-brd) !important;
  border-radius:16px !important;
  background:var(--lg-glass) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--lg-chrome-shadow) !important;
  padding:8px !important;
}
.dropdown-menu .dropdown-item{border-radius:10px;padding:8px 12px;font-weight:600;transition:background .15s;}
.dropdown-menu .dropdown-item:hover{background:rgba(var(--bs-primary-rgb),.10);}

/* --- Modali premium + backdrop sfocato (Apple) --- */
.modal-content{
  border-radius:22px !important;
  border:1px solid var(--lg-glass-brd);
  box-shadow:0 30px 80px rgba(20,10,40,.28);
}
[data-bs-theme="dark"] .modal-content{box-shadow:0 30px 80px rgba(0,0,0,.6);}
.modal-dialog-scrollable .modal-content{overflow:hidden;}
.modal-backdrop.show{
  background:rgba(10,5,25,.42);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  backdrop-filter:blur(6px) saturate(140%);
  opacity:1;
}

/* --- Form / input (il focus resta gestito da InputGroup.css) --- */
.form-control,.form-select{border-radius:12px;}
.form-select:focus{border-color:var(--bs-primary) !important;box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.2) !important;}

/* --- Chat: rifinitura (resta solida, sobrio) --- */
.chat-list-panel,.chat-messages-panel{border-radius:20px !important;}
.chat-list-item{border-radius:14px;}
.input-search-chat{border-radius:14px !important;}

/* ============================================================
   LOGIN / AUTH — card premium "frosted" sullo sfondo brand
   (pagine senza guscio: body#loginBody / body.bg-gradient-primary)
   ============================================================ */
body.bg-gradient-primary{
  background:linear-gradient(135deg, rgb(var(--bs-primary-rgb)), rgba(var(--bs-primary-rgb),.45)) fixed, #100c1a;
  min-height:100vh;
}
body#loginBody .card,
body.bg-gradient-primary .card{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.28) !important;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
}
body#loginBody .card:hover,
body.bg-gradient-primary .card:hover{transform:none !important;}
[data-bs-theme="dark"] body#loginBody .card,
[data-bs-theme="dark"] body.bg-gradient-primary .card{
  background:rgba(26,23,34,.86);
  border-color:rgba(255,255,255,.12) !important;
}
body#loginBody .bg-login-image,
body.bg-gradient-primary .bg-login-image{
  background:linear-gradient(160deg, rgba(var(--bs-primary-rgb),.14), rgba(var(--bs-primary-rgb),.04));
}

/* ============================================================
   FASE 3 — ALLINEAMENTO AL MOCKUP
   sidebar espansa premium (brand + label a sinistra, pill) + KPI puliti
   ============================================================ */
@media (min-width:768px){
  /* link a piena larghezza, allineati a sinistra (icona + label) */
  .sidebar .nav-item .nav-link{width:auto !important;text-align:left !important;}

  /* brand come nel mockup: logo in tile arrotondato + nome scuro, a sinistra */
  .sidebar .sidebar-brand{justify-content:flex-start !important;padding:24px 16px 14px !important;gap:12px;height:auto !important;}
  .sidebar .sidebar-brand-icon{
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.16), rgba(var(--bs-primary-rgb),.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  }
  .sidebar .sidebar-brand-icon img{width:30px !important;height:auto;}
  .sidebar .sidebar-brand-text{margin:0 !important;}
  .sidebar .sidebar-brand-text .wl-brand-name{
    font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bs-body-color) !important;
  }
  /* nascondi il toggle collapse: il mockup ha la card "Crediti Voce" in fondo */
  .sidebar > .container-fluid > .text-center{display:none !important;}
}

/* KPI card come nel mockup: niente barra colorata in cima, numero scuro e grande */
.kpi-card::before{display:none !important;}
.kpi-card .kpi-value{color:var(--bs-body-color) !important;font-weight:800;}

/* ---------- Topbar: titolo pagina integrato + avatar (come mockup) ---------- */
/* topbar sopra il contenuto: il menu "Filtra" non deve finire dietro le card */
.topbar{position:relative;z-index:100;}
.topbar .dropdown-menu{z-index:1001;}
.topbar .container-fluid{display:flex;align-items:center;gap:16px;padding-left:0;padding-right:0;}
.topbar ul.navbar-nav{align-items:center;gap:10px;}
.lg-topbar-title{min-width:0;flex:0 1 auto;}
.lg-topbar-title h3{font-size:20px !important;font-weight:800 !important;letter-spacing:-.02em;margin:0 !important;line-height:1.15;white-space:nowrap;color:var(--bs-body-color) !important;}
.lg-topbar-title h3 [id$="RangeLabel"]{font-size:12px !important;font-weight:700;color:var(--bs-primary) !important;background:rgba(var(--bs-primary-rgb),.1);padding:2px 9px;border-radius:9px;margin-left:6px;vertical-align:middle;}
.lg-topbar-title .dashboard-subtitle,
.lg-topbar-title .chat-page-subtitle,
.lg-topbar-title > p{font-size:12px !important;margin:2px 0 0 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-topbar-actions{margin-right:4px;}
/* avatar profilo con iniziali */
.topbar #usernameNavbar{display:none !important;}
.topbar .dropdown-toggle{display:flex !important;align-items:center;}
.lg-avatar{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgb(var(--bs-primary-rgb)), rgba(var(--bs-primary-rgb),.6));
  color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* ============================================================
   FASE 4 — rifinitura fedele al mockup
   ============================================================ */
@media (min-width:768px){
  /* Brand: nome title-case + sottotitolo "AI Platform" come nel mockup */
  .sidebar .sidebar-brand-text{text-transform:none !important;}
  .sidebar .sidebar-brand-text .wl-brand-name{display:block;line-height:1.1;text-transform:none !important;}
  .sidebar .sidebar-brand-text::after{
    content:"AI Platform";display:block;
    font-size:11px;font-weight:500;color:var(--bs-secondary-color);
    letter-spacing:.01em;margin-top:1px;text-transform:none;
  }
  /* nav: più aria tra le sezioni */
  .sidebar .nav-item .nav-link{font-size:14.5px;}
  .sidebar .sidebar-heading{padding:16px 24px 8px !important;}
}

/* Pill attiva pulita (piena, niente ombra che sembra un underline) */
.sidebar .nav-item .nav-link.active{
  background:rgba(var(--bs-primary-rgb),.12) !important;
  box-shadow:none !important;
  color:var(--bs-primary) !important;
}
.sidebar .nav-item .nav-link.active i,
.sidebar .nav-item .nav-link.active span{color:var(--bs-primary) !important;}

/* Filtra = pill piena brand (come nel mockup) */
.lg-topbar-actions .btn{
  background:var(--bs-primary) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 6px 16px rgba(var(--bs-primary-rgb),.3) !important;
}
.lg-topbar-actions .btn:hover{filter:brightness(1.05);}

/* "Installa App" reso discreto (ghost) per non competere con Filtra */
#pwaInstallNavbar{
  background:transparent !important;color:var(--bs-primary) !important;
  border:1px solid rgba(var(--bs-primary-rgb),.3) !important;box-shadow:none !important;
}

/* ============================================================
   FASE 5 — sidebar flottante + card Crediti + topbar pulita
   ============================================================ */
/* topbar: via il divider verticale; "Installa App" solo icona */
.topbar .topbar-divider{display:none !important;}

/* Card "Crediti Voce" in fondo alla sidebar (come mockup) */
.lg-credits{
  align-self:stretch !important;width:auto !important;
  margin-top:auto;margin-left:12px;margin-right:12px;margin-bottom:12px;
  padding:16px 15px;border-radius:16px;text-align:center;
  background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.14), rgba(var(--bs-primary-rgb),.05));
  border:1px solid rgba(var(--bs-primary-rgb),.12);
}
.lg-credits-title{font-size:13.5px;font-weight:700;margin-bottom:3px;color:var(--bs-body-color);}
.lg-credits-sub{font-size:11.5px;color:var(--bs-secondary-color);margin-bottom:10px;line-height:1.4;}
.lg-credits-btn{
  display:flex;width:100%;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:700;color:#fff;
  padding:9px 14px;border-radius:11px;text-decoration:none;
  background:linear-gradient(135deg, rgb(var(--bs-primary-rgb)), rgba(var(--bs-primary-rgb),.72));
  box-shadow:0 6px 16px rgba(var(--bs-primary-rgb),.4);transition:transform .25s var(--lg-ease-spring);
}
.lg-credits-btn:hover{transform:translateY(-2px);color:#fff;}

/* ============================================================
   FASE 6 — TOPBAR SU MOBILE (<768px): header compatto, niente overflow.
   I controlli desktop (tema/lingua/install/profilo) sono ridondanti perché
   già presenti nello sheet "Altro" → nascosti. Restano titolo + Filtra.
   ============================================================ */
@media (max-width:767.98px){
  /* spazio in cima per status bar / notch (safe-area) + respiro */
  #content-wrapper{padding-top:calc(18px + env(safe-area-inset-top, 0px)) !important;}
  /* pagine col Filtra in topbar (dashboard/voce): titolo+azione occupano di più → più aria sopra */
  #content-wrapper:has(.lg-topbar-actions){padding-top:calc(32px + env(safe-area-inset-top, 0px)) !important;}
  .topbar{
    margin:0 0 14px 0 !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    padding:8px 12px !important;
    min-height:0 !important;
  }
  .topbar .container-fluid{flex-wrap:wrap;gap:8px 12px;padding-left:0 !important;padding-right:0 !important;}
  .lg-topbar-title{flex:1 1 auto;min-width:0;}
  .lg-topbar-title h3{font-size:18px !important;line-height:1.2;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
  .lg-topbar-title .dashboard-subtitle,
  .lg-topbar-title .chat-page-subtitle,
  .lg-topbar-title > p{white-space:normal;font-size:12px !important;}
  /* controlli ridondanti (già nello sheet "Altro"): via da mobile */
  .topbar #themeSwitcherNavbar,
  .topbar #langSwitcher,
  .topbar #pwaInstallNavbarItem,
  .topbar .topbar-divider,
  .topbar .nav-item.dropdown.no-arrow{display:none !important;}
  .topbar ul.navbar-nav{margin-left:auto !important;gap:8px;flex-wrap:nowrap;align-items:center;flex-shrink:0;}
  .lg-topbar-actions{margin:0 !important;}
  .lg-topbar-actions .btn{padding:8px 14px !important;}
  /* via il divider sb-admin anche su mobile */
  #content > div.d-none.d-sm-block[style*="border-bottom:"]{display:none !important;}
}

/* ============================================================
   FASE 7 — PREMIUM (apple-design)
   font reali + antialiasing + tipografia (tracking) + materiali
   (bordo-luce) + feedback on-press + reduced-motion.
   ============================================================ */

/* Inter VARIABILE self-hosted: pesi VERI 100-900 (basta faux-bold), EU-safe */
@font-face{
  font-family:'InterVar';
  src:url(../fonts/inter-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{ --bs-body-font-family:'InterVar','Inter',-apple-system,system-ui,'Segoe UI',sans-serif; }
body{
  font-family:'InterVar','Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-optical-sizing:auto;
}
/* base più leggera/raffinata: 600 (faux, pesante) -> 500 reale, crisp */
:root,[data-bs-theme="light"],[data-bs-theme="dark"]{ --bs-body-font-weight:500; }

/* Tipografia size-specific (§15): tracking negativo su titoli/numeri grandi */
.lg-topbar-title h3,
.kpi-card .kpi-value,
.card-header .fw-bold,
.sidebar .sidebar-brand-text .wl-brand-name,
h1,h2,h3{ letter-spacing:-.018em; }

/* Feedback on-press (§1): risposta immediata al tocco */
.btn-primary:active,
.btn-outline-primary:active,
.lg-topbar-actions .btn:active,
.lg-credits-btn:active,
.sidebar .nav-item .nav-link:active,
#sidebarToggle:active{ transform:scale(.97) !important; }

/* Reduced motion (§14): niente trasformazioni/oscillazioni, solo cross-fade brevi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; scroll-behavior:auto !important; }
  .card:hover,
  .btn-primary:hover,
  .btn-outline-primary:hover,
  .sidebar .nav-item .nav-link:hover,
  .kpi-card:hover .kpi-icon{ transform:none !important; }
}

/* ============================================================
   FASE 8 — PREMIUM apple-design: materiali, movimento, feedback, a11y
   ============================================================ */

/* (1) Topbar STICKY: il contenuto scorre SOTTO il vetro (blur = scroll-edge, §12).
       sb-admin mette overflow-x:hidden su #content-wrapper (=scroll-container, romperebbe
       lo sticky) → uso overflow-x:clip (clippa uguale ma NON crea scroll-container; su
       browser senza clip degrada e basta). Solo desktop; su mobile la topbar è in flusso. */
@media (min-width:768px){
  #content-wrapper{ overflow-x:clip; }
  .topbar{ position:sticky; top:18px; }
}

/* (2) Materialize (§12/§4/§7): il vetro "arriva", non fa un fade piatto.
       Dropdown = blur+fade (NIENTE transform → non rompe il posizionamento Popper).
       Modale = scala+fade dal centro, easing morbida senza rimbalzo. */
@keyframes lgMaterialize{ from{opacity:0;filter:blur(7px)} to{opacity:1;filter:blur(0)} }
.dropdown-menu.show{ animation:lgMaterialize .2s cubic-bezier(.4,0,.2,1); }
.modal.fade .modal-dialog{ transform:scale(.96);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.2,.4,1), opacity .22s ease; }
.modal.show .modal-dialog{ transform:none;opacity:1; }

/* (3) Entrata contenuto in STAGGER (rise+fade). Solo translateY+opacity → sicuro
       per i grafici ApexCharts (la larghezza non cambia). Sostituisce il fade a blocco. */
@keyframes lgRise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
#content{ animation:none !important; }
.container-fluid .row > [class*="col"]{ animation:lgRise .55s var(--lg-ease-spring) backwards; }
.container-fluid .row > [class*="col"]:nth-child(1){animation-delay:.03s}
.container-fluid .row > [class*="col"]:nth-child(2){animation-delay:.08s}
.container-fluid .row > [class*="col"]:nth-child(3){animation-delay:.13s}
.container-fluid .row > [class*="col"]:nth-child(4){animation-delay:.18s}
.container-fluid .row > [class*="col"]:nth-child(5){animation-delay:.23s}
.container-fluid .row > [class*="col"]:nth-child(n+6){animation-delay:.28s}

/* (5) Focus-visible premium (solo tastiera): anello brand coerente, niente ring da mouse */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible,
.sidebar .nav-item .nav-link:focus-visible,
#mobile-bottom-nav a:focus-visible,
#mobile-bottom-nav button:focus-visible,
.lg-credits-btn:focus-visible{
  outline:2px solid rgba(var(--bs-primary-rgb),.6) !important;outline-offset:2px !important;
  box-shadow:none !important;border-radius:12px;
}
.btn:focus:not(:focus-visible){ box-shadow:none !important; }

/* (6) Transizione tema dark<->light morbida (§14): una classe temporanea su <html>
       SOLO durante lo switch (aggiunta dall'observer in liquid-glass.js), così NON
       sovrascrive le transition esistenti (hover-lift/ombre restano intatte). */
/* body: transizione bg/colore incondizionata (cambia solo col tema → sempre sicura) */
body{ transition:background-color .35s ease, color .3s ease; }
/* superfici dentro #wrapper: classe messa su #wrapper (che index.js NON osserva →
   niente re-render extra dei grafici al cambio tema) */
#wrapper.lg-theme-anim #content-wrapper,
#wrapper.lg-theme-anim nav.sidebar,
#wrapper.lg-theme-anim .topbar,
#wrapper.lg-theme-anim .card,
#wrapper.lg-theme-anim .card-header,
#wrapper.lg-theme-anim .modal-content,
#wrapper.lg-theme-anim .dropdown-menu,
#wrapper.lg-theme-anim .chat-list-panel,
#wrapper.lg-theme-anim .chat-messages-panel,
#wrapper.lg-theme-anim .lg-credits,
#wrapper.lg-theme-anim .table{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

/* (8) Vibrancy testo sul vetro (§12): micro-tracking per leggibilità/presenza */
.sidebar .nav-item .nav-link,
.topbar .lg-topbar-title h3{ letter-spacing:.004em; }

/* (7) Accessibilità (§14): meno trasparenza / più contrasto */
@media (prefers-reduced-transparency:reduce){
  nav.sidebar,.topbar,.dropdown-menu,.modal-content,
  #mobile-bottom-nav,#mobile-nav-sheet .mns-content,
  body#loginBody .card,body.bg-gradient-primary .card{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background:var(--bs-body-bg) !important;border:1px solid var(--bs-border-color) !important;
  }
  #mobile-bottom-nav::before,#mobile-nav-sheet .mns-content::before{ display:none !important; }
}
@media (prefers-contrast:more){
  nav.sidebar,.topbar,.card,.modal-content,.dropdown-menu{ border:1px solid var(--bs-border-color) !important; }
  .sidebar .nav-item .nav-link.active{ outline:1.5px solid var(--bs-primary);outline-offset:-1px; }
}

/* reduced-motion: disattiva stagger/materialize/sticky-jump (integra la Fase 7) */
@media (prefers-reduced-motion:reduce){
  .container-fluid .row > [class*="col"]{ animation:none !important; }
  .dropdown-menu.show{ animation:none !important; }
  .modal.fade .modal-dialog{ transition:opacity .15s ease !important;transform:none !important; }
}

/* ============================================================
   FASE 9 — MODAL PREMIUM (apple-design)
   ============================================================ */

/* (2/4/7) Header & footer puliti (niente bordo duro), spaziatura ariosa.
   Il padding è scoppiato SOLO sui modali generici: lead/pwa hanno un header proprio. */
.modal-header{ border-bottom:none !important; }
.modal-footer{ border-top:none !important; }
.modal-header:not(.lead-modal-header):not(.pwa-modal-header){ padding:20px 22px 14px; position:relative; }
.modal-footer:not(.pwa-modal-footer){ padding:14px 22px 20px; gap:8px; position:relative; }
.modal-body{ padding:20px 22px; }

/* (3) Titolo: tracking sempre; layout flex solo quando c'è l'icona (non tocca lead/pwa) */
.modal-title{ letter-spacing:-.01em; }
.modal-title:has(.lg-modal-icon){ display:flex; align-items:center; gap:11px; }

/* (2) Scroll-edge (§12): il contenuto sfuma sotto header/footer nei modali scrollabili */
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer{ position:relative; }
.modal-dialog-scrollable .modal-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:14px;transform:translateY(100%);z-index:3;
  background:linear-gradient(var(--bs-modal-bg,#fff), transparent);pointer-events:none;
}
.modal-dialog-scrollable .modal-footer::before{
  content:'';position:absolute;left:0;right:0;top:0;height:14px;transform:translateY(-100%);z-index:3;
  background:linear-gradient(transparent, var(--bs-modal-bg,#fff));pointer-events:none;
}

/* (1) Bottone chiusura premium: cerchietto ghost coerente, hover rosso, tap target ampio */
.modal .btn-close{
  width:34px;height:34px;border-radius:50%;padding:10px;opacity:.75;box-sizing:border-box;
  background-color:rgba(var(--bs-body-color-rgb),.06);
  transition:background-color .2s ease, transform .2s var(--lg-ease-spring), opacity .2s;
}
.modal .btn-close:hover{ opacity:1;background-color:rgba(var(--bs-danger-rgb),.15);transform:scale(1.08); }
.modal .btn-close:focus{ box-shadow:none; }
/* header colorati (X bianca): cerchio chiaro */
.modal-header.text-white .btn-close,.lead-modal-header .btn-close,.pwa-modal-header .btn-close{ background-color:rgba(255,255,255,.18); }
.modal-header.text-white .btn-close:hover,.lead-modal-header .btn-close:hover,.pwa-modal-header .btn-close:hover{ background-color:rgba(255,255,255,.3); }

/* (6) Backdrop dim-to-focus (più deciso; il blur è già in Fase 2) */
.modal-backdrop.show{ background:rgba(8,4,20,.5) !important; }

/* Icona per-tipo nell'header (badge; iniettata da liquid-glass.js) */
.lg-modal-icon{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  background:rgba(var(--bs-primary-rgb),.12);color:var(--bs-primary);
}
.modal-header.text-white .lg-modal-icon,.lead-modal-header .lg-modal-icon,.pwa-modal-header .lg-modal-icon{ background:rgba(255,255,255,.2);color:#fff; }

/* ---------- Lead modal: refresh premium dedicato ---------- */
/* header: profondità (highlight radiale sul gradient) + avatar in rilievo */
.lead-modal-header{ overflow:hidden; }
.lead-modal-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 150% at 10% -25%, rgba(255,255,255,.30), transparent 55%);
}
.lead-modal-header > *{ position:relative;z-index:1; }
.lead-modal-avatar{ box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45) !important; }

/* card dei campi: bordi/hover premium + tipografia */
.lead-field-card{
  border-radius:16px !important;
  border:1px solid var(--bs-border-color-translucent) !important;
  transition:border-color .2s ease, box-shadow .25s var(--lg-ease-spring), transform .25s var(--lg-ease-spring);
}
.lead-field-card:hover{
  border-color:rgba(var(--bs-primary-rgb),.30) !important;
  box-shadow:0 10px 24px rgba(var(--bs-primary-rgb),.10);
  transform:translateY(-2px);
}
/* icona: da cerchio piatto a TILE arrotondato con gradient (più premium) */
.lead-field-card .rounded-circle{
  border-radius:10px !important;width:34px !important;height:34px !important;
  background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.18), rgba(var(--bs-primary-rgb),.06)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.lead-field-card label{ letter-spacing:.06em !important; }

/* report: scrollbar sottile brand */
#modalLeadReportReport::-webkit-scrollbar{ width:6px; }
#modalLeadReportReport::-webkit-scrollbar-thumb{ background:rgba(var(--bs-primary-rgb),.30);border-radius:10px; }
#modalLeadReportReport::-webkit-scrollbar-thumb:hover{ background:rgba(var(--bs-primary-rgb),.5); }
#modalLeadReportReport::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Meta page-picker: righe premium ---------- */
.lg-meta-row{
  border:1px solid var(--bs-border-color-translucent);border-radius:14px;background:var(--bs-body-bg);
  transition:border-color .2s ease, box-shadow .25s var(--lg-ease-spring), transform .2s var(--lg-ease-spring);
}
.lg-meta-row:hover{ border-color:rgba(var(--bs-primary-rgb),.3);box-shadow:0 8px 22px rgba(var(--bs-primary-rgb),.10);transform:translateY(-1px); }
.lg-meta-av{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:var(--bs-primary);
  background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.16), rgba(var(--bs-primary-rgb),.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.lg-meta-state{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;margin-top:3px;
}
.lg-meta-state::before{ content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.lg-meta-state.on{ color:#0ca678; }
.lg-meta-state.on::before{ background:#12b886;box-shadow:0 0 0 3px rgba(18,184,134,.15); }
.lg-meta-state.off{ color:var(--bs-secondary-color); }
.lg-meta-state.off::before{ background:var(--bs-secondary-color);opacity:.45; }
/* ricerca pulita */
#metaPagePickerSearchWrap .input-group-text{ background:transparent;border:1px solid var(--bs-border-color);border-right:none;color:var(--bs-secondary-color);border-radius:12px 0 0 12px; }
#metaPagePickerSearchWrap .form-control{ border-left:none;border-radius:0 12px 12px 0; }

/* ============================================================
   FASE 10 — DASHBOARD FEEL: skeleton, empty state, tabelle, micro-anim
   ============================================================ */

/* Skeleton shimmer sui KPI vuoti (finché non arrivano i dati) */
@keyframes lgShimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.kpi-value:empty::after{
  content:'';display:inline-block;width:74px;height:.9em;border-radius:8px;vertical-align:middle;
  background:linear-gradient(90deg, rgba(var(--bs-primary-rgb),.08) 25%, rgba(var(--bs-primary-rgb),.16) 37%, rgba(var(--bs-primary-rgb),.08) 63%);
  background-size:200% 100%;animation:lgShimmer 1.5s ease-in-out infinite;
}

/* KPI icon: micro "respiro" all'ingresso */
@keyframes lgBreathe{ 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.kpi-card .kpi-icon{ animation:lgBreathe .6s var(--lg-ease-spring) backwards; }

/* Tabelle: righe interattive premium */
.table tbody tr{ transition:background-color .16s ease; }
.table tbody tr:hover{ background:rgba(var(--bs-primary-rgb),.055); }

/* Empty state curato (classe .lg-empty iniettata da liquid-glass.js sul "Nessun dato") */
.lg-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px 16px;text-align:center;color:var(--bs-secondary-color); }
.lg-empty .lg-empty-ic{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:21px;color:var(--bs-primary);
  background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.14),rgba(var(--bs-primary-rgb),.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.lg-empty p{ margin:0;font-weight:600;font-size:.95rem;color:var(--bs-body-color); }
.lg-empty small{ color:var(--bs-secondary-color); }

/* Saluto personalizzato in cima alla dashboard */
.lg-greeting{ font-weight:800;letter-spacing:-.01em; }
.lg-greeting .lg-wave{ display:inline-block;animation:lgWave 2.4s ease-in-out infinite;transform-origin:70% 70%; }
@keyframes lgWave{ 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }

@media (prefers-reduced-motion:reduce){
  .kpi-value:empty::after,.kpi-card .kpi-icon,.lg-greeting .lg-wave{ animation:none !important; }
}

/* Mobile: via la toolbar ApexCharts (zoom/pan/menu) — su touch è inutile e si
   sovrappone alla legenda. Su desktop resta. */
@media (max-width:767.98px){
  .apexcharts-toolbar{ display:none !important; }
}

/* ============================================================
   FASE 11 — COERENZA PREMIUM: chat, profilo, integrazioni, toast
   ============================================================ */

/* ---------- CHAT (#4) ---------- */
/* pannelli: vetro coerente col chrome */
.chat-list-panel,.chat-messages-panel{ background:var(--lg-panel) !important; border:1px solid var(--lg-panel-brd) !important; box-shadow:var(--lg-panel-shadow) !important; }
/* item lista: hover lift + attivo a pill di vetro */
.chat-list-item{ transition:background-color .18s ease, box-shadow .22s var(--lg-ease-spring), transform .2s var(--lg-ease-spring), border-color .18s; }
.chat-list-item:hover{ transform:translateY(-1px); box-shadow:0 5px 16px rgba(var(--bs-primary-rgb),.08); }
.chat-list-item.active{ background:rgba(var(--bs-primary-rgb),.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(var(--bs-primary-rgb),.10) !important; }
.chat-list-item .channel-icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.chat-list-item:active{ transform:scale(.99); }
/* BOLLE: serve specificità .chat-messages-panel .message.X + !important per battere lo style iniettato da chat.js */
.chat-messages-panel .message.assistant{
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 2px 10px rgba(20,10,40,.05), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.chat-messages-panel .message.user{
  box-shadow:0 4px 14px rgba(var(--bs-primary-rgb),.26), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* barra input handoff */
.handoff-input{ border-radius:14px !important; transition:border-color .2s, box-shadow .2s; }
.handoff-input:focus{ border-color:var(--bs-primary) !important; box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.14) !important; }
.handoff-send-btn{ transition:transform .2s var(--lg-ease-spring), box-shadow .2s; }
.handoff-send-btn:active{ transform:scale(.94); }
/* Altezza pannelli chat: riempi lo schermo invece dei 700px fissi (solo desktop;
   mobile resta 500px da chat-page.css). Offset = topbar flottante + margini + mt-3 + footer. */
@media (min-width:768px){
  .chat-list-panel,
  .chat-messages-panel{
    /* height:calc(100vh - 220px) !important; */
    min-height:560px;
  }
}

/* ---------- PROFILO (#5) ---------- */
/* switch premium (l'elemento più grezzo) */
#notifBody .form-check-input, .form-switch .form-check-input{ cursor:pointer; transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.form-check-input:checked{ box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.16); }
.form-check-input:focus-visible{ outline:2px solid rgba(var(--bs-primary-rgb),.6); outline-offset:2px; }
/* 2FA: card metodo, banner, sottotitoli — convertiti a var (dark/white-label safe) */
.twofa-method-card{ border:1px solid var(--bs-border-color-translucent) !important; border-radius:16px !important; transition:border-color .2s, box-shadow .25s var(--lg-ease-spring), transform .25s var(--lg-ease-spring); }
.twofa-method-card:hover{ transform:translateY(-2px); border-color:rgba(var(--bs-primary-rgb),.3) !important; box-shadow:0 10px 24px rgba(var(--bs-primary-rgb),.10); }
.twofa-method-card.selected{ border-color:var(--bs-primary) !important; background:rgba(var(--bs-primary-rgb),.05) !important; }
.twofa-info-banner{ background:rgba(var(--bs-primary-rgb),.06) !important; border-radius:12px; }
.twofa-header-subtitle{ color:var(--bs-secondary-color) !important; }
.twofa-manual-key{ background:var(--bs-tertiary-bg) !important; }
.twofa-code-input{ border-radius:12px !important; }
.twofa-header-icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.notif-wa-consent{ background:var(--bs-tertiary-bg) !important; border-radius:14px !important; }
.notif-wa-brand{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- CARD INTEGRAZIONI (#6) ---------- */
[id^="integrationCol"] > .card{ transition:border-color .2s ease, box-shadow .3s var(--lg-ease-spring), transform .3s var(--lg-ease-spring); }
[id^="integrationCol"] > .card:hover{ transform:translateY(-3px); border:1px solid rgba(var(--bs-primary-rgb),.25) !important; box-shadow:0 16px 36px rgba(var(--bs-primary-rgb),.12) !important; }
/* titolo con logo in tile (come .lg-meta-av) */
[id^="integrationCol"] .card-title{ display:flex; align-items:center; gap:12px; }
[id^="integrationCol"] .card-title img,
[id^="integrationCol"] .card-title > i{
  width:42px !important; height:42px !important; padding:8px; border-radius:12px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; object-fit:contain; font-size:20px;
  background:linear-gradient(135deg, rgba(var(--bs-primary-rgb),.14), rgba(var(--bs-primary-rgb),.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); margin:0 !important;
}
[id^="integrationCol"] .card-title{ font-size:1.05rem; font-weight:700; }

/* ---------- TOAST in vetro (#7) ---------- */
.toast{
  border-radius:16px !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important; backdrop-filter:blur(22px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1) !important;
}
.toast:not(.show){ transform:translateX(40px) scale(.96); }
.toast.show{ transform:translateX(0) scale(1) !important; }
.toast.toast-hiding{ transform:translateX(40px) scale(.96) !important; }
.toast.success{ background:rgba(76,175,80,.72) !important; }
.toast.errorToast,.toast.danger{ background:rgba(244,67,54,.72) !important; }
.toast.warning{ background:rgba(255,152,0,.72) !important; }
.toast.info{ background:rgba(33,150,243,.72) !important; }
.toast.default{ background:rgba(108,92,231,.72) !important; }
.toast-container{ gap:12px !important; }
@media (prefers-reduced-motion:reduce){
  .toast{ transition:opacity .2s ease !important; }
  .toast:not(.show),.toast.toast-hiding{ transform:none !important; }
}

/* ---------- EMPTY / LOADING STATE dei grafici (#9) ----------
   index.js inietta placeholder inline "font-style:italic;color:#aaa" (non
   dark-safe, spartani). Li rendo premium e theme-aware SENZA toccare il render:
   stesso match della stringa inline, icona via ::before (emoji: no dipendenza font). */
.card [style*="font-style: italic"][style*="#aaa"],
#content [style*="font-style: italic"][style*="#aaa"]{
  flex-direction:column !important; gap:10px;
  color:var(--bs-secondary-color) !important; font-style:normal !important; font-weight:600;
}
.card [style*="font-style: italic"][style*="#aaa"]::before,
#content [style*="font-style: italic"][style*="#aaa"]::before{
  content:'📊'; font-size:30px; line-height:1; opacity:.45;
}