/* Inter unica famiglia del cockpit. Pesi importati 300..800: 800 è usato dai
   titoli onboarding/consumo (prima non importato → fallback silenzioso a 700). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple-1: #7c4dff;
  --purple-2: #9b6bff;
  --purple-3: #b48aff;
  --purple-dark: #5533cc;
  --purple-bg: #f3efff;
  --bg: #0f0f14;
  --bg-2: #16161f;
  --bg-3: #1e1e2a;
  --bg-4: #252535;
  --border: #2a2a3d;
  --text: #e8e8f0;
  --text-2: #a0a0b8;
  --text-3: #606078;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  /* Colonna di contenuto desktop: stessa max-width centrata usata da topbar E body,
     così su schermi larghi/ultrawide header e contenuto restano allineati. */
  --content-max: 1400px;
  --content-pad: 28px;
}

html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }

/* ===== LOGIN ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0f14 0%, #1a1028 100%);
}
.login-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(124,77,255,0.15);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.login-logo img { width: 40px; height: 40px; object-fit: contain; }
.login-logo-text { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--purple-1), var(--purple-3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub { color: var(--text-2); font-size: 13px; margin-bottom: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 10px 14px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}
.form-control:focus { border-color: var(--purple-1); box-shadow: 0 0 0 3px rgba(124,77,255,0.15); }
.btn-primary {
  width: 100%; padding: 11px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple-1), var(--purple-dark));
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }
.alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 10px 14px; color: #fca5a5; font-size: 13px; margin-bottom: 16px; }

/* ===== LAYOUT ===== */
.app-layout { display: flex; height: 100vh; overflow: hidden; }

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  transition: transform 0.25s ease;
}
.sidebar-logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo img { width: 30px; height: 30px; object-fit: contain; }
.sidebar-brand { font-size: 15px; font-weight: 700; background: linear-gradient(135deg, var(--purple-1), var(--purple-3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-section { padding: 8px 18px 4px; font-size: 10px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; color: var(--text-2); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: rgba(124,77,255,0.15); color: var(--purple-2); border-right: 3px solid var(--purple-1); }
.nav-item.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-sub-item { padding-left: 36px; font-size: 12.5px; color: var(--text-2); }
/* label + sottotitolo della voce (es. Appuntamenti -> "Richieste di consulenza") */
.nav-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-item-text .nav-item-sub { font-size: 10.5px; font-weight: 400; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { margin-left: auto; font-size: 10px; font-weight: 600; background: rgba(124,77,255,0.15); border: 1px solid rgba(124,77,255,0.3); border-radius: 999px; padding: 1px 7px; color: var(--purple-2); font-variant-numeric: tabular-nums; }
.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); }

/* TOPBAR */
/* main-wrap deve RIEMPIRE lo spazio del viewport accanto alla sidebar (fixed).
   La sidebar è position:fixed → fuori dal flusso, quindi main-wrap è l'unico
   figlio in-flow di .app-layout: senza flex-grow la sua larghezza collassava sul
   max-content del contenuto (~753px) e la topbar la ereditava ("header che cambia
   in base al contenuto"). flex:1 + min-width:0 → larghezza coerente = viewport - sidebar. */
.main-wrap { margin-left: var(--sidebar-w); flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* La topbar è una barra full-bleed (sfondo + bordo a tutta larghezza). Il suo
   CONTENUTO vive in .topbar-inner, centrato sullo stesso container del body. */
.topbar {
  height: var(--topbar-h); min-height: var(--topbar-h); /* altezza FISSA, mai guidata dal contenuto */
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch;
  padding: 0; flex-shrink: 0;
}
/* Allineamento esatto con .dash-wrap a ogni larghezza:
   max-width = content-max + 2*pad + padding pad → il bordo del contenuto interno
   coincide con il bordo di .dash-wrap (vedi .main-content/.dash-wrap sotto). */
.topbar-inner {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--content-pad));
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; border-radius: 6px; }
.hamburger:hover { background: var(--bg-3); }
.topbar-title { font-size: 15px; font-weight: 600; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--text-2);
  min-width: 0; max-width: 240px;
}
/* l'identita lunga (es. email) non deve sfondare la pill: tronca con ellissi */
.topbar-user strong {
  color: var(--text);
  min-width: 0; max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 768px) { .topbar-user { max-width: 46vw; } .topbar-user strong { max-width: 100%; } }

/* MAIN CONTENT */
.main-content { flex: 1; overflow-y: auto; padding: 28px var(--content-pad); }
/* Dashboard: contenuto centrato sulla stessa colonna della topbar (allineati a
   ogni larghezza, vedi .topbar-inner). */
.dash-wrap { max-width: var(--content-max); margin: 0 auto; }

/* OVERLAY */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }

/* ===== STAT CARDS ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
/* .stat-card: allineato ai token del sistema KPI canonico (.kpi-card) — stesso
   radius, stesso trattamento accent, numeri tabular-nums. Sistema KPI unico. */
.stat-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); padding: 20px;
}
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-size: 32px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card.accent { border-color: rgba(124,77,255,0.35); background: rgba(124,77,255,0.06); }
.stat-card.accent .stat-value { color: var(--purple-2); }

/* ===== PAGE HEADER ===== */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.page-title { font-size: 20px; font-weight: 700; }
.page-sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: opacity 0.2s, transform 0.1s; font-family: inherit; }
.btn:active { transform: scale(0.98); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-primary { background: linear-gradient(135deg, var(--purple-1), var(--purple-dark)); color: #fff; }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2); }
.btn-secondary:hover { color: var(--text); background: var(--bg-4); }
.btn-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-outline:hover { border-color: var(--purple-2); color: var(--purple-3); }

/* ===== TABLE ===== */
.table-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.table-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.table-search { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; width: 240px; }
.table-search:focus { border-color: var(--purple-1); }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-3); }
tbody td { padding: 12px 16px; font-size: 13.5px; color: var(--text); }
.td-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Badge */
.badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-success { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.badge-warning { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.25); }
.badge-service { background: rgba(124,77,255,0.12); color: var(--purple-3); border: 1px solid rgba(124,77,255,0.25); margin: 2px; }

/* ===== FORM ===== */
.form-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.form-section-title { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-full { grid-column: 1 / -1; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 13px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 13.5px; font-family: inherit;
  transition: border-color 0.2s; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--purple-1); box-shadow: 0 0 0 3px rgba(124,77,255,0.12); }
.form-select { cursor: pointer; appearance: none; }
.form-textarea { resize: vertical; min-height: 80px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; transition: border-color 0.15s; }
.checkbox-label input { accent-color: var(--purple-1); width: 15px; height: 15px; cursor: pointer; }
.checkbox-label:has(input:checked) { border-color: var(--purple-1); background: rgba(124,77,255,0.1); color: var(--purple-3); }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 4px; }

/* ===== DETAIL ===== */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.detail-field label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 4px; }
.detail-field span { font-size: 14px; color: var(--text); display: block; }
.detail-field span.empty { color: var(--text-2); font-style: italic; }
.detail-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.detail-section-title { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ===== CARD MOBILE (clienti) ===== */
.client-cards { display: none; }
.client-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.client-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.client-card-name { font-size: 15px; font-weight: 600; }
.client-card-meta { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.client-card-actions { display: flex; gap: 8px; }

/* ===== CARD MOBILE (task) ===== */
.task-cards { display: none; }
.task-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.task-card.task-card-done { opacity: 0.6; }
.task-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.task-card-title { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
.task-card-detail { font-size: 12px; color: var(--text-2); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card-meta { font-size: 12px; color: var(--text-2); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .main-wrap { margin-left: 0; }
  .hamburger { display: flex; }
  /* su mobile la colonna usa pad ridotto: topbar-inner e main-content restano allineati */
  :root { --content-pad: 16px; }
  .main-content { padding: 18px var(--content-pad); }

  .table-wrap table { display: none; }
  .client-cards { display: block; }
  .order-cards { display: block; }
  .enroll-cards { display: block; }
  .task-cards { display: block; }

  .form-grid, .form-grid.cols-2 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .detail-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== TABELLA RESPONSIVE RIUSABILE (.table-stack) =====
   Convenzione design-system (studio UI §4.2): per le tabelle READ-ONLY,
   invece di duplicare i dati in card a mano, una sola classe trasforma la
   tabella in blocchi impilati su mobile. La label di colonna viene dall'attr
   data-label su ogni <td>. Nessuna duplicazione di markup, niente divergenza.
   Override esplicito della regola globale che nasconde .table-wrap table <=768px. */
@media (max-width: 768px) {
  .table-wrap.table-stack table,
  .table-wrap.table-stack tbody,
  .table-wrap.table-stack tr,
  .table-wrap.table-stack td { display: block; width: 100%; }
  .table-wrap.table-stack thead { display: none; }
  .table-wrap.table-stack tr {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px;
  }
  .table-wrap.table-stack td {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 5px 0; border: 0; font-size: 13px; text-align: right;
  }
  .table-wrap.table-stack td::before {
    content: attr(data-label); color: var(--text-2); font-weight: 600;
    text-align: left; flex-shrink: 0;
  }
  /* celle senza label (es. colonna azioni) restano allineate a sinistra */
  .table-wrap.table-stack td:not([data-label]) { justify-content: flex-start; text-align: left; }
}

/* ===== ORDER STATUS BADGES ===== */
.badge-order-pending   { background: rgba(100,100,120,0.15); color: var(--text-2); border: 1px solid var(--border); }
.badge-order-paid      { background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.25); }
.badge-order-shipped   { background: rgba(124,77,255,0.12); color: var(--purple-3); border: 1px solid rgba(124,77,255,0.25); }
.badge-order-fulfilled { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.badge-order-cancelled { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }

/* ===== ORDER CARDS MOBILE ===== */
.order-cards { display: none; }
.order-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.order-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.order-card-meta { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }

/* ===== ELEARNING BADGES ===== */
.badge-enroll-active { background: rgba(124,77,255,0.12); color: var(--purple-3); border: 1px solid rgba(124,77,255,0.25); }
.badge-enroll-done   { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.25); }

/* ===== ENROLL CARDS MOBILE ===== */
.enroll-cards { display: none; }
.enroll-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.enroll-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.enroll-card-meta { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }

/* ===== UTILITY (estratte dagli inline ripetuti: mono, muted) ===== */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }

/* ===== SUBTABS (tab di sezione dentro una pagina, es. Lead / Report SLA) ===== */
.subtabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.subtab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none;
  padding: 9px 14px; border-radius: 8px 8px 0 0; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s, background .15s;
}
.subtab:hover { color: var(--text); background: var(--bg-3); }
.subtab.active { color: var(--purple-2); border-bottom-color: var(--purple-1); }

/* ===== EMPTY STATE =====
   Canonico per nuovo lavoro: .empty-v2 (icona in box tinto + h4 + p).
   .empty-state (legacy, svg+p) è qui allineato allo STESSO linguaggio visivo
   (stessa spaziatura, colori token, icona soft) così i due leggono come uno. */
.empty-state { padding: var(--s6, 48px) var(--s4, 24px); text-align: center; color: var(--text-2); }
.empty-state svg { width: 46px; height: 46px; margin-bottom: 10px; opacity: 0.45; stroke: var(--primary-2); }
.empty-state p { font-size: var(--fs-md, 15px); margin-bottom: 16px; max-width: 360px; margin-left: auto; margin-right: auto; }

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
.confirm-overlay.open { display: flex; }
.confirm-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 28px; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.confirm-text { font-size: 13px; color: var(--text-2); margin-bottom: 22px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ===== ALERTS ===== */
.alert { border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alert-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }
.alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; }

/* ===== CATALOGO PRODUCT CARDS (mobile) ===== */
.product-cards { display: none; }
.product-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }

@media (max-width: 768px) {
  .product-cards { display: block; }
}

/* =====================================================================
   DASHBOARD V2 — cockpit vivo + regole anti-overflow (R1..R10)
   Sezione additiva: non altera le classi sopra. Riferimento spec:
   _strategia/DASHBOARD-V2-SPEC-2026-06-22.md
   ===================================================================== */

/* --- Token di base (scala 8, raggio, larghezza minima KPI) --- */
:root{
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --radius:12px;
  --kpi-min:220px;
  /* Scala tipografica unica (Inter, base 14px). Sistema dichiarato: una sola
     famiglia, pesi 400/500/600/700/800, scala modulare. I numeri usano sempre
     tabular-nums (vedi .kpi-value). Titoli pagina fluidi via clamp. */
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:clamp(22px,3vw,30px);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  /* alias semantici dei colori esistenti, così le viste non hardcodano hex */
  --primary: var(--purple-1);
  --primary-2: var(--purple-2);
  --ok: var(--success);
  --warn: var(--warning);
  --crit: var(--danger);
  --panel-bg: var(--bg-2);
}

/* --- Tema chiaro (data-theme="light" su <html>): override delle sole var
   colore. Default resta dark. Contrasto AA mantenuto. --- */
html[data-theme="light"]{
  --bg:#f5f5fa; --bg-2:#ffffff; --bg-3:#f0f0f6; --bg-4:#e7e7f0;
  --border:#e0e0ea; --text:#1c1c28; --text-2:#5b5b73; --text-3:#8a8aa0;
  --panel-bg:#ffffff;
  --purple-bg:#f3efff;
}
html[data-theme="light"] body{ background:var(--bg); color:var(--text); }
html[data-theme="light"] .stat-card.accent{ background:rgba(124,77,255,0.06); }

/* immagini/video non sfondano mai il contenitore (R0). Gli svg con width/height
   espliciti restano intatti: limitiamo solo img/video per non deformare le icone. */
.main-content img, .main-content video{ max-width:100%; height:auto; }

/* --- R1: min-width:0 su OGNI figlio flex/grid con testo (regola madre) --- */
.kpi-card, .kpi-card *, .panel, .panel-body, .panel-body *,
.kpi-strip > *, .kpi-grid > *, .dlist td, .drawer-body *{ min-width:0; }

/* --- R2/R3/R4: utility di troncamento e wrapping --- */
.truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clamp-2{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }

/* =================== TOPBAR v2: ora + freshness + controlli =============== */
.topbar-center{ display:flex; align-items:center; gap:var(--s3); min-width:0; flex:1; justify-content:center; }
.clock{
  display:inline-flex; align-items:baseline; gap:8px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.clock-date{ font-size:12px; color:var(--text-2); text-transform:capitalize; }
.clock-time{ font-size:15px; font-weight:600; color:var(--text); letter-spacing:0.5px; }
.freshness{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-2);
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
.freshness.is-fresh .live-dot{ background:var(--ok); animation:pulse 2s infinite; }
.freshness.is-stale .live-dot{ background:var(--warn); animation:none; }
.freshness.is-down  .live-dot{ background:var(--crit); animation:none; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.topbar-controls{ display:flex; align-items:center; gap:var(--s2); }
.period-picker{
  display:inline-flex; background:var(--bg-3); border:1px solid var(--border);
  border-radius:8px; padding:2px; gap:2px;
}
.period-picker a{
  font-size:12px; color:var(--text-2); text-decoration:none;
  padding:4px 9px; border-radius:6px; white-space:nowrap; transition:background .15s,color .15s;
}
.period-picker a:hover{ color:var(--text); }
.period-picker a.active{ background:var(--primary); color:#fff; font-weight:600; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--border); color:var(--text-2);
  transition:color .15s, background .15s;
}
.icon-btn:hover{ color:var(--text); background:var(--bg-4); }
.icon-btn svg{ width:16px; height:16px; }

/* =================== HERO KPI STRIP =================== */
.dash-section-title{
  font-size:12px; font-weight:700; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.7px; margin:var(--s5) 0 var(--s3);
}
.dash-section-title:first-of-type{ margin-top:0; }
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(var(--kpi-min),100%), 1fr));
  gap:var(--s3);
}
.kpi-card{
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
  position:relative; overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.kpi-card:hover{ border-color:rgba(124,77,255,0.4); }
.kpi-card.accent{ border-color:rgba(124,77,255,0.35); background:rgba(124,77,255,0.06); }
.kpi-card-head{ display:flex; align-items:center; gap:var(--s2); }
.kpi-icon{
  width:34px; height:34px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,77,255,0.12);
}
.kpi-icon svg{ width:18px; height:18px; stroke:var(--primary-2); }
.kpi-title{
  font-size:12px; font-weight:600; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.4px; flex:1;
}
.kpi-value{
  font-size:clamp(22px, 4.5vw, 30px); font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; line-height:1.1;
}
.kpi-value .unit{ font-size:14px; font-weight:500; color:var(--text-2); margin-left:4px; }
.kpi-foot{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.kpi-sub{ font-size:12px; color:var(--text-2); min-width:0; }

/* delta ↑↓ con freccia + label (mai colore da solo) */
.delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; white-space:nowrap; }
.delta.up{ color:#4ade80; }
.delta.down{ color:#f87171; }
.delta.flat{ color:var(--text-2); }
html[data-theme="light"] .delta.up{ color:#16a34a; }
html[data-theme="light"] .delta.down{ color:#dc2626; }

/* semaforo di stato: icona + label, mai solo colore (R10/WCAG) */
.dot{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.dot::before{ content:""; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--text-2); }
.dot.ok{ color:#4ade80; } .dot.ok::before{ background:var(--ok); }
.dot.warn{ color:#fcd34d; } .dot.warn::before{ background:var(--warn); }
.dot.crit{ color:#f87171; } .dot.crit::before{ background:var(--crit); }
html[data-theme="light"] .dot.ok{ color:#16a34a; }
html[data-theme="light"] .dot.warn{ color:#b45309; }
html[data-theme="light"] .dot.crit{ color:#dc2626; }

/* =================== BANDA ALERT =================== */
.alert-band{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3); }
.alert-item{
  display:flex; align-items:center; gap:var(--s3); min-width:0;
  background:var(--panel-bg); border:1px solid var(--border);
  border-left:3px solid var(--text-2);
  border-radius:10px; padding:12px var(--s3);
}
.alert-item.warn{ border-left-color:var(--warn); }
.alert-item.crit{ border-left-color:var(--crit); }
.alert-item.info{ border-left-color:var(--primary); }
.alert-ico{ flex-shrink:0; width:18px; height:18px; }
.alert-ico svg{ width:18px; height:18px; }
.alert-item.warn .alert-ico{ color:var(--warn); }
.alert-item.crit .alert-ico{ color:var(--crit); }
.alert-item.info .alert-ico{ color:var(--primary-2); }
.alert-text{ flex:1; min-width:0; font-size:13px; color:var(--text); }
.alert-text .clamp-2{ color:var(--text-2); font-size:12px; margin-top:2px; }
.alert-actions{ display:flex; align-items:center; gap:var(--s2); flex-shrink:0; }
.alert-dismiss{ background:none; border:none; color:var(--text-2); cursor:pointer; padding:4px; border-radius:6px; line-height:0; }
.alert-dismiss:hover{ color:var(--text); background:var(--bg-3); }

/* =================== PANELS / GRAFICI / LISTE =================== */
.content-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4); margin-top:var(--s3); }
.content-grid.one{ grid-template-columns:minmax(0,1fr); }
.panel{
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); display:flex; flex-direction:column; min-width:0;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); min-width:0;
}
.panel-title{ font-size:14px; font-weight:600; color:var(--text); min-width:0; }
.panel-sub{ font-size:12px; color:var(--text-2); margin-top:2px; }
.panel-head .link{ font-size:12px; color:var(--primary-2); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.panel-head .link:hover{ text-decoration:underline; }
.panel-body{ padding:var(--s4); }

/* mini bar-chart in pura CSS (no libs): accessibile via aria-label sulle barre */
.spark{ display:flex; align-items:flex-end; gap:6px; height:120px; }
.spark .bar{ flex:1; min-width:0; background:linear-gradient(180deg,var(--primary-2),var(--primary)); border-radius:6px 6px 0 0; min-height:4px; position:relative; }
.spark .bar.muted{ background:var(--bg-4); }
.spark-x{ display:flex; gap:6px; margin-top:8px; }
.spark-x span{ flex:1; min-width:0; text-align:center; font-size:10px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* funnel CRM lead (stati) — barre orizzontali con label troncata */
.funnel{ display:flex; flex-direction:column; gap:10px; }
.funnel-row{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.funnel-label{ width:110px; flex-shrink:0; font-size:12px; color:var(--text-2); }
.funnel-track{ flex:1; min-width:0; height:22px; background:var(--bg-3); border-radius:6px; overflow:hidden; }
.funnel-fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-radius:6px; display:flex; align-items:center; padding-left:8px; }
.funnel-fill span{ font-size:11px; font-weight:700; color:#fff; }
.funnel-n{ width:34px; flex-shrink:0; text-align:right; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.panel-note{ margin-top:var(--s3); font-size:12px; line-height:1.5; color:var(--text-2); }

/* lista actionable (table → card mobile) */
.dlist{ width:100%; border-collapse:collapse; }
.dlist th{ padding:10px var(--s3); text-align:left; font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px; border-bottom:1px solid var(--border); }
.dlist td{ padding:11px var(--s3); font-size:13px; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle; }
.dlist tr:last-child td{ border-bottom:none; }
.dlist tbody tr{ cursor:pointer; transition:background .12s; }
.dlist tbody tr:hover{ background:var(--bg-3); }
.cell-strong{ font-weight:600; color:var(--text); }
.cell-sub{ font-size:12px; color:var(--text-2); }
.dlist .col-grow{ width:99%; }

/* =================== DRAWER drill-down =================== */
.drawer-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:210; }
.drawer-overlay.open{ display:block; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(420px,92vw);
  background:var(--panel-bg); border-left:1px solid var(--border);
  z-index:220; transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,0.4);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); padding:var(--s4); border-bottom:1px solid var(--border); }
.drawer-title{ font-size:16px; font-weight:700; min-width:0; }
.drawer-body{ flex:1; overflow-y:auto; padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.drawer-field label{ font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:3px; }
.drawer-field .val{ font-size:14px; color:var(--text); }

/* =================== EMPTY STATE v2 =================== */
.empty-v2{ text-align:center; padding:var(--s6) var(--s4); display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.empty-v2 .ico{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(124,77,255,0.12); margin-bottom:4px; }
.empty-v2 .ico svg{ width:26px; height:26px; stroke:var(--primary-2); }
.empty-v2 h4{ font-size:15px; font-weight:700; color:var(--text); }
.empty-v2 p{ font-size:13px; color:var(--text-2); max-width:340px; }

/* =================== SKELETON =================== */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-3); border-radius:6px; color:transparent !important; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); animation:shimmer 1.3s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.fade-in{ animation:fadeIn .4s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* =================== TOAST =================== */
.toast-wrap{ position:fixed; bottom:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:min(360px,92vw); }
.toast{
  display:flex; align-items:center; gap:10px; min-width:0;
  background:var(--bg-2); border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:10px; padding:12px var(--s3); box-shadow:0 12px 40px rgba(0,0,0,0.35);
  animation:toastIn .25s ease both; font-size:13px; color:var(--text);
}
.toast.ok{ border-left-color:var(--ok); }
.toast.warn{ border-left-color:var(--warn); }
.toast.err{ border-left-color:var(--crit); }
.toast .toast-msg{ flex:1; min-width:0; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }

/* =================== RESPONSIVE v2 =================== */
@media (max-width:900px){
  .content-grid{ grid-template-columns:minmax(0,1fr); }
  .topbar-center{ display:none; }   /* clock/freshness passano in una riga sotto su mobile */
}
@media (max-width:700px){
  /* su mobile il period-picker andrebbe a capo e sforerebbe la topbar: lo nascondiamo */
  .period-picker{ display:none; }
}
@media (max-width:480px){
  .kpi-grid{ grid-template-columns:1fr; }
  .topbar{ position:sticky; top:0; z-index:30; }
  .dlist.table-as-card thead{ display:none; }
  .dlist.table-as-card, .dlist.table-as-card tbody, .dlist.table-as-card tr, .dlist.table-as-card td{ display:block; width:100%; }
  .dlist.table-as-card tr{ border:1px solid var(--border); border-radius:10px; margin-bottom:10px; padding:6px; }
  .dlist.table-as-card td{ border:none; padding:6px 10px; }
  .funnel-label{ width:84px; }
  .period-picker{ flex-wrap:wrap; }
}

/* freshness/clock compatti su mobile: riga dedicata sotto la topbar */
.mobile-meta{ display:none; }
@media (max-width:900px){
  .mobile-meta{ display:flex; align-items:center; gap:var(--s3); padding:10px 16px; border-bottom:1px solid var(--border); background:var(--bg-2); flex-wrap:wrap; }
}

/* =====================================================================
   PASS A — PORTALE CLIENTE: onboarding che gasa, movimento, chat plug,
   barra consumo AI. Sezione additiva (non altera le classi sopra).
   Tutto rispetta le 10 regole anti-overflow (min-width:0, truncate, clamp).
   ===================================================================== */

/* ---- Movimento d'ingresso (fade + slide-in), una volta, accessibile ---- */
@keyframes revealUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes growW{ from{ width:0; } to{ width:var(--w,100%); } }
@keyframes popIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.reveal{ animation:revealUp .5s cubic-bezier(.2,.7,.3,1) both; }

/* ---- ONBOARDING / spinta al futuro ---- */
.onb-card{
  position:relative; overflow:hidden; min-width:0;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124,77,255,0.16), transparent 55%),
    var(--panel-bg);
  border:1px solid rgba(124,77,255,0.30); border-radius:16px;
  padding:var(--s4); margin-bottom:var(--s4);
  box-shadow:0 10px 40px rgba(124,77,255,0.08);
}
.onb-glow{
  position:absolute; top:-40%; right:-10%; width:340px; height:340px; pointer-events:none;
  background:radial-gradient(circle, rgba(124,77,255,0.22), transparent 65%);
  filter:blur(8px); animation:onbDrift 9s ease-in-out infinite alternate;
}
@keyframes onbDrift{ from{ transform:translate(0,0); } to{ transform:translate(-24px,18px); } }
.onb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); min-width:0; position:relative; }
.onb-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--primary-2); }
.onb-spark{ width:8px; height:8px; border-radius:50%; background:var(--primary-2); box-shadow:0 0 0 0 rgba(124,77,255,.6); animation:pulse 2s infinite; flex-shrink:0; }
.onb-title{ font-size:clamp(18px,2.6vw,24px); font-weight:800; color:var(--text); line-height:1.2; margin:8px 0 6px; }
.onb-sub{ font-size:13px; color:var(--text-2); max-width:46ch; line-height:1.5; }
.onb-ring{
  flex-shrink:0; width:74px; height:74px; border-radius:50%;
  background:conic-gradient(var(--primary) calc(var(--pct,0)*1%), var(--bg-4) 0);
  -webkit-mask:radial-gradient(circle 34px at 50% 50%, transparent 22px, #000 23px);
          mask:radial-gradient(circle 34px at 50% 50%, transparent 22px, #000 23px);
  display:grid; place-items:center; position:relative;
}
.onb-ring-num{ font-size:15px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.onb-progress{ margin:var(--s4) 0 var(--s3); }
.onb-bar{ height:8px; border-radius:999px; background:var(--bg-3); overflow:hidden; }
.onb-fill{
  height:100%; width:var(--w,0%); border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  animation:growW 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay:.15s;
}
.onb-progress-meta{ margin-top:8px; font-size:12px; color:var(--text-2); font-weight:600; }
.onb-steps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:var(--s2); }
.onb-step{
  display:flex; align-items:center; gap:var(--s3); min-width:0;
  background:var(--bg-3); border:1px solid var(--border); border-radius:12px; padding:12px var(--s3);
  transition:border-color .15s, transform .15s, background .15s;
}
.onb-step:hover{ border-color:rgba(124,77,255,0.4); transform:translateY(-2px); }
.onb-step.done{ background:rgba(34,197,94,0.06); border-color:rgba(34,197,94,0.28); }
.onb-step-ck{
  width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center;
  background:rgba(124,77,255,0.12); color:var(--primary-2);
}
.onb-step-ck svg{ width:18px; height:18px; }
.onb-step.done .onb-step-ck{ background:rgba(34,197,94,0.16); color:var(--ok); }
.onb-step-txt{ flex:1; min-width:0; }
.onb-step-title{ font-size:13.5px; font-weight:600; color:var(--text); }
.onb-step.done .onb-step-title{ color:var(--text-2); }
.onb-step-desc{ font-size:12px; color:var(--text-2); margin-top:2px; line-height:1.4; }
.onb-step-act{ flex-shrink:0; }
.onb-cta{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); }
.onb-cta-note{ font-size:12px; color:var(--text-2); }

/* ---- CONSUMO AI (plug visivo) ---- */
.consumo-meter{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--border); border-radius:12px; padding:var(--s3);
  transition:border-color .15s, transform .15s;
}
.consumo-meter:hover{ border-color:rgba(124,77,255,0.4); transform:translateY(-2px); }
.consumo-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.consumo-pct{ font-size:26px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1; }
.consumo-cap{ font-size:12px; color:var(--text-2); }
.consumo-bar{ height:10px; border-radius:999px; background:var(--bg-4); overflow:hidden; }
.consumo-fill{
  height:100%; width:var(--w,0%); border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  animation:growW 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay:.2s;
}
.consumo-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:10px; flex-wrap:wrap; }
.consumo-hint{ font-size:11px; color:var(--text-3); }

/* ---- ACTION TILES (cosa puoi fare ora) ---- */
.action-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:var(--s2); }
.action-tile{
  display:flex; align-items:center; gap:var(--s3); min-width:0; text-align:left; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--border); border-radius:12px; padding:12px var(--s3);
  color:var(--text); text-decoration:none; transition:border-color .15s, transform .15s, background .15s;
}
.action-tile:hover{ border-color:rgba(124,77,255,0.4); transform:translateY(-2px); background:var(--bg-4); }
.action-ico{ width:36px; height:36px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; background:rgba(124,77,255,0.12); color:var(--primary-2); }
.action-ico svg{ width:18px; height:18px; }
.action-txt{ display:flex; flex-direction:column; min-width:0; }
.action-t{ font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.action-d{ font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- CHAT PLUG (anteprima, nessun backend) ---- */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:320;
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg,var(--purple-1),var(--purple-dark)); color:#fff;
  border:none; border-radius:999px; padding:13px 18px; cursor:pointer;
  font-size:13.5px; font-weight:700; font-family:inherit;
  box-shadow:0 12px 32px rgba(124,77,255,0.45);
  transition:transform .15s, box-shadow .15s, opacity .2s;
  animation:revealUp .5s .4s both;
}
.chat-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(124,77,255,0.55); }
.chat-fab svg{ width:20px; height:20px; flex-shrink:0; }
.chat-fab.hidden{ opacity:0; pointer-events:none; transform:translateY(10px) scale(.96); }
.chat-panel{
  position:fixed; right:22px; bottom:22px; z-index:330; width:min(380px,calc(100vw - 24px));
  max-height:min(620px,calc(100vh - 44px)); display:none; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.5);
}
.chat-panel.open{ display:flex; animation:popIn .25s ease both; }
.chat-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:14px var(--s3); border-bottom:1px solid var(--border); background:var(--bg-2); }
.chat-head-id{ display:flex; align-items:center; gap:10px; min-width:0; }
.chat-avatar{ width:36px; height:36px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--purple-1),var(--purple-dark)); color:#fff; }
.chat-avatar svg{ width:20px; height:20px; }
.chat-head-title{ font-size:14px; font-weight:700; color:var(--text); }
.chat-head-sub{ font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.chat-modes{ display:flex; gap:6px; padding:10px var(--s3); border-bottom:1px solid var(--border); }
.chat-mode{
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:600; font-family:inherit; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--border); color:var(--text-2);
  border-radius:8px; padding:8px 6px; transition:background .15s,color .15s,border-color .15s;
}
.chat-mode svg{ width:14px; height:14px; flex-shrink:0; }
.chat-mode.active{ background:rgba(124,77,255,0.14); border-color:rgba(124,77,255,0.4); color:var(--primary-2); }
.chat-body{ flex:1; overflow-y:auto; padding:var(--s3); display:flex; flex-direction:column; gap:10px; min-height:140px; }
.chat-bubble{ max-width:85%; min-width:0; }
.chat-bubble.bot{ align-self:flex-start; }
.chat-bubble.user{ align-self:flex-end; }
.chat-bubble.pop{ animation:popIn .25s ease both; }
.chat-bubble-txt{ font-size:13px; line-height:1.5; padding:10px 13px; border-radius:14px; overflow-wrap:anywhere; }
.chat-bubble.bot .chat-bubble-txt{ background:var(--bg-3); color:var(--text); border-bottom-left-radius:5px; }
.chat-bubble.user .chat-bubble-txt{ background:linear-gradient(135deg,var(--purple-1),var(--purple-dark)); color:#fff; border-bottom-right-radius:5px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:7px; }
.chat-suggest[hidden]{ display:none; }
.chat-chip{
  font-size:12px; font-family:inherit; cursor:pointer; color:var(--primary-2);
  background:rgba(124,77,255,0.10); border:1px solid rgba(124,77,255,0.3); border-radius:999px;
  padding:6px 12px; transition:background .15s; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-chip:hover{ background:rgba(124,77,255,0.2); }
.chat-input{ display:flex; align-items:center; gap:8px; padding:10px var(--s3); border-top:1px solid var(--border); }
.chat-input input{
  flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--border); border-radius:999px;
  padding:9px 14px; color:var(--text); font-size:13px; font-family:inherit;
}
.chat-input input:disabled{ cursor:not-allowed; color:var(--text-3); }
.chat-send{ width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; background:var(--bg-4); color:var(--text-3); }
.chat-send svg{ width:16px; height:16px; }
.chat-send:disabled{ cursor:not-allowed; }
.chat-foot{ padding:8px var(--s3) 12px; font-size:11px; color:var(--text-3); text-align:center; }

/* ---- MODALE CONSUMO AI ---- */
.cons-backdrop{ display:none; position:fixed; inset:0; z-index:340; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px); }
.cons-backdrop.open{ display:block; }
.cons-modal{
  display:none; position:fixed; inset:0; margin:auto; z-index:341;
  width:min(520px,calc(100vw - 24px)); height:max-content; max-height:90vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--border); border-radius:16px; padding:var(--s4);
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
.cons-modal.open{ display:block; animation:popIn .25s ease both; }
.cons-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); min-width:0; }
.cons-title{ font-size:18px; font-weight:800; color:var(--text); }
.cons-sub{ font-size:13px; color:var(--text-2); margin-top:3px; }
.cons-summary{ background:var(--bg-3); border:1px solid var(--border); border-radius:12px; padding:var(--s3); margin-bottom:var(--s4); }
.cons-summary-num{ font-size:28px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; margin-bottom:10px; }
.cons-summary-unit{ font-size:13px; font-weight:500; color:var(--text-2); margin-left:4px; }
.cons-summary-meta{ font-size:12px; color:var(--text-2); margin-top:10px; }
.cons-list-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); margin-bottom:10px; }
.cons-list{ display:flex; flex-direction:column; gap:8px; }
.cons-row{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.cons-row-ico{ width:32px; height:32px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; background:rgba(124,77,255,0.12); color:var(--primary-2); }
.cons-row-ico svg{ width:16px; height:16px; }
.cons-row-txt{ flex:1; min-width:0; }
.cons-row-t{ font-size:13px; font-weight:600; color:var(--text); }
.cons-row-d{ font-size:11.5px; color:var(--text-2); }
.cons-row-bar{ width:84px; flex-shrink:0; height:6px; border-radius:999px; background:var(--bg-4); overflow:hidden; }
.cons-row-fill{ height:100%; width:var(--w,0%); border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--primary-2)); animation:growW 1s cubic-bezier(.2,.8,.2,1) both; animation-delay:.1s; }
.cons-row-pct{ width:34px; flex-shrink:0; text-align:right; font-size:12.5px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.cons-note{ margin-top:var(--s4); font-size:12px; color:var(--text-3); line-height:1.5; }

/* ---- Responsive cliente ---- */
@media (max-width:560px){
  .onb-head{ flex-direction:column; align-items:flex-start; gap:var(--s3); }
  .onb-ring{ align-self:flex-start; }
  .chat-fab-label{ display:none; }
  .chat-fab{ padding:14px; }
  .chat-panel{ right:12px; left:12px; bottom:12px; width:auto; }
}

/* =====================================================================
   A11Y FONDAMENTA (design-system): focus-visible coerente su TUTTO il
   cockpit + reduced-motion COMPLETO. Prima: focus-visible assente,
   reduced-motion coperto solo per il blocco cliente (live-dot/skeleton/
   toast continuavano ad animare). Sono gate del processo UI.
   ===================================================================== */

/* Focus visibile coerente: anello viola a 3px, solo da tastiera (:focus-visible),
   mai sul focus da mouse. Vale per link, bottoni, campi e voci nav/tab. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.subtab:focus-visible,
.gx-tab:focus-visible,
.action-tile:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--purple-2);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Per gli input togliamo il doppio segnale: l'anello sostituisce il box-shadow. */
.form-control:focus-visible { box-shadow: none; }

/* reduced-motion COMPLETO: azzera ogni animazione/transizione (live-dot,
   skeleton, toast, reveal, barre) lasciando lo stato finale; niente smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .onb-fill, .consumo-fill, .cons-row-fill { width: var(--w, 0%); }
}

/* =====================================================================
   GESTIONALE (Consulta) v2 — filtri STABILI ed etichettati, KPI card
   anti-overflow, breakdown leggibili (metodo/giorno/turno/categoria),
   intervallo date custom. Riusa i token (--s*, --radius, --primary, --ok…)
   e le 10 regole anti-overflow del DASHBOARD-V2-SPEC. Vale per /gestionale
   (agenzia) e /mio-gestionale (cliente): stesso markup riusabile.
   ===================================================================== */

/* --- Toolbar filtri: posizione STABILE, gruppi etichettati (niente pill
   che salta a tutta larghezza come nella v1). --- */
.gx-toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3) var(--s5);
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s3) var(--s4);
  margin-bottom:var(--s4); min-width:0;
}
.gx-fgroup{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.gx-fgroup-label{
  font-size:11px; font-weight:700; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.6px;
  display:flex; align-items:center; gap:6px;
}
.gx-fgroup-label svg{ width:13px; height:13px; opacity:.85; flex-shrink:0; }

/* segmented control: contenitore inline (NON stretch), opzioni a contenuto */
.gx-seg{
  display:inline-flex; align-self:flex-start; flex-wrap:wrap; gap:3px;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:10px; padding:3px;
}
.gx-seg a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--text-2); text-decoration:none;
  padding:7px 14px; border-radius:7px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.gx-seg a:hover{ color:var(--text); background:var(--bg-4); }
.gx-seg a.active{ background:var(--primary); color:#fff; box-shadow:0 1px 3px rgba(124,77,255,0.4); }
.gx-seg a.active:hover{ background:var(--primary); color:#fff; }

/* range date custom (da/a): form GET → stato bookmarkabile, nessuno stato JS */
.gx-daterange{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s2); min-width:0; }
.gx-date{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.gx-date > span{ font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.4px; }
.gx-date input[type=date]{
  background:var(--bg-3); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; font-family:inherit; padding:7px 10px;
  outline:none; transition:border-color .15s, box-shadow .15s; color-scheme:dark; max-width:155px;
}
html[data-theme="light"] .gx-date input[type=date]{ color-scheme:light; }
.gx-date input[type=date]:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,77,255,0.12); }
.gx-daterange .btn{ height:36px; }
.gx-range-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--primary-2);
  background:rgba(124,77,255,0.1); border:1px solid rgba(124,77,255,0.25);
  border-radius:999px; padding:5px 12px; white-space:nowrap; max-width:100%;
}
.gx-range-tag .x{ color:var(--text-2); text-decoration:none; line-height:0; display:inline-flex; }
.gx-range-tag .x:hover{ color:var(--text); }

/* --- KPI gestionale: griglia fluida + card overflow-safe (R5/R6) --- */
.gx-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(210px,100%), 1fr));
  gap:var(--s3); margin-bottom:var(--s4);
}
.gx-kpi{
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s3) var(--s4);
  display:flex; flex-direction:column; gap:6px; min-width:0; overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.gx-kpi:hover{ border-color:rgba(124,77,255,0.35); }
.gx-kpi.accent{ border-color:rgba(124,77,255,0.35); background:rgba(124,77,255,0.06); }
.gx-kpi-label{
  font-size:11px; font-weight:600; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gx-kpi-value{
  font-size:clamp(19px, 2.3vw, 25px); font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gx-kpi.accent .gx-kpi-value{ color:var(--primary-2); }
.gx-kpi-sub{ font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- breakdown a barre: nome (troncato) + importo + sub-conteggio + track --- */
.gx-bars{ display:flex; flex-direction:column; gap:var(--s3); }
.gx-bar-row{ min-width:0; }
.gx-bar-top{ display:flex; align-items:baseline; gap:var(--s3); margin-bottom:6px; min-width:0; }
.gx-bar-name{ flex:1; min-width:0; font-size:13px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gx-bar-amt{ flex-shrink:0; font-size:13.5px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.gx-bar-sub{ flex-shrink:0; font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:54px; text-align:right; }
.gx-bar-track{ height:8px; background:var(--bg-3); border-radius:6px; overflow:hidden; }
.gx-bar-fill{ height:100%; min-width:3px; background:linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius:6px; }
.gx-bar-fill.alt{ background:linear-gradient(90deg, #2bb673, #4ade80); }

/* --- meta freschezza + nota limiti range (mai dati inventati) --- */
.gx-fresh{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); margin-top:var(--s3); }
.gx-fresh svg{ width:14px; height:14px; opacity:.8; flex-shrink:0; }
.gx-note{ font-size:12.5px; color:var(--text-2); line-height:1.55; background:var(--bg-3); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:8px; padding:10px var(--s3); margin-bottom:var(--s4); }

/* --- hardening globale stat-card (R1/R6): nessun valore esce più dai bordi --- */
.stat-card{ min-width:0; overflow:hidden; }
.stats-grid > *{ min-width:0; }
.stat-value{ font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- responsive gestionale --- */
@media (max-width:560px){
  .gx-toolbar{ gap:var(--s3); padding:var(--s3); }
  .gx-fgroup{ width:100%; }
  .gx-seg{ width:100%; }
  .gx-seg a{ flex:1 1 auto; justify-content:center; padding:8px 6px; }
  .gx-daterange{ width:100%; }
  .gx-date{ flex:1 1 120px; }
  .gx-date input[type=date]{ max-width:none; width:100%; }
  .gx-daterange .btn{ flex:1 1 100%; justify-content:center; }
}

/* --- liste a card responsive (turni recenti, dettagli numerici) — NON usano
   <table> così non spariscono su mobile (dove .table-wrap table è display:none) --- */
.gx-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px,100%), 1fr)); gap:var(--s3); }
.gx-list-card{ background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3) var(--s4); min-width:0; }
.gx-list-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3); min-width:0; }
.gx-list-title{ font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.gx-figs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s3); }
.gx-fig{ min-width:0; }
.gx-fig .k{ font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gx-fig .val{ font-size:14px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gx-fig .val.big{ font-size:17px; color:var(--primary-2); }
.gx-fig.span2{ grid-column:1 / -1; }

/* --- mini column-chart (andamento per giorno) — puro CSS, accessibile --- */
.gx-cols{ display:flex; align-items:flex-end; gap:6px; height:120px; min-width:0; }
.gx-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; height:100%; }
.gx-col-bar{ background:linear-gradient(180deg, var(--primary-2), var(--primary)); border-radius:5px 5px 0 0; min-height:4px; }
.gx-col.today .gx-col-bar{ background:linear-gradient(180deg,#4ade80,#2bb673); }
.gx-cols-x{ display:flex; gap:6px; margin-top:8px; }
.gx-cols-x span{ flex:1 1 0; min-width:0; text-align:center; font-size:10px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* sotto-titolo sezione senza border (per gruppi dentro detail-card) */
.gx-sub-title{ font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:0.6px; margin:var(--s4) 0 var(--s3); }
.gx-sub-title:first-child{ margin-top:0; }

/* --- module-nav gestionale: tab bar con underline (linguaggio "navigazione",
   distinto dai filtri segmented così non si confondono). Stabile, wrappa con
   grazia, active chiaro senza barre piene a tutta larghezza. --- */
.gx-tabs{ display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--s4); }
.gx-tab{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--text-2); text-decoration:none;
  padding:10px 14px; border-radius:8px 8px 0 0; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s, background .15s;
}
.gx-tab:hover{ color:var(--text); background:var(--bg-3); }
.gx-tab.active{ color:var(--primary-2); border-bottom-color:var(--primary); }

/* =====================================================================
   GESTIONALE ANALYTICS PRO — categoria+drill-down, affluenza per orario,
   export PDF, documenti fiscali. Additivo, riusa i token; tutte le 10 regole
   anti-overflow (min-width:0, truncate, grid fluida, overflow-x:auto esplicito).
   ===================================================================== */

/* --- barra azioni (contesto selezione + Scarica PDF) --- */
.gx-actionbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); min-width:0; }
.gx-actionbar-info{ font-size:13px; color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.gx-actionbar-info strong{ color:var(--text); font-weight:600; }

/* --- intestazione sezione con hint a destra (es. "tocca per i dettagli") --- */
.detail-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); padding-bottom:8px; border-bottom:1px solid var(--border); min-width:0; }
.detail-hint{ font-size:12px; color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.detail-hint strong{ color:var(--primary-2); }

/* --- VENDUTO PER CATEGORIA + DRILL-DOWN ITEM (native <details>, zero JS) --- */
.gx-cats{ display:flex; flex-direction:column; gap:var(--s2); }
.gx-cat{ border:1px solid var(--border); border-radius:10px; background:var(--bg-2); overflow:hidden; }
.gx-cat[open]{ border-color:rgba(124,77,255,0.3); }
.gx-cat-sum{ display:flex; align-items:center; gap:var(--s3); padding:12px var(--s3); cursor:pointer; list-style:none; min-width:0; transition:background .15s; }
.gx-cat-sum::-webkit-details-marker{ display:none; }
.gx-cat-sum:hover{ background:var(--bg-3); }
.gx-cat-chev{ width:15px; height:15px; flex-shrink:0; color:var(--text-2); transition:transform .2s; }
.gx-cat[open] .gx-cat-chev{ transform:rotate(90deg); color:var(--primary-2); }
.gx-cat-main{ flex:1; min-width:0; }
.gx-cat-items{ padding:6px var(--s3) var(--s3) calc(var(--s3) + 27px); display:flex; flex-direction:column; gap:12px; border-top:1px dashed var(--border); margin-top:2px; }
.gx-item-row .gx-bar-name{ font-weight:400; color:var(--text-2); }
.gx-bar-track.sm{ height:6px; }
.gx-bar-fill.alt2{ background:linear-gradient(90deg,#9b6bff,#b48aff); }

/* --- affluenza per orario: column-chart più alto, ora di punta evidenziata --- */
.gx-cols-tall{ height:150px; }
.gx-col.peak .gx-col-bar{ background:linear-gradient(180deg,#34d399,#10b981); }
.gx-chart-legend{ font-size:11.5px; color:var(--text-3); margin-top:10px; }

/* --- documenti fiscali: box per aliquota (griglia fluida) --- */
.gx-figgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:var(--s3); }
.gx-figbox{ background:var(--bg-3); border:1px solid var(--border); border-radius:10px; padding:12px var(--s3); min-width:0; }
.gx-figbox-k{ font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gx-figbox-v{ font-size:19px; font-weight:700; color:var(--primary-2); font-variant-numeric:tabular-nums; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gx-figbox-s{ font-size:11.5px; color:var(--text-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- tabella documenti: grid allineata; scroll-x esplicito su mobile (denso) --- */
.gx-doctable{ display:flex; flex-direction:column; overflow-x:auto; }
.gx-doc-head, .gx-doc-row{
  display:grid;
  grid-template-columns:minmax(64px,1.1fr) 92px 100px minmax(80px,1.1fr) 92px 84px 96px;
  gap:var(--s2); align-items:center; padding:9px 6px; min-width:700px;
}
.gx-doc-head{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2); border-bottom:1px solid var(--border); position:sticky; top:0; }
.gx-doc-row{ border-bottom:1px solid var(--border); font-size:13px; }
.gx-doc-row:hover{ background:var(--bg-3); }
.gx-doc-head span, .gx-doc-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gx-doc-row .c-amt{ text-align:right; font-variant-numeric:tabular-nums; }
.gx-doc-head .c-amt{ text-align:right; }
.gx-doc-row .c-amt.strong{ font-weight:700; color:var(--text); }
.gx-doc-row .c-num{ font-weight:600; color:var(--text); }
.gx-doc-row .c-nif{ color:var(--text-2); }

/* =========================================================
   MAIL-MARKETING — sezione cockpit campagne / liste / template
   ========================================================= */

/* Badge stato campagna */
.badge-campaign-draft     { background:rgba(100,100,120,.15); color:var(--text-2); border:1px solid var(--border); }
.badge-campaign-pending   { background:rgba(245,158,11,.12); color:#fcd34d; border:1px solid rgba(245,158,11,.25); }
.badge-campaign-approved  { background:rgba(96,165,250,.12); color:#93c5fd; border:1px solid rgba(96,165,250,.25); }
.badge-campaign-sending   { background:rgba(124,77,255,.12); color:var(--purple-3); border:1px solid rgba(124,77,255,.25); }
.badge-campaign-sent      { background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.25); }
.badge-campaign-canceled  { background:rgba(239,68,68,.1); color:#fca5a5; border:1px solid rgba(239,68,68,.2); }

/* Stats bar */
.mm-stats-row { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.mm-stat { background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:12px 18px; min-width:80px; display:flex; flex-direction:column; align-items:center; }
.mm-stat-n { font-size:22px; font-weight:700; color:var(--primary-2); font-variant-numeric:tabular-nums; }
.mm-stat-l { font-size:11px; color:var(--text-2); margin-top:2px; text-align:center; }

/* Avviso non-pg */
.mm-notice { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px; color:#fcd34d; margin-bottom:16px; }

/* Layout two-col: main + sidebar */
.mm-two-col { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
@media (max-width:768px) { .mm-two-col { grid-template-columns:1fr; } }

/* Card riutilizzabile per sidebar */
.mm-sidebar-card { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:16px; }
.mm-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; text-transform:uppercase; letter-spacing:.4px; }

/* Form helpers */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.form-hint { font-size:11.5px; color:var(--text-3); }
.form-control { width:100%; background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text); font-size:13px; font-family:inherit; box-sizing:border-box; }
.form-control:focus { outline:none; border-color:var(--purple-2); }
textarea.form-control { resize:vertical; }

/* Dettagli campagna */
.mm-detail-card { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.mm-detail-row { display:flex; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; }
.mm-detail-row:last-child { border-bottom:none; }
.mm-detail-lbl { font-size:11px; font-weight:600; color:var(--text-2); min-width:90px; padding-top:1px; text-transform:uppercase; letter-spacing:.3px; }

/* Metriche per-campagna */
.mm-metrics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100px,100%),1fr)); gap:10px; }
.mm-metric { background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.mm-metric-n { display:block; font-size:20px; font-weight:700; color:var(--primary-2); font-variant-numeric:tabular-nums; }
.mm-metric-l { display:block; font-size:11px; color:var(--text-2); margin-top:3px; }
.mm-metric-l sup { cursor:help; }

/* Anteprima in iframe */
.mm-email-iframe-wrap { border-radius:10px; overflow:hidden; }

/* Form layout (nuova campagna: main + preview) */
.mm-form-layout { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
@media (max-width:900px) { .mm-form-layout { grid-template-columns:1fr; } }
.mm-form-main { display:flex; flex-direction:column; }
.mm-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); margin-bottom:10px; }
.mm-preview-panel { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:16px; position:sticky; top:20px; }

/* Email preview (live nel form) */
.mm-email-preview { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:16px; }
.mm-ep-subject { font-weight:700; font-size:15px; margin-bottom:12px; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:10px; }
.mm-ep-body { font-size:13px; color:var(--text-2); line-height:1.6; }
.mm-ep-cta { margin-top:12px; }
.mm-ep-cta span { background:linear-gradient(135deg,var(--purple-1),var(--purple-dark)); color:#fff; padding:8px 18px; border-radius:8px; display:inline-block; font-size:13px; font-weight:600; }

/* Info box (gabbia approvazione) */
.mm-info-box { background:rgba(124,77,255,.08); border:1px solid rgba(124,77,255,.2); border-radius:8px; padding:10px 14px; display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--purple-3); line-height:1.5; }

/* Action card (approva/invia) */
.mm-action-card { border-color:rgba(124,77,255,.3); }