/* SUEN — Gestionale Freelance SMM
   Mobile-first CSS
   Google Fonts: Inter (unica dipendenza esterna consentita)
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ===== RESET & ROOT ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Asse SFONDO di default = scuro (data-tema="dark").
     Asse ACCENTO di default = viola (--accent/--accent2/--accent3 qui sotto),
     riconfermato anche da html[data-accent="viola"] più in basso. */
  --bg: #0a0a0a;
  --card: #141414;
  --card2: #1c1c1c;
  --border: #242424;
  --border2: #2e2e2e;
  --text: #e8e8e8;
  --text2: #aaa;
  --text3: #666;
  --accent: #7c6ff7;
  --accent2: #a78bfa;
  --accent3: rgba(124,111,247,.12);
  --green: #22c55e;
  --green2: rgba(34,197,94,.12);
  --orange: #f97316;
  --orange2: rgba(249,115,22,.1);
  --red: #ef4444;
  --red2: rgba(239,68,68,.1);
  --yellow: #eab308;
  --yellow2: rgba(234,179,8,.1);
  --cyan: #06b6d4;
  --white: #fff;
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 248px;
  --rail-w: 72px;
  --bottomnav-h: 60px;
  --topbar-h: 52px;
}

html { font-size: 14px; }
body {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ===== LAYOUT MOBILE ===== */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 100;
}
.topbar-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.topbar-logo span { color: var(--accent2); }
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.db-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
  align-self: center;
}
.db-dot.ok { background: var(--green); }
.db-dot.warn { background: var(--red); }
.topbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  flex: 1;
  text-align: center;
}
.topbar-action {
  flex-shrink: 0;
}
.hamburger {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main content */
.main-content {
  padding: calc(var(--topbar-h) + 16px) 16px calc(var(--bottomnav-h) + 16px);
  flex: 1;
}

/* ===== BOTTOM NAV (mobile only) ===== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottomnav-h);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 100;
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text3);
  text-decoration: none;
  padding: 6px 4px;
  transition: color .15s;
  border: none;
  background: none;
  font-family: inherit;
  position: relative;
}
.bn-item.active { color: var(--accent2); }
.bn-item:active { color: var(--accent2); }
.bn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bn-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
}
.bn-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

/* ===== SIDEBAR DRAWER (mobile overlay) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.sb-header {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
}
.sb-logo span { color: var(--accent2); }
.sb-sub {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}
.sb-nav { padding: 8px; flex: 1; }
.sb-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding: 12px 8px 4px;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 1px;
  text-decoration: none;
}
.sb-link:hover, .sb-link.active {
  background: var(--accent3);
  color: var(--accent2);
}
.sb-link-icon { width: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}
.sb-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-user-plan { font-size: 11px; color: var(--text3); }
.sb-user-meta { min-width: 0; }
.sb-user-meta .sb-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout { color: var(--text3); margin-top: 8px; }

/* =====================================================================
   NAV REFACTOR "Google Console" — Gate 1 (struttura)
   Rail + drawer espandibile · accordion per aree (Collections)
   Eredita le variabili colore correnti; il vestito Material chiaro
   è il Gate 2.
   ===================================================================== */

/* --- Accordion: capo-gruppo (area / Collection) --- */
.nav-group { margin-bottom: 2px; }
.nav-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.nav-group-head:hover { background: rgba(127,127,127,.08); }
.nav-group-icon {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text2);
}
.nav-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-caret { display: flex; color: var(--text3); transition: transform .18s; flex-shrink: 0; }
.nav-group.open > .nav-group-head .nav-group-caret { transform: rotate(180deg); }
.nav-group:not(.open) .nav-group-items { display: none; }
.nav-group-items { margin: 2px 0 6px; }

/* Aree a voce singola (es. Oggi, Report): il capo-gruppo È il link.
   Stato attivo come una voce qualunque. */
a.nav-group-head { text-decoration: none; }
.nav-group-head.active { background: var(--accent3); color: var(--accent2); }
.nav-group-head.active .nav-group-icon { color: var(--accent2); }

/* --- Sotto-voci (Topics) --- riusano .sb-link --- */
.sb-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-items .sb-link { padding-top: 7px; padding-bottom: 7px; }

/* --- Top app bar: omnibox + bottoni --- */
.omnibox {
  position: relative;
  display: none; /* mobile: nascosta (Gate 3); desktop: mostrata sotto */
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.omnibox-icon { display: flex; flex-shrink: 0; color: var(--text3); }
.omnibox-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font-size: 13px;
}
.omnibox-input::placeholder { color: var(--text3); }
.omnibox-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  z-index: 300;
}
.omnibox-results.open { display: block; }
.topbar-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text2);
  flex-shrink: 0;
}
.topbar-icon-btn:hover { background: rgba(127,127,127,.12); color: var(--text); }
.topbar-avatar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Orario ultimo accesso (login) — nascosto su mobile, visibile da desktop */
.topbar-login {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar-login svg { color: var(--text3); flex-shrink: 0; }

/* --- Desktop ≥1024px: mostra omnibox/bottoni e gestisce il rail collassato --- */
@media (min-width: 1024px) {
  .omnibox { display: flex; flex: 1 1 auto; max-width: 480px; margin-left: 16px; }
  .topbar-icon-btn { display: flex; }
  .topbar-avatar { display: flex; }
  .topbar-login { display: inline-flex; }

  /* Rail collassato (solo icone) */
  body.nav-collapsed .sidebar { width: var(--rail-w); }
  body.nav-collapsed .main-content { margin-left: var(--rail-w); }
  body.nav-collapsed .topbar { left: var(--rail-w); }
  body.nav-collapsed .sb-sub,
  body.nav-collapsed .nav-group-label,
  body.nav-collapsed .nav-group-caret,
  body.nav-collapsed .nav-group-items,
  body.nav-collapsed .sb-user-meta,
  body.nav-collapsed .sb-logout .sb-link-label { display: none; }
  body.nav-collapsed .nav-group-head { justify-content: center; padding: 9px 0; }
  body.nav-collapsed .sb-header { text-align: center; padding: 18px 8px 14px; }
  body.nav-collapsed .sb-logo { font-size: 18px; }
  body.nav-collapsed .sb-user { justify-content: center; }
  body.nav-collapsed .nav-group.open > .nav-group-head { background: var(--accent3); }
  body.nav-collapsed .nav-group.open > .nav-group-head .nav-group-icon { color: var(--accent2); }
}

/* ===== PAGE HEADER ===== */
.page-header {
  margin-bottom: 20px;
}
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}
.page-desc { font-size: 13px; color: var(--text2); }

/* ===== CARDS ===== */
.card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card-sm { padding: 12px; }

/* ===== GRIDS ===== */
.grid { display: grid; gap: 12px; }
.g1 { grid-template-columns: 1fr; }
.g2 { grid-template-columns: 1fr 1fr; }

/* ===== STAT CARDS ===== */
.stat-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  line-height: 1;
}
.stat-value span { color: var(--accent2); }
/* MEV #25: ripristina l'ambra di "Da incassare" (regressione #19).
   Lo span .amount-hidden ereditava --accent2 dalla regola sopra vincendo
   sulla .text-yellow del padre; qui la riporta a --yellow. Solo color: il
   blur privacy #19 resta intatto. */
.stat-value.text-yellow span { color: var(--yellow); }
.stat-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.stat-trend { font-size: 11px; margin-top: 4px; }
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }

/* ===== SITUAZIONE FISCALE -- card a soffietto (MEV #34, rivista MEV #37) =====
   Consolida soglia + lordo + netto stimato + da incassare + tasse stimate in
   un'unica .fin-card. L'occhio privacy è stato SOSTITUITO da un toggle
   apri/chiudi: tutta l'intestazione (.fin-card-header, che ora è un <button>)
   apre e chiude .fin-card-body, e la freccia .fin-chev ruota di 180°.
   Lo stato vive in data-fin-open sulla card: 'off' = chiusa (DEFAULT, così gli
   importi non si vedono al primo colpo d'occhio), 'on' = aperta.
   Tutti i colori vengono dalle variabili del tema: nessun colore fisso. */
.fin-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
/* Intestazione-bottone: occupa tutta la larghezza ed è l'unico comando della
   card. Reset del look nativo del <button> (sfondo/bordo/font ereditati). */
.fin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.fin-card[data-fin-open='on'] .fin-card-header { margin-bottom: 12px; }
.fin-card-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  /* Titolo lungo: va a capo, mai scroll orizzontale */
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.fin-card-header:hover .fin-card-title { color: var(--text2); }
/* Freccia: giù quando la card è chiusa, su (ruotata) quando è aperta */
.fin-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text3);
  border-radius: var(--radius-sm);
  line-height: 0;
  transition: transform .18s ease, color .18s ease;
}
.fin-card-header:hover .fin-chev { color: var(--text2); background: rgba(127,127,127,.12); }
.fin-card[data-fin-open='on'] .fin-chev { transform: rotate(180deg); }
/* Corpo collassabile */
.fin-card[data-fin-open='off'] .fin-card-body { display: none; }
/* Riga soglia dentro la fin-card */
.fin-soglia { margin-bottom: 14px; }
/* Riga 2: sotto-card affiancate su desktop, impilate sotto i 640px.
   auto-fit + minmax: 3 colonne su desktop, 2 su tablet, 1 su mobile. */
.fin-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.fin-sub {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-width: 0;
}
.fin-sub .stat-sub,
.fin-sub .stat-trend { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 640px) {
  .fin-sub-grid { grid-template-columns: 1fr; }
}
/* Le cifre dentro .stat-value sono in uno <span>: la regola generica
   .stat-value span le colora di accento, qui si ripristina il verde del netto
   (stesso rimedio già usato per .text-yellow). */
.stat-value.text-green span { color: var(--green); }

/* -- Riquadro TASSE STIMATE + scadenze (MEV #37) -- */
.fin-tasse {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.fin-tasse-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fin-tasse-tot {
  font-size: 20px;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fin-tasse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.fin-tasse-voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 0;
}
.fin-tasse-k {
  font-size: 11px;
  color: var(--text3);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.fin-tasse-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fin-scad-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fin-scad {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.fin-scad-data {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fin-scad-label {
  font-size: 12px;
  color: var(--text2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.fin-scad-imp {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fin-scad-past { opacity: .6; }
.fin-scad-past .fin-scad-data { color: var(--text3); }
.fin-tasse-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text3);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ===== SOGLIA (classi riusate dentro la .fin-card: label/amount/row/pct/meta) ===== */
.soglia-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.soglia-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.soglia-amount small {
  font-size: 14px;
  font-weight: 500;
  color: var(--text3);
}
.soglia-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.soglia-pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent2);
}
.progress-bar {
  height: 6px;
  background: var(--border2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.progress-fill.warn { background: linear-gradient(90deg, var(--yellow), #fbbf24); }
.progress-fill.danger { background: linear-gradient(90deg, var(--red), #f87171); }
.soglia-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.btn-full { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:active { background: #6c5fe6; }
.btn-ghost { background: none; color: var(--text2); border: 1px solid var(--border2); }
.btn-ghost:active { background: var(--card2); }
.btn-green { background: var(--green2); color: var(--green); border: 1px solid rgba(34,197,94,.25); }
.btn-danger { background: var(--red2); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
.btn-icon { padding: 8px; }

/* ===== FORM ===== */
.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}
.form-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text3); }
.form-input.input-error { border-color: #ef4444; background: rgba(239,68,68,.08); box-shadow: 0 0 0 2px rgba(239,68,68,.28); }
.form-input.input-error:focus { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.45); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--text3); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-section { margin-bottom: 20px; }
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.b-green { background: var(--green2); color: var(--green); }
.b-yellow { background: var(--yellow2); color: var(--yellow); }
.b-red { background: var(--red2); color: var(--red); }
.b-purple { background: var(--accent3); color: var(--accent2); }
.b-gray { background: rgba(255,255,255,.06); color: var(--text3); }
.b-cyan { background: rgba(6,182,212,.12); color: var(--cyan); }
.b-orange { background: var(--orange2); color: var(--orange); }

/* ===== ALERTS ===== */
.alert {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-warn { background: var(--yellow2); border: 1px solid rgba(234,179,8,.2); color: #fde68a; }
.alert-ok { background: var(--green2); border: 1px solid rgba(34,197,94,.2); color: #86efac; }
.alert-info { background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.2); color: #a5f3fc; }

/* ===== LISTS / ITEMS ===== */
.item-list { display: flex; flex-direction: column; gap: 1px; }
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.item-row:last-child { border-bottom: none; }
.item-row:active { opacity: .7; }
.item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent3);
  border: 1px solid rgba(124,111,247,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent2);
  flex-shrink: 0;
}
.item-body { flex: 1; min-width: 0; }
.item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-sub { font-size: 12px; color: var(--text2); }
.item-right { text-align: right; flex-shrink: 0; }
.item-amount { font-size: 14px; font-weight: 700; color: var(--text); }
.item-arrow { color: var(--text3); font-size: 12px; }

/* ===== TABLE (scroll mobile) ===== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px; }
thead th {
  background: rgba(255,255,255,.02);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 10px 12px; color: var(--text2); vertical-align: middle; }
.td-name { font-weight: 600; color: var(--text); }
.td-mono { font-family: monospace; font-size: 12px; color: var(--text3); }

/* ===== MODAL (bottom sheet on mobile) ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 300;
  align-items: flex-end;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.modal-drag {
  width: 36px;
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 10px auto 4px;
}
.modal-header {
  padding: 8px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--white); }
.modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.modal-body { padding: 16px; }
.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== TAB BAR ===== */
.tab-bar {
  display: flex;
  gap: 4px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text2);
  transition: all .15s;
  white-space: nowrap;
}
.tab-btn.active { background: var(--accent); color: #fff; }

/* ===== SEARCH ===== */
.search-wrap { position: relative; margin-bottom: 16px; }
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 14px;
  pointer-events: none;
}
.search-input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px 10px 36px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text3); }

/* ===== CALENDARIO ===== */
.cal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cal-month { font-size: 16px; font-weight: 700; color: var(--white); flex: 1; text-align: center; }
.cal-nav-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--text2);
  cursor: pointer;
  font-size: 14px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-day-head {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
  padding: 4px 0;
  letter-spacing: .04em;
}
/* MOBILE: celle ad altezza automatica, chip testuali a capo */
.cal-day {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 52px;
  padding: 4px 3px 2px;
  cursor: pointer;
  transition: border-color .15s;
  box-sizing: border-box;
  min-width: 0; /* la cella può restringersi: evita il blowout della griglia (colonne tagliate) */
}
.cal-day.today { border-color: var(--accent); background: var(--accent3); }
.cal-day.other-month { opacity: .3; pointer-events: none; }
.cal-day:active { border-color: var(--accent2); }
.cal-day-num { font-size: 10px; font-weight: 600; color: var(--text3); margin-bottom: 3px; line-height: 1; }
.cal-day.today .cal-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px;
}
/* Mobile (stile iOS "Stacked"): chip su UNA riga, troncamento ellipsis,
   barra colore cliente a sinistra (border-left). Nessun word-break: il testo
   non va più a capo, si tronca con i puntini. */
.cal-post {
  display: flex;
  align-items: center;
  width: 100%; max-width: 100%; height: auto;
  border-radius: 3px;
  border-left: 3px solid currentColor;
  padding: 2px 4px;
  font-size: 9px; font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 0 2px;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
}
/* Il testo del chip (badge + label) si tronca a una riga con ellipsis */
.cal-post > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-post.pub  { background: var(--green2);  color: var(--green); }
.cal-post.plan { background: var(--accent3); color: var(--accent2); }
.cal-post.late { background: var(--red2);    color: var(--red); }
/* Pastiglia INIZIALE cliente: micro-chip denso usato SOLO nella vista mese
   mobile (griglia 7 colonne). Su desktop/tablet è nascosta perché l'iniziale
   compare già nel testo del chip (.cal-post-txt). La media query <640px la
   mostra e nasconde il testo, dando l'overview "a colpo d'occhio". */
.cal-ini { display: none; }
.cal-more { font-size: 9px; color: var(--text3); padding: 1px 3px; margin-top: 1px; cursor: pointer; }
.cal-more:hover { color: var(--text2); text-decoration: underline; }
/* Etichetta giorno esteso (es. "Lun 17"): usata SOLO nella vista Mese mobile
   (un giorno alla volta). Nascosta ovunque per default; la media query mobile
   la rende visibile. Così su desktop non compare nessuna riga extra. */
.cal-day-label { display: none; }
/* Espansione in loco "+N altri": i post oltre il tetto sono nascosti finché
   la cella non riceve la classe .cal-day-expanded (toggle via JS). */
.cal-post-hidden { display: none; }
.cal-day-expanded .cal-post-hidden { display: flex; }
.cal-day-expanded .cal-more-expand { display: none; }
.cal-more-less { display: none; }
.cal-day-expanded .cal-more-less { display: block; }

/* Mobile: limite a ~3 chip visibili per cella (più basso del tetto desktop = 5).
   I chip dal 4° in poi ricevono la classe .cal-post-m-hidden dal render
   (PHP + JS gemello) e sono nascosti via CSS solo su mobile finché la cella
   non è espansa. Il toggle "+N altri" / "mostra meno" resta lo stesso. */
@media (max-width: 639px) {
  .cal-day:not(.cal-day-expanded) .cal-post-m-hidden { display: none; }
  .cal-day-expanded .cal-post-m-hidden { display: flex; }
  /* Su mobile la × inline è nascosta: la cancellazione passa dal modale dettaglio */
  .cal-post-x { display: none !important; }
}
/* Da 640px in su (desktop/tablet) i 5 chip sono già tutti visibili, quindi il
   toggle "mobile-only" per i giorni con 4-5 post non serve. */
@media (min-width: 640px) {
  .cal-more-m { display: none !important; }
  /* Il micro-indicatore "+N" è esclusivo della griglia mese mobile. */
  .cal-more-micro { display: none !important; }
}

/* ===== VISTA MESE SU MOBILE: GRIGLIA 7 COLONNE COMPATTA (overview) =====
   Modello "mese overview → giorno" (stile Google Calendar mobile): su telefono
   il calendario resta una VERA griglia 7 colonne, compatta, per il colpo d'occhio.
   Il tap su un giorno apre il dettaglio-giorno (gestito in JS). Niente carosello,
   niente scroll orizzontale, niente frecce. Tutto SOLO sotto i 640px: da 640px in
   su la griglia desktop/tablet resta IDENTICA (queste regole non la toccano). */
@media (max-width: 639px) {
  /* Wrapper neutro (nessuna freccia overlay da ancorare) */
  .cal-grid-wrap { position: relative; }

  /* Griglia 7 colonne: nessuno scroll orizzontale, nessuno scroll-snap.
     Il mese scorre verticalmente con la pagina. */
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }

  /* Intestazioni (Lun…Dom) e celle di altri mesi tornano visibili per allineare
     le 7 colonne. (Annulla l'eventuale display:none ereditato.) */
  .cal-grid .cal-day-head { display: block; }
  .cal-grid .cal-day.other-month { display: block; }

  /* Celle compatte: 6 righe del mese devono stare in una schermata.
     Altezza ridotta; i micro-chip densi ci stanno comunque. */
  .cal-grid .cal-day {
    min-height: 48px;
    padding: 2px 2px 2px;
  }

  /* Numero giorno visibile; etichetta estesa "Lun 17" non serve più in griglia. */
  .cal-grid .cal-day .cal-day-num { display: block; margin-bottom: 2px; }
  .cal-day-label { display: none; }

  /* ── MICRO-CHIP DENSI (stile Google Calendar) ─────────────────────────────
     Ogni contenuto del giorno diventa una pastiglia bassissima che porta solo
     l'essenziale "a colpo d'occhio": mini-logo piattaforma + pallino col colore
     brand del cliente con la sua iniziale. Il testo lungo (orario, titolo) è
     nascosto: il dettaglio si apre col tap sul giorno. */
  .cal-grid .cal-post {
    white-space: nowrap;
    padding: 0;
    margin-bottom: 1px;
    line-height: 1;
    border-left: none;          /* niente barra-colore: il colore è nel pallino */
    background: transparent !important;  /* lo sfondo tenue del chip non serve in micro */
    gap: 2px !important;
    min-height: 14px;
    overflow: visible;
  }
  /* Testo esteso del chip nascosto su mobile (resta su desktop). */
  .cal-grid .cal-post .cal-post-txt { display: none !important; }
  /* Vista MESE: niente icone social, solo l'iniziale del cliente sul suo colore.
     I loghi social restano nella vista GIORNO. */
  .cal-grid .cal-post .cal-platform { display: none !important; }
  /* Pallino INIZIALE cliente: colore brand + iniziale leggibile (suen_text_on). */
  .cal-grid .cal-post .cal-ini {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; min-width: 16px; height: 14px;
    padding: 0 4px; border-radius: 7px;
    font-size: 8px; font-weight: 700; line-height: 1;
    overflow: hidden;
  }

  /* Max 3 micro-chip visibili per cella: nasconde dal 4° .cal-post in poi.
     Il combinatore conta SOLO i fratelli .cal-post (ignora .cal-day-num,
     .cal-camp-strips e .cal-more), quindi è robusto rispetto all'ordine dei
     figli. Combacia con maxMobile=3 del render → il "+N" è esatto. */
  .cal-grid .cal-day .cal-post ~ .cal-post ~ .cal-post ~ .cal-post { display: none !important; }

  /* Su mobile i contatori "+N altri" estesi (e i "mostra meno") sono nascosti:
     al loro posto compare il micro-indicatore "+N" tenue. */
  .cal-grid .cal-day .cal-more:not(.cal-more-micro) { display: none !important; }
  /* "+N" tenue: micro-indicatore compatto (niente riga di testo lunga).
     Il tap apre comunque il giorno (handler cal-more-expand in JS). */
  .cal-grid .cal-day .cal-more-micro {
    display: block; font-size: 8px; line-height: 1; font-weight: 600;
    color: var(--text3); padding: 1px 2px 0; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* La × inline resta nascosta: la cancellazione passa dal dettaglio giorno/post. */
  .cal-post-x { display: none !important; }
}

/* Da 640px in su la × torna gestita dalle media query desktop/tablet; nessuna
   regola carosello/frecce residua da disabilitare. */

/* ===== TOGGLE VISTA CALENDARIO (Mese / Agenda) ===== */
.cal-view-toggle { display: inline-flex; }
.cal-view-toggle .tab-btn { min-width: 72px; text-align: center; }

/* ===== AGENDA (vista lista) ===== */
.cal-agenda { display: flex; flex-direction: column; gap: 14px; }
.cal-agenda-day { display: flex; flex-direction: column; gap: 4px; }
.cal-agenda-day-head {
  font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: capitalize; letter-spacing: .02em;
  padding: 4px 2px; border-bottom: 1px solid var(--border);
}
.cal-agenda-day-head.today { color: var(--accent2); }
.cal-agenda-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box;
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cal-agenda-row:active { border-color: var(--accent2); }
.cal-agenda-time {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--white);
  font-variant-numeric: tabular-nums; min-width: 38px;
}
.cal-agenda-info { flex: 1; min-width: 0; }
.cal-agenda-title {
  font-size: 13px; font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-agenda-cliente {
  font-size: 11px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-agenda-empty { color: var(--text3); font-size: 13px; padding: 24px 0; text-align: center; }

/* ===== VISTA GIORNO (colonna per orario, dentro il modale-giorno) ===== */
/* Una colonna verticale: gutter ora a sinistra + card ricca a destra. Tema-safe
   (solo variabili CSS / colore brand inline). Responsive mobile + desktop.
   Niente scroll orizzontale: il testo va a capo; lo scroll verticale è del modale. */
.cal-day-view { display: flex; flex-direction: column; gap: 8px; }
.cal-day-view-row {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%; box-sizing: border-box;
}
.cal-day-view-gutter {
  flex-shrink: 0; width: 46px; padding-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--white);
  font-variant-numeric: tabular-nums; text-align: right;
}
.cal-day-view-gutter-empty { color: var(--text3); font-weight: 600; }
.cal-day-view-card {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 10px;
  box-sizing: border-box;
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cal-day-view-card:hover { border-color: var(--accent2); }
.cal-day-view-card:active { border-color: var(--accent2); }
.cal-day-view-platforms {
  flex-shrink: 0; display: inline-flex; flex-wrap: wrap; gap: 3px;
  align-items: center;
}
.cal-day-view-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-day-view-titlerow { display: flex; align-items: flex-start; gap: 6px; }
.cal-day-view-status { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
.cal-day-view-warn { color: var(--red); margin-right: 2px; }
.cal-day-view-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--white);
  line-height: 1.3; overflow-wrap: anywhere; word-break: break-word;
}
.cal-day-view-cliente { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-day-view-dot {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.cal-day-view-cliente-nome {
  font-size: 12px; color: var(--text2);
  overflow-wrap: anywhere; word-break: break-word;
}
.cal-day-view-noheader {
  font-size: 12px; font-weight: 700; color: var(--text2);
  letter-spacing: .02em;
  padding: 4px 2px; margin-top: 14px;
  border-bottom: 1px solid var(--border);
}
.cal-day-view-noheader + .cal-day-view { margin-top: 8px; }
.cal-day-view-empty { color: var(--text3); font-size: 13px; padding: 16px 0; text-align: center; }

/* ===== CHIP IMPEGNI (vista calendario dentro la sezione Impegni) =====
   Chip colorato per TIPO impegno, riusato dentro le celle .cal-day della griglia
   mensile dedicata agli impegni. Ogni tipo ha un colore (variabili tema, niente
   hex fissi). Struttura come .cal-post: sfondo tenue + barra colore a sinistra +
   testo troncato a una riga. I colori sono definiti in --imp-col e usati sia per
   il testo sia per la barra; lo sfondo tenue è un velo dello stesso colore. */
.imp-chip {
  display: flex;
  align-items: center;
  width: 100%; max-width: 100%;
  border-radius: 3px;
  border-left: 3px solid var(--imp-col, var(--text3));
  color: var(--imp-col, var(--text3));
  background: var(--imp-bg, rgba(255,255,255,.06));
  padding: 2px 4px;
  font-size: 9px; font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 0 2px;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
}
.imp-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Varianti per tipo (colore = var tema, sfondo = velo a bassa opacità dello stesso).
   Definite sulla classe .t-* generica così valgono sia per i chip della griglia
   (.imp-chip) sia per la barra-colore delle card della vista-giorno.
   consulenza=giallo, shooting=viola, incontro_mensile=verde, call=ciano, altro=grigio. */
.t-consulenza       { --imp-col: var(--yellow);  --imp-bg: var(--yellow2); }
.t-shooting         { --imp-col: var(--accent2); --imp-bg: var(--accent3); }
.t-incontro_mensile { --imp-col: var(--green);   --imp-bg: var(--green2); }
.t-call             { --imp-col: var(--cyan);    --imp-bg: rgba(6,182,212,.12); }
.t-altro            { --imp-col: var(--text3);   --imp-bg: rgba(255,255,255,.06); }
/* Card della vista-giorno colorata per tipo: solo la barra sinistra prende il
   colore del tipo (--imp-col ereditato dalla classe .t-*), il resto resta card. */
.cal-day-view-card.imp-tipo-card { border-left-color: var(--imp-col, var(--accent2)); }
/* L'orario (quando presente) è un po' più tenue, come nei chip del calendario. */
.imp-chip .imp-chip-ora { opacity: .75; font-weight: 600; margin-right: 3px; }
/* MOBILE (griglia 7 colonne compatta): micro-chip densi. Solo un pallino col
   colore del tipo; il testo (titolo/orario) è nascosto — il dettaglio si apre
   col tap sul giorno. Cap a 3 chip visibili gestito come per .cal-post. */
@media (max-width: 639px) {
  .cal-grid .imp-chip {
    padding: 0;
    margin-bottom: 1px;
    line-height: 1;
    border-left: none;
    background: transparent !important;
    min-height: 14px;
    overflow: visible;
  }
  .cal-grid .imp-chip .imp-chip-txt { display: none !important; }
  .cal-grid .imp-chip .imp-chip-dot {
    display: inline-flex; flex-shrink: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--imp-col, var(--text3));
    margin: 3px 0;
  }
  /* Max 3 micro-chip per cella: nasconde dal 4° .imp-chip in poi (stesso pattern
     robusto di .cal-post). Combacia con maxMobile=3 del render → il "+N" è esatto. */
  .cal-grid .cal-day .imp-chip ~ .imp-chip ~ .imp-chip ~ .imp-chip { display: none !important; }
}
/* Desktop/tablet: niente pallino (il colore è nella barra + testo del chip). */
@media (min-width: 640px) {
  .imp-chip .imp-chip-dot { display: none !important; }
}

/* ===== TIMER ===== */
.timer-display {
  font-size: 48px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
  text-align: center;
  margin: 16px 0;
}

/* Mini-timer globale nella topbar */
.timer-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.timer-widget:hover { background: rgba(255, 255, 255, .12); }
.timer-widget-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.timer-widget.running .timer-widget-dot {
  background: var(--green);
  animation: timer-widget-pulse 1.4s ease-in-out infinite;
}
@keyframes timer-widget-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ===== AUTH ===== */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
}
.auth-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  margin-top: 24px;
}
.auth-logo { font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: -.02em; margin-bottom: 2px; }
.auth-logo span { color: var(--accent2); }
.auth-tag { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 24px; }
.auth-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--text2); margin-bottom: 20px; }
.auth-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text2); }
.auth-link a { color: var(--accent2); }
.trial-pill {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--green2);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: #86efac;
  margin-bottom: 20px;
}

/* ===== WIZARD ===== */
.wizard-steps {
  display: flex;
  margin-bottom: 24px;
  gap: 0;
}
.ws { flex: 1; text-align: center; position: relative; }
.ws::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 60%;
  width: 80%;
  height: 1px;
  background: var(--border2);
  z-index: 0;
}
.ws:last-child::after { display: none; }
.ws-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin: 0 auto 4px;
  position: relative;
  z-index: 1;
  background: var(--card);
  color: var(--text3);
}
.ws.active .ws-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.ws.done .ws-dot { border-color: var(--green); background: var(--green); color: #fff; }
.ws-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.ws.active .ws-label { color: var(--accent2); }

/* ===== MISC UTILS ===== */
.flex { display: flex; align-items: center; }
.flex-sb { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap4 { gap: 4px; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.mb4 { margin-bottom: 4px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.mb20 { margin-bottom: 20px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.text-muted { color: var(--text3); }
.text-sub { color: var(--text2); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-red { color: var(--red); }
.text-accent { color: var(--accent2); }
.text-white { color: var(--white); }
.w100 { width: 100%; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }
.dot-gray { background: var(--text3); }
.empty-state { text-align: center; padding: 40px 16px; color: var(--text3); }
.empty-icon { font-size: 32px; margin-bottom: 10px; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.scadenza-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  align-items: flex-start;
}
.sc-warn { background: var(--yellow2); border: 1px solid rgba(234,179,8,.2); }
.sc-danger { background: var(--red2); border: 1px solid rgba(239,68,68,.2); }
.sc-ok { background: var(--card2); border: 1px solid var(--border); }
.sc-title { font-size: 13px; font-weight: 600; color: var(--text); }
.sc-sub { font-size: 11px; color: var(--text2); }

/* ===== ABBONAMENTO PIANI ===== */
.piano-card {
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s;
}
.piano-card.selected { border-color: var(--accent); background: var(--accent3); }
.piano-price { font-size: 24px; font-weight: 800; color: var(--white); margin: 6px 0 2px; }
.piano-price small { font-size: 13px; font-weight: 400; color: var(--text2); }

/* ===== PDF PREVIEW ===== */
.pdf-preview {
  background: #fff;
  color: #1f2937;
  border-radius: 8px;
  padding: 20px;
  color: #111;
  font-size: 12px;
}
.pdf-legal { font-size: 10px; color: #888; margin-top: 12px; line-height: 1.5; }
.pdf-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eee; }
.pdf-row.total { font-weight: 700; font-size: 13px; border-bottom: none; padding-top: 10px; }


/* ===== TOAST NOTIFICATIONS ===== */
#toast-container {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  right: 16px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: auto;
  min-width: 200px;
  max-width: 300px;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform .32s cubic-bezier(.34,1.4,.64,1), opacity .25s ease;
}
.toast.show {
  transform: translateX(0);
  opacity: 1;
}
.toast.hide {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform .25s ease, opacity .2s ease;
}
.toast-ok  { border-left: 3px solid var(--green); }
.toast-err { border-left: 3px solid var(--red); }
.toast-info{ border-left: 3px solid var(--accent2); }
.toast-icon { font-size: 15px; flex-shrink: 0; line-height: 1; }
.toast-ok  .toast-icon { color: var(--green); }
.toast-err .toast-icon { color: var(--red); }
.toast-info .toast-icon { color: var(--accent2); }
.toast-link {
  color: var(--accent2);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 4px;
}
.toast-link:hover { text-decoration: underline; }

/* ===== ASSE SFONDO: TEMA CHIARO =====
   Ridefinisce SOLO sfondo e colori neutri.
   Gli accenti (--accent/--accent2/--accent3) sono nell'asse data-accent. */
html[data-tema="light"] {
  --bg: #f5f6f8;
  --card: #ffffff;
  --card2: #eef0f3;
  --border: #e2e5ea;
  --border2: #d0d4db;
  --text: #1f2937;
  --text2: #6b7280;
  --text3: #9ca3af;
  --green: #16a34a;
  --green2: rgba(22,163,74,.12);
  --orange: #d97706;
  --orange2: rgba(217,119,6,.1);
  --red: #dc2626;
  --red2: rgba(220,38,38,.1);
  --yellow: #b45309;
  --yellow2: rgba(180,83,9,.08);
  --cyan: #0891b2;
  --white: #111827;
}
html[data-tema="light"] .alert-warn {
  color: #78350f;
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.35);
}
html[data-tema="light"] .alert-ok {
  color: #14532d;
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
}
html[data-tema="light"] .alert-info {
  color: #164e63;
  background: rgba(6,182,212,.08);
  border-color: rgba(6,182,212,.2);
}
html[data-tema="light"] .b-gray { background: rgba(0,0,0,.07); color: #6b7280; }
html[data-tema="light"] thead th { background: rgba(0,0,0,.02); }
html[data-tema="light"] .form-input { background: #ffffff; }
html[data-tema="light"] .search-input { background: #ffffff; }
html[data-tema="light"] .sidebar-overlay { background: rgba(0,0,0,.4); }
html[data-tema="light"] .modal-overlay { background: rgba(0,0,0,.5); }

/* ===========================================================
   ASSE ACCENTO (data-accent) — indipendente dall'asse sfondo
   Controlla SOLO --accent / --accent2 / --accent3.
   Combinabile con qualsiasi data-tema (dark|light).
=========================================================== */

/* --- Accento VIOLA (default) --- */
html[data-accent="viola"] {
  --accent: #7c6ff7;
  --accent2: #a78bfa;
  --accent3: rgba(124,111,247,.12);
}
/* Su sfondo chiaro il viola usa una traslucenza leggermente più tenue
   (valore originale del vecchio tema light) */
html[data-tema="light"][data-accent="viola"] {
  --accent3: rgba(124,111,247,.1);
}

/* --- Accento TEAL --- (opzione 2B: due set in base allo sfondo) */
/* Teal su sfondo scuro (tonalità "scure-sfondo" del vecchio tema teal) */
html[data-tema="dark"][data-accent="teal"] {
  --accent: #71a3a3;
  --accent2: #8ec8c8;
  --accent3: rgba(113,163,163,.15);
}
/* Teal su sfondo chiaro (tonalità "chiaro-sfondo" del vecchio tema teal-light) */
html[data-tema="light"][data-accent="teal"] {
  --accent: #5F7878;
  --accent2: #4d6868;
  --accent3: rgba(95,120,120,.15);
}

/* ===== TEMA CARD SELECTOR ===== */
.tema-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tema-card {
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.tema-card.selected { border-color: var(--accent); background: var(--accent3); }
.tema-card .tema-icon { font-size: 24px; margin-bottom: 6px; line-height: 1; }
.tema-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 6px;
}

/* ===========================
   TABLET 640px+
=========================== */
@media (min-width: 640px) {
  .main-content { padding: calc(var(--topbar-h) + 20px) 20px calc(var(--bottomnav-h) + 20px); }
  .grid.g2-sm { grid-template-columns: 1fr 1fr; }
  .grid.g3-sm { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 20px; }
  .stat-value { font-size: 26px; }
  .soglia-amount { font-size: 32px; }
  .page-title { font-size: 22px; }
  .modal-footer { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn-full { width: auto; }
  /* Tablet: celle ad altezza automatica, chip su una riga con ellipsis */
  .cal-day { min-height: 92px; padding: 5px; }
  .cal-day-num { font-size: 11px; margin-bottom: 4px; }
  .cal-day.today .cal-day-num { width: 20px; height: 20px; font-size: 11px; }
  .cal-post {
    display: flex;
    align-items: center;
    width: 100%; max-width: 100%; height: auto;
    border-radius: 3px;
    border-left: 3px solid currentColor;
    padding: 2px 5px;
    font-size: 10px; font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0 2px;
    line-height: 1.3;
    box-sizing: border-box;
  }
  .cal-post.pub  { background: var(--green2);  color: var(--green); }
  .cal-post.plan { background: var(--accent3); color: var(--accent2); }
  .cal-post.late { background: var(--red2);    color: var(--red); }
  /* Da 640px in su la × torna visibile (cancellazione rapida desktop/tablet) */
  .cal-post-x { display: inline !important; }
  /* Agenda contenuta/centrata su schermi più larghi */
  .cal-agenda { max-width: 640px; margin: 0 auto; }
}


/* ===========================
   DESKTOP 1024px+
=========================== */
@media (min-width: 1024px) {
  /* Sidebar fissa, no bottom nav. Il ☰ resta come toggle collassa-rail. */
  .sidebar {
    transform: none !important;
    position: fixed;
  }
  .sidebar-overlay { display: none !important; }
  .bottom-nav { display: none; }
  .hamburger { display: flex; }
  .topbar-logo { display: none; }
  .topbar-title { text-align: left; flex: 0 0 auto; }

  .app-layout { flex-direction: row; }
  .main-content {
    margin-left: var(--sidebar-w);
    padding: calc(var(--topbar-h) + 24px) 28px 40px;
  }
  .topbar { left: var(--sidebar-w); }

  .grid.g2-lg { grid-template-columns: 1fr 1fr; }
  .grid.g3-lg { grid-template-columns: repeat(3, 1fr); }
  .grid.g4-lg { grid-template-columns: repeat(4, 1fr); }

  /* Modal centrata su desktop */
  .modal-overlay { align-items: center; }
  .modal {
    border-radius: 14px;
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--border);
  }
  .modal-drag { display: none; }
  .modal-footer { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn-full { width: auto; }

  /* Desktop: celle ad altezza minima, font più leggibile */
  .cal-day { min-height: 116px; padding: 6px; }
  .cal-grid { gap: 3px; }
  .cal-day-num { font-size: 12px; margin-bottom: 5px; }
  .cal-day.today .cal-day-num { width: 22px; height: 22px; font-size: 12px; }
  .cal-post { font-size: 11px; padding: 2px 6px; margin-bottom: 2px; border-radius: 3px; border-left: 3px solid currentColor; }
}


/* =====================================================================
   GOOGLE MATERIAL SKIN — refactoring completo "console Google"
   Accento blu Google · elevazioni al posto dei bordi · forme a pillola
   · dialog Material 3 · scrollbar sottili. Layer finale: sovrascrive
   tutto ciò che sta sopra. Ottimizzato per il tema chiaro (default),
   ma coerente anche in scuro.
   ===================================================================== */

/* 1 · Token elevazione/scrollbar Material — l'accento resta quello scelto (teal/viola/blu/…) */
html[data-tema][data-accent] {
  --gblue-700: #1b66c9;
  --elev1: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.08);
  --elev2: 0 1px 3px rgba(60,64,67,.12), 0 4px 8px rgba(60,64,67,.10);
  --elev3: 0 8px 12px rgba(60,64,67,.12), 0 20px 32px rgba(60,64,67,.16);
  --scroll-thumb: rgba(60,64,67,.30);
}
html[data-tema="dark"][data-accent] {
  --scroll-thumb: rgba(255,255,255,.20);
  --elev1: 0 1px 2px rgba(0,0,0,.45);
  --elev2: 0 2px 8px rgba(0,0,0,.55);
  --elev3: 0 16px 40px rgba(0,0,0,.65);
}

/* 2 · Scrollbar sottili (Google) — basta barre grosse di sistema */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(60,64,67,.55); background-clip: padding-box; }

/* 3 · Tipografia */
body { letter-spacing: .1px; }
.page-title { font-weight: 600; letter-spacing: -.2px; }

/* 4 · Top app bar */
.topbar { background: var(--card); border-bottom: none; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }
html[data-tema="light"] .topbar { box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 1px 0 rgba(0,0,0,.04); }
.topbar-title { font-weight: 500; letter-spacing: 0; }
.topbar-icon-btn:hover { background: var(--accent3); color: var(--accent); }

/* 5 · Omnibox = barra di ricerca Google (pillola, focus con elevazione) */
.omnibox {
  height: 44px;
  background: var(--card2);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
html[data-tema="light"] .omnibox { background: #f1f3f4; }
.omnibox:focus-within { background: var(--card); border-color: var(--border); box-shadow: var(--elev1); }
.omnibox-icon { color: var(--text2); }
.omnibox-results { border: none; box-shadow: var(--elev3); border-radius: 16px; padding: 8px; }
.omni-item { display: block; padding: 9px 14px; border-radius: 10px; color: var(--text); font-size: 13px; text-decoration: none; }
.omni-item:hover, .omni-item.active { background: var(--accent3); color: var(--accent); }

/* 6 · Sidebar / navigation rail — voci a pillola, attivo blu tonale */
.sidebar { background: var(--card); border-right: 1px solid rgba(0,0,0,.06); }
html[data-tema="dark"] .sidebar { border-right-color: var(--border); }
.sb-header { border-bottom: none; }
.sb-nav { padding: 8px 8px 8px 0; }
.sb-link, .nav-group-head { border-radius: 0 999px 999px 0; font-weight: 500; }
.nav-group-head { font-weight: 600; }
.sb-link:hover, .nav-group-head:not(.active):hover { background: rgba(60,64,67,.08); color: var(--text); }
html[data-tema="dark"] .sb-link:hover,
html[data-tema="dark"] .nav-group-head:not(.active):hover { background: rgba(255,255,255,.06); }
.sb-link.active, .nav-group-head.active { background: var(--accent3); color: var(--accent); font-weight: 600; }
.sb-link.active .sb-link-icon, .nav-group-head.active .nav-group-icon { color: var(--accent); }
.nav-group-icon, .sb-link-icon { color: var(--text2); }
.sb-footer { border-top: 1px solid rgba(0,0,0,.06); }
html[data-tema="dark"] .sb-footer { border-top-color: var(--border); }

/* 7 · Card & stat-card — niente bordo, elevazione morbida, angoli ampi */
.card, .stat-card { background: var(--card); border: none; border-radius: 16px; box-shadow: var(--elev1); transition: box-shadow .18s; }
html[data-tema="dark"] .card, html[data-tema="dark"] .stat-card { background: var(--card2); }
.card:hover, .stat-card:hover { box-shadow: var(--elev2); }

/* 8 · Bottoni Material (pillola) */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .15px; transition: box-shadow .15s, background .15s, filter .15s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--gblue-700); box-shadow: var(--elev1); }
.btn-primary:active { background: var(--gblue-700); }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border2); }
.btn-ghost:hover { background: var(--accent3); border-color: var(--accent); }
.btn-icon { border-radius: 999px; }
.btn-icon:hover { background: rgba(60,64,67,.08); }

/* 9 · Input & ricerca — focus ring blu */
.form-input, .search-input { border-radius: 8px; border: 1px solid var(--border2); transition: border-color .15s, box-shadow .15s; }
.form-input:focus, .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* 10 · Dialog (modal) stile Material 3 — angoli 28px, ombra morbida, header fisso, scroll sottile */
.modal-overlay { background: rgba(32,33,36,.5); }
.modal { border: none; box-shadow: var(--elev3); }
.modal-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 16px 20px;
}
html[data-tema="dark"] .modal-header { border-bottom-color: var(--border); }
.modal-title { font-weight: 600; }
.modal-close { border-radius: 999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: rgba(60,64,67,.08); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid rgba(0,0,0,.06); padding: 14px 20px; }
@media (min-width: 1024px) {
  .modal { border-radius: 28px; max-width: 640px; }
}

/* 11 · Tab → chip Google */
.tab-bar { background: transparent; border: none; padding: 0; gap: 8px; overflow-x: auto; }
.tab-btn { border-radius: 999px; border: 1px solid var(--border2); color: var(--text2); padding: 7px 16px; }
.tab-btn:hover { background: var(--accent3); }
.tab-btn.active { background: var(--accent3); color: var(--accent); border-color: transparent; }

/* 12 · Badge → chip arrotondato */
.badge { border-radius: 999px; padding: 3px 10px; font-weight: 600; letter-spacing: .2px; }
.b-purple { background: var(--accent3); color: var(--accent); }


/* =====================================================================
   GA4 REFERENCE LAYER — pagina Clienti come campione "Google Analytics".
   CSS condivisi: si propagano poi su tutte le pagine. Roboto, sentence
   case, liste a divisori hairline, side sheet da destra, palette GA.
   ===================================================================== */

/* Token colore GA4 (tema chiaro) */
html[data-tema="light"] {
  --bg: #ffffff;
  --card: #ffffff;
  --card2: #f8f9fa;
  --border: #e8eaed;
  --border2: #dadce0;
  --text:  #202124;
  --text2: #5f6368;
  --text3: #80868b;
  --white: #202124;
}
html[data-tema="light"] body { background: #ffffff; }

/* Tema SCURO: testi più leggibili (più contrasto su sfondo scuro, palette dark Google) */
html[data-tema="dark"] {
  --text:  #e8eaed;
  --text2: #c8ccce;
  --text3: #9aa0a6;
}

/* Stop MAIUSCOLE — Google scrive in sentence case */
.form-label, .form-section-title, .stat-label, .sb-section, .badge {
  text-transform: none;
  letter-spacing: 0;
}
.form-label { font-size: 12px; font-weight: 400; color: var(--text2); margin-bottom: 4px; }
.form-section-title { font-size: 14px; font-weight: 500; color: var(--text); border-bottom: none; padding-bottom: 4px; margin-bottom: 12px; }
.stat-label { font-size: 12px; font-weight: 400; color: var(--text2); }
.page-title { font-size: 22px; font-weight: 400; }

/* Lista stile GA: righe ariose, divisori hairline, hover state-layer, avatar neutro */
.item-row { padding: 12px 8px; border-bottom: 1px solid var(--border); border-radius: 0; transition: background .12s; }
.item-row:hover { background: var(--card2); }
.item-row:active { opacity: 1; background: var(--card2); }
.item-avatar { width: 36px; height: 36px; background: var(--card2); border: none; color: var(--text2); font-weight: 500; font-size: 14px; }
.item-name { font-weight: 500; color: var(--text); }
.item-sub  { color: var(--text2); }
.item-right { color: var(--text2); font-variant-numeric: tabular-nums; }
.item-amount { font-weight: 500; color: var(--text2); font-variant-numeric: tabular-nums; }

/* Status come chip GA tenui */
.badge { font-size: 11px; font-weight: 500; padding: 3px 8px; }
html[data-tema="light"] .b-green  { background: #e6f4ea; color: #137333; }
html[data-tema="light"] .b-gray   { background: #f1f3f4; color: #5f6368; }
/* Elenco clienti raggruppato — tema chiaro (palette GA verde, come .b-green) */
html[data-tema="light"] .gtable tbody tr.item-row.cli-attivo td {
  background: #e6f4ea;
  box-shadow: inset 3px 0 0 #137333;
}
html[data-tema="light"] .gtable tbody tr.item-row.cli-attivo:hover td,
html[data-tema="light"] .gtable tbody tr.item-row.cli-attivo:active td {
  background: #e6f4ea;
}
html[data-tema="light"] .gtable tbody tr.item-row.cli-attivo .item-name { color: #137333; }
html[data-tema="light"] .gtable tbody tr.gt-group td { background: #f1f3f4; color: #5f6368; }
html[data-tema="light"] .b-yellow { background: #fef7e0; color: #b06000; }
html[data-tema="light"] .b-red    { background: #fce8e6; color: #c5221f; }
html[data-tema="light"] .b-purple { background: #e8f0fe; color: #1967d2; }
html[data-tema="light"] .b-cyan   { background: #e4f7fb; color: #007b83; }
html[data-tema="light"] .b-orange { background: #feefe3; color: #b06000; }

/* Card: bianca, hairline + angoli 12, ombra solo all'hover */
html[data-tema="light"] .card, html[data-tema="light"] .stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: none;
}
html[data-tema="light"] .card:hover, html[data-tema="light"] .stat-card:hover { box-shadow: var(--elev1); }

/* Ricerca pagina (GA): bianca, hairline, focus blu, icona pulita */
.search-input { background: var(--card); border: 1px solid var(--border2); border-radius: 8px; }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.search-icon { display: flex; align-items: center; }
.search-icon svg { display: block; }

/* Filtri/tab → chip outline GA */
.tab-bar { gap: 8px; }
.tab-btn { background: var(--card); border: 1px solid var(--border2); color: var(--text2); }
.tab-btn:hover { background: var(--card2); }
.tab-btn.active { background: #e8f0fe; color: #1967d2; border-color: transparent; font-weight: 500; }

/* ===== SIDE SHEET — dettaglio/form entrano da destra (desktop) ===== */
@media (min-width: 1024px) {
  .modal-overlay { top: var(--topbar-h); align-items: stretch; justify-content: flex-end; background: rgba(32,33,36,.32); }
  .modal {
    width: 480px; max-width: 480px; height: 100%; max-height: 100%;
    margin: 0; border-radius: 0; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 24px rgba(60,64,67,.18);
    animation: sheetIn .22s cubic-bezier(.2, 0, 0, 1);
  }
  .modal-body { flex: 1; overflow-y: auto; }
  .modal-footer { justify-content: flex-end; }
  .modal-footer .btn-full { width: auto; }
}
@keyframes sheetIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ===== TABELLA DATI stile console Google (Clienti come campione) ===== */
.gt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.gt-search { display: flex; align-items: center; gap: 8px; height: 40px; min-width: 240px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--border2); border-radius: 999px; color: var(--text3); }
.gt-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; color: var(--text); }
.gt-search svg { flex-shrink: 0; }

.gtable-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.gtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.gtable thead th { position: sticky; top: 0; background: var(--card); text-align: left; font-weight: 500;
  color: var(--text2); font-size: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gtable thead th.gt-right { text-align: right; }
.gt-sortable { cursor: pointer; user-select: none; }
.gt-sortable:hover { color: var(--text); }
.gt-sortable.sorted { color: var(--accent); }
.gt-sortable.sorted::after { content: ' ▾'; font-size: 10px; }
.gt-sortable.sorted[data-asc="true"]::after { content: ' ▴'; }
.gtable tbody tr.item-row { display: table-row; cursor: pointer; transition: background .12s; }
.gtable tbody tr.item-row:hover { background: var(--card2); }
.gtable tbody tr.item-row:active { background: var(--card2); opacity: 1; }
.gtable tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.gtable tbody tr:last-child td { border-bottom: none; }
.gt-right { text-align: right; font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; }
.gt-cliente { display: flex; align-items: center; gap: 12px; }
.gt-cliente-meta { min-width: 0; }
.gt-cliente-meta .item-sub { font-size: 12px; }
.gt-empty { padding: 28px 16px; color: var(--text2); text-align: center; }

/* ── Elenco clienti raggruppato (Clienti attivi + per anno) ─────────────────
   Righe-intestazione di gruppo (nome gruppo / anno) e riga cliente attivo con
   barra interamente verde. Colori dal tema (var(--green*)/var(--card2)): niente
   colori fissi, leggibili sia in scuro sia in chiaro. */
.gtable tbody tr.gt-group td {
  background: var(--card2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
/* Riga "Cliente attivo": intera barra verde tenue con accento verde a sinistra.
   L'hover/active mantengono lo stesso verde (niente card2 grigio) per non
   perdere l'evidenza del gruppo attivi. */
.gtable tbody tr.item-row.cli-attivo td {
  background: var(--green2);
  box-shadow: inset 3px 0 0 var(--green);
}
.gtable tbody tr.item-row.cli-attivo:hover td,
.gtable tbody tr.item-row.cli-attivo:active td {
  background: var(--green2);
}
.gtable tbody tr.item-row.cli-attivo .item-name { color: var(--green); }

/* Intestazione del pannello dettaglio (side sheet) — sempre visibile */
.modal-title { font-size: 18px; font-weight: 500; }
.modal-header { gap: 12px; }

/* ===== SCHEDA DETTAGLIO a pagina dedicata con tab (pattern standard) ===== */
.dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dp-back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--text2); flex-shrink: 0; }
.dp-back:hover { background: rgba(60,64,67,.08); color: var(--text); }
.dp-crumb { font-size: 20px; color: var(--text2); font-weight: 400; }
.dp-crumb b { color: var(--text); font-weight: 500; }
.dp-crumb a { color: var(--text2); }
.dp-crumb a:hover { color: var(--accent); }
.dp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; }
.dp-tab { padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--text2); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font-family: inherit; }
.dp-tab:hover { color: var(--text); }
.dp-tab.active { color: #1967d2; border-bottom-color: #1967d2; }
.dp-panel { max-width: 880px; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.dp-label { font-size: 12px; color: var(--text2); margin-bottom: 3px; }
.dp-val { font-size: 14px; color: var(--text); font-weight: 500; }
.dp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
@media (max-width: 639px) { .dp-grid { grid-template-columns: 1fr; } .dp-crumb { font-size: 16px; } }

/* ===== Mai scroll orizzontale di pagina: il testo lungo va a capo e rispetta la larghezza ===== */
html, body { overflow-x: hidden; max-width: 100%; }
.app-layout, .main-content { min-width: 0; max-width: 100%; }
/* I contenitori flessibili devono potersi stringere (altrimenti il testo lungo sfora) */
.item-body, .item-name, .item-sub, .gt-cliente-meta, .dp-val, .dp-crumb, .topbar-title { min-width: 0; }
/* Il testo lungo va a capo invece di sforare */
.item-sub, .dp-val, .stat-value, .badge, .alert, .card, td, .form-input, .omni-item { overflow-wrap: anywhere; word-break: break-word; }
/* Nelle liste a CARD (non tabella) il nome va a capo mostrando tutto il testo;
   nelle tabelle (.gtable) resta troncato con ellissi. */
.item-list .item-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Dashboard "Cose da fare": #todo-list è grid (no .item-list), il nome task deve andare a capo nella sua colonna */
#todo-list .item-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Etichette/numeri brevi restano su una riga (non spezzare le cifre) */
.gt-right, .gtable thead th { word-break: normal; }

/* ===== Responsive: componenti GA su mobile/tablet ===== */
.gt-toolbar { flex-wrap: wrap; }
.gt-search { max-width: 100%; }
.dp-head { flex-wrap: wrap; }
@media (max-width: 639px) {
  .gtable { font-size: 13px; }
  .gtable thead th { padding: 10px 10px; font-size: 11px; }
  .gtable tbody td { padding: 10px 10px; }
  .gt-search { flex: 1 1 100%; min-width: 0; }
  .dp-grid { grid-template-columns: 1fr; }
  .dp-head { gap: 6px; }
  .dp-tabs { gap: 18px; }
  /* I gruppi di bottoni-azione nelle celle vanno a capo invece di sforare */
  .gtable td .gt-cliente { gap: 8px; }
}

/* ── MEV #31: fasce di raggruppamento mensile nelle fatture ──
   MEV #37: la fascia porta anche il netto stimato e le tasse stimate del mese,
   accanto al lordo. Le cifre vanno a capo su schermi stretti (niente scroll
   orizzontale) e usano solo variabili del tema. */
.gtable tbody tr.ft-group-row { background: var(--card2); }
.gtable tbody tr.ft-group-row:hover { background: var(--card2); }
.gtable tbody tr.ft-group-row td { padding: 0; border-bottom: 1px solid var(--border); }
.ft-group-band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 9px 16px;
}
.ft-group-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent2);
}
/* Gruppo di cifre a destra della fascia (lordo / netto / tasse) */
.ft-group-nums {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0;
}
.ft-group-cell { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ft-group-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); overflow-wrap: break-word; word-break: break-word;
}
.ft-group-tot,
.ft-group-net,
.ft-group-tax { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-group-tot { color: var(--text); }
.ft-group-net { color: var(--green); }
.ft-group-tax { color: var(--yellow); }
@media (max-width: 639px) {
  .ft-group-band { padding: 8px 10px; }
  .ft-group-label { font-size: 11px; }
  .ft-group-nums { gap: 10px; }
  .ft-group-tot,
  .ft-group-net,
  .ft-group-tax { font-size: 12px; }
}

/* ── Toggle switch ── */
.toggle-row { display: flex; align-items: center; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--card2); border: 1px solid var(--border2);
  border-radius: 12px; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 2px; top: 2px;
  background: var(--text3); border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }