/* =============================================================================
   MyKinetico — Stili scheletro MVP staging
   Brand: Cobalt v2 (rebrand giugno 2026). Accento blu→indaco
   (#0A84FF → #5E5CE6), tipografia di sistema (SF Pro stack).
   Il verde è ora RISERVATO al solo stato "positivo/incassato/successo".
   Ref: ~/CLAUDE/03_MYKINETICO/contesto/mykinetico_design-system-app_v2.md
   ============================================================================= */

:root {
  /* --- Base Cobalt --- */
  --bg: #EDEFF5;
  --bg-gradient: radial-gradient(130% 55% at 50% -8%, #E2E7F3 0%, #EDEFF5 60%);
  --surface: #ffffff;
  --surface-2: #F4F6FA;
  --surface-3: #EAECF2;
  --field: #F0F2F7;
  --text: #0E1116;
  --text-2: #5a6168;
  --text-3: #8A9099;

  /* --- Accento Cobalt: SOLIDO per testo/icone/bordi, GRADIENTE per i fill --- */
  --accent: #0A84FF;
  --accent-2: #5E5CE6;
  --accent-grad: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
  --accent-soft: rgba(10,132,255,.12);
  --accent-dark: #0a6cff;
  --accent-glow: rgba(94,92,230,.45);
  --accent-line: rgba(10,132,255,.32);

  /* --- Positivo / incassato / OK (verde ora SOLO questo) --- */
  --positive: #34C759;
  --positive-text: #248A3D;
  --positive-soft: rgba(52,199,89,.12);
  --positive-glow: rgba(52,199,89,.40);

  /* --- Stati --- */
  --violet: #BF5AF2; --violet-soft: rgba(191,90,242,.10);
  --blue: #64D2FF;   --blue-soft: rgba(100,210,255,.12);
  --amber: #FF9F0A;  --amber-soft: rgba(255,159,10,.12); --amber-text: #c2780c;
  --rose: #FF3B30;   --rose-soft: rgba(255,59,48,.08);    --rose-text: #D70015;

  /* Compat: border/border-strong erano usati ovunque → li allineiamo alla
     hairline Cobalt mantenendo i nomi (zero churn nei selettori esistenti). */
  --border: rgba(60,60,67,.12);
  --border-strong: rgba(60,60,67,.20);

  --logout: #1E2761;
  --topbar-bg: #ffffff;
  --grid-line: #EAECF2;

  /* --- Ombre iOS, scala a 3 livelli con doppio strato (brief) ---
     e1 riposo / e2 sollevato-hover / e3 modale-menu. Le superfici
     colorate (card cobalt, btn primario) usano ombra dello stesso colore. */
  --shadow-card: 0 1px 2px rgba(16,20,40,.04), 0 8px 20px -12px rgba(16,20,40,.16);
  --shadow-icon: 0 1px 2px rgba(16,20,40,.06), 0 6px 14px -10px rgba(16,20,40,.30);
  --shadow-soft: 0 2px 6px -2px rgba(16,20,40,.10), 0 18px 34px -14px rgba(16,20,40,.24);
  --shadow-pop:  0 30px 64px -22px rgba(16,20,40,.34);

  /* Identità "card cobalt" (firma di brand permanente, NON segnale di stato).
     Triplo strato in light: hairline blu interna (firma leggibile anche su
     sfondo chiaro) + ombra cobalt tesa (meno spread, più presente) + microluce
     neutra. Senza l'hairline inset, in light la firma non si percepisce. */
  --shadow-card-cobalt: inset 0 0 0 1px rgba(10,132,255,.08), 0 10px 24px -10px rgba(10,132,255,.42), 0 1px 2px rgba(16,20,40,.05);
  /* Gemelle data-driven per accensione warn/alert: stesso pattern (inset
     hairline + ombra tesa) per coerenza visiva con la firma cobalt. */
  --shadow-card-warn:  inset 0 0 0 1px rgba(255,159,10,.10), 0 10px 24px -10px rgba(255,159,10,.42), 0 1px 2px rgba(16,20,40,.05);
  --shadow-card-alert: inset 0 0 0 1px rgba(255,59,48,.10),  0 10px 24px -10px rgba(255,59,48,.40),   0 1px 2px rgba(16,20,40,.05);

  --shadow-hero: 0 14px 34px -12px rgba(94,92,230,.55);
  --shadow-btn:  0 8px 20px -8px rgba(10,132,255,.55);
  --shadow-featured: 0 0 0 1px var(--accent), 0 8px 24px -10px rgba(10,132,255,.30);
  --shadow-warn:     0 0 0 1px var(--amber),  0 8px 24px -10px rgba(255,159,10,.22);

  /* --- Restyle iOS: scala raggi (invariata) --- */
  --r-sm: 11px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 26px;  --r-pill: 999px;
  --elevated: #ffffff;

  /* --- Hairline (separatori sottili) --- */
  --hair: rgba(60,60,67,.10);  --hair-strong: rgba(60,60,67,.18);
  --cal-zebra: rgba(60,60,67,.022);   /* zebra leggerissima colonne giorno (chiaro) */

  /* --- Vetro smerigliato (barre sticky + overlay) --- */
  --glass: rgba(255,255,255,.55);  --glass-blur: blur(22px) saturate(160%);

  /* --- Movimento --- */
  --spring: cubic-bezier(.22,1,.36,1);  --dur: .22s;  --dur-fast: .15s;

  /* offset intestazioni sticky (header compatto + tab) */
  --ph-h: 66px;  --tabs-h: 50px;

  /* alias retrocompat moduli esistenti (NON rimuovere: usati in tutto il CSS) */
  --text-muted: var(--text-2);
  --danger: var(--rose);
  --shadow: var(--shadow-soft);
}

[data-theme="dark"] {
  /* --- Base Cobalt dark --- */
  --bg: #0A0C16;
  --bg-gradient:
    radial-gradient(90% 55% at 15% -5%, rgba(10,132,255,.18) 0%, transparent 60%),
    radial-gradient(70% 45% at 95% 0%, rgba(94,92,230,.16) 0%, transparent 60%),
    #0A0C16;
  --surface: #161A2B;  --surface-2: #1B2034;  --surface-3: #232A40;
  --field: #1F2438;    --elevated: #1E2240;

  --text: #F5F7FF;
  /* Muted alzato per contrasto: mai #9AA1B8 sui dark Cobalt */
  --text-2: #AEB5CC;
  --text-3: #AEB5CC;

  /* Accento: stesso gradiente; su dark il blu "pieno" come testo va schiarito */
  --accent: #5AA9FF;
  --accent-2: #5E5CE6;
  --accent-grad: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
  --accent-soft: rgba(10,132,255,.18);
  --accent-dark: #0A84FF;
  --accent-glow: rgba(94,92,230,.55);
  --accent-line: rgba(90,169,255,.40);

  /* Positivo / stati (varianti dark più brillanti) */
  --positive: #30D158;  --positive-text: #30D158;  --positive-soft: rgba(48,209,88,.16);
  --positive-glow: rgba(48,209,88,.45);
  --rose: #FF453A;   --rose-soft: rgba(255,69,58,.14);   --rose-text: #FF453A;
  --amber: #FFD60A;  --amber-soft: rgba(255,214,10,.14); --amber-text: #FFD60A;
  --violet: #BF5AF2; --blue: #64D2FF;

  /* Compat border/border-strong: allineati a hairline dark */
  --border: rgba(255,255,255,.10);  --border-strong: rgba(255,255,255,.16);

  --hair: rgba(255,255,255,.08);  --hair-strong: rgba(255,255,255,.14);
  --cal-zebra: rgba(255,255,255,.028);   /* zebra leggerissima colonne giorno (scuro) */
  --topbar-bg: #0E1024;  --grid-line: #1B1E34;

  /* Ombre dark — proporzionate (più profonde) */
  --shadow-card: 0 1px 2px rgba(0,0,0,.55), 0 12px 24px -14px rgba(0,0,0,.78);
  --shadow-icon: 0 1px 2px rgba(0,0,0,.5), 0 6px 14px -10px rgba(0,0,0,.7);
  --shadow-soft: 0 2px 6px -2px rgba(0,0,0,.55), 0 22px 40px -16px rgba(0,0,0,.78);
  --shadow-pop:  0 36px 72px -22px rgba(0,0,0,.85);

  /* Card cobalt firma + gemelle warn/alert (dark) */
  --shadow-card-cobalt: 0 14px 30px -14px rgba(10,132,255,.55), 0 1px 2px rgba(0,0,0,.45);
  --shadow-card-warn:   0 14px 30px -14px rgba(255,159,10,.50),  0 1px 2px rgba(0,0,0,.45);
  --shadow-card-alert:  0 14px 30px -14px rgba(255,69,58,.50),   0 1px 2px rgba(0,0,0,.45);

  --shadow-hero: 0 18px 40px -14px rgba(94,92,230,.65);
  --shadow-btn:  0 10px 22px -8px rgba(10,132,255,.7);
  --shadow-featured: 0 0 0 1px var(--accent), 0 8px 28px -10px rgba(10,132,255,.40);
  --shadow-warn: 0 0 0 1px var(--amber), 0 8px 28px -10px rgba(255,214,10,.30);
  --glass: rgba(11,12,26,.52);
}

* { box-sizing: border-box; }

/* Forza l'attributo HTML [hidden] a vincere sempre sui display custom (es. flex)
   delle view #view-login / #view-dashboard. Senza questa riga, l'attribute hidden
   viene ignorato e le view non si nascondono. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg-gradient);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}

.view { min-height: 100vh; }

/* ----- LOGIN ----- */

#view-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  padding: 40px;
  width: 100%;
  max-width: 420px;
}

.brand {
  text-align: center;
  margin-bottom: 32px;
}

.brand h1 {
  margin: 12px 0 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.logo-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
}

.env-tag {
  display: inline-block;
  background: rgba(10, 132, 255, 0.12);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  margin: 0;
}

#login-form { display: flex; flex-direction: column; gap: 16px; }

#login-form label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  gap: 6px;
}

#login-form input {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}

#login-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

#login-form button {
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

#login-form button:hover { background: var(--accent-dark); }
#login-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.error {
  color: var(--danger);
  font-size: 14px;
  margin: 4px 0 0;
}

.hint {
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.hint code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ----- DASHBOARD ----- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.brand-mini strong { font-weight: 700; letter-spacing: -0.01em; }

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Secondario: bianco + hairline + ombra leggera (brief). */
.btn-ghost {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--text-2);
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--dur-fast, .15s) ease,
              border-color var(--dur-fast, .15s) ease,
              color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease);
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent-line);
  color: var(--text);
}
.btn-ghost:active { transform: scale(.97); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.dashboard {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;   /* full-width fino a 1600px, poi centra */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* L2 — testata benvenuto FISSA (sticky) in cima allo scroll della pagina */
.welcome-card {
  position: sticky;
  top: 0;
  z-index: 20;
  /* full-bleed: cancella il padding della .dashboard così nulla traspare ai lati */
  margin: -32px -32px 0;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .welcome-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }

.welcome-card h2 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.block {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px 28px;
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.block-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.count-pill {
  background: rgba(10, 132, 255, 0.12);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-item .item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item .item-title {
  font-weight: 500;
  font-size: 14px;
}

.list-item .item-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.list-item .item-meta {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.muted { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ----- NAV ----- */

.main-nav {
  display: flex;
  gap: 4px;
}

.nav-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }

.nav-btn.is-active {
  background: rgba(10, 132, 255, 0.12);
  color: var(--accent-dark);
}

/* ----- APP SHELL: SIDEBAR + MAIN ----- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;     /* lo scroll vive nella nav: header e footer restano fissi */
  transition: background 0.25s, border-color 0.25s;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Logo brand: squircle a gradiente Cobalt (chevron) + wordmark "myKinetico." */
.brand-mark { flex-shrink: 0; border-radius: 11px; }
.brand-word { display: flex; align-items: center; gap: 7px; }
.bw { font-size: 20px; letter-spacing: -0.6px; line-height: 1; color: #8A9099; font-weight: 500; }
.bw strong { font-weight: 800; color: #1C1F3A; }
[data-theme="dark"] .bw strong { color: #EAECF2; }
/* Il punto resta cobalt pieno in entrambi i temi: firma cromatica. */
.bw em { font-style: normal; font-weight: 800; color: #0A84FF; }

/* ----------------------------------------------------------------------------
   Cerca cliente globale (quicksearch) — barra in sidebar + menu flottante.
   Token e componenti riusati: .av-circle, --accent-soft, --shadow-pop.
   ---------------------------------------------------------------------------- */
.qs { padding: 12px 14px 4px; flex-shrink: 0; }
.qs-field {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 11px;
  border: 1px solid var(--hair); border-radius: 11px;
  background: var(--surface-2);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.qs-field.is-focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qs-ico { color: var(--text-3); flex-shrink: 0; }
.qs-field input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: 13px; color: var(--text); font-family: inherit;
}
.qs-kbd {
  font-size: 10px; color: var(--text-3); flex-shrink: 0;
  border: 1px solid var(--hair); border-radius: 5px; padding: 1px 5px;
}

/* Menu flottante: position:fixed (posizionato via JS) → eccede la sidebar
   (overflow:hidden) e si sovrappone alla sezione corrente. */
.qs-menu {
  position: fixed; z-index: 1200;
  max-width: 360px; max-height: 70vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px 0;
}
.qs-rhead {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); padding: 9px 14px 5px;
}
.qs-res {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
}
.qs-res.is-hl { background: var(--accent-soft); }
.qs-res-body { min-width: 0; }
.qs-nm { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-em { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-empty { padding: 14px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.qs-foot {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; margin-top: 4px;
  border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--text-3);
}
.qs-kbd2 {
  display: inline-block; font-size: 10px;
  border: 1px solid var(--hair); border-radius: 5px; padding: 0 4px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;          /* permette lo scroll interno in flex column */
  overflow-y: auto;
  padding: 8px 10px;
}

.nav-section { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
/* Macro-categorie comprimibili: la label è cliccabile, il chevron ruota. */
.nav-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); padding: 12px 14px 4px;
  cursor: pointer; user-select: none;
}
.nav-label:hover { color: var(--text-2); }
.nav-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.nav-chevron { color: var(--text-3); flex-shrink: 0; transition: transform 0.15s ease; }
.nav-section.is-collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section.is-collapsed .sidebar-item { display: none; }
.nav-section:first-of-type .nav-label { padding-top: 6px; }

.sidebar-item {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-2);
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 11px;
}

.sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-item.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
[data-theme="dark"] .sidebar-item.is-active { color: var(--accent); }

/* Icone Tabler inline: stroke = currentColor, seguono lo stato della voce */
.nav-ico { flex-shrink: 0; color: var(--text-3); }
.sidebar-item.is-active .nav-ico { color: var(--accent-dark); }
[data-theme="dark"] .sidebar-item.is-active .nav-ico { color: var(--accent); }

.sidebar-item .emo {
  font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; flex-shrink: 0;
}
/* Sidebar count (brief Step 6): pill --surface-2 + --text-2 tabular-nums. */
.sidebar-item .count {
  font-variant-numeric: tabular-nums; margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.sidebar-item.is-active .count { background: var(--surface); color: var(--accent-dark); }
[data-theme="dark"] .sidebar-item.is-active .count { background: var(--surface-2); color: var(--accent); }

/* Placeholder "presto": non cliccabili, smorzati */
.sidebar-item.soon { color: var(--text-3); cursor: default; }
.sidebar-item.soon:hover { background: transparent; color: var(--text-3); }
.sidebar-item.soon .soon-tag {
  margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}

/* Footer inchiodato in basso, staccato dal corpo con --surface-2. */
.sidebar-foot {
  flex-shrink: 0;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* Identità utente: avatar iniziali + nome + badge ruolo */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.user-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role { align-self: flex-start; }   /* eredita il pill .env-tag */

.clock {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--text-2); margin-bottom: 10px;
}
.clock-ico { color: inherit; }
.clock .date { color: var(--text); font-weight: 500; }

/* Controlli footer leggeri (no bottoni pieni): separati da una hairline, così
   il blocco utente resta protagonista e l'orario secondario. */
.foot-controls {
  border-top: 1px solid var(--hair);
  margin-top: 4px;
  padding-top: 8px;
}
.foot-row {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  padding: 6px 8px;
  transition: background 0.15s;
}
/* Modalità scura: riga icona+label a sinistra, switch a destra */
.foot-theme { justify-content: space-between; color: var(--text-2); font-weight: 500; }
.foot-theme .tm-left { display: inline-flex; align-items: center; gap: 8px; }
.foot-theme .mk-switch { margin-left: auto; }
.foot-moon { color: var(--accent-2); }
.foot-theme:hover { background: var(--surface); }
/* Esci: riga rossa leggera, feedback al passaggio */
.foot-logout { justify-content: flex-start; color: var(--rose-text); font-weight: 600; }
[data-theme="dark"] .foot-logout { color: var(--rose); }
.foot-logout .nav-ico { color: inherit; }
.foot-logout:hover { background: var(--rose-soft); }
.foot-logout:active { transform: scale(.99); }

/* ----- Componente switch riutilizzabile on/off (.mk-switch) ----- */
.mk-switch {
  position: relative; flex-shrink: 0;
  width: 42px; height: 25px; border-radius: 999px;
  background: rgba(120,128,144,0.45);     /* OFF: track grigio (light + dark) */
  transition: background 0.2s ease;
}
.mk-switch-knob {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.2s ease;
}
.mk-switch.is-on { background: var(--accent-grad); }   /* ON: gradiente Cobalt */
.mk-switch.is-on .mk-switch-knob { transform: translateX(17px); }
/* Variante piccola per il footer (la .mk-switch base resta intatta per i form) */
.mk-switch--sm { width: 38px; height: 22px; }
.mk-switch--sm .mk-switch-knob { width: 18px; height: 18px; top: 2px; left: 2px; }
.mk-switch--sm.is-on .mk-switch-knob { transform: translateX(16px); }

.app-main {
  flex: 1;
  min-width: 0;     /* evita overflow di figli larghi */
  background: transparent;
}

/* ----- PAGE generic ----- */

.page {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;   /* full-width fino a 1600px, poi centra */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* L3 — testata uniforme: titolo+sottotitolo a sinistra, azioni a destra */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Sezioni Impostazioni (Servizi/Calendari): bottone primario allineato in alto
   col titolo + respiro sotto l'header prima della tabella (segnalazione pilot). */
.impost-section .page-header {
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-header h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-header > div:first-child { min-width: 0; }
.page-header .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----- BOTTONI ----- */

.btn-primary {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent-grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: filter .15s ease, transform .15s var(--spring, ease), box-shadow .15s ease;
}

.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(.25); }

/* Danger: stessa famiglia visiva di .btn-ghost (bianco + hairline + ombra),
   ma in tinta rose (hairline rosa-soft, testo rose). Hover fill soft, non più
   solid invertito (coerente con regola brief "no fill pieno decorativo"). */
.btn-danger {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  color: var(--rose-text);
  border: 1px solid var(--rose-soft);
  border-radius: 12px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--dur-fast, .15s) ease,
              border-color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease);
}
[data-theme="dark"] .btn-danger { color: var(--rose); }
.btn-danger:hover { background: var(--rose-soft); border-color: var(--rose); }
.btn-danger:active { transform: scale(.97); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* .btn-pay — azione che CHIUDE positivamente il flusso (Segna pagato): pieno
   verde --positive, gemello di .btn-primary ma in tinta positiva. Inchiostro
   scuro su verde (come #fff su gradiente primario): on-color, vale in entrambi i temi. */
.btn-pay {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--positive);
  color: #062b14;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--positive-glow);
  transition: filter .15s ease, transform .15s var(--spring, ease), box-shadow .15s ease;
}
.btn-pay:hover { filter: brightness(1.05); }
.btn-pay:active { transform: scale(.97); }
.btn-pay:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(.25); }

/* .btn-soft — azione che TORNA indietro non distruttiva (Sblocca): contorno
   tenue, trasparente, testo secondario. Più leggera di .btn-ghost. */
.btn-soft {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease,
              border-color var(--dur-fast, .15s) ease,
              color var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease);
}
.btn-soft:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--text); }
.btn-soft:active { transform: scale(.97); }
.btn-soft:disabled { opacity: 0.5; cursor: not-allowed; }

/* Pulsanti azione Compensi: icona inline + label, spaziatura tra azioni della
   stessa riga. La dimensione resta governata da .btn-sm. */
.btn-comp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: middle; }
.btn-comp .ico { font-size: 12px; line-height: 1; }
.btn-comp + .btn-comp { margin-left: 6px; }

/* ----- LISTA CLIENTI cliccabile (page-clienti) ----- */

#clienti-page-list .list-item {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

#clienti-page-list .list-item:hover {
  border-color: var(--accent);
  background: var(--surface);
}

/* ----- MODALE ----- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;   /* rete di sicurezza: niente sfori orizzontali */
}
/* modale Team: form più denso → un filo più larga */
#modal-team .modal-card { max-width: 640px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.btn-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}

.btn-close:hover { color: var(--text); }

/* ----- FORM grid (dentro modale) ----- */

.form-grid {
  display: grid;
  /* minmax(0,1fr): senza il min 0 le colonne non si restringono sotto la
     dimensione del contenuto → select/option lunghi sforavano la card. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 24px 28px 20px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  gap: 6px;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
  resize: vertical;
  /* niente overflow del campo oltre la colonna/card (select con testo lungo) */
  min-width: 0;
  max-width: 100%;
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.form-grid .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 400;
  font-size: 14px;
}

.form-grid .checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.form-grid input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

/* Pallino colore servizio in lista */
.servizio-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1);
}

/* ----- CALENDARIO: servizi checks (multi/singolo a seconda del tipo) ----- */

.servizi-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}

.servizi-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  padding: 4px 0;
}

.servizi-checks label.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.servizi-checks input { cursor: pointer; }

/* helper "grigino" sotto un campo (es. netto/imponibile live) */
.field-hint { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 4px; }

/* Listino — Tipo guidato (macro + sotto-scelta). Segmenti Cobalt: selezionato
   con --accent-soft. Token riusati, zero stili fuori brand. */
.lst-tipo { display: flex; flex-direction: column; gap: 8px; }
.lst-tipo-label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.lst-seg { display: flex; gap: 8px; }
.lst-seg-opt {
  flex: 1; min-width: 0;
  border: 1px solid var(--hair); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2);
  padding: 10px 12px; text-align: center; cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.lst-seg-opt:hover { border-color: var(--hair-strong); color: var(--text); }
.lst-seg-opt.is-sel {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.lst-seg-d { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.lst-seg-opt.is-sel .lst-seg-d { color: var(--accent-dark); }
[data-theme="dark"] .lst-seg-opt.is-sel,
[data-theme="dark"] .lst-seg-opt.is-sel .lst-seg-d { color: var(--accent); }
.lst-sub {
  margin-top: 2px; padding: 12px;
  border: 1px dashed var(--hair-strong); border-radius: var(--r-md);
  background: var(--surface-2);
}
.lst-sub-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); margin-bottom: 8px;
}

/* Price List — "Servizi inclusi": chip selezionabili a sinistra, in fila e a capo.
   flex-direction/justify-content ESPLICITI per vincere l'eredità di .form-grid label. */
.serv-chips {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.serv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.serv-chip:hover { border-color: var(--border-strong); color: var(--text); }
.serv-chip.selected {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark);
}
[data-theme="dark"] .serv-chip.selected { color: var(--accent); }
/* Pill disabilitata: servizio già in un altro calendario (Calendari modal) */
.serv-chip:disabled,
.serv-chip.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-3);
}
.serv-chip:disabled:hover,
.serv-chip.is-disabled:hover { border-color: var(--border); color: var(--text-3); }
.serv-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.serv-name { line-height: 1; }

/* Tag servizio inline nella tabella Calendari (dot colore + nome) */
.cal-serv-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-right: 4px; }
.cal-serv-tag .serv-dot { border: 1px solid rgba(0,0,0,0.1); }

/* Sezione slot (visibile solo tipo=slot) */
.slot-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.form-grid-inner label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;   /* in grid evita che valori lunghi (P.IVA/date) sfondino la colonna */
}

/* campi interni: stesso look del form principale (surface-2 + focus accent) */
.form-grid-inner input,
.form-grid-inner select,
.form-grid-inner textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  min-width: 0;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.form-grid-inner input:focus,
.form-grid-inner select:focus,
.form-grid-inner textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
/* checkbox-row che occupa l'intera riga della griglia interna */
.form-grid-inner .checkbox-row.inner-full { grid-column: 1 / -1; flex-direction: row; align-items: center; }

.giorni-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.giorni-check-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.giorni-check-row label:has(input:checked) {
  background: rgba(10, 132, 255,0.12);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.giorni-check-row input { display: none; }

.slot-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slot-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.slot-pill {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--text);
}

/* ============================================================
   PAGINA CALENDARIO (griglia settimanale alla Bodytec)
   ============================================================ */

.calendario-page { padding: 24px 28px; }

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-nav-btn {
  font-size: 18px;
  padding: 4px 12px;
  line-height: 1;
}

.cal-range-label {
  font-family: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.cal-range-label:hover { background: var(--surface-2); border-color: var(--border); }

.cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* date picker custom (calendarietto a tema) */
.cal-picker-wrap { position: relative; }
.cal-picker {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 12px; width: 248px;
}
.cal-pick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-pick-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.cal-pick-nav { font-family: inherit; font-size: 16px; line-height: 1; background: transparent; border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; color: var(--text-2); }
.cal-pick-nav:hover { background: var(--surface-2); color: var(--text); }
.cal-pick-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-pick-week span { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; }
.cal-pick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-pick-empty { height: 30px; }
.cal-pick-day {
  height: 30px; border: 1px solid transparent; border-radius: 7px; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--text); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cal-pick-day:hover { background: var(--surface-2); }
.cal-pick-day.is-today { border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
[data-theme="dark"] .cal-pick-day.is-today { color: var(--accent); }
.cal-pick-day.is-sel { background: var(--accent-grad); color: #fff; font-weight: 600; border-color: var(--accent); }
/* Selettore giorno: il testo resta bianco su grad (no override scuro). */

/* toggle Giorno/Settimana */
/* Segmented control (brief Step 6): track grigio --surface-3 radius 12 padding 3;
   segmento attivo = bianco + --shadow-card (effetto "tile sollevata"). */
.cal-mode-toggle {
  display: inline-flex; gap: 0;
  background: var(--surface-3);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 3px;
}
.cal-mode-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  background: transparent; color: var(--text-2);
  border: none; padding: 6px 14px; border-radius: 9px;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.cal-mode-btn:hover { color: var(--text); }
.cal-mode-btn.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .cal-mode-btn { color: var(--text-2); }
[data-theme="dark"] .cal-mode-btn.is-active {
  background: var(--elevated);
  color: var(--text);
}

/* cerca cliente */
.cal-search { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 13px; color: var(--text-3); }
.cal-search input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; color: var(--text); min-width: 150px; }
/* Il bordo ora e' sul contenitore, non sull'input: senza questo il campo
   perderebbe l'evidenza di focus che aveva da .abb-f-input:focus. Vale anche
   per le tre ricerche che gia' usavano questo pattern e ne erano prive. */
.cal-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Variante per le barre filtri: l'input cresceva con flex:1 quando lo stile
   stava su di lui; ora a crescere deve essere il contenitore. */
.cal-search-grow { flex: 1; min-width: 180px; }
.cal-search-grow input { flex: 1; min-width: 0; }

/* barra filtri UNICA (chip servizio + calendario) */
.cal-filterbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px;
}
.cal-filt-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin-right: 2px; }

/* Pill nei filtri calendario: prima avevano dot+label appiccicati e
   padding stretto. Allargo gap a 7px (dot↔label) e padding orizzontale
   a 12px così respirano e sono coerenti col resto del design system. */
.cal-filterbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
}
.cal-filterbar .chip .cal-leg-dot { width: 11px; height: 11px; flex-shrink: 0; }
.cal-filterbar .chip:hover { border-color: var(--accent-line, var(--accent)); }
/* stato attivo: bordo accent + sfondo soft, mantengo testo leggibile */
.cal-filterbar .chip.active {
  background: var(--accent-soft, rgba(10, 132, 255,.10));
  border-color: var(--accent);
  color: var(--text);
}

/* legenda */
.cal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cal-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.cal-leg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-leg-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); display: inline-block; }
.cal-leg-sep { width: 1px; height: 14px; background: var(--border); }
.cal-leg-done { opacity: 0.6; }

/* evidenza ricerca cliente sulle card */
.cal-event.is-dim { opacity: 0.28; }
.cal-event.is-match { box-shadow: 0 0 0 2px var(--accent); z-index: 4; }

.cal-grid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cal-empty {
  padding: 40px;
  text-align: center;
}

.cal-empty p { margin: 0 0 12px; }

/* ---- Geometria ---- */
:root {
  --cal-px-per-min: 1.6;     /* 1 minuto = 1.6 pixel */
  --cal-axis-w: 56px;        /* larghezza colonna orari */
  --cal-head-h: 44px;        /* altezza header giorno */
}

/* Header riga giorni */
.cal-head {
  display: flex;
  border-bottom: 1px solid var(--border);
  min-height: var(--cal-head-h);   /* cresce se compaiono le chip nome-calendario */
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-head-axis {
  width: var(--cal-axis-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.cal-head-day {
  flex: 1;
  min-width: 0;                     /* consente alle chip figlie di troncare (ellipsis) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  /* Confine GIORNO marcato (2px): più forte del tratteggio corsie (cambio servizio). */
  border-right: 2px solid var(--border-strong);
  color: var(--text);
}
.cal-head-day-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Zebra leggerissima sulle colonne giorno pari (l'asse è il 1° figlio → l'alternanza
   non si sfasa). Esclude .today, che mantiene il suo evidenziatore. */
.cal-head-day:nth-child(even):not(.today) { background: var(--cal-zebra); }
.cal-head-day:last-child { border-right: none; }
.cal-head-day.today { background: rgba(10, 132, 255, 0.10); color: var(--accent-dark); }
.cal-head-day .day-num {
  font-size: 16px;
  font-weight: 700;
}

/* Corpo (scrollabile verticalmente) */
.cal-body {
  display: flex;
  position: relative;
  overflow-y: auto;
  max-height: 70vh;
}

/* Asse orario sinistro */
.cal-axis {
  width: var(--cal-axis-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  position: relative;
  background: var(--surface);
}
.cal-axis-tick {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Colonna giorno */
.cal-day {
  flex: 1;
  position: relative;
  /* Confine GIORNO marcato (2px), coerente con l'header: gerarchia chiara
     rispetto al tratteggio tenue tra corsie servizio. */
  border-right: 2px solid var(--border-strong);
}
/* Zebra coerente con l'header (asse = 1° figlio del .cal-body → niente sfasamento).
   Sottilissima, sotto le corsie/eventi (trasparenti) e senza coprire i loro colori. */
.cal-day:nth-child(even):not(.today) { background: var(--cal-zebra); }
.cal-day:last-child { border-right: none; }
.cal-day.is-closed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 6px, transparent 6px, transparent 12px);
  pointer-events: none;
}

/* Lane (1 per servizio dentro la colonna giorno) */
.cal-lanes {
  position: absolute;
  inset: 0;
  display: flex;
}
.cal-lane {
  flex: 1;
  position: relative;
  /* Separatore CORSIA (cambio servizio): tratteggio tenue su hairline, chiaramente
     più debole del confine giorno (2px solido). */
  border-right: 1px dashed var(--hair);
}
.cal-lane:last-child { border-right: none; }

/* Chip nome-calendario, una per corsia, allineata alle lane del body sotto.
   Colore derivato dal servizio (--svc, impostata inline per chip): tinta di
   sfondo tenue + testo tirato verso il colore servizio, così resta leggibile
   e riconoscibile in entrambi i temi. Compare solo con >1 calendario in vista. */
.cal-day-services {
  display: flex;
  gap: 3px;
  width: 100%;
  padding: 0 3px;
}
.cal-service-tag {
  flex: 1;
  min-width: 0;                    /* indispensabile perché l'ellipsis scatti in flex */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--svc, #0A84FF) 18%, transparent);
  color: color-mix(in srgb, var(--svc, #0A84FF) 72%, var(--text));
  border: 1px solid color-mix(in srgb, var(--svc, #0A84FF) 32%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Riga orizzontale per ogni ora intera */
.cal-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

/* Slot zone (tipo "a slot") — §5b.1 redesign.
   Default: trasparente (slot vuoto pulito a riposo). Solo gli slot
   vuoti si illuminano all'hover mostrando orario (::before, attr
   data-slot) e un "+" (::after), modellato sul legacy
   (codice/style.css 500-527). Slot occupato/pieno: nessun hover
   accentuato, badge "occ/posti" visibile come info. */
.cal-slot-zone {
  position: absolute;
  left: 2px;
  right: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  z-index: 2;
}
/* Hover SOLO su slot vuoti (data-occ="0") non pieni. Selettore esplicito
   come da correzione Jack: targetta lo slot VUOTO, non occupato/pieno. */
/* Highlight hover col colore del servizio (--svc, ereditato dalla .cal-lane).
   Stesse opacità del vecchio colore fisso, ma derivate dall'hex del servizio:
   così l'evidenza dice subito "questo è il calendario di quel servizio", e
   funziona in entrambi i temi senza due palette fisse. Slot pieno invariato. */
.cal-slot-zone[data-occ="0"]:not(.is-full):hover {
  background: color-mix(in srgb, var(--svc, #0A84FF) 9%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--svc, #0A84FF) 45%, transparent);
}
.cal-slot-zone[data-occ="0"]:not(.is-full):hover::before {
  content: attr(data-slot);
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: color-mix(in srgb, var(--svc, #0A84FF) 85%, transparent);
  font-weight: 600;
  pointer-events: none;
  letter-spacing: 0.03em;
}
.cal-slot-zone[data-occ="0"]:not(.is-full):hover::after {
  content: '+';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: color-mix(in srgb, var(--svc, #0A84FF) 60%, transparent);
  font-weight: 700;
  pointer-events: none;
}

/* capienza occupati/posti sullo slot + stato pieno (emessa solo se occ>0) */
.cal-slot-cap { position: absolute; right: 3px; bottom: 2px; font-size: 9px; color: var(--text-3); pointer-events: none; }
.cal-slot-zone.is-full { background: var(--surface-3); border-style: solid; border-color: var(--border-strong); }
.cal-slot-zone.is-full:hover { background: var(--surface-3); }
.cal-slot-zone.is-full .cal-slot-cap { color: var(--rose-text); }

/* Drag ghost rect sulla fascia cal "aperto" (§5b.2).
   Eredita --svc dalla .cal-open-band parent (impostata inline dal JS) →
   il ghost è già colorato come il servizio mentre l'utente trascina. */
.cal-open-drag-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  background: color-mix(in srgb, var(--svc, #0A84FF) 26%, transparent);
  border: 1px dashed color-mix(in srgb, var(--svc, #0A84FF) 75%, transparent);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
}
/* Card prenotazione (brief Step 7): tint del colore servizio come sfondo,
   testo colorato scuro, niente stanghetta border-left. */
/* Overlay turni staff nel Calendario prenotazioni (toggle "👁 Turni").
   Bordo tratteggiato + fondo soft nel colore del trainer (inline), SOTTO le
   card (z-index 1) e non cliccabile: le prenotazioni restano in primo piano. */
.cal-turno-overlay {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed var(--border-strong);   /* colore impostato inline dal JS */
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.15;
  color: var(--text-2);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cal-turno-overlay .cto-time { font-size: 9.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.cal-turno-overlay .cto-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-event {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 500;
  z-index: 3;
  cursor: pointer;
  overflow: hidden;
  color: var(--accent-dark);
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
  transition: background var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease;
}
[data-theme="dark"] .cal-event { color: var(--accent); }
.cal-event:hover { background: rgba(10, 132, 255, 0.18); border-color: var(--accent); }

/* Sessione aperta = stato urgente sulla card: tint rose, testo rose-text */
.cal-event.is-open {
  background: var(--rose-soft);
  border-color: rgba(255, 59, 48, 0.35);
  color: var(--rose-text);
}
[data-theme="dark"] .cal-event.is-open { color: var(--rose); }
.cal-event.is-open:hover { background: rgba(255, 59, 48, 0.18); border-color: var(--rose); }

/* Card passata/completata e posto bloccato */
.cal-event.is-done { opacity: 0.5; }
.cal-event.is-blocked {
  background: var(--surface-3);
  border-color: var(--hair-strong);
  color: var(--text-2);
  cursor: default;
  z-index: 2;
}
.cal-event.is-blocked:hover { background: var(--surface-3); }
.cal-event-time {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.cal-event-client {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.cal-event-open-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
  margin-left: 4px;
  flex-shrink: 0;
}

/* PROVA: card viola + badge "P" (gratuita e prefissata, non aperta) */
.cal-event.is-prova {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.6);
  border-left-color: var(--violet);
}
.cal-event.is-prova:hover {
  background: rgba(124, 58, 237, 0.18);
}
.cal-event-prova-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--violet);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}
.existing-row.is-prova {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.3);
}

/* Fascia "aperto" (cal aperto) — neutra a riposo, leggero hover che la
   illumina (stesso principio degli slot vuoti del cal a slot). Il colore
   del servizio non vive qui: appare solo nel ghost del drag
   (.cal-open-drag-ghost) e nella card prenotazione creata. */
.cal-open-band {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: background .12s ease, outline-color .12s ease;
}
.cal-open-band:hover {
  background: var(--surface-2);
  outline: 1px dashed var(--hair, var(--border));
  outline-offset: -1px;
}
[data-theme="dark"] .cal-open-band:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Now-line */
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--rose);
  z-index: 5;
  pointer-events: none;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 8px;
  height: 8px;
  background: var(--rose);
  border-radius: 50%;
}

/* ----- AUTOCOMPLETE (cliente nella modale prenotazione) ----- */

.autocomplete-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.autocomplete-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.is-active {
  background: rgba(10, 132, 255,0.08);
  color: var(--accent-dark);
}

.autocomplete-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.autocomplete-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ----- ABBONAMENTI OPZIONI (radio o singola riga in modale prenotazione) ----- */

.abb-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.abb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.abb-option:hover { border-color: var(--accent); background: var(--surface); }

.abb-option.is-selected {
  border-color: var(--accent);
  background: rgba(10, 132, 255,0.06);
}

.abb-option-title { font-weight: 500; flex: 1; }
.abb-option-detail { font-size: 12px; color: var(--text-muted); }

/* ----- Lista prenotazioni esistenti dentro la modale slot ----- */

.existing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.existing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.existing-row.is-open {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.existing-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.existing-row-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; }
.existing-row-detail { font-size: 12px; color: var(--text-muted); }

.existing-row-actions {
  display: flex;
  gap: 6px;
}

/* Mini: surface-2 + hairline + radius ~10 (brief). Le varianti semantiche
   (absorb/paga/congela/riattiva/rem) usano TINT del colore semantico invece
   di border-color saturo (coerente con "no stanghette/fill pieni"). */
/* Elimina come icona sola: quadrato compatto, ghost con colore danger (--rose,
   la variabile danger reale dell'app; --border-danger citata nel brief non
   esiste). L'hover pieno arriva da .btn-mini.btn-rem:hover già presente. */
.btn-mini.icon-only { padding: 6px; line-height: 0; }
.btn-mini.icon-only .mk-ico { width: 15px; height: 15px; }
.btn-mini.btn-rem.icon-only { color: var(--rose-text); }
[data-theme="dark"] .btn-mini.btn-rem.icon-only { color: var(--rose); }
/* icona di stato dentro il badge "Aperta" */
.pren-badge .mk-ico { width: 11px; height: 11px; vertical-align: -1px; }

.btn-mini {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  color: var(--text);
  transition: background var(--dur-fast, .15s) ease,
              border-color var(--dur-fast, .15s) ease,
              color var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease);
}
.btn-mini:hover { background: var(--surface-3); border-color: var(--hair-strong); }
.btn-mini:active { transform: scale(.97); }

/* Varianti semantiche: tint soft + testo del colore semantico, niente bordo saturo */
.btn-mini.act-paga {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-dark);
}
[data-theme="dark"] .btn-mini.act-paga { color: var(--accent); }
.btn-mini.act-paga:hover { border-color: var(--accent-line); }

/* Assorbi — Opzione C: gradiente pieno cobalt, classe condivisa (Avvisi + slot
   calendario). Risalto dal colore, NON dalla dimensione: padding/altezza
   restano quelli di .pill / .btn-mini di riga. */
.btn-absorb,
.pill.btn-absorb,
.btn-mini.btn-absorb {
  background: var(--accent-grad);
  border: 0;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn-absorb:hover,
.pill.btn-absorb:hover,
.btn-mini.btn-absorb:hover { filter: brightness(1.05); background: var(--accent-grad); border: 0; }
[data-theme="dark"] .btn-absorb,
[data-theme="dark"] .pill.btn-absorb,
[data-theme="dark"] .btn-mini.btn-absorb { color: #fff; }
.btn-absorb:disabled { opacity: 0.5; filter: grayscale(.2); }

.btn-mini.act-congela,
.btn-mini.act-riattiva {
  background: var(--blue-soft);
  border-color: transparent;
  color: var(--blue);
}
.btn-mini.act-congela:hover,
.btn-mini.act-riattiva:hover { border-color: var(--blue); }

.btn-mini.btn-rem {
  background: var(--rose-soft);
  border-color: transparent;
  color: var(--rose-text);
}
[data-theme="dark"] .btn-mini.btn-rem { color: var(--rose); }
.btn-mini.btn-rem:hover { border-color: var(--rose); }

/* Capacity badge */
.pren-slot-pieno { color: var(--danger); font-weight: 600; }
.pren-slot-libero { color: var(--accent-dark); font-weight: 600; }

/* ----- INPUT readonly (campi auto-popolati) ----- */

.form-grid input[readonly] {
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ----- BOX RIEPILOGO (dati denormalizzati dal listino) ----- */

.readonly-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.readonly-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.readonly-label {
  color: var(--text-muted);
  font-weight: 500;
}

.readonly-value {
  color: var(--text);
  font-weight: 500;
}

/* ----- FILTER BAR (radio pill) ----- */

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.radio-pill:hover { border-color: var(--accent); color: var(--text); }

.radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-pill:has(input:checked) {
  background: rgba(10, 132, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* ----- BADGE stato abbonamento ----- */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Stati abbonamento: "Attivo" = positivo (verde Cobalt) */
.badge-active   { background: var(--positive-soft); color: var(--positive-text); }
[data-theme="dark"] .badge-active { color: var(--positive); }
.badge-expired  { background: var(--rose-soft); color: var(--rose-text); }
.badge-inactive { background: var(--surface-3); color: var(--text-muted); }

/* Stato prenotazione: "Confirmed" rest = blu (info), "Present" = positivo */
.badge-confirmed { background: var(--blue-soft); color: var(--blue); }
.badge-present   { background: var(--positive-soft); color: var(--positive-text); }
[data-theme="dark"] .badge-present { color: var(--positive); }
/* "Assente" = attenzione → amber-soft + amber-text (uniformato Step 5) */
.badge-absent    { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .badge-absent { color: var(--amber); }
/* "Annullato" = neutro/archiviato → surface-3 + muted */
.badge-cancelled { background: var(--surface-3); color: var(--text-muted); }

/* ----- AZIONI STATO PRENOTAZIONE ----- */

.state-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.state-actions-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 4px;
}

.btn-state {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-state:hover { background: var(--surface); }

.btn-state.is-active {
  border-width: 2px;
  padding: 5px 11px;
}

.state-confirmed.is-active { border-color: var(--blue); color: var(--blue); background: rgba(59, 130, 246, 0.06); }
/* "Presente" = stato positivo (Team Turni) */
.state-present.is-active   { border-color: var(--positive); color: var(--positive-text); background: var(--positive-soft); }
[data-theme="dark"] .state-present.is-active { color: var(--positive); }
.state-absent.is-active    { border-color: var(--amber-text); color: var(--amber-text); background: rgba(245, 158, 11, 0.06); }
.state-cancelled.is-active { border-color: var(--text-muted); color: var(--text-muted); background: var(--surface-3); }

/* ----- LISTA PRENOTAZIONI (riga "agenda" compatta) ----- */

.pren-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pren-row:hover { border-color: var(--accent); background: var(--surface); }

.pren-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 110px;
  display: flex;
  flex-direction: column;
}

.pren-time small {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
}

.pren-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pren-main .pren-cliente { font-size: 14px; font-weight: 500; }
.pren-main .pren-sub { font-size: 12px; color: var(--text-muted); }

.full-width { grid-column: 1 / -1; }

/* ----- PROVE: badge stato, riga in evidenza, griglia azioni ----- */

/* Prova "Aperta" = info (lavoro in corso, non urgente) → blue-soft + blue */
.badge-prova-aperta     { background: var(--blue-soft); color: var(--blue); }
/* Prova "Convertita" = esito positivo */
.badge-prova-convertita { background: var(--positive-soft); color: var(--positive-text); }
[data-theme="dark"] .badge-prova-convertita { color: var(--positive); }
/* Prova "Persa" = archiviato/neutro → surface-3 + muted */
.badge-prova-persa      { background: var(--surface-3); color: var(--text-muted); }

.prove-row-overdue {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.04);
}

.prove-row-overdue .item-meta {
  color: var(--danger);
  font-weight: 600;
}

/* riga tabella prova in ritardo */
table.tbl tbody tr.prove-row-overdue { background: var(--rose-soft); }
table.tbl tbody tr.prove-row-overdue:hover { background: rgba(225, 29, 72, 0.12); }

/* unità nelle KPI hero (es. % del tasso conversione) */
.kpi-unit { font-size: 0.55em; font-weight: 600; color: var(--text-3); margin-left: 2px; }

/* badge urgenza follow-up */
.urg { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.urg-over  { background: var(--rose-soft);  color: var(--rose-text); }
.urg-today { background: var(--amber-soft); color: var(--amber-text); }
.urg-soon  { background: var(--surface-3);  color: var(--text-3); }

/* link WhatsApp inline */
.wa-link { text-decoration: none; margin-left: 2px; opacity: 0.85; }
.wa-link:hover { opacity: 1; }

/* note troncate in tabella */
.note-trunc { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--text-2); cursor: help; }

/* bottone compatto (azioni rapide follow-up) */
.btn-sm { font-size: 12px; padding: 5px 10px; }

/* ===== Pannello "Follow-up in sospeso" =====
   brief Step 8: no stanghetta border-left di stato → tint amber-soft. */
.followup-panel {
  background: var(--amber-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.followup-panel.is-empty { background: var(--accent-soft); }
.followup-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.followup-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.followup-ok { margin: 4px 0; color: var(--accent-dark); font-size: 14px; }
[data-theme="dark"] .followup-ok { color: var(--accent); }

.fu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border);
}
.fu-row + .fu-row { margin-top: 6px; }
.fu-row:hover { background: var(--surface-2); }
.fu-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fu-name { font-weight: 600; color: var(--text); }
.fu-serv { font-size: 12px; color: var(--text-3); }
.fu-tel { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.fu-actions { display: flex; gap: 6px; flex-shrink: 0; }

.prova-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.prova-action-richiamo {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.prova-action-richiamo input[type="date"] {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 18px;
}

/* Footer dei modali NON-form (modal-actions figlio diretto della card, senza
   l'inset ereditato da .form-grid): stesso inset orizzontale di header/corpo
   (28px) + respiro sotto, così i bottoni non toccano i bordi. I .full-width
   vivono dentro la grid (inset già presente) e NON vanno toccati, sennò
   raddoppiano. */
.modal-actions:not(.full-width) {
  padding: 16px 28px 18px;
}

.actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ============================================================================
   DASHBOARD WIDGETS (Fase 2) — LIVE OGGI · Funnel Prove · Mix servizi · Top listini
   Tutto via token → coerente in light/dark. Donut/funnel in CSS/SVG vanilla.
   ============================================================================ */
.now-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; position: relative; overflow: hidden;
}
.now-strip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--violet) 100%);
}
.now-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.now-cell .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.now-cell .lbl .live { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 6px var(--positive); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.now-cell .val { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-cell .val .secondary { color: var(--text-3); font-weight: 400; margin-left: 6px; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
.now-cell .val.is-empty { color: var(--text-3); font-size: 15px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.widget {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-card); min-width: 0;
}
.widget-wide { grid-column: 1 / -1; }
.widget-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.widget-head h3 { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: 0; }
.widget-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* Funnel Prove */
.funnel { display: flex; align-items: stretch; gap: 6px; }
.funnel-step { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; }
.funnel-step.s1 { border-color: var(--violet); }
.funnel-step.s2 { border-color: var(--blue); }
.funnel-step.s3 { border-color: var(--accent); }
.funnel-step .fval { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; color: var(--text); }
.funnel-step .flbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 2px; }
.funnel-arrow { display: flex; align-items: center; color: var(--text-3); font-size: 13px; }
.funnel-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-2); display: flex; justify-content: space-between; gap: 10px; }
.funnel-foot .lost { color: var(--rose-text); }

/* Donut Mix servizi (conic-gradient vanilla) */
.donut-wrap { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.donut { width: 120px; height: 120px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut::after { content: ''; position: absolute; inset: 26px; background: var(--surface); border-radius: 50%; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut-center .dc-val { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.025em; }
.donut-center .dc-lbl { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.donut-legend .leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.donut-legend .leg .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .leg .leg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-legend .leg .leg-val { font-variant-numeric: tabular-nums; margin-left: auto; color: var(--text-3); font-size: 11.5px; flex-shrink: 0; }

/* Top listini barlist */
.barlist { display: flex; flex-direction: column; gap: 10px; }
.barlist .bar-row { display: grid; grid-template-columns: 150px 1fr 36px; gap: 10px; align-items: center; font-size: 12.5px; }
.barlist .bar-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barlist .bar-track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.barlist .bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); min-width: 4px; }
.barlist .bar-val { font-variant-numeric: tabular-nums; color: var(--text-3); text-align: right; font-size: 11.5px; }

@media (max-width: 760px) {
  .now-strip { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .barlist .bar-row { grid-template-columns: 110px 1fr 32px; }
}

/* ============================================================================
   AVVISI / SCADENZE
   ========================================================================== */

/* Pallino arancione sulla voce sidebar quando ci sono alert */
.sidebar-item .nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  margin-left: auto; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--amber-soft);
}

/* ----- Pagina Avvisi: toolbar ----- */
.avvisi-toolbar { display: flex; gap: 8px; }

/* ----- Accordion ----- */
.avvisi-body { display: flex; flex-direction: column; gap: 12px; }

.avviso-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.avviso-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.avviso-sec-head:hover { background: var(--surface-2); }
/* Categoria: volutamente più leggera della riga cliente sotto (14px), così la
   gerarchia si legge. Il contatore .avviso-count resta a fianco. */
.avviso-sec-title {
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-2);
}
.avviso-chevron {
  color: var(--text-3); font-size: 12px;
  transition: transform 0.15s ease;
}
.avviso-sec.is-collapsed .avviso-chevron { transform: rotate(-90deg); }
.avviso-sec.is-collapsed .avviso-sec-body { display: none; }

.avviso-count {
  margin-left: auto;
    font-size: 12px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 9px;
  min-width: 24px; text-align: center;
}
.avviso-count.is-urgent { background: var(--rose-soft); color: var(--rose-text); }

.avviso-sec-body {
  padding: 6px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}

/* ----- Item con marker laterale 3px ----- */
.avviso-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
}
.avviso-item.tone-urgent { border-left-color: var(--rose); }
.avviso-item.tone-warn   { border-left-color: var(--amber); }
.avviso-item.tone-info   { border-left-color: var(--blue); }

/* main prende lo spazio in eccesso → nome/sottotitolo allineati a SINISTRA accanto
   all'avatar; le azioni restano a destra (niente nome centrato a metà riga). */
.avviso-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.avviso-item-title { font-weight: 500; font-size: 14px; }
.avviso-item-sub { font-size: 12px; color: var(--text-muted); }
.avviso-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* ----- Badge a token ----- */
.avviso-badge {
    font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.avviso-badge.tone-urgent { background: var(--rose-soft); color: var(--rose-text); }
.avviso-badge.tone-warn   { background: var(--amber-soft); color: var(--amber-text); }
.avviso-badge.tone-info   { background: var(--blue-soft); color: var(--blue); }

.avviso-go {
  font-size: 12px; font-weight: 500;
  color: var(--accent-dark);
  background: transparent; border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 10px; cursor: pointer;
  white-space: nowrap;
}
.avviso-go:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ----- Estratto Dashboard ----- */
.dash-avvisi { display: flex; flex-direction: column; gap: 14px; }
.dash-avvisi-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dash-avviso-group {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-avviso-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
}
.dash-avviso-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px;
  border-left: 3px solid var(--border-strong);
  padding-left: 8px;
}
.dash-avviso-row.tone-urgent { border-left-color: var(--rose); }
.dash-avviso-row.tone-warn   { border-left-color: var(--amber); }
.dash-avviso-row.tone-info   { border-left-color: var(--blue); }
.dash-avviso-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.dash-avviso-more { font-size: 11.5px; color: var(--text-3); }
.avviso-go-all { grid-column: 1 / -1; justify-self: start; }

/* ----- v2: strip KPI ----- */
.avvisi-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 4px 0 16px;
}
.avvisi-kpi-cell {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.avvisi-kpi-cell:hover { border-color: var(--accent); }
.avvisi-kpi-cell .kpi-val { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; color: var(--text); letter-spacing: -0.025em; }
.avvisi-kpi-cell .kpi-lbl { font-size: 12px; color: var(--text-2); }
/* Urgent (brief Step 8): no stanghetta → tint rose-soft + numero rose-text. */
.avvisi-kpi-cell.is-urgent { background: var(--rose-soft); }
.avvisi-kpi-cell.is-urgent .kpi-val { color: var(--rose-text); }
[data-theme="dark"] .avvisi-kpi-cell.is-urgent .kpi-val { color: var(--rose); }

/* ----- v2: Box OGGI hero ----- */
/* Oggi hero (brief Step 8): rimossa stanghetta rose di stato. La firma
   "urgente oggi" arriva dal contenuto (numero/badge), non da bordi colorati. */
.oggi-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.oggi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.oggi-head h3 { margin: 0; font-size: 15px; }
.oggi-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); flex-shrink: 0;
  animation: oggi-pulse 1.6s ease-in-out infinite;
}
@keyframes oggi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--rose-soft); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.oggi-list { display: flex; flex-direction: column; gap: 8px; }
.oggi-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.oggi-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oggi-row-title { font-weight: 500; font-size: 14px; }
.oggi-row-sub { font-size: 12px; color: var(--text-muted); }
.oggi-card-dash { margin-bottom: 0; }

/* ----- v2: avatar a iniziali ----- */
.avviso-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
    color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

/* item: aggiungo avatar a sinistra, badge+azioni a destra */
.avviso-item { gap: 10px; }
.avviso-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.avviso-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* NB: niente override di .avviso-item-right qui. La regola sopra (riga ~2377)
   la mette già in riga (row + align-items:center): badge e azioni stanno su
   un'unica linea. Prima qui c'era un flex-direction:column che impilava tutto
   sul desktop, mentre la media query mobile rimetteva row — responsive
   invertito. */

/* ----- v2: pill-button azioni ----- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pill:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pill:disabled { opacity: 0.5; cursor: default; }
.pill-go { color: var(--accent-dark); }
.pill-go:hover { border-color: var(--accent); background: var(--accent-soft); }
.pill-ok { color: var(--accent-dark); border-color: var(--accent); }
.pill-ok:hover { background: var(--accent-soft); }
.pill-wa { color: #25D366; border-color: rgba(37, 211, 102, 0.4); }
.pill-wa:hover { background: rgba(37, 211, 102, 0.10); border-color: #25D366; }
/* "Chiudi senza incasso": azione secondaria, tono neutro-attenuato (non è
   distruttiva come Elimina, ma non è nemmeno un'azione positiva). */
.pill-close { color: var(--text-3, var(--text-2)); }
.pill-close:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-2); }

/* ----- v2: micro-pulse sui badge urgenti ----- */
.avviso-badge.is-pulse { animation: badge-pulse 1.8s ease-in-out infinite; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (max-width: 760px) {
  /* La riga singola è ormai il default: su schermi stretti basta il wrap
     naturale di .avviso-item, niente struttura diversa dal desktop. */
  .avviso-item { flex-wrap: wrap; }
  .dash-avvisi-groups { grid-template-columns: 1fr; }
  .avvisi-kpi { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .oggi-pulse, .avviso-badge.is-pulse { animation: none; }
}

/* ============================================================================
   DASHBOARD v2 — integrazione legacy + novità (layout mock v6)
   Tutto via token → light/dark automatici. Niente librerie.
   Riusa classi esistenti: now-strip, funnel, donut, barlist, badge.
   ========================================================================== */

/* ----- TODAY BANNER (sezione OGGI, 5 card) ----- */
.today-banner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 14px;
}
.today-banner .title { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.today-banner .title strong { color: var(--text); }
.today-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* TODAY-CARD: stessa famiglia visiva di .kpi-hero (brief: tutte le card
   dashboard alla stessa elevazione). Sfondo bianco, ombra cobalt firma
   permanente, numero nero. Accensione data-driven warn/alert quando lo
   stato è reale. Niente border-left, niente fill pieno. */
.today-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card-cobalt);
  transition: box-shadow var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) var(--spring, ease);
}
.today-card.is-empty { opacity: 0.7; }
.today-card .lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 6px; }
.today-card .val { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; }
.today-card .sub { font-size: 10.5px; color: var(--text-3); margin-top: 6px; }
/* ACCENSIONE data-driven */
.today-card.warn  { background: rgba(255,159,10,.10); box-shadow: var(--shadow-card-warn); }
.today-card.warn  .val { color: var(--amber-text); }
[data-theme="dark"] .today-card.warn .val { color: var(--amber); }
.today-card.alert { background: rgba(255,59,48,.09); box-shadow: var(--shadow-card-alert); }
.today-card.alert .val { color: var(--rose-text); }
[data-theme="dark"] .today-card.alert .val { color: var(--rose); }

/* ----- PERIOD PILL ----- */
.period-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.period-pill { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; }
.period-pill button {
  font-family: inherit; font-size: 12px; font-weight: 500;
  background: transparent; color: var(--text-2); border: none;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.period-pill button:hover { color: var(--text); }
/* Pill periodo attiva → gradiente Cobalt (brief §5) */
.period-pill button.active { background: var(--accent-grad); color: #fff; font-weight: 600; box-shadow: var(--shadow-btn); }
/* Inattive nel dark = bianco (brief §7 contrasto): la distinzione attivo/
   inattivo la fa lo SFONDO (gradiente vs trasparente), non il colore testo. */
[data-theme="dark"] .period-pill button { color: var(--text); }
.period-label { font-size: 12.5px; color: var(--text-2); }
.period-label .pn { color: var(--text); font-weight: 600; }
.period-quarters { display: inline-flex; gap: 4px; }
.period-quarters button {
  font-family: inherit; font-size: 11.5px; font-weight: 500; background: var(--surface-2);
  color: var(--text-2); border: 1px solid var(--border); padding: 5px 10px; border-radius: 7px; cursor: pointer;
}
.period-quarters button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
[data-theme="dark"] .period-quarters button.active { color: var(--accent); }
.period-custom { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2); }
.period-custom input { font-family: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }

/* ----- SECTION HEADER ----- */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sec-head h3 { font-size: 13px; color: var(--text-2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sec-head .badge-new {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft);
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em;
}
[data-theme="dark"] .sec-head .badge-new { color: var(--accent); }
.why-note { font-size: 11.5px; color: var(--text-3); margin-bottom: 10px; }

/* ----- KPI HERO GRID ----- */
.kpi-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* KPI-HERO: card neutra con identità cobalt firma (ombra) permanente.
   Numero NERO, label uppercase, chip-icona cobalt soft. NIENTE border-left
   di stato, NIENTE featured cobalt fisso. Accensione data-driven (warn/
   alert) cambia velo + ombra colorata + numero. Same elevation per
   tutte le card dashboard (brief). */
.kpi-hero {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  min-height: 132px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card-cobalt);
  transition: transform var(--dur-fast, .15s) var(--spring, ease),
              box-shadow var(--dur-fast, .15s) ease,
              background var(--dur-fast, .15s) ease;
}
.kpi-hero.clickable { cursor: pointer; }

/* .featured NEUTRALIZZATA sulla dashboard: brief vieta cobalt fisso.
   La classe resta agganciata al JS senza rompere (= stile identico alla
   card neutra). Il "featured" come componente cobalt sopravvive su
   altre sezioni che lo applicano esplicitamente. */

/* Label uppercase 10px + chip-icona cobalt soft (firma di brand) */
.kpi-hero .lbl {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.kpi-hero .lbl .ico {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
/* Dentro il badge .ico l'icona va dimensionata sul badge (22px), non sul
   font-size: a 1em sarebbe minuta. Lo stroke resta currentColor, quindi segue
   il colore del tone (warn/info/alert) in chiaro e in scuro. */
.kpi-hero .lbl .ico .mk-ico { width: 15px; height: 15px; vertical-align: 0; }
[data-theme="dark"] .kpi-hero .lbl .ico { color: var(--accent); }

/* Numero grande, nero, peso 600 (brief: 23-26px) */
.kpi-hero .val {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
  position: relative; z-index: 1;
}
.kpi-hero .val .unit { font-size: 15px; color: var(--text-3); font-weight: 500; }

/* delta trend: default UP positivo, .neg rose, .flat muted */
.kpi-hero .delta { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--positive-text); margin-left: 4px; display: inline-flex; align-items: center; gap: 3px; }
[data-theme="dark"] .kpi-hero .delta { color: var(--positive); }
.kpi-hero .delta.neg { color: var(--rose); }
.kpi-hero .delta.flat { color: var(--text-3); }

.kpi-hero .breakdown { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-2); margin-top: auto; padding-top: 10px; }
.kpi-hero .breakdown b { color: var(--text); font-weight: 600; }
.kpi-hero .sub { font-size: 10.5px; color: var(--text-3); margin-top: 8px; }

/* ACCENSIONE data-driven: velo + ombra dello stato + numero + chip colorati */
.kpi-hero.warn {
  background: rgba(255,159,10,.10);
  box-shadow: var(--shadow-card-warn);
}
.kpi-hero.warn .lbl .ico { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .kpi-hero.warn .lbl .ico { color: var(--amber); }
.kpi-hero.warn .val { color: var(--amber-text); }
[data-theme="dark"] .kpi-hero.warn .val { color: var(--amber); }

.kpi-hero.alert {
  background: rgba(255,59,48,.09);
  box-shadow: var(--shadow-card-alert);
}
.kpi-hero.alert .lbl .ico { background: var(--rose-soft); color: var(--rose-text); }
[data-theme="dark"] .kpi-hero.alert .lbl .ico { color: var(--rose); }
.kpi-hero.alert .val { color: var(--rose-text); }
[data-theme="dark"] .kpi-hero.alert .val { color: var(--rose); }

/* Tono "ghost" (Fantasmi): viola, coerente col chip-fantasma e distinto
   dall'ambra di "In scadenza" — evita due card ambra accostate. */
.kpi-hero.ghost {
  background: var(--violet-soft, rgba(191,90,242,.10));
  box-shadow: var(--shadow-card);
}
.kpi-hero.ghost .lbl .ico { background: var(--violet-soft, rgba(191,90,242,.12)); color: var(--violet); }
.kpi-hero.ghost .val { color: var(--violet); }

/* ----- PANEL ----- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.panel-head .h { display: flex; flex-direction: column; gap: 2px; }
.panel-head h3 { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.panel-head .sub { font-size: 11px; color: var(--text-3); }
.panel-head .actions { display: flex; gap: 4px; }
.panel-head .actions button {
  font-family: inherit; font-size: 11.5px; font-weight: 500; background: var(--surface-2);
  color: var(--text-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.panel-head .actions button:hover { color: var(--text); }

.grid-row { display: grid; gap: 14px; margin-bottom: 14px; }
.grid-1-1 { grid-template-columns: 1fr 1fr; }
.grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }

/* ----- PROVE — blocco unificato ----- */
.prove-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.prove-main { display: flex; flex-direction: column; gap: 14px; }
.prove-funnel-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.prove-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prove-metric { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; }
.prove-metric.featured { border-color: var(--accent); }
.prove-metric.warn { border-color: var(--amber); }
.prove-metric .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.prove-metric .val { font-size: 26px; font-weight: 600; color: var(--text); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 4px; display: flex; align-items: baseline; gap: 6px; }
.prove-metric .val .unit { font-size: 13px; color: var(--text-3); font-weight: 500; }
.prove-metric.warn .val { color: var(--amber-text); }
[data-theme="dark"] .prove-metric.warn .val { color: var(--amber); }
.prove-metric .delta { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; color: var(--positive-text); margin-left: 2px; }
[data-theme="dark"] .prove-metric .delta { color: var(--positive); }
.prove-metric .delta.neg { color: var(--rose); }
.prove-metric .delta.flat { color: var(--text-3); }
.prove-metric .sub { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
:root:not([data-theme="dark"]) .prove-metric.featured,
:root:not([data-theme="dark"]) .prove-metric.warn { border-color: var(--border); }
:root:not([data-theme="dark"]) .prove-metric.featured::before,
:root:not([data-theme="dark"]) .prove-metric.warn::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
}
:root:not([data-theme="dark"]) .prove-metric.featured::before { background: var(--accent); }
:root:not([data-theme="dark"]) .prove-metric.warn::before { background: var(--amber); }
:root:not([data-theme="dark"]) .prove-metric.warn .val { color: var(--text); }

.prove-side { display: flex; flex-direction: column; gap: 14px; }
.prove-side .sub-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.prove-side .sub-card .sub-h { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.prove-loss-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.prove-loss-row:last-child { border-bottom: none; padding-bottom: 0; }
.prove-loss-row:first-child { padding-top: 0; }
.prove-loss-row .lbl { color: var(--text-2); }
.prove-loss-row .lbl strong { color: var(--text); font-weight: 600; }
.prove-loss-row .v { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* .v.neg = numero rosso SOLO per oggi/urgenza reale (es. follow-up scaduti).
   .v.muted = numero TENUE per dati storici negativi (es. "Perse"): non urlano
   come alert, coerente con brief "dati storici negativi → tenue, non alert". */
.prove-loss-row .v.neg   { color: var(--rose); }
.prove-loss-row .v.muted { color: var(--text-3); }

/* ----- ORIGINE PROVE bars ----- */
.origin-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 12.5px; }
.origin-row:last-child { margin-bottom: 0; }
.origin-row .nm { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.origin-row .bar { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.origin-row .bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber) 0%, #d97706 100%); }
[data-theme="dark"] .origin-row .bar .fill { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); }
.origin-row .vp { text-align: right; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.origin-row .vp .pct { color: var(--text-3); margin-left: 4px; }

@media (max-width: 980px) {
  .kpi-grid-5, .kpi-grid-4 { grid-template-columns: 1fr 1fr; }
  .kpi-grid-3, .grid-1-1-1, .grid-1-1 { grid-template-columns: 1fr; }
  .prove-grid { grid-template-columns: 1fr; }
  .today-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Clienti: banner filtro (atterraggio da Dashboard fantasmi) ----- */
.clienti-filter-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px; font-weight: 500; color: var(--amber-text);
}
[data-theme="dark"] .clienti-filter-banner { color: var(--amber); }

/* ============================================================================
   MODALE SLOT — Redesign Stato A/B (action-first)
   La modale parte action-first: recap + nota + 3 bottoni-azione (Stato A).
   Scelta un'azione, compare il form corrispondente (Stato B) con « Indietro.
   Token design system v1 + estetica §6 (bottoni impilati, chip colore).
   ========================================================================== */
.pren-modal-redesign { gap: 16px; }

/* Chip tipo servizio (brief §6): pill piccola con il colore di
   servizio.colore (color picker custom). 10px/500, radius 4px,
   bg tenue (12% del colore) + testo scuro del colore (50% saturazione).
   --svc viene iniettato come variabile inline (#xxxxxx). */
.svc-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--svc, #0A84FF) 18%, transparent);
  color: color-mix(in srgb, var(--svc, #0A84FF) 70%, #000);
  border: 1px solid color-mix(in srgb, var(--svc, #0A84FF) 35%, transparent);
}
[data-theme="dark"] .svc-chip {
  background: color-mix(in srgb, var(--svc, #0A84FF) 22%, transparent);
  color: color-mix(in srgb, var(--svc, #0A84FF) 80%, #fff);
  border-color: color-mix(in srgb, var(--svc, #0A84FF) 45%, transparent);
}

/* Readonly-box modale (info slot) più arioso */
.pren-modal-redesign .readonly-box { gap: 8px; padding: 12px 14px; }
.pren-modal-redesign .readonly-row { gap: 10px; }
.pren-modal-redesign .readonly-value { font-size: 13.5px; }
.pren-modal-redesign .readonly-label { font-size: 11px; }

/* Bottoni azione (Stato A): impilati full-width, icona + label */
.pren-action-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pren-action-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 2px;
}
.pren-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--hair, var(--border));
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  transition: transform var(--dur-fast, .15s) var(--spring, ease),
              box-shadow var(--dur-fast, .15s) ease,
              border-color var(--dur-fast, .15s) ease,
              filter var(--dur-fast, .15s) ease;
}
.pren-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.06));
}
.pren-action-btn:active:not(:disabled) { transform: scale(.99); }
.pren-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pren-action-ico { font-size: 18px; flex-shrink: 0; }
.pren-action-txt { flex: 1; }
/* Variante Prenota: primario verde pieno */
.pren-action-btn--prenota {
  background: #1D9E75; color: #fff; border-color: #1D9E75;
}
.pren-action-btn--prenota:hover:not(:disabled) { background: #169068; border-color: #169068; }
/* Variante Prova: viola tenue con testo scuro */
.pren-action-btn--prova {
  background: #EEEDFE; color: #3C3489; border-color: #DAD7F8;
}
.pren-action-btn--prova:hover:not(:disabled) { background: #E3E0FC; border-color: #C8C3F0; }
[data-theme="dark"] .pren-action-btn--prova {
  background: rgba(124, 58, 237, 0.18); color: #C7B8FE; border-color: rgba(124, 58, 237, 0.35);
}
[data-theme="dark"] .pren-action-btn--prova:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.26); border-color: rgba(124, 58, 237, 0.55);
}
/* Variante Blocca: outline rosso, no fill */
.pren-action-btn--blocca {
  background: transparent; color: #A32D2D; border-color: #E3B3B3;
}
.pren-action-btn--blocca:hover:not(:disabled) {
  background: rgba(163, 45, 45, 0.07); border-color: #A32D2D;
}
[data-theme="dark"] .pren-action-btn--blocca {
  color: #F1A0A0; border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .pren-action-btn--blocca:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
}

/* « Indietro (Stato B) */
.pren-back-wrap { margin: -2px 0 0; }
.pren-back-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px 6px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2, var(--text));
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.pren-back-btn:hover { background: var(--surface-2); color: var(--text); }

/* Titolo modale a 2 righe (Slot HH:MM / giorno mese) preservando whitespace */
#modal-pren .modal-header h3#modal-pren-title {
  display: flex; flex-direction: column; gap: 4px;
  line-height: 1; letter-spacing: -0.01em;
}
.pren-title-time { font-size: 24px; font-weight: 700; color: var(--text); }
.pren-title-date { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* ============================================================================
   MODALE SLOT/PRENOTAZIONE v2 — parità legacy (lista posti, nota, blocco,
   ricorrenti, assorbi picker, feedback live cliente). Token design system v1.
   ========================================================================== */

/* ----- Lista POSTI (una riga per posto dello slot) ----- */
.posti-list { display: flex; flex-direction: column; gap: 8px; }
.posto-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 8px;
  padding: 9px 12px;
}
.posto-row.is-occupied { border-left-color: var(--accent); }
.posto-row.is-open     { border-left-color: var(--rose); background: var(--rose-soft); }
.posto-row.is-prova    { border-left-color: var(--violet); background: var(--violet-soft); }
.posto-row.is-done     { border-left-color: var(--border-strong); opacity: 0.6; }
.posto-row.is-blocked  { border-left-color: var(--rose); background: var(--surface-3); }
.posto-row.is-free     { border-style: dashed; border-left-style: solid; border-left-color: var(--border); background: transparent; }
.posto-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.posto-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.posto-name.clickable { color: var(--accent-dark); cursor: pointer; }
[data-theme="dark"] .posto-name.clickable { color: var(--accent); }
.posto-name.clickable:hover { text-decoration: underline; }

/* Nome cliente cliccabile (apertura scheda in-place) — segnale visivo unico in
   tutto il gestionale: lista abbonamenti, avvisi, calendario, pagamenti,
   cruscotto, dashboard. */
.cli-link { color: var(--accent-dark); cursor: pointer; }
[data-theme="dark"] .cli-link { color: var(--accent); }
.cli-link:hover { text-decoration: underline; }
.posto-name.is-muted { color: var(--text-3); font-weight: 500; }
.posto-detail { font-size: 12px; color: var(--text-muted); }
/* Azioni SEMPRE visibili (niente più click-to-expand): il click nascosto non
   era intuibile. Solo il nome cliente resta cliccabile per aprire la scheda.
   Su schermi stretti le azioni vanno a capo sotto il testo (wrap), non si
   nascondono. */
.posto-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .posto-row { flex-wrap: wrap; }
  .posto-actions { width: 100%; justify-content: flex-start; margin-top: 4px; }
}
/* Riga libera: nessuna interazione */
.posto-row.is-free { cursor: default; }

/* badge stato posto */
.pren-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
/* "Prenotato" = stato confermato → semantica POSITIVA (verde Cobalt) */
.pren-badge.b-prenotato { background: var(--positive-soft); color: var(--positive-text); }
[data-theme="dark"] .pren-badge.b-prenotato { color: var(--positive); }
.pren-badge.b-done  { background: var(--surface-3); color: var(--text-2); }
.pren-badge.b-aperta{ background: var(--rose-soft); color: var(--rose-text); }
.pren-badge.b-prova { background: var(--violet-soft); color: var(--violet); }
.pren-badge.b-free  { background: var(--surface-3); color: var(--text-3); }
.pren-badge.b-blocked { background: var(--rose-soft); color: var(--rose-text); }

/* ----- Nota slot — banner leggibile (brief §4.3 / §6).
   - Con nota: banner ambar tenue, icona 📝 + testo + mini-azioni.
   - Senza nota (admin): riga compatta "＋ Aggiungi nota allo slot"
     (classe .is-empty-prompt, sfondo neutro, no colorazione amber).
   - In editing: textarea 2 righe + Salva/Annulla. ----- */
.pren-note-box {
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-soft);
  padding: 9px 12px;
}
.pren-note-box.is-empty-prompt {
  background: var(--surface-2);
  border-color: var(--hair, var(--border));
  border-style: dashed;
}
.pren-note-banner { display: flex; align-items: center; gap: 10px; }
.pren-note-ico { flex-shrink: 0; font-size: 14px; }
.pren-note-text { flex: 1; font-size: 13px; color: var(--amber-text); white-space: pre-wrap; min-width: 0; line-height: 1.45; }
[data-theme="dark"] .pren-note-text { color: var(--text); }
.pren-note-box.is-empty-prompt .pren-note-text { display: none; }
.pren-note-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pren-note-editor { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.pren-note-editor .autocomplete-label { color: var(--amber-text); }
[data-theme="dark"] .pren-note-editor .autocomplete-label { color: var(--amber); }
.pren-note-box textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical;
  min-height: 56px;
}
.pren-note-box textarea:focus { outline: none; border-color: var(--amber); }
.pren-note-editor-actions { display: flex; gap: 6px; }

/* ----- Riordino visivo modale prenotazione (FIX7) ----- */
.pren-section-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 8px; }
/* Header sezione posti con la tendina "Trainer dello slot" (modalità trainerUnico) */
.pren-existing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pren-existing-head .pren-section-label { margin-bottom: 0; }
.pren-slot-trainer { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin-bottom: 8px; }
.pren-slot-trainer select { font-family: inherit; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); min-width: 0; max-width: 220px; }
.pren-section .posti-list { margin-bottom: 0; }
.pren-section .pren-blocca-wrap { margin-top: 10px; }
.pren-add-wrap { border-top: 1px solid var(--border); padding-top: 14px; }
.pren-add-wrap .pren-section-label { margin-bottom: 10px; }

/* ----- Blocca slot ----- */
.pren-blocca-wrap { display: flex; flex-direction: column; gap: 8px; }
.btn-blocca { align-self: flex-start; }
.pren-blocca-choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pren-blocca-choice input {
  flex: 1; min-width: 140px; font-family: inherit; font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text);
}

/* ----- Feedback live cliente ----- */
.pren-cliente-status {
  font-size: 12.5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong); background: var(--surface-2);
}
/* Feedback live cliente "OK" → positivo */
.pren-cliente-status.s-ok   { border-left-color: var(--positive); color: var(--positive-text); }
[data-theme="dark"] .pren-cliente-status.s-ok { color: var(--positive); }
.pren-cliente-status.s-warn { border-left-color: var(--amber); color: var(--amber-text); }
[data-theme="dark"] .pren-cliente-status.s-warn { color: var(--amber); }
.pren-cliente-status.s-open { border-left-color: var(--rose); color: var(--rose-text); }
/* Nota neutra (prodotto/visita): nessun warning, solo informativa cobalt soft */
.pren-cliente-status.s-info { border-left-color: var(--accent); color: var(--text-2); }

/* ----- Ricorrenti (riga nel form) ----- */
.pren-ric-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
/* override del default .form-grid label (display:flex; flex-direction:column;
   gap:6px) che faceva andare "Ripeti per" a capo sotto la checkbox.
   La specificità .form-grid .pren-ric-check batte .form-grid label. */
.form-grid .pren-ric-check,
.pren-ric-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; color: var(--text); }
.pren-ric-wrap input[type="number"] { width: 64px; font-family: inherit; font-size: 13.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); }
.pren-ric-wrap input[type="number"]:disabled { opacity: 0.5; }
.pren-ric-suffix { color: var(--text-3); }

/* ----- Modale ricorrenti ----- */
.ric-info { font-size: 13px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ric-info strong { color: var(--text); }
.ric-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.ric-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.ric-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.ric-row.is-warn { border-left-color: var(--amber); }
.ric-row.is-excluded { border-left-color: var(--rose); opacity: 0.65; }
.ric-row .ric-date { font-weight: 600; min-width: 150px; }
.ric-row .ric-note { color: var(--text-muted); font-size: 12px; flex: 1; }
.ric-row .ric-note.warn { color: var(--amber-text); }
[data-theme="dark"] .ric-row .ric-note.warn { color: var(--amber); }
.ric-row .ric-note.excl { color: var(--rose-text); }
.ric-summary { margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.ric-summary b { color: var(--text); }

/* ----- Modale assorbi-pick ----- */
.modal-card-sm { max-width: 440px; }
.assorbi-pick-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.assorbi-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.assorbi-pick-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.assorbi-pick-row .ap-main { flex: 1; min-width: 0; }
.assorbi-pick-row .ap-title { font-weight: 600; font-size: 14px; }
.assorbi-pick-row .ap-detail { font-size: 12px; color: var(--text-muted); }

/* ============================================================================
   SCHEDA CLIENTE a TAB (parità legacy) — token design system v1
   ========================================================================== */
.modal-card-lg { max-width: 720px; }

/* ============================================================================
   STATISTICHE VENDITE v2 — donut + barre (SVG/CSS inline, niente librerie)
   ========================================================================== */
.modal-card-stats { max-width: min(1080px, 94vw); }
/* Padding orizzontale del corpo Statistiche allineato all'header (28px) → respira. */
/* I due modali statistiche (Abbonamenti e Spese) condividono markup e
   spaziature: selettori insieme, cosi' un terzo modale non si ritrova di nuovo
   senza padding perche' la regola era legata a un solo id. */
#abb-stats-body,
#spese-stats-body { padding: 14px 28px 24px; max-height: 66vh; overflow-y: auto; }
#abb-stats-custom,
#spese-stats-custom { padding: 12px 28px 0; margin-bottom: 0; }
.stats-top {
  display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 28px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--hair); border-radius: var(--r-md);
  background: var(--surface-2); margin-bottom: 22px;
}
.stats-donut-wrap { display: flex; align-items: center; gap: 18px; }
.stats-donut { position: relative; width: 124px; height: 124px; flex: none; }
.stats-donut-svg { width: 124px; height: 124px; }
.stats-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stats-donut .ctr .v { font-size: 16px; font-weight: 700; }
.stats-donut .ctr .l { font-size: 10px; color: var(--text-2); }
.stats-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stats-legend .row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.stats-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.stats-legend b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.stats-totbar { display: flex; gap: 14px; flex-wrap: wrap; }
.stats-tot { flex: 1; min-width: 130px; }
.stats-tot .l { font-size: 11px; color: var(--text-2); }
.stats-tot .v { font-size: 22px; font-weight: 700; }
.stats-tot .v.g { color: var(--positive-text); }

.stats-sect { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 24px 0 14px; display: flex; align-items: center; gap: 8px; }
.stats-sect .b { width: 3px; height: 14px; border-radius: 2px; background: var(--accent-grad); }
.stats-sect.prod .b { background: var(--amber); }

.stats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.stats-c { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); }
.stats-c .l { font-size: 11px; color: var(--text-2); }
.stats-c .v { font-size: 22px; font-weight: 700; margin-top: 3px; }
.stats-c.g .v { color: var(--positive-text); }

.stats-bars { display: flex; flex-direction: column; gap: 11px; }
.stats-bar-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }
.stats-rk { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-3, rgba(120,120,128,.12)); color: var(--text-3); }
.stats-rk.g { background: rgba(227,179,65,.22); color: #b8901f; }
.stats-rk.s { background: rgba(154,167,180,.26); color: #6b7785; }
.stats-rk.b { background: rgba(197,139,90,.24); color: #9a6638; }
[data-theme="dark"] .stats-rk.g { color: #e3b341; }
[data-theme="dark"] .stats-rk.s { color: #b9c4d1; }
[data-theme="dark"] .stats-rk.b { color: #d8a06a; }
.stats-bar-main { min-width: 0; }
.stats-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 3px; }
.stats-bar-top .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar-top .meta { color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.stats-track { height: 8px; background: var(--surface-3, rgba(120,120,128,.10)); border-radius: 5px; overflow: hidden; }
.stats-fill { height: 100%; border-radius: 5px; background: var(--accent-grad); }
.stats-fill.am { background: linear-gradient(135deg, #FF9F0A, #FF7A0A); }
.stats-empty { color: var(--text-2); margin: 2px 0 14px; font-size: 13px; }

@media (max-width: 640px) {
  .stats-top { grid-template-columns: 1fr; }
  .stats-cards { grid-template-columns: 1fr; }
}

/* badge stato (riusati anche dal mock): base .badge già definita sopra */
/* badge-ok = stato positivo (pagato/confermato/saldato) */
.badge-ok    { background: var(--positive-soft); color: var(--positive-text); }
[data-theme="dark"] .badge-ok { color: var(--positive); }
.badge-warn  { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .badge-warn { color: var(--amber); }
.badge-info  { background: var(--blue-soft); color: var(--blue); }
.badge-prova { background: var(--violet-soft); color: var(--violet); }
.badge-gray  { background: var(--surface-3); color: var(--text-2); }

/* badge certificato in header — soft+text uniformato (no bordo solid) */
.cert-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; margin-left: 10px;
  background: var(--rose-soft); color: var(--rose-text);
}
[data-theme="dark"] .cert-badge { color: var(--rose); }

/* TAB NAV — stile UNICO "Opzione 1": icona + label, sottolineatura indaco sul
   tab attivo. Condiviso tra scheda cliente (.ctab-nav/.ctab-btn) e TUTTE le barre
   .team-tabs/.team-tab (dettaglio collaboratore, Contabilità & KPI, sotto-tab
   servizi e menu a tendina). Un'unica definizione, niente duplicazione. */
.ctab-nav, .team-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.ctab-btn, .team-tab {
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-2); padding: 8px 12px; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ctab-btn:hover, .team-tab:hover { color: var(--text); }
.ctab-btn.is-active, .team-tab.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .ctab-btn.is-active, [data-theme="dark"] .team-tab.is-active { color: var(--accent); }
.ctab-btn .mk-ico, .team-tab .mk-ico { width: 16px; height: 16px; }

.ctab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ctab-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.ctab-inline select { font-family: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); }

.cliente-stato-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); padding-bottom: 4px; }

/* liste sotto-scheda (abbonamenti / prove) */
.cliente-sublist { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sub-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sub-row-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sub-row-detail { font-size: 12px; color: var(--text-muted); }
.sub-row-actions { flex-shrink: 0; }

/* (la regola .chip vive consolidata più sotto — design system, ~riga 3073) */

/* tabella prenotazioni */
.sub-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sub-table thead th { text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); border-bottom: 1px solid var(--border); }
.sub-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.sub-table tbody tr:last-child td { border-bottom: none; }
.sub-table .mono { }

@media (max-width: 760px) {
  .form-grid .full-width, .modal-card-lg { } /* layout fluido già gestito da form-grid */
}

/* ============================================================================
   ABBONAMENTI v2 — summary chips, filtri, righe, azioni (design system v1)
   ========================================================================== */
.abb-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* abb-chip (brief Step 6): stessa famiglia di .chip — bianco + hairline; attivo
   = --accent-grad + testo bianco. I varianti tone-* erano fill semantico pieno
   sull'attivo (verde/amber): tolti → coerenti con "attivo = sempre cobalt grad". */
.abb-chip {
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px;
  background: var(--surface); color: var(--text-2);
  display: inline-flex; gap: 6px; align-items: center;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.abb-chip b { color: var(--text); }
.abb-chip:hover { border-color: var(--accent-line); color: var(--text); }
.abb-chip.is-active {
  background: var(--accent-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-btn);
}
.abb-chip.is-active b { color: #fff; }

.abb-filters { flex-wrap: wrap; gap: 8px; align-items: center; }
.abb-f-input {
  font-family: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text);
}
.abb-f-input[type="search"] { flex: 1; min-width: 180px; }
.abb-f-date { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.abb-f-date input { font-family: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); }

/* Range filtro date "Inizio dal/al" e "Scade dal/al" in un gruppo
   chiuso. Più visibile rispetto ai vecchi due <label class="abb-f-date">
   sciolti: l'utente vede a colpo d'occhio che è un filtro di RANGE.
   Pattern: chip con label-icona + due date + separatore freccia. */
.abb-f-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 999px;
  background: var(--surface);
  font-size: 11.5px;
  color: var(--text-2);
}
.abb-f-range-lbl {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.abb-f-range input[type="date"] {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
}
.abb-f-range-sep { color: var(--text-3, var(--text-muted)); font-weight: 600; }

.abb-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* KPI card selezionata = anello cobalt soft sull'ombra firma (no riempimento) */
.kpi-hero.is-sel { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-card-cobalt); border-color: var(--accent-line); }
#abb-kpi .kpi-hero { min-height: 92px; cursor: pointer; }

/* ----- Modale smart-absorb (FIX10) ----- */
.absorb-body { padding: 14px 28px 4px; }

/* Corpo dei modali non-form SENZA wrapper paddato (testo/liste figli diretti
   della card): porta l'inset orizzontale a 28px, uniforme con header e footer,
   e dà respiro sotto l'header al primo elemento. */
#modal-ricorrenti   > .modal-card > :not(.modal-header):not(.modal-actions),
#modal-assorbi-pick > .modal-card > :not(.modal-header):not(.modal-actions),
#modal-sell-abb     > .modal-card > :not(.modal-header):not(.modal-actions) {
  padding-left: 28px;
  padding-right: 28px;
}
#modal-ricorrenti   > .modal-card > .modal-header + *,
#modal-assorbi-pick > .modal-card > .modal-header + *,
#modal-sell-abb     > .modal-card > .modal-header + * {
  margin-top: 16px;
}
.absorb-sub { font-size: 13px; margin: 0 0 12px; }
.absorb-toolbar { display: flex; gap: 6px; margin-bottom: 10px; }
.absorb-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.absorb-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 10px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.absorb-row:hover { border-color: var(--border-strong); }
.absorb-row.is-selected { border-left-color: var(--accent); background: var(--accent-soft); }
.absorb-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.absorb-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.absorb-row-date { font-weight: 600; font-size: 13.5px; color: var(--text); }
.absorb-row-serv { font-size: 12px; color: var(--text-muted); }
.absorb-summary { margin: 12px 0 4px; font-size: 12.5px; color: var(--text-2); }
.absorb-summary b { color: var(--text); }

/* ============================================================================
   MODALE CLIENTE — dimensione FISSA + 3 fasce (header/nav · contenuto · footer)
   Solo l'area contenuto scrolla; cambiando tab la card non cambia dimensione.
   ========================================================================== */
#modal-cliente .modal-card {
  width: 92vw; max-width: 680px;
  height: min(86vh, 720px);
  display: flex; flex-direction: column;
  overflow: hidden; padding: 0;
}
#modal-cliente .modal-header { flex-shrink: 0; }
#modal-cliente .ctab-nav {
  flex-shrink: 0; margin: 0; padding: 0 28px;
  border-bottom: 1px solid var(--border); gap: 4px;
}
#modal-cliente .ctab-btn { padding: 10px 12px; }

/* L'unica area scrollabile */
#modal-cliente .ctab-content { flex: 1; min-height: 0; overflow-y: auto; }

/* padding uniforme dei tab non-form (il form usa già il padding di .form-grid) */
#modal-cliente .ctab-content > div.ctab-panel { padding: 20px 28px; }

/* le liste interne non scrollano più da sole: scrolla il contenitore */
#modal-cliente .cliente-sublist { max-height: none; overflow: visible; }

/* sottotitoli di sezione in Dati Generali */
.form-section-title {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin: 4px 0 -4px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.form-grid .form-section-title:first-child { margin-top: 0; }

/* toolbar tab allineata */
#modal-cliente .ctab-toolbar { margin-bottom: 12px; }

/* empty-state pulito e centrato */
.ctab-empty { text-align: center; padding: 28px 12px; color: var(--text-3); }

/* footer ancorato in basso */
#modal-cliente .modal-footer {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 16px 28px; border-top: 1px solid var(--border); background: var(--surface);
}
#modal-cliente .modal-footer .actions-right { display: flex; gap: 8px; }

/* ============================================================================
   PAGINA CLIENTI (lista) — densità legacy + look mock v6
   ========================================================================== */
.page-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* .page-actions non porta margini: altrove sta dentro .page-header, che li
   fornisce. Qui vive isolata sopra una tabella, quindi il respiro va dato a
   parte invece di toccare la regola condivisa. */
.servcoll-toolbar { margin: 14px 0; }
.clienti-filters { flex-wrap: wrap; gap: 8px; align-items: center; }
.clienti-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* Meta leggera sulla riga filtri (conteggio/totale tabella): flotta a destra,
   sostituisce la vecchia fascia-titolo .panel-head sopra le tabelle. */
.filter-meta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-3); white-space: nowrap;
}
.filter-meta b, .filter-meta .strong { color: var(--text-2); font-weight: 600; }

/* chip filtro (brief Step 6, consolidata): inattivo = bianco + hairline +
   testo --text-2; attivo = --accent-grad + testo bianco. Label centrato
   orizzontale+verticale (inline-flex). Metriche identiche attiva/inattiva
   (stesso padding, bordo 1px sempre presente: trasparente sull'attiva) così
   il testo non "salta" al cambio stato. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; line-height: 1.2;
  padding: 4px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hair);
  color: var(--text-2); cursor: pointer;
}
/* .chip e' inline-flex e non ha gap: lo spazio prima del testo verrebbe
   assorbito e l'icona toccherebbe la parola. Il margine sostituisce quel gap
   senza toccare i chip di sole parole, che non hanno .mk-ico dentro. 14px per
   restare in proporzione al testo da 12. */
.chip .mk-ico { width: 14px; height: 14px; margin-right: 5px; }
.chip:hover { color: var(--text); border-color: var(--accent-line); }
.chip.active {
  background: var(--accent-grad);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-btn);
}
/* Chip Fantasmi: viola tenue da inattivo, per distinguerlo dagli stati standard. */
.chip.chip-fantasma { color: var(--violet, #7F77DD); border-color: var(--violet-soft, rgba(127,119,221,.28)); }
.chip.chip-fantasma:hover { border-color: var(--violet, #7F77DD); }
.chip.chip-fantasma.active { background: var(--violet, #7F77DD); color: #fff; border-color: transparent; }

/* Selettore inline finestra "scaduti recenti" (30/60/90/Tutti) accanto al chip Scaduti. */
.chip-window {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  background: var(--surface-2, #f6f8fa); border: 1px solid var(--hair);
}
.chip-win-btn {
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  background: transparent; border: 0; color: var(--text-2); cursor: pointer;
}
.chip-win-btn:hover { color: var(--text); }
.chip-win-btn.active { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-btn); }
/* Range date del chip "In scadenza": stesso guscio .chip-window dei preset
   Scaduti, con due input al posto dei bottoni. color-scheme fa adattare al
   tema anche l'icona nativa del date picker. */
.chip-date {
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  background: transparent; border: 0; color: var(--text-2);
  font-family: inherit; cursor: pointer; color-scheme: light dark;
}
.chip-date:hover { color: var(--text); }
.chip-date:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
.chip-win-sep { font-size: 11px; color: var(--text-3); }

/* column picker */
.col-picker { position: relative; display: inline-block; }
.col-picker-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 8px; min-width: 180px;
  display: flex; flex-direction: column; gap: 4px;
}
.col-picker-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.col-picker-item:hover { background: var(--surface-2); }

/* Tendina multi-selezione calendari nella barra filtri (riusa .col-picker + .chip). */
.cal-caldrop { vertical-align: middle; }
.cal-caldrop-btn { cursor: pointer; font: inherit; }
.cal-caldrop-caret { font-size: 10px; opacity: 0.7; margin-left: 2px; }
.cal-caldrop-menu { left: 0; right: auto; max-height: 60vh; overflow-y: auto; max-width: calc(100vw - 32px); }

/* panel tight (header attaccato alla tabella) */
.panel.tight { padding: 0; overflow: hidden; }
.panel.tight .panel-head { padding: 14px 18px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
/* Header che usa .comp-panel-head (es. "Riepilogo mesi" nel Report): dentro un
   pannello tight il padding del pannello è 0, quindi senza questa regola il
   titolo resta incollato al bordo e overflow:hidden ne taglia il primo carattere. */
.panel.tight .comp-panel-head { padding: 14px 18px; }

/* Riepilogo mesi (#trep-table): Mese NON più "elastica al 100%" (sbilanciava la
   tabella e spingeva Stato oltre il bordo); colonne dimensionate sul contenuto e
   badge di stato che va a capo invece di sforare. */
#trep-table th.col-nome, #trep-table td.col-nome { width: auto; }
#trep-table th.num, #trep-table td.num { white-space: nowrap; }
#trep-table tbody td:last-child .badge { white-space: normal; }

/* tabella ricca */
/* Tabella (.tbl) brief Step 7: header uppercase 10px grigio + hairline tra righe,
   tabular-nums sulle celle num. Card contenitore: vedi .tbl-wrap. */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl thead th {
  text-align: left; padding: 10px 14px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px;
  border-bottom: 1px solid var(--hair); background: var(--surface-2); white-space: nowrap;
}
table.tbl thead th.th-sort { cursor: pointer; user-select: none; }
table.tbl thead th.th-sort:hover { color: var(--text); }
table.tbl tbody tr { border-bottom: 1px solid var(--hair); }
table.tbl tbody tr:last-child { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody td { padding: 10px 14px; vertical-align: middle; color: var(--text); }
table.tbl td.mono, table.tbl td.num { font-variant-numeric: tabular-nums; }
table.tbl td.num { text-align: right; }
table.tbl th.num { text-align: right; }

.name-cell { display: flex; align-items: center; gap: 10px; }
.av-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
[data-theme="dark"] .av-circle { color: var(--accent); }
.name-cell .nm { font-weight: 600; color: var(--text); }
.name-cell .em { font-size: 11px; color: var(--text-3); }

/* FIX8 — tag inline (non impilati), colonne full-width, righe pulite */
.name-cell .nc-body { min-width: 0; }
.name-cell .nc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cli-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.tag-incompleta { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .tag-incompleta { color: var(--amber); }
.cli-stato-wrap { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cli-fantasma { font-size: 13px; line-height: 1; cursor: help; }
table.tbl td.nowrap, table.tbl th.nowrap { white-space: nowrap; }
/* Nome prende lo spazio in eccesso, le altre colonne si adattano al contenuto */
table.tbl td.col-nome, table.tbl th.col-nome { width: 100%; }
table.tbl tbody td { padding: 11px 14px; }   /* righe un filo più ariose */

/* Price List — tabella ricca: riga cliccabile, sort, chip in cella, contatore */
table.tbl tbody tr.row-click { cursor: pointer; }
table.tbl tbody tr.row-muted td { opacity: 0.6; }
.sort-arrow { font-size: 9px; color: var(--text-3); }
table.tbl td.chip-cell { white-space: normal; }
table.tbl td.chip-cell .chip { cursor: default; margin: 0 4px 2px 0; }
.listini-count { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 600; white-space: nowrap; }

.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 5px; vertical-align: middle; }
.badge-rose { background: var(--rose-soft); color: var(--rose-text); }

/* FIX13: azioni riga (✏ / 💬 / ✕) in fila, spaziate, allineate a destra, no overlap */
.row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; white-space: nowrap; }
table.tbl td.row-actions { width: 1%; }   /* colonna larga quanto basta per i 3 bottoni */

/* Convenzione "td azione separata dal flex": quando una cella td è SOLO la
   colonna azioni ma vogliamo evitare display:flex sul <td> (rompe table
   layout in alcune combinazioni: cella stato/badge precedente che si
   schiaccia, allineamento header/body scollato), si usa
   <td class="col-actions"><div class="row-actions">…</div></td>.
   .col-actions tiene la cella nei suoi binari (table-cell, nowrap, width
   minima); .row-actions interno gestisce flex e gap dei bottoni. */
table.tbl td.col-actions,
table.tbl th.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-left: 16px;
}
/* Pulsanti azione Cobalt iOS: squircle in vetro + icona SVG, tema all'hover. */
.icon-btn {
  width: 33px; height: 33px; flex-shrink: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; line-height: 1;
  box-shadow: var(--shadow-icon);
  transition: transform .12s cubic-bezier(.2,.8,.2,1), background .15s, color .15s, border-color .15s;
}
/* Icona inline (icon() di icons.js) usata fuori dai pulsanti azione: gate,
   badge, toolbar, card KPI. Dimensione in em cosi' segue il testo che
   accompagna, colore da currentColor come le icone della nav. Dentro
   .icon-btn la regola sotto e' piu' specifica e continua a vincere. */
.mk-ico {
  width: 1em; height: 1em;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.14em; flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.93); }
.icon-btn.act-edit:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }
.icon-btn.act-wa:hover   { background: var(--positive-soft); color: var(--positive-text); border-color: transparent; }
.icon-btn.act-del:hover,
.icon-btn.act-del-mov:hover { background: var(--rose-soft); color: var(--rose-text); border-color: transparent; }
.icon-btn.act-freeze:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }
[data-theme="dark"] .icon-btn { background: rgba(255,255,255,.06); }

/* Azioni riga abbonamento (scheda cliente): pill Paga (verde) / Riattiva (blu)
   alte come le .icon-btn, coerenti Cobalt. ZERO emoji: icone via icon(). */
.abb-row-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.abb-pill {
  height: 33px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--hair); font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  box-shadow: var(--shadow-icon); white-space: nowrap;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .15s, background .15s, color .15s, border-color .15s;
}
.abb-pill svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.abb-pill:hover { transform: translateY(-1px); }
.abb-pill:active { transform: scale(.96); }
/* Paga: verde dai token (soft), forma/altezza/ombra/raggio = .abb-pill (come le
   .icon-btn di riga). Niente verde acceso custom. */
.abb-pill-pay { background: var(--positive-soft); color: var(--positive-text); border-color: var(--positive-glow); }
.abb-pill-pay:hover { background: var(--positive-soft); border-color: var(--positive); }
.abb-pill-react { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-line); }
[data-theme="dark"] .abb-pill-react { color: var(--accent); }

/* Elimina abbonamento — due livelli (errore rosso / cessazione ambra). */
.abb-del-counts {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 12px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 4px;
}
.abb-del-counts b { color: var(--text); }
.abb-del-opt {
  display: block; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 11px 12px; margin-bottom: 9px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.abb-del-opt .abb-del-ot { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.abb-del-opt .abb-del-od { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.abb-del-err:has(input:checked) { border-color: var(--rose); background: var(--rose-soft); }
.abb-del-ces:has(input:checked) { border-color: var(--amber); background: var(--amber-soft); }
.abb-del-future { font-size: 12px; color: var(--text-2); margin: -2px 0 8px 14px; }
.abb-del-future label { margin-right: 12px; cursor: pointer; }
.abb-del-cash { font-size: 11.5px; color: var(--rose-text); margin: 2px 0 0; }
[data-theme="dark"] .abb-del-cash { color: var(--rose); }

/* Riga abbonamento (scheda cliente): barra carnet + dettaglio congelamento. */
.abb-row-frozen { border-left: 3px solid var(--accent); }
/* Velo rosso su Scaduto/Esaurito (parità legacy .abb-row-scaduto): sfondo rosso
   tenue + bordo sinistro rosso, sobrio. Token rosso esistenti, chiaro/scuro. */
.sub-row.scaduto { background: var(--rose-soft); border-left: 3px solid var(--rose); }
/* Info uniformi riga abbonamento: livello 2 (scadenza a-tempo) + livello 3 (meta). */
.abb-typeline { margin-top: 7px; }
.abb-scad { font-size: 12px; font-weight: 600; color: var(--text-2); }
.abb-scad.warn { color: var(--amber-text); }
.abb-scad.danger { color: var(--rose-text); }
[data-theme="dark"] .abb-scad.danger { color: var(--rose); }
.abb-meta { font-size: 11.5px; color: var(--text-2); margin-top: 7px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.abb-carnet { margin-top: 7px; }
.abb-carnet-lbl { font-size: 11.5px; color: var(--text-2); margin-bottom: 4px; }
.abb-carnet-lbl b { color: var(--text); }
.abb-carnet-rim.low { color: var(--amber-text); }
.abb-carnet-rim.crit { color: var(--rose-text); }
.abb-bar { height: 6px; background: var(--positive-soft); border-radius: 3px; overflow: hidden; }
.abb-bar > div { height: 100%; background: var(--positive); border-radius: 3px; transition: width .2s ease; }
.abb-bar.low > div { background: var(--amber); }
.abb-bar.crit > div { background: var(--rose); }
.abb-frozen-info {
  margin-top: 7px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 11.5px; display: flex; gap: 12px; flex-wrap: wrap;
}
[data-theme="dark"] .abb-frozen-info { color: var(--accent); }
.abb-storico-btn {
  margin-top: 6px; font-size: 11px; color: var(--text-3);
  background: none; border: none; cursor: pointer; padding: 2px 0; text-decoration: underline;
}
.abb-storico-btn:hover { color: var(--text-2); }
.abb-storico-list { margin-top: 4px; font-size: 11px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.abb-storico-row { padding: 2px 0; }

/* Modale nuovo abbonamento — sezione "Avanzate" collassabile. */
.abb-adv { border-top: 1px solid var(--hair); padding-top: 6px; margin-top: 2px; }
.abb-adv-toggle {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  font-size: 12.5px; font-weight: 600; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.abb-adv-toggle:hover { color: var(--text); }
.abb-adv-chevron { display: inline-block; transition: transform .15s ease; font-size: 14px; line-height: 1; }
.abb-adv-toggle.is-open .abb-adv-chevron { transform: rotate(90deg); }
.abb-adv-body { margin-top: 8px; }

/* Step 2 "Come paga?" — tre scelte (Cobalt, ZERO emoji, icone icons.js). */
.pay-choices { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.pay-choice {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s cubic-bezier(.2,.8,.2,1);
}
.pay-choice:hover { border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-1px); }
.pay-choice:active { transform: scale(.99); }
.pay-choice-ic {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay-choice-ic svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pay-choice-ic.ic-now { background: var(--positive); }
.pay-choice-ic.ic-later { background: var(--amber); }
.pay-choice-ic.ic-rate { background: var(--accent); }
.pay-choice-txt { display: flex; flex-direction: column; gap: 2px; }
.pc-tt { font-weight: 600; font-size: 14px; }
.pc-dd { font-size: 12px; color: var(--text-2); }

.foot-note { padding: 12px 4px; font-size: 11.5px; color: var(--text-3); }

/* ============================================================================
   PAGAMENTI + RATEIZZAZIONI — cassa (design system v1)
   ========================================================================== */
/* privacy ruoli: nascondi i dati economici al backoffice */
.mk-bo .titolare-only { display: none !important; }

.abb-f-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; align-self: center; }
.abb-f-perlbl { font-size: 12px; color: var(--text-3); align-self: center; }

.btn-xs { padding: 4px 10px !important; font-size: 12px !important; }

/* modale pagamento */
.pag-tipo-toggle { display: flex; gap: 8px; }
.pag-sconto-row { display: flex; gap: 6px; }
.pag-sconto-row input { flex: 1; }
.pag-sconto-row select { width: 64px; flex-shrink: 0; }
.pag-rate-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.pag-rate-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pag-rate-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.pag-rate-prospetto { display: flex; flex-direction: column; gap: 2px; }
.pag-rata-line { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.pag-rata-line:last-child { border-bottom: none; }
.pag-rata-line .num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* recap piano */
.piano-rata-row { display: grid; grid-template-columns: 110px 90px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.piano-rata-row:last-child { border-bottom: none; }
.piano-rata-row .piano-rata-n { font-weight: 600; }
.piano-rata-row .num { font-variant-numeric: tabular-nums; }
.piano-scad { font-family: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }

/* ============ MODULO TEAM (Fase 1) ============ */

/* Sezioni modale (Compenso / Contratto / Anagrafica): leggere, sfondo tenue,
   niente box bordati pesanti — coerenza con #modal-prova/#modal-cliente. */
fieldset.form-section {
  grid-column: 1 / -1;
  border: none;
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 14px 14px;
  margin: 2px 0 0;
}
fieldset.form-section > legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); padding: 0; margin-bottom: 2px;
}

/* sezioni collassabili (Contratto / Anagrafica estesa) */
.form-collapse {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
}
.form-collapse > summary {
  cursor: pointer; list-style: none; padding: 12px 2px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); display: flex; align-items: center; gap: 8px;
}
.form-collapse > summary::-webkit-details-marker { display: none; }
.form-collapse > summary::before { content: '▸'; transition: transform .15s; color: var(--text-3); }
.form-collapse[open] > summary::before { transform: rotate(90deg); }
.form-collapse > summary:hover { color: var(--text); }
.form-collapse .form-grid-inner { padding: 2px 2px 14px; }

/* color picker pulito: swatch unico arrotondato a tema + hex mono */
.color-row { display: inline-flex; align-items: center; gap: 10px; }
.color-swatch {
  width: 44px; height: 34px; padding: 3px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.color-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch::-moz-color-swatch { border: none; border-radius: 5px; }
.color-hex { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }

/* input date nativi: icona calendario leggibile in dark */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }

/* riquadro Account informativo nella modale */
.team-account-box {
  border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--surface-2);
}
.team-account-box p { margin: 0; font-size: 12.5px; }

/* toggle "Mostra archiviati" in testata */
.team-archived-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}

/* lista collaboratori */
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow);
}
.team-card.is-archived { opacity: 0.65; }
.team-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
}
.team-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-name { font-weight: 700; font-size: 15px; color: var(--text); }
.team-meta { font-size: 13px; color: var(--text-2); }
.team-account { margin-top: 2px; }
.team-warn { font-size: 12.5px; color: var(--amber-text); font-weight: 600; }
.team-compenso-hint {
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
  background: var(--surface-2); border-radius: 8px; padding: 4px 10px; align-self: flex-start; margin-top: 2px;
}
.team-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: flex-end; }

/* ============ TEAM — vista DETTAGLIO (hub elenco→dettaglio) ============ */

/* card elenco: corpo cliccabile */
.team-body[data-act="open"] { cursor: pointer; border-radius: 8px; }
.team-body[data-act="open"]:hover .team-name { color: var(--accent-dark); }
[data-theme="dark"] .team-body[data-act="open"]:hover .team-name { color: var(--accent); }
.team-body[data-act="open"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* barra contesto "← Torna al team · Stai vedendo: X · Cambia collaboratore" */
.team-context-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.team-context-label { font-size: 13px; color: var(--text-2); }
.team-context-label b { color: var(--text); }
.team-switch {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3);
}
.team-switch select {
  font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}

/* header trainer nel dettaglio */
.team-detail-header { align-items: center; }
.team-detail-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.team-av-lg { width: 56px; height: 56px; font-size: 22px; }

/* tab bar dettaglio (Profilo attivo, Turni/PT "presto") */
/* Team tabs (brief Step 6): da "tab con sottolineatura" a segmented pulito
   (track grigio + tile bianca attiva). Stessa metafora di .cal-mode-toggle. */
/* .team-tabs / .team-tab: lo stile visivo (nav underline + icona) è definito una
   volta sola insieme a .ctab-* più in alto ("TAB NAV — stile UNICO"). Qui solo
   le regole specifiche di questa barra (stati disabilitati, tag "presto"). */
.team-tab[disabled] { cursor: default; color: var(--text-3); opacity: 0.6; }
.team-tab:disabled:hover { background: transparent; }
.team-tab .soon-tag { font-size: 9.5px; }

/* ---- Attività di oggi (audit log, tab Team) ---- */
.attivita-toolbar { align-items: center; }
.attivita-pills { margin: 10px 0 14px; }
.attivita-list { display: flex; flex-direction: column; gap: 6px; }
.attivita-item {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.attivita-item .attivita-time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 42px; flex-shrink: 0; }
.attivita-item .attivita-user { font-size: 13px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
[data-theme="dark"] .attivita-item .attivita-user { color: var(--accent); }
.attivita-item .attivita-desc { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.attivita-item .attivita-desc b { font-weight: 600; }

/* card del Profilo (Anagrafica / Contratto / Compenso) */
#team-detail-profilo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.team-detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.team-detail-card-title {
  margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kv-grid { display: flex; flex-direction: column; gap: 9px; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.kv-k { color: var(--text-3); flex-shrink: 0; }
.kv-v { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.kv-mask { color: var(--text-3); letter-spacing: 2px; }
.team-compenso-note { margin: 12px 0 0; font-size: 11.5px; }

/* ============ TEAM — TURNI (Fase 3) ============ */

/* Toggle pagina Team: Collaboratori · Calendario turni.
   Allineato al pattern .team-tabs / .team-tab usato dal dettaglio Team e
   da Contabilità & KPI. Stessa testata, stesso spacing, stesso underline
   accent del tab attivo. La variante .team-page-tabs sta in TOP della
   pagina (sopra la page-header della vista corrente) per fare da
   navigazione di livello, non di sotto-sezione.
   Le vecchie classi .team-view-toggle/.seg restano definite per
   compatibilità (zone del prodotto che potrebbero riusarle) ma il
   markup di page-team le ha sostituite con .team-tabs/.team-tab. */
.team-page-tabs { margin-bottom: 20px; }

/* Compatibilità legacy: stessi look del vecchio pillbox per chi usa ancora
   .team-view-toggle (potrebbe scomparire in futuro). */
.team-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 16px; background: var(--surface); }
.team-view-toggle .seg {
  font-family: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--text-2);
  border: none; padding: 8px 18px; cursor: pointer; transition: background .15s, color .15s;
}
.team-view-toggle .seg:hover { color: var(--text); }
.team-view-toggle .seg.is-active { background: var(--accent-grad); color: #fff; }
[data-theme="dark"] .team-view-toggle .seg { color: var(--text); }

/* toolbar turni (riusa .cal-toolbar) */
.turni-toolbar { justify-content: flex-start; }
.turni-weeknav { display: inline-flex; align-items: center; gap: 6px; }
.turni-range { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; padding: 0 6px; }
.turni-legenda { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.turni-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.turni-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* riepilogo ore nel tab dettaglio */
.turni-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.turni-stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 130px;
}
.turni-stat-v { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.turni-stat-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3); }

/* blocco turno nella griglia (stile coerente con .cal-event) */
.turno-block {
  position: absolute; border-radius: 4px; padding: 3px 6px;
  font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--text);
  z-index: 3; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border);
}
.turno-block:hover { filter: brightness(1.04); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.turno-time { font-size: 10.5px; color: var(--text-2); }
.turno-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Overlay occupazione turni (Intervento 5) ----- */
/* Barra chip "VEDI {servizio}" sopra la griglia studio-wide */
.turni-overlay-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.turni-overlay-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3);
}
/* Blocco occupazione: layer Calendar iOS sopra i turni, non cliccabile.
   Fondo soft + bordo nel colore servizio, testo leggibile in light e dark. */
.turni-overlay-block {
  position: absolute;
  left: 2px; width: calc(100% - 4px);
  box-sizing: border-box;
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 10px; font-weight: 600; line-height: 1.1;
  color: var(--text);
  pointer-events: none;
  z-index: 6;                 /* sopra .turno-block (z-index 3) */
  overflow: hidden;
  display: flex; align-items: center; gap: 4px;
  box-shadow: var(--shadow-card);
}
.turni-overlay-block.is-full { font-weight: 700; }
.turni-overlay-block .ovl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.turni-overlay-block .ovl-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Con overlay attivo i turni restano percepibili in sottofondo */
.cal-body.has-overlay .turno-block { opacity: 0.3; }

/* riga "Ore turno" live nella modale */
.turno-ore-box { font-size: 13px; color: var(--text-2); }
.turno-ore-box b { color: var(--text); font-size: 15px; }

/* ============ CONTABILITÀ — Compensi (slice 1) ============ */
.comp-month-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3);
}
.comp-month-label input[type="month"] {
  font-family: inherit; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
}
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }
#comp-content #comp-kpi { margin-bottom: 16px; }

/* ============ CONTABILITÀ — Spese (slice 2) ============ */
.ckpi-toolbar, .spese-toolbar { justify-content: flex-start; }
.spese-recap { margin-bottom: 16px; }
.spese-recap-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.spese-recap-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.spese-recap-cat { width: 160px; flex-shrink: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spese-recap-bar { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.spese-recap-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber) 0%, #d97706 100%); min-width: 3px; }
.spese-recap-val { width: 110px; flex-shrink: 0; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#spese-content #spese-kpi { margin-bottom: 16px; }

/* ============ CONTABILITÀ — Cruscotto (slice 3) ============ */
.crusc-period { font-size: 14px; font-weight: 600; color: var(--text); }
.crusc-anno-wrap { margin-left: auto; }
.crusc-anno-wrap select { font-weight: 400; text-transform: none; letter-spacing: 0; }
#crusc-kpi { margin-bottom: 16px; }
.kpi-hero .sub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.crusc-panel { margin-bottom: 16px; }
.crusc-panel-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crusc-tot { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-2); font-size: 12px; }
.crusc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .crusc-2col { grid-template-columns: 1fr; } }

/* grafico SVG annuale */
.crusc-chart { width: 100%; }
.crusc-svg { width: 100%; height: 220px; display: block; }
.crusc-axis-line { stroke: var(--border); stroke-width: 1; }
.crusc-axis-x { fill: var(--text-3); font-size: 11px; font-family: inherit; }
.crusc-ytd { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.crusc-ytd-item { display: inline-flex; align-items: center; gap: 6px; }
.crusc-ytd b.pos { color: var(--accent-dark); } .crusc-ytd b.neg { color: var(--rose); }
[data-theme="dark"] .crusc-ytd b.pos { color: var(--accent); }
.crusc-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* liste clienti */
.crusc-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--text-3); }
.crusc-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.crusc-li:last-child { border-bottom: none; }
.crusc-li-name { color: var(--text); font-weight: 500; }
.crusc-li-val { color: var(--rose); font-weight: 600; white-space: nowrap; }

/* mini-KPI prove */
.crusc-mini-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* .crusc-mini: stessa famiglia di .kpi-hero (brief: tutte le card dashboard
   alla stessa elevazione). La tipografia base (.crusc-mini-v / -k) è
   definita più in basso nel blocco condiviso famiglia dashboard. */
.crusc-mini {
  flex: 1; min-width: 90px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-card-cobalt);
}
/* Variante "accent" (es. mini KPI Prove "conversione"): numero cobalt soft */
.crusc-mini-v.crusc-accent { color: var(--accent-dark); }
[data-theme="dark"] .crusc-mini-v.crusc-accent { color: var(--accent); }
/* Accensione data-driven warn/alert sui mini */
.crusc-mini.warn  { background: rgba(255,159,10,.10); box-shadow: var(--shadow-card-warn); }
.crusc-mini.warn .crusc-mini-v  { color: var(--amber-text); }
[data-theme="dark"] .crusc-mini.warn .crusc-mini-v { color: var(--amber); }
.crusc-mini.alert { background: rgba(255,59,48,.09);  box-shadow: var(--shadow-card-alert); }
.crusc-mini.alert .crusc-mini-v { color: var(--rose-text); }
[data-theme="dark"] .crusc-mini.alert .crusc-mini-v { color: var(--rose); }
.spese-recap-fill.crusc-fill-accent { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }

/* ============ CONTABILITÀ — Dettaglio mensile + Obiettivi (slice 4) ============ */
.dett-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* tabella dettaglio: riga Totale evidenziata, numeri tabulari (header NON sticky) */
.dett-table { font-size: 12.5px; }
.dett-table td.num, .dett-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dett-table tbody tr:hover { background: var(--surface-2); }
.dett-table tfoot .dett-tot td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--surface-2); color: var(--text); }

/* column picker */
.dett-colpicker {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px;
}
.dett-colpick-title { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin-bottom: 2px; }
.dett-colpick-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

/* obiettivi */
.obj-panel { max-width: 680px; }
.obj-sub { margin-top: 20px; }
.obj-actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.obj-saved { color: var(--accent-dark); font-weight: 600; font-size: 13px; }
[data-theme="dark"] .obj-saved { color: var(--accent); }

/* badge "sotto target" e note obiettivo nel cruscotto */
.crusc-mini-v.crusc-under { color: var(--amber-text); }
.crusc-tgt { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin-left: 4px; }

/* =============================================================================
   RESTYLE iOS — layer di raffinamento (token nuovi, sticky frosted, componenti)
   Solo stile: nessun id/classe rimosso. Light + dark via token.
   ============================================================================= */

/* ---- Intestazioni sticky + frosted (solo l'header TOP di ogni pagina) ---- */
.page > .page-header {
  position: sticky; top: 0; z-index: 30;
  margin: -32px -32px 14px; padding: 14px 32px;
  min-height: var(--ph-h);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hair);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page > .page-header { background: var(--surface); }
}
.page > .page-header h2 { font-size: 21px; letter-spacing: -0.02em; }

/* tab-bar di pagina (Impostazioni · Contabilità): sticky sotto l'header */
.page > .settings-tabs,
.page > #ckpi-tabs {
  position: sticky; top: var(--ph-h); z-index: 29;
  margin: 0 -32px 16px; padding: 8px 32px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hair); border-radius: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page > .settings-tabs, .page > #ckpi-tabs { background: var(--surface); }
}

/* Team: l'header "Team" è figlia diretta di .page → riceve la barra frosted
   standard da `.page > .page-header` come ogni sezione. Il toggle viste sta
   SOTTO l'header (segmented control, stile invariato), poi il contenuto.
   Niente elementi sopra l'header. */
#page-team > .team-view-toggle { width: max-content; }

/* Calendario: header standard in cima. Eredita la barra frosted da
   .page > .page-header; qui correggo solo i margini negativi all'inset reale
   della pagina (.calendario-page ha padding 24px 28px, non 32px). */
#page-calendario > .page-header {
  margin: -24px -28px 12px;
  padding: 14px 28px;
}

/* welcome-card Dashboard: allinea al vetro delle altre testate */
.welcome-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hair);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .welcome-card { background: var(--surface); }
}

/* thead NON sticky (l'header tabella scorre col contenuto): restano sticky solo
   .page-header e le tab-bar. Mantengo solo lo sfondo del thead. */
table.tbl thead th { background: var(--surface-2); }

/* ---- Card / pannelli generici: hairline + ombra morbida (e1)
   Le card dashboard (.kpi-hero/.today-card/.crusc-mini) hanno il loro
   blocco dedicato con --shadow-card-cobalt: NON metterle qui dentro. ---- */
.block, .panel, .team-card, .team-detail-card, .turni-stat,
.now-strip, .dett-colpicker {
  border-color: var(--hair);
  box-shadow: var(--shadow-card);
}
.block, .now-strip { border-radius: var(--r-lg); }
.panel { border-radius: var(--r-xl); }
.team-card, .team-detail-card { border-radius: var(--r-lg); }

/* B3 — più aria: padding pannelli + gap sezioni/griglie */
.panel { padding: 24px; }
.page { gap: 22px; }
.kpi-grid-5, .kpi-grid-4, .kpi-grid-3 { gap: 16px; }

/* Dark — superficie elevata + filo di luce in alto. .kpi-hero/.today-card/
   .crusc-mini sono esclusi: il loro background di base resta --surface
   per coerenza con la "card neutra", e l'accensione warn/alert ha velo
   colorato che non va sovrascritto da --elevated. */
[data-theme="dark"] .panel,
[data-theme="dark"] .block,
[data-theme="dark"] .team-card,
[data-theme="dark"] .team-detail-card,
[data-theme="dark"] .now-strip,
[data-theme="dark"] .modal-card {
  background: var(--elevated);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.05);
}

/* hover lift su elementi cliccabili: mantiene la firma cobalt, leggera enfasi */
.kpi-hero.clickable, .today-card.clickable, .crusc-mini.clickable,
.team-body[data-act="open"], table.tbl tbody tr.row-click {
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring), background var(--dur-fast);
}
.kpi-hero.clickable:hover,
.today-card.clickable:hover,
.crusc-mini.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--accent-line);
}

/* Tipografia condivisa famiglia dashboard:
   - .crusc-mini-v / .turni-stat-v allineati al numero della .kpi-hero (26/600)
   - .crusc-mini-k / .turni-stat-k allineati a label uppercase 10/700 grigia */
.crusc-mini-v, .turni-stat-v { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.crusc-mini-k, .turni-stat-k { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.block-header h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* titoli pannello: da eyebrow uppercase a titolo vero (15.5/600, niente all-caps pesante) */
.crusc-panel-title, .team-detail-card-title {
  font-size: 15.5px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--text);
}
.kv-v { font-weight: 600; letter-spacing: -0.01em; }

/* ---- Tabelle: hairline + wrapper arrotondato ---- */
.tbl-wrap { border-radius: var(--r-lg); border: 1px solid var(--hair); }
table.tbl thead th { border-bottom-color: var(--hair); }
table.tbl tbody tr { border-bottom-color: var(--hair); }

/* ---- Bottoni / chip / badge: radii, hairline, active spring ---- */
.btn-primary, .btn-ghost, .btn-danger, .btn-sm, .btn-xs, .btn-mini {
  border-radius: var(--r-md);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast);
}
.btn-primary:active, .btn-ghost:active, .btn-danger:active, .btn-sm:active, .btn-xs:active, .btn-mini:active,
.chip:active, .seg:active, .team-tab:active, .sidebar-item:active { transform: scale(.975); }
/* (Override storico .btn-ghost rimosso: le proprietà sono definite nel blocco
   secondario sopra — bianco + hairline + ombra leggera, brief Step 4.) */
.btn-primary { box-shadow: var(--shadow-btn); }
.chip { border-radius: var(--r-pill); border-color: var(--hair); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--spring); }
.badge { border-radius: var(--r-pill); }

/* ---- Input / select / textarea: radii + focus accent morbido ---- */
.form-grid input, .form-grid select, .form-grid textarea,
.form-grid-inner input, .form-grid-inner select, .form-grid-inner textarea,
.abb-f-input, .cal-search input, input[type="month"], input[type="date"], input[type="time"] {
  border-radius: var(--r-md);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.form-grid-inner input:focus, .form-grid-inner select:focus, .form-grid-inner textarea:focus,
.abb-f-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Modali: overlay frosted + card elevata + micro-transizione spring ---- */
.modal-overlay {
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-overlay { background: rgba(8,9,20,.55); }
}
.modal-card {
  background: var(--elevated);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
}
.modal-overlay:not([hidden]) .modal-card { animation: mkPop var(--dur) var(--spring); }
@keyframes mkPop { from { opacity: 0; transform: scale(.98) translateY(6px); } to { opacity: 1; transform: none; } }
.modal-header { border-bottom-color: var(--hair); }

/* ---- Sidebar: voce attiva accent-soft + ring, hover morbido ---- */
.sidebar { border-right-color: var(--hair); }
.sidebar-item { border-radius: var(--r-md); transition: background var(--dur-fast), color var(--dur-fast); }
.sidebar-item:hover { background: var(--surface-2); }
.sidebar-item.is-active {
  background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
[data-theme="dark"] .sidebar-item.is-active { color: var(--accent); }

/* ---- Filter-bar / toolbar: hairline coerente ---- */
.filter-bar, .cal-filterbar, .cal-toolbar, .cal-grid-wrap { border-color: var(--hair); }
.cal-grid-wrap { border-radius: var(--r-lg); }

/* (Override .team-tabs border-bottom-color rimosso: .team-tabs ora è segmented
   con track interno, non più tab-bar con border-bottom — vedi Step 6.) */

/* =============================================================================
   FIX tabelle — design system "compact-first".
   Prima: ogni colonna prendeva una porzione del 100% → tra colonne descrittive
   e colonne finali (importi/azioni) si apriva un vuoto enorme.
   Ora: ogni cella si stringe sul contenuto (width:1% + nowrap), tranne UNA
   colonna elastica per tabella marcata .col-nome o .col-elastic che assorbe
   lo spazio. Importi (.num) e azioni restano allineati a destra.
   ============================================================================= */

/* Default compatto su ogni cella: si stringe sul contenuto, niente wrap */
table.tbl th,
table.tbl td {
  width: 1%;
  white-space: nowrap;
}

/* Colonna elastica: una per tabella (descrizione, nome, cliente, …).
   Assorbe tutto lo spazio rimanente; wrap normale per testi lunghi. */
table.tbl th.col-nome, table.tbl td.col-nome,
table.tbl th.col-elastic, table.tbl td.col-elastic {
  width: auto;
  white-space: normal;
  min-width: 0;
}

/* Variante hard: tronca con … invece di wrappare (opt-in via .col-ellipsis) */
table.tbl td.col-ellipsis {
  max-width: 0;          /* truc per ellipsis in tabella auto */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colonna azioni: stacco a sinistra + min-width che contiene i bottoni,
   sempre in fila a destra. Vale per .row-actions e per le celle che
   contengono icon/btn-xs/btn-mini direttamente. */
table.tbl td.row-actions,
table.tbl td:has(> .icon-btn),
table.tbl td:has(> .btn-xs),
table.tbl td:has(> .btn-mini) {
  text-align: right;
  padding-left: 20px;
}
table.tbl td.row-actions { min-width: 124px; }

/* Respiro a destra sull'ultima colonna dati (prezzo/data) prima delle azioni */
table.tbl td.num, table.tbl th.num { padding-right: 20px; }

/* Il wrapper resta scrollabile come fallback su mobile/contenuti molto larghi */
.tbl-wrap { overflow-x: auto; }

/* Tabella Abbonamenti — riserva sempre lo spazio per il numero MASSIMO di
   icone azione (4: paga 💳, congela/riattiva, modifica ✏, elimina ✕). Senza
   questo, le righe con act-paga visibile gonfiavano la cella .row-actions e
   comprimevano la colonna prezzo "€ XX.XX" adiacente, generando overlap. Ora
   ogni riga riserva la stessa larghezza, le righe con meno icone hanno solo
   uno spazio vuoto a sinistra dei bottoni (text-align:right già lo gestisce).
   Calcolo: 4 × 28px (icon-btn) + 3 × 8px (gap) + 20px padding-left = 156px;
   buffer per .icon-btn:hover border-strong → 168px. */
table.tbl#abb-table td.row-actions,
table.tbl#abb-table th:last-child { min-width: 168px; }

/* ============================================================
   SEGNALAZIONI (fase test/pilot) — FAB + toast + pagina elenco
   Token iOS del restyle: --surface, --hair, --r-md/--r-lg,
   --shadow-soft, --dur, --spring. Light + dark gestiti via
   token e via [data-theme="dark"] dove serve.
   ============================================================ */

/* FAB: cerchio 52px bottom-right, GRADIENTE COBALT + ombra cobalt (brief).
   z-index 90 = sotto modali (100), sopra contenuto. */
.mk-fab {
  position: fixed;
  /* A sinistra del FAB di Kinetico (.kin-fab: right:22px + 60px width).
     98px = 22 + 60 + 16gap → ~16px tra i due, centri allineati. */
  right: 98px;
  bottom: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur, .22s) var(--spring, ease),
              box-shadow var(--dur, .22s) var(--spring, ease),
              filter var(--dur-fast, .15s) ease;
  z-index: 90;
}
.mk-fab:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
  box-shadow: var(--shadow-soft), var(--shadow-btn);
}
.mk-fab:active { transform: scale(0.97); }
.mk-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mk-fab-ico { font-size: 22px; line-height: 1; pointer-events: none; }
/* (Override dark .mk-fab rimosso: usa direttamente var(--shadow-soft) +
   var(--shadow-btn) come light; i token dark sono già più profondi.) */

/* Toast di conferma: centrato bottom, fade+slide in 200ms */
.mk-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 12px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-soft, 0 12px 32px -12px rgba(20,22,45,.20));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur, .22s) ease,
              transform var(--dur, .22s) var(--spring, ease);
  z-index: 110;
}
.mk-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Pagina elenco segnalazioni */
.seg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.segnalazione-card {
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease;
}
.segnalazione-card:hover {
  border-color: var(--accent-line, var(--accent));
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.06));
}
.segnalazione-card.stato-risolta {
  opacity: 0.78;
}
.seg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.seg-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.seg-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.seg-nota {
  font-size: 13px;
  color: var(--text-2, var(--text-muted));
  line-height: 1.5;
  white-space: pre-wrap;
}
.seg-meta {
  font-size: 11.5px;
  color: var(--text-3, var(--text-muted));
    letter-spacing: 0.02em;
}

/* Badge stato (riusa .badge esistente — varianti warn/success uniformate Step 5) */
.badge-warn {
  background: var(--amber-soft);
  color: var(--amber-text);
}
[data-theme="dark"] .badge-warn {
  color: var(--amber);
}
/* badge-success → semantica POSITIVA (verde Cobalt) */
.badge-success {
  background: var(--positive-soft);
  color: var(--positive-text);
}
[data-theme="dark"] .badge-success {
  background: var(--positive-soft);
  color: var(--positive);
}

/* Empty card della pagina (riuso pattern, ma con styling neutro) */
.empty-card {
  background: var(--surface);
  border: 1px dashed var(--hair-strong, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 28px 20px;
  text-align: center;
}
.empty-card .muted { font-size: 14px; }

/* ============================================================
   DASHBOARD COMPENSI (tab Compensi di Contabilità & KPI)
   ============================================================ */

/* Token viola per contratti "fisso" (donut + barre orizzontali) */
:root { --viola-compensi: #7F77DD; }
[data-theme="dark"] { --viola-compensi: #9A93EE; }

/* Toolbar: legenda stati a destra + bottone stampa */
.comp-legend {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 11.5px;
  color: var(--text-3, var(--text-muted));
  align-items: center;
}
.comp-legend-i { white-space: nowrap; }
.comp-legend-mute { color: var(--text-3, var(--text-muted)); opacity: 0.85; }
.ckpi-toolbar { flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .comp-legend { width: 100%; margin-left: 0; }
}

/* === 4 METRIC CARD === */
.comp-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .comp-metric-grid { grid-template-columns: repeat(2, 1fr); }
}
.comp-metric {
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--dur-fast, .15s) ease;
}
.comp-metric .lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, var(--text-muted));
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.comp-metric .lbl .ico { font-size: 14px; }
.comp-metric .val {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.comp-metric .sub {
  font-size: 12px;
  color: var(--text-3, var(--text-muted));
}
.comp-metric.is-featured {
  box-shadow: var(--shadow-featured, 0 0 0 1px var(--accent), 0 8px 24px rgba(10, 132, 255,0.10));
}
.comp-metric.is-attention {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft, rgba(10, 132, 255,0.06)) 0%, var(--surface) 60%);
}

/* === TREND 6 mesi === */
.comp-trend-panel { margin-bottom: 14px; }
.comp-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; gap: 12px;
}
.comp-panel-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.comp-panel-sub { font-size: 12px; color: var(--text-3, var(--text-muted)); }
.comp-trend { width: 100%; }
.comp-trend-svg { width: 100%; height: auto; max-height: 200px; display: block; }
.comp-trend-axis { stroke: var(--hair, var(--border)); stroke-width: 1; }
.comp-trend-x {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  fill: var(--text-3, var(--text-muted));
}
.comp-trend-x.is-current { fill: var(--accent-dark, var(--accent)); font-weight: 700; }
/* Etichette asse Y del grafico netto (0, meta', max): stesso muted delle X. */
.comp-trend-y {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  fill: var(--text-3, var(--text-muted));
}

/* === Due colonne: Per trainer (1.4fr) | Mix contratto (1fr) === */
.comp-two-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .comp-two-cols { grid-template-columns: 1fr; }
}

/* Per trainer */
.comp-pt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comp-pt-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 14px;
}
.comp-pt-row .pt-name {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.comp-pt-row .pt-nm {
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comp-pt-row .pt-tipo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, var(--text-muted));
}
.comp-pt-row .pt-bar {
  height: 6px;
  background: var(--surface-3, #eef0f3);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.comp-pt-row .pt-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  animation: compBarFill 300ms ease-out forwards;
}
.comp-pt-row.is-fisso .pt-bar-fill { background: var(--viola-compensi); }
.comp-pt-row .pt-vals {
  font-size: 13px;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@keyframes compBarFill { from { width: 0; } }
.comp-pt-insight {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-2, var(--text));
  padding-top: 10px;
  border-top: 1px dashed var(--hair, var(--border));
}
.comp-pt-insight:empty { display: none; }

/* Mix contratto / donut */
.comp-mix-panel { display: flex; flex-direction: column; }
.comp-mix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.comp-donut-svg { width: 160px; height: 160px; display: block; }
.comp-donut-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  fill: var(--text-3, var(--text-muted));
}
.comp-donut-value {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
}
.comp-mix-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  width: 100%;
}
.comp-mix-legend .mix-l {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comp-mix-legend .mix-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Note inline nella tabella compensi */
.comp-note-input {
  width: 100%;
  min-width: 140px;
  max-width: 220px;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast, .15s) ease;
}
.comp-note-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
table.tbl th.col-note, table.tbl td.col-note { min-width: 160px; }

/* Stampa: la finestra di stampa apre un documento dedicato, quindi @media print
   qui serve solo a evitare di stampare per errore l'intera app se qualcuno usa
   Cmd+P sulla pagina. Nascondiamo gli elementi non rilevanti. */
@media print {
  .mk-fab, .sidebar, .cal-toolbar, .ckpi-toolbar, .comp-metric-grid,
  .comp-trend-panel, .comp-two-cols, .ckpi-tabs, .period-row { display: none !important; }
}

/* ============================================================
   TEAM REPORT (tab Report del dettaglio Team)
   ============================================================ */

/* Toolbar del tab Report: selettore mese + azioni a destra */
.trep-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}
.trep-toolbar .comp-month-label { display: inline-flex; align-items: center; gap: 8px; }
.trep-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 700px) {
  .trep-actions { margin-left: 0; width: 100%; }
}

/* 3 stat card del mese selezionato (riusa .comp-metric in 3 col) */
.trep-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .trep-stats { grid-template-columns: 1fr; }
}

/* Card "Entrate da servizi extra": quando visibile deve staccarsi dal grafico
   sotto (senza, la card tocca il pannello "Andamento netto"). */
#trep-extra:not([hidden]) { margin-bottom: 14px; }

/* Riga bottone/badge "Segnala versamento effettuato" dentro la card extra. */
.trep-versa-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* === Pannello "Versamenti quota" (Compensi, lato titolare) === */
.comp-versa-panel { margin-bottom: 14px; }
.comp-versa-group { display: flex; flex-direction: column; gap: 8px; }
.comp-versa-group + .comp-versa-group { margin-top: 14px; }
.comp-versa-grouplbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3, var(--text-muted)); margin-bottom: 2px;
}
.comp-versa-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 10px);
}
.comp-versa-row.is-confirmed { background: transparent; }
.comp-versa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comp-versa-nome { font-size: 13.5px; font-weight: 600; color: var(--text); }
.comp-versa-meta { font-size: 12px; color: var(--text-3, var(--text-muted)); }
.comp-versa-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Filtri periodo/collaboratore (P3): stessa riga sopra la lista scrollabile. */
.comp-versa-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.comp-versa-filters .abb-f-input { max-width: 220px; }
/* Lista scrollabile: stesso pattern di .ric-list / .absorb-list (max-height + scroll). */
.comp-versa-scroll { max-height: 46vh; overflow-y: auto; }
@media (max-width: 640px) {
  .comp-versa-row { flex-direction: column; align-items: stretch; }
  .comp-versa-actions { justify-content: flex-end; }
  .comp-versa-filters .abb-f-input { max-width: none; flex: 1; }
}

/* === Tab "Statistiche" — cruscotto economico del collaboratore === */
.tstats-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tstats-period-lbl { font-size: 12px; font-weight: 600; color: var(--text-3, var(--text-muted)); }
.tstats-toolbar .abb-f-input { max-width: 220px; }
/* Card riepilogo (riusa .comp-metric): stessa griglia a 3 delle stat Report. */
.tstats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .tstats-cards { grid-template-columns: 1fr; } }
.tstats-section { margin-bottom: 16px; }
/* Lista versamenti nel cruscotto */
.tstats-versa { display: flex; flex-direction: column; gap: 8px; }
.tstats-versa-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--hair, var(--border));
}
.tstats-versa-row:last-child { border-bottom: none; }
.tstats-versa-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.tstats-versa-meta { font-size: 12px; color: var(--text-3, var(--text-muted)); }
.tstats-versa-imp { font-weight: 700; white-space: nowrap; }

/* Flag ✎ rettificate manualmente nella tabella riepilogo */
.trep-ore-mod {
  color: var(--accent-dark, var(--accent));
  font-weight: 600;
  border-bottom: 1px dotted var(--accent);
  cursor: help;
}

/* === Popup riepilogo invio === */
.trep-recap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
}
.trep-recap-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 4px 0;
}
.trep-recap-k {
  color: var(--text-3, var(--text-muted));
}
.trep-recap-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trep-recap-flag {
  font-size: 12px;
  color: var(--accent-dark, var(--accent));
  margin: 2px 0 4px;
  padding-left: 2px;
}
/* Banner errore caricamento turni (vista Report): distingue un errore di
   lettura — invio bloccato — da un mese legittimamente senza turni (0 ore). */
.trep-turni-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--rose-soft);
  border: 1px solid var(--rose-soft);
  border-left: 3px solid var(--rose);
  color: var(--rose-text);
  border-radius: var(--r-md, 14px);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.trep-recap-net {
  border-top: 1px dashed var(--hair, var(--border));
  margin-top: 6px;
  padding-top: 10px;
}
.trep-recap-net .trep-recap-v {
  font-size: 20px;
  color: var(--accent-dark, var(--accent));
}
[data-theme="dark"] .trep-recap-net .trep-recap-v {
  color: var(--accent);
}

/* Box warning ambra (popup 2) — coerente con .badge-warn */
.trep-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #92400e;
  border-radius: var(--r-md, 14px);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}
[data-theme="dark"] .trep-warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fcd34d;
}

/* Micro-transizione apertura per i popup del Report (fade+scale ~150ms).
   Sfrutta l'animazione mkPop già definita per .modal-card. */
#modal-trep-ore:not([hidden]) .modal-card,
#modal-trep-invio:not([hidden]) .modal-card {
  animation: mkPop var(--dur, .22s) var(--spring, ease);
}

/* =============================================================================
   SCROLLBAR custom globale (light + dark, webkit + Firefox)
   8px, track trasparente, thumb arrotondato semi-trasparente.
   Vale per body e per tutti i wrapper con overflow (.tbl-wrap, calendari,
   modali, drawer, ecc.) senza dover taggarli a uno a uno.
   ============================================================================= */

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
[data-theme="dark"] html { scrollbar-color: rgba(255,255,255,.18) transparent; }

/* * eredita scrollbar-color sul singolo wrapper con overflow */
* { scrollbar-width: thin; }

/* WebKit / Blink (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* ============================================================
   DASHBOARD — gerarchia "Oggi" → divider → testata "Andamento"
   I pill periodo erano appiccicati sotto "Da fare oggi" e sembravano
   riferirsi a quello. Ora un divider netto separa il blocco "oggi"
   (sempre fresh, nessun filtro) dalla sezione "Andamento" che
   introduce visivamente Operativo + Commerciale + Prove + Mix.
   ============================================================ */
.dash-divider {
  border: 0;
  height: 1px;
  background: var(--hair-strong, var(--border));
  margin: 28px 0 14px;
}

/* ===== Regione Andamento: contenitore unico governato dal filtro periodo ===== */
.andamento-region {
  background:
    linear-gradient(180deg, rgba(10,132,255,.035), rgba(10,132,255,0) 220px),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 18px 20px;
  margin-top: 6px;
  box-shadow: inset 0 0 0 1px rgba(10,132,255,.05);
}

/* Barra controlli sticky a 2 righe */
.ctrlbar {
  position: sticky; top: 73px; z-index: 5;   /* era 0: si sovrapponeva alla .welcome-card sticky (h73px) che copriva la pill scrollando */
  background: rgba(244,246,250,.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  margin: 0 -18px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--hair);
  border-radius: 24px 24px 0 0;
}
/* Dark: il velo della barra sticky usa il surface-2 scuro translucido
   (il valore light hardcoded resterebbe una barra chiara in dark). */
[data-theme="dark"] .ctrlbar { background: rgba(27,32,52,.86); }
.ctrlbar-r1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctrlbar-title { display: flex; flex-direction: column; gap: 1px; margin-right: 4px; }
.ctrlbar-title h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.005em; color: var(--text); }
.ctrlbar-title .s { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.ctrlbar .period-pill { margin-left: 12px; }   /* era auto: il label a larghezza variabile spingeva la pill (fino a 71px) */
.ctrlbar-label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;   /* il label flotta a destra e assorbe la variazione di larghezza → la pill resta ferma */
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.ctrlbar-label .pn { color: var(--text); font-weight: 700; }

/* Riga 2: ALTEZZA FISSA → la riga 1 non si sposta mai al cambio periodo */
.ctrlbar-r2 {
  min-height: 38px; display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hair);
}
.ctrlbar-r2 .hint { font-size: 12px; color: var(--text-3); }

/* Etichette pannello leggere (sostituiscono i .sec-head pesanti dentro la regione) */
.panel-label { display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px; }
.panel-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-grad); }
.panel-label h4 { margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.panel-label .pl-sub { font-size: 11px; color: var(--text-3); font-weight: 500; }
.panel-label .badge-new {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--accent-dark); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 6px;
}
[data-theme="dark"] .panel-label .badge-new { color: var(--accent); }
.panel-label.region-first, .region-first { margin-top: 18px; }

/* Mobile */
@media (max-width: 900px) {
  .ctrlbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; margin: 0; padding: 14px 0 10px; }
  .andamento-region { padding: 6px 12px 16px; }
  .ctrlbar .period-pill { margin-left: 0; width: 100%; overflow-x: auto; }
  .ctrlbar-label { margin-left: 0; }
}

/* ============================================================
   GUIDA — manuale utente + ricerca
   Hub a card (riusa .impost-grid / .impost-card / .impost-card-arr).
   Header sezione, barra di ricerca grande/centrata, vista sezione
   con TOC sticky + corpo schede scrollabile. Mobile-first: <900px
   il TOC si chiude in alto come accordion.
   ============================================================ */

.guida-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Barra ricerca grande */
.guida-search-wrap {
  position: relative;
  max-width: 720px;
  margin: 8px 0 22px;
}
#guida-search {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  padding: 14px 44px 14px 18px;
  border: 1.5px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease;
}
#guida-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(10, 132, 255,.18));
}
[data-theme="dark"] #guida-search:focus {
  box-shadow: 0 0 0 3px rgba(90, 169, 255,.22);
}
.guida-search-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-3, var(--text-muted));
  font-size: 16px;
  cursor: pointer;
}
.guida-search-clear:hover { color: var(--text); }

/* Hub grid: riusa .impost-grid ma con max-width più ampio per le 14 card */
.guida-grid { max-width: 1000px; }
.guida-card .impost-card-desc { color: var(--text-3, var(--text-muted)); font-size: 12px; }

/* Risultati ricerca */
.guida-results {
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
  max-width: 1000px;
}
.guida-results-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, var(--text-muted));
  margin-bottom: 10px;
}
.guida-results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guida-result {
  cursor: pointer;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
}
.guida-result:hover { border-color: var(--accent); background: var(--surface); }
.guida-result-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.guida-result-num { font-size: 12px; color: var(--text-3, var(--text-muted)); flex-shrink: 0; }
.guida-result-title { font-weight: 700; font-size: 14.5px; color: var(--text); flex: 1 1 auto; min-width: 0; }
.guida-result-sec { font-size: 11.5px; color: var(--text-3, var(--text-muted)); white-space: nowrap; }
.guida-result-snip { font-size: 13px; line-height: 1.45; color: var(--text-2, var(--text)); margin-top: 4px; }
.guida-results mark { background: var(--accent-soft, rgba(10, 132, 255,.20)); color: inherit; padding: 0 2px; border-radius: 2px; }
.guida-noresults { font-size: 13.5px; }
.guida-noresults p { margin: 0 0 10px; }
.guida-noresults-list { display: flex; flex-wrap: wrap; gap: 8px; }
.guida-noresults-list a {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2, #f6f8fa); border: 1px solid var(--hair, var(--border));
  color: var(--text); text-decoration: none;
}
.guida-noresults-list a:hover { border-color: var(--accent); }

/* Sezione: layout TOC + article */
.guida-section {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  max-width: 1100px;
}
.guida-toc {
  position: sticky;
  top: 16px;
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.guida-toc h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3, var(--text-muted));
  font-weight: 700;
}
.guida-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.guida-toc-list a {
  display: block;
  text-decoration: none;
  color: var(--text-2, var(--text));
  font-size: 12.5px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.guida-toc-list a:hover { background: var(--surface-2, #f6f8fa); color: var(--text); }

@media (max-width: 900px) {
  .guida-section { grid-template-columns: 1fr; }
  .guida-toc { position: static; max-height: none; }
}

/* Article: schede scheda-per-scheda */
.guida-article { min-width: 0; }
.guida-intro { font-size: 14px; line-height: 1.55; color: var(--text-2, var(--text)); margin-bottom: 18px; }
.guida-card-block {
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 20px 24px;
  margin-bottom: 14px;
  scroll-margin-top: 16px;
}
.guida-card-block.is-pulse {
  animation: guidaPulse 1.2s ease-out;
}
@keyframes guidaPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow, rgba(10, 132, 255,.45)); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.guida-card-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.guida-card-block p { margin: 8px 0; line-height: 1.6; font-size: 14.5px; color: var(--text); }
.guida-card-block ul, .guida-card-block ol { margin: 8px 0 8px 24px; padding: 0; line-height: 1.6; font-size: 14.5px; }
.guida-card-block li { margin: 4px 0; }
.guida-card-block strong { font-weight: 700; }
.guida-card-block code { background: var(--surface-2, #f6f8fa); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.guida-card-block hr { border: none; border-top: 1px solid var(--hair, var(--border)); margin: 14px 0; }

/* Info row Dove/Chi */
.guida-meta {
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guida-meta-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.guida-meta-k { color: var(--text-3, var(--text-muted)); font-weight: 600; flex-shrink: 0; min-width: 80px; }
.guida-meta-v { color: var(--text); }

/* Keyword chip */
.guida-kw {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--hair, var(--border));
}
.guida-kw-chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2, #f6f8fa);
  color: var(--text-3, var(--text-muted));
  border: 1px solid var(--hair, var(--border));
}

/* Vedi anche */
.guida-vedi {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-2, var(--text));
}
.guida-vedi-lbl {
  font-weight: 700;
  color: var(--text-3, var(--text-muted));
  margin-right: 6px;
}
.guida-vedi a {
  color: var(--accent-dark, var(--accent));
  text-decoration: none;
  font-weight: 500;
}
[data-theme="dark"] .guida-vedi a { color: var(--accent); }
.guida-vedi a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 600px) {
  #guida-search { font-size: 16px; padding: 12px 40px 12px 14px; }
  .guida-card-block { padding: 16px 18px; }
  .guida-card-title { font-size: 17px; }
}

/* ============================================================
   IMPOSTAZIONI — hub a card (commit 1)
   Indice = griglia di card-tile cliccabili (icona + titolo + descrizione +
   chevron). Sezione = una singola sezione visibile, header dell'hub con
   "← Indietro". Stile nativo del design system: --surface / --hair /
   --r-md / --shadow-soft / hover con border accent.
   ============================================================ */
.impost-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.impost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 880px;
}
@media (max-width: 720px) {
  .impost-grid { grid-template-columns: 1fr; }
}

.impost-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: border-color var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease),
              box-shadow var(--dur-fast, .15s) ease,
              background var(--dur-fast, .15s) ease;
}
.impost-card:hover {
  border-color: var(--accent-line, var(--accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.06));
}
.impost-card:active { transform: scale(.99); }
/* Variante "pericolo": l'azione dietro questa card e' irreversibile, deve
   distinguersi a colpo d'occhio dalle altre. */
/* Riquadro di avviso della sezione Reset: stessi token rose gia' usati per gli
   stati di errore, nessun colore fuori palette. */
.reset-warn {
  border: 1px solid var(--rose-text); border-radius: var(--r-md);
  background: var(--rose-soft); padding: 14px 16px;
}
.reset-warn-h {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; color: var(--rose-text); margin-bottom: 8px;
}
.reset-warn p { margin: 6px 0; font-size: 13px; }
.reset-list { margin: 8px 0 6px; padding-left: 20px; font-size: 13px; }
.reset-list li { margin: 2px 0; }

.impost-card-danger { border-color: var(--rose-text); }
.impost-card-danger .impost-card-ico { color: var(--rose-text); }
.impost-card-danger .impost-card-title { color: var(--rose-text); }
.impost-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.impost-card-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-2, #f6f8fa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.impost-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.impost-card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.impost-card-desc {
  font-size: 12.5px;
  color: var(--text-3, var(--text-muted));
  line-height: 1.4;
}
.impost-card-arr {
  font-size: 22px;
  color: var(--text-3, var(--text-muted));
  flex-shrink: 0;
  transition: transform var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.impost-card:hover .impost-card-arr {
  color: var(--accent);
  transform: translateX(2px);
}

/* Sezioni: hidden di default; .impostazioni.js le mostra una alla volta. */
.impost-section { display: block; }
.impost-section[hidden] { display: none; }

/* ============================================================
   IMPOSTAZIONI — sezioni interne (commit 2+)
   Form a 2 colonne desktop, 1 mobile. Token nativi del design system.
   ============================================================ */
.impost-card-block { max-width: 760px; margin-bottom: 16px; }
.impost-block-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.impost-block-sub   { margin: 0 0 14px; font-size: 12.5px; }
.impost-block-h4    { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2, var(--text)); letter-spacing: 0.01em; }

.impost-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-top: 8px;
}
@media (max-width: 720px) { .impost-form { grid-template-columns: 1fr; } }

/* Form field (brief Step 7): label 11px --text-2; field bg --field, radius 12;
   focus = anello cobalt + outline --accent, niente bordo pesante. */
.impost-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}
.impost-field.full { grid-column: 1 / -1; }
.impost-field span { letter-spacing: 0.02em; }
.impost-field input,
.impost-field select,
.impost-field textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--field, var(--surface));
  color: var(--text);
  transition: border-color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease;
}
.impost-field input:focus,
.impost-field select:focus,
.impost-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.impost-divider {
  height: 1px;
  background: var(--hair, var(--border));
  margin: 6px 0 2px;
}
.impost-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Social extra */
.impost-social-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.impost-social-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 6px;
  align-items: center;
}
.impost-social-row input {
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--hair, var(--border)); border-radius: 7px;
  background: var(--surface); color: var(--text);
}

/* Logo */
.impost-logo-row { gap: 6px; }
.impost-logo-box {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.impost-logo-preview {
  width: 64px; height: 64px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 8px;
  background: var(--surface-2, #f6f8fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-3, var(--text-muted));
  overflow: hidden; flex-shrink: 0;
}
.impost-logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* Numerazione fatture: esempio live */
.impost-fnum-preview {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: 8px;
  padding: 10px 14px;
}
.impost-fnum-label { color: var(--text-3, var(--text-muted)); font-size: 12px; }
.impost-fnum-value {
    font-size: 16px;
  font-weight: 700;
  color: var(--accent-dark, var(--accent));
}
[data-theme="dark"] .impost-fnum-value { color: var(--accent); }

/* Sezione "Menu a tendina" (commit 3) */
.impost-gate {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-3, var(--text-muted));
  background: var(--surface-2, #f6f8fa);
  border: 1px dashed var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
}
.impost-dd-toolbar {
  display: flex;
  gap: 8px;
  margin: 14px 0 10px;
  align-items: stretch;
}
.impost-dd-toolbar input[type="text"] {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.impost-dd-toolbar input[type="text"]:focus { outline: none; border-color: var(--accent); }
.impost-dd-table .impost-dd-val { font-weight: 500; }
.impost-dd-tog { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; }
.impost-dd-note { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3, var(--text-muted)); }

/* Sezione "Utenti & Ruoli" (commit 4) */
.impost-info-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
}
.impost-info-ico {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.impost-info-body { display: flex; flex-direction: column; gap: 4px; }
.impost-info-body p { margin: 0; font-size: 13px; line-height: 1.5; }
.impost-info-body button { align-self: flex-start; margin-top: 4px; }
.impost-ut-role {
  font-family: inherit; font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}
.impost-ut-role:focus { outline: none; border-color: var(--accent); }

/* Sezione "Blocchi" (commit 5) */
.impost-blocchi-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.impost-blocchi-toolbar .btn-primary { margin-left: auto; }
.impost-blocchi-form {
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Sezione "Visibilità pagine" (commit 6) */
.impost-vis-table th.num,
.impost-vis-table td.num { text-align: center !important; padding-right: 10px; }
.impost-vis-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.impost-vis-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; }
.impost-vis-grouphead td {
  background: var(--surface-2, #f6f8fa);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, var(--text-muted));
  padding: 8px 12px !important;
}
.impost-vis-ico { display: inline-block; margin-right: 6px; }

/* CLIENTE protagonista nella modale prenotazione: label peso maggiore,
   input alto e contornato accent in focus. */
.pren-cliente-hero { gap: 6px !important; }
.pren-cliente-hero-lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  text-transform: none;
}
.pren-cliente-hero input[type="text"] {
  font-size: 16px;
  padding: 12px 14px;
  font-weight: 500;
  background: var(--surface);
  border: 1.5px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  transition: border-color var(--dur-fast, .15s) ease,
              box-shadow var(--dur-fast, .15s) ease;
}
.pren-cliente-hero input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(10, 132, 255,.18));
}
[data-theme="dark"] .pren-cliente-hero input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(90, 169, 255,.22);
}

/* Sezione "Avanzato" (details/summary nativo) chiusa di default. */
.pren-advanced {
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 4px 12px 4px 12px;
}
.pren-advanced[open] { padding-bottom: 12px; }
.pren-advanced-summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3, var(--text-muted));
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pren-advanced-summary::-webkit-details-marker { display: none; }
.pren-advanced-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--dur-fast, .15s) ease;
  color: var(--text-3, var(--text-muted));
}
.pren-advanced[open] .pren-advanced-summary::before {
  transform: rotate(90deg);
}
.pren-advanced[open] .pren-advanced-summary {
  color: var(--text);
}
.pren-advanced .pren-note-box,
.pren-advanced .pren-blocca-wrap {
  margin-top: 8px;
}

/* Editor prenotazione esistente (cal aperto + click su card) */
.pren-edit-box {
  background: var(--accent-soft, rgba(10, 132, 255,.06));
  border: 1px solid var(--accent-line, var(--accent));
  border-radius: var(--r-md, 14px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pren-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent-dark, var(--accent));
  font-weight: 600;
}
[data-theme="dark"] .pren-edit-head { color: var(--accent); }
.pren-edit-actions {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
}
.pren-edit-error { margin: 0; }

/* Controlli "Inizio + Durata" della modale prenotazione (solo cal aperto) */
.pren-open-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 10px 12px;
}
.pren-open-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 130px;
  min-width: 0;
}
.pren-open-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, var(--text-muted));
  font-weight: 600;
}
.pren-open-field input[type="time"],
.pren-open-field input[type="number"],
.pren-open-field select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

/* ============================================================
   KINETICO — FAB + pannello chat (agente AI in-app)
   FAB in basso a destra, visibile solo a titolare/backoffice
   (gating in js/agente.js). Pannello drawer destro su desktop,
   full-screen su mobile. Token nativi del design system.
   ============================================================ */

/* FAB — il button è anche il contenitore dell'avatar (brief §2.1).
   .kin-fab tiene posizionamento + ombra + hover; il LOOK (sfondo
   brand #0B0C1A, dimensione, border-radius) viene dalle classi
   .kin + .kin--fab del brief. */
.kin-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 6px 20px rgba(10,132,255,0.35), 0 2px 6px rgba(94,92,230,0.22);
  transition: transform var(--dur-fast, .15s) var(--spring, ease),
              box-shadow var(--dur-fast, .15s) ease;
}
.kin-fab:hover { transform: translateY(-2px) scale(1.05); }
.kin-fab:active { transform: scale(.97); }
.kin-fab[hidden] { display: none; }

/* ─── Avatar Kinetico (brief §2.1) ─────────────────────────
   Volto "sguardo chevron" SVG inline; stati via data-state.
   ─────────────────────────────────────────────────────────── */
.kin { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-grad); }
.kin--fab { width: 56px; height: 56px; border-radius: 50%; }
.kin--chip { width: 40px; height: 40px; border-radius: 12px; }
.kin-face { width: 78%; height: 78%; transform-box: fill-box; transform-origin: center; }
.kin-eyes, .kin-face .kin-smile { display: block; }
.kin-eyes-happy, .kin-smile-big, .kin-dots { display: none; }
.kin-eyes { transform-box: fill-box; transform-origin: center; }

.kin[data-state="idle"] .kin-face { animation: kin-breathe 2.8s ease-in-out infinite; }
.kin[data-state="idle"] .kin-eyes { animation: kin-blink 4.2s ease-in-out infinite; }

.kin[data-state="thinking"] .kin-smile { display: none; }
.kin[data-state="thinking"] .kin-dots  { display: block; }
.kin[data-state="thinking"] .kin-eyes  { animation: kin-scan 1.3s ease-in-out infinite; }
.kin[data-state="thinking"] .kin-dots circle { animation: kin-type 1.2s ease-in-out infinite; }
.kin[data-state="thinking"] .kin-dots circle:nth-child(2) { animation-delay: .15s; }
.kin[data-state="thinking"] .kin-dots circle:nth-child(3) { animation-delay: .3s;  }

.kin[data-state="happy"] .kin-eyes,
.kin[data-state="happy"] .kin-smile { display: none; }
.kin[data-state="happy"] .kin-eyes-happy,
.kin[data-state="happy"] .kin-smile-big { display: block; }
.kin[data-state="happy"] .kin-face { animation: kin-bounce 1.6s ease-in-out infinite; }

@keyframes kin-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes kin-blink   { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }
@keyframes kin-scan    { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes kin-type    { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes kin-bounce  { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } 60% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .kin * { animation: none !important; } }

/* Hint primo utilizzo (tooltip sopra il FAB) */
.kin-hint {
  position: fixed;
  /* Sopra il kin-fab e a destra del mk-fab (.mk-fab è a right:98px).
     right:22px allinea il bordo destro al kin-fab; bottom:95px tiene
     l'hint sopra il mk-fab (y_top mk-fab = 78px). */
  right: 22px;
  bottom: 95px;
  z-index: 90;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hair, var(--border));
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-soft, 0 6px 24px rgba(0,0,0,.10));
  max-width: 240px;
  cursor: pointer;
  animation: kinHintIn .35s var(--spring, ease) both;
}
@keyframes kinHintIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.kin-hint[hidden] { display: none; }
.kin-hint::after {
  /* Triangolino in basso che punta al kin-fab (sotto l'hint). */
  content: '';
  position: absolute;
  right: 18px; bottom: -8px;
  width: 0; height: 0;
  border-top: 8px solid var(--surface);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

/* Pannello chat */
.kin-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--bg, #f0f2f5);
  border-left: 1px solid var(--hair, var(--border));
  z-index: 95;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 28px rgba(0,0,0,0.10);
  animation: kinPanelIn .22s var(--spring, ease) both;
}
@keyframes kinPanelIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.kin-panel[hidden] { display: none; }

.kin-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--accent-grad);
  color: #fff;
  border-bottom: none;
}
.kin-head-id { display: flex; align-items: center; gap: 10px; }
.kin-head-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.kin-head-avatar .mk-ico { width: 20px; height: 20px; }
.kin-head-text { display: flex; flex-direction: column; }
.kin-head-text strong { font-size: 14.5px; letter-spacing: -0.005em; color: #fff; }
.kin-head-text .muted { font-size: 11.5px; color: rgba(255,255,255,.82); }

/* Azioni header (nuova chat + chiudi) su gradiente Cobalt */
.kin-head-actions { display: flex; align-items: center; gap: 4px; }
.kin-head-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff; cursor: pointer;
  transition: background var(--dur-fast, .15s) ease;
}
.kin-head-btn:hover { background: rgba(255,255,255,.30); }
.kin-head-btn .mk-ico { width: 18px; height: 18px; }

/* Body: lista bolle scrollabile */
.kin-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Empty state: saluto Kin + 5 chip categoria a tocco. La textarea in fondo
   resta come fallback per le how-to dal manuale (e per la futura CF). */
.kin-empty { padding: 18px 14px 6px; text-align: left; }
.kin-empty-hi   { margin: 0 0 6px; font-size: 17px; }
.kin-empty-sub  { margin: 0 0 18px; font-size: 13.5px; color: var(--text-2, var(--text)); line-height: 1.5; }
.kin-empty-hint { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.04em; }
.kin-empty-note { margin: 14px 0 0; font-size: 12px; color: var(--text-3, var(--text-muted)); line-height: 1.5; }

/* Chip CATEGORIA (5 grandi, una per categoria di Avvisi). Stessa estetica
   delle card hub Impostazioni. */
.kin-quick-cats { display: flex; flex-direction: column; gap: 8px; }
.kin-quick-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: var(--r-md, 14px);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: border-color var(--dur-fast, .15s) ease,
              transform var(--dur-fast, .15s) var(--spring, ease),
              box-shadow var(--dur-fast, .15s) ease;
}
.kin-quick-cat:hover {
  border-color: var(--accent-line, var(--accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.06));
}
.kin-quick-cat:active { transform: scale(.99); }
.kin-quick-ico {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2, #f6f8fa);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.kin-quick-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kin-quick-lbl { font-size: 14px; font-weight: 700; color: var(--text); }
.kin-quick-sub { font-size: 12px; color: var(--text-3, var(--text-muted)); line-height: 1.4; }
.kin-quick-arr {
  font-size: 20px;
  color: var(--text-3, var(--text-muted));
  flex-shrink: 0;
  transition: transform var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.kin-quick-cat:hover .kin-quick-arr { color: var(--accent); transform: translateX(2px); }

/* Chip PERIODO (mostrate dentro la bolla assistant dopo la scelta categoria) */
.kin-quick-periods {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.kin-quick-period {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
}
.kin-quick-period:hover { border-color: var(--accent); background: var(--surface-2, var(--surface)); }
.kin-quick-period:disabled { opacity: 0.5; cursor: not-allowed; }

/* Form "Scegli date" */
.kin-quick-custom {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px;
  margin-top: 8px;
}
.kin-quick-custom label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-3, var(--text-muted));
  font-weight: 600;
}
.kin-quick-custom input[type="date"] {
  font-family: inherit; font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.kin-quick-custom input[type="date"]:focus { outline: none; border-color: var(--accent); }
.kin-quick-custom button { margin-left: auto; }
@media (max-width: 480px) {
  .kin-quick-custom label { flex: 1 1 calc(50% - 4px); }
  .kin-quick-custom button { width: 100%; margin-left: 0; }
}

/* Bolle */
.kin-bubble {
  display: flex;
  gap: 8px;
  max-width: 100%;
  align-items: flex-start;
}
.kin-bubble.kin-user { flex-direction: row-reverse; }
.kin-bubble-ico {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface-2, #f6f8fa);
  color: var(--text-3, var(--text));
}
.kin-bubble.kin-assistant .kin-bubble-ico {
  background: var(--accent-grad);
  color: #fff;
  font-size: 16px;
}
.kin-bubble-body {
  background: var(--surface);
  border: 1px solid var(--hair, var(--border));
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  max-width: calc(100% - 44px);
}
.kin-bubble.kin-user .kin-bubble-body {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
}
.kin-bubble-body p { margin: 0 0 6px; }
.kin-bubble-body p:last-child { margin: 0; }
.kin-bubble-body ul { margin: 6px 0; padding-left: 18px; }
.kin-bubble-body li { margin: 2px 0; }
.kin-bubble-body strong { font-weight: 700; }
.kin-bubble-body code {
  background: var(--surface-2, #f6f8fa);
  padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px;
}

/* Actions sotto bolla (Vedi + Vai a) */
.kin-bubble-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.kin-pill {
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
}
.kin-pill:hover { border-color: var(--accent); }
.kin-pill-go { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-btn); }
[data-theme="dark"] .kin-pill-go { color: var(--bg); }
.kin-pill-go:hover { filter: brightness(1.05); }

/* Indicatore "sto pensando" */
.kin-thinking .kin-bubble-body { display: inline-flex; gap: 4px; padding: 12px 14px; }
.kin-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3, var(--text-muted));
  display: inline-block;
  animation: kinDot 1.2s infinite ease-in-out;
}
.kin-dot:nth-child(2) { animation-delay: .15s; }
.kin-dot:nth-child(3) { animation-delay: .3s; }
@keyframes kinDot {
  0%,80%,100% { transform: scale(0.7); opacity: 0.5; }
  40%         { transform: scale(1);   opacity: 1;   }
}

/* Footer: textarea + invio */
.kin-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--hair, var(--border));
}
#kin-input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--hair, var(--border));
  border-radius: 12px;
  background: var(--bg, #fff);
  color: var(--text);
  resize: none;
  min-height: 40px;
  max-height: 120px;
  line-height: 1.4;
}
#kin-input:focus { outline: none; border-color: var(--accent); }
#kin-send {
  min-width: 40px; height: 40px; font-size: 16px;
  border-radius: 12px;
  background: var(--accent-grad);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-btn);
}
#kin-send:hover { filter: brightness(1.05); }

/* Mobile: full-screen */
@media (max-width: 720px) {
  .kin-panel { width: 100vw; border-left: none; }
  /* Solo posizionamento: dimensione/border-radius vengono da .kin--fab. */
  .kin-fab { right: 16px; bottom: 16px; }
  /* Hint sopra il kin-fab mobile (y_top kin-fab = 72px = 16+56). */
  .kin-hint { right: 16px; bottom: 84px; }
  /* FAB Segnalazioni mobile a sinistra del kin-fab (right:16+56+10gap=82). */
  .mk-fab { right: 82px; bottom: 18px; }
}

/* =============================================================================
   LISTE — 4 card smart (stack collassabile) + selettore periodo
   ============================================================================= */
.liste-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.liste-period-lbl { font-size: 12px; color: var(--text-3); margin-right: 2px; }
.liste-pill {
  font-size: 13px; font-weight: 500;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.liste-pill:hover { border-color: var(--border-strong); }
.liste-pill.is-active {
  color: #fff; border-color: transparent;
  background: var(--accent-grad);
  box-shadow: 0 4px 12px -4px rgba(10,132,255,.5);
}

.liste-body { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

.liste-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.liste-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 8px;
  cursor: pointer; user-select: none;
}
.liste-chevron { color: var(--text-3); font-size: 12px; transition: transform .15s ease; }
.liste-card.is-collapsed .liste-chevron { transform: rotate(-90deg); }
.liste-card.is-collapsed .liste-card-desc,
.liste-card.is-collapsed .liste-card-body { display: none; }
.liste-card-emoji { font-size: 16px; }
.liste-card-title { font-weight: 600; font-size: 15px; }
.liste-count {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px; padding: 2px 10px; min-width: 24px; text-align: center;
}
.liste-euro { font-size: 12px; font-weight: 600; color: var(--amber-text, var(--text-2)); }
.liste-card-desc { margin: 0 16px 6px; font-size: 12px; color: var(--text-3); }
.liste-card-body { padding: 4px 16px 16px; }
.liste-empty { padding: 4px 2px; }

.liste-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.liste-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 11px;
}
.liste-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft);
  border: 1px solid var(--border);
}
.liste-row-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* color esplicito: senza, su un nome con .cli-link vincerebbe l'accent del link
   e le Liste sarebbero l'unica tabella col nome blu. Come .name-cell .nm, la
   classe del nome tiene il colore e a .cli-link restano cursore e underline. */
.liste-row-name { font-weight: 500; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-row-tel { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.liste-wa {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  color: #25D366; border: 1px solid rgba(37,211,102,.4);
  background: var(--surface); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.liste-wa:hover { background: rgba(37,211,102,.10); border-color: #25D366; }

.liste-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.liste-msg-group { display: inline-flex; align-items: center; gap: 6px; }
.liste-tpl-sel {
  font-size: 12px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  max-width: 180px;
}
.liste-senza { margin-top: 10px; }
.liste-senza > summary {
  cursor: pointer; font-size: 12px; color: var(--text-3);
  list-style: none; padding: 2px 0;
}
.liste-senza > summary::before { content: '▸ '; }
.liste-senza[open] > summary::before { content: '▾ '; }
.liste-senza-list { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-2); }
/* color esplicito per lo stesso motivo di .liste-row-name: il colore della lista
   e' ereditato dall'ul, e una dichiarazione diretta di .cli-link sul li
   batterebbe l'ereditarieta' colorando i nomi di blu. */
.liste-senza-list li { margin: 2px 0; color: var(--text-2); }

/* =============================================================================
   IMPOSTAZIONI → COMUNICAZIONI — editor template messaggi
   ============================================================================= */
.com-ph-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.com-ph-label { font-size: 12px; color: var(--text-3); }
.com-ph-label-2 { flex-basis: 100%; margin-top: 6px; }
.chip.com-ph { cursor: pointer; font-variant-numeric: tabular-nums; }
/* Avviso soft (non bloccante) "completa i dati del centro" sopra l'editor documenti */
.doc-centro-warn {
  display: flex; align-items: center; gap: 8px;
  margin: -6px 0 14px; padding: 10px 14px;
  font-size: 13px; line-height: 1.4;
  color: var(--amber-text);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: 10px;
}
.doc-centro-warn .mk-ico { width: 16px; height: 16px; flex-shrink: 0; }
.com-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.com-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.com-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.com-nome {
  flex: 1; font-size: 14px; font-weight: 500;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.com-testo {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.5;
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.com-preview { margin-top: 8px; font-size: 12px; color: var(--text-2); }
.com-preview-lbl { color: var(--text-3); }
.com-preview-txt { font-style: italic; }

/* =============================================================================
   Tab Documenti (scheda cliente) — uploader inline
   ============================================================================= */
.doc-uploader {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.doc-up-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; align-items: end; }
.doc-up-grid .ctab-inline {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  min-width: 0; font-size: 12px; color: var(--text-2);
}
/* Input dell'uploader tematizzati come gli altri form (light + dark) */
.doc-up-grid select,
.doc-up-grid input[type="text"],
.doc-up-grid input[type="date"] {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.doc-up-grid select:focus,
.doc-up-grid input[type="text"]:focus,
.doc-up-grid input[type="date"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* color-scheme: in dark il widget nativo del date picker diventa scuro */
.doc-up-grid input[type="date"] { color-scheme: light; }
[data-theme="dark"] .doc-up-grid select,
[data-theme="dark"] .doc-up-grid input[type="text"],
[data-theme="dark"] .doc-up-grid input[type="date"] { color-scheme: dark; }

.doc-up-hint { margin: 8px 0 0; font-size: 12px; }
.doc-up-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.doc-row-ico { margin-right: 2px; }
.doc-up-scad-hint { color: var(--text-3); font-weight: 400; font-size: 11px; }

/* Campo File a TUTTA larghezza (riga propria) → mai accavallamenti con gli altri campi */
.doc-up-file-field { grid-column: 1 / -1; }
.doc-file-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-file-btn { cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.doc-file-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-file-name {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----- Tab Documenti: pallino alert + sezioni obbligatori / altri ----- */
.ctab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); vertical-align: middle; margin-left: 3px; }

.doc-sec-h { display: flex; align-items: center; gap: 9px; margin: 18px 0 10px; }
.doc-sec-h:first-child { margin-top: 6px; }
.doc-sec-t { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.doc-sec-ln { flex: 1; height: 1px; background: var(--hair); }
.doc-count { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.doc-count.warn { background: var(--amber-soft); color: var(--amber-text); }
.doc-count.ok { background: var(--positive-soft); color: var(--positive-text); }

.doc-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; }
.doc-row.req { box-shadow: var(--shadow-card); }
.doc-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.doc-ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doc-ico.blue  { background: var(--accent-soft);   color: var(--accent-dark); }
.doc-ico.green { background: var(--positive-soft); color: var(--positive-text); }
.doc-ico.amber { background: var(--amber-soft);    color: var(--amber-text); }
.doc-ico.gray  { background: var(--surface-2);     color: var(--text-2); }
.doc-main { flex: 1; min-width: 0; }
.doc-t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-d { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.doc-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); }
.doc-badge.green { background: var(--positive-soft); color: var(--positive-text); }
.doc-badge.amber { background: var(--amber-soft);    color: var(--amber-text); }
.doc-badge.rose  { background: var(--rose-soft);     color: var(--rose-text); }
.doc-badge.gray  { background: var(--surface-2);     color: var(--text-2); }
.doc-acts { display: flex; gap: 6px; flex-shrink: 0; }