/* ════════════ TOPBAR — contenitore fixed unico per header+nav ════════════ */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
/* Lo spacer ha esattamente l'altezza del topbar (header + sidebar nav) */
#topbar-spacer {
  height: calc(var(--header-h) + var(--topnav-h));
  flex-shrink: 0;
}
/* Quando il sidebar è nascosto (admin panel), lo spacer si riduce */
body.admin-open #topbar-spacer {
  height: var(--header-h);
}
/* Header senza position propria — è dentro #topbar che è fixed */
header {
  position: relative !important;
  top: auto !important;
}
/* Sidebar senza position propria — è dentro #topbar che è fixed */
#sidebar {
  position: relative !important;
  top: auto !important;
}
/* ══════════════════════════════════════════════════════════════
   CNA ROMA DASHBOARD — v2026.120 "cnaflow Design System"
   Aesthetic: frosted glass, soft shadows, pill shapes,
              luminous canvas, agile & frictionless.
   Drop-in replacement for main.css — no HTML changes required.
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ── Brand · cnaflow palette ────────────────────── */
  --primary:#2563EB;
  --primary-dark:#1D4ED8;
  --primary-light:#60A5FA;
  --primary-glow:rgba(37,99,235,.15);

  /* Accent secondari (usati per categorie/badge) */
  --accent:#EC4899;
  --accent-dark:#DB2777;
  --accent-light:#F472B6;
  --success:#10B981;
  --success-light:#34D399;
  --warning:#F59E0B;
  --warning-light:#FBBF24;
  --danger:#EF4444;
  --danger-light:#F87171;
  --info:#06B6D4;
  --info-light:#22D3EE;
  --purple:#8B5CF6;
  --purple-light:#A78BFA;
  --orange:#F97316;
  --orange-light:#FB923C;

  /* ── Canvas · cnaflow ──────────────────────────── */
  --bg:#F8FAFC;            /* cnaflow bg-light */
  --bg2:#EFF6FF;           /* cnaflow bg-light-subtle */
  --surface:#FFFFFF;
  --surface2:#F8FAFC;
  --surface3:#EFF6FF;
  --surface-glass:rgba(255,255,255,.72);

  /* ── Borders / strokes ─────────────────────────── */
  --border:rgba(226,232,240,.9);     /* slate-200 */
  --border-strong:#CBD5E1;           /* slate-300 */
  --border-soft:rgba(15,23,42,.06);

  /* ── Text (slate ramp) ─────────────────────────── */
  --text:#0F172A;                    /* slate-900 */
  --text-secondary:#475569;          /* slate-600 */
  --text-tertiary:#94A3B8;           /* slate-400 */
  --text-hint:#CBD5E1;               /* slate-300 */

  /* ── Typography · cnaflow (Outfit) ─────────────── */
  --font-display:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Shadows · cnaflow ──────────────────────────── */
  --shadow-xs:0 1px 4px rgba(37,99,235,.06);
  --shadow-sm:0 2px 8px rgba(37,99,235,.08);
  --shadow-md:0 4px 16px rgba(37,99,235,.13);
  --shadow-lg:0 8px 32px rgba(37,99,235,.18);
  --shadow-xl:0 16px 48px rgba(37,99,235,.22);
  --shadow-color:0 8px 24px rgba(37,99,235,.28);
  --shadow-glass:0 1px 4px rgba(37,99,235,.06), 0 8px 30px rgba(37,99,235,.08);
  --shadow-pill:0 2px 12px rgba(37,99,235,.08);

  /* ── Gradients (più sobri) ─────────────────────── */
  --grad-primary:linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%);
  --grad-accent:linear-gradient(135deg,#EC4899 0%,#F472B6 100%);
  --grad-success:linear-gradient(135deg,#10B981 0%,#34D399 100%);
  --grad-warning:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);
  --grad-info:linear-gradient(135deg,#06B6D4 0%,#22D3EE 100%);
  --grad-purple:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%);
  --grad-orange:linear-gradient(135deg,#F97316 0%,#FB923C 100%);
  --grad-rainbow:linear-gradient(135deg,#005CA9 0%,#06B6D4 50%,#8B5CF6 100%);
  --grad-ocean:linear-gradient(135deg,#1E40AF 0%,#1D4ED8 100%);

  /* ── Spacing & radius (più rotondo) ────────────── */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;

  /* Header */
  --header-h:96px;

  /* Transitions */
  --transition:all .25s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:all .4s cubic-bezier(0.4,0,0.2,1);
}

/* ── Dark Mode ─────────────────────────────────── */
body.dark-mode{
  --bg:#0A0F1E;
  --bg2:#111827;
  --surface:#111827;
  --surface2:#1E2940;
  --surface3:#1E2940;
  --surface-glass:rgba(17,26,46,.72);
  --border:rgba(51,65,85,.6);
  --border-strong:#334155;
  --border-soft:rgba(255,255,255,.05);
  --text:#FFFFFF;
  --text-secondary:#BFDBFE;
  --text-tertiary:#93C5FD;
  --text-hint:#4B6CB7;
  --shadow-glass:0 1px 3px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.3);
}
body.dark-mode header{background:rgba(10,15,30,.8);border-bottom-color:#1E2940;}

/* ── Alias retro-compatibili (per non rompere markup esistente) ─ */
:root{
  --blue:var(--primary);
  --blue-dim:var(--primary-dark);
  --blue-glow:var(--primary-glow);
  --accent2:var(--info);
  --accent3:var(--purple);
  --green:var(--success);
  --red:var(--danger);
  --text-sub:var(--text-secondary);
  --text-dim:var(--text-tertiary);
  --white:#ffffff;
  --grad-blue:var(--grad-primary);
  --grad-head:var(--grad-primary);
  --grad-kpi1:var(--grad-primary);
  --grad-kpi2:var(--grad-orange);
  --grad-kpi3:var(--grad-success);
  --grad-kpi4:var(--grad-accent);
  --grad-sunset:linear-gradient(135deg,#F97316 0%,#EC4899 100%);
  --shadow-glow:var(--shadow-md);
  --radius:var(--radius-lg);
  --radius-xs:var(--radius-sm);
  --font:var(--font-body);
  --border2:var(--border-strong);
  --gray-100:var(--border);
  --gray-400:var(--text-tertiary);
}

/* ════════════ RESET ════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
html{color-scheme:light;}
body.dark-mode{color-scheme:dark;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y: none;
}
/* Soft luminous background blobs */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 8% 0%, rgba(0,92,169,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(139,92,246,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(6,182,212,.04) 0%, transparent 60%);
}
#app,#login-page{position:relative;z-index:1;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;}

/* ════════════ LOADING ════════════ */
#loading-overlay{
  position:fixed;inset:0;background:rgba(241,245,249,.7);z-index:9000;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.spinner{width:40px;height:40px;border:3px solid rgba(0,92,169,.12);border-top-color:var(--primary);border-radius:50%;animation:spin .65s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-msg{font-size:11px;font-weight:700;color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;}

/* ════════════ LOGIN ════════════ */
#login-page{
  display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(ellipse 80% 80% at 20% 10%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 70% at 90% 100%, rgba(139,92,246,.16) 0%, transparent 55%),
    linear-gradient(90deg,#005CA9 0%,#5B5FEF 100%);
  position:relative;overflow:hidden;
}
.login-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-radius:var(--radius-2xl);
  padding:48px 40px;width:100%;max-width:420px;
  box-shadow:0 30px 80px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.8) inset;
  border:1px solid rgba(255,255,255,.6);
  position:relative;z-index:1;overflow:hidden;
}
.login-logo{text-align:center;margin-bottom:24px;display:flex;justify-content:center;align-items:center;}
.login-logo img{height:78px;width:auto;}
.login-title{
  font-family:'Inter',var(--font-display);font-size:52px;font-weight:800;text-align:center;
  margin-bottom:4px;color:var(--text);letter-spacing:-0.06em;line-height:1;
}
.login-erp-sub{font-family:'Inter',var(--font-display);font-size:13px;font-style:italic;font-weight:400;color:var(--text-secondary);text-align:center;margin-bottom:28px;letter-spacing:0.01em;}
.login-sub{font-size:14px;color:var(--text-secondary);text-align:center;margin-bottom:28px;font-weight:500;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.form-input{
  width:100%;padding:12px 16px;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:14px;font-weight:500;
  color:var(--text);background:rgba(255,255,255,.6);outline:none;transition:var(--transition);
}
.form-input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-glow);}
.form-input::placeholder{color:var(--text-hint);}
.login-error{color:var(--danger);font-size:13px;margin-bottom:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);padding:10px 14px;border-radius:var(--radius-sm);display:none;font-weight:500;}
.btn-login{
  width:100%;padding:14px;background:var(--primary);color:#fff;border:none;
  border-radius:var(--radius-pill);font-family:var(--font-body);font-size:14px;font-weight:700;
  cursor:pointer;transition:var(--transition);margin-top:8px;
  box-shadow:0 8px 24px rgba(0,92,169,.32);letter-spacing:.01em;
}
.btn-login:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,92,169,.4);}
.btn-login:disabled{opacity:.55;transform:none;cursor:not-allowed;}
.btn-request-access{
  display:block;width:100%;text-align:center;background:none;border:none;
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--primary);
  cursor:pointer;margin-top:16px;padding:8px;text-decoration:underline;text-underline-offset:3px;
}
.btn-request-access:hover{color:var(--primary-dark);}

/* ════════════ APP ════════════ */
#app{display:none;}

/* ════════════ HEADER (frosted glass, light) ════════════ */
header{
  background:#ffffff;
  padding:0 32px;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:200;
  border-bottom:1px solid var(--border);
  box-shadow:none;
}
body.dark-mode header{
  background:rgba(17,26,46,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-left{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.logo-img{height:60px;width:auto;object-fit:contain;flex-shrink:0;}
.logo-fallback{display:none;background:var(--primary);color:#fff;font-weight:800;font-size:13px;padding:6px 12px;border-radius:var(--radius-sm);flex-shrink:0;letter-spacing:.02em;}
.header-title{
  font-size:22px;font-weight:900;letter-spacing:-0.02em;
  white-space:nowrap;color:#ffffff;font-family:var(--font-display);
  padding-left:0;border-left:none;
  display:flex;align-items:center;line-height:1;
}
.header-subtitle{
  font-size:9px;font-weight:400;font-style:italic;letter-spacing:0.01em;
  color:rgba(255,255,255,.75);font-family:'Inter',var(--font-display);
  white-space:nowrap;
}
.header-right-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.header-divider{width:1px;height:24px;background:var(--border);flex-shrink:0;margin:0 4px;}

/* User chip — pill */
.user-chip{
  display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;
  background:linear-gradient(120deg,rgba(171,174,243,.45) 0%,rgba(145,149,238,.45) 20%,rgba(123,127,233,.45) 40%,rgba(106,110,230,.45) 60%,rgba(95,99,228,.45) 80%,rgba(91,95,239,.45) 100%);
  backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:#3730A3;
  white-space:nowrap;box-shadow:0 2px 10px rgba(91,95,239,.18);transition:var(--transition);
}
.user-chip:hover{background:linear-gradient(120deg,rgba(186,189,245,.55) 0%,rgba(161,164,241,.55) 20%,rgba(139,143,236,.55) 40%,rgba(121,125,233,.55) 60%,rgba(109,113,231,.55) 80%,rgba(104,108,242,.55) 100%);transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,95,239,.25);}
body.dark-mode .user-chip{background:linear-gradient(120deg,rgba(171,174,243,.45) 0%,rgba(145,149,238,.45) 20%,rgba(123,127,233,.45) 40%,rgba(106,110,230,.45) 60%,rgba(95,99,228,.45) 80%,rgba(91,95,239,.45) 100%);border-color:rgba(255,255,255,.3);color:#3730A3;}
.user-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 8px var(--success);}

/* ── HAMBURGER ── */
.hamburger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;padding:8px;
  background:rgba(255,255,255,.7);border:1px solid var(--border);
  border-radius:var(--radius-md);cursor:pointer;flex-shrink:0;
}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .2s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── DRAWER MENU ── */
/* ── Menu Sandwich (drawer mobile) ── */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 300px;
  max-width: 88vw;
  background: #fff;
  box-shadow: -4px 0 32px rgba(15,23,42,.14);
  z-index: 399;
  flex-direction: column;
  overflow-y: auto;
  animation: drawerIn .22s cubic-bezier(.4,0,.2,1);
}
body.dark-mode .mobile-drawer { background: #0f1a2e; }
@keyframes drawerIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mobile-drawer.open { display: flex; }

/* Overlay scuro dietro il drawer */
.mobile-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.32);
  z-index: 398;
  pointer-events: none;   /* non blocca click quando chiuso */
  animation: fadeIn .2s ease;
}
.mobile-drawer-overlay.open { display: block; pointer-events: auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Header drawer */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  position: sticky; top: 0; z-index: 1;
}
.drawer-header-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.drawer-header-sub { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px; }
.drawer-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.drawer-close-btn:hover { background: rgba(255,255,255,.28); }

/* Corpo drawer */
.drawer-body {
  flex: 1; display: flex; flex-direction: column;
  gap: 2px; padding: 12px;
}

/* Label sezione */
.drawer-section-label {
  font-size: 10px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 8px 4px;
}
.drawer-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* Voci menu */
.mobile-drawer .btn {
  width: 100%; justify-content: flex-start;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  gap: 12px;
}
.mobile-drawer .btn .icon-badge {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
}

/* ════════════ BUTTONS ════════════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:var(--transition);
  white-space:nowrap;letter-spacing:.005em;line-height:1;
}
.btn-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 4px 14px rgba(0,92,169,.28);
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,92,169,.36);}
.btn-primary:active{transform:translateY(0);}

.btn-secondary{
  background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.08));color:var(--text);
  border:1px solid rgba(245,158,11,0.3);box-shadow:var(--shadow-pill);
}
.btn-secondary:hover{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(245,158,11,0.15));border-color:rgba(245,158,11,0.5);transform:translateY(-1px);box-shadow:var(--shadow-md);}
body.dark-mode .btn-secondary{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(245,158,11,0.1));color:var(--text);border-color:rgba(245,158,11,0.4);}

.btn-danger{
  background:var(--danger);color:#fff;
  box-shadow:0 4px 14px rgba(239,68,68,.28);
}
.btn-danger:hover{background:#DC2626;transform:translateY(-1px);box-shadow:0 8px 20px rgba(239,68,68,.36);}

.btn-admin{
  background:rgba(139,92,246,.08);color:var(--purple);
  border:1px solid rgba(139,92,246,.25);
}
.btn-admin:hover{background:rgba(139,92,246,.14);border-color:var(--purple);}

.btn-logout{background:rgba(255,255,255,.7);color:var(--text-secondary);border:1px solid var(--border);}
.btn-logout:hover{background:#fff;color:var(--text);border-color:var(--border-strong);}

.btn-info{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(139,92,246,0.08));color:var(--text-secondary);border:1px solid rgba(139,92,246,0.3);}
.btn-info:hover{background:linear-gradient(135deg,rgba(139,92,246,0.25),rgba(139,92,246,0.15));color:var(--primary);border-color:rgba(139,92,246,0.5);}

/* In header tutti i bottoni mantengono stile light/glass */
header .btn{box-shadow:var(--shadow-pill);}

/* ════════════ TABS ════════════ */
.tabs-bar{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:10px 32px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:var(--header-h);z-index:100;
}
body.dark-mode .tabs-bar{background:rgba(17,26,46,.6);}
.tabs-bar::-webkit-scrollbar{display:none;}
.tab-btn{
  padding:10px 20px;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text-secondary);background:transparent;border:none;
  border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;
  transition:var(--transition);display:inline-flex;align-items:center;gap:8px;
  letter-spacing:0;text-transform:none;position:relative;
}
.tab-btn:hover{color:var(--primary);background:rgba(0,92,169,.06);}
.tab-btn.active{
  color:var(--primary);background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.06), 0 0 0 1px var(--border);
  font-weight:700;
}
body.dark-mode .tab-btn.active{background:var(--surface);}

/* ════════════ UPLOAD ════════════ */
#upload-zone{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-h));padding:40px 20px;}
.upload-card{
  background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:2px dashed var(--primary);border-radius:var(--radius-xl);
  padding:56px;text-align:center;max-width:480px;width:100%;
  transition:var(--transition);box-shadow:var(--shadow-glass);
}
.upload-card:hover,.upload-card.drag-over{
  border-color:var(--primary-dark);background:rgba(0,92,169,.04);
  box-shadow:var(--shadow-lg);transform:translateY(-4px);
}
.upload-icon{
  width:72px;height:72px;background:var(--grad-primary);border:none;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  box-shadow:0 12px 30px rgba(0,92,169,.32);color:#fff;
}
.upload-title{font-family:var(--font-display);font-size:20px;font-weight:800;margin-bottom:8px;color:var(--text);letter-spacing:-0.02em;}
.upload-sub{font-size:14px;color:var(--text-secondary);margin-bottom:24px;line-height:1.6;}

/* ════════════ MAIN CONTENT ════════════ */
.page{display:none;padding:14px 32px 32px;max-width:1600px;margin:0 auto;}
.page.active{display:block;}

/* ════════════ FILTERS BAR ════════════ */
.filters-bar{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius-xl);padding:18px 22px;margin-bottom:24px;
  border:1px solid var(--border);display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  box-shadow:var(--shadow-glass);
}
body.dark-mode .filters-bar{background:rgba(17,26,46,.6);}
.filter-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px;max-width:240px;}
.filter-group label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;}
.filter-group input[type="text"]{
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);
  background:#fff;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);padding:9px 16px;
  outline:none;transition:var(--transition);box-shadow:var(--shadow-pill);
  width:100%;
}
.filter-group input[type="text"]:hover{border-color:var(--text-tertiary);}
.filter-group input[type="text"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.filter-group input[type="text"]::placeholder{color:var(--text-hint);font-weight:500;}
body.dark-mode .filter-group input[type="text"]{background:var(--surface);color:var(--text);}

select{
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);
  background:#fff;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);padding:9px 16px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
  outline:none;transition:var(--transition);
  box-shadow:var(--shadow-pill);
}
select:hover{border-color:var(--text-tertiary);}
select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
body.dark-mode select{background:var(--surface);color:var(--text);}

.filter-actions{display:flex;gap:8px;align-items:flex-end;margin-left:auto;}

/* ════════════ KPI CARDS ════════════ */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px;}
.kpi-card{
  background:#fff;border-radius:var(--radius-2xl);padding:26px 28px;
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-glass);
  display:flex;flex-direction:column;gap:18px;
  min-height:170px;
}
body.dark-mode .kpi-card{background:var(--surface);}
.kpi-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,0.15), 0 0 40px rgba(0,92,169,0.2);
}
.kpi-card.c1:hover{box-shadow:0 20px 50px rgba(0,92,169,0.3), 0 0 40px rgba(0,92,169,0.4);border-color:rgba(0,92,169,0.5);}
.kpi-card.c2:hover{box-shadow:0 20px 50px rgba(234,88,12,0.3), 0 0 40px rgba(234,88,12,0.4);border-color:rgba(234,88,12,0.5);}
.kpi-card.c3:hover{box-shadow:0 20px 50px rgba(16,185,129,0.3), 0 0 40px rgba(16,185,129,0.4);border-color:rgba(16,185,129,0.5);}
.kpi-card.c4:hover{box-shadow:0 20px 50px rgba(139,92,246,0.3), 0 0 40px rgba(139,92,246,0.4);border-color:rgba(139,92,246,0.5);}
/* sottile linea colorata in alto */
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:.85;
}
.kpi-card.c1::before{background:var(--primary);}
.kpi-card.c2::before{background:var(--orange);}
.kpi-card.c3::before{background:var(--success);}
.kpi-card.c4::before{background:var(--accent);}
/* glow d'angolo molto soft */
.kpi-card::after{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;
  opacity:.12;pointer-events:none;
}
.kpi-card.c1::after{background:radial-gradient(circle,var(--primary),transparent 70%);}
.kpi-card.c2::after{background:radial-gradient(circle,var(--orange),transparent 70%);}
.kpi-card.c3::after{background:radial-gradient(circle,var(--success),transparent 70%);}
.kpi-card.c4::after{background:radial-gradient(circle,var(--accent),transparent 70%);}

.kpi-label{
  font-size:10px;font-weight:700;color:var(--text-tertiary);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:0;
}
.kpi-value{
  font-family:var(--font-display);font-size:38px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.04em;color:var(--primary);
  background:none;-webkit-text-fill-color:initial;background-clip:initial;-webkit-background-clip:initial;
}
.kpi-sub{
  font-size:12px;color:var(--text-tertiary);margin-top:auto;
  padding-top:14px;border-top:1px solid var(--border);font-weight:500;
}
.kpi-delta{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;letter-spacing:.01em;width:fit-content;
}
.kpi-delta.pos{background:rgba(16,185,129,.12);color:#047857;}
.kpi-delta.neg{background:rgba(239,68,68,.12);color:#B91C1C;}
.kpi-delta.neu{background:var(--surface3);color:var(--text-secondary);}

/* ════════════ SECTION TITLE ════════════ */
.section-title{
  font-family:var(--font-display);font-size:18px;font-weight:800;
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
  letter-spacing:-0.02em;text-transform:none;color:var(--text);
}
.section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--primary);box-shadow:0 0 12px var(--primary-glow);}
.data-info{
  display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);
  margin-bottom:20px;flex-wrap:wrap;
}
.info-chip{
  background:rgba(0,92,169,.1);color:var(--primary);border:1px solid rgba(0,92,169,.2);
  padding:5px 14px;border-radius:var(--radius-pill);font-weight:700;font-size:12px;
}

/* ════════════ REPORT CARDS ════════════ */
.reports-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.report-card{
  background:#fff;border-radius:var(--radius-xl);border:1px solid var(--border);
  overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-glass);
}
body.dark-mode .report-card{background:var(--surface);}
.report-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 12px 40px rgba(0,92,169,0.15), 0 0 30px rgba(0,92,169,0.1);
  border-color:rgba(0,92,169,0.3);
}
.report-card.full{grid-column:1/-1;}
.report-header{
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);background:transparent;
}
.report-title{
  font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:none;
  letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;color:var(--text);
}
.report-badge{
  font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);
  letter-spacing:.01em;background:var(--surface3);color:var(--text-secondary);
}
.chart-wrap{
  padding:20px 22px;height:240px;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  border-radius:8px;
}
.chart-wrap:hover{
  transform:scale(1.01);
  box-shadow:inset 0 0 25px rgba(0,92,169,0.08), 0 0 20px rgba(0,92,169,0.15);
  background:rgba(0,92,169,0.02);
}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ════════════ TABLES ════════════ */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;border-radius:10px;overflow:hidden;}
thead tr{background:var(--surface2);}
body.dark-mode thead tr{background:var(--surface3);}
th{
  padding:14px 18px;text-align:center;font-size:11px;font-weight:700;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--border);vertical-align:top;
}
th:hover{
  color:var(--text-secondary);
}
th.sort-asc::after{content:' ↑';color:var(--primary);animation:pulseGlow 1.5s infinite;}
th.sort-desc::after{content:' ↓';color:var(--primary);animation:pulseGlow 1.5s infinite;}

@keyframes pulseGlow{
  0%,100%{text-shadow:0 0 5px rgba(0,92,169,0.5);}
  50%{text-shadow:0 0 15px rgba(0,92,169,0.8),0 0 25px rgba(0,92,169,0.4);}
}
th:not(:first-child){text-align:right;}
td{padding:13px 18px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--text);}
td:not(:first-child){text-align:right;font-size:13px;color:var(--text-secondary);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background-color .15s;}
tbody tr:hover td{background:rgba(0,92,169,.035);}
tfoot tr td{
  font-weight:800;font-size:13px;border-top:2px solid var(--primary);
  background:var(--surface2);padding:13px 18px;color:var(--text);
}
.r-tiporete .report-badge{background:rgba(0,92,169,.12);color:var(--primary);}
.r-promotore .report-badge{background:rgba(249,115,22,.12);color:var(--orange);}
.r-acuradi .report-badge{background:rgba(139,92,246,.12);color:var(--purple);}

/* ── GROWTH ── */
.grow-pos{color:var(--success);font-weight:700;}
.grow-neg{color:var(--danger);font-weight:700;}
.grow-zero{color:var(--text-tertiary);font-weight:600;}
.pct-bar-wrap{display:flex;align-items:center;gap:6px;}
.pct-bar{height:5px;border-radius:3px;background:var(--primary);min-width:2px;opacity:.7;}

/* ════════════ ADMIN TABS ════════════ */
.admin-tabs{
  display:flex;gap:4px;border-bottom:1px solid var(--border);
  margin-bottom:24px;overflow-x:auto;scrollbar-width:none;padding-bottom:12px;
}
.admin-tab{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text-secondary);background:transparent;border:none;
  border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;
  transition:var(--transition);text-transform:none;letter-spacing:0;
}
.admin-tab:hover{color:var(--primary);background:rgba(0,92,169,.06);}
.admin-tab.active{color:#fff;background:var(--primary);box-shadow:0 4px 14px rgba(0,92,169,.28);font-weight:700;}
.atab-content{display:none;}
.atab-content.active{display:block;}

/* ════════════ LOG TABLE ════════════ */
.log-esito-ok{
  display:inline-flex;align-items:center;gap:3px;padding:3px 10px;
  border-radius:var(--radius-pill);font-size:11px;font-weight:700;
  background:rgba(16,185,129,.12);color:#047857;
}
.log-esito-fail{
  display:inline-flex;align-items:center;gap:3px;padding:3px 10px;
  border-radius:var(--radius-pill);font-size:11px;font-weight:700;
  background:rgba(239,68,68,.12);color:#B91C1C;
}
.log-kpi{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;}
.log-kpi-val{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--primary);letter-spacing:-0.025em;}
.log-kpi-lbl{font-size:11px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;}

/* ════════════ USERS TABLE ACTIONS ════════════ */
.user-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}

/* ════════════ PROMOTORE CARDS ════════════ */
.promo-cards-grid,#promo-cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:20px;margin-bottom:24px;
}
.promo-card{
  background:#fff;border-radius:var(--radius-xl);border:1px solid var(--border);
  overflow:hidden;box-shadow:var(--shadow-glass);transition:var(--transition);
}
body.dark-mode .promo-card{background:var(--surface);}
.promo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.promo-card-header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.promo-card-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.promo-card-total{
  font-size:11px;font-weight:700;color:var(--primary);
  background:rgba(0,92,169,.1);border:1px solid rgba(0,92,169,.2);
  padding:4px 12px;border-radius:var(--radius-pill);
}
.promo-card-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--border);}
.promo-kpi{padding:10px 12px;text-align:right;border-right:1px solid var(--border);}
.promo-kpi:last-child{border-right:none;}
.promo-kpi-label{font-size:9px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;text-align:right;}
.promo-kpi-value{font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-0.02em;}
.promo-anni-table{width:100%;border-collapse:collapse;font-size:12px;}
.promo-anni-table th{padding:7px 12px;text-align:right;font-size:9px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;background:var(--surface2);letter-spacing:.05em;}
.promo-anni-table th:not(:first-child){text-align:right;}
.promo-anni-table td{padding:8px 12px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--text);text-align:right;}
.promo-anni-table td:first-child{text-align:right;}
.promo-anni-table td:not(:first-child){text-align:right;color:var(--text-secondary);}
.promo-anni-table tr:hover td{background:rgba(0,92,169,.035);}
.delta-pos{color:var(--success);font-weight:700;}
.delta-neg{color:var(--danger);font-weight:700;}
.delta-na{color:var(--text-tertiary);}
.promo-spark{padding:8px 12px 14px;}

/* ════════════ TREND TABLE ════════════ */
.trend-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.trend-table{min-width:600px;}
.trend-table th,.trend-table td{white-space:nowrap;}
.trend-table tbody tr{
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:default;
}
.trend-table tbody tr:hover{
  background:linear-gradient(90deg,rgba(0,92,169,0.05),rgba(0,92,169,0.12),rgba(0,92,169,0.05))!important;
  transform:scale(1.005);
  box-shadow:0 0 20px rgba(0,92,169,0.15), inset 0 0 15px rgba(0,92,169,0.08);
}
.trend-table tbody tr:hover td{
  color:var(--primary);
  font-weight:600;
}
.trend-table tbody tr:hover td:first-child{
  color:#005CA9;
  text-shadow:0 0 10px rgba(0,92,169,0.3);
}

/* ════════════ ADMIN PANEL ════════════ */
/* ════════════ ADMIN PANEL ════════════ */
#admin-panel{display:none;padding:28px 32px;max-width:1600px;margin:0 auto;}

/* Header rinnovato */
.admin-header-new{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
  padding:20px 24px;
  background:linear-gradient(135deg,rgba(0,92,169,.06) 0%,rgba(0,92,169,.02) 100%);
  border:1px solid rgba(0,92,169,.12);
  border-radius:16px;
}
.admin-header-left{display:flex;align-items:center;gap:16px;}
.admin-header-icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--primary),#1a7fe0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,92,169,.3);
  flex-shrink:0;
}
.admin-header-icon svg{stroke:#fff;}
.admin-header-title{
  font-size:20px;font-weight:800;letter-spacing:-0.03em;
  color:var(--text);font-family:var(--font-display);margin:0 0 2px 0;
}
.admin-header-subtitle{font-size:12px;color:var(--text-tertiary);margin:0;font-weight:500;}
.admin-btn-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:1.5px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text-secondary);
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);transition:var(--transition);
}
.admin-btn-back:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,92,169,.04);}

/* Tabs rinnovati */
.admin-tabs-new{
  display:flex;gap:6px;margin-bottom:22px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:5px;width:fit-content;
}
.admin-tab-new{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:none;border-radius:8px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text-tertiary);background:transparent;
  cursor:pointer;white-space:nowrap;transition:var(--transition);
}
.admin-tab-new:hover{color:var(--text);background:var(--surface);}
.admin-tab-new.active{
  color:var(--primary);background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-weight:700;
}
body.dark-mode .admin-tab-new.active{background:var(--surface3);}
.admin-tab-icon{display:flex;align-items:center;opacity:.7;}
.admin-tab-new.active .admin-tab-icon{opacity:1;}

.atab-content{display:none;}
.atab-content.active{display:block;}

/* Grid e card rinnovate */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.admin-card-new{
  background:var(--surface);border-radius:14px;border:1px solid var(--border);
  overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:box-shadow .2s;
}
.admin-card-new:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);}
.admin-card-head{
  padding:14px 18px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.admin-card-head-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.admin-card-body{padding:18px 20px;}
.admin-badge-count{
  margin-left:auto;padding:2px 10px;
  background:rgba(0,92,169,.1);color:var(--primary);
  border-radius:20px;font-size:11px;font-weight:700;
}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fgs{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.fgs label{font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;}
.fgs input{
  width:100%;padding:9px 14px;border:1.5px solid var(--border);
  border-radius:8px;font-family:var(--font-body);font-size:13px;
  color:var(--text);background:var(--surface);outline:none;transition:var(--transition);
  box-sizing:border-box;
}
body.dark-mode .fgs input{background:var(--surface2);}
.fgs input::placeholder{color:var(--text-hint);}
.fgs input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.form-err{color:var(--danger);font-size:11px;margin-top:2px;display:none;}

/* Users table */
.users-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.users-table th{padding:12px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.07em;border-bottom:1.5px solid var(--border);}
.users-table td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
.users-table tr:last-child td{border-bottom:none;}
.users-table tr{transition:background-color .15s;}
.users-table tr:hover td{background:rgba(0,92,169,.03);}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.01em;}
.badge-admin{background:var(--primary);color:#fff;}
.badge-user{background:var(--surface3);color:var(--text-secondary);}
.badge-on{background:rgba(16,185,129,.12);color:#047857;}
.badge-off{background:rgba(239,68,68,.12);color:#B91C1C;}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:8px;}

/* Role cards */
.role-card{
  border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;background:var(--surface2);
  border-left:3px solid var(--rc,var(--primary));
}
.role-card strong{display:block;font-size:12px;margin-bottom:5px;color:var(--text);}
.role-card span{font-size:11px;color:var(--text-tertiary);line-height:1.5;}

/* Permessi granulari */
.perm-grid-box{
  border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;background:var(--surface);
}
.perm-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;
}
.perm-card strong{display:block;font-size:11px;margin-bottom:8px;}
.perm-check{
  display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--text-secondary);
  cursor:pointer;margin-bottom:5px;
}
.perm-check:last-child{margin-bottom:0;}
.perm-check input{cursor:pointer;accent-color:var(--primary);}
.perm-save-bar{
  margin-top:12px;padding:8px 12px;
  background:rgba(16,185,129,.1);color:#047857;
  border-radius:7px;font-size:11px;text-align:center;font-weight:600;
}

/* Log filters inline */
.log-filters-inline{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}

/* ════════════ TOAST ════════════ */
#toast{
  position:fixed;bottom:28px;right:28px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--text);border:1px solid var(--border);
  padding:12px 18px;border-radius:var(--radius-md);
  font-size:13px;font-weight:600;
  opacity:0;transform:translateY(10px);transition:all .25s;
  z-index:9999;pointer-events:none;max-width:320px;
  box-shadow:var(--shadow-lg);
}
body.dark-mode #toast{background:rgba(17,26,46,.95);}
#toast.show{opacity:1;transform:translateY(0);}
#toast.success{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#047857;}
#toast.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#B91C1C;}

/* ════════════ MODAL (overrides usati nel JS) ════════════ */
#modal-pwd > div{
  border:1px solid var(--border) !important;color:var(--text) !important;
  box-shadow:var(--shadow-xl) !important;border-radius:var(--radius-xl) !important;
}
#modal-pwd > div span{color:var(--text) !important;}
#modal-pwd > div b{color:var(--text) !important;}

/* ════════════ ANAGRAFICHE TAB ════════════ */
.ana-filters-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  column-gap:0;row-gap:0;margin-bottom:6px;
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-pill);background:#fff;
}
body.dark-mode .ana-filters-grid{background:var(--surface);}
.ana-filter-group{display:block;height:36px;line-height:36px;}
.ana-filter-group label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ana-filter-group input,.ana-filter-group select{
  font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--text);
  background:transparent;border:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  border-radius:0;padding:0 14px;outline:none;transition:var(--transition);
  width:100%;height:36px;line-height:36px;display:block;box-sizing:border-box;margin:0;vertical-align:top;
  box-shadow:none;
}
.ana-filter-group input:focus,.ana-filter-group select:focus{
  background:rgba(0,92,169,.05);box-shadow:inset 0 0 0 2px var(--primary);
  z-index:2;position:relative;
}
.ana-filter-group input::placeholder{color:var(--text-secondary);font-weight:500;opacity:1;}
.ana-filter-group select:has(option[value=""]:checked){color:var(--text-secondary);font-weight:500;}
.ana-filter-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;cursor:pointer;
}
.ana-filter-group select option{background:var(--surface);color:var(--text);}
.ana-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;margin-top:10px;border-top:1px solid var(--border);}

/* Anagrafiche loading status */
.ana-loader{display:none;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:22px;}
.ana-loader.active{display:flex;}
.ana-loader-title{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--primary);letter-spacing:-0.02em;}
.ana-loader-spinner{width:48px;height:48px;border:3px solid rgba(0,92,169,.12);border-top-color:var(--primary);border-radius:50%;animation:spin .65s linear infinite;}
.ana-loader-msg{font-size:13px;color:var(--text-secondary);min-height:18px;font-weight:500;}
.ana-progress-bar{width:100%;max-width:420px;height:8px;background:var(--surface3);border-radius:var(--radius-pill);overflow:hidden;}
.ana-progress-fill{height:100%;background:var(--grad-primary);width:0;transition:width .3s;box-shadow:0 0 12px rgba(0,92,169,.4);}
.ana-status-table{
  width:100%;max-width:420px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-glass);
}
body.dark-mode .ana-status-table{background:var(--surface);}
.ana-status-row{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;font-size:13px;border-bottom:1px solid var(--border);}
.ana-status-row:last-child{border-bottom:none;}
.ana-status-row .ana-sname{font-weight:600;color:var(--text-secondary);}
.ana-status-row .ana-sval{color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-weight:500;}
.ana-status-row.loading .ana-sval{color:var(--warning);font-weight:700;}
.ana-status-row.done .ana-sval{color:var(--success);font-weight:700;}

/* Anagrafiche data panel */
.ana-data-card{
  background:#fff;border-radius:var(--radius-xl);border:1px solid var(--border);
  overflow:hidden;box-shadow:var(--shadow-glass);
}
body.dark-mode .ana-data-card{background:var(--surface);}
.ana-data-header{
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;
}
.ana-data-title{
  font-family:var(--font-display);font-size:14px;font-weight:700;
  text-transform:none;letter-spacing:-0.01em;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.ana-data-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.ana-sel-chip{
  font-size:11px;font-weight:700;padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--accent);color:#fff;border:none;box-shadow:0 4px 12px rgba(236,72,153,.25);
}
.ana-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ana-table{width:100%;border-collapse:collapse;font-size:12px;min-width:1800px;}
.ana-table thead{
  position:sticky;top:0;z-index:5;
  background:var(--surface2);
  box-shadow:0 1px 0 var(--border-strong);
}
body.dark-mode .ana-table thead{background:var(--surface3);}
.ana-table th{
  padding:14px;text-align:left;font-size:11px;font-weight:700;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;border:none;cursor:default;background:transparent;
}
.ana-table th.col-check{width:40px;padding:14px 10px;text-align:center;}
.ana-table td{
  padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:left;font-size:12px;
  transition:background-color .15s;
}
.ana-table td.col-check{text-align:center;padding:12px;}
.ana-table tbody tr{cursor:pointer;}
.ana-table tbody tr:nth-child(even) td{background:rgba(15,23,42,.015);}
.ana-table tbody tr:nth-child(odd) td{background:#fff;}
body.dark-mode .ana-table tbody tr:nth-child(odd) td{background:var(--surface);}
body.dark-mode .ana-table tbody tr:nth-child(even) td{background:var(--surface2);}
.ana-table tbody tr:hover td{background:rgba(0,92,169,.06)!important;}
.ana-table tbody tr.selected td{background:rgba(236,72,153,.06) !important;border-left:3px solid var(--accent);}
.ana-table input[type="checkbox"]{accent-color:var(--primary);cursor:pointer;width:16px;height:16px;}
.ana-empty{text-align:center;padding:60px 20px;color:var(--text-tertiary);font-size:14px;font-weight:500;}

/* ════════════ RESPONSIVE ════════════ */
@media(max-width:1024px){
  .kpi-strip{grid-template-columns:repeat(2,1fr);}
  .reports-grid{grid-template-columns:1fr;}
  .report-card.full{grid-column:1;}
  .admin-grid{grid-template-columns:1fr;}
  .promo-cards-grid,#promo-cards-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  header{padding:0 16px;}
  .logo-img{height:38px;}
  .header-title{font-size:14px;padding-left:10px;}
  .header-left{gap:10px;}
  .header-right-wrap .user-chip .user-name{display:none;}
  .tabs-bar{padding:8px 12px;}
  .tab-btn{padding:8px 14px;font-size:12px;}
  .page{padding:16px;}#admin-panel{padding:16px;}
  .filters-bar{gap:10px;padding:14px 16px;border-radius:var(--radius-lg);}
  .filter-group{min-width:120px;max-width:none;flex:1 1 calc(50% - 10px);}
  .filter-actions{width:100%;justify-content:flex-end;}
  .kpi-strip{grid-template-columns:repeat(2,1fr);gap:12px;}
  .kpi-card{padding:18px 18px;min-height:140px;}
  .kpi-value{font-size:26px;}
  .upload-card{padding:36px 22px;}
  #upload-zone{min-height:calc(100vh - var(--header-h));}
  .form-row{grid-template-columns:1fr;}
  .trend-table{min-width:500px;}
  .admin-header h2{font-size:20px;}
}
@media(max-width:480px){
  .kpi-strip{grid-template-columns:1fr 1fr;gap:10px;}
  .kpi-card{padding:14px;min-height:120px;border-radius:var(--radius-lg);}
  .kpi-value{font-size:22px;}
  table{font-size:12px;}
  th,td{padding:9px 12px;}
  .ana-filters-grid{grid-template-columns:1fr 1fr;}
  .btn{padding:8px 14px;font-size:12px;}
}

/* ════════════════════════════════════════════════════════════════
   BADGE RUOLI - Commerciale e Operatore
   ════════════════════════════════════════════════════════════════ */

.badge-commerciale {
  background: linear-gradient(135deg, #FF8C00 0%, #FF7F00 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

.badge-operatore {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

.badge-supervisore {
  background: linear-gradient(135deg, #0FA3F2 0%, #0084FF 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}


/* ════════════════════════════════════════════════════════════════
   CHART STYLING - Glow effects, vivid colors, modern design
   ════════════════════════════════════════════════════════════════ */

/* Chart Container Glow */
.recharts-wrapper {
  filter: drop-shadow(0 0 20px rgba(0, 92, 169, 0.15));
  transition: filter 0.3s ease;
}

.recharts-wrapper:hover {
  filter: drop-shadow(0 0 30px rgba(0, 92, 169, 0.25));
}

/* Bar Chart Colors - Vivid Gradient */
.recharts-bar {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
  transition: filter 0.3s ease;
}

.recharts-bar:hover {
  filter: drop-shadow(0 6px 20px rgba(0, 92, 169, 0.4)) !important;
}

/* Bar Gradient Definitions */
defs linearGradient {
  stop:first-child {
    stop-color: #005CA9;
    stop-opacity: 1;
  }
  stop:last-child {
    stop-color: #00D9FF;
    stop-opacity: 0.8;
  }
}

/* Line Chart - Glow Effect */
.recharts-line {
  filter: drop-shadow(0 0 8px rgba(0, 92, 169, 0.4));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recharts-line-dot {
  filter: drop-shadow(0 0 6px rgba(0, 92, 169, 0.6));
  transition: all 0.3s ease;
}

.recharts-line-dot:hover {
  filter: drop-shadow(0 0 12px rgba(0, 92, 169, 0.8));
  r: 6;
}

/* Pie Chart - Vivid Colors with Glow */
.recharts-pie-sector {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
  transition: all 0.3s ease;
  stroke: white;
  stroke-width: 2;
}

.recharts-pie-sector:hover {
  filter: drop-shadow(0 4px 16px rgba(0, 92, 169, 0.4));
}

/* Vivid Chart Colors */
.chart-color-1 { fill: #005CA9; filter: drop-shadow(0 0 8px rgba(0, 92, 169, 0.4)); }
.chart-color-2 { fill: #00D9FF; filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.4)); }
.chart-color-3 { fill: #FF1493; filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.4)); }
.chart-color-4 { fill: #FF8C00; filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.4)); }
.chart-color-5 { fill: #10B981; filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4)); }
.chart-color-6 { fill: #8B5CF6; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4)); }
.chart-color-7 { fill: #EC4899; filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.4)); }

/* Tooltip Styling - Modern Glow */
.recharts-default-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  padding: 10px 12px !important;
  filter: drop-shadow(0 0 15px rgba(0, 92, 169, 0.2));
}

.recharts-tooltip-wrapper text {
  color: #333 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Legend Styling */
.recharts-legend {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.recharts-legend-item {
  color: #666 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Axis Labels - Enhanced */
.recharts-cartesian-axis-tick {
  color: #999 !important;
  font-size: 12px !important;
}

.recharts-cartesian-axis-tick text {
  fill: #999 !important;
}

/* Grid Lines - Subtle */
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: #E5E7EB !important;
  opacity: 0.5;
}

/* Reference Line */
.recharts-reference-line {
  stroke: #D1D5DB !important;
  stroke-dasharray: 5,5;
  opacity: 0.6;
}

/* Bar Radius */
.recharts-bar {
  rx: 4;
  ry: 4;
}

/* Area Chart Gradient Fill */
.recharts-area {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.recharts-area-shape {
  fill-opacity: 0.7;
}

/* Card with Chart - Glow Border */
.chart-card {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  background: white;
  box-shadow: 0 0 25px rgba(0, 92, 169, 0.08);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 0 40px rgba(0, 92, 169, 0.15),
              0 0 60px rgba(0, 217, 255, 0.1);
  border-color: #B3D9FF;
}

/* Dark Mode Chart Adjustments */
body.dark-mode .recharts-default-tooltip {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid #475569 !important;
}

body.dark-mode .recharts-tooltip-wrapper text {
  color: #E2E8F0 !important;
}

body.dark-mode .recharts-cartesian-axis-tick text {
  fill: #94A3B8 !important;
}

body.dark-mode .recharts-legend-item {
  color: #94A3B8 !important;
}

body.dark-mode .chart-card {
  background: #1E293B;
  border-color: #334155;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.1);
}

body.dark-mode .chart-card:hover {
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.2),
              0 0 60px rgba(139, 92, 246, 0.1);
  border-color: #0F766E;
}


/* ════════════════════════════════════════════════════════════════
   AREA CHART STYLING - Gradient fill with smooth curves
   ════════════════════════════════════════════════════════════════ */

/* Area Chart Container */
.recharts-area-chart {
  filter: drop-shadow(0 0 20px rgba(0, 92, 169, 0.1));
}

/* Area Shape - Gradient Fill */
.recharts-area-shape {
  fill-opacity: 0.75 !important;
  stroke: none !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Area Curve - Smooth */
.recharts-curve {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 3 !important;
}

/* Area Line Style */
.recharts-area {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

/* Gradients per Area Chart */
defs {
  linearGradient[id*="area"] {
    stop:first-child { stop-opacity: 0.8; }
    stop:last-child { stop-opacity: 0.1; }
  }
}

/* Area 1 - Blue Gradient */
.area-1 .recharts-area-shape {
  fill: url(#areaGradient1) !important;
}

.area-1 .recharts-curve {
  stroke: #005CA9 !important;
  fill: none !important;
}

/* Area 2 - Cyan Gradient */
.area-2 .recharts-area-shape {
  fill: url(#areaGradient2) !important;
}

.area-2 .recharts-curve {
  stroke: #00D9FF !important;
  fill: none !important;
}

/* Area 3 - Purple Gradient */
.area-3 .recharts-area-shape {
  fill: url(#areaGradient3) !important;
}

.area-3 .recharts-curve {
  stroke: #8B5CF6 !important;
  fill: none !important;
}

/* Area 4 - Pink Gradient */
.area-4 .recharts-area-shape {
  fill: url(#areaGradient4) !important;
}

.area-4 .recharts-curve {
  stroke: #FF1493 !important;
  fill: none !important;
}

/* Area 5 - Green Gradient */
.area-5 .recharts-area-shape {
  fill: url(#areaGradient5) !important;
}

.area-5 .recharts-curve {
  stroke: #10B981 !important;
  fill: none !important;
}

/* Area 6 - Orange Gradient */
.area-6 .recharts-area-shape {
  fill: url(#areaGradient6) !important;
}

.area-6 .recharts-curve {
  stroke: #FF8C00 !important;
  fill: none !important;
}

/* Smooth Animation */
.recharts-area-shape,
.recharts-curve {
  transition: all 0.3s ease !important;
}

/* Hover Effect - Area */
.recharts-area:hover .recharts-area-shape {
  fill-opacity: 0.95 !important;
  filter: drop-shadow(0 4px 16px rgba(0, 92, 169, 0.25)) !important;
}

.recharts-area:hover .recharts-curve {
  stroke-width: 4 !important;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.2)) !important;
}

/* Dot Styling - Area Chart */
.recharts-area-dot {
  filter: drop-shadow(0 0 6px rgba(0, 92, 169, 0.3));
  r: 4;
}

.recharts-area-dot:hover {
  r: 7;
  filter: drop-shadow(0 0 12px rgba(0, 92, 169, 0.6));
}

/* Legend - Area Chart */
.recharts-legend {
  padding-top: 20px !important;
}

.recharts-legend-item {
  margin-right: 20px !important;
}

.recharts-legend-item-text {
  color: #666 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}


/* ════════════════════════════════════════════════════════════════
   DASHBOARD TITLE - San Francisco grassetto nero
   ════════════════════════════════════════════════════════════════ */

.login-title {
  font-family: 'Inter', var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 52px !important;
  color: var(--text) !important;
  letter-spacing: -0.06em !important;
  text-align: center;
  margin: 20px 0 4px 0;
}

.header-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'San Francisco', Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}


/* ════════════════════════════════════════════════════════════════
   BAR CHART GLOW - Effetto glow su barre con sfumature
   ════════════════════════════════════════════════════════════════ */

/* Chart container glow */
#chart-promo-trend {
  filter: drop-shadow(0 0 20px rgba(0, 92, 169, 0.15));
}

/* Bar chart hover glow */
#chart-promo-trend:hover {
  filter: drop-shadow(0 0 30px rgba(0, 92, 169, 0.25));
  transition: filter 0.3s ease;
}

/* Canvas wrapper */
.chart-wrap {
  position: relative;
}

/* Glow effect per le barre */
canvas {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)) !important;
}

canvas:hover {
  filter: drop-shadow(0 4px 16px rgba(0, 92, 169, 0.2)) !important;
  transition: filter 0.3s ease;
}


/* ════════════ FILTRI TOGGLE ════════════ */
.filters-bar-header{
  display:flex;align-items:center;justify-content:space-between;
}
.filters-bar .filters-body{
  overflow:hidden;
  max-height:1200px;
  transition:max-height .35s cubic-bezier(0.4,0,0.2,1), opacity .25s ease, margin-top .25s ease;
  opacity:1;
  margin-top:14px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
}
.filters-bar.collapsed .filters-body{
  max-height:0;
  opacity:0;
  margin-top:0;
}
.btn-toggle-filters{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;font-size:12px;font-weight:700;
  color:var(--primary);background:rgba(0,92,169,.07);
  border:1px solid rgba(0,92,169,.15);border-radius:var(--radius-pill);
  cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0;
  font-family:var(--font-body);
}
.btn-toggle-filters:hover{background:rgba(0,92,169,.14);border-color:var(--primary);}
.btn-toggle-filters .tgl-icon{
  display:inline-block;transition:transform .25s ease;font-style:normal;font-size:10px;
}
.filters-bar.collapsed .btn-toggle-filters .tgl-icon{transform:rotate(-90deg);}
.filters-bar-title{
  font-size:12px;font-weight:700;color:var(--text-secondary);
  display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.06em;
}
body.dark-mode .btn-toggle-filters{background:rgba(0,92,169,.15);border-color:rgba(0,92,169,.3);}

/* Mobile: filters-body scorribile se supera l'altezza viewport */
@media (max-width:768px){
  .filters-bar .filters-body{
    max-height:none;          /* nessun cap fisso */
    overflow-y:visible;
    gap:10px;
  }
  .filters-bar.collapsed .filters-body{
    max-height:0;
    overflow:hidden;
  }
  /* ogni filter-group occupa tutta la larghezza su mobile stretto */
  .filters-bar .filters-body .filter-group{
    flex:1 1 100%;
    max-width:none;
  }
  /* select e input full-width dentro il toggle */
  .filters-bar .filters-body select,
  .filters-bar .filters-body input[type="text"],
  .filters-bar .filters-body input[type="search"]{
    width:100%;
    box-sizing:border-box;
  }
  /* azioni filtro full-width */
  .filters-bar .filters-body .filter-actions{
    width:100%;
    justify-content:stretch;
    gap:8px;
  }
  .filters-bar .filters-body .filter-actions .btn{
    flex:1;
    justify-content:center;
  }
}

/* ════════════ HOME PAGE ════════════ */

/* ── Hero ── */
.home-hero{
  padding:6px 0 18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;overflow:visible;
}
.home-hero-text{flex:1;min-width:0;}
.hero-sub{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.hero-sub::before{content:'';display:inline-block;width:20px;height:2px;background:var(--primary);border-radius:2px;}
.hero-title{
  font-family:var(--font-display);font-size:clamp(28px,4.5vw,52px);font-weight:900;
  line-height:1.05;letter-spacing:-0.045em;color:var(--text);margin-bottom:8px;
}
.hero-accent{
  background:var(--grad-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:900;
}
.tab-hero{padding:28px 32px 0 32px;}
.tab-hero-title{font-family:'Inter',-apple-system,sans-serif;font-size:clamp(24px,3.2vw,38px);font-weight:900;letter-spacing:-0.05em;color:var(--text);margin:0 0 4px 0;line-height:1.0;}
.tab-hero-desc{font-size:13px;color:var(--text-secondary);font-weight:500;letter-spacing:-0.01em;margin:0 0 20px 0;}

/* Immagine modulo adesione nella hero */
.home-hero-img-wrap{
  flex-shrink:0;
  width:240px;
  position:relative;
  align-self:center;
  overflow:visible;
}
.home-hero-img-wrap::after{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:50%;
  background:linear-gradient(to right, transparent 0%, #F1F5F9 100%);
  pointer-events:none;
  z-index:2;
}
body.dark-mode .home-hero-img-wrap::after{
  background:linear-gradient(to right, transparent 0%, #0B1220 100%);
}
.home-hero-modulo{
  display:block;width:100%;height:auto;
  transform:rotate(-8deg);
  transform-origin:center center;
  pointer-events:none;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15));
}
@media(max-width:900px){
  .home-hero-img-wrap{width:160px;}
}
@media(max-width:650px){
  .home-hero{flex-direction:row;align-items:center;}
  .home-hero-img-wrap{width:110px;flex-shrink:0;}
}
@media(max-width:400px){
  .home-hero-img-wrap{display:none;}
}

/* ── Home KPI Strip ── */
.home-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;}
@media(max-width:900px){.home-kpi-strip{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.home-kpi-strip{grid-template-columns:1fr;}}

.home-kpi-card{
  background:#fff;border-radius:var(--radius-2xl);padding:28px 28px 24px;
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:var(--transition);box-shadow:var(--shadow-glass);
  display:flex;flex-direction:column;gap:12px;min-height:160px;cursor:default;
}
body.dark-mode .home-kpi-card{background:var(--surface);}
.home-kpi-card:hover{transform:translateY(-5px);}
.home-c1:hover{box-shadow:0 8px 30px rgba(0,92,169,.28),0 0 0 1px rgba(0,92,169,.15);}
.home-c2:hover{box-shadow:0 8px 30px rgba(249,115,22,.28),0 0 0 1px rgba(249,115,22,.15);}
.home-c3:hover{box-shadow:0 8px 30px rgba(16,185,129,.28),0 0 0 1px rgba(16,185,129,.15);}
.home-c4:hover{box-shadow:0 8px 30px rgba(236,72,153,.28),0 0 0 1px rgba(236,72,153,.15);}
.home-ac1:hover{box-shadow:0 8px 30px rgba(0,92,169,.28),0 0 0 1px rgba(0,92,169,.15);}
.home-ac2:hover{box-shadow:0 8px 30px rgba(220,38,38,.28),0 0 0 1px rgba(220,38,38,.15);}
.home-ac3:hover{box-shadow:0 8px 30px rgba(245,158,11,.28),0 0 0 1px rgba(245,158,11,.15);}
.home-ac4:hover{box-shadow:0 8px 30px rgba(236,72,153,.28),0 0 0 1px rgba(236,72,153,.15);}
.home-ac5:hover{box-shadow:0 8px 30px rgba(16,185,129,.28),0 0 0 1px rgba(16,185,129,.15);}
.home-kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:.9;}
.home-c1::before{background:var(--primary);}
.home-c2::before{background:var(--orange);}
.home-c3::before{background:var(--success);}
.home-c4::before{background:var(--accent);}
.home-kpi-card::after{
  content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;
  border-radius:50%;opacity:.1;pointer-events:none;
}
.home-c1::after{background:radial-gradient(circle,var(--primary),transparent 70%);}
.home-c2::after{background:radial-gradient(circle,var(--orange),transparent 70%);}
.home-c3::after{background:radial-gradient(circle,var(--success),transparent 70%);}
.home-c4::after{background:radial-gradient(circle,var(--accent),transparent 70%);}

.home-kpi-label{font-size:11px;font-weight:700;color:var(--text-secondary);letter-spacing:.07em;text-transform:uppercase;}
.home-kpi-value{
  font-family:var(--font-display);font-size:36px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.035em;color:var(--text);transition:all .1s;
}
.home-kpi-sub{font-size:12px;color:var(--text-tertiary);margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-weight:500;}

@keyframes kpiPop{
  0%{transform:scale(.94);opacity:.6;}60%{transform:scale(1.03);}100%{transform:scale(1);opacity:1;}
}
.home-kpi-value.popped{animation:kpiPop .45s cubic-bezier(0.34,1.56,0.64,1) forwards;}

/* ── Home Nav ── */
.home-nav-section{margin-top:8px;}
.home-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1100px){.home-nav-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.home-nav-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.home-nav-grid{grid-template-columns:1fr;}}

.home-nav-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:24px 22px 20px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-xl);cursor:pointer;text-align:left;
  transition:var(--transition);box-shadow:var(--shadow-glass);
  position:relative;overflow:hidden;font-family:var(--font-body);
}
body.dark-mode .home-nav-btn{background:var(--surface);}
.home-nav-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.home-nav-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:.85;}
.home-nav-andamento::before{background:linear-gradient(90deg,#005CA9,#3B82F6);}
.home-nav-analisi::before{background:linear-gradient(90deg,#EC4899,#F472B6);}
.home-nav-ateco::before{background:linear-gradient(90deg,#8B5CF6,#A78BFA);}
.home-nav-anagrafiche::before{background:linear-gradient(90deg,#06B6D4,#22D3EE);}
.home-nav-contratti::before{background:linear-gradient(90deg,#F59E0B,#FCD34D);}
.home-nav-consulenti::before{background:linear-gradient(90deg,#7C3AED,#A78BFA);}
.home-nav-storica::before{background:linear-gradient(90deg,#D97706,#F59E0B);}

.home-nav-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.home-nav-andamento   .home-nav-icon{background:#005CA9;}
.home-nav-analisi     .home-nav-icon{background:#EC4899;}
.home-nav-ateco       .home-nav-icon{background:#8B5CF6;}
.home-nav-anagrafiche .home-nav-icon{background:#06B6D4;}
.home-nav-contratti   .home-nav-icon{background:#F59E0B;}
.home-nav-consulenti  .home-nav-icon{background:#7C3AED;}
.home-nav-storica     .home-nav-icon{background:#D97706;}

.home-nav-label{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--text);letter-spacing:-0.02em;line-height:1.2;}
.home-nav-desc{font-size:11px;color:var(--text-secondary);line-height:1.55;font-weight:500;flex:1;}
.home-nav-arrow{position:absolute;bottom:18px;right:18px;color:var(--text-tertiary);transition:var(--transition);}
.home-nav-btn:hover .home-nav-arrow{color:var(--primary);transform:translateX(3px);}

/* ── Home Year Bar ── */
.home-year-bar{
  display:flex;align-items:center;gap:16px;margin-bottom:28px;
  padding:14px 20px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-glass);
  flex-wrap:wrap;
}
body.dark-mode .home-year-bar{background:rgba(17,26,46,.6);}
.home-year-label{
  font-size:12px;font-weight:700;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.07em;
  display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
}
.home-year-select{
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);
  background:#fff;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);padding:9px 34px 9px 16px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  outline:none;transition:var(--transition);box-shadow:var(--shadow-pill);min-width:180px;
}
.home-year-select:hover{border-color:var(--text-tertiary);}
.home-year-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
body.dark-mode .home-year-select{background:var(--surface);color:var(--text);}

/* ── Home KPI 5 colonne (Ateco) ── */
.home-kpi-strip-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:1100px){.home-kpi-strip-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.home-kpi-strip-5{grid-template-columns:repeat(2,1fr);}}

/* Colori Ateco card */
.home-ac1::before{background:var(--primary);}
.home-ac2::before{background:#DC2626;}
.home-ac3::before{background:#F59E0B;}
.home-ac4::before{background:var(--accent);}
.home-ac5::before{background:var(--success);}
.home-ac1::after{background:radial-gradient(circle,var(--primary),transparent 70%);}
.home-ac2::after{background:radial-gradient(circle,#DC2626,transparent 70%);}
.home-ac3::after{background:radial-gradient(circle,#F59E0B,transparent 70%);}
.home-ac4::after{background:radial-gradient(circle,var(--accent),transparent 70%);}
.home-ac5::after{background:radial-gradient(circle,var(--success),transparent 70%);}

/* ════════════ ATECO KPI CARD COLORS (ak2=rosso, ak3=ambra) ════════════ */
.ateco-kpi.ak2::before{background:#DC2626;}
.ateco-kpi.ak2::after{background:radial-gradient(circle,#DC2626,transparent 70%);}
.ateco-kpi.ak3::before{background:#F59E0B;}
.ateco-kpi.ak3::after{background:radial-gradient(circle,#F59E0B,transparent 70%);}
.ateco-kpi.ak6::before{background:#8B5CF6;}
.ateco-kpi.ak6::after{background:radial-gradient(circle,#8B5CF6,transparent 70%);}
.ateco-kpi.ak6:hover{box-shadow:0 8px 30px rgba(139,92,246,.28),0 0 0 1px rgba(139,92,246,.15)!important;}
/* kpi-strip-6: 6 colonne su desktop */
.kpi-strip-6{grid-template-columns:repeat(6,1fr)!important;}
@media(max-width:1200px){.kpi-strip-6{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:700px){.kpi-strip-6{grid-template-columns:repeat(2,1fr)!important;}}

/* ════════════ ICON BADGE — stile signature ════════════ */
/* Cerchio colorato attorno alle icone nei report-title e nei btn icona */
.report-title svg,
.filters-bar-title svg,
.section-title svg,
.admin-card-header svg,
.home-year-label svg {
  flex-shrink:0;
}

/* Icon badge: cerchio colorato per icone standalone (darkmode, info) */
.btn-secondary svg,
.btn-info svg,
.btn-logout svg,
.btn-admin svg,
.btn-danger svg {
  flex-shrink:0;
}

/* Report title icon badge */
.report-title{
  display:flex;align-items:center;gap:10px;
}
.report-title .icon-badge{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.r-tiporete .icon-badge{background:rgba(0,92,169,.1);color:var(--blue);}
.r-promotore .icon-badge{background:rgba(236,72,153,.1);color:var(--accent);}
.r-acuradi .icon-badge{background:rgba(139,92,246,.1);color:var(--accent3);}

/* Icone sezione-titolo con badge */
.section-title .icon-badge{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(0,92,169,.1);color:var(--blue);
}

/* Btn header: icona dentro cerchio */
.btn-secondary,
.btn-info,
.btn-logout,
.btn-admin,
.btn-danger {
  gap:7px;
}
header .btn svg,
.mobile-drawer .btn svg {
  width:15px;height:15px;
}

/* ── Icon badge dentro btn ── */
.btn .icon-badge{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Report title icon badge dimensione */
.report-title .icon-badge{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:rgba(0,92,169,.1);color:var(--blue);
}

/* ── Tab icon badge ── */
.tab-btn{gap:8px;}
.tab-icon{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--transition);
}
.tab-icon-solid{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.tab-btn:not(.active) .tab-icon-solid{
  opacity:0.72;
  box-shadow:none;
}
.tab-btn.active .tab-icon-solid{
  opacity:1;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transform:scale(1.05);
}
.tab-btn:hover:not(.active) .tab-icon-solid{
  opacity:0.9;
}

/* ── Separatore tra tab principali e dropdown ── */
/* ── Tab scroll wrapper con freccia ── */
.tabs-bar-wrap{
  position:sticky;top:var(--header-h);z-index:100;
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
body.dark-mode .tabs-bar-wrap{background:rgba(17,26,46,.6);}
.tabs-bar{
  flex:1;overflow-x:auto;scrollbar-width:none;
  padding:8px 20px;display:flex;gap:4px;
  background:transparent;border:none;
}
.tabs-bar::-webkit-scrollbar{display:none;}

/* Freccia scorri — sovrapposta a destra, appare solo quando serve */
.tabs-scroll-arrow{
  flex-shrink:0;width:36px;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.95) 40%);
  color:var(--primary);
  transition:opacity .2s;
  padding:0 6px 0 0;
}
body.dark-mode .tabs-scroll-arrow{
  background:linear-gradient(to right, transparent, rgba(17,26,46,0.95) 40%);
}
.tabs-scroll-arrow:hover{color:var(--primary-dark);}

/* Separatore — non più usato ma lo manteniamo neutro */
.tabs-separator{ display:none; }

/* Dropdown — rimosso, non più usato */
.tabs-dropdown-wrap{ display:none; }
.tabs-dropdown{ display:none; }
.tabs-dropdown-sep{ display:none; }

/* ══════════════════════════════════════════
   APP FOOTER
   ══════════════════════════════════════════ */
#app-footer {
  display: none; /* visibile solo quando l'app è attiva (gestito da JS) */
  width: 100%;
  background: #fff;
  border-top: 1.5px solid #DBEAFE;
  margin-top: auto;
  flex-shrink: 0;
}
body.dark-mode #app-footer {
  background: var(--surface);
  border-top-color: var(--border);
}
.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  max-width: 100%;
  gap: 16px;
}
.app-footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-footer-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.app-footer-divider {
  width: 1px;
  height: 28px;
  background: #BFDBFE;
  flex-shrink: 0;
}
body.dark-mode .app-footer-divider {
  background: var(--border);
}
.app-footer-city {
  font-size: 13px;
  font-weight: 600;
  color: #005CA9;
  letter-spacing: 0.01em;
}
body.dark-mode .app-footer-city {
  color: var(--primary-light, #60A5FA);
}
.app-footer-right {
  display: flex;
  align-items: center;
}
.app-footer-copy {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.dark-mode .app-footer-copy {
  color: var(--text-tertiary);
}
@media(max-width:768px){
  .tab-hero{padding:20px 16px 0 16px;}
  /* Filtri Archivio Imprese: 2 colonne su tablet */
  #tab-anagrafiche .filters-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;}
  #tab-anagrafiche .filter-group{min-width:0;width:100%;}
  #tab-anagrafiche .filter-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;}
}
@media(max-width:480px){
  .tab-hero-title{font-size:22px;}
  /* Filtri Archivio Imprese: 1 colonna su mobile stretto */
  #tab-anagrafiche .filters-bar{grid-template-columns:1fr;}
  #tab-anagrafiche .filter-actions{flex-direction:column;}
  #tab-anagrafiche .filter-actions .btn{width:100%;justify-content:center;}
}

/* ── Hover effects globali — Serie Storica & Previsionale ── */

/* Variabile locale per comodità */
:root {
  --hover-lift-sm: translateY(-2px);
  --hover-lift-md: translateY(-3px);
  --hover-shadow-sm: 0 4px 14px rgba(0,0,0,0.08);
  --hover-shadow-md: 0 8px 22px rgba(0,0,0,0.11);
  --hover-shadow-blue: 0 8px 22px rgba(0,92,169,0.18);
  --t: all .22s cubic-bezier(0.4,0,0.2,1);
}

/* KPI cards (previsionale) */
.sp-kpi {
  transition: var(--t);
}
.sp-kpi:hover {
  transform: var(--hover-lift-md);
  box-shadow: var(--hover-shadow-blue);
  border-color: #93c5fd !important;
}

/* Mese cards (previsionale) */
.sp-mese-card {
  transition: var(--t);
}
.sp-mese-card:hover {
  transform: var(--hover-lift-sm);
  box-shadow: var(--hover-shadow-sm);
  border-color: #93c5fd !important;
}

/* Bottone Ricalcola */
.sp-ob-btn {
  transition: var(--t);
}
.sp-ob-btn:hover {
  background: #0073C8 !important;
  transform: var(--hover-lift-sm);
  box-shadow: var(--hover-shadow-blue);
}

/* Tabella storica — righe */
#storica-table tbody tr {
  transition: var(--t);
}
#storica-table tbody tr:hover {
  background: rgba(0,92,169,0.05) !important;
  box-shadow: inset 3px 0 0 #005CA9;
}

/* Tabella storica — celle dati (hover singola cella) */
#storica-table tbody td:not(:first-child) {
  transition: var(--t);
}
#storica-table tbody td:not(:first-child):hover {
  transform: scale(1.12);
  font-weight: 800;
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,92,169,0.22);
  border-radius: 4px;
}

/* Riga totale */
#storica-table-tot tr {
  transition: var(--t);
}
#storica-table-tot tr:hover {
  background: rgba(0,92,169,0.06) !important;
}

/* Card grafici (Totale annuale / Andamento mensile / Previsionale) */
#tab-storica .sp-kpi,
#tab-storica [style*="border-radius:12px"] {
  transition: var(--t);
}

/* Header sezioni cerchi SVG */
#tab-storica [style*="border-radius:50%"] {
  transition: var(--t);
}
#tab-storica [style*="border-radius:50%"]:hover {
  transform: scale(1.08) rotate(-4deg);
}

/* Card grafici contenitore */
.storica-chart-card {
  transition: var(--t);
}
.storica-chart-card:hover {
  transform: var(--hover-lift-sm);
  box-shadow: var(--hover-shadow-md);
}
/* cache-bust 1778955503 */

/* ═══════════════════════════════════════════
   INCASSI TAB
═══════════════════════════════════════════ */

/* ── Wrapper generale con padding laterale ── */
#tab-incassi .inc-section {
  padding: 0 16px;
  margin-bottom: 20px;
}

/* ── KPI GRID: 4 col desktop, 2 col mobile ── */
.inc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .inc-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 900px) {
  .inc-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── KPI CARD: layout orizzontale compatto ── */
.inc-kpi-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  transition: var(--t);
  min-width: 0;          /* permette il troncamento del testo */
  overflow: hidden;
}
.inc-kpi-card:hover { transform: var(--hover-lift-sm); box-shadow: var(--hover-shadow-md); }

.inc-kpi-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(128,128,128,.08);
}

.inc-kpi-body {
  min-width: 0;
  flex: 1;
}

.inc-kpi-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inc-kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inc-kpi-sub {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
  line-height: 1.3;
}

/* ── GRAFICI GRID: 2 col desktop, 1 col mobile ── */
.inc-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .inc-charts-grid { grid-template-columns: 1fr; }
}
.inc-charts-grid .inc-full { grid-column: 1 / -1; }

.inc-chart-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  min-width: 0;
}
.inc-chart-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.inc-chart-title h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-sub);
  letter-spacing: .4px;
  font-weight: 600;
}
.inc-chart-wrap { position: relative; height: 200px; }

/* ── STATS GRID ── */
.inc-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .inc-stats-grid { grid-template-columns: 1fr; }
}
.inc-stats-grid .inc-full { grid-column: 1 / -1; }

.inc-stat-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  overflow: hidden;
  min-width: 0;
}
.inc-stat-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: .4px;
}

/* ── SEZIONE TITOLO ── */
.inc-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: .4px;
}

/* ── HOVER GLOW — Incassi ── */
/* KPI cards: bagliore colorato dal proprio colore (--kpi-glow iniettato via JS) */
#tab-incassi .inc-kpi-card {
  transition: transform .28s cubic-bezier(.2,1,.35,1), box-shadow .28s cubic-bezier(.2,1,.35,1);
}
#tab-incassi .inc-kpi-card:hover {
  transform: translateY(-7px) scale(1.04);
  box-shadow:
    0 0 28px   var(--kpi-glow, rgba(0,92,169,.5)),
    0 18px 44px -6px var(--kpi-glow, rgba(0,92,169,.5)),
    0  3px  8px rgba(0,0,0,.1);
}
/* Chart & stat card: bagliore colorato (--card-glow impostato inline sull'elemento) */
.inc-chart-card {
  transition: transform .28s cubic-bezier(.2,1,.35,1), box-shadow .28s cubic-bezier(.2,1,.35,1);
}
.inc-chart-card:hover {
  transform: translateY(-7px) scale(1.018);
  box-shadow:
    0 0 28px   var(--card-glow, rgba(0,92,169,.5)),
    0 18px 44px -6px var(--card-glow, rgba(0,92,169,.5)),
    0  3px  8px rgba(0,0,0,.1);
}

/* ═══════════════════════════════════════════
   SCHEDA ANAGRAFICA — FULLSCREEN
═══════════════════════════════════════════ */
/* ── BACKDROP ── */
.scheda-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── FINESTRA POPUP ── */
.scheda-modal {
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  animation: schedaIn .18s cubic-bezier(.22,1,.36,1);
}
@keyframes schedaIn {
  from { opacity:0; transform: scale(.96) translateY(12px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* ── BARRA CONTROLLI sopra header ── */
.scheda-ctrl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0;
  flex-shrink: 0;
}
.scheda-ctrl-close {
  background: rgba(0,0,0,.07); border: none; color: #475569;
  width: 32px; height: 32px; border-radius: 50%; font-size: 19px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0; line-height: 1;
}
.scheda-ctrl-close:hover { background: #fee2e2; color: #ef4444; }
body.dark-mode .scheda-ctrl-close { background: rgba(255,255,255,.1); color: #94a3b8; }

/* ── TOPBAR con logo e nome ── */
.scheda-topbar {
  flex-shrink: 0;
  background: white;
  border-bottom: 2px solid #005CA9;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 16px 0;
  border-radius: 10px 10px 0 0;
}
body.dark-mode .scheda-topbar {
  background: #1e2d45;
  border-bottom-color: #3b82f6;
}
/* Contenitore interno topbar */
.scheda-topbar-inner {
  width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Sinistra: bottone + divisore + logo */
.scheda-topbar-left {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.scheda-topbar-logo {
  height: 44px; width: auto; object-fit: contain; flex-shrink: 0;
}
.scheda-topbar-divider {
  width: 1px; height: 28px; background: #cbd5e1; flex-shrink: 0;
}
/* Destra: nome impresa + tasto chiudi */
.scheda-topbar-right {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.scheda-topbar-company {
  display: flex; flex-direction: column; align-items: flex-end; min-width: 0;
}
.scheda-topbar-company-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8;
}
.scheda-topbar-company-name {
  font-size: 15px; font-weight: 800; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(420px, 40vw);
}
body.dark-mode .scheda-topbar-company-name { color: white; }
body.dark-mode .scheda-topbar-company-label { color: #64748b; }
.scheda-topbar-back {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,92,169,.08);
  border: 1px solid rgba(0,92,169,.2);
  color: #005CA9; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.scheda-topbar-back:hover { background: rgba(0,92,169,.15); }
body.dark-mode .scheda-topbar-back { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.1); }
.scheda-topbar-title {
  flex: 1; color: #1e293b; font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
body.dark-mode .scheda-topbar-title { color: white; }
.scheda-topbar-close {
  background: rgba(0,0,0,.06); border: none; color: #475569;
  width: 34px; height: 34px; border-radius: 50%; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0; line-height: 1;
}
.scheda-topbar-close:hover { background: rgba(0,0,0,.14); color: #ef4444; }
body.dark-mode .scheda-topbar-close { background: rgba(255,255,255,.08); color: #94a3b8; }

/* Header sezione colorato */
.scheda-sec-hdr {
  display: flex; align-items: center; gap: 8px;
  margin: -16px -18px 14px -18px;
  padding: 9px 18px;
  border-radius: 12px 12px 0 0;
}
.scheda-sec-hdr span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: white;
}

/* Tabella dati anagrafici — layout documento */
.scheda-dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.scheda-dt .sdt-label {
  width: 38%;
  padding: 7px 12px 7px 0;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  vertical-align: top; white-space: nowrap;
}
.scheda-dt .sdt-value {
  padding: 7px 0 7px 8px;
  font-size: 13px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.scheda-dt tr:last-child .sdt-label,
.scheda-dt tr:last-child .sdt-value { border-bottom: none; }
.scheda-dt tr:hover .sdt-label,
.scheda-dt tr:hover .sdt-value { background: rgba(0,92,169,.025); }

/* Corpo scrollabile del popup */
.scheda-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 24px;
  box-sizing: border-box;
}

/* Sezioni interne */
.scheda-section {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.scheda-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-sub);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.scheda-section-title svg { flex-shrink: 0; }

/* Badge stato */
.scheda-status-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.scheda-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}

/* Grid dati */
.scheda-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (max-width: 480px) {
  .scheda-grid { grid-template-columns: 1fr; }
}
.scheda-field { min-width: 0; }
.scheda-field-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim); margin-bottom: 2px;
}
.scheda-field-value {
  font-size: 13px; font-weight: 500; color: var(--text);
  word-break: break-word;
}
.scheda-field-value a { color: var(--blue); text-decoration: none; }

/* Contratti / servizi pills */
.scheda-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.scheda-pill {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: rgba(0,92,169,.1); color: var(--blue);
  border: 1px solid rgba(0,92,169,.2);
}
.scheda-pill.active {
  background: rgba(5,150,105,.1); color: #059669;
  border-color: rgba(5,150,105,.25);
}
.scheda-pill.service {
  background: rgba(234,88,12,.08); color: #EA580C;
  border-color: rgba(234,88,12,.2);
}

/* Addetti mini-grid */
.scheda-addetti { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.scheda-addetti-card {
  background: var(--surface2); border-radius: 8px;
  padding: 10px; text-align: center;
}
.scheda-addetti-card.tot { background: var(--blue); }
.scheda-addetti-val { font-size: 20px; font-weight: 700; color: var(--text); }
.scheda-addetti-card.tot .scheda-addetti-val { color: white; }
.scheda-addetti-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-dim); }
.scheda-addetti-card.tot .scheda-addetti-lbl { color: rgba(255,255,255,.75); }

/* Pagamenti KPI */
.scheda-pay-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 560px) {
  .scheda-pay-kpis { grid-template-columns: repeat(2,1fr); }
}
.scheda-pay-kpi {
  background: var(--surface2); border-radius: 8px;
  padding: 10px 12px; border-left: 3px solid var(--border);
}
.scheda-pay-kpi-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.scheda-pay-kpi-val { font-size: 14px; font-weight: 700; color: var(--text); }

/* Tabella pagamenti */
.scheda-pay-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scheda-pay-table th {
  padding: 6px 8px; text-align: left; font-size: 10px; font-weight: 600;
  text-transform: uppercase; color: var(--text-sub);
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.scheda-pay-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.scheda-pay-table tr:last-child td { border-bottom: none; }
.scheda-pay-table tr:hover td { background: rgba(0,92,169,.04); }

/* Footer azioni */
.scheda-footer {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
  display: flex; gap: 8px; justify-content: flex-end;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════════════
   FIX RESPONSIVE MOBILE — v2026.24
   Blocca overflow orizzontale e ridimensionamento pagina su mobile.
   (posizionato in fondo per avere precedenza nella cascata)
══════════════════════════════════════════════════════════════ */

/* 1 — Nessun overflow orizzontale a livello di pagina.
   Si usa "clip" invece di "hidden" per NON rompere position:sticky
   di header e tabs-bar. Impedisce il pan/zoom laterale su mobile. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* 2 — La barra tab dell'Admin (Gestione Utenti / Ruoli / Log)
   aveva width:fit-content senza scroll: su mobile superava lo schermo
   e allargava tutta la pagina. Ora scorre orizzontalmente al suo interno. */
@media (max-width: 768px) {
  .admin-tabs-new {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .admin-tabs-new::-webkit-scrollbar { display: none; }
  .admin-tab-new { flex-shrink: 0; }
}

/* 3 — KPI Incassi: i valori in euro venivano troncati con "…".
   Su schermi piccoli mostriamo l'importo completo (font ridotto +
   wrap di sicurezza) così "€ 485.665,30" non viene mai tagliato. */
@media (max-width: 560px) {
  .inc-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .inc-kpi-card { padding: 11px 12px; gap: 8px; }
  .inc-kpi-icon { width: 30px; height: 30px; }
  .inc-kpi-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
  .inc-kpi-value {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.18;
    word-break: break-word;
  }
}
@media (max-width: 360px) {
  .inc-kpi-grid { grid-template-columns: 1fr; }
  .inc-kpi-value { font-size: 15px; }
}

/* 4 — Tutte le tabelle restano contenute nel loro wrapper scrollabile,
   mai oltre la larghezza della pagina. */
.table-wrap, .ana-table-wrap, .trend-table-wrap { max-width: 100%; }

/* 5 — Registro Accessi: su mobile nascondiamo la colonna
   "Browser / Device" (la più larga) così Data/Ora, Utente, Email ed
   Esito restano leggibili senza dover scorrere. */
@media (max-width: 560px) {
  #atab-logs table th:nth-child(5),
  #atab-logs table td:nth-child(5) { display: none; }
}

/* 6 — Elementi multimediali non sforano mai il contenitore. */
img, svg, canvas, video { max-width: 100%; }

/* ════════════════════════════════════════════════════════
   TOP NAV — barra orizzontale sotto l'header con scroll + frecce
   ════════════════════════════════════════════════════════ */
:root {
  --sb-w: 0px;        /* nessun margine laterale — nav è in alto */
  --topnav-h: 52px;   /* altezza della barra di navigazione */
}

/* ── Contenitore principale ── */
#sidebar {
  position: relative;
  width: 100%;
  height: var(--topnav-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  z-index: 150;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: none;
}
body.dark-mode #sidebar {
  background: #131e35;
  border-bottom-color: rgba(255,255,255,.07);
}

/* Nasconde elementi verticali non usati nella top nav */
#sidebar.sb-collapsed { width: 100%; }
#sidebar.sb-collapsed:hover { width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sb-header { display: none; }
.sb-collapse-btn { display: none; }
.sb-group-label { display: none !important; }
.sb-divider { display: none; }

/* ── Freccia sinistra ── */
.sb-arrow {
  flex-shrink: 0;
  width: 40px;
  height: var(--topnav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  cursor: pointer;
  color: var(--text, #1e293b);
  z-index: 2;
  transition: background .15s, color .15s;
  position: relative;
}
body.dark-mode .sb-arrow { background: #131e35; color: #e2e8f0; }
.sb-arrow:hover { background: rgba(0,92,169,.08); color: #005CA9; }
.sb-arrow:active { background: rgba(0,92,169,.15); }
.sb-arrow svg { flex-shrink: 0; }
/* Ombra interna per indicare scrollabilità */
#sb-arrow-left::after {
  content:'';
  position:absolute;
  right:-10px; top:0; bottom:0; width:10px;
  background: linear-gradient(to right, rgba(255,255,255,.9), transparent);
  pointer-events:none;
}
#sb-arrow-right::before {
  content:'';
  position:absolute;
  left:-10px; top:0; bottom:0; width:10px;
  background: linear-gradient(to left, rgba(255,255,255,.9), transparent);
  pointer-events:none;
}
body.dark-mode #sb-arrow-left::after {
  background: linear-gradient(to right, rgba(19,30,53,.9), transparent);
}
body.dark-mode #sb-arrow-right::before {
  background: linear-gradient(to left, rgba(19,30,53,.9), transparent);
}
/* Nasconde freccia quando non serve */
.sb-arrow.sb-arrow-hidden { opacity: 0.25; pointer-events: none; }

/* ── Contenitore scrollabile dei bottoni ── */
.sb-nav {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sb-nav::-webkit-scrollbar { display: none; }

/* ── Voci del menu (ora orizzontali) ── */
.sb-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 8px;
  flex-shrink: 0;           /* non si comprime */
  width: auto;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: visible;
  position: relative;
  transition: background .15s, box-shadow .15s;
}

/* Indicatore: linea sotto invece che a sinistra */
.sb-item::before {
  content: '';
  position: absolute;
  bottom: -6px;            /* tocca il bordo inferiore della barra */
  left: 10px;
  right: 10px;
  height: 3px;
  background: var(--blue, #005CA9);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(0.4,0,0.2,1);
}
.sb-item:hover::before,
.sb-item.active::before { transform: scaleX(1); }

.sb-item:hover {
  background: rgba(0,92,169,.07);
  box-shadow: none;
  transform: none;
}
body.dark-mode .sb-item:hover { background: rgba(0,92,169,.18); }
.sb-item.active { background: rgba(0,92,169,.1); }
body.dark-mode .sb-item.active { background: rgba(0,92,169,.22); }

.sb-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .18s, filter .18s;
}
.sb-item:hover .sb-icon { transform: scale(1.08); filter: brightness(1.1) saturate(1.15); }

.sb-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color .15s, font-weight .15s;
  overflow: visible;
  opacity: 1 !important;   /* sempre visibile nella top nav */
}
.sb-item:hover .sb-label { color: var(--blue, #005CA9); font-weight: 600; }
.sb-item.active .sb-label { font-weight: 700; color: var(--blue, #005CA9); }

/* ── Shift contenuto: margine superiore invece che sinistro ── */
.page,
#upload-zone,
#app-footer {
  margin-left: 0 !important;
  margin-top: 0;
  transition: none;
}
.page { max-width: none; }
#admin-panel { margin-top: 0 !important; }

/* Su mobile: mantiene label visibili, icone leggermente ridotte */
@media (max-width: 600px) {
  :root { --topnav-h: 48px; }
  .sb-label { display: inline; font-size: 13px; }
  .sb-item { padding: 7px 12px; gap: 7px; }
  .sb-icon { width: 26px; height: 26px; border-radius: 7px; }
  .sb-arrow { width: 34px; }
  .sb-group-label { display: none; }
}

/* ════════════════════════════════════════════════════════
   TOP NAV v2 — Menu a gruppi con dropdown (niente scroll)
   ════════════════════════════════════════════════════════ */
/* La barra può scorrere se non c'è spazio (fallback per finestre strette):
   i pannelli sono in <body> quindi non vengono mai tagliati */
.sb-nav { justify-content: flex-start; gap: 4px; padding: 6px 10px; }
#sidebar { overflow: visible; }

.sb-dropdown { position: relative; display: flex; flex-shrink: 0; }

.sb-dd-toggle { gap: 6px; }
.sb-dd-caret { color: #94a3b8; transition: transform .2s, color .15s; flex-shrink: 0; }
.sb-dd-toggle:hover .sb-dd-caret { color: var(--blue, #005CA9); }
.sb-dropdown.open .sb-dd-caret { transform: rotate(180deg); color: var(--blue, #005CA9); }
.sb-dropdown.open .sb-dd-toggle { background: rgba(0,92,169,.1); }
body.dark-mode .sb-dropdown.open .sb-dd-toggle { background: rgba(0,92,169,.25); }
/* Toggle "attivo" quando il gruppo contiene il tab corrente */
.sb-dd-toggle.active .sb-label { font-weight: 700; color: var(--blue, #005CA9); }

/* Pannello dropdown — position:fixed così non viene mai tagliato */
.sb-dd-menu {
  position: fixed;
  top: 0; left: 0;            /* posizionato via JS */
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 230px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
  padding: 6px;
  z-index: 400;
  animation: sbDdIn .16s cubic-bezier(0.2,0,0.2,1);
}
body.dark-mode .sb-dd-menu { background: #131e35; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
/* Il pannello viene spostato in <body> da nav.js (pattern portal):
   l'apertura è gestita dalla classe .open sul pannello stesso */
.sb-dd-menu.open { display: flex; }
.sb-dropdown.open .sb-dd-menu { display: flex; }
@keyframes sbDdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Voci dentro il dropdown: righe a tutta larghezza, accent a sinistra */
.sb-dd-menu .sb-item { width: 100%; justify-content: flex-start; padding: 8px 12px; border-radius: 8px; }
.sb-dd-menu .sb-item::before {
  bottom: auto; left: 0; right: auto; top: 6px;
  width: 3px; height: calc(100% - 12px);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
}
.sb-dd-menu .sb-item:hover::before,
.sb-dd-menu .sb-item.active::before { transform: scaleY(1); }

/* Su schermi stretti i 5 gruppi possono comunque scorrere, i menu fixed non vengono tagliati */
@media (max-width: 600px) {
  .sb-dd-menu { min-width: 210px; }
}

/* ════════════ ADMIN PANEL — nasconde sidebar ════════════ */
body.admin-open #sidebar { display: none !important; }
body.admin-open .page { display: none !important; }
body.admin-open #upload-zone { display: none !important; }

/* ════════════ STAMPA REPORT (A4 singola / opuscolo A5) ════════════ */
/* Fuori schermo (non display:none) così getBoundingClientRect() funziona già prima di stampare, quando calcoliamo scala/rotazione */
#rep-print-root{ position:fixed; top:0; left:-100000px; }
@media print{
  @page{ size:A4 landscape; margin:0; }
  body.rep-printing > *:not(#rep-print-root){ display:none !important; }
  #rep-print-root{ position:static; left:auto; display:block !important; }
}

.rep-print-sheet-a4{
  width:297mm;height:210mm;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  page-break-after:always;
}
.rep-print-sheet-a4:last-child{ page-break-after:auto; }

.rep-print-sheet-a5{
  width:297mm;height:210mm;
  display:flex;
  page-break-after:always;
}
.rep-print-sheet-a5:last-child{ page-break-after:auto; }
.rep-print-zone-a5{
  width:148.5mm;height:210mm;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.rep-print-zone-a5:first-child{ border-right:0.2mm dashed #cbd5e1; }
body.admin-open #admin-panel { display: block !important; margin-top: 0 !important; padding-top: 28px; }

/* ════════════ OBIETTIVI TESSERAMENTO ════════════ */
.ob-wrap { padding: 0 2px; }
.ob-section .admin-card-head { flex-wrap: wrap; gap: 8px; }
.ob-head-actions {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; flex-wrap: wrap;
}
.ob-anno-ctrl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.ob-anno-ctrl label { white-space: nowrap; }
.ob-anno-ctrl select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }

/* Tabella — font Inter per tutto */
.ob-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  font-size: 13px;
}
.ob-table thead th {
  padding: 10px 14px; text-align: right;
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 2px solid rgba(37,99,235,.18);
  position: sticky; top: 0; z-index: 1;
  /* Gradiente base — sovrascritto per sezione */
  background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(99,102,241,.06) 100%);
  color: #1e3a8a;
}
/* Header tabella promotori: gradiente verde */
.ob-section-promotori .ob-table thead th {
  background: linear-gradient(135deg, rgba(22,163,74,.10) 0%, rgba(5,150,105,.06) 100%);
  color: #14532d;
  border-bottom: 2px solid rgba(22,163,74,.20);
}
/* Colonne anni precedenti: tono più smorzato */
.ob-table thead th.ob-col-prev {
  background: linear-gradient(135deg, rgba(100,116,139,.08) 0%, rgba(148,163,184,.04) 100%);
  color: #475569;
  border-bottom: 2px solid rgba(100,116,139,.15);
}
/* Prima colonna: nome — allineata a sinistra */
.ob-table thead th:first-child { text-align: left; }
.ob-table tbody tr { border-bottom: 1px solid var(--border-light, #f1f5f9); }
.ob-table tbody tr:hover { background: rgba(37,99,235,.03); }
.ob-table td {
  padding: 8px 14px; vertical-align: middle;
  text-align: right;
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
}
/* Prima colonna td: nome — allineata a sinistra */
.ob-table td:first-child { text-align: left; }
.ob-table tfoot td {
  padding: 10px 14px; border-top: 2px solid var(--border);
  background: var(--bg); text-align: right;
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
}
.ob-table tfoot td:first-child { text-align: left; }
.ob-tfoot-row td { font-size: 13px; }

.ob-col-num { text-align: right !important; width: 90px; }
.ob-col-bar { width: 160px; text-align: left !important; }
.ob-col-act { width: 36px; text-align: center !important; }

/* Nome funzionario: bold Inter nero */
.ob-name-cell { display: flex; flex-direction: column; gap: 2px; }
.ob-name {
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0F172A;
}
.ob-match { font-size: 10px; color: var(--text-tertiary); font-weight: 400; }

/* Input inline */
.ob-input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 13px; font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  text-align: right;
}
.ob-inline-input { width: 72px; text-align: right; }

/* Colori stato */
.ob-pos  { color: #16a34a; font-weight: 600; }
.ob-neg  { color: #dc2626; font-weight: 600; }
.ob-blue { color: #2563eb; font-weight: 600; }
.ob-nc { color: var(--text-tertiary); }
.ob-fatti-num { font-weight: 700; }

/* Barra progresso */
.ob-bar-wrap { position: relative; height: 14px; background: var(--border); border-radius: 99px; overflow: hidden; min-width: 80px; }
.ob-bar-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.ob-bar-label { display: none; }

/* Pulsante elimina */
.ob-btn-del {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: rgba(239,68,68,.08); color: #dc2626; cursor: pointer;
  transition: background .15s;
}
.ob-btn-del:hover { background: rgba(239,68,68,.18); }

/* Add row */
.ob-add-row { padding: 14px 16px; background: var(--bg); border-top: 1px solid var(--border); }
.ob-add-inner { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ob-add-field { display: flex; flex-direction: column; gap: 4px; }
.ob-add-field label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.ob-add-field-sm { width: 150px; }

/* Dropdown autocomplete */
.ob-dropdown {
  position: fixed; z-index: 99999;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-height: 260px; overflow-y: auto; min-width: 280px;
}
.ob-dd-item { padding: 8px 12px; font-size: 12px; cursor: pointer; color: var(--text); transition: background .1s; }
.ob-dd-item:hover { background: var(--bg); }

/* Stato vuoto / loading */
.ob-empty, .ob-loading { padding: 32px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* Sort icons nelle intestazioni tabella obiettivi */
.ob-col-sortable { white-space: nowrap; }
.ob-col-sortable:hover { background: rgba(37,99,235,.14); }
.ob-section-promotori .ob-col-sortable:hover { background: rgba(22,163,74,.12); }
.ob-sort-icon { font-style: normal; font-size: 11px; margin-left: 3px; opacity: .4; }
.ob-sort-asc, .ob-sort-desc { opacity: 1; color: var(--primary, #2563eb); }

/* Colonna importo euro — font tabular numbers */
.ob-euro { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Colonne anni precedenti nella tabella promotori */
.ob-col-prev {
  text-align: right;
  width: 80px;
  color: var(--text-secondary);
  font-size: 12px;
  background: rgba(100,116,139,.04);
}
.ob-table thead th.ob-col-prev {
  background: rgba(100,116,139,.08);
  color: var(--text-tertiary);
  font-size: 10px;
  text-align: center;
}
.ob-prev-nr { font-weight: 500; }

/* Avatar nell'header del drawer */
.drawer-header-profile {
  display: flex; align-items: center; gap: 14px; flex: 1;
}
.drawer-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}

/* ════════════ MODAL PROFILO UTENTE ════════════ */
.profilo-modal {
  background: #fff;
  border-radius: 20px;
  width: 460px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  position: relative;
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
.profilo-close-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.07); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; transition: background .15s;
}
.profilo-close-btn:hover { background: rgba(0,0,0,.13); }

/* Header */
.profilo-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  padding: 36px 28px 28px;
  text-align: center;
  border-radius: 20px 20px 0 0;
}
.profilo-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 3px solid rgba(255,255,255,.6);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; position: relative;
}
.profilo-avatar span {
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1;
}
.profilo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profilo-avatar-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s; border-radius: 50%;
}
.profilo-avatar:hover .profilo-avatar-overlay { opacity: 1; }
.profilo-nome-display {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px; font-weight: 800;
  color: #fff; letter-spacing: -.02em; line-height: 1.2;
  margin-bottom: 4px;
}
.profilo-ruolo-display {
  font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500;
  text-transform: capitalize;
}

/* Body form */
.profilo-body { padding: 24px 28px; flex: 1; }
.profilo-section-label {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 12px;
}
.profilo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profilo-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.profilo-label {
  font-size: 12px; font-weight: 600; color: #475569;
  font-family: 'Inter', system-ui, sans-serif;
}
.profilo-input {
  padding: 10px 13px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0f172a;
  background: #f8fafc;
  transition: border-color .15s, box-shadow .15s;
  width: 100%; box-sizing: border-box;
}
.profilo-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}

/* Footer */
.profilo-footer {
  padding: 16px 28px 22px;
  display: flex; gap: 10px; align-items: center;
  border-top: 1px solid #f1f5f9;
}
.profilo-btn-danger {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background .15s;
}
.profilo-btn-danger:hover { background: #fee2e2; }
.profilo-btn-cancel {
  margin-left: auto;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: #f1f5f9; color: #64748b; border: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background .15s;
}
.profilo-btn-cancel:hover { background: #e2e8f0; }
.profilo-btn-save {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff;
  border: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  transition: opacity .15s;
}
.profilo-btn-save:hover { opacity: .9; }

/* ════════════ GESTIONE UTENTI MODAL ════════════ */
.gu-modal {
  background: #fff;
  border-radius: 20px;
  width: 520px; max-width: 95vw; max-height: 92vh;
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
}
.gu-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 20px;
  background: linear-gradient(135deg,#1e3a8a,#2563eb);
  border-radius: 20px 20px 0 0;
  gap: 14px;
}
.gu-modal-avatar-wrap { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.gu-modal-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; position: relative;
}
.gu-modal-title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing:-.02em; }
.gu-modal-sub   { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.gu-modal-body  { padding: 22px 24px; flex: 1; }

/* Avatar nella riga tabella */
.gu-row-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#1e3a8a,#2563eb);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.users-table tbody tr:hover { background: rgba(37,99,235,.04); }
.users-table tbody tr { cursor: pointer; }