*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080d18;--bg2:#0e1628;--bg3:#141e30;--bg4:#1a2540;
  --accent:#4f7cff;--accent2:#7c5cff;--green:#3ecf8e;--red:#f56565;--amber:#f6ad55;--teal:#38bdf8;
  --text:#e8eaf0;--text2:#8b90a8;--text3:#555c78;
  --border:#1e2d4a;--r:12px;--font:'Inter',sans-serif;--mono:'IBM Plex Mono',monospace;
  /* ── SPACING SYSTEM ──────────────────────────────────────────────── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;
  /* ── RADIUS SYSTEM ───────────────────────────────────────────────── */
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;
  /* ── TYPOGRAPHY SCALE ────────────────────────────────────────────── */
  --text-xs:11px;--text-sm:12px;--text-base:14px;--text-md:15px;--text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:28px;
  /* ── SHADOW SYSTEM ───────────────────────────────────────────────── */
  --shadow-xs:0 1px 3px rgba(0,0,0,.20);
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);
  --shadow-md:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 8px 28px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22);
  --shadow-xl:0 14px 40px rgba(0,0,0,.44),0 3px 10px rgba(0,0,0,.26);
  /* ── CARD BASE (glassmorphism unificato) ─────────────────────────── */
  --card-bg:linear-gradient(160deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.01) 30%,rgba(8,15,40,0.08) 100%);
  --card-border:rgba(100,140,255,0.18);
  --card-border-top:rgba(160,190,255,0.38);
  --card-border-bottom:rgba(255,255,255,0.04);
  --card-shadow:0 6px 22px rgba(0,10,40,.42),0 2px 6px rgba(0,5,20,.30),inset 0 2.5px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.22),inset 1px 0 0 rgba(100,140,255,.12),inset -1px 0 0 rgba(100,140,255,.06);
  /* ── GERARCHIA VISIVA 3 LIVELLI ────────────────────────────────── */
  /* L1: KPI primari — full glass, strong shadow, glow on hover     */
  /* L2: Informative — glass ridotta, shadow morbida, no inset thick */
  /* L3: Contesto    — quasi invisibile, bg neutro, no shadow        */
  --l2-bg:rgba(60,100,200,0.07);
  --l2-border:rgba(80,120,220,0.12);
  --l2-border-top:rgba(120,160,255,0.22);
  --l2-shadow:0 3px 12px rgba(0,10,40,.34),0 1px 3px rgba(0,5,20,.24),inset 0 1px 0 rgba(120,160,255,.14);
  --l2-blur:14px;
}
html,body{height:100%;color:var(--text);font-family:var(--font);font-size:15px;font-variant-numeric:tabular-nums}
body{background:transparent}
html{background:transparent}
body{background:transparent}

/* ── Proiezione: W / NAM / NOM — badge unificati 3D ───────────────────── */
.att-badge-pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:72px;height:48px;padding:0 12px;
  border-radius:12px;flex-shrink:0;cursor:pointer;
  border:none;font-family:var(--mono);
  position:relative;overflow:hidden;
  /* profondità 3D simulata con gradienti + bordo luce */
  border-top:1px solid rgba(255,255,255,0.22);
  border-left:1px solid rgba(255,255,255,0.10);
  border-right:1px solid rgba(0,0,0,0.18);
  border-bottom:2px solid rgba(0,0,0,0.30);
  /* inner highlight top */
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 4px 14px rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.2);
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .15s,filter .15s;
  transform:perspective(200px) rotateX(0deg);
  user-select:none;gap:2px;
}
.att-badge-pill::before{
  /* shimmer speculare diagonale */
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.13) 0%,transparent 55%,rgba(0,0,0,0.08) 100%);
  pointer-events:none;border-radius:inherit;
}
.att-badge-pill:hover,.att-badge-pill:focus-visible{
  transform:perspective(200px) rotateX(-6deg) translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 8px 22px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.25),
    0 0 0 1.5px var(--att-pill-glow,rgba(255,255,255,0.2));
  filter:brightness(1.08);
}
.att-badge-pill:active{
  transform:perspective(200px) rotateX(2deg) translateY(1px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.12) inset,
    0 3px 8px rgba(0,0,0,0.3);
  filter:brightness(0.96);
}
.att-badge-pill .pill-label{
  font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);line-height:1;
}
.att-badge-pill .pill-value{
  font-size:17px;font-weight:800;color:#fff;line-height:1.1;
  min-width:2ch;text-align:center;
}
/* varianti colore */
.att-badge-pill.pill-wamo{
  background:linear-gradient(160deg,#8b6fff 0%,#6b3fff 60%,#4a20c0 100%);
  --att-pill-glow:rgba(124,92,255,0.6);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 4px 14px rgba(107,63,255,0.45),
    0 1px 3px rgba(0,0,0,0.2);
}
.att-badge-pill.pill-wamo:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 8px 28px rgba(107,63,255,0.65),
    0 0 0 1.5px rgba(139,111,255,0.7);
}
.att-badge-pill.pill-nam{
  background:linear-gradient(160deg,#ffbe6a 0%,#f6a330 60%,#c07010 100%);
  --att-pill-glow:rgba(246,163,48,0.6);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 4px 14px rgba(246,163,48,0.45),
    0 1px 3px rgba(0,0,0,0.2);
}
.att-badge-pill.pill-nam:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 8px 28px rgba(246,163,48,0.65),
    0 0 0 1.5px rgba(255,190,106,0.7);
}
.att-badge-pill.pill-nom{
  background:linear-gradient(160deg,#3ee8a0 0%,#1a9e6a 60%,#0e6644 100%);
  --att-pill-glow:rgba(30,180,110,0.6);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 4px 14px rgba(30,180,110,0.45),
    0 1px 3px rgba(0,0,0,0.2);
}
.att-badge-pill.pill-nom:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 0 rgba(0,0,0,0.22) inset,
    0 8px 28px rgba(30,180,110,0.65),
    0 0 0 1.5px rgba(62,232,160,0.7);
}
/* input NOM dentro la pill */
.att-badge-pill.pill-nom input{
  background:transparent;border:none;
  color:#fff;font-family:var(--mono);
  font-size:17px;font-weight:800;
  text-align:center;outline:none;
  width:4ch;padding:0;
  -moz-appearance:textfield;
}
.att-badge-pill.pill-nom input::-webkit-outer-spin-button,
.att-badge-pill.pill-nom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ── BACKGROUND AMBIENTALE: pseudo-element fisso al viewport ─────────── */
/* position:fixed + inset:0 + z-index:-1 → copre SEMPRE tutto il viewport,
   indipendente dall'altezza del documento, da transform di antenati, ecc. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  --view-glow:rgba(79,124,255,0.14);
  --view-glow2:rgba(124,92,255,0.08);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 0 1 0 0 0 0.032 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0/180px 180px repeat,
    radial-gradient(1400px 800px at 8% -15%, var(--view-glow) 0%, transparent 55%),
    radial-gradient(1100px 700px at 95% 112%, var(--view-glow2) 0%, transparent 60%);
  transition:--view-glow 1.1s ease, --view-glow2 1.1s ease;
}
/* View-aware glow colors — le variabili sono settate sul body e ereditate dallo ::before */
body:has(.nav-btn.active[data-view="dashboard"])       {--view-glow:rgba(79,124,255,0.12);--view-glow2:rgba(124,92,255,0.06)}
body:has(.nav-btn.active[data-view="inserimento"])     {--view-glow:rgba(62,207,142,0.11);--view-glow2:rgba(62,207,142,0.05)}
body:has(.nav-btn.active[data-view="proiezione"])      {--view-glow:rgba(246,173,85,0.11);--view-glow2:rgba(246,173,85,0.05)}
body:has(.nav-btn.active[data-view="onboarding"])      {--view-glow:rgba(56,189,248,0.12);--view-glow2:rgba(56,189,248,0.06)}
body:has(.nav-btn.active[data-view="turni"])           {--view-glow:rgba(167,139,250,0.12);--view-glow2:rgba(167,139,250,0.05)}
body:has(.nav-btn.active[data-view="ferie"])           {--view-glow:rgba(52,211,153,0.11);--view-glow2:rgba(52,211,153,0.05)}
body:has(.nav-btn.active[data-view="premi"])           {--view-glow:rgba(251,191,36,0.11);--view-glow2:rgba(251,191,36,0.05)}
body:has(.nav-btn.active[data-view="operatori"])       {--view-glow:rgba(124,92,255,0.12);--view-glow2:rgba(124,92,255,0.06)}
body:has(.nav-btn.active[data-view="amministrazione"]) {--view-glow:rgba(245,101,101,0.10);--view-glow2:rgba(245,101,101,0.05)}
body:has(.nav-btn.active[data-view="calcolatore-rental"]){--view-glow:rgba(246,173,85,0.11);--view-glow2:rgba(246,173,85,0.05)}
body:has(.nav-btn.active[data-view="team"])            {--view-glow:rgba(236,72,153,0.11);--view-glow2:rgba(236,72,153,0.05)}
body:has(.nav-btn.active[data-view="spedizioni"])      {--view-glow:rgba(34,197,94,0.10);--view-glow2:rgba(34,197,94,0.05)}
body:has(.nav-btn.active[data-view="home"])           {--view-glow:rgba(251,146,60,0.11);--view-glow2:rgba(251,146,60,0.05)}
body:has(.nav-btn.active[data-view="downloads"])       {--view-glow:rgba(100,116,139,0.10);--view-glow2:rgba(100,116,139,0.05)}
body:has(.nav-btn.active[data-view="mioaccount"])      {--view-glow:rgba(129,140,248,0.12);--view-glow2:rgba(129,140,248,0.06)}
/* Safe area per notch/Dynamic Island/barra home iOS */
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.nav{display:flex;align-items:center;gap:4px;padding:12px 20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));background:rgba(5,9,21,0.45);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border-bottom:1px solid rgba(120,160,255,0.12);flex-wrap:wrap;position:sticky;top:0;z-index:100;padding-top:max(12px,env(safe-area-inset-top))}
.nav-brand{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.06em;margin-right:8px;white-space:nowrap}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes liveDotPulse{0%{box-shadow:0 0 0 0 rgba(245,101,101,.7)}70%{box-shadow:0 0 0 6px rgba(245,101,101,0)}100%{box-shadow:0 0 0 0 rgba(245,101,101,0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes monthSlideFromRight{0%{opacity:0;transform:translateX(36px)}100%{opacity:1;transform:translateX(0)}}
@keyframes monthSlideFromLeft{0%{opacity:0;transform:translateX(-36px)}100%{opacity:1;transform:translateX(0)}}
#mainArea.month-next{animation:monthSlideFromRight .27s cubic-bezier(.22,.68,0,1.1) both}
#mainArea.month-prev{animation:monthSlideFromLeft .27s cubic-bezier(.22,.68,0,1.1) both}
@keyframes weatherOvFadeIn{0%{opacity:0;backdrop-filter:blur(0px)}100%{opacity:1;backdrop-filter:blur(8px)}}
@keyframes pageEnterLeft{0%{opacity:0;transform:translateX(-60px) scale(.96)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes pageEnterRight{0%{opacity:0;transform:translateX(60px) scale(.96)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes pageEnterTop{0%{opacity:0;transform:translateY(-40px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pageEnterBottom{0%{opacity:0;transform:translateY(40px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
#mainArea.page-enter > *{opacity:0;animation-duration:.45s;animation-timing-function:cubic-bezier(.34,1.3,.64,1);animation-fill-mode:forwards}
#mainArea.page-enter > *:nth-child(1){animation-name:pageEnterTop;animation-delay:.02s}
#mainArea.page-enter > *:nth-child(2){animation-name:pageEnterLeft;animation-delay:.08s}
#mainArea.page-enter > *:nth-child(3){animation-name:pageEnterRight;animation-delay:.12s}
#mainArea.page-enter > *:nth-child(4){animation-name:pageEnterLeft;animation-delay:.17s}
#mainArea.page-enter > *:nth-child(5){animation-name:pageEnterRight;animation-delay:.22s}
#mainArea.page-enter > *:nth-child(6){animation-name:pageEnterBottom;animation-delay:.27s}
#mainArea.page-enter > *:nth-child(7){animation-name:pageEnterBottom;animation-delay:.32s}
#mainArea.page-enter > *:nth-child(8){animation-name:pageEnterBottom;animation-delay:.36s}
#mainArea.page-enter > *:nth-child(n+9){animation-name:pageEnterBottom;animation-delay:.40s}
.nav-month{font-size:12px;color:var(--text3);font-family:var(--mono)}
.nav-dt-sep{color:var(--border);font-size:11px}
.nav-dt-date{color:var(--text2);letter-spacing:.03em;font-size:12px;font-family:var(--mono);white-space:nowrap}
.nav-dt-time{color:var(--text2);letter-spacing:.03em;font-size:12px;font-family:var(--mono);white-space:nowrap}
.nav-scritta{font-size:13px;font-style:italic;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;flex-shrink:1;cursor:pointer;transition:color .2s}.nav-scritta:hover{color:var(--accent)}
/* ── Commento del giorno modal ─────────────────────────────────────── */
#commentoModal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:16px}
#commentoModal.open{display:flex}
#commentoModal .cm-box{background:var(--bg2);border:1px solid rgba(56,189,248,0.35);border-top:3px solid #38bdf8;border-radius:12px;max-width:520px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:cmIn .25s ease;box-shadow:0 0 0 1.5px rgba(56,189,248,0.7),0 0 28px 6px rgba(56,189,248,0.38),0 0 70px 18px rgba(56,189,248,0.14),0 32px 80px rgba(0,0,0,0.6)}
@keyframes cmIn{0%{opacity:0;transform:perspective(600px) rotateX(-18deg) translateY(-16px) scale(0.96)}60%{opacity:1;transform:perspective(600px) rotateX(3deg) translateY(2px) scale(1.01)}100%{opacity:1;transform:perspective(600px) rotateX(0deg) translateY(0) scale(1)}}
@keyframes tronGlowBlue{0%{box-shadow:0 0 0 1.5px rgba(56,189,248,0.7),0 0 28px 6px rgba(56,189,248,0.38),0 0 70px 18px rgba(56,189,248,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(56,189,248,1),0 0 40px 12px rgba(56,189,248,0.55),0 0 90px 28px rgba(56,189,248,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(56,189,248,0.7),0 0 28px 6px rgba(56,189,248,0.38),0 0 70px 18px rgba(56,189,248,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowViolet{0%{box-shadow:0 0 0 1.5px rgba(155,124,255,0.7),0 0 28px 6px rgba(155,124,255,0.38),0 0 70px 18px rgba(155,124,255,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(155,124,255,1),0 0 40px 12px rgba(155,124,255,0.55),0 0 90px 28px rgba(155,124,255,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(155,124,255,0.7),0 0 28px 6px rgba(155,124,255,0.38),0 0 70px 18px rgba(155,124,255,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowAmber{0%{box-shadow:0 0 0 1.5px rgba(246,173,85,0.7),0 0 28px 6px rgba(246,173,85,0.38),0 0 70px 18px rgba(246,173,85,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(246,173,85,1),0 0 40px 12px rgba(246,173,85,0.55),0 0 90px 28px rgba(246,173,85,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(246,173,85,0.7),0 0 28px 6px rgba(246,173,85,0.38),0 0 70px 18px rgba(246,173,85,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowRed{0%{box-shadow:0 0 0 1.5px rgba(255,100,100,0.7),0 0 28px 6px rgba(255,100,100,0.38),0 0 70px 18px rgba(255,100,100,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(255,100,100,1),0 0 40px 12px rgba(255,100,100,0.55),0 0 90px 28px rgba(255,100,100,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(255,100,100,0.7),0 0 28px 6px rgba(255,100,100,0.38),0 0 70px 18px rgba(255,100,100,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowIndigo{0%{box-shadow:0 0 0 1.5px rgba(79,124,255,0.7),0 0 28px 6px rgba(79,124,255,0.38),0 0 70px 18px rgba(79,124,255,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(79,124,255,1),0 0 40px 12px rgba(79,124,255,0.55),0 0 90px 28px rgba(79,124,255,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(79,124,255,0.7),0 0 28px 6px rgba(79,124,255,0.38),0 0 70px 18px rgba(79,124,255,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowGreen{0%{box-shadow:0 0 0 1.5px rgba(52,211,153,0.7),0 0 28px 6px rgba(52,211,153,0.38),0 0 70px 18px rgba(52,211,153,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(52,211,153,1),0 0 40px 12px rgba(52,211,153,0.55),0 0 90px 28px rgba(52,211,153,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(52,211,153,0.7),0 0 28px 6px rgba(52,211,153,0.38),0 0 70px 18px rgba(52,211,153,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowPurple{0%{box-shadow:0 0 0 1.5px rgba(167,139,250,0.7),0 0 28px 6px rgba(167,139,250,0.38),0 0 70px 18px rgba(167,139,250,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(167,139,250,1),0 0 40px 12px rgba(167,139,250,0.55),0 0 90px 28px rgba(167,139,250,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(167,139,250,0.7),0 0 28px 6px rgba(167,139,250,0.38),0 0 70px 18px rgba(167,139,250,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowCyan{0%{box-shadow:0 0 0 1.5px rgba(99,179,237,0.7),0 0 28px 6px rgba(99,179,237,0.38),0 0 70px 18px rgba(99,179,237,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(99,179,237,1),0 0 40px 12px rgba(99,179,237,0.55),0 0 90px 28px rgba(99,179,237,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(99,179,237,0.7),0 0 28px 6px rgba(99,179,237,0.38),0 0 70px 18px rgba(99,179,237,0.14),0 32px 80px rgba(0,0,0,0.6)}}
@keyframes tronGlowOrange{0%{box-shadow:0 0 0 1.5px rgba(251,146,60,0.7),0 0 28px 6px rgba(251,146,60,0.38),0 0 70px 18px rgba(251,146,60,0.14),0 32px 80px rgba(0,0,0,0.6)}50%{box-shadow:0 0 0 1.5px rgba(251,146,60,1),0 0 40px 12px rgba(251,146,60,0.55),0 0 90px 28px rgba(251,146,60,0.22),0 32px 80px rgba(0,0,0,0.6)}100%{box-shadow:0 0 0 1.5px rgba(251,146,60,0.7),0 0 28px 6px rgba(251,146,60,0.38),0 0 70px 18px rgba(251,146,60,0.14),0 32px 80px rgba(0,0,0,0.6)}}
#commentoModal .cm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
#commentoModal .cm-title{font-size:14px;font-weight:600;color:var(--accent);text-transform:capitalize}
#commentoModal .cm-close{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;border-radius:6px;transition:color .2s}
#commentoModal .cm-close:hover{color:var(--text)}
#commentoModal .cm-verse{font-size:14px;font-style:italic;color:var(--text2);padding:12px 20px 0;line-height:1.5}
#commentoModal .cm-body{font-size:14px;color:var(--text);line-height:1.7;padding:10px 20px 20px;overflow-y:auto}

.nav-btn{padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:var(--font);font-size:13px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.nav-btn:hover{background:var(--bg3);color:var(--text)}
/* Sidebar labels: hidden on mobile, shown only in desktop sidebar */
.sidebar-section-label{display:none}
.sidebar-search-wrap{display:none}
@media(max-width:1024px){
  .nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:max(8px,env(safe-area-inset-top)) 12px 8px 12px;gap:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}

/* ── CUSTOM SCROLLBAR ───────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.13);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.26)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.13) transparent}
  .nav-brand{font-size:13px;margin-right:4px;flex-shrink:0}
  .nav-dot{flex-shrink:0}
  .nav-month{display:none}
  .nav-scritta{display:none}
  .nav-dt-sep{display:none}
  .nav-dt-date{display:none}
  .nav-dt-time{display:none}
  .nav-btn{padding:5px 10px;font-size:12px;white-space:nowrap;flex-shrink:0}
  .suggest-btn{padding:5px 10px;font-size:12px;white-space:nowrap;flex-shrink:0}
}
@media(max-width:480px){
  .nav{padding:max(7px,env(safe-area-inset-top)) 10px 7px 10px;gap:3px}
  .nav-brand{display:none}
  .nav-dot{display:none}
  /* Touch target minimo 44px per accessibilità iOS */
  .nav-btn{padding:11px 10px;font-size:12px;min-height:40px}
  .main{padding:10px 8px;padding-bottom:0}
  /* Nascondi widget meteo su telefono */
  .weather-widget-wrap{display:none!important}
}

/* ── MOBILE HAMBURGER MENU (iPhone / small phone ≤768px) ────────────── */
@media(max-width:1023px){
  /* ── Sottomenu: SOLO desktop — su mobile/tablet completamente disabilitati ── */
  /* Il wrapper diventa trasparente: solo il nav-btn principale è visibile come qualsiasi altro nav-btn */
  .nav-sub-group{display:contents}
  /* Il btn principale dentro nav-sub-group: nascosto come tutti i nav-btn (regola sotto lo nasconde già) */
  /* I sub-items: sempre nascosti su mobile/tablet */
  .nav-sub-items{display:none!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important}
  /* Nascondi tutti i nav-btn orizzontali — rimangono nel drawer */
  .nav .nav-btn{display:none!important}
  /* Nascondi l'indicatore magic-line (non ha senso senza i btn) */
  .nav-ind{display:none!important}
  /* Nav diventa topbar compatta */
  .nav{flex-wrap:nowrap;overflow:visible;padding:max(8px,env(safe-area-inset-top)) 12px 8px 12px;gap:8px;align-items:center}
  /* Mostra hamburger e label sezione corrente */
  #hamburgerBtn{display:flex!important}
  #navCurrView{display:block!important}
  /* Porta il chip utente prima del hamburger: riordina con order */
  .nav-month-group{order:2;margin-left:auto;flex-shrink:0}
  #hamburgerBtn{order:3}
  #navCurrView{order:1;flex:1}
  /* Nascondi elementi verbosi nella topbar */
  .nav-scritta{display:none!important}
  .nav-dt-sep{display:none!important}
  .nav-dt-time{display:none!important}
  .nav-month{display:none!important}
  #navScrittaMobile{display:none!important}
  /* Calendario non deve uscire dal viewport */
  .cal-grid,.fc,.fc-view-harness{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Tabelle fuori dallo schermo: forza scroll */
  table{min-width:0}
  .table-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);display:block;width:100%;max-width:100%}
  /* Contenuto principale: padding safe area */
  .main{padding:10px 10px;padding-bottom:0;max-width:100%;overflow-x:clip}
  /* Pannelli: no overflow */
  .panel{max-width:100%;overflow-x:clip}
  /* Meteo nascosto */
  .weather-widget-wrap{display:none!important}
  /* Counter online desktop → nascosto, badge mobile → visibile */
  .online-counter{display:none!important}
  #desktopOnlineBadge{display:none!important}
  #mobileOnlineBadge{display:inline-flex!important}
}

/* ── MOBILE DRAWER ──────────────────────────────────────────────────── */
#mobileMenuDrawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(8,9,14,0.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:drawerBgIn .18s ease forwards;
}
#mobileMenuDrawer.open{display:block}
@keyframes drawerBgIn{from{opacity:0}to{opacity:1}}

#mobileMenuPanel{
  position:absolute;
  top:0;left:0;right:0;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.35);
  padding:max(60px,calc(60px + env(safe-area-inset-top))) 12px 14px;
  animation:drawerPanelIn .22s cubic-bezier(.34,1.2,.64,1) forwards;
  overflow:hidden;
}
@keyframes drawerPanelIn{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

#mobileMenuGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mob-nav-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 10px;
  min-height:72px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--text2);
  font-family:var(--font);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
  width:100%;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-btn:active{transform:scale(.96);opacity:.85}
.mob-nav-btn span{font-size:12px;font-weight:500}

/* Badge numerico nelle card del drawer mobile */
.mob-num-badge{
  position:absolute;
  bottom:7px;
  right:9px;
  font-size:9px;
  font-family:var(--mono);
  font-weight:700;
  padding:1px 5px;
  border-radius:20px;
  line-height:1.5;
  letter-spacing:-.01em;
  transition:opacity .2s;
  pointer-events:none;
}
.mob-num-badge[data-v="dashboard"]     {background:rgba(79,124,255,0.18);color:#7aa4ff;border:1px solid rgba(79,124,255,0.30)}
.mob-num-badge[data-v="proiezione"]    {background:rgba(155,124,255,0.18);color:#b89dff;border:1px solid rgba(155,124,255,0.30)}
.mob-num-badge[data-v="onboarding"]   {background:rgba(56,189,248,0.18);color:#6dd3fc;border:1px solid rgba(56,189,248,0.30)}
.mob-num-badge[data-v="spedizioni"]   {background:rgba(34,197,94,0.18);color:#4ade80;border:1px solid rgba(34,197,94,0.30)}
.mob-num-badge[data-v="ferie"]        {background:rgba(251,146,60,0.18);color:#fb923c;border:1px solid rgba(251,146,60,0.30)}
.mob-num-badge[data-v="team"]         {background:rgba(148,163,184,0.18);color:#94a3b8;border:1px solid rgba(148,163,184,0.30)}
.mob-num-badge[data-v="premi"]        {background:rgba(250,204,21,0.18);color:#facc15;border:1px solid rgba(250,204,21,0.30)}
.mob-num-badge[data-v="amministrazione"]{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.28);font-size:9px}
.mob-num-badge[hidden]{display:none!important}

/* Colori active per sezione */
.mob-nav-btn.active[data-view="dashboard"]     {background:rgba(79,124,255,0.16);border-color:rgba(79,124,255,0.55);color:#a5b4fc}
.mob-nav-btn.active[data-view="proiezione"]    {background:rgba(246,173,85,0.16);border-color:rgba(246,173,85,0.55);color:#fcd34d}
.mob-nav-btn.active[data-view="onboarding"]    {background:rgba(56,189,248,0.16);border-color:rgba(56,189,248,0.55);color:#7dd3fc}
.mob-nav-btn.active[data-view="spedizioni"]    {background:rgba(34,197,94,0.16);border-color:rgba(34,197,94,0.55);color:#bbf7d0}
.mob-nav-btn.active[data-view="team"]          {background:rgba(236,72,153,0.16);border-color:rgba(236,72,153,0.55);color:#f9a8d4}
.mob-nav-btn.active[data-view="turni"]         {background:rgba(167,139,250,0.16);border-color:rgba(167,139,250,0.55);color:#c4b5fd}
.mob-nav-btn.active[data-view="ferie"]         {background:rgba(52,211,153,0.16);border-color:rgba(52,211,153,0.55);color:#6ee7b7}
.mob-nav-btn.active[data-view="premi"]         {background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,0.55);color:#fcd34d}
.mob-nav-btn.active[data-view="downloads"]     {background:rgba(100,116,139,0.16);border-color:rgba(100,116,139,0.55);color:#94a3b8}
.mob-nav-btn.active[data-view="amministrazione"]{background:rgba(245,101,101,0.16);border-color:rgba(245,101,101,0.55);color:#fca5a5}
.mob-nav-btn.active[data-view="home"]          {background:rgba(251,146,60,0.16);border-color:rgba(251,146,60,0.55);color:#fdba74}
.mob-nav-btn.active[data-view="mioaccount"]    {background:rgba(129,140,248,0.16);border-color:rgba(129,140,248,0.55);color:#a5b4fc}

/* SVG nel drawer: flex-shrink solo, il colore viene dall'attributo stroke inline */
.mob-nav-btn svg{flex-shrink:0}
/* Quando la card è .active, le SVG ereditano il color della card */
.mob-nav-btn.active svg{stroke:currentColor}

/* Show drawer only on mobile */
@media(min-width:1024px){
  #mobileMenuDrawer{display:none!important}
  #hamburgerBtn{display:none!important}
  #navCurrView{display:none!important}
}
/* ── Weather pill glass morphism ────────────────────────────────────── */
.weather-pill{display:flex;flex-direction:row;align-items:center;gap:8px;background:linear-gradient(160deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.07) 45%,rgba(255,255,255,0.11) 100%);backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);border:1px solid rgba(255,255,255,0.15);border-top-color:rgba(255,255,255,0.40);border-bottom-color:rgba(255,255,255,0.05);border-left-color:rgba(255,255,255,0.12);border-right-color:rgba(255,255,255,0.07);border-radius:11px;padding:6px 8px 6px 6px;min-width:0;cursor:pointer;position:relative;overflow:hidden;transition:background .22s,box-shadow .25s,border-color .25s,transform .18s cubic-bezier(.34,1.4,.64,1);box-shadow:0 6px 28px rgba(0,0,0,0.50),0 2px 6px rgba(0,0,0,0.32),inset 0 2px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.26),inset 1px 0 0 rgba(255,255,255,0.08),inset -1px 0 0 rgba(255,255,255,0.04)}
.weather-pill::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,0.26) 0%,rgba(255,255,255,0.06) 55%,rgba(255,255,255,0.00) 100%);pointer-events:none;z-index:0}
.weather-pill>*{position:relative;z-index:1}
.weather-pill:hover{background:linear-gradient(160deg,rgba(56,189,248,0.18) 0%,rgba(56,189,248,0.07) 45%,rgba(56,189,248,0.12) 100%);border-color:rgba(56,189,248,0.48);border-top-color:rgba(56,189,248,0.32);box-shadow:0 10px 36px rgba(0,0,0,0.55),0 0 0 1px rgba(56,189,248,0.22),0 0 20px 4px rgba(56,189,248,0.14),inset 0 2px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(0,0,0,0.22);transform:translateY(-1px)}
.scritto-pill{transition:background .22s,box-shadow .25s,border-color .25s,transform .18s cubic-bezier(.34,1.4,.64,1)}
.scritto-pill:hover{background:linear-gradient(160deg,rgba(56,189,248,0.10) 0%,rgba(56,189,248,0.04) 45%,rgba(56,189,248,0.08) 100%) !important;border-color:rgba(56,189,248,0.42) !important;box-shadow:0 8px 28px rgba(0,0,0,0.52),0 0 0 1px rgba(56,189,248,0.20),0 0 16px 3px rgba(56,189,248,0.12),inset 0 2px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.20);transform:translateY(-1px)}
/* ── User chip glass pill ────────────────────────────────────────────── */
.user-chip-pill{display:flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;background:linear-gradient(160deg,rgba(79,124,255,0.20) 0%,rgba(79,124,255,0.09) 45%,rgba(79,124,255,0.14) 100%);backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);border:1px solid rgba(79,124,255,0.22);border-top-color:rgba(165,180,252,0.40);border-bottom-color:rgba(79,124,255,0.06);border-left-color:rgba(79,124,255,0.14);border-right-color:rgba(79,124,255,0.08);border-radius:20px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 4px 22px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.28),inset 0 1.5px 0 rgba(165,180,252,0.20),inset 0 -1px 0 rgba(0,0,0,0.24),inset 1px 0 0 rgba(165,180,252,0.06),inset -1px 0 0 rgba(165,180,252,0.03);transition:background .22s,box-shadow .25s,border-color .25s,transform .18s cubic-bezier(.34,1.4,.64,1)}
.user-chip-pill::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(165,180,252,0.20) 0%,rgba(165,180,252,0.05) 55%,rgba(165,180,252,0.00) 100%);pointer-events:none;z-index:0}
.user-chip-pill>*{position:relative;z-index:1}
.user-chip-pill:hover{background:linear-gradient(160deg,rgba(79,124,255,0.30) 0%,rgba(79,124,255,0.13) 45%,rgba(79,124,255,0.20) 100%);border-color:rgba(79,124,255,0.48);border-top-color:rgba(165,180,252,0.50);box-shadow:0 8px 32px rgba(0,0,0,0.55),0 0 0 1px rgba(79,124,255,0.22),0 0 20px 4px rgba(79,124,255,0.14),inset 0 1.5px 0 rgba(165,180,252,0.18),inset 0 -1px 0 rgba(0,0,0,0.20);transform:translateY(-1px)}
/* ── det-table pill: backdrop-filter fallback (sfondo scuro opaco) ── */
.det-table .user-chip-pill{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(160deg,rgba(79,124,255,0.28) 0%,rgba(79,124,255,0.14) 45%,rgba(100,130,255,0.22) 100%);box-shadow:0 3px 14px rgba(0,0,0,0.55),0 1px 3px rgba(0,0,0,0.35),inset 0 1.5px 0 rgba(165,180,252,0.28),inset 0 -1px 0 rgba(0,0,0,0.28),inset 1px 0 0 rgba(165,180,252,0.10),inset -1px 0 0 rgba(165,180,252,0.05)}
.det-table .user-chip-pill:hover{background:linear-gradient(160deg,rgba(79,124,255,0.40) 0%,rgba(79,124,255,0.20) 45%,rgba(100,130,255,0.32) 100%);transform:none}
/* ── OTTIMIZZAZIONI MOBILE GLOBALI ──────────────────────────────────── */
/* Previene zoom automatico iOS su focus input (font-size < 16px) */
@media(max-width:1023px){
  input,select,textarea{font-size:17px!important}
  /* Tabelle scorrevoli orizzontalmente su mobile */
  .table-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
  /* Stat grid: 2 colonne su mobile piccolo — !important per battere gli stili inline */
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  /* Form grid: 1 colonna su mobile */
  .form-grid{grid-template-columns:1fr!important}
  /* Pannelli con meno padding */
  .panel{padding:14px}
  /* Bottoni più grandi per touch */
  .btn{min-height:44px;padding:10px 18px}
  .btn-sm{min-height:44px;padding:6px 12px}
  /* Premio card: adattate al mobile */
  .premio-grid{gap:8px}
  .premio-card{width:calc(50% - 4px);min-width:140px}
  /* Lead cards: 1 colonna */
  .leads-grid{grid-template-columns:1fr}
  /* Barre operatori: nome più stretto */
  .bar-name{width:68px}
  /* Tab buttons: wrap e più grandi */
  .tabs{gap:5px}
  .tab{padding:9px 14px;font-size:13px;min-height:44px}
  /* Testo tabella leggermente più grande */
  td{padding:10px 8px;font-size:13px}
  th{padding:8px}
}
@media(max-width:380px){
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .premio-card{width:calc(50% - 4px);min-width:100px}
  .cat-grid{grid-template-columns:1fr}
  .bar-name{width:58px;font-size:11px}
}
/* ── NAV INDICATOR (magic-move underline, stile Vercel/Framer) ──────── */
.nav-ind{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:0;
  --ind-color:var(--accent);
  background:var(--ind-color);
  border-radius:3px 3px 0 0;
  box-shadow:
    0 0 10px var(--ind-color),
    0 -3px 18px var(--ind-color),
    0 2px 22px -3px var(--ind-color),
    0 0 38px -6px var(--ind-color);
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.34,1.3,.64,1),
             width .42s cubic-bezier(.34,1.3,.64,1),
             background-color .35s ease,
             box-shadow .35s ease,
             opacity .25s ease;
  opacity:0;
  pointer-events:none;
  z-index:2;
  will-change:transform,width;
}
.nav-ind[data-active="1"]{opacity:1}
/* Colore per vista: CSS puro via :has(), nessuna lettura JS */
.nav:has(.nav-btn.active[data-view="dashboard"])        .nav-ind{--ind-color:#4f7cff}
.nav:has(.nav-btn.active[data-view="inserimento"])      .nav-ind{--ind-color:#3ecf8e}
.nav:has(.nav-btn.active[data-view="proiezione"])       .nav-ind{--ind-color:#f6ad55}
.nav:has(.nav-btn.active[data-view="onboarding"])       .nav-ind{--ind-color:#38bdf8}
.nav:has(.nav-btn.active[data-view="turni"])            .nav-ind{--ind-color:#a78bfa}
.nav:has(.nav-btn.active[data-view="ferie"])            .nav-ind{--ind-color:#34d399}
.nav:has(.nav-btn.active[data-view="premi"])            .nav-ind{--ind-color:#fbbf24}
.nav:has(.nav-btn.active[data-view="downloads"])        .nav-ind{--ind-color:#94a3b8}
.nav:has(.nav-btn.active[data-view="operatori"])        .nav-ind{--ind-color:#7c5cff}
.nav:has(.nav-btn.active[data-view="amministrazione"])  .nav-ind{--ind-color:#f56565}
.nav:has(.nav-btn.active[data-view="calcolatore-rental"]).nav-ind{--ind-color:#f6ad55}
.nav:has(.nav-btn.active[data-view="team"])             .nav-ind{--ind-color:#ec4899}
.nav:has(.nav-btn.active[data-view="spedizioni"])       .nav-ind{--ind-color:#22c55e}
.nav:has(.nav-btn.active[data-view="home"])            .nav-ind{--ind-color:#fb923c}
.nav:has(.nav-btn.active[data-view="mioaccount"])       .nav-ind{--ind-color:#818cf8}
.nav-btn.active{background:transparent;border-color:transparent;color:#fff;font-weight:500}.nav-btn.active[data-view="dashboard"]{background:rgba(79,124,255,0.14);border-color:rgba(79,124,255,0.55);color:#a5b4fc}.nav-btn.active[data-view="inserimento"]{background:rgba(62,207,142,0.14);border-color:rgba(62,207,142,0.55);color:#6ee7b7}.nav-btn.active[data-view="proiezione"]{background:rgba(246,173,85,0.14);border-color:rgba(246,173,85,0.55);color:#fcd34d}.nav-btn.active[data-view="onboarding"]{background:rgba(56,189,248,0.14);border-color:rgba(56,189,248,0.55);color:#7dd3fc}.nav-btn.active[data-view="turni"]{background:rgba(167,139,250,0.14);border-color:rgba(167,139,250,0.55);color:#c4b5fd}.nav-btn.active[data-view="ferie"]{background:rgba(52,211,153,0.14);border-color:rgba(52,211,153,0.55);color:#6ee7b7}.nav-btn.active[data-view="premi"]{background:rgba(251,191,36,0.14);border-color:rgba(251,191,36,0.55);color:#fcd34d}.nav-btn.active[data-view="downloads"]{background:rgba(100,116,139,0.14);border-color:rgba(100,116,139,0.55);color:#94a3b8}.nav-btn.active[data-view="operatori"]{background:rgba(124,92,255,0.14);border-color:rgba(124,92,255,0.55);color:#c4b5fd}.nav-btn.active[data-view="amministrazione"]{background:rgba(245,101,101,0.14);border-color:rgba(245,101,101,0.55);color:#fca5a5}.nav-btn.active[data-view="calcolatore-rental"]{background:rgba(246,173,85,0.14);border-color:rgba(246,173,85,0.55);color:#fcd34d}.nav-btn.active[data-view="team"]{background:rgba(236,72,153,0.14);border-color:rgba(236,72,153,0.55);color:#f9a8d4}.nav-btn.active[data-view="spedizioni"]{background:rgba(34,197,94,0.14);border-color:rgba(34,197,94,0.55);color:#bbf7d0}.nav-btn.active[data-view="home"]{background:rgba(251,146,60,0.14);border-color:rgba(251,146,60,0.55);color:#fdba74}.nav-btn.active[data-view="mioaccount"]{background:rgba(129,140,248,0.14);border-color:rgba(129,140,248,0.55);color:#a5b4fc}

/* ── Icone colorate sidebar (desktop only) — nav-btn NON attivi ──────── */
@media(min-width:1024px){
  .nav .nav-btn[data-view="home"]           svg { color:#fb923c; opacity:.65 }
  .nav .nav-btn[data-view="dashboard"]      svg { color:#4f7cff; opacity:.65 }
  .nav .nav-btn[data-view="proiezione"]     svg { color:#f6ad55; opacity:.65 }
  .nav .nav-btn[data-view="onboarding"]     svg { color:#38bdf8; opacity:.65 }
  .nav .nav-btn[data-view="spedizioni"]     svg { color:#22c55e; opacity:.65 }
  .nav .nav-btn[data-view="turni"]          svg { color:#a78bfa; opacity:.65 }
  .nav .nav-btn[data-view="ferie"]          svg { color:#34d399; opacity:.65 }
  .nav .nav-btn[data-view="team"]           svg { color:#ec4899; opacity:.65 }
  .nav .nav-btn[data-view="premi"]          svg { color:#fbbf24; opacity:.65 }
  .nav .nav-btn[data-view="downloads"]      svg { color:#94a3b8; opacity:.65 }
  .nav .nav-btn[data-view="amministrazione"]svg { color:#f56565; opacity:.65 }
  .nav .nav-btn[data-view="calcolatore-rental"]svg{color:#f6ad55;opacity:.65}
  .nav .nav-btn[data-view="mioaccount"]     svg { color:#818cf8; opacity:.65 }
  /* Attivo: opacity piena, colore già gestito dal sistema esistente */
  .nav .nav-btn.active svg { opacity:1 }
}

/* ── Badge numerici nav sidebar ────────────────────────────────────────── */
.nav-num-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  font-size:10px;
  font-weight:700;
  font-family:var(--mono);
  line-height:1;
  margin-left:auto;
  flex-shrink:0;
  transition:opacity .2s,transform .2s;
  letter-spacing:-.01em;
}
.nav-num-badge[data-v="dashboard"]{background:rgba(79,124,255,0.18);color:#7aa4ff;border:1px solid rgba(79,124,255,0.3)}
.nav-num-badge[data-v="proiezione"]{background:rgba(155,124,255,0.18);color:#b89dff;border:1px solid rgba(155,124,255,0.3)}
.nav-num-badge[data-v="onboarding"]{background:rgba(56,189,248,0.18);color:#6dd3fc;border:1px solid rgba(56,189,248,0.3)}
.nav-num-badge[data-v="spedizioni"]{background:rgba(34,197,94,0.18);color:#4ade80;border:1px solid rgba(34,197,94,0.3)}
.nav-num-badge[data-v="ferie"]{background:rgba(251,146,60,0.18);color:#fb923c;border:1px solid rgba(251,146,60,0.3)}
.nav-num-badge[data-v="team"]{background:rgba(148,163,184,0.18);color:#94a3b8;border:1px solid rgba(148,163,184,0.3)}
.nav-num-badge[data-v="premi"]{background:rgba(250,204,21,0.18);color:#facc15;border:1px solid rgba(250,204,21,0.3)}
.nav-num-badge[data-v="amministrazione"]{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.28);font-size:9px;letter-spacing:-.02em}
.nav-num-badge[hidden]{display:none!important}

/* Nav button tron glow keyframes (compact, for small buttons) */
@keyframes navTronIndigo{0%{box-shadow:0 0 0 1px rgba(79,124,255,0.8),0 0 10px 3px rgba(79,124,255,0.45),0 0 28px 7px rgba(79,124,255,0.18)}50%{box-shadow:0 0 0 1.5px rgba(79,124,255,1),0 0 16px 6px rgba(79,124,255,0.65),0 0 42px 13px rgba(79,124,255,0.28)}100%{box-shadow:0 0 0 1px rgba(79,124,255,0.8),0 0 10px 3px rgba(79,124,255,0.45),0 0 28px 7px rgba(79,124,255,0.18)}}
@keyframes navTronEmerald{0%{box-shadow:0 0 0 1px rgba(62,207,142,0.8),0 0 10px 3px rgba(62,207,142,0.45),0 0 28px 7px rgba(62,207,142,0.18)}50%{box-shadow:0 0 0 1.5px rgba(62,207,142,1),0 0 16px 6px rgba(62,207,142,0.65),0 0 42px 13px rgba(62,207,142,0.28)}100%{box-shadow:0 0 0 1px rgba(62,207,142,0.8),0 0 10px 3px rgba(62,207,142,0.45),0 0 28px 7px rgba(62,207,142,0.18)}}
@keyframes navTronAmber{0%{box-shadow:0 0 0 1px rgba(246,173,85,0.8),0 0 10px 3px rgba(246,173,85,0.45),0 0 28px 7px rgba(246,173,85,0.18)}50%{box-shadow:0 0 0 1.5px rgba(246,173,85,1),0 0 16px 6px rgba(246,173,85,0.65),0 0 42px 13px rgba(246,173,85,0.28)}100%{box-shadow:0 0 0 1px rgba(246,173,85,0.8),0 0 10px 3px rgba(246,173,85,0.45),0 0 28px 7px rgba(246,173,85,0.18)}}
@keyframes navTronBlue{0%{box-shadow:0 0 0 1px rgba(56,189,248,0.8),0 0 10px 3px rgba(56,189,248,0.45),0 0 28px 7px rgba(56,189,248,0.18)}50%{box-shadow:0 0 0 1.5px rgba(56,189,248,1),0 0 16px 6px rgba(56,189,248,0.65),0 0 42px 13px rgba(56,189,248,0.28)}100%{box-shadow:0 0 0 1px rgba(56,189,248,0.8),0 0 10px 3px rgba(56,189,248,0.45),0 0 28px 7px rgba(56,189,248,0.18)}}
@keyframes navTronPurple{0%{box-shadow:0 0 0 1px rgba(167,139,250,0.8),0 0 10px 3px rgba(167,139,250,0.45),0 0 28px 7px rgba(167,139,250,0.18)}50%{box-shadow:0 0 0 1.5px rgba(167,139,250,1),0 0 16px 6px rgba(167,139,250,0.65),0 0 42px 13px rgba(167,139,250,0.28)}100%{box-shadow:0 0 0 1px rgba(167,139,250,0.8),0 0 10px 3px rgba(167,139,250,0.45),0 0 28px 7px rgba(167,139,250,0.18)}}
@keyframes navTronTeal{0%{box-shadow:0 0 0 1px rgba(52,211,153,0.8),0 0 10px 3px rgba(52,211,153,0.45),0 0 28px 7px rgba(52,211,153,0.18)}50%{box-shadow:0 0 0 1.5px rgba(52,211,153,1),0 0 16px 6px rgba(52,211,153,0.65),0 0 42px 13px rgba(52,211,153,0.28)}100%{box-shadow:0 0 0 1px rgba(52,211,153,0.8),0 0 10px 3px rgba(52,211,153,0.45),0 0 28px 7px rgba(52,211,153,0.18)}}
@keyframes navTronYellow{0%{box-shadow:0 0 0 1px rgba(251,191,36,0.8),0 0 10px 3px rgba(251,191,36,0.45),0 0 28px 7px rgba(251,191,36,0.18)}50%{box-shadow:0 0 0 1.5px rgba(251,191,36,1),0 0 16px 6px rgba(251,191,36,0.65),0 0 42px 13px rgba(251,191,36,0.28)}100%{box-shadow:0 0 0 1px rgba(251,191,36,0.8),0 0 10px 3px rgba(251,191,36,0.45),0 0 28px 7px rgba(251,191,36,0.18)}}
@keyframes navTronSlate{0%{box-shadow:0 0 0 1px rgba(100,116,139,0.8),0 0 10px 3px rgba(100,116,139,0.45),0 0 28px 7px rgba(100,116,139,0.18)}50%{box-shadow:0 0 0 1.5px rgba(100,116,139,1),0 0 16px 6px rgba(100,116,139,0.65),0 0 42px 13px rgba(100,116,139,0.28)}100%{box-shadow:0 0 0 1px rgba(100,116,139,0.8),0 0 10px 3px rgba(100,116,139,0.45),0 0 28px 7px rgba(100,116,139,0.18)}}
@keyframes navTronViolet{0%{box-shadow:0 0 0 1px rgba(124,92,255,0.8),0 0 10px 3px rgba(124,92,255,0.45),0 0 28px 7px rgba(124,92,255,0.18)}50%{box-shadow:0 0 0 1.5px rgba(124,92,255,1),0 0 16px 6px rgba(124,92,255,0.65),0 0 42px 13px rgba(124,92,255,0.28)}100%{box-shadow:0 0 0 1px rgba(124,92,255,0.8),0 0 10px 3px rgba(124,92,255,0.45),0 0 28px 7px rgba(124,92,255,0.18)}}
@keyframes navTronRed{0%{box-shadow:0 0 0 1px rgba(245,101,101,0.8),0 0 10px 3px rgba(245,101,101,0.45),0 0 28px 7px rgba(245,101,101,0.18)}50%{box-shadow:0 0 0 1.5px rgba(245,101,101,1),0 0 16px 6px rgba(245,101,101,0.65),0 0 42px 13px rgba(245,101,101,0.28)}100%{box-shadow:0 0 0 1px rgba(245,101,101,0.8),0 0 10px 3px rgba(245,101,101,0.45),0 0 28px 7px rgba(245,101,101,0.18)}}
@keyframes navTronPink{0%{box-shadow:0 0 0 1px rgba(236,72,153,0.8),0 0 10px 3px rgba(236,72,153,0.45),0 0 28px 7px rgba(236,72,153,0.18)}50%{box-shadow:0 0 0 1.5px rgba(236,72,153,1),0 0 16px 6px rgba(236,72,153,0.65),0 0 42px 13px rgba(236,72,153,0.28)}100%{box-shadow:0 0 0 1px rgba(236,72,153,0.8),0 0 10px 3px rgba(236,72,153,0.45),0 0 28px 7px rgba(236,72,153,0.18)}}
@keyframes navTronForest{0%{box-shadow:0 0 0 1px rgba(34,197,94,0.7),0 0 10px 3px rgba(34,197,94,0.4),0 0 28px 7px rgba(34,197,94,0.15)}50%{box-shadow:0 0 0 1.5px rgba(34,197,94,0.95),0 0 16px 6px rgba(34,197,94,0.58),0 0 42px 13px rgba(34,197,94,0.24)}100%{box-shadow:0 0 0 1px rgba(34,197,94,0.7),0 0 10px 3px rgba(34,197,94,0.4),0 0 28px 7px rgba(34,197,94,0.15)}}
@keyframes navTronOrange{0%{box-shadow:0 0 0 1px rgba(251,146,60,0.8),0 0 10px 3px rgba(251,146,60,0.45),0 0 28px 7px rgba(251,146,60,0.18)}50%{box-shadow:0 0 0 1.5px rgba(251,146,60,1),0 0 16px 6px rgba(251,146,60,0.65),0 0 42px 13px rgba(251,146,60,0.28)}100%{box-shadow:0 0 0 1px rgba(251,146,60,0.8),0 0 10px 3px rgba(251,146,60,0.45),0 0 28px 7px rgba(251,146,60,0.18)}}
@keyframes navTronLavender{0%{box-shadow:0 0 0 1px rgba(129,140,248,0.8),0 0 10px 3px rgba(129,140,248,0.45),0 0 28px 7px rgba(129,140,248,0.18)}50%{box-shadow:0 0 0 1.5px rgba(129,140,248,1),0 0 16px 6px rgba(129,140,248,0.65),0 0 42px 13px rgba(129,140,248,0.28)}100%{box-shadow:0 0 0 1px rgba(129,140,248,0.8),0 0 10px 3px rgba(129,140,248,0.45),0 0 28px 7px rgba(129,140,248,0.18)}}

/* Nav button active tron glow */
.nav-btn.active[data-view="dashboard"]{animation:navTronIndigo 2.4s ease-in-out infinite}
.nav-btn.active[data-view="inserimento"]{animation:navTronEmerald 2.4s ease-in-out infinite}
.nav-btn.active[data-view="proiezione"]{animation:navTronAmber 2.4s ease-in-out infinite}
.nav-btn.active[data-view="onboarding"]{animation:navTronBlue 2.4s ease-in-out infinite}
.nav-btn.active[data-view="turni"]{animation:navTronPurple 2.4s ease-in-out infinite}
.nav-btn.active[data-view="ferie"]{animation:navTronTeal 2.4s ease-in-out infinite}
.nav-btn.active[data-view="premi"]{animation:navTronYellow 2.4s ease-in-out infinite}
.nav-btn.active[data-view="downloads"]{animation:navTronSlate 2.4s ease-in-out infinite}
.nav-btn.active[data-view="operatori"]{animation:navTronViolet 2.4s ease-in-out infinite}
.nav-btn.active[data-view="amministrazione"]{animation:navTronRed 2.4s ease-in-out infinite}
.nav-btn.active[data-view="calcolatore-rental"]{animation:navTronAmber 2.4s ease-in-out infinite}
.nav-btn.active[data-view="team"]{animation:navTronPink 2.4s ease-in-out infinite}
.nav-btn.active[data-view="spedizioni"]{animation:navTronForest 2.4s ease-in-out infinite}
.nav-btn.active[data-view="home"]{animation:navTronOrange 2.4s ease-in-out infinite}
.nav-btn.active[data-view="mioaccount"]{animation:navTronLavender 2.4s ease-in-out infinite}
.main{padding:20px;max-width:1100px;margin:0 auto;width:100%;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(48px,calc(env(safe-area-inset-bottom) + 48px))}
/* ══════════════════════════════════════════════════════════════════════
   CARD BASE UNIFICATA — classe .card usabile autonomamente o come base
   Tutte le card specifiche (.stat-card, .cat-card, .panel, .premio-card,
   .lead-card) condividono visivamente lo stesso sistema glassmorphism
   definito nelle variabili :root (--card-bg, --card-border, ecc.)
   ══════════════════════════════════════════════════════════════════════ */
.card{
  background:var(--card-bg);
  backdrop-filter:blur(24px) saturate(1.7) brightness(1.03);
  -webkit-backdrop-filter:blur(24px) saturate(1.7) brightness(1.03);
  border:1px solid var(--card-border);
  border-top-color:var(--card-border-top);
  border-bottom-color:var(--card-border-bottom);
  border-left-color:rgba(255,255,255,0.12);
  border-right-color:rgba(255,255,255,0.06);
  border-radius:var(--r);
  padding:var(--sp-5);
  position:relative;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),border-color .22s,box-shadow .22s;
}
/* Highlight superiore (effetto vetro) */
.card::before{
  content:'';
  position:absolute;left:0;right:0;top:0;height:52%;
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.06) 55%,rgba(255,255,255,0.00) 100%);
  pointer-events:none;z-index:0;
}
/* Reflection inferiore */
.card::after{
  content:'';
  position:absolute;left:6%;right:44%;bottom:0;height:24%;
  border-radius:50%;
  background:radial-gradient(ellipse at 30% 100%,rgba(255,255,255,0.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.card>*{position:relative;z-index:1}
.card:hover{
  transform:translateY(-3px) scale(1.010);
  border-color:rgba(79,124,255,.5);
  border-top-color:rgba(79,124,255,.38);
  box-shadow:0 14px 42px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.38),0 0 0 1px rgba(79,124,255,.15),inset 0 2.5px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.28);
}
/* Varianti di padding per la .card */
.card-sm{padding:var(--sp-3) var(--sp-4)}
.card-lg{padding:var(--sp-6) var(--sp-7)}
/* Card senza hover (per contenitori statici) */
.card-static{transition:none}
.card-static:hover{transform:none;border-color:var(--card-border);box-shadow:var(--card-shadow)}
/* Card con accent border-left colorato (stile KPI) */
.card-accent-left{border-left-width:3px}

/* ── LIGHT THEME: card base ──────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATE UNIFICATO
   Uso: <div class="empty-state">
          <div class="empty-icon">⬡</div>   ← opzionale, sostituisce SVG
          <div class="empty-state-title">Nessun dato</div>
          <div class="empty-state-hint">I record appariranno qui.</div>
          <button class="btn btn-primary btn-sm">Aggiungi</button>  ← opzionale
        </div>
   ══════════════════════════════════════════════════════════════════════ */
/* .empty già esiste — la lasciamo intatta; aggiungiamo/potenziamo .empty-state */
/* ── EMPTY STATE POTENZIATO ──────────────────────────────────────────── */

/* Sostituiamo completamente .empty-state con versione migliorata */

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.stat-card{background:linear-gradient(160deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 40%,rgba(8,15,40,0.08) 100%);backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);-webkit-backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);border:1px solid rgba(255,255,255,0.18);border-top-color:rgba(255,255,255,0.45);border-bottom-color:rgba(255,255,255,0.05);border-left-color:rgba(255,255,255,0.14);border-right-color:rgba(255,255,255,0.07);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.34,1.4,.64,1),border-color .22s,box-shadow .22s;box-shadow:0 10px 40px rgba(0,0,0,0.60),0 2px 8px rgba(0,0,0,0.40),inset 0 3px 0 rgba(255,255,255,0.28),inset 0 -1px 0 rgba(0,0,0,0.32),inset 1px 0 0 rgba(255,255,255,0.10),inset -1px 0 0 rgba(255,255,255,0.05)}.stat-card::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,0.26) 0%,rgba(255,255,255,0.07) 55%,rgba(255,255,255,0.00) 100%);pointer-events:none;z-index:0}.stat-card::after{content:'';position:absolute;left:6%;right:44%;bottom:0;height:26%;border-radius:50%;background:radial-gradient(ellipse at 30% 100%,rgba(255,255,255,0.07) 0%,transparent 70%);pointer-events:none;z-index:0}.stat-card>*{position:relative;z-index:1}
.stat-card:hover{transform:translateY(-4px) scale(1.013);border-color:rgba(79,124,255,.55);border-top-color:rgba(79,124,255,.40);box-shadow:0 18px 48px rgba(0,0,0,.60),0 4px 12px rgba(0,0,0,.40),0 0 0 1px rgba(79,124,255,.18),inset 0 3px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.30)}
.stat-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.stat-val{font-size:27px;font-weight:600;line-height:1}
.stat-sub{font-size:12px;color:var(--text3);margin-top:4px}
/* ── Tabular nums: colonne numeriche non ballano al cambio di cifre ─── */
/* font-variant-numeric:tabular-nums è già ereditato da html,body;       */
/* qui aggiungiamo gli OpenType extras per i contesti a display grande.  */
.stat-val,.countup-val,.premio-att,.lead-card-val{font-feature-settings:"tnum" 1,"ss01" 1}
[class*="mono"],[style*="font-family:var(--mono)"]{font-feature-settings:"tnum" 1}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5)}
.cat-card{background:linear-gradient(160deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 40%,var(--bg2) 100%);backdrop-filter:blur(var(--l2-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--l2-blur)) saturate(1.4);border:1px solid var(--l2-border);border-top-color:var(--l2-border-top);border-bottom-color:rgba(255,255,255,0.03);border-left-color:rgba(255,255,255,0.07);border-right-color:rgba(255,255,255,0.04);border-radius:var(--r);padding:10px 14px;position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.34,1.4,.64,1),border-color .22s,box-shadow .22s;box-shadow:var(--l2-shadow)}.cat-card::before{content:'';position:absolute;left:0;right:0;top:0;height:40%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.02) 55%,rgba(255,255,255,0.00) 100%);pointer-events:none;z-index:0}.cat-card::after{content:'';position:absolute;left:6%;right:44%;bottom:0;height:16%;border-radius:50%;background:radial-gradient(ellipse at 30% 100%,rgba(255,255,255,0.03) 0%,transparent 70%);pointer-events:none;z-index:0}.cat-card>*{position:relative;z-index:1}
.cat-card:hover{transform:translateY(-2px) scale(1.005);border-color:rgba(124,92,255,.28);border-top-color:rgba(124,92,255,.20);box-shadow:0 6px 20px rgba(0,0,0,.40),0 1px 4px rgba(0,0,0,.28),0 0 0 1px rgba(124,92,255,.10),inset 0 1px 0 rgba(255,255,255,.12)}
.cat-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cat-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cat-name{font-size:14px;font-weight:600}
.cat-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px}
.cat-row+.cat-row{border-top:1px solid var(--border)}
.cat-op-rows{border-top:2px solid var(--border)}
.cat-op-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px}
.cat-op-row+.cat-op-row{border-top:1px solid var(--border)}
@media(max-width:600px){.cat-grid{grid-template-columns:1fr}}
.panel{background:linear-gradient(160deg,rgba(255,255,255,0.06) 0%,rgba(8,15,40,0.08) 100%);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(120,160,255,0.15);border-top-color:rgba(180,210,255,0.22);border-radius:var(--r);padding:var(--sp-5);margin-bottom:var(--sp-4);transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.07)}
.panel:hover{border-color:rgba(79,124,255,.2);box-shadow:0 4px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
.panel-title{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.tab{padding:7px 16px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;position:relative}
.tab:hover{background:var(--bg3);color:var(--text)}
/* ── TAB SLIDER INDICATOR ─────────────────────────────────────────────────────── */
.tab::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:currentColor;border-radius:2px;transform:translateX(-50%);transition:width .28s cubic-bezier(.4,0,.2,1);opacity:.85}
.tab.active::after{width:65%}
@keyframes tabActivate{from{opacity:.5;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.tab.active{animation:tabActivate .22s cubic-bezier(.34,1.4,.64,1)}
.tab.active{border-color:transparent;color:#fff}
.tab-ordine.active{background:var(--accent)}
.tab-annullato.active{background:var(--red)}
.tab-attivazione.active{background:var(--green);color:#0f1117}
.tab-leads.active{background:var(--teal);color:#0f1117}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--text3);font-weight:500;text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--border);color:var(--text)}
td.td-muted{color:var(--text3);font-size:11px}
td.td-code{font-family:var(--mono);font-size:11px;color:var(--text2)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}
tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap;letter-spacing:.03em;border:1px solid transparent}
/* ── det-table redesign frozen-glass ────────────────────────── */
.det-table-wrap{
  border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,rgba(14,26,55,0.92) 0%,rgba(8,13,30,0.96) 40%,rgba(10,18,40,0.94) 100%);
  box-shadow:0 24px 64px rgba(0,0,0,0.80),0 6px 18px rgba(0,0,0,0.55),
             0 1px 0 rgba(120,160,255,0.22) inset,0 -1px 0 rgba(0,0,0,0.50) inset,
             1px 0 0 rgba(80,120,255,0.10) inset,-1px 0 0 rgba(80,120,255,0.06) inset;
  border:1px solid rgba(80,130,255,0.18);border-top-color:rgba(140,180,255,0.35)}
/* noise/frost overlay */
.det-table-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,0.012) 0px,rgba(255,255,255,0.012) 1px,transparent 1px,transparent 3px),
             repeating-linear-gradient(90deg,rgba(255,255,255,0.008) 0px,rgba(255,255,255,0.008) 1px,transparent 1px,transparent 3px);
  border-radius:16px}
.det-table{width:100%;table-layout:auto;border-collapse:collapse;position:relative;z-index:1}
.det-table th,.det-table td{
  border-right:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:center;padding:6px 5px;font-size:12px;white-space:nowrap;vertical-align:middle}
.det-table th:last-child,.det-table td:last-child{border-right:none}
/* sub-header */
.det-table th{
  font-size:10px;padding:5px 5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;border-bottom:1px solid rgba(255,255,255,0.12);
  color:rgba(200,215,255,0.75);text-shadow:0 0 8px rgba(100,150,255,0.35),0 1px 3px rgba(0,0,0,0.7);
  background:linear-gradient(180deg,rgba(255,255,255,0.10) 0%,rgba(60,90,180,0.06) 100%)}
.det-table th:first-child,.det-table td:first-child{text-align:left;padding-left:10px}
.det-table th:last-child,.det-table td:last-child{padding-right:8px}
/* tbody */
.det-table tbody tr{transition:background .15s,box-shadow .15s}
.det-table tbody td{background:transparent}
.det-table tbody tr:nth-child(even) td{background:rgba(60,100,255,0.04)}
.det-table tbody tr:hover td{
  background:rgba(79,124,255,0.09)!important;
  box-shadow:inset 0 1px 0 rgba(120,160,255,0.12),inset 0 -1px 0 rgba(0,0,0,0.14)}
.det-table tbody tr:last-child td{border-bottom:none}
.det-table td:first-child span{gap:7px!important}
.det-table .badge{font-size:11px;padding:3px 8px}
.det-col-sep td,.det-col-sep th{border-left:2px solid rgba(255,255,255,0.1)!important}
.det-op-name{font-weight:700;color:var(--accent);font-size:13px;letter-spacing:.01em;transition:color .15s,text-shadow .15s}
.det-op-name:hover{color:#fff;text-shadow:0 0 12px rgba(99,179,237,0.8)}
/* group header row — ogni gruppo col proprio colore saturato */
.det-grp-header th{
  font-size:9px!important;padding:5px 5px!important;letter-spacing:.12em!important;
  font-weight:800!important;text-transform:uppercase!important;
  border-bottom:1px solid rgba(255,255,255,0.16)!important;
  border-right:1px solid rgba(255,255,255,0.08)!important;
  text-shadow:0 0 12px currentColor,0 1px 4px rgba(0,0,0,0.8)!important}
.det-grp-header .dgh-op{background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 100%)!important;color:rgba(180,195,230,0.5)!important;border-left:3px solid transparent!important}
.det-grp-header .dgh-ordini{color:#4f7cff!important;background:linear-gradient(180deg,rgba(79,124,255,0.32) 0%,rgba(79,124,255,0.12) 100%)!important;box-shadow:0 0 20px rgba(79,124,255,0.22) inset!important}
.det-grp-header .dgh-leads{color:#38bdf8!important;background:linear-gradient(180deg,rgba(56,189,248,0.28) 0%,rgba(56,189,248,0.10) 100%)!important;box-shadow:0 0 18px rgba(56,189,248,0.20) inset!important}
.det-grp-header .dgh-ann{color:#f56565!important;background:linear-gradient(180deg,rgba(239,68,68,0.28) 0%,rgba(239,68,68,0.10) 100%)!important;box-shadow:0 0 18px rgba(239,68,68,0.18) inset!important}
.det-grp-header .dgh-perf{color:#9b7cff!important;background:linear-gradient(180deg,rgba(155,124,255,0.30) 0%,rgba(155,124,255,0.11) 100%)!important;box-shadow:0 0 20px rgba(155,124,255,0.20) inset!important}
.det-grp-sep{border-left:2px solid rgba(255,255,255,0.22)!important}
/* perf bar cell */
.det-perf-cell{position:relative;overflow:hidden}
.det-perf-bar{position:absolute;left:0;top:0;bottom:0;z-index:0;opacity:.16;pointer-events:none;transition:width .4s ease}
.det-perf-cell .badge{position:relative;z-index:1}
/* premio glow */
.b-gold{background:linear-gradient(135deg,#3d2c00,#2a1e00);color:#fbbf24;border-color:rgba(251,191,36,0.35);box-shadow:0 0 10px rgba(251,191,36,0.22),0 0 2px rgba(251,191,36,0.5) inset}
/* badge upgrades */
.b-green{background:linear-gradient(135deg,#0b2e1d,#0d3a23);color:#3ecf8e;border-color:rgba(62,207,142,0.30);box-shadow:0 0 8px rgba(62,207,142,0.20),0 0 2px rgba(62,207,142,0.40) inset}
.b-red{background:linear-gradient(135deg,#2e0b0b,#3a0d0d);color:#f56565;border-color:rgba(245,101,101,0.30);box-shadow:0 0 8px rgba(245,101,101,0.18),0 0 2px rgba(245,101,101,0.35) inset}
.b-amber{background:linear-gradient(135deg,#2e1c00,#3a2400);color:#f6ad55;border-color:rgba(246,173,85,0.30);box-shadow:0 0 8px rgba(246,173,85,0.18),0 0 2px rgba(246,173,85,0.35) inset}
.b-blue{background:linear-gradient(135deg,#0d1e3d,#0f264d);color:#4f7cff;border-color:rgba(79,124,255,0.30);box-shadow:0 0 7px rgba(79,124,255,0.18) inset}
.b-purple{background:linear-gradient(135deg,#16103d,#1c144d);color:#9b7cff;border-color:rgba(155,124,255,0.30);box-shadow:0 0 7px rgba(155,124,255,0.18) inset}
.b-teal{background:linear-gradient(135deg,#093040,#0c3d50);color:#38bdf8;border-color:rgba(56,189,248,0.30);box-shadow:0 0 8px rgba(56,189,248,0.20),0 0 2px rgba(56,189,248,0.40) inset}
.b-mypos{background:linear-gradient(135deg,#0d1e3d,#0f264d);color:#4f7cff;border-color:rgba(79,124,255,0.22)}
.b-wamo{background:linear-gradient(135deg,#1a103d,#22144d);color:#7c5cff;border-color:rgba(124,92,255,0.22)}
.b-rental{background:#3d2e1a;color:#f6ad55}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.form-group{display:flex;flex-direction:column;gap:5px}
label{font-size:12px;color:var(--text2);font-weight:500}
input,select{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border .15s;width:100%}
input:focus,select:focus{
  border-color:var(--accent);
  box-shadow:
    0 0 0 3px rgba(79,124,255,.16),
    0 0 16px -4px rgba(79,124,255,.45);
  animation:focusIn .42s cubic-bezier(.34,1.3,.64,1);
}
@keyframes focusIn{
  0%  {box-shadow:0 0 0 0 rgba(79,124,255,0),0 0 0 0 rgba(79,124,255,0)}
  45% {box-shadow:0 0 0 7px rgba(79,124,255,.22),0 0 26px -4px rgba(79,124,255,.6)}
  100%{box-shadow:0 0 0 3px rgba(79,124,255,.16),0 0 16px -4px rgba(79,124,255,.45)}
}
select option{background:var(--bg3)}
.btn{padding:9px 18px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.ferie-hdr-btns .btn{font-size:13px;padding:7px 13px}
.ferie-action-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#3a6ae8;transform:translateY(-1px)}
.btn-secondary{background:var(--accent2);color:#fff}.btn-secondary:hover{background:#6a4ce8}
.btn-green{background:var(--green);color:#0f1117}.btn-green:hover{background:#2db87a;transform:translateY(-1px)}
.btn-glass-green{background:linear-gradient(160deg,rgba(74,222,128,0.18) 0%,rgba(74,222,128,0.10) 45%,rgba(74,222,128,0.14) 100%);color:#4ade80;border:1px solid rgba(74,222,128,0.22)!important;border-top-color:rgba(74,222,128,0.35)!important;border-bottom-color:rgba(74,222,128,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(74,222,128,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-green:hover{background:linear-gradient(160deg,rgba(74,222,128,0.42) 0%,rgba(74,222,128,0.28) 45%,rgba(74,222,128,0.36) 100%)!important;border-color:rgba(74,222,128,0.55)!important;border-top-color:rgba(74,222,128,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(74,222,128,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(74,222,128,0.28)!important;transform:translateY(-1px)}
.btn-glass-green:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-blue{background:linear-gradient(160deg,rgba(56,189,248,0.18) 0%,rgba(56,189,248,0.10) 45%,rgba(56,189,248,0.14) 100%);color:#38bdf8;border:1px solid rgba(56,189,248,0.22)!important;border-top-color:rgba(56,189,248,0.35)!important;border-bottom-color:rgba(56,189,248,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(56,189,248,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-blue:hover{background:linear-gradient(160deg,rgba(56,189,248,0.42) 0%,rgba(56,189,248,0.28) 45%,rgba(56,189,248,0.36) 100%)!important;border-color:rgba(56,189,248,0.55)!important;border-top-color:rgba(56,189,248,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(56,189,248,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(56,189,248,0.28)!important;transform:translateY(-1px)}
.btn-glass-blue:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-violet{background:linear-gradient(160deg,rgba(155,124,255,0.18) 0%,rgba(155,124,255,0.10) 45%,rgba(155,124,255,0.14) 100%);color:#9b7cff;border:1px solid rgba(155,124,255,0.22)!important;border-top-color:rgba(155,124,255,0.35)!important;border-bottom-color:rgba(155,124,255,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(155,124,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-violet:hover{background:linear-gradient(160deg,rgba(155,124,255,0.42) 0%,rgba(155,124,255,0.28) 45%,rgba(155,124,255,0.36) 100%)!important;border-color:rgba(155,124,255,0.55)!important;border-top-color:rgba(155,124,255,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(155,124,255,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(155,124,255,0.28)!important;transform:translateY(-1px)}
.btn-glass-violet:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-pink{background:linear-gradient(160deg,rgba(232,121,249,0.18) 0%,rgba(232,121,249,0.10) 45%,rgba(232,121,249,0.14) 100%);color:#e879f9;border:1px solid rgba(232,121,249,0.22)!important;border-top-color:rgba(232,121,249,0.35)!important;border-bottom-color:rgba(232,121,249,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(232,121,249,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-pink:hover{background:linear-gradient(160deg,rgba(232,121,249,0.42) 0%,rgba(232,121,249,0.28) 45%,rgba(232,121,249,0.36) 100%)!important;border-color:rgba(232,121,249,0.55)!important;border-top-color:rgba(232,121,249,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(232,121,249,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(232,121,249,0.28)!important;transform:translateY(-1px)}
.btn-glass-pink:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-emerald{background:linear-gradient(160deg,rgba(74,222,128,0.18) 0%,rgba(74,222,128,0.10) 45%,rgba(74,222,128,0.14) 100%);color:#4ade80;border:1px solid rgba(74,222,128,0.22)!important;border-top-color:rgba(74,222,128,0.35)!important;border-bottom-color:rgba(74,222,128,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(74,222,128,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-emerald:hover{background:linear-gradient(160deg,rgba(74,222,128,0.42) 0%,rgba(74,222,128,0.28) 45%,rgba(74,222,128,0.36) 100%)!important;border-color:rgba(74,222,128,0.55)!important;border-top-color:rgba(74,222,128,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(74,222,128,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(74,222,128,0.28)!important;transform:translateY(-1px)}
.btn-glass-emerald:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-amber{background:linear-gradient(160deg,rgba(246,173,85,0.18) 0%,rgba(246,173,85,0.10) 45%,rgba(246,173,85,0.14) 100%);color:#f6ad55;border:1px solid rgba(246,173,85,0.22)!important;border-top-color:rgba(246,173,85,0.35)!important;border-bottom-color:rgba(246,173,85,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(246,173,85,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-amber:hover{background:linear-gradient(160deg,rgba(246,173,85,0.42) 0%,rgba(246,173,85,0.28) 45%,rgba(246,173,85,0.36) 100%)!important;border-color:rgba(246,173,85,0.55)!important;border-top-color:rgba(246,173,85,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(246,173,85,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(246,173,85,0.28)!important;transform:translateY(-1px)}
.btn-glass-amber:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-red{background:linear-gradient(160deg,rgba(245,101,101,0.18) 0%,rgba(245,101,101,0.10) 45%,rgba(245,101,101,0.14) 100%);color:#f56565;border:1px solid rgba(245,101,101,0.22)!important;border-top-color:rgba(245,101,101,0.35)!important;border-bottom-color:rgba(245,101,101,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(245,101,101,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-red:hover{background:linear-gradient(160deg,rgba(245,101,101,0.42) 0%,rgba(245,101,101,0.28) 45%,rgba(245,101,101,0.36) 100%)!important;border-color:rgba(245,101,101,0.55)!important;border-top-color:rgba(245,101,101,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(245,101,101,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(245,101,101,0.28)!important;transform:translateY(-1px)}
.btn-glass-red:active{filter:brightness(.78);transform:translateY(0)}
.btn-glass-cyan{background:linear-gradient(160deg,rgba(99,179,237,0.18) 0%,rgba(99,179,237,0.10) 45%,rgba(99,179,237,0.14) 100%);color:#63b3ed;border:1px solid rgba(99,179,237,0.22)!important;border-top-color:rgba(99,179,237,0.35)!important;border-bottom-color:rgba(99,179,237,0.10)!important;backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);box-shadow:0 8px 28px rgba(0,0,0,0.50),inset 0 2px 0 rgba(99,179,237,0.22),inset 0 -1px 0 rgba(0,0,0,0.28);font-weight:600;letter-spacing:.01em;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-glass-cyan:hover{background:linear-gradient(160deg,rgba(99,179,237,0.42) 0%,rgba(99,179,237,0.28) 45%,rgba(99,179,237,0.36) 100%)!important;border-color:rgba(99,179,237,0.55)!important;border-top-color:rgba(99,179,237,0.75)!important;box-shadow:0 10px 36px rgba(0,0,0,0.60),inset 0 2px 0 rgba(99,179,237,0.40),inset 0 -1px 0 rgba(0,0,0,0.28),0 0 18px rgba(99,179,237,0.28)!important;transform:translateY(-1px)}
.btn-glass-cyan:active{filter:brightness(.78);transform:translateY(0)}
.btn-tab-off{background:rgba(255,255,255,0.04);color:var(--text2);border:1px solid rgba(255,255,255,0.08)!important;border-top-color:rgba(255,255,255,0.12)!important;border-bottom-color:rgba(255,255,255,0.03)!important;backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);box-shadow:0 4px 16px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.07);font-weight:500;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .12s ease}
.btn-tab-off:hover{background:rgba(255,255,255,0.09)!important;border-color:rgba(255,255,255,0.18)!important;transform:translateY(-1px)}
.btn-tab-off:active{filter:brightness(.78);transform:translateY(0)}
.btn-teal{background:var(--teal);color:#0f1117}.btn-teal:hover{background:#22a8e0;transform:translateY(-1px)}
.btn-red{background:#7a1f1f;color:var(--red);border:1px solid #a03030}.btn-red:hover{background:#a03030;transform:translateY(-1px)}
.btn-danger{background:#3d1a1a;color:var(--red);border:1px solid #5a2020}.btn-danger:hover{background:#5a2020}
.btn-sm{padding:4px 10px;font-size:12px;border-radius:6px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar-container{display:flex;flex-direction:column;gap:4px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-name{width:82px;font-size:10.5px;color:var(--text1);font-weight:500;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:linear-gradient(to right,rgba(255,255,255,0.018),var(--bg3));border:1px solid rgba(255,255,255,0.055);border-radius:5px;height:17px;overflow:hidden;display:flex;box-shadow:inset 0 1px 3px rgba(0,0,0,0.28)}
@keyframes barExpand{from{max-width:0}to{max-width:100%}}
.bar-seg{height:100%;display:flex;align-items:center;padding-left:6px;font-size:10px;font-weight:700;font-family:var(--mono);color:rgba(255,255,255,0.95);overflow:hidden;white-space:nowrap;animation:barExpand .9s cubic-bezier(.76,0,.24,1) both;position:relative;text-shadow:0 1px 4px rgba(0,0,0,0.45)}
.bar-seg::after{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:rgba(255,255,255,0.1);pointer-events:none}
.bar-ann{font-size:11px;font-weight:700;color:var(--red);font-family:var(--mono);width:40px;flex-shrink:0;text-align:right;letter-spacing:-.02em}
.chart-wrap{position:relative;width:100%;height:200px}
.premio-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-start}
.premio-grid-comm{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:stretch;align-items:start}
.premio-card{background:linear-gradient(160deg,rgba(255,255,255,0.07) 0%,rgba(251,191,36,0.05) 35%,var(--bg2) 100%);backdrop-filter:blur(var(--l2-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--l2-blur)) saturate(1.4);border:1px solid rgba(251,191,36,0.15);border-top-color:rgba(255,255,255,0.20);border-bottom-color:rgba(251,191,36,0.05);border-left-color:rgba(255,255,255,0.09);border-right-color:rgba(255,255,255,0.04);border-radius:10px;padding:14px;text-align:center;transition:transform .22s cubic-bezier(.34,1.4,.64,1),border-color .22s,box-shadow .22s;width:165px;flex-shrink:0;display:flex;flex-direction:column;min-height:220px;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.40),0 1px 4px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)}
.premio-card::before{content:'';position:absolute;left:0;right:0;top:0;height:40%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.02) 55%,rgba(255,255,255,0.00) 100%);pointer-events:none;z-index:0}
.premio-card::after{content:'';position:absolute;left:6%;right:44%;bottom:0;height:24%;border-radius:50%;background:radial-gradient(ellipse at 30% 100%,rgba(251,191,36,0.12) 0%,transparent 70%);pointer-events:none;z-index:0}
.premio-card>*{position:relative;z-index:1}
.premio-card:hover{transform:translateY(-2px) scale(1.008);border-color:rgba(251,191,36,.30);border-top-color:rgba(255,255,255,0.30);box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 1px rgba(251,191,36,.12),inset 0 1px 0 rgba(255,255,255,0.15),0 0 14px rgba(251,191,36,0.08)}
.premio-name{font-size:13px;font-weight:600;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.premio-att{font-size:25px;font-weight:600;font-family:var(--mono)}
.premio-bar{height:5px;background:var(--bg4);border-radius:3px;margin:8px 0;overflow:hidden}
.premio-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.premio-bonus{font-size:13px;font-weight:600}
.premio-hint{font-size:11px;color:var(--text3);margin-top:3px}
/* LEADS GRID */
.leads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-3)}
.lead-card{background:linear-gradient(135deg,rgba(56,189,248,0.1) 0%,var(--bg3) 60%);border:1px solid rgba(56,189,248,0.25);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px;transition:transform .18s cubic-bezier(.34,1.4,.64,1),border-color .18s,box-shadow .18s;box-shadow:0 3px 14px rgba(56,189,248,0.08),inset 0 1px 0 rgba(56,189,248,0.08)}
.lead-card:hover{transform:translateY(-2px) scale(1.01);border-color:rgba(56,189,248,.5);box-shadow:0 6px 20px rgba(56,189,248,0.18),0 0 0 1px rgba(56,189,248,.15),inset 0 1px 0 rgba(255,255,255,.03)}
.lead-card-name{font-size:13px;font-weight:600;color:var(--text)}
.lead-card-val{font-size:23px;font-weight:600;font-family:var(--mono);color:var(--teal)}
.lead-card-sub{font-size:11px;color:var(--text3)}
.lead-input-row{display:flex;gap:6px;align-items:center}
/* ── Onboarding compact cards ── */
.onb-compact .stat-card{padding:9px 12px 8px!important;min-height:unset!important}
.onb-compact .stat-label{font-size:10px!important;margin-bottom:2px!important;letter-spacing:.05em}
.onb-compact .stat-val{font-size:20px!important;line-height:1.1!important;margin-top:2px!important}
.onb-compact .stat-sub{font-size:10px!important;margin-top:2px!important}
.onb-compact .guarded-input{font-size:20px!important;padding:2px 0 1px!important;margin-top:2px!important}
.onb-compact [style*="margin-top:8px"]{margin-top:4px!important}
.onb-compact .pct-badge-pos,.onb-compact .pct-badge-neg{font-size:9px!important;padding:1px 5px!important}
/* ── UTILITY: card hover per elementi inline su tutte le pagine ───── */
.mini-card{transition:transform .18s cubic-bezier(.34,1.4,.64,1),border-color .18s,box-shadow .18s}
.mini-card:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 6px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03)}
/* stat-card con border-left accent: solo lift, nessun glow che sovrascrive il bordo */
.stat-card[style*="border-left"]{transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s}
.stat-card[style*="border-left"]:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
/* info-box hover: solo luminosità bordo */
.info-box{transition:border-color .18s,box-shadow .18s}
.info-box:hover{box-shadow:0 2px 10px rgba(0,0,0,.2)}
.lead-input-row input{padding:5px 8px;font-size:13px;border-radius:6px}
.lead-input-row button{padding:5px 10px;font-size:12px;border-radius:6px;border:none;background:var(--teal);color:#0f1117;font-weight:600;cursor:pointer;white-space:nowrap}
.lead-input-row button:hover{background:#22a8e0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.month-sel{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:nowrap;overflow:visible;padding:6px 0 6px}
/* Avatar strip inline nella riga header — nasconde scrollbar */
.month-sel .dash-avatar-strip::-webkit-scrollbar{display:none}
/* Sotto 1024px nascondi gli avatar nella riga header */
@media(max-width:1024px){.dash-avatar-strip{display:none!important}}
.month-sel label{font-size:12px;color:var(--text2)}
.month-sel select{width:auto;padding:5px 10px;font-size:13px}
/* ── Month pill navigator ───────────────────────────────────────────── */
.month-pill{display:inline-flex;align-items:center;gap:0;background:linear-gradient(160deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.09) 45%,rgba(255,255,255,0.12) 100%);backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.03);border:1px solid rgba(255,255,255,0.15);border-top-color:rgba(255,255,255,0.22);border-bottom-color:rgba(255,255,255,0.07);border-radius:100px;padding:3px;position:relative;overflow:hidden;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;box-shadow:0 8px 36px rgba(0,0,0,0.55),inset 0 2.5px 0 rgba(255,255,255,0.19),inset 0 -1px 0 rgba(0,0,0,0.28),inset 1px 0 0 rgba(255,255,255,0.06),inset -1px 0 0 rgba(255,255,255,0.03)}
.month-pill::before{content:'';position:absolute;left:5%;right:5%;top:0;height:44%;border-radius:0 0 60% 60%;background:linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.03) 70%,transparent 100%);pointer-events:none;transition:opacity .35s ease}
.month-pill::after{content:'';position:absolute;left:10%;right:35%;bottom:6%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,0.07) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .35s ease}
.month-pill:hover{background:linear-gradient(210deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.14) 40%,rgba(255,255,255,0.18) 75%,rgba(255,255,255,0.10) 100%);border-color:rgba(255,255,255,0.16);border-top-color:rgba(255,255,255,0.09);border-bottom-color:rgba(255,255,255,0.22);box-shadow:0 10px 42px rgba(0,0,0,0.60),inset 0 -2.5px 0 rgba(255,255,255,0.19),inset 0 1px 0 rgba(0,0,0,0.18),inset 1px 0 0 rgba(255,255,255,0.03),inset -1px 0 0 rgba(255,255,255,0.05)}
.month-pill:hover::before{opacity:0.15}
.month-pill:hover::after{opacity:1}
.month-pill:active{filter:brightness(.78);transition:filter .08s}
.month-pill-btn{width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,0.82);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;transition:background .15s,color .15s,transform .1s;flex-shrink:0;font-family:var(--font);line-height:1}
.month-pill-btn:hover{background:rgba(255,255,255,0.22);color:#fff}
.month-pill-btn:active{background:rgba(255,255,255,0.32);transform:scale(.88)}
.month-pill-label{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 18px;min-width:120px;pointer-events:none}
.month-pill-label .mpl-month{font-size:15px;font-weight:700;color:#ffffff;letter-spacing:.01em;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,0.55)}
.month-pill-label .mpl-year{font-size:11px;font-weight:400;color:rgba(255,255,255,0.82);letter-spacing:.09em;text-shadow:0 1px 5px rgba(0,0,0,0.45)}
.msg{font-size:13px;margin-top:8px;min-height:18px}
.guarded-input[readonly]{cursor:pointer;opacity:0.65}
.msg-ok{color:var(--green)}.msg-err{color:var(--red)}
.loader{text-align:center;padding:40px;color:var(--text3);font-size:14px}

/* ── SKELETON LOADING ──────────────────────────────────────────────────── */
@keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
.skel{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite linear;
  border-radius:6px;
}
.skel-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.skel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  margin-bottom:16px;
}
.skel-panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px 24px;
  margin-bottom:16px;
}

/* ── COUNT-UP ──────────────────────────────────────────────────────────── */
@keyframes countFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.countup-val{
  animation:countFadeIn .35s ease both;
}

/* ── PCT BADGE — contrasto migliorato ─────────────────────────────────── */
.pct-badge-pos{
  font-size:11px;
  font-family:var(--mono);
  font-weight:700;
  color:#3ecf8e;
  background:rgba(62,207,142,0.13);
  border:1px solid rgba(62,207,142,0.35);
  border-radius:5px;
  padding:2px 6px;
  line-height:1.4;
  white-space:nowrap;
}
.pct-badge-neg{
  font-size:11px;
  font-family:var(--mono);
  font-weight:700;
  color:#f56565;
  background:rgba(245,101,101,0.13);
  border:1px solid rgba(245,101,101,0.35);
  border-radius:5px;
  padding:2px 6px;
  line-height:1.4;
  white-space:nowrap;
}
.pct-badge-new{
  font-size:11px;
  font-family:var(--mono);
  font-weight:700;
  color:#3ecf8e;
  background:rgba(62,207,142,0.13);
  border:1px solid rgba(62,207,142,0.35);
  border-radius:5px;
  padding:2px 6px;
  line-height:1.4;
  white-space:nowrap;
}
.lock-overlay{position:fixed;inset:0;background:rgba(15,17,23,0.92);display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px)}
.lock-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:32px 28px;width:320px;text-align:center}
.lock-icon{font-size:33px;margin-bottom:12px}
.lock-title{font-size:17px;font-weight:600;margin-bottom:6px}
.lock-sub{font-size:13px;color:var(--text2);margin-bottom:20px}
.lock-box input{text-align:center;letter-spacing:.15em;font-size:19px;font-family:var(--mono)}
.lock-err{font-size:13px;color:var(--red);margin-top:8px;min-height:16px}
.empty{text-align:center;padding:36px 24px;color:var(--text3);font-size:14px;position:relative}
/* Decorazione sottile sopra il testo: mostrata quando .empty è "nuda" (nessun figlio) */
.empty::before{
  content:'';
  display:block;
  margin:0 auto 12px;
  width:42px;
  height:42px;
  opacity:.25;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%238b90a8' stroke-width='1.2' stroke-linecap='round'><circle cx='24' cy='24' r='18' stroke-dasharray='3 5' opacity='.8'/><path d='M15 24h18' opacity='.55'/><path d='M24 15v18' opacity='.55'/></svg>");
  animation:emptyPulse 3.2s ease-in-out infinite;
}
@keyframes emptyPulse{
  0%,100%{opacity:.2;transform:scale(1)}
  50%{opacity:.38;transform:scale(1.08)}
}
/* Versione arricchita opzionale: usala con
   <div class="empty-state">
     <div class="empty-state-title">Nessun dato</div>
     <div class="empty-state-hint">Quando arriveranno record li vedrai qui.</div>
   </div>
*/
.empty-state{
  text-align:center;
  padding:var(--sp-8) var(--sp-6);
  color:var(--text3);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  animation:emptyFadeIn .4s ease both;
}
@keyframes emptyFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Icona SVG centralizzata — il JS può impostare data-icon="calendar|box|users|chart|..." */
.empty-state-icon{
  width:52px;height:52px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-1);
  animation:emptyIconFloat 4s ease-in-out infinite;
  position:relative;
}
.empty-state-icon::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.12),transparent 60%);
  pointer-events:none;
}
.empty-state-icon svg{opacity:.45}
@keyframes emptyIconFloat{
  0%,100%{transform:translateY(0);opacity:.85}
  50%{transform:translateY(-4px);opacity:1}
}

/* Pattern di punti di sfondo */
.empty-state::before{
  content:'';
  position:absolute;
  inset:0;border-radius:inherit;
  background-image:radial-gradient(circle,rgba(255,255,255,0.06) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.4;
  pointer-events:none;
  z-index:0;
}
.empty-state>*{position:relative;z-index:1}

.empty-state-title{font-size:var(--text-lg);color:var(--text2);font-weight:600;letter-spacing:-.01em}
.empty-state-hint{font-size:var(--text-sm);color:var(--text3);max-width:280px;line-height:1.6;margin-top:calc(var(--sp-1) * -1)}

/* CTA opzionale dentro empty-state */
.empty-state .btn{margin-top:var(--sp-2)}

/* Versione compatta (dentro tabelle o pannelli piccoli) */
.empty-state-sm{
  padding:var(--sp-6) var(--sp-5);gap:var(--sp-2);
}
.empty-state-sm .empty-state-icon{width:36px;height:36px}
.empty-state-sm .empty-state-title{font-size:var(--text-base)}
.empty-state-sm .empty-state-hint{font-size:var(--text-xs)}

/* Icone SVG per tipo (usate dal JS con emptyState('box'), emptyState('calendar') ecc.) */
/* Inliniate come data-uri per non dipendere da file esterni */
.empty-state-icon[data-type="box"] svg path,
.empty-state-icon[data-type="orders"] svg path{stroke:var(--accent)}
.empty-state-icon[data-type="calendar"] svg path{stroke:var(--teal)}
.empty-state-icon[data-type="users"] svg path{stroke:var(--accent2)}
.empty-state-icon[data-type="chart"] svg path{stroke:var(--green)}
.empty-state-icon[data-type="check"] svg path{stroke:var(--green)}
.empty-state-icon[data-type="ship"] svg path{stroke:var(--green)}
.empty-state-icon[data-type="search"] svg path{stroke:var(--amber)}

/* Light theme */
.leg{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:11px;color:var(--text2);padding:5px 10px;background:rgba(255,255,255,0.025);border-radius:6px;border:1px solid rgba(255,255,255,0.045)}
.leg span{display:flex;align-items:center;gap:5px}
.leg-sq{width:10px;height:10px;border-radius:3px;display:inline-block;filter:brightness(1.15)}
.divider{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-3);font-size:var(--text-sm);color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* FERIE */
.ferie-cal{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.ferie-cal th{padding:8px 4px;font-size:12px;font-weight:700;text-align:center;border-bottom:1px solid rgba(255,255,255,0.12);letter-spacing:.04em}
.ferie-cal th:nth-child(1){color:#60a5fa}.ferie-cal th:nth-child(2){color:#818cf8}.ferie-cal th:nth-child(3){color:#a78bfa}.ferie-cal th:nth-child(4){color:#c084fc}.ferie-cal th:nth-child(5){color:#e879f9}.ferie-cal th:nth-child(6){color:#f87171}.ferie-cal th:nth-child(7){color:#f87171}
.ferie-cal td{padding:6px;border:1px solid rgba(255,255,255,0.18);border-radius:10px;vertical-align:top;height:100px;cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s;background:rgba(255,255,255,0.025);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ferie-cal td:hover{background:rgba(79,124,255,0.07);border-color:rgba(79,124,255,0.45);box-shadow:0 0 0 1.5px rgba(79,124,255,0.35),0 4px 12px rgba(79,124,255,0.12)}
.ferie-cal td.today{border:1.5px solid rgba(79,124,255,0.55);background:linear-gradient(135deg,rgba(79,124,255,0.14),rgba(79,124,255,0.06));box-shadow:0 0 12px rgba(79,124,255,0.18),inset 0 1px 0 rgba(79,124,255,0.2)}
.ferie-cal td.empty{background:rgba(255,255,255,0.015);border-color:rgba(255,255,255,0.18);cursor:default;opacity:0.4}
.ferie-cal td.weekend{background:rgba(255,255,255,0.018);border-color:rgba(255,255,255,0.18);cursor:default}
.ferie-cal td.holiday{background:rgba(124,92,255,0.06);border-color:rgba(124,92,255,0.22);cursor:default}
.ferie-cal td.selected{background:rgba(79,124,255,0.1);border-color:rgba(79,124,255,0.35)}
.ferie-cal tr:last-child td{border-bottom:1px solid rgba(255,255,255,0.18)}
.ferie-tag{font-size:12px;font-weight:500;padding:4px 8px;border-radius:5px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.4}
.ferie-tag.pending{background:rgba(246,224,94,0.15);color:#f6e05e;border:1px solid rgba(246,224,94,0.35)}
.ferie-tag.approved{background:rgba(62,207,142,0.15);color:#3ecf8e;border:1px solid rgba(62,207,142,0.35)}
.ferie-tag.holiday{background:rgba(192,132,252,0.12);color:#c084fc;border:1px solid rgba(192,132,252,0.3);font-style:italic}
.ferie-tag.mine-sel{background:rgba(79,124,255,0.25);color:#7cb3ff;border:1px solid rgba(79,124,255,0.45)}
.ferie-tag.permesso-approved{background:rgba(79,124,255,0.15);color:#7cb3ff;border:1px solid rgba(79,124,255,0.35)}
.ferie-tag.permesso-pending{background:rgba(79,124,255,0.07);color:#5a85c0;border:1px solid rgba(79,124,255,0.2)}
.ferie-tag.aspettativa{background:rgba(148,163,184,0.12);color:#94a3b8;border:1px solid rgba(148,163,184,0.3);font-style:italic}
/* ── SPED-CAL: calendario spedizioni stile ferie ─────────────────────────── */
.sped-cal{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.sped-cal th{padding:10px 4px;font-size:12px;font-weight:700;text-align:center;border-bottom:1px solid rgba(255,255,255,0.12);letter-spacing:.04em}
.sped-cal th:nth-child(1){color:#60a5fa}
.sped-cal th:nth-child(2){color:#818cf8}
.sped-cal th:nth-child(3){color:#a78bfa}
.sped-cal th:nth-child(4){color:#c084fc}
.sped-cal th:nth-child(5){color:#e879f9}

.sped-cal td{padding:0;border:1px solid rgba(255,255,255,0.10);border-radius:10px;vertical-align:top;height:120px;cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s;background:rgba(255,255,255,0.028);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sped-cal td:hover:not(.sped-empty):not(.sped-weekend){background:rgba(79,124,255,0.07);border-color:rgba(79,124,255,0.38);box-shadow:0 0 0 1px rgba(79,124,255,0.22),0 4px 12px rgba(79,124,255,0.10)}
.sped-cal td.sped-today{border:1.5px solid rgba(52,211,153,0.55);background:linear-gradient(135deg,rgba(52,211,153,0.12),rgba(52,211,153,0.05));box-shadow:0 0 12px rgba(52,211,153,0.16),inset 0 1px 0 rgba(52,211,153,0.18)}
.sped-cal td.sped-empty{background:rgba(255,255,255,0.012);border-color:rgba(255,255,255,0.06);cursor:default;opacity:0.45}
.sped-cal td.sped-weekend{background:rgba(255,255,255,0.015);border-color:rgba(255,255,255,0.07);cursor:default}
.sped-cal tr:last-child td{border-bottom:1px solid rgba(255,255,255,0.10)}
@media(max-width:640px){
  .sped-cal th{padding:5px 2px;font-size:11px}
  .sped-cal td{height:80px}
}

/* ── TURNI-CAL: tabella turni stile ferie ──────────────────────────────────── */
.turni-cal-table{width:100%;border-collapse:collapse}
.turni-cal-table th{padding:10px 10px;font-size:13px;font-weight:700;text-align:center;border-bottom:2px solid #2e3450;background:#14172080;letter-spacing:.04em}
.turni-cal-table th.turni-th-lun{color:#60a5fa}
.turni-cal-table th.turni-th-mar{color:#818cf8}
.turni-cal-table th.turni-th-mer{color:#a78bfa}
.turni-cal-table th.turni-th-gio{color:#c084fc}
.turni-cal-table th.turni-th-ven{color:#e879f9}
.turni-cal-table th.turni-th-sab{color:#f87171}
.turni-cal-table th.turni-th-dom{color:#f87171}
.turni-cal-table td{padding:6px 8px;border-bottom:1px solid #1e2235;text-align:center}
.turni-cal-table tr:hover td{background:rgba(79,124,255,0.04)}

@media(max-width:640px){
  .ferie-cal th{padding:5px 2px;font-size:11px}
  .ferie-cal td{padding:3px 2px;height:auto;min-height:60px}
  .ferie-tag{font-size:11px;padding:2px 4px;border-radius:3px}
  .ferie-hdr-btns{display:block!important}
  .ferie-action-btns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .ferie-action-btns .btn{font-size:13px!important;padding:9px 10px!important;justify-content:center!important;min-height:44px!important}
  .turni-hdr{flex-wrap:wrap!important}
  .turni-tabs{flex-wrap:wrap!important;gap:4px!important}
  .oggi-rep-card-grid{grid-template-columns:1fr!important}
  .turni-tabs button{font-size:12px!important;padding:9px 10px!important;min-height:40px!important}
}
.ferie-overlay{position:fixed;inset:0;background:rgba(15,17,23,0.85);display:flex;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(3px);perspective:1200px}
.ferie-popup{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px;width:360px;max-width:92vw}
.ferie-popup.tron-indigo{border:1px solid rgba(79,124,255,0.45);border-top:3px solid #4f7cff;animation:tronGlowIndigo 2.4s ease-in-out infinite}
.ferie-popup.tron-purple{border:1px solid rgba(192,132,252,0.45);border-top:3px solid #c084fc;animation:tronGlowPurple 2.4s ease-in-out infinite}
.ferie-popup.tron-green{border:1px solid rgba(62,207,142,0.45);border-top:3px solid #3ecf8e;animation:tronGlowGreen 2.4s ease-in-out infinite}
.ferie-popup.tron-red{border:1px solid rgba(245,101,101,0.45);border-top:3px solid #f56565;animation:tronGlowRed 2.4s ease-in-out infinite}
/* flip-in + tron combinati: necessario per override specificità su .ferie-popup.tron-* */
.ferie-popup.flip-modal-in.tron-indigo{animation:flip-modal-in .28s cubic-bezier(.22,1,.36,1) forwards,tronGlowIndigo 2.4s ease-in-out .28s infinite}
.ferie-popup.flip-modal-in.tron-purple{animation:flip-modal-in .28s cubic-bezier(.22,1,.36,1) forwards,tronGlowPurple 2.4s ease-in-out .28s infinite}
.ferie-popup.flip-modal-in.tron-green{animation:flip-modal-in .28s cubic-bezier(.22,1,.36,1) forwards,tronGlowGreen 2.4s ease-in-out .28s infinite}
.ferie-popup.flip-modal-in.tron-red{animation:flip-modal-in .28s cubic-bezier(.22,1,.36,1) forwards,tronGlowRed 2.4s ease-in-out .28s infinite}
.ferie-popup h3{font-size:16px;font-weight:600;margin-bottom:6px}
.ferie-popup p{font-size:13px;color:var(--text2);margin-bottom:16px}
.info-box{background:#0f2a3d;border:1px solid #1a4060;border-radius:8px;padding:10px 14px;font-size:13px;color:var(--teal);margin-bottom:14px}
/* ── SUGGERISCI MODIFICHE ─────────────────────────────────────────── */
.suggest-btn{padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:var(--font);font-size:13px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;margin-left:4px}
.suggest-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--accent2)}
.suggest-overlay{position:fixed;inset:0;background:rgba(15,17,23,0.85);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}
.suggest-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px;width:380px;max-width:92vw;border-top:3px solid var(--accent2)}
.suggest-box h3{font-size:16px;font-weight:700;margin-bottom:4px}
.suggest-box .suggest-sub{font-size:12px;color:var(--text3);margin-bottom:20px}
.suggest-box textarea{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border .15s;width:100%;resize:vertical;min-height:90px}
.suggest-box textarea:focus{border-color:var(--accent2)}
.suggest-msg{font-size:13px;margin-top:8px;min-height:16px}
/* ── MODAL ANIMATIONS (macOS style) ──────────────────────────────── */
@keyframes mac-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes mac-overlay-out{from{opacity:1}to{opacity:0}}
@keyframes mac-box-in{from{opacity:0;transform:scale(0.88) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes mac-box-out{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.88) translateY(12px)}}
.mac-overlay-in{animation:mac-overlay-in .22s cubic-bezier(.22,1,.36,1) forwards}
.mac-overlay-out{animation:mac-overlay-out .18s cubic-bezier(.4,0,1,1) forwards}
.mac-box-in{animation:mac-box-in .26s cubic-bezier(.22,1,.36,1) forwards}
.mac-box-out{animation:mac-box-out .18s cubic-bezier(.4,0,1,1) forwards}
/* ── FLIP CARD MODAL ──────────────────────────────────────────────── */
@keyframes flip-src-out{0%{transform:scale(1) rotateY(0);opacity:1}100%{transform:scale(0.88) rotateY(90deg);opacity:0}}
@keyframes flip-modal-in{0%{transform:rotateY(-90deg) scale(0.88);opacity:0}100%{transform:rotateY(0deg) scale(1);opacity:1}}
@keyframes flip-modal-out{0%{transform:rotateY(0deg) scale(1);opacity:1}100%{transform:rotateY(90deg) scale(0.88);opacity:0}}
.flip-src-out{animation:flip-src-out .17s cubic-bezier(.4,0,1,1) forwards}
.flip-modal-in{animation:flip-modal-in .28s cubic-bezier(.22,1,.36,1) forwards}
.flip-modal-out{animation:flip-modal-out .17s cubic-bezier(.4,0,1,1) forwards}
/* ── ONBOARDING NOTE MODAL ────────────────────────────────────────── */
.onb-notes-overlay{position:fixed;inset:0;background:rgba(15,17,23,0.88);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(5px)}
.mypos-reg-box{width:min(700px,calc(100vw - 40px)) !important;max-width:700px !important;max-height:92vh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid rgba(56,189,248,0.35);border-radius:16px;padding:28px;border-top:3px solid #38bdf8;animation:tronGlowBlue 2.4s ease-in-out infinite}
.onb-notes-box{background:var(--bg2);border:1px solid rgba(56,189,248,0.35);border-radius:16px;padding:22px 26px;width:calc(100vw - 40px);max-width:960px;border-top:3px solid #38bdf8;display:flex;flex-direction:column;animation:tronGlowBlue 2.4s ease-in-out infinite}
.onb-notes-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.onb-notes-header h3{font-size:17px;font-weight:700;color:var(--text);flex:1}
.onb-notes-close{background:var(--bg3);border:1px solid var(--border);border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:17px;font-family:var(--font)}
.onb-notes-close:hover{background:var(--bg3)}
.onb-notes-textarea{width:100%;flex:1;min-height:0;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;color:var(--text);font-family:var(--font);font-size:15px;line-height:1.7;outline:none;resize:none;transition:border .15s}
.onb-notes-textarea:focus{border-color:#38bdf8}
.onb-notes-footer{display:flex;align-items:center;gap:10px;margin-top:14px;justify-content:space-between}
.onb-notes-saved{font-size:12px;color:var(--green);opacity:0;transition:opacity .4s}
.onb-notes-saved.show{opacity:1}
/* ── ONLINE COUNTER ───────────────────────────────────────────────── */
.nav-month-group{display:flex;flex-direction:row;align-items:center;gap:8px;margin-right:auto;flex-shrink:0}
.online-counter{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);font-family:var(--mono);white-space:nowrap;line-height:1}
.online-counter .oc-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
@media(max-width:480px){.online-counter{display:none}}
/* ── MOBILE: Modali full-screen su schermi piccoli ──────────────────── */
@media(max-width:600px){
  /* Overlay modali: allineati in basso come sheet iOS */
  .suggest-overlay,.onb-notes-overlay{align-items:flex-end!important}
  .ferie-popup,.suggest-box{
    width:100%!important;max-width:100%!important;
    border-radius:20px 20px 0 0!important;
    padding:24px 20px max(24px,env(safe-area-inset-bottom))!important;
    border-bottom:none!important;
  }
  .onb-notes-box,.mypos-reg-box{
    width:100%!important;max-width:100%!important;
    height:92dvh!important;max-height:92dvh!important;
    border-radius:20px 20px 0 0!important;
    padding:20px 16px max(20px,env(safe-area-inset-bottom))!important;
  }
  /* Diagnostica modal */
  #diagModal > div{
    width:100%!important;max-width:100%!important;
    border-radius:20px 20px 0 0!important;
    max-height:92dvh!important;
  }
  /* Lock box */
  .lock-box{width:calc(100vw - 32px)!important;border-radius:16px!important}
  /* Calcolatore rental: sezione su mobile */
  .main .panel .form-grid > *{min-width:0}
}
/* ── MOBILE: Tabelle con scroll orizzontale ─────────────────────────── */
@media(max-width:1023px){
  /* Avvolge automaticamente tutte le tabelle in un contenitore scrollabile */
  .panel > table,.panel > div > table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:0;
  }
}
/* ── MOBILE: Footer safe area ───────────────────────────────────────── */
#visitFooter{padding-bottom:max(14px,env(safe-area-inset-bottom))}
/* ── MOBILE: .main con safe area laterali ───────────────────────────── */
.main{
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}
@media(max-width:480px){
  .main{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
}
/* ── MOBILE: Bottoni azione inline nelle tabelle ────────────────────── */
@media(max-width:480px){
  .btn-row{gap:6px}
  .btn-row .btn{flex:1;justify-content:center}
}
/* ── PWA: Banner bottom offset per safe-area ───────────────────────── */
#pwa-banner{bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px))!important}

/* ── BOT GRID: responsive 4→2 colonne su mobile ──────────────────── */
.bot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:600px){
  .bot-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .bot-grid > div{padding:12px 8px 10px!important}
  .bot-grid > div > div:first-child{font-size:27px!important}
}
/* ── ADMIN: tabs e monthBar compatti su mobile ────────────────────── */
@media(max-width:600px){
  .admin-month-bar{flex-wrap:wrap;gap:6px}
  .admin-month-bar .admin-action-btn{padding:5px 10px!important;font-size:12px!important}
  .admin-tab-btn{padding:6px 10px!important;font-size:12px!important}
}
/* ── PREMIO: onboarding 3 col su mobile ───────────────────────────── */
@media(max-width:600px){
  .premio-grid-comm{grid-template-columns:repeat(3,1fr)!important}
  .premio-onb-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
}

@keyframes splashLogoIn {
  from { opacity:0; transform:translateY(12px) scale(.92); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes splashTextIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}
@keyframes splashScanLine {
  0%   { opacity:0; top:-2px; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { opacity:0; top:calc(100% + 2px); }
}

/* ════════════════════════════════════════════════════════════════════
   IPHONE MOBILE REDESIGN — fix completo per schermi ≤480px
   (usa !important per battere gli stili inline generati da JS)
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Layout principale ─────────────────────────────────────────── */
  .main{padding:8px max(8px,env(safe-area-inset-left))!important;padding-bottom:0!important}
  .panel{padding:12px!important}

  /* ── Grids: tutte le griglie fisse collassano a 1 o 2 colonne ── */
  /* .stat-grid già gestito sopra con !important */
  /* .premio-onb-grid già gestito sopra con !important */

  /* Griglie inline con 3 colonne → 2 colonne su iPhone piccolo */
  /* (classi .onb-contact-grid e .turni-ferie-stat-grid aggiunte in JS) */
  .onb-contact-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important;align-items:start!important}
  .turni-ferie-stat{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important;margin-bottom:16px!important}

  /* ── Calendario Spedizioni ─────────────────────────────────────── */
  /* Il wrapper ha già overflow-x:auto — assicuriamo che funzioni */
  #spedCalendarWrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .sped-cal{min-width:360px!important} /* larghezza minima per badge leggibili */
  .sped-cal td{height:72px!important}
  .sped-cal th{padding:6px 2px!important;font-size:10px!important;letter-spacing:0!important}

  /* ── Calendario Ferie ──────────────────────────────────────────── */
  .ferie-cal{min-width:400px}
  .ferie-cal td{min-height:44px!important;height:auto!important;padding:3px 2px!important}
  .ferie-tag{font-size:10px!important;padding:2px 3px!important}

  /* ── Calendario Turni ──────────────────────────────────────────── */
  .turni-cal-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:380px}
  .turni-cal-table th{padding:6px 4px!important;font-size:11px!important}
  .turni-cal-table td{padding:5px 4px!important;font-size:12px!important}

  /* ── Spedizioni header ─────────────────────────────────────────── */
  /* Struttura a due righe: sped-hdr-top (box giacenza + avatar) e sped-hdr-bottom (mese + bottoni) */
  .sped-hdr-row{gap:10px!important}
  .sped-hdr-top{flex-wrap:wrap!important;gap:8px!important}
  .sped-hdr-bottom{flex-wrap:wrap!important;gap:8px!important}
  .sped-hdr-spacer{display:none!important} /* elimina flex:1 spacer invisibili */
  .sped-action-btns{width:100%!important;justify-content:space-between!important}
  .sped-avatar-strip{justify-content:center!important;width:100%!important}

  /* ── Bottoni ─────────────────────────────────────────────────────── */
  .btn-glass-blue,.btn-glass-green,.btn-glass-violet,
  .btn-glass-emerald,.btn-glass-amber,.btn-glass-red,
  .btn-glass-pink{padding:7px 10px!important;font-size:12px!important}

  /* ── Inserimento: form inserimento compatto ────────────────────── */
  .form-grid{grid-template-columns:1fr!important}

  /* ── Leads grid ─────────────────────────────────────────────────── */
  .leads-grid{grid-template-columns:1fr!important}

  /* ── Chip operatori e badge ────────────────────────────────────── */
  .badge{font-size:10px!important;padding:2px 6px!important}

  /* ── Tabs ──────────────────────────────────────────────────────── */
  .tab{padding:8px 10px!important;font-size:12px!important;min-height:44px!important}

  /* ── Stat card: font leggermente ridotto ─────────────────────── */
  .stat-val{font-size:24px!important}
  .stat-label{font-size:11px!important}

  /* ── Premio card ────────────────────────────────────────────────── */
  .premio-card{min-width:120px!important}

  /* ── Month pill: larghezza label ridotta su schermi stretti ──── */
  .month-pill-label{min-width:90px!important;padding:2px 10px!important}
  .month-pill-label .mpl-month{font-size:13px!important}
  .month-pill-label .mpl-year{font-size:10px!important}

  /* ── Tabelle generiche ──────────────────────────────────────────── */
  td{padding:8px 6px!important;font-size:12px!important}
  th{padding:6px!important;font-size:11px!important}

  /* ── Bot grid ────────────────────────────────────────────────────── */
  .bot-grid{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
  .bot-grid > div{padding:10px 6px 8px!important}
  .bot-grid > div > div:first-child{font-size:24px!important}
}

/* Per iPhone SE (320px) */
@media(max-width:360px){
  .sped-cal{min-width:300px!important}
  .sped-cal th{font-size:9px!important}
  .month-pill-label{min-width:80px!important;padding:2px 8px!important}
  .month-pill-label .mpl-month{font-size:12px!important}
}

/* ════════════════════════════════════════════════════════════════════
   IPHONE FIX v5.7 — correzioni specifiche per pagina
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── 1. DASHBOARD: scroll orizzontale calendario ───────────────── */
  /* Rimuove overflow:hidden dal panel per permettere scroll interno */
  .panel{overflow-x:visible!important}
  /* Wrapper scrollabile del calendario */
  .dash-cal-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;margin:0 -4px}
  .dash-cal-inner{min-width:300px!important}

  /* ── 2. AVATAR STRIPS ───────────────────────────────────────────── */
  .proiez-mgr-avatars{display:none!important}
  .sped-avatar-strip{display:none!important}

  /* ── 3. SPEDIZIONI: header riformulato ────────────────────────── */
  /* Due righe impostate in spedizioni.js: sped-hdr-top (box giacenza)
     e sped-hdr-bottom (month-pill + bottoni, vanno a riga piena se non ci stanno) */
  .sped-go2-cell{
    padding:5px 10px!important;
    min-width:0!important;
  }
  .sped-colli-cell{
    padding:5px 10px!important;
    min-width:0!important;
  }
  .sped-action-btns{
    flex:1 1 100%!important;
    display:flex!important;
    flex-direction:row!important;
    width:100%!important;
    gap:6px!important;
    justify-content:stretch!important;
  }
  .sped-action-btns .btn{
    flex:1!important;
    justify-content:center!important;
    padding:8px 4px!important;
    font-size:11px!important;
    min-width:0!important;
  }
  /* Testo Go2 abbreviato su mobile */
  .sped-go2-label-full{display:none!important}
  .sped-go2-label-short{display:inline!important}
  /* Testo Colli abbreviato su mobile */
  .sped-colli-label-full{display:none!important}
  .sped-colli-label-short{display:inline!important}

  /* ── Proiezione: W/NAM/NOM compatti su mobile ─────────────────── */
  .att-badge-pill{min-width:52px!important;height:42px!important;padding:0 8px!important}
  .att-badge-pill .pill-label{font-size:8px!important}
  .att-badge-pill .pill-value{font-size:15px!important}
  .att-badge-pill.pill-nom input{font-size:15px!important;width:3ch!important}
  /* vecchie classi — compatibilità */
  .att-nam-label{display:none!important}
  .att-nom-label{display:none!important}
  .att-nam-btn{min-width:34px!important;padding:0 7px!important}
  .att-nom-wrap{min-width:62px!important;padding:0 5px!important;gap:0!important}

  /* ── 4. FERIE: solo 3 bottoni su iPhone ───────────────────────── */
  .ferie-btn-desktop{display:none!important}

  /* ── 5. UTILITÀ (downloads): 1 colonna ────────────────────────── */
  .dl-2col{grid-template-columns:1fr!important;gap:10px!important}
  .dl-hdr-btns{
    margin-left:0!important;
    width:100%!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .dl-hdr-btns > button{
    width:100%!important;
    justify-content:flex-start!important;
  }

  /* ── 6. Panel overflow fix (no nascondere il contenuto) ─────────── */
  /* Riabilitiamo overflow visibile per permettere scroll children */
  .panel{overflow:visible!important;overflow-x:visible!important}
}

/* ════════════════════════════════════════════════════════════════════
   IPHONE FIX v5.8 — ferie header + team 2 colonne
   ════════════════════════════════════════════════════════════════════ */

/* ── Ferie: testo bottone Inserimento ─────────────────────────────── */
.ferie-ins-short{display:none}
@media(max-width:480px){
  .ferie-ins-full{display:none!important}
  .ferie-ins-short{display:inline!important}
  /* Su mobile i bottoni ferie in griglia 2 colonne compatte */
  .ferie-action-btns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .ferie-action-btns .btn{font-size:12px!important;padding:9px 8px!important;justify-content:center!important;min-height:42px!important;white-space:nowrap!important}
  .ferie-sel-wrap{flex-wrap:wrap;gap:8px}
}

/* ── Team: 2 card per riga su iPhone ──────────────────────────────── */
@media(max-width:480px){
  .team-op-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }
  .team-op-card{
    padding:8px 8px!important;
    gap:8px!important;
  }
  .team-op-avatar{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    font-size:14px!important;
  }
  .team-op-name{
    font-size:11px!important;
    letter-spacing:0!important;
  }
  .team-op-role{
    font-size:9px!important;
    margin-top:1px!important;
  }
  .team-wa-btn{
    width:26px!important;
    height:26px!important;
    border-radius:7px!important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v5.9 — mobile log + premi fix
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  /* Nascondi filtri log su mobile */
  .log-filter-bar{display:none!important}

  /* Log: nascondi Azione, Quando, nomi */
  .log-col-azione{display:none!important}
  .log-col-quando{display:none!important}
  .log-name-text{display:none!important}

  /* Log: dettaglio su max 3 righe */
  .log-det-text{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    white-space:normal!important;
    text-overflow:unset!important;
    word-break:break-word!important;
    max-width:none!important;
  }

  /* Log: colonna dettaglio si espande */
  .log-col-det{max-width:none!important;width:auto!important}

  /* Log: colonna avatar compatta */
  .log-col-chi{padding:4px 6px!important;min-width:32px!important;width:32px!important}

  /* Log: data/ora compatta */
  .log-col-data{white-space:nowrap!important}

  /* Onboarding premi: card più piccole su iPhone */
  .premio-grid-comm{grid-template-columns:repeat(2,1fr)!important}
  .premio-onb-grid{grid-template-columns:repeat(3,1fr)!important;gap:5px!important}
  .premio-onb-grid .premio-card{padding:8px 5px!important;min-height:0!important}
  .premio-onb-grid .premio-card .premio-name{font-size:10px!important;max-width:70px!important}

  /* Tabella Dettaglio Commerciali: solo Operatore, Ordini, ATT/L%, Premio su iPhone */
  .det-grp-header{display:none!important}
  .det-mob-hide{display:none!important}

  /* Home: nasconde testo grigio sotto le card (evita a-capo su iPhone) */
  .mob-hide{display:none!important}
}

/* ── Stipendi tabella: mobile-only column hiding ───────────────────────────── */
@media(max-width:480px){
  /* Nascondi colonne Modifiche manuali e Straordinari */
  .stip-col-mod, .stip-col-str { display:none!important; }

  /* Colonna Stipendio base: padding ridotto, input più stretto */
  .stip-col-base { padding:8px 4px!important; }
  .stip-col-base input[type="number"] { width:72px!important; font-size:12px!important; }
}

/* Stipendi: label colonna base - versione breve solo mobile */
.stip-base-short { display:none; }
@media(max-width:480px){
  .stip-base-full  { display:none; }
  .stip-base-short { display:inline; }
}

/* ── TOAST SLIDE ANIMATION ──────────────────────────────────────────────────── */
@keyframes toastSlideIn{from{transform:translateX(115%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastSlideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(115%);opacity:0}}
.toast-item{animation:toastSlideIn .32s cubic-bezier(.34,1.4,.64,1)}
.toast-item.hiding{animation:toastSlideOut .25s ease-in forwards}

/* ── MOBILE: bottom sheet universale per modali JS dinamici ────────────────── */
/* I modali CSS (suggest-overlay, onb-notes-overlay) già gestiti sopra.        */
/* Questa regola cattura i modali creati dinamicamente da JS (portaliModal,    */
/* payLinksModal, wamoCalcModal, ecc.) che usano align-items:center di default */
@media(max-width:600px){
  /* Overlay fixed con flex center → allinea in basso */
  #portaliModal,#payLinksModal,#wamoCalcModal,
  #remotoLightbox,#namPwdOverlay,#wamoCalcOverlay,
  #adminOverlay,#agentiOverlay,#rentalOverlay{
    align-items:flex-end!important;
    padding:0!important;
  }
  /* Il pannello interno diventa bottom sheet */
  #portaliModal > div,#payLinksModal > div,#wamoCalcModal > div,
  #namPwdOverlay > .lock-box,#wamoCalcOverlay > .lock-box,
  #adminOverlay > .lock-box,#agentiOverlay > .lock-box,#rentalOverlay > .lock-box{
    width:100%!important;
    max-width:100%!important;
    border-radius:20px 20px 0 0!important;
    border-bottom:none!important;
    max-height:92dvh!important;
    overflow-y:auto!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
  /* lock-box password: più compatto e bottom */
  .lock-box{
    width:100%!important;
    border-radius:20px 20px 0 0!important;
    margin:0!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATES SPECIFICI PER SEZIONE
   Utilizzati quando le sezioni non hanno dati da mostrare.
   Il JS chiama: el.innerHTML = emptyState(type, title, hint)
   ══════════════════════════════════════════════════════════════════════ */

/* Wrapper posizionato per il ::before pattern-dots */
.empty-state{position:relative;overflow:hidden}

/* Variante "tabella vuota" — usata dentro .panel sopra una table */
.empty-table{
  padding:var(--sp-7) var(--sp-5);
  text-align:center;
  color:var(--text3);
  font-size:var(--text-sm);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  border-top:1px solid var(--border);
  animation:emptyFadeIn .35s ease both;
}
.empty-table-icon{
  font-size:28px;opacity:.3;
  animation:emptyIconFloat 4s ease-in-out infinite;
  display:block;margin-bottom:var(--sp-1);
}
.empty-table-title{color:var(--text2);font-size:var(--text-base);font-weight:500}
.empty-table-hint{font-size:var(--text-xs);color:var(--text3);max-width:260px;line-height:1.55}

/* Colori icona per tipo */
.empty-table[data-type="orders"]  .empty-table-icon{filter:drop-shadow(0 0 6px rgba(79,124,255,.4))}
.empty-table[data-type="ship"]    .empty-table-icon{filter:drop-shadow(0 0 6px rgba(34,197,94,.4))}
.empty-table[data-type="users"]   .empty-table-icon{filter:drop-shadow(0 0 6px rgba(124,92,255,.4))}
.empty-table[data-type="search"]  .empty-table-icon{filter:drop-shadow(0 0 6px rgba(246,173,85,.4))}
.empty-table[data-type="premi"]   .empty-table-icon{filter:drop-shadow(0 0 6px rgba(251,191,36,.4))}
.empty-table[data-type="ferie"]   .empty-table-icon{filter:drop-shadow(0 0 6px rgba(52,211,153,.4))}
.empty-table[data-type="onb"]     .empty-table-icon{filter:drop-shadow(0 0 6px rgba(56,189,248,.4))}

/* Animazioni già definite sopra: emptyFadeIn, emptyIconFloat, emptyPulse */

/* ── Confirm Dialog ────────────────────────────────────────────────────────── */
@keyframes _cfmFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes _cfmFadeOut { from { opacity:1 } to { opacity:0 } }

/* ── Uniforma spacing sotto ultimo elemento prima del footer ── */
#mainArea > *:last-child{margin-bottom:0!important}
@keyframes tlFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── Home: layout a due colonne (timeline fixed sx + contenuto centrato) ── */

/* ── Home: layout senza sidebar (timeline rimossa) ── */

/* Contenuto: nessun margin extra, il .main usa max-width:1100px + margin:auto */

.home-outer-wrap {
  display: block;
  width: 100%;
}

/* Timeline sidebar: rimossa — nascosta via display:none */
.home-tl-col {
  display: none !important;
}

.home-tl-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a78bfa;
  text-shadow: 0 0 12px rgba(167,139,250,.5);
  padding: 12px 14px 9px;
  border-bottom: 1px solid rgba(167,139,250,.12);
  flex-shrink: 0;
}

.home-tl-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.25) transparent;
}
.home-tl-list::-webkit-scrollbar { width: 3px; }
.home-tl-list::-webkit-scrollbar-track { background: transparent; }
.home-tl-list::-webkit-scrollbar-thumb { background: rgba(167,139,250,.3); border-radius: 4px; }

/* Contenuto: nessun margin extra */
.home-main-col {
  margin-left: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .home-tl-col {
    position: static;
    width: 100%;
    height: auto;
    max-height: 280px;
    border-right: none;
    border-top: 1px solid rgba(167,139,250,.18);
    border-bottom: 1px solid rgba(167,139,250,.18);
    background: rgba(167,139,250,.04);
    box-shadow: none;
    order: 2;
  }
  .home-main-col {
    order: 1;
  }
  .home-outer-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
/* ── Fine Home two-col layout ── */

/* ══════════════════════════════════════════════════════════════════════
   TABLET — compatta le card home (iPad std / Pro 768–1180px)
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1180px) {

  /* ── Home centrata ── */
  .home-view-wide.main {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Gap verticale sezioni home ── */
  .home-main-col > div[style*="gap:9px"],
  .home-main-col > div[style*="gap: 9px"] {
    gap: 6px !important;
  }

  /* ── stat-grid 2 colonne ── */
  .home-view-wide .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }

  /* ── stat-card compatta ── */
  .home-view-wide .stat-card {
    padding: 10px 14px 8px !important;
    min-height: unset !important;
  }

  .home-view-wide .stat-val {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  .home-view-wide .stat-label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  .home-view-wide .stat-sub {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  /* ── Griglia Onboarding/Spedizioni/Attivazioni ── */
  .home-view-wide [style*="grid-template-columns:1fr 1fr 1fr"] {
    gap: 8px !important;
  }

  /* ── Dock icone: selettori su classi aggiunte nel JS ── */
  .home-view-wide .dock-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 13px !important;
    font-size: 22px !important;
  }
  .home-view-wide .dock-icon-box > span {
    font-size: 22px !important;
  }
  .home-view-wide .dock-icon-label {
    font-size: 9px !important;
  }
  .home-view-wide .dock-icon-btn {
    gap: 5px !important;
  }

  /* ── Card IERI/OGGI ── */
  .home-view-wide .ieri-oggi-card {
    width: 180px !important;
    height: 46px !important;
  }

  /* ── Header saluto ── */
  .home-view-wide [style*="min-height:56px"] {
    min-height: 40px !important;
  }

  /* ── Sezioni label uppercase ── */
  .home-view-wide [style*="letter-spacing:.1em"] {
    margin-bottom: 2px !important;
  }

  /* ── Padding interno sezioni colorate ── */
  .home-view-wide [style*="border-radius:16px"] {
    padding: 6px !important;
  }

  /* ── Widget meteo ── */
  #dash-weather-widget {
    width: 220px !important;
    max-width: 220px !important;
    font-size: 11px !important;
  }
}
/* ── Fine tablet ── */

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR  —  nav verticale a sinistra (≥769px)
   Lascia invariato il comportamento mobile (hamburger + drawer)
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){

  /* ── App: row layout sidebar + contenuto ────────────────────────────── */
  .app{flex-direction:row;align-items:stretch}

  /* ── .nav → sidebar verticale ───────────────────────────────────────── */
  .nav{
    flex-direction:column;
    flex-wrap:nowrap;
    width:220px;
    min-width:220px;
    flex-shrink:0;
    height:100dvh;
    position:sticky;
    top:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
    gap:0;
    border-bottom:none;
    border-right:1px solid rgba(120,160,255,0.18);
    background:linear-gradient(180deg,rgba(8,13,24,0.72) 0%,rgba(5,9,21,0.68) 100%);
    backdrop-filter:blur(24px) saturate(1.6);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);
    align-items:stretch;
    scrollbar-width:none;
    z-index:200;
    isolation:isolate
  }
  .nav::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(79,124,255,0.04) 0%,transparent 60%),
               linear-gradient(to bottom,rgba(255,255,255,0.03) 0%,transparent 30%);
    pointer-events:none;
    z-index:0
  }
  .nav::-webkit-scrollbar{display:none}

  /* ── Logo link → header sidebar ─────────────────────────────────────── */
  .nav>a:first-child{
    display:flex!important;
    align-items:center;
    justify-content:center;
    padding:10px 14px 10px;
    border-bottom:none;
    margin-bottom:0;
    flex-shrink:0;
    line-height:normal!important;
    text-decoration:none
  }
  .nav-brand-logo{
    height:52px!important;
    width:auto!important;
    max-width:180px;
    object-fit:contain!important;
    object-position:center center;
    margin-right:0!important;
    display:block!important
  }

  /* ── Sidebar search widget ──────────────────────────────────────────── */
  .sidebar-search-wrap{
    display:block;
    padding:0 10px 8px;
    flex-shrink:0
  }
  .sidebar-search-field{
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 6px 5px 10px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:7px;
    transition:border-color .15s,background .15s;
    box-sizing:border-box
  }
  .sidebar-search-field:focus-within{
    background:rgba(167,139,250,0.06);
    border-color:rgba(167,139,250,0.32)
  }
  .sidebar-search-input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:var(--text);
    font-family:var(--font);
    font-size:12px;
    caret-color:#a5b4fc;
    min-width:0;
    padding:0;
    line-height:1
  }
  .sidebar-search-input::placeholder{color:var(--text3)}
  .sidebar-search-go{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:5px;
    border:none;
    background:rgba(167,139,250,0.15);
    color:rgba(167,139,250,0.7);
    cursor:pointer;
    flex-shrink:0;
    transition:background .13s,color .13s;
    opacity:0;
    pointer-events:none
  }
  .sidebar-search-field:focus-within .sidebar-search-go{
    opacity:1;
    pointer-events:auto
  }
  .sidebar-search-go:hover{
    background:rgba(167,139,250,0.28);
    color:#c4b5fd
  }

  /* ── Section labels (nascosti su mobile) ────────────────────────────── */
  .sidebar-section-label{
    display:block;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text3);
    padding:14px 18px 4px;
    flex-shrink:0;
    pointer-events:none;
    user-select:none
  }
  .sidebar-section-label:first-of-type{padding-top:6px}

  /* ── Nav buttons → item sidebar verticale ───────────────────────────── */
  .nav-btn{
    width:calc(100% - 16px)!important;
    margin:0 8px 2px!important;
    padding:9px 12px!important;
    border-radius:8px!important;
    border:none!important;
    font-size:17px!important;
    justify-content:flex-start!important;
    gap:9px!important;
    flex-shrink:0;
    position:relative;
    white-space:nowrap;
    background:transparent!important
  }
  .nav-btn:hover{background:var(--bg3)!important}

  /* Indicatore laterale sinistro per item attivo */
  .nav-btn::before{
    content:'';
    position:absolute;
    left:-8px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:0;
    border-radius:0 3px 3px 0;
    background:transparent;
    transition:height .15s ease,background .15s ease
  }
  .nav-btn.active::before{
    height:60%;
    background:var(--ind-color,#4f7cff)
  }

  /* Colori indicatore per-view (matching le tron-colors esistenti) */
  .nav:has(.nav-btn.active[data-view="home"])           .nav-btn.active{--ind-color:#fb923c}
  .nav:has(.nav-btn.active[data-view="dashboard"])      .nav-btn.active{--ind-color:#4f7cff}
  .nav:has(.nav-btn.active[data-view="proiezione"])     .nav-btn.active{--ind-color:#f6ad55}
  .nav:has(.nav-btn.active[data-view="onboarding"])     .nav-btn.active{--ind-color:#38bdf8}
  .nav:has(.nav-btn.active[data-view="spedizioni"])     .nav-btn.active{--ind-color:#22c55e}
  .nav:has(.nav-btn.active[data-view="turni"])          .nav-btn.active{--ind-color:#a78bfa}
  .nav:has(.nav-btn.active[data-view="ferie"])          .nav-btn.active{--ind-color:#34d399}
  .nav:has(.nav-btn.active[data-view="premi"])          .nav-btn.active{--ind-color:#fbbf24}
  .nav:has(.nav-btn.active[data-view="downloads"])      .nav-btn.active{--ind-color:#94a3b8}
  .nav:has(.nav-btn.active[data-view="amministrazione"]).nav-btn.active{--ind-color:#f56565}
  .nav:has(.nav-btn.active[data-view="mioaccount"])     .nav-btn.active{--ind-color:#818cf8}

  /* Glow tron nella sidebar: animazione sul bottone attivo (stessa palette topbar) */
  .nav-btn.active[data-view="home"]          {animation:navTronOrange 2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="dashboard"]     {animation:navTronIndigo 2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="proiezione"]    {animation:navTronAmber  2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="onboarding"]    {animation:navTronBlue   2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="spedizioni"]    {animation:navTronForest 2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="turni"]         {animation:navTronPurple 2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="ferie"]         {animation:navTronTeal   2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="premi"]         {animation:navTronYellow 2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="downloads"]     {animation:navTronSlate  2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="amministrazione"]{animation:navTronRed   2.4s ease-in-out infinite!important}
  .nav-btn.active[data-view="mioaccount"]    {animation:navTronLavender 2.4s ease-in-out infinite!important}

  /* ── nav-month-group → footer sidebar (bottom) ──────────────────────── */
  /* ── Nav sottomenu (sidebar desktop only) ───────────────────────────── */
  .nav-sub-group{
    width:100%;
    display:flex;
    flex-direction:column;
    flex-shrink:0
  }
  .nav-sub-items{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .22s ease, opacity .18s ease;
    display:flex;
    flex-direction:column;
    gap:1px;
    padding:0 8px 0 28px
  }
  .nav-sub-group.open .nav-sub-items{
    max-height:200px;
    opacity:1
  }
  .nav-sub-btn{
    display:flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border-radius:7px;
    border:none;
    background:transparent;
    font-family:var(--font);
    font-size:12px;
    cursor:pointer;
    text-align:left;
    transition:opacity .13s;
    white-space:nowrap;
    text-decoration:none;
    width:100%
  }
  /* Colori per tipo voce */
  .nav-sub-btn.sub-mypos{       color:#38bdf8 }
  .nav-sub-btn.sub-paypos{      color:#22c55e }
  .nav-sub-btn.sub-tracking{    color:#34d399 }
  .nav-sub-btn.sub-acquisti{    color:#a78bfa }
  .nav-sub-btn.sub-calendario{  color:#4f7cff }
  .nav-sub-btn.sub-dettaglio{   color:#7c5cff }
  .nav-sub-btn.sub-turni-comm{  color:#4f7cff }
  .nav-sub-btn.sub-turni-onb{   color:#38bdf8 }
  .nav-sub-btn.sub-turni-ass{   color:#f6ad55 }
  .nav-sub-btn.sub-turni-sped{  color:#22c55e }
  .nav-sub-btn.sub-ferie-ins{   color:#4f7cff }
  .nav-sub-btn.sub-ferie-perm{  color:#a78bfa }
  .nav-sub-btn.sub-ferie-mie{   color:#34d399 }
  .nav-sub-btn.sub-util-guida{     color:#22d3ee }
  .nav-sub-btn.sub-util-pagamento{ color:#38bdf8 }
  .nav-sub-btn.sub-util-portali{   color:#c084fc }
  .nav-sub-btn.sub-util-template{  color:#22c55e }
  .nav-sub-btn.sub-proie-agenti{   color:#f6ad55 }
  .nav-sub-btn.sub-proie-rental{   color:#fb923c }
  .nav-sub-btn:hover{ opacity:.75 }
  /* Pallino colorato */
  .nav-sub-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    flex-shrink:0
  }
  .nav-sub-dot.mypos{      background:#38bdf8 }
  .nav-sub-dot.paypos{     background:#22c55e }
  .nav-sub-dot.tracking{   background:#34d399 }
  .nav-sub-dot.acquisti{   background:#a78bfa }
  .nav-sub-dot.calendario{ background:#4f7cff }
  .nav-sub-dot.dettaglio{  background:#7c5cff }
  .nav-sub-dot.turni-comm{ background:#4f7cff }
  .nav-sub-dot.turni-onb{  background:#38bdf8 }
  .nav-sub-dot.turni-ass{  background:#f6ad55 }
  .nav-sub-dot.turni-sped{ background:#22c55e }
  .nav-sub-dot.ferie-ins{  background:#4f7cff }
  .nav-sub-dot.ferie-perm{ background:#a78bfa }
  .nav-sub-dot.ferie-mie{  background:#34d399 }
  .nav-sub-dot.util-guida{     background:#22d3ee }
  .nav-sub-dot.util-pagamento{ background:#38bdf8 }
  .nav-sub-dot.util-portali{   background:#c084fc }
  .nav-sub-dot.util-template{  background:#22c55e }
  .nav-sub-dot.proie-agenti{   background:#f6ad55 }
  .nav-sub-dot.proie-rental{   background:#fb923c }

  /* ── nav-month-group → footer sidebar (bottom) ──────────────────────── */
  .nav-month-group{
    order:100;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:12px 12px 16px!important;
    border-top:1px solid var(--border);
    margin-top:auto!important;
    margin-right:0!important;
    margin-left:0!important;
    flex-shrink:0;
    align-items:center!important;
    width:100%;
    box-sizing:border-box
  }

  /* Online badge → full width nel footer, testo centrato */
  #desktopOnlineBadge{
    width:100%!important;
    box-sizing:border-box;
    padding:4px 10px!important;
    justify-content:center!important;
    border-radius:8px!important
  }

  /* Separatori data/ora: nascosti */
  .nav-dt-sep{display:none!important}

  /* Data e ora: stessa riga tramite wrapper .sidebar-dt-row */
  .sidebar-dt-row{
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    justify-content:center!important;
    gap:0;
    width:100%
  }
  .sidebar-dt-row .nav-dt-date,
  .sidebar-dt-row .nav-dt-time{
    display:inline-block!important;
    font-size:11px!important;
    flex-shrink:0
  }
  /* Separatore interno alla riga data/ora: visibile */
  .sidebar-dt-gap{
    display:inline-block!important;
    margin:0 5px;
    font-size:10px;
    opacity:.4
  }

  /* Scritta del giorno: nascosta nella sidebar */
  .nav-scritta{display:none!important}

  /* User chip → card profilo nel footer */
  #navUserChip{
    display:flex!important;
    width:100%!important;
    box-sizing:border-box;
    padding:7px 10px!important;
    border-radius:9px!important;
    max-width:none!important;
    justify-content:center!important
  }
  #navUserName{
    max-width:none!important;
    flex:0 1 auto!important;
    overflow:hidden;
    text-overflow:ellipsis
  }

  /* Icone nav-btn: +2px in sidebar */
  .nav .nav-btn svg{width:21px!important;height:21px!important}

  /* Magic-line indicator orizzontale: disabilitato in sidebar */
  .nav-ind{display:none!important}

  /* ── .main → area contenuto, centrata sul viewport (non sullo spazio disponibile) ── */
  /* Formula: margin-left = 50vw - (metà max-width + larghezza sidebar)               */
  /* = 50vw - (550px + 220px) = 50vw - 770px                                          */
  /* A 1920px: 960 - 770 = 190px → centro contenuto = 220+190+550 = 960px = centro ✓ */
  .main{
    flex:1!important;
    min-width:0!important;
    width:auto!important;
    margin-left:max(0px,calc(50vw - 770px))!important;
    margin-right:0!important
  }
}
/* ── Fine desktop sidebar ── */

/* ══════════════════════════════════════════════════════════════════════
   TAP FEEDBACK v1 — micro-pressione su tap/click
   Completa i :active mancanti. NON tocca i target che già ce l'hanno
   (.btn-glass-*, .btn-tab-off, .mob-nav-btn, .month-pill*).
   Linguaggio coerente con l'esistente: scale + cubic-bezier(.34,1.4,.64,1).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Bottoni base (.btn e varianti solide) ──────────────────────────────
   Esclude i glass-* che hanno già un loro :active con brightness.        */
.btn:not([class*="btn-glass"]):not(.btn-tab-off):active{
  transform:scale(.96);
  filter:brightness(.92);
}
/* Bottoni piccoli: pressione un filo più contenuta */
.btn-sm:not([class*="btn-glass"]):active{
  transform:scale(.94);
}
/* Stato disabilitato: nessun feedback (evita falsa interattività) */
.btn:disabled:active,
.btn[disabled]:active{
  transform:none;
  filter:none;
}

/* ── Nav buttons (sidebar desktop + topbar mobile) ──────────────────────
   .mob-nav-btn ha già il suo :active → escluso.                          */
.nav-btn:not(.mob-nav-btn):active{
  transform:scale(.95);
}

/* ── Tab ────────────────────────────────────────────────────────────── */
.tab:active{
  transform:scale(.95);
}

/* ── Card cliccabili ────────────────────────────────────────────────────
   transition:transform già presente su ognuna → la pressione è fluida.
   Scale leggero per non disturbare hover translateY/scale esistente.     */
.stat-card:active,
.cat-card:active,
.premio-card:active,
.lead-card:active,
.mini-card:active{
  transform:scale(.985);
}

/* ── Touch UX: elimina highlight blu/grigio di sistema su tap ──────────
   Solo sugli elementi interattivi sopra, non globale.                    */
.btn,.btn-sm,.nav-btn,.tab,
.stat-card,.cat-card,.premio-card,.lead-card,.mini-card{
  -webkit-tap-highlight-color:transparent;
}

/* ── Accessibilità: rispetta "riduci movimento" ─────────────────────────
   Chi ha attivato reduced-motion non vede lo scatto di scala.            */
@media(prefers-reduced-motion:reduce){
  .btn:active,.btn-sm:active,.nav-btn:active,.tab:active,
  .stat-card:active,.cat-card:active,.premio-card:active,
  .lead-card:active,.mini-card:active{
    transform:none;
  }
}
/* ── Fine tap feedback v1 ── */

/* ══════════════════════════════════════════════════════════════════════
   CENTRO NOTIFICHE v2 — bubble + panel
   ════════════════════════════════════════════════════════════════════ */

/* ── Bubble ── */
#notifWrapper { pointer-events: none; }
#notifWrapper > * { pointer-events: all; }

#notifBubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(246,173,85,.75) !important;
}
#notifBubble:active { transform: scale(.93); }

/* ── Badge ── */
#notifBubbleBadge {
  animation: ncBadgePop .25s cubic-bezier(.22,.68,0,1.4) forwards;
}
@keyframes ncBadgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Panel ── */
#notifCenterPanel { font-family: var(--font); }

/* ── Filtri categoria ── */
.nc-cat-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.nc-cat-btn:hover { color: #f6ad55; border-color: rgba(246,173,85,.35); background: rgba(246,173,85,.07); }
.nc-cat-btn.nc-active { background: rgba(246,173,85,.14); border-color: rgba(246,173,85,.45); color: #f6ad55; }

/* ── Item ── */
.nc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.nc-item:hover { background: rgba(255,255,255,0.035); }
.nc-item:last-child { border-bottom: none; }
.nc-item-unread { background: rgba(246,173,85,0.04); }

.nc-item-icon {
  font-size: 20px;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  margin-top: 1px;
}
.nc-item-body { flex: 1; min-width: 0; }
.nc-item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-item-text {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  word-break: break-word;
}
.nc-item-time {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--mono);
}
.nc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6ad55;
  flex-shrink: 0;
  margin-top: 5px;
  animation: pulse 2s infinite;
}

/* Mobile: campanella scende sotto la topbar tenendo conto della safe-area iPhone */
@media(max-width:1023px) {
  #notifWrapper { top: calc(env(safe-area-inset-top, 0px) + 66px) !important; right: 14px !important; }
}
@media(max-width:480px) {
  #notifWrapper { top: calc(env(safe-area-inset-top, 0px) + 66px) !important; right: 12px !important; }
  #notifCenterPanel { border-left: none; }
}