/* ============================================================
   Presenze Laurona — Mobile-first CSS
   Premium wellness design — Inter font, glassmorphism header
   ============================================================ */

:root {
  /* Brand teal (variante Boutique, coerente con l'app cliente) */
  --color-primary: #237185;
  --color-primary-dark: #1A4F5C;
  --color-primary-light: #5FAEC2;
  --color-primary-bg: #DDEAEE;
  --color-primary-ghost: rgba(35, 113, 133, 0.08);
  --color-accent: #3F95AB;        /* sky teal lighter */
  --color-accent-light: #5FAEC2;
  --color-accent-bg: #E8F0F4;
  --color-success: #5A8B6E;
  --color-danger:  #B5483D;
  --color-warning: #D4843A;       /* orange per accent admin (es. spot-notify-btn) */
  --color-orange:  #D4843A;
  --color-bg: #F1EFE7;            /* cream brand */
  --color-surface: #FFFFFF;
  --color-surface-deep: #E8E5DA;
  --color-primary-text: #F1EFE7;  /* testo su superfici primary */
  --color-text:           #1A4F5C;
  --color-text-secondary: #6B8B94;
  --color-muted:          #A1B5BC;
  --color-border:     rgba(35, 113, 133, 0.10);
  --color-border-mid: rgba(35, 113, 133, 0.20);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --tap-target: 44px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-pill: 100px;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-nav: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -8px 24px rgba(0, 0, 0, 0.04);
  --shadow-fab: 0 6px 24px rgba(35, 113, 133, 0.32);
  --shadow-glow: 0 0 0 4px rgba(35, 113, 133, 0.12);

  /* Liquid Glass tokens — usati su card / sidebar / header / nav admin.
     Effetto leggero: bg quasi solido, blur ridotto, inner highlight bianco
     per dare l'idea di "vetro bagnato" senza compromettere leggibilita'. */
  --glass-bg:           rgba(255, 255, 255, 0.72);
  --glass-bg-deep:      rgba(255, 255, 255, 0.55); /* per surface gia' su superfice scura */
  --glass-blur:         blur(18px) saturate(1.4);
  --glass-border:       1px solid rgba(255, 255, 255, 0.55);
  --glass-border-dark:  1px solid rgba(35, 113, 133, 0.10);
  --glass-shadow-sm:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 2px 8px rgba(35, 113, 133, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.03);
  --glass-shadow-md:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 8px 24px -6px rgba(35, 113, 133, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.05);
  --glass-shadow-hero:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      0 16px 40px -8px rgba(35, 113, 133, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-serif:   "Fraunces", Georgia, serif;

  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
}

/* ---- Reset ---- */

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

/* ---- Base ---- */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ---- Utility ---- */

.hidden { display: none !important; }

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ============================================================
   PIN Gate
   ============================================================ */

/* === PIN GATE — hero photo full-bleed con bordi sfumati + wordmark
       con shine animation. Sfondo bianco puro. ============================ */
#pin-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--spacing-lg);
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
/* Reset dei due archi decorativi vecchi */
#pin-gate::before,
#pin-gate::after { display: none; }

/* Foto hero come backdrop: full-bleed, mask radiale che la sfuma ai bordi
   cosi' si fonde col bianco senza rettangolo visibile. Opacita' bassa per
   non rubare la scena al wordmark. */
/* Background paths animati (stile 21st.dev kokonutd "background-paths").
   ~36 curve SVG che si disegnano e cancellano in loop, ognuna con
   durata e delay sfasati. Restano discrete: opacita' bassa + colore
   teal su sfondo bianco. Layer 0, dietro a foto + form. */
.pin-bg-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--color-primary);
  opacity: 0.95; /* dura combinata con stroke-opacity per essere sottile */
}
@keyframes pinPathDraw {
  /* Sequence: disegnati da inizio a fine, poi pausa breve mascherata,
     poi riparte. Movimento ipnotico ma non distraente. */
  0%   { stroke-dashoffset: 1500; opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  90%  { stroke-dashoffset: -1500; opacity: 0.4; }
  100% { stroke-dashoffset: -1500; opacity: 0; }
}

.pin-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('/assets/laurona-hero.jpg');
  background-size: cover;
  background-position: center 35%;
  /* Foto piu' visibile: e' un protagonista discreto, non solo atmosfera. */
  opacity: 0.55;
  pointer-events: none;
  /* Mask piu' stretta + fade piu' ampio = bordi che si dissolvono nel
     bianco senza che si veda dove finisce la foto */
  -webkit-mask-image: radial-gradient(
    ellipse 55% 68% at 50% 48%,
    black 15%,
    rgba(0, 0, 0, 0.45) 50%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 55% 68% at 50% 48%,
    black 15%,
    rgba(0, 0, 0, 0.45) 50%,
    transparent 88%
  );
  /* Slow zoom kenburns per dare vita */
  animation: pinHeroZoom 22s ease-in-out infinite alternate;
}
/* Velo bianco semi-trasparente sopra la foto, solo dietro al logo +
   form per garantire leggibilita' senza schiarire troppo la foto. */
.pin-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 32% 24% at 50% 48%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    transparent 80%
  );
  pointer-events: none;
}
@keyframes pinHeroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

.pin-container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
}

/* === Logo "PILATES LAURONA" (immagine PNG) con shine animation =========
   Il riflesso e' un overlay separato che usa mask-image: url(logo.png)
   cosi' il bianco appare SOLO dove ci sono i pixel del logo. */
.pin-logo-wrap {
  position: relative;
  display: inline-block;
  /* Entry: il logo emerge "da sotto" — translateY 70px -> 0 +
     clip-path inset(100% 0 0 0) -> inset(0) cosi' si rivela
     gradualmente dal basso verso l'alto come nel kokonutd
     background-paths. Easing smooth ease-out, 2.4s (rallentato per
     dare il tempo di percepire la rivelazione). */
  animation: pinLogoRiseUp 2.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes pinLogoRiseUp {
  from {
    opacity: 0;
    transform: translateY(70px);
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
.pin-logo-img-full {
  display: block;
  width: 360px;
  max-width: 80vw;
  height: auto;
  pointer-events: none;
}
/* Shine overlay: layer bianco con gradient che scorre, mask che lo
   ritaglia esattamente sulla forma del logo (PNG con alpha). */
.pin-logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.0) 42%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.0) 58%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  /* mask-image col logo PNG: il bianco passa SOLO dentro la sagoma */
  -webkit-mask-image: url('/assets/laurona-logo.png');
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('/assets/laurona-logo.png');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  /* Effetto luminoso piu' realistico: mix-blend-mode rende il bianco
     piu' soft, simile a un riflesso vero invece di un blocco bianco */
  mix-blend-mode: screen;
  animation: pinShine 5s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s infinite;
}
@keyframes pinWordmarkIn {
  /* Legacy keyframe (non piu' usato dal logo, conservato per backward compat) */
  from { opacity: 0; transform: scale(0.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes pinShine {
  0%   { background-position: 200% 0; }
  45%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

/* Saluto orario-aware (testo settato da JS in app.js) */
.pin-greeting {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0 0 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0.85;
  /* Greeting parte DOPO il logo (1.8s delay, dopo che il logo si e'
     rivelato dal basso). Anche lui sale leggermente da sotto. */
  animation: pinGreetingIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.8s backwards;
}
.pin-spark {
  color: var(--color-primary);
  display: inline-block;
  animation: pinSparkPulse 2.8s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes pinGreetingIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pinSparkPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

#pin-input {
  width: 220px;
  font-size: 1.8rem;
  text-align: center;
  padding: 14px var(--spacing-md);
  border: 1px solid rgba(35, 113, 133, 0.15);
  border-radius: var(--radius);
  letter-spacing: 0.4em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 16px rgba(35, 113, 133, 0.08);
  transition: border-color 0.15s, box-shadow 0.18s;
  font-family: var(--font);
  color: var(--color-text);
  animation: pinFormIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.1s backwards;
}
#pin-input:focus {
  border-color: var(--color-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 4px var(--color-primary-ghost),
    0 6px 20px rgba(35, 113, 133, 0.12);
}
#pin-input::placeholder {
  letter-spacing: normal;
  color: var(--color-muted);
  font-size: 1.05rem;
}

#pin-submit {
  min-height: 50px;
  min-width: 220px;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(180deg, #2A8398 0%, var(--color-primary) 60%, #1F6577 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 24px -4px rgba(35, 113, 133, 0.45);
  animation: pinFormIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.3s backwards;
}
#pin-submit:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 10px 28px -4px rgba(35, 113, 133, 0.55);
}
#pin-submit:active { transform: scale(0.97); }
#pin-submit:disabled {
  background: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
}
@keyframes pinFormIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#pin-error,
#pin-error-lock {
  color: var(--color-danger);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.shake { animation: shake 0.4s ease-in-out; }

/* ============================================================
   App Header
   ============================================================ */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--spacing-md);
  background: rgba(241, 239, 231, 0.7);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(35, 113, 133, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header h1::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(35, 113, 133, 0.18);
}

#logout-btn {
  min-height: 34px;
  padding: 0 14px;
  background: rgba(35, 113, 133, 0.08);
  color: var(--color-primary-dark);
  border: 1px solid rgba(35, 113, 133, 0.15);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), transform var(--transition-fast);
  font-family: var(--font);
}

#logout-btn:active {
  background: rgba(35, 113, 133, 0.15);
  transform: scale(0.96);
}

/* Header actions group (campanella + logout) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alerts-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(35, 113, 133, 0.15);
  background: rgba(35, 113, 133, 0.08);
  color: var(--color-primary-dark);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.alerts-btn:active { background: rgba(35, 113, 133, 0.15); transform: scale(0.94); }

.alerts-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(253, 245, 247, 0.95);
}
.alerts-badge.hidden { display: none; }

/* Alert rows nel modale */
/* === iOS LIQUID GLASS — admin alerts =============================== */
#alerts-list {
  padding: 12px 14px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.alert-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(36px) saturate(1.8);
  -webkit-backdrop-filter: blur(36px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 28px -8px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s;
  animation: alertCardIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.alert-row:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 32px -8px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.alert-row:nth-child(1) { animation-delay: 0.02s; }
.alert-row:nth-child(2) { animation-delay: 0.06s; }
.alert-row:nth-child(3) { animation-delay: 0.10s; }
.alert-row:nth-child(n+4) { animation-delay: 0.14s; }
@keyframes alertCardIn {
  from { transform: translateY(-8px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
/* Acked: vetro piu' opaco / pallido / spento */
.alert-row.alert-acked {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  opacity: 0.72;
}
.alert-row.alert-acked:hover { transform: none; }

.alert-icon {
  font-size: 1.05rem;
  line-height: 1;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-primary-text);
  flex-shrink: 0;
}
.alert-icon svg { width: 18px; height: 18px; }
/* Override colore icona per tipo (cancellazione late/early) */
.alert-icon-late {
  background: rgba(181, 72, 61, 0.14) !important;
  color: var(--color-danger) !important;
}
.alert-icon-early {
  background: rgba(212, 132, 58, 0.14) !important;
  color: #8a4f17 !important;
}
.alert-icon-booking {
  background: rgba(35, 113, 133, 0.14) !important;
  color: var(--color-primary) !important;
}
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: 0.92rem; margin-bottom: 3px; line-height: 1.4; }
.alert-meta  { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 8px; }
.alert-tags  { display: flex; gap: 6px; flex-wrap: wrap; }
.alert-tag   { font-size: 0.68rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; }
.alert-tag-warn { background: rgba(196, 75, 63, 0.18); color: #8a3128; }
.alert-tag-ok   { background: rgba(30, 158, 90, 0.18); color: #15683d; }
.alert-time {
  font-size: 0.72rem; color: var(--color-text-secondary);
  white-space: nowrap; padding-top: 2px; flex-shrink: 0;
}

/* ============================================================
   Main Content
   ============================================================ */

.app-main {
  padding: var(--spacing-md) 0;
  padding-bottom: calc(80px + var(--spacing-md) + env(safe-area-inset-bottom, 0px));
}

.loading-text {
  text-align: center;
  color: var(--color-muted);
  margin-top: var(--spacing-xl);
  font-size: 0.95rem;
}

/* ============================================================
   Day Picker
   ============================================================ */

.day-picker {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--spacing-sm);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.day-nav {
  width: 32px;
  min-width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.day-nav:active { background: var(--color-border-mid); transform: scale(0.92); }

.day-strip {
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: space-around;
  gap: 0;
}

.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 0;
  min-width: 0;
  flex: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast);
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font);
}

.day-chip .day-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.day-chip .day-number {
  font-size: 0.95rem;
  font-weight: 600;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.day-chip.today .day-number {
  color: var(--color-primary);
  font-weight: 700;
  background: var(--color-primary-bg);
}

.day-chip.today .day-label {
  color: var(--color-primary);
}

.day-chip.selected .day-number {
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: 0 3px 10px rgba(35, 113, 133, 0.35);
  transform: scale(1.08);
}

.day-chip.selected .day-label {
  color: var(--color-primary);
  font-weight: 700;
}

.date-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: var(--spacing-md);
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ============================================================
   Schedule Slots
   ============================================================ */

#schedule-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slot-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-med), border-color var(--transition-fast);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
}

.slot-card[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
  border-left-color: var(--color-primary);
}

.slot-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 13px var(--spacing-md);
  min-height: var(--tap-target);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
}

.slot-header::-webkit-details-marker { display: none; }

.slot-time {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary-dark);
  min-width: 50px;
  padding: 5px 9px;
  background: var(--color-primary-bg);
  border-radius: var(--radius-xs);
  text-align: center;
  letter-spacing: 0.01em;
}

.slot-meta {
  flex: 1;
  min-width: 0;
}

.slot-names {
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-count {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 2px;
  font-weight: 500;
}

.slot-empty-hint {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
}

.slot-body {
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   Client Row (inside slot)
   ============================================================ */

.client-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 11px var(--spacing-md);
  min-height: var(--tap-target);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}

.client-row:last-child { border-bottom: none; }
.client-row:active { background: var(--color-primary-ghost); }

.client-row.absent {
  opacity: 0.38;
}

/* Routine ricorrente: bordo sinistro teal pieno + sfondo molto leggero teal.
   Riconoscibile a colpo d'occhio come "cliente garantita ogni settimana". */
.client-row.is-routine {
  border-left: 3px solid var(--color-primary);
  background: linear-gradient(90deg, rgba(35,113,133,0.06) 0%, transparent 50%);
  padding-left: calc(var(--spacing-md) - 3px);
}
.client-row.is-routine .client-avatar {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* Extra/sporadica: bordo sinistro sabbia + tag "extra" inline visibile */
.client-row.is-extra {
  border-left: 3px dashed #C7A87C;
  padding-left: calc(var(--spacing-md) - 3px);
}
.client-row.is-extra .client-avatar {
  background: #E8DCC1;
  color: #6B5739;
}
.client-tag-extra {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8B6F3D;
  background: #F4E9CF;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.client-row .client-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Avatar circle — initials */
.client-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  text-transform: uppercase;
}

.client-card .client-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
  border-radius: 12px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

/* Remove button (X) */
.remove-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.remove-btn:active {
  background: #A83B31;
  transform: scale(0.9);
}

/* Add client button inside slot */
.add-to-slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px var(--spacing-md);
  background: transparent;
  border: none;
  border-top: 1px dashed var(--color-border-mid);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  transition: background var(--transition-fast);
}

.add-to-slot-btn:active { background: var(--color-primary-bg); }

/* ============================================================
   Session Badges
   ============================================================ */

.session-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.session-green  { background: var(--color-success); }
.session-yellow { background: #A07800; }
.session-orange { background: var(--color-accent); }
.session-red    { background: var(--color-danger); }
.session-none   { background: var(--color-muted); }

/* ============================================================
   Pkg Count Badge
   Usato in dettaglio cliente per Prenotate / Eseguite / Credito.
   Non ha classe .session-badge apposta: realtime.js aggiorna tutti
   i .session-badge con sessions_remaining, questi contatori invece
   ricevono valori diversi (sessions_booked - sessions_consumed, etc.)
   e devono restarne fuori.
   ============================================================ */

.pkg-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.pkg-count-inprogress { background: #A07800; }              /* Prenotate in corso */
.pkg-count-consumed   { background: var(--color-muted); }   /* Eseguite */
.pkg-count-credit     { background: var(--color-success); } /* Credito residuo */

.pkg-count-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pkg-count-row > span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Lista pacchetti attivi (multi-pacchetto FIFO)
   ============================================================ */

.pkg-list-details {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}

.pkg-list-details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 4px 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pkg-list-details > summary:hover {
  color: var(--color-primary-dark);
}

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

.pkg-list-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.pkg-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.pkg-list-type {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.pkg-list-meta {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.pkg-list-counts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.pkg-list-counts b {
  color: var(--color-text);
  font-weight: 700;
}

.pkg-list-counts small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 2px;
}

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  text-align: center;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-info    { background: rgba(44, 44, 44, 0.9); }
.toast-success { background: rgba(45, 90, 39, 0.9); }
.toast-error   { background: rgba(196, 75, 63, 0.9); }

/* ============================================================
   Client Search Bar
   ============================================================ */

.client-search-bar {
  margin-bottom: var(--spacing-sm);
}

.client-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.client-filters::-webkit-scrollbar { display: none; }
.client-filter-chip {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.client-filter-chip:hover { border-color: var(--color-primary); }
.client-filter-chip.is-active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.client-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}
.client-sort-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

.client-sort-bar select {
  width: 100%;
  min-height: 40px;
  padding: 8px var(--spacing-md);
  font-size: 0.9rem;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

#client-search {
  width: 100%;
  min-height: var(--tap-target);
  padding: 12px var(--spacing-md);
  font-size: 1rem;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius);
  background: var(--color-surface);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

#client-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-ghost);
}

/* ============================================================
   Client Cards
   ============================================================ */

#clients-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--spacing-lg);
}

.client-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--spacing-md);
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
}

.client-card:active {
  transform: scale(0.99);
  background: var(--color-bg);
}

.client-card.low-sessions {
  border-left-color: var(--color-accent);
}

.client-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.client-info .client-name {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.pkg-info {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.pkg-info.muted {
  color: var(--color-muted);
  font-style: italic;
}

/* ============================================================
   FAB / Primary Action Button
   ============================================================ */

.fab-btn {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  margin-top: var(--spacing-md);
  font-size: 1rem;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-fab);
}

.fab-btn:active { transform: scale(0.98); }

/* ============================================================
   Onboarding Form
   ============================================================ */

#onboarding-form {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

#onboarding-form h3 {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--color-primary-dark);
  margin-bottom: var(--spacing-md);
}

#onboarding-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#onboarding-form input,
#onboarding-form select {
  min-height: var(--tap-target);
  padding: 10px var(--spacing-md);
  font-size: 1rem;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#onboarding-form input:focus,
#onboarding-form select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 4px var(--color-primary-ghost);
}

.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.btn-primary {
  flex: 1;
  min-height: var(--tap-target);
  font-size: 1rem;
  font-weight: 600;
  /* Wet-glass: gradient sottile + inner highlight bianco in alto */
  background: linear-gradient(180deg, #2A8398 0%, var(--color-primary) 60%, #1F6577 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow 0.18s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 4px 14px -2px rgba(35, 113, 133, 0.35);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 6px 18px -2px rgba(35, 113, 133, 0.45);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  flex: 1;
  min-height: var(--tap-target);
  font-size: 1rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-secondary:active { background: var(--color-bg); }

.btn-danger {
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  background: #FFF4F2;
  color: var(--color-danger);
  border: 1px solid rgba(196, 75, 63, 0.3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font);
}
.btn-danger:active { background: #FFE6E2; }

.archive-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.archive-section h4 {
  color: var(--color-danger);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.archive-hint {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.client-card.archived-card {
  opacity: 0.75;
  background: #F5F0F2;
}
.client-card.archived-card .client-name {
  color: var(--color-text-secondary);
}

.restore-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  font-family: var(--font);
}
.restore-btn:active { transform: scale(0.96); }

/* ============================================================
   Modal / Bottom Sheet
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
/* Su desktop il modale viene centrato verticalmente con angoli pieni e
   max-height piu' ridotta; su mobile resta bottom-sheet a fondo schermo. */
@media (min-width: 768px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal-overlay .modal-sheet {
    border-radius: 18px;
    max-height: 85vh;
    animation: modalCenterIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes modalCenterIn {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)   scale(1);    opacity: 1; }
  }
}

/* Lock body scroll when picker is open (iOS Safari keyboard fix) */
body.picker-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

/* Client picker modal: full-screen from top to avoid iOS keyboard overlap */
.modal-overlay.picker-fullscreen {
  align-items: flex-start;
  overflow: hidden;
}

.modal-overlay.picker-fullscreen .modal-sheet {
  max-height: 100%;
  height: 100%;
  border-radius: 0;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
}

/* Keep picker-list pinned to top */
.modal-overlay.picker-fullscreen .picker-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.modal-sheet {
  background: var(--color-surface);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  animation: slideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.12), 0 -1px 0 rgba(0,0,0,0.04);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--spacing-md) 14px;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2,
.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

/* Body scrollabile - prima non aveva regole, quindi i modali con tante
   righe (es. avvisi disdette) finivano tagliati in fondo. */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

/* Footer pinned al fondo, non scrolla con il body. */
.modal-footer {
  flex-shrink: 0;
  padding: 12px var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--color-surface);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.modal-close:active { background: var(--color-border-mid); transform: scale(0.9); }

.modal-search {
  display: block;
  width: calc(100% - var(--spacing-md) * 2);
  margin: var(--spacing-sm) var(--spacing-md);
  padding: 10px var(--spacing-md);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.modal-search:focus {
  border-color: var(--color-primary);
}

.picker-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast);
}

.picker-item:active { background: var(--color-primary-ghost); }

.picker-item-selected {
  background: var(--color-primary-bg);
}

.picker-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid var(--color-border-mid);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.picker-checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.picker-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.picker-checkbox:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.picker-item .picker-name {
  font-size: 0.92rem;
  font-weight: 500;
  flex: 1;
}

.picker-footer {
  padding: 12px var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.picker-confirm {
  width: 100%;
  min-height: var(--tap-target);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  font-family: var(--font);
}

.picker-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Client Detail Modal Body
   ============================================================ */

#detail-view,
#detail-edit {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--spacing-md);
}

.detail-section {
  margin-bottom: var(--spacing-lg);
}

.detail-notes-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  text-align: center;
}

.detail-section form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.detail-section form select,
.detail-section form input[type="number"],
.detail-section form input[type="date"],
.detail-section form input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  font-size: 1rem;
  font-family: var(--font);
  background: var(--color-bg);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.detail-section form select:focus,
.detail-section form input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.detail-section h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-bg);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  gap: var(--spacing-sm);
}

.edit-phone-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.edit-phone-btn:active { background: var(--color-primary-light); }

#phone-edit-input {
  flex: 1;
  min-height: 36px;
  padding: 6px var(--spacing-sm);
  font-size: 0.95rem;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  -webkit-appearance: none;
}

#phone-edit-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ghost);
}

.detail-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.detail-value {
  font-size: 0.95rem;
  font-weight: 600;
}

.pkg-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pkg-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-bg);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.pkg-detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
}

.pkg-detail-value {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Reuse form styles inside detail modal */
.detail-body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-sm);
}

.detail-body input,
.detail-body select,
.detail-body textarea {
  min-height: var(--tap-target);
  padding: 10px var(--spacing-md);
  font-size: 1rem;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.detail-body input:focus,
.detail-body select:focus,
.detail-body textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 4px var(--color-primary-ghost);
}

.picker-item .picker-badge {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Recurring toggle in picker — iOS style */
.recurring-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--spacing-md);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.recurring-toggle input[type="checkbox"] {
  position: relative;
  width: 51px;
  height: 31px;
  -webkit-appearance: none;
  appearance: none;
  background: #E5E5EA;
  border-radius: 15.5px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.recurring-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 0.5px rgba(0,0,0,0.06);
  transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.recurring-toggle input[type="checkbox"]:checked {
  background: var(--color-primary);
}
.recurring-toggle input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

/* Recurring icon next to client name */
.recurring-icon {
  color: var(--color-primary);
  font-size: 0.85rem;
  margin-right: 4px;
  font-weight: bold;
}

/* Carryover badge */
.carryover-badge {
  background: #E8F5E9;
  color: #2E7D32;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  border-left: 3px solid #4CAF50;
}

/* Mixed payment fields */
.mixed-fields {
  display: flex;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.mixed-fields label {
  flex: 1;
  min-width: 0;
}
.mixed-fields input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ============================================================
   Empty State
   ============================================================ */

.empty-text {
  text-align: center;
  color: var(--color-muted);
  margin-top: var(--spacing-xl);
  font-size: 0.95rem;
}

/* ============================================================
   Bottom Nav
   ============================================================ */

/* === Admin bottom-nav: Revolut-style floating pill (solo mobile, su
       desktop e' sostituita dalla sidebar). Stesso linguaggio di
       .client-nav per coerenza. ============================ */
.bottom-nav {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 14px; right: 14px;
  max-width: 410px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 6px;
  z-index: 100;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 36px -8px rgba(35, 113, 133, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.nav-item {
  position: relative;
  flex: 1;
  min-height: var(--tap-target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.66rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s;
  font-family: var(--font);
  padding: 9px 4px;
  letter-spacing: 0.01em;
}

/* Blob highlight teal soft dietro l'item attivo */
.nav-blob {
  position: absolute;
  inset: 4px 4px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(35, 113, 133, 0.14) 0%,
    rgba(35, 113, 133, 0.08) 100%);
  border: 1px solid rgba(35, 113, 133, 0.16);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.nav-item.active .nav-blob { opacity: 1; transform: scale(1); }

.nav-icon {
  width: 22px; height: 22px;
  position: relative; z-index: 1;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-label {
  position: relative; z-index: 1;
  font-size: 0.66rem;
  font-weight: 500;
  transition: font-weight 0.15s;
}

.nav-item.active { color: var(--color-primary); }
.nav-item.active .nav-icon { transform: scale(1.04); }
.nav-item.active .nav-label { font-weight: 600; }
.nav-item:active .nav-icon { transform: scale(0.92); }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 601px) and (max-width: 1023px) {
  .app-main {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* La vecchia regola di adattamento bottom-nav per tablet e' rimossa: ora
   il pill floating gestisce gia' max-width 410 + margin auto, ed e' bello
   coerente su tutte le dimensioni mobile/tablet. Le override mobile per
   .dash-lesson (lezioni di oggi compatte) sono ora in fondo al file
   dopo le regole base, per vincere correttamente la cascata. */

/* ============================================================
   Role-based access control
   ============================================================ */
body.role-employee [data-admin-only] {
  display: none !important;
}

/* Dashboard "Oggi": le impiegate vedono solo 2 KPI su 4 (Lezioni oggi,
   In scadenza). Forziamo 2 colonne a qualsiasi viewport cosi' i due
   visibili occupano TUTTO lo spazio dei 4 originali. */
body.role-employee .dash-kpis {
  grid-template-columns: 1fr 1fr !important;
}

/* ============================================================
   Insights Dashboard
   ============================================================ */
.view-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.insights-period {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.period-btn {
  padding: 8px 14px;
  border: 1px solid var(--color-border-mid);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.period-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.custom-range {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.custom-range label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.custom-range input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.insights-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.insight-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.insight-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.insight-label {
  font-size: 0.7rem;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* === Potenziale guadagno === */
.potential-card {
  background: linear-gradient(135deg, rgba(35, 113, 133, 0.08), rgba(90, 139, 110, 0.06));
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
  border: 1px solid rgba(35, 113, 133, 0.18);
}
.potential-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.potential-icon { font-size: 1.5rem; }
.potential-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text);
}
.potential-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.potential-stat {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.potential-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-display);
}
.potential-stat-empty .potential-stat-value { color: #c47e25; }
.potential-stat-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.potential-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.potential-scenario {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.potential-scenario-top {
  border-color: #5a8b6e;
  background: rgba(90, 139, 110, 0.06);
}
.potential-scenario-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.potential-scenario-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f5d44;
}
.potential-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-align: center;
}
.potential-loading {
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

/* === Consigli === */
.advice-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.advice-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.advice-icon { font-size: 1.4rem; }
.advice-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
}
.advice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.advice-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  line-height: 1.45;
}
.advice-list li:last-child { border-bottom: none; }
.advice-empty {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* === INSIGHTS HERO REDESIGN === */
.ins-header { margin-bottom: 16px; }
.ins-subtitle {
  margin: 4px 0 0 0;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  text-transform: capitalize;
}

/* INTESTAZIONI DI SEZIONE (raggruppano le statistiche) ----- */
.ins-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.ins-section-title:first-of-type { margin-top: 8px; }

/* INCASSI — card in evidenza ----- */
.income-card {
  background: linear-gradient(135deg, #237185 0%, #2c8499 60%, #2f7d54 130%);
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(35, 113, 133, 0.22);
  color: #fff;
}
.income-head { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 14px; display: flex; align-items: center; gap: 4px; }
.income-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: stretch; }
.income-tile {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.income-tile-big { background: rgba(255, 255, 255, 0.22); }
.income-val { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.income-tile-big .income-val { font-size: 1.7rem; }
.income-lbl { font-size: 0.74rem; opacity: 0.92; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
.income-total {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.95;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.income-total b { font-size: 1rem; }
@media (max-width: 540px) {
  .income-grid { grid-template-columns: repeat(2, 1fr); }
}

/* SALUTE STUDIO ----- */
.ins-health-card {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.ins-health-main { display: flex; align-items: center; gap: 16px; }
.ins-health-score {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  min-width: 84px;
  text-align: center;
  padding: 10px 0;
  border-radius: 14px;
  color: var(--color-primary);
  background: rgba(35, 113, 133, 0.10);
}
.ins-health-score.health-good { color: #2f7d54; background: rgba(47, 125, 84, 0.12); }
.ins-health-score.health-ok   { color: var(--color-primary); background: rgba(35, 113, 133, 0.12); }
.ins-health-score.health-mid  { color: var(--color-warning); background: rgba(212, 132, 58, 0.14); }
.ins-health-score.health-bad  { color: var(--color-danger); background: rgba(181, 72, 61, 0.14); }
.ins-health-title { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: 600; }
.ins-health-sub { font-size: 1.05rem; font-weight: 600; text-transform: capitalize; }
.ins-health-parts { display: flex; gap: 18px; flex: 1; min-width: 240px; flex-wrap: wrap; }
.health-part { flex: 1; min-width: 90px; }
.health-part-head { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: 5px; }
.health-part-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,0.07); overflow: hidden; }
.health-part-fill { height: 100%; border-radius: 4px; background: var(--color-primary); }

/* TASTINO INFO "ⓘ" + POPUP SPIEGAZIONE ----- */
.ins-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: rgba(35, 113, 133, 0.14);
  color: var(--color-primary);
  font-size: 0.66rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transform: translateY(-1px);
}
.ins-info-btn:hover { background: rgba(35, 113, 133, 0.26); }
.ins-info-btn-light { background: rgba(255,255,255,0.28); color: #fff; }
.ins-info-btn-light:hover { background: rgba(255,255,255,0.45); }

.ins-info-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 30, 35, 0.45);
}
.ins-info-modal.hidden { display: none; }
.ins-info-card {
  background: var(--color-surface);
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.ins-info-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ins-info-card-head h4 { margin: 0; font-size: 1.05rem; color: var(--color-primary); }
.ins-info-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; color: var(--color-text-secondary); padding: 4px;
}
.ins-info-body { font-size: 0.9rem; line-height: 1.5; color: var(--color-text); }
.ins-info-body i { color: var(--color-text-secondary); font-size: 0.84rem; }

/* ADOZIONE APP ----- */
.adopt-card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.adopt-head { font-size: 0.92rem; font-weight: 600; margin-bottom: 14px; }
.adopt-head-sub { font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 400; margin-left: 6px; }
.adopt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.adopt-tile { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(35, 113, 133, 0.05); }
.adopt-icon { font-size: 1.1rem; }
.adopt-value { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.adopt-of { font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); }
.adopt-pct { font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); }
.adopt-label { font-size: 0.76rem; color: var(--color-text-secondary); margin-top: 2px; }
@media (max-width: 540px) { .adopt-grid { grid-template-columns: repeat(2, 1fr); } }

/* CLIENTI A RISCHIO — badge per livello ----- */
.risk-row { display: flex; align-items: center; gap: 8px; }
.risk-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.risk-critico  { color: var(--color-danger);  background: rgba(181, 72, 61, 0.14); }
.risk-rischio  { color: var(--color-warning); background: rgba(212, 132, 58, 0.16); }
.risk-rallenta { color: var(--color-primary); background: rgba(35, 113, 133, 0.12); }
.risk-row .churn-name { flex: 1; }

.ins-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ins-hero-card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

/* CARD INCASSI ----- */
.ins-hero-revenue { display: flex; flex-direction: column; }
.ins-hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
}
.ins-hero-value {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ins-hero-trend {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.ins-hero-trend.trend-up { color: #2f5d44; }
.ins-hero-trend.trend-down { color: #C44B3F; }
.ins-hero-chart-wrap {
  flex: 1;
  margin-top: 16px;
  min-height: 110px;
  position: relative;
}

/* CARD TASSO RIEMPIMENTO (DARK TEAL) ----- */
.ins-hero-fill {
  background: linear-gradient(160deg, #2c6d7e 0%, #1d5063 100%);
  color: #fff;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ins-hero-fill-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ins-hero-label-light {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.ins-hero-fill-pill {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.ins-hero-fill-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.ins-hero-fill-pct {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ins-hero-fill-detail {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}
.ins-hero-progress {
  margin-top: 4px;
}
.ins-hero-progress-bar {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.ins-hero-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ins-hero-progress-target {
  position: absolute;
  top: -2px; bottom: -2px;
  left: 90%;
  width: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.ins-hero-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
}
.ins-hero-fill-tavolo {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.ins-hero-tavolo-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.ins-hero-tavolo-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.ins-hero-tavolo-amount {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* KPI GRID ----- */
.ins-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.ins-kpi-card {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.ins-kpi-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
}
.ins-kpi-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.ins-kpi-sub {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

@media (max-width: 720px) {
  .ins-hero-grid { grid-template-columns: 1fr; }
}

/* === HIGHLIGHTS GRID === */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.highlight-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.highlight-icon { font-size: 1.8rem; flex-shrink: 0; }
.highlight-content { flex: 1; min-width: 0; }
.highlight-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  font-weight: 600;
}
.highlight-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.highlight-detail {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.highlight-card.mom-up .highlight-value { color: #2f5d44; }
.highlight-card.mom-down .highlight-value { color: #C44B3F; }

/* === SLOT LEADERBOARD === */
.slots-leaderboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.slot-board {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.slot-board h4 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
}
.slot-board ul { list-style: none; padding: 0; margin: 0; }
.slot-board li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.88rem;
}
.slot-label { width: 75px; flex-shrink: 0; font-weight: 600; }
.slot-bar {
  flex: 1;
  background: rgba(0,0,0,0.06);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.slot-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5a8b6e, #2f5d44);
  border-radius: 4px;
}
.slot-bar-bad .slot-bar-fill {
  background: linear-gradient(90deg, #c47e25, #C44B3F);
}
.slot-pct { width: 42px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-empty { color: var(--color-text-secondary); font-style: italic; }

/* === ALERTS GRID (churn + birthday) === */
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.alert-board {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.alert-board h4 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
}
.alert-board ul { list-style: none; padding: 0; margin: 0; }
.alert-board li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--color-border);
}
.alert-board li:last-child { border-bottom: none; }
.alert-empty { color: var(--color-text-secondary); font-style: italic; padding: 8px 0; }
.churn-name { flex: 1; font-weight: 600; }
.churn-days { color: #C44B3F; font-size: 0.8rem; font-weight: 600; }
.bday-day {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 700;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.bday-name { flex: 1; }

@media (max-width: 720px) {
  .slots-leaderboard, .alerts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-container {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.chart-container h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.chart-container canvas {
  max-height: 220px;
}

/* Insights tables */
.insights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.insights-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--color-border);
}

.insights-table td {
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.insights-table .amount {
  font-weight: 700;
  color: var(--color-success);
}

.insights-section {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.insights-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* Spot notification button — bottone CTA dedicato per l'admin
   per "aprire" un posto al gruppo via notifica in-app. */
.spot-notify-btn {
  background: linear-gradient(135deg, #F4A93D 0%, #D4843A 100%) !important;
  color: #fff !important;
  border: none !important;
  border-top: none !important;
  border-radius: 999px !important;
  margin: 12px 12px 8px !important;
  padding: 11px 16px !important;
  width: calc(100% - 24px) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  box-shadow: 0 3px 10px rgba(212, 132, 58, 0.25);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-notify-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 4px 14px rgba(212, 132, 58, 0.32);
}
.spot-notify-btn:active {
  transform: scale(0.985);
  background: linear-gradient(135deg, #D4843A 0%, #B86A28 100%) !important;
}

/* ============================================================
   Schedule toolbar + Attendance History
   ============================================================ */
.schedule-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.schedule-top-bar .date-label {
  margin-bottom: 0;
}

.att-history-open-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.att-history-open-btn:active {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.att-history-controls {
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--spacing-md) 10px;
}

.att-history-back-btn {
  display: block;
  padding: 4px 0 8px;
  background: none;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
}

.att-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.att-filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 100px;
}

.att-filter-label input[type="date"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}

.att-filter-label input[type="date"]:focus {
  border-color: var(--color-primary);
  outline: none;
}

.att-filter-sep {
  font-size: 1rem;
  color: var(--color-muted);
  padding-bottom: 6px;
  flex-shrink: 0;
}

.att-filter-apply-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 0.85rem;
  flex-shrink: 0;
  align-self: flex-end;
}

.att-history-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.att-history-month {
  margin-bottom: var(--spacing-sm);
}

.att-history-month-label {
  padding: 8px var(--spacing-md) 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.att-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.att-history-row.att-absent {
  opacity: 0.55;
}

.att-history-day {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 80px;
}

.att-history-time {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  flex: 1;
}

.att-history-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.att-history-row.att-absent .att-history-status {
  background: var(--color-bg);
  color: var(--color-muted);
}

.att-history-empty {
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Upcoming lessons toggle (client detail) */
.upcoming-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.upcoming-toggle-btn:active {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

#upcoming-lessons-section {
  margin-top: var(--spacing-sm);
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.upcoming-remove-btn {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  margin-left: auto;
}

.att-history-row.att-past {
  opacity: 0.7;
}

/* Add bookings modal */
.add-bookings-controls {
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.booking-slots-list {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.booking-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.booking-slot-row.att-past {
  opacity: 0.55;
}

.booking-slot-time {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  min-width: 56px;
}

.booking-slot-avail {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  flex: 1;
}

.slot-book-btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.slot-book-btn:disabled {
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* ============================================================
   Calendar view toggle (week / month / year)
   ============================================================ */

/* Toolbar in cima alla view Presenze: toggle vista + frecce navigazione
   settimana ACCANTO (entrambi allineati a sinistra) cosi' non si
   sovrappongono ai bottoni fluttuanti campanella + Esci a top-right. */
.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cal-view-toggle {
  display: flex;
  gap: 3px;
  margin-bottom: 0;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

/* Frecce navigazione settimana (week-grid). Etichetta range data al centro. */
.week-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--shadow-xs);
}
.week-nav-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 1.4rem;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.week-nav-btn:hover { background: var(--color-primary-ghost); }
.week-nav-btn:active { transform: scale(0.92); }
.week-nav-label {
  min-width: 132px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .week-nav-label { min-width: 100px; font-size: 0.85rem; }
}

.cal-view-btn {
  flex: 1;
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.cal-view-btn.active {
  background: var(--color-primary);
  color: #fff;
}

/* Day picker expanded state (month / year) */
.day-picker--expanded {
  align-items: flex-start;
}

/* Strip in expanded (month/year) mode */
.day-strip--expanded {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  justify-content: flex-start;
}

/* Month/year shared title */
.cal-grid-title {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  padding: 2px 0 8px;
  text-transform: capitalize;
  letter-spacing: -0.01em;
}

/* ---- Month grid ---- */
.cal-dh-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.cal-dh {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 2px 0 4px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
}

.cal-day-cell:not(.cal-day-empty):active {
  background: var(--color-primary-ghost);
}

.cal-day-empty {
  cursor: default;
  pointer-events: none;
}

.cal-day-cell.today {
  color: var(--color-primary);
  font-weight: 700;
  background: var(--color-primary-bg);
}

.cal-day-cell.selected {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(35, 113, 133, 0.35);
}

/* ---- Year grid ---- */
.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 2px 0;
}

.cal-year-month {
  padding: 10px 4px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cal-year-month:active {
  background: var(--color-primary-ghost);
}

.cal-year-month.today {
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  background: var(--color-primary-bg);
}

.cal-year-month.selected {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
  border-color: var(--color-primary-dark);
}

/* ============================================================
   ORARI VIEW (admin)
   ============================================================ */
.orari-hint {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 4px 0 16px;
}
.orari-day-card {
  background: var(--color-surface, #fff);
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  margin-bottom: 12px;
  overflow: hidden;
}
.orari-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-primary-ghost);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.orari-day-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.orari-add-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.orari-add-btn:hover { background: var(--color-primary-dark); }
.orari-slot-list { padding: 0; }
.orari-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.orari-slot-row:last-child { border-bottom: none; }
.orari-slot-time {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}
.orari-slot-meta {
  font-size: 0.78rem;
  color: var(--color-text-secondary, #888);
}
.orari-del-btn {
  background: transparent;
  color: #C44B3F;
  border: 1px solid #C44B3F;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.orari-del-btn:hover {
  background: #C44B3F;
  color: #fff;
}

.window-fieldset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--color-primary-ghost);
}
.window-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 110px;
}
.window-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.window-times {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.window-times input[type="time"] {
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  width: 90px;
}
.window-arrow { color: #888; font-weight: 600; }

.window-fieldset {
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.window-fieldset:not(.window-fieldset-active) {
  opacity: 0.55;
}
.window-fieldset.window-fieldset-active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.window-times input[type="time"]:disabled {
  background: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
}

/* ============================================================
   ORARI — griglia oraria tap-toggle
   ============================================================ */
.orari-day-count {
  font-size: 0.78rem;
  color: var(--color-text-secondary, #888);
  font-weight: 500;
}
.hour-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px;
}
@media (min-width: 600px) {
  .hour-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .hour-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1400px) {
  .hour-grid { grid-template-columns: repeat(8, 1fr); }
}
.hour-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-mid);
  border-radius: 12px;
  font-family: var(--font);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  padding: 12px 8px;
  min-height: 64px;
  color: var(--color-text);
}
.hour-cell:hover:not(.busy) {
  border-color: var(--color-primary);
  background: var(--color-primary-ghost);
  transform: translateY(-1px);
}
.hour-cell.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow: 0 2px 6px rgba(35, 113, 133, 0.22);
}
.hour-cell.active:hover:not(.busy) {
  background: var(--color-primary-dark);
}
.hour-cell.busy {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}
.hour-range {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  pointer-events: none;
  white-space: nowrap;
}
.hour-sep {
  opacity: 0.55;
  font-weight: 400;
}
.hour-status {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  pointer-events: none;
}
.hour-cell.active .hour-status { opacity: 0.85; }

/* ============================================================
   BOUTIQUE — design tokens layer
   Aggiunte di restyle Variant A (palette teal + cream + Fraunces).
   ============================================================ */

/* Logo nel PIN gate (sostituisce il vecchio cerchio "L") */
.pin-logo-img {
  width: 240px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}

.pin-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Heading display (Fraunces serif) */
.app-header h1,
.view-title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.app-header h1 {
  font-weight: 400;
  font-size: 1.25rem;
}
/* Annulla il pallino rosa prima del titolo (era il marker live admin pink) */
.app-header h1::before { display: none; }

/* ============================================================
   SIDEBAR DESKTOP (visible >= 1024px)
   ============================================================ */
.app-sidebar {
  display: none;
  flex-direction: column;
  width: 224px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-right: 1px solid rgba(35, 113, 133, 0.08);
  padding: 18px 14px;
  height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar-brand {
  padding: 6px 10px 18px;
  display: flex;
  align-items: center;
}
.sidebar-logo {
  height: 44px;
  width: auto;
}
.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.side-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.12s;
}
.side-nav-item:hover { background: var(--color-primary-ghost); }
.side-nav-item.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #F1EFE7);
}
.side-nav-item span { flex: 1; }

/* ============================================================
   APP LAYOUT — flex container per sidebar + content
   ============================================================ */
#app {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   - Mobile  (<768px):  bottom-nav, no sidebar
   - Tablet/iPad (>=768px): sidebar + layout pieno (griglia a tutta larghezza),
     pannello laterale impilato sotto fino a 1024 (vedi .wg-layout)
   - Desktop (>=1024px): sidebar + pannello laterale a fianco (2 colonne)
   ============================================================ */
@media (min-width: 768px) {
  .app-sidebar { display: flex; }
  .bottom-nav  { display: none; }
  .app-main    { padding-bottom: 24px !important; }
  .app-header  {
    position: sticky;
    top: 0;
    background: rgba(241, 239, 231, 0.85);
  }
  /* Sui desktop tutte le viste occupano la larghezza disponibile,
     ma il padding-right lascia spazio per i bottoni fluttuanti (bell + Esci)
     così le card non sconfinano oltre la campanella in alto */
  .app-content .container { max-width: none; margin: 0; padding: 0 132px 0 28px; }
  /* Le viste con tabella/agenda usano tutta la larghezza disponibile */
  .app-content #view-clients .container,
  .app-content #view-schedule .container { padding: 0 28px; }

  /* Header collassato: solo i bottoni azione fluttuano in alto a destra,
     il titolo grande della vista (es. "Oggi · ...") prende il posto in alto */
  .app-content { position: relative; }
  .app-header {
    position: absolute;
    top: 14px;
    right: 28px;
    left: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 0;
    z-index: 10;
  }
  #header-title { display: none; }
  .app-main { padding-top: 0 !important; }

  /* Lascia spazio a destra del titolo dashboard per i bottoni fluttuanti */
  #view-dashboard .dash-page-header {
    padding-top: 8px;
    padding-right: 140px;
  }
}

/* ============================================================
   APP-HEADER restyle: rimosso il pallino rosa, font Fraunces
   ============================================================ */
.app-header {
  background: rgba(241, 239, 231, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* ============================================================
   DASHBOARD "OGGI" — admin home, pari pari mockup Claude Design
   ============================================================ */

/* Page header */
.dash-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 0 8px;
  margin-bottom: 14px;
}
/* Riga "Oggi" + occhio toggle visibilita' incassi */
.dash-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-eye-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.dash-eye-btn:hover {
  background: var(--color-primary-ghost);
  color: var(--color-primary);
}
.dash-eye-btn:active { transform: scale(0.92); }
/* KPI mascherato: cifra in font monospace per allineare i pallini */
.dash-kpi.is-hidden-value .dash-kpi-value {
  font-family: var(--font);
  letter-spacing: 0.04em;
}
.dash-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dash-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
  text-transform: lowercase;
}

/* KPI strip — 4 cards full width */
.dash-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .dash-kpis { grid-template-columns: repeat(4, 1fr); }
}
.dash-kpi {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
  text-align: left;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font);
  color: var(--color-text);
  transition: transform 0.12s, box-shadow 0.18s;
}
.dash-kpi:hover { box-shadow: var(--glass-shadow-md); }
.dash-kpi:hover { transform: translateY(-1px); }
.dash-kpi:active { transform: scale(0.98); }
.dash-kpi-head {
  display: flex; justify-content: space-between; align-items: center;
}
.dash-kpi-icon {
  color: var(--color-text-secondary);
  opacity: 0.6;
}
.dash-kpi-highlight {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.dash-kpi-highlight .dash-kpi-label,
.dash-kpi-highlight .dash-kpi-sub { color: rgba(241, 239, 231, 0.85); }
.dash-kpi-highlight .dash-kpi-icon { color: rgba(241, 239, 231, 0.85); opacity: 1; }

.dash-kpi-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.10em;
}
.dash-kpi-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 6px;
}
.dash-kpi-sub {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
}

/* Layout 2 colonne (left: lezioni / right: hero+exp+actions) */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr 380px; align-items: stretch; }
  /* La colonna sinistra estende il card "Lezioni di oggi" fino in fondo,
     in modo che combaci visivamente con "Azioni rapide" della colonna destra */
  .dash-col-left { display: flex; flex-direction: column; }
  .dash-col-left > .dash-card { flex: 1; }
}

/* Card generica (per "Lezioni di oggi", "Pacchetti in scadenza", "Azioni rapide") */
.dash-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.dash-card:last-child { margin-bottom: 0; }
.dash-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.dash-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.dash-card-sub {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.dash-card-link {
  background: transparent;
  border: 1px solid var(--color-border-mid);
  border-radius: 100px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.dash-card-link:hover { background: var(--color-primary-ghost); }
.dash-card-badge {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  background: var(--color-warning);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(212, 132, 58, 0.16);
  color: #8a4f17;
}

/* Lezioni di oggi list */
.dash-lessons-list {
  display: flex; flex-direction: column; gap: 4px;
}
.dash-lesson {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 60px 32px 1fr auto auto;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.dash-lesson:hover { background: var(--color-primary-ghost); }
.dash-lesson-time {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.dash-lesson-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-text);
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dash-lesson-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-lesson-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.dash-lesson-state {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}
.dash-state-now {
  color: var(--color-primary);
  font-weight: 600;
}
.dash-state-now::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 4px;
  vertical-align: 1px;
  animation: dashPulse 1.6s ease-in-out infinite;
}
.dash-state-past { color: var(--color-text-secondary); opacity: 0.7; }
.dash-state-upc { color: var(--color-text-secondary); }
@keyframes dashPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dash-lesson-past { opacity: 0.55; }
.dash-lesson-in_progress {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-light);
}

/* Stanghette dei 5 reformer */
.dash-sticks {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.dash-stick {
  display: inline-block;
  width: 12px; height: 28px;
  border-radius: 3px;
  background: var(--color-border-mid);
}
.dash-stick.is-filled {
  background: var(--color-primary);
}
.dash-lesson-past .dash-stick.is-filled { background: var(--color-text-secondary); }

.dash-lesson-count {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* Hero card "Lezione in corso / Prossima" — la card teal scura, riceve
   un trattamento glass piu' drammatico: inner specular highlight bianco
   in cima, ombra layered che la solleva visibilmente dalle altre card. */
.dash-hero {
  background: linear-gradient(180deg, #2A8398 0%, var(--color-primary) 50%, #1F6577 100%);
  color: var(--color-primary-text);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-shadow-hero);
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 174, 194, 0.40) 0%, transparent 70%);
  pointer-events: none;
}
.dash-hero-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  opacity: 0.85;
  display: flex; align-items: center; gap: 6px;
}
.dash-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary-text);
  animation: dashPulse 1.6s ease-in-out infinite;
}
.dash-hero-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 8px;
  position: relative; z-index: 1;
}
.dash-hero-time {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dash-hero-counts { text-align: right; }
.dash-hero-count {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dash-hero-cap { opacity: 0.65; font-weight: 400; }
.dash-hero-presenze {
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  opacity: 0.75;
  margin-top: 4px;
  font-weight: 600;
}
.dash-hero-instructor {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.92;
  position: relative; z-index: 1;
}
.dash-hero-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary-text);
  font-size: 0.66rem;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.dash-hero-cta {
  width: 100%;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-primary-text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
  position: relative; z-index: 1;
}
.dash-hero-cta:hover { background: rgba(255, 255, 255, 0.22); }

/* Pacchetti in scadenza */
.dash-exp-list {
  max-height: 132px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dash-exp-list::-webkit-scrollbar { width: 6px; }
.dash-exp-list::-webkit-scrollbar-thumb {
  background: var(--color-border-mid);
  border-radius: 3px;
}
.dash-exp {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.dash-exp-list .dash-exp:last-child { border-bottom: none; }
.dash-exp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary-text);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.dash-exp-info { flex: 1; min-width: 0; }
.dash-exp-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-exp-meta {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.dash-exp-vendi {
  background: transparent;
  border: 1px solid var(--color-border-mid);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.dash-exp-vendi:hover { background: var(--color-primary-ghost); }

/* Azioni rapide */
.dash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.dash-action {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dash-action svg { color: var(--color-primary); flex-shrink: 0; }
.dash-action:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-ghost);
}
.dash-action:active { transform: scale(0.98); }

/* ============================================================
   WEEK GRID — agenda settimanale "pari pari" mockup Claude Design
   2 colonne: calendario (1fr) + side panel (320px). Solo desktop.
   ============================================================ */
/* Griglia settimanale visibile su tutti i viewport (mobile + desktop) */
.week-grid { display: block; margin-bottom: 14px; }

/* Layout: stack su mobile (grid sopra, side panel sotto), 2 colonne su desktop */
.wg-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px) {
  .wg-layout { grid-template-columns: 1fr 320px; }
}

/* Sostituisce il day-picker + slot-list sulla tab Presenze su tutti i viewport.
   Le logiche delle prenotazioni stanno tutte nel side panel (renderSelectedSlotDetail). */
#view-schedule .cal-view-toggle,
#view-schedule .day-picker,
#view-schedule .schedule-top-bar,
#view-schedule #schedule-container { display: none !important; }

/* La griglia + side panel applicano su tutti i viewport.
   I tweak mobile-specifici sono in fondo a questa sezione. */
.week-grid { margin-bottom: 18px; }

  /* CALENDARIO (sinistra) */
  .wg-calendar {
    background: var(--color-surface);
    border-radius: 18px;
    border: 1px solid var(--color-border);
    overflow: hidden;
  }
  /* Toolbar sopra la griglia: nav settimanale + label range + Oggi */
  .wg-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-deep);
  }
  .wg-toolbar-label {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.01em;
  }
  .wg-nav-btn {
    background: transparent;
    border: 1px solid var(--color-border-mid);
    border-radius: 999px;
    padding: 4px 10px;
    min-width: 32px; min-height: 32px;
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wg-nav-btn:hover {
    background: var(--color-primary-ghost);
    border-color: var(--color-primary);
  }
  .wg-nav-today {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-primary);
  }
  .wg-grid-header {
    display: grid;
    grid-template-columns: 52px repeat(var(--wg-cols, 5), 1fr);
    border-bottom: 1px solid var(--color-border);
  }
  .wg-day-head {
    padding: 14px 10px;
    text-align: center;
    border-left: 1px solid var(--color-border);
  }
  .wg-day-head.is-today { background: rgba(35, 113, 133, 0.06); }
  .wg-day-name {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .wg-day-num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    margin-top: 2px;
    letter-spacing: -0.01em;
  }
  .wg-day-head.is-today .wg-day-num { color: var(--color-primary); }
  .wg-day-head.is-selected { background: var(--color-primary); }
  .wg-day-head.is-selected .wg-day-name,
  .wg-day-head.is-selected .wg-day-num { color: var(--color-primary-text); }

  .wg-grid-body { position: relative; }
  .wg-grid-row {
    display: grid;
    grid-template-columns: 52px repeat(var(--wg-cols, 5), 1fr);
    border-bottom: 1px solid var(--color-border);
    min-height: 56px;
  }
  .wg-grid-row:last-child { border-bottom: none; }
  .wg-time {
    padding: 6px 8px;
    text-align: right;
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    font-weight: 500;
  }
  .wg-cell {
    border-left: 1px solid var(--color-border);
    padding: 4px;
    display: flex;
  }
  .wg-cell.wg-empty { background: transparent; }

  /* Bottone lezione: stile button colorato per istruttore */
  .wg-lesson-btn {
    flex: 1;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1.5px solid;
    font-family: inherit;
    transition: transform 0.12s, opacity 0.15s;
  }
  .wg-lesson-btn:hover { transform: translateY(-1px); }
  .wg-lesson-btn:active { transform: scale(0.98); }
  .wg-lesson-btn.is-past { opacity: 0.45; }
  .wg-lesson-name {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
  }
  .wg-lesson-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.66rem;
    margin-top: 4px;
  }
  .wg-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
  }

  /* SIDE PANEL (destra) */
  .wg-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .wg-side-card {
    background: var(--color-surface);
    border-radius: 18px;
    border: 1px solid var(--color-border);
    padding: 18px;
  }
  .wg-side-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .wg-side-sub {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
  }
  .wg-empty-detail {
    padding: 30px;
    text-align: center;
    color: var(--color-text-secondary);
    border: 1.5px dashed var(--color-border);
    border-radius: 12px;
    font-size: 0.85rem;
  }
  .wg-empty-detail svg { color: var(--color-muted); }
  .wg-empty-detail > div { margin-top: 8px; }

  /* Hero card lezione selezionata (teal) */
  .wg-hero {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .wg-hero-row {
    display: flex; justify-content: space-between; align-items: flex-end;
  }
  .wg-hero-eyebrow {
    font-size: 0.65rem;
    opacity: 0.75;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .wg-hero-time {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 2px;
    letter-spacing: -0.02em;
  }
  .wg-hero-counts { text-align: right; }
  .wg-hero-count {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
  }
  .wg-hero-instructor {
    margin-top: 10px;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem;
  }
  .wg-hero-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
  }
  /* Il nome dell'insegnante nel pannello e' cliccabile: cambia SOLO questa
     lezione in questa data, non la routine (vedi sql/047). Sta su fondo teal,
     quindi i colori sono trasparenze di bianco, non le variabili di tema. */
  .wg-hero-instr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .wg-hero-instr-btn:hover,
  .wg-hero-instr-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.22); }
  .wg-hero-instr-caret {
    flex: none;
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.85;
  }
  .wg-hero-instr-date { opacity: 0.85; }

  /* Lista iscritte */
  .wg-iscritte-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .wg-iscritte-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px;
  }
  .wg-iscritta {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--color-bg);
  }
  .wg-iscritta-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .wg-iscritta-name {
    flex: 1;
    font-size: 0.78rem;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wg-iscritta-absent {
    font-style: italic;
    color: var(--color-warning);
    font-size: 0.7rem;
  }
  .wg-iscritta-rem {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-weight: 500;
  }

  /* Action buttons */
  .wg-actions { display: flex; gap: 6px; }
  .wg-action-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--color-border-mid);
    border-radius: 100px;
    padding: 8px 12px;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.12s;
  }
  .wg-action-btn:hover { background: var(--color-primary-ghost); }
  .wg-action-danger {
    color: var(--color-danger);
    border-color: rgba(181, 72, 61, 0.3);
  }
  .wg-action-danger:hover { background: rgba(181, 72, 61, 0.08); }
  .wg-action-delete {
    color: #fff;
    background: var(--color-danger);
    border-color: var(--color-danger);
  }
  .wg-action-delete:hover { background: #9c3e33; border-color: #9c3e33; }
  .wg-actions { flex-wrap: wrap; }

  /* Tasso riempimento */
  .wg-fill-row { margin-bottom: 10px; }
  .wg-fill-row:last-child { margin-bottom: 0; }
  .wg-fill-head {
    display: flex; justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 4px;
  }
  .wg-fill-stat { color: var(--color-text-secondary); }
  .wg-fill-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--color-surface-deep);
    overflow: hidden;
  }
  .wg-fill-bar-inner {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.3s;
  }

  /* Add lesson button */
  .wg-add-btn {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, transform 0.12s;
  }
  .wg-add-btn:hover { background: var(--color-primary-dark); }
  .wg-add-btn:active { transform: scale(0.98); }

/* ── MOBILE TWEAKS: griglia compatta, celle piu' piccole ── */
@media (max-width: 1023px) {
  .week-grid { margin-bottom: 12px; }
  .wg-grid-header { grid-template-columns: 36px repeat(var(--wg-cols, 5), 1fr); }
  .wg-grid-row    { grid-template-columns: 36px repeat(var(--wg-cols, 5), 1fr); min-height: 44px; }
  .wg-day-head    { padding: 8px 4px; }
  .wg-day-name    { font-size: 0.6rem; letter-spacing: 0.06em; }
  .wg-day-num     { font-size: 1rem; }
  .wg-time        { font-size: 0.6rem; padding: 4px 4px; }
  .wg-cell        { padding: 2px; }
  .wg-lesson-btn  {
    padding: 6px 4px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
  }
  .wg-lesson-name { display: none; }   /* nascondi nome istruttore: il colore della cella basta */
  .wg-lesson-meta {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
  }
  .wg-dot         { width: 5px; height: 5px; }
  .wg-side-card   { padding: 14px; }
  .wg-hero        { padding: 12px; }
  .wg-hero-time   { font-size: 1.6rem; }
  .wg-hero-count  { font-size: 1.2rem; }
}

/* ── Iscritte: tap row to toggle attendance + X to remove ── */
.wg-iscritta {
  cursor: pointer;
  transition: background 0.12s;
}
.wg-iscritta:hover { background: rgba(35, 113, 133, 0.08); }
.wg-iscritta.is-absent { opacity: 0.55; }
.wg-iscritta.is-absent .wg-iscritta-name { text-decoration: line-through; }

/* ── Differenziazione visiva routine vs extra ── */
.wg-iscritta.is-routine {
  border-left: 3px solid var(--color-primary);
  background: linear-gradient(90deg, rgba(35,113,133,0.05) 0%, transparent 60%);
  padding-left: 7px;
}
.wg-iscritta.is-routine .wg-iscritta-avatar {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.wg-iscritta-routine {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 5px;
  font-size: 0.95em;
  vertical-align: middle;
}
.wg-iscritta.is-extra {
  border-left: 3px dashed #C7A87C;
  padding-left: 7px;
}
.wg-iscritta.is-extra .wg-iscritta-avatar {
  background: #E8DCC1;
  color: #6B5739;
}
.wg-iscritta-extra {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8B6F3D;
  background: #F4E9CF;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  vertical-align: middle;
}
.wg-iscritta-x {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.wg-iscritta-x:hover { background: rgba(181, 72, 61, 0.12); color: var(--color-danger); }

/* ── Wrapper azioni dettaglio lezione: spaziatura uniforme tra i pulsanti ── */
.wg-slot-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.wg-slot-actions .wg-actions { margin: 0; }

/* ── Side panel buttons "Aggiungi cliente" e "Notifica posto libero" ── */
.wg-add-client-btn {
  width: 100%;
  margin-top: 0;
  background: transparent;
  border: 1.5px dashed var(--color-border-mid);
  color: var(--color-primary);
  border-radius: 12px;
  padding: 10px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wg-add-client-btn:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}
.wg-notify-btn {
  width: 100%;
  margin-top: 0;
  background: linear-gradient(135deg, #3F95AB 0%, #237185 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(35, 113, 133, 0.25);
  transition: filter 0.12s, transform 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wg-notify-btn:hover  { filter: brightness(1.04); }
.wg-notify-btn:active { transform: scale(0.98); }

/* ── Modale "Notifica posto libero" (stile app, sostituisce confirm()) ── */
.modal-overlay.offer-spot-modal {
  align-items: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal-overlay.offer-spot-modal.is-open    { opacity: 1; }
.modal-overlay.offer-spot-modal.is-closing { opacity: 0; }

.offer-spot-sheet {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface, #FAF7F2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  box-shadow: 0 18px 50px rgba(20, 50, 60, 0.18), 0 2px 8px rgba(20, 50, 60, 0.06);
  transform: translateY(10px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
  animation: none;
  max-height: none;
}
.offer-spot-modal.is-open .offer-spot-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.offer-spot-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3F95AB 0%, #237185 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 4px 14px rgba(35, 113, 133, 0.30);
}
.offer-spot-title {
  font-family: var(--font-display, var(--font));
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--color-text, #1F2A2E);
  margin: 0;
  letter-spacing: 0.1px;
}
.offer-spot-when {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #5C6B70);
  margin: 0 0 6px;
  text-transform: lowercase;
  font-weight: 500;
}
.offer-spot-body {
  font-size: 0.9rem;
  color: var(--color-text-secondary, #5C6B70);
  line-height: 1.45;
  margin: 0 0 14px;
}
.offer-spot-body strong { color: var(--color-text, #1F2A2E); font-weight: 600; }

.offer-spot-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.offer-spot-btn {
  flex: 1;
  border-radius: 999px;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s, background 0.12s, filter 0.12s;
}
.offer-spot-cancel {
  background: transparent;
  border-color: var(--color-border-mid, rgba(20, 50, 60, 0.18));
  color: var(--color-text, #1F2A2E);
}
.offer-spot-cancel:hover { background: rgba(20, 50, 60, 0.04); }
.offer-spot-confirm {
  background: linear-gradient(135deg, #3F95AB 0%, #237185 100%);
  color: #fff;
  box-shadow: 0 3px 12px rgba(35, 113, 133, 0.28);
}
.offer-spot-confirm:hover  { filter: brightness(1.05); }
.offer-spot-confirm:active { transform: scale(0.98); }

/* ============================================================
   CLIENTS TABLE — foglio Excel-like (visibile solo desktop >=1024px)
   Le card mobile (#clients-container) sono nascoste su desktop.
   ============================================================ */
#clients-table { display: none; }

@media (min-width: 1024px) {
  #clients-container { display: none; }
  #clients-table { display: block; }

  .cltbl {
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow-x: auto;
    box-shadow: 0 1px 12px rgba(26, 79, 92, 0.05);
    margin-top: 12px;
  }
  .cltbl-row { min-width: 940px; }
  .cltbl-row {
    display: grid;
    grid-template-columns:
      minmax(180px, 2fr)   /* name */
      minmax(160px, 2fr)   /* email */
      minmax(120px, 1.4fr) /* phone */
      60px                 /* rem */
      60px                 /* total */
      90px                 /* last */
      90px                 /* spent */
      120px;               /* status */
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    width: 100%;
    font-family: var(--font);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.12s;
  }
  .cltbl-body .cltbl-row { cursor: pointer; }
  .cltbl-body .cltbl-row:hover { background: var(--color-primary-ghost); }
  .cltbl-body .cltbl-row:last-child { border-bottom: none; }

  .cltbl-head {
    background: var(--color-surface-deep);
    position: sticky; top: 0; z-index: 1;
  }
  .cltbl-head .cltbl-cell {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 12px 12px;
  }

  .cltbl-cell {
    padding: 12px;
    font-size: 0.88rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cltbl-cell.cltbl-h-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
  }
  .cltbl-avatar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary-text);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .cltbl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cltbl-h-rem, .cltbl-h-total {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
  }
  .cltbl-rem-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    overflow: visible;
  }
  .cltbl-rem-positive { background: var(--color-primary-bg); color: var(--color-primary); }
  .cltbl-rem-warning  { background: rgba(212, 132, 58, 0.15); color: #8a4f17; }
  .cltbl-rem-zero     { background: rgba(181, 72, 61, 0.15); color: var(--color-danger); }
  .cltbl-h-spent { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

  .cltbl-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .cltbl-status-active   { background: rgba(90, 139, 110, 0.16); color: #2f5d44; }
  .cltbl-status-debito   { background: rgba(196, 75, 63, 0.12);  color: #C44B3F; }
  .cltbl-status-expiring { background: rgba(212, 132, 58, 0.16); color: #8a4f17; }
  .cltbl-status-inactive { background: rgba(0,0,0,0.06); color: var(--color-text-secondary); }
  .cltbl-status-archived { background: rgba(0,0,0,0.10); color: var(--color-text-secondary); }

  .pkg-debito-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(196, 75, 63, 0.12);
    color: #C44B3F;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    vertical-align: middle;
  }

  .pkg-settle-btn {
    margin-top: 10px;
    padding: 8px 14px;
    background: #C44B3F;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .pkg-settle-btn:hover  { background: #A53A30; }
  .pkg-settle-btn:active { background: #8A2F27; }

  .pkg-remind-btn {
    padding: 8px 14px;
    background: #fff;
    color: #C44B3F;
    border: 1px solid #C44B3F;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .pkg-remind-btn:hover  { background: rgba(196, 75, 63, 0.08); }
  .pkg-remind-btn:active { background: rgba(196, 75, 63, 0.16); }

  .settle-debt-warning {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: rgba(196, 75, 63, 0.10);
    border-left: 4px solid #C44B3F;
    border-radius: 10px;
  }
  .settle-debt-warning.hidden { display: none; }
  .settle-debt-warning-text {
    flex: 1;
    color: #8b3027;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .settle-debt-now-btn {
    flex-shrink: 0;
    background: #C44B3F !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem !important;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .settle-debt-now-btn:hover { background: #A53A30 !important; }

  /* Form "Aggiungi pacchetto" grayed-out quando c'e' debito */
  #renew-pkg-form.disabled-by-debt {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(40%);
  }

  .cltbl-foot {
    display: flex; justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-surface-deep);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
  }
  .cltbl-foot strong { color: var(--color-text); font-weight: 600; }

  /* Toolbar clienti su desktop: piu' ariosa */
  #view-clients .client-search-bar { max-width: 360px; }
  #view-clients .client-sort-bar   { max-width: 240px; }
}

/* ============================================================
   BROADCAST COMPOSER — view "Avvisa clienti"
   ============================================================ */
.bc-header { padding: 16px 0 8px; }
.bc-eyebrow {
  font-size: 0.7rem; font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.bc-title {
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.bc-sub {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
  max-width: 540px;
}

.bc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .bc-grid { grid-template-columns: 1fr 320px; }
}

.bc-section-label {
  font-size: 0.7rem; font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.10em; text-transform: uppercase;
  margin: 18px 0 10px;
}

/* Audience chips */
.bc-audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 600px) {
  /* Era repeat(3, 1fr) con tre segmenti fissi. Con l'aggiunta di "Clienti
     scelte" le card sono quattro: auto-fit le dispone senza lasciarne una
     spaiata da sola su una riga. */
  .bc-audience { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* Etichette delle destinatarie scelte una per una */
.bc-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bc-chosen-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}
.bc-chosen-empty b { color: var(--color-primary); font-weight: 600; }

/* Card che contiene il bottone "seleziona" + il bottone "vedi chi" */
.bc-aud-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.bc-aud-card.is-selected .bc-aud-btn {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.bc-aud-btn {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.bc-aud-btn:hover { border-color: var(--color-primary-light); }
/* Bottone "Vedi chi" sotto il count */
.bc-aud-see {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--color-border-mid);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.bc-aud-see:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}
.bc-aud-see svg { flex-shrink: 0; }

/* Modale lista clienti del segmento */
.bc-aud-list-body {
  padding: 4px 18px 18px;
  max-height: 70vh;
  overflow-y: auto;
}
.bc-aud-count-line {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  font-weight: 500;
}
.bc-aud-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc-aud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
}
.bc-aud-item:last-child { border-bottom: none; }
.bc-aud-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary-text);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  flex-shrink: 0;
}
.bc-aud-info { flex: 1; min-width: 0; }
.bc-aud-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-aud-meta {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-aud-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.bc-aud-hint {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.bc-aud-count {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

/* Textarea */
.bc-textarea {
  width: 100%;
  min-height: 130px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--color-text);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.bc-textarea:focus { border-color: var(--color-primary); }

.bc-counter {
  text-align: right;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
}
.bc-counter-warn { color: var(--color-warning); font-weight: 600; }

/* Templates */
.bc-templates {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.bc-tpl {
  background: var(--color-surface-deep);
  color: var(--color-text);
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s;
}
.bc-tpl:hover { background: var(--color-primary-ghost); }

/* Upload immagine allegata al broadcast */
.bc-image-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bc-image-btn {
  background: var(--color-surface-deep);
  color: var(--color-text);
  border: 1px dashed var(--color-border-mid);
  padding: 9px 16px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.bc-image-btn:hover:not(:disabled) { border-color: var(--color-primary); }
.bc-image-btn:disabled { opacity: 0.6; cursor: default; }
.bc-image-preview {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.bc-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-image-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Send button */
.bc-send {
  width: 100%;
  margin-top: 24px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.bc-send:hover:not(:disabled) { background: var(--color-primary-dark); }
.bc-send:active:not(:disabled) { transform: scale(0.99); }
.bc-send:disabled {
  background: var(--color-surface-deep);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* Lockscreen preview */
.bc-preview-wrap {
  align-self: start;
}
.bc-preview {
  background: linear-gradient(155deg, #1a4f5c 0%, #0a2d35 100%);
  border-radius: 24px;
  padding: 60px 18px 30px;
  color: #fff;
  position: relative;
  min-height: 380px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 8px 24px rgba(26, 79, 92, 0.30);
}
.bc-preview-time {
  font-size: 3rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}
.bc-preview-date {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 4px;
}
.bc-preview-notif {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 28px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bc-preview-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bc-preview-body { flex: 1; min-width: 0; }
.bc-preview-app {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.bc-preview-text {
  font-size: 0.85rem;
  margin-top: 2px;
  line-height: 1.4;
}
.bc-preview-now {
  font-size: 0.68rem;
  opacity: 0.6;
  flex-shrink: 0;
}

/* === MOBILE OVERRIDES — devono stare alla FINE del file per vincere
   la cascata sopra le regole base con stessa specificity. =========== */
@media (max-width: 767px) {
  /* Lezioni di oggi: layout compatto, niente piu' overlap "Laurona"
     vs prima stanghetta + niente subtitle "✓ completata" ridondante */
  .dash-lesson {
    grid-template-columns: 44px 26px 1fr auto auto;
    gap: 8px;
    padding: 10px 8px;
  }
  .dash-lesson-time { font-size: 0.95rem; }
  .dash-lesson-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
  .dash-lesson-name {
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-lesson-state { display: none; }
  .dash-stick { width: 8px; height: 20px; border-radius: 2px; }
  .dash-sticks { gap: 3px; }
  .dash-lesson-count { font-size: 0.82rem; }
}

/* ============================================================
   ADMIN BANNER — sticky top per disdette last-minute non gestite
   ============================================================ */
.admin-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  /* Rosso-corallo warm: deve SALTARE all'occhio come una vera notifica
     urgente. Niente teal — si confondeva con la dashboard. */
  background: linear-gradient(135deg, #E94B3C 0%, #C73830 60%, #A52A22 100%);
  color: #fff;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 22px rgba(165, 42, 34, 0.45);
  /* Slide-in + lampeggio vero: il glow + il colore alternano ogni 1.6s */
  animation:
    adminBannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    adminBannerFlash 1.6s ease-in-out infinite;
  font-family: var(--font);
}
@keyframes adminBannerSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
/* Lampeggio vero — alterna intensita' del glow e shade del rosso per
   simulare un battito di emergenza, senza essere fastidioso */
@keyframes adminBannerFlash {
  0%, 100% {
    box-shadow: 0 6px 22px rgba(165, 42, 34, 0.45);
    background: linear-gradient(135deg, #E94B3C 0%, #C73830 60%, #A52A22 100%);
  }
  50% {
    box-shadow: 0 10px 34px rgba(233, 75, 60, 0.7), 0 0 0 6px rgba(233, 75, 60, 0.18);
    background: linear-gradient(135deg, #FF5A48 0%, #E04138 60%, #B53028 100%);
  }
}
.admin-banner:hover {
  filter: brightness(1.06);
  animation-play-state: paused;
}
.admin-banner:active { transform: scale(0.997); }

/* Icona campana che oscilla per richiamare l'attenzione */
.admin-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
  animation: adminBannerShake 1.6s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes adminBannerShake {
  0%, 50%, 100% { transform: rotate(0deg); }
  10%           { transform: rotate(-12deg); }
  20%           { transform: rotate(10deg); }
  30%           { transform: rotate(-8deg); }
  40%           { transform: rotate(6deg); }
}
.admin-banner-icon svg { width: 20px; height: 20px; stroke-width: 2.2; }

.admin-banner-text { flex: 1; min-width: 0; }
.admin-banner-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.admin-banner-sub {
  font-size: 0.82rem;
  opacity: 0.95;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.admin-banner-cta {
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  padding: 8px 16px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: background 0.15s, transform 0.15s;
}
.admin-banner:hover .admin-banner-cta {
  background: rgba(255, 255, 255, 0.32);
  transform: translateX(2px);
}
.admin-banner-x {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.admin-banner-x:hover { background: rgba(255, 255, 255, 0.18); }

.admin-banner-clear-all {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  margin-right: 6px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.admin-banner-clear-all:hover { background: rgba(255, 255, 255, 0.3); }
.admin-banner-clear-all.hidden { display: none; }

.admin-banner-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}
.admin-banner-count.hidden { display: none; }

/* Bottone push admin nell'header: stato off (campana barrata) ->
   teal sottile / stato on (campana piena) -> teal pieno con punto */
.admin-push-btn { position: relative; }
.admin-push-btn.admin-push-on {
  color: #fff;
  background: var(--color-primary);
}
.admin-push-btn.admin-push-on::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Pulse del bottone "Notifica clienti del posto libero" quando admin
   atterra dal banner / dalla campanella */
@keyframes wgNotifyPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(212, 132, 58, 0.25); transform: scale(1); }
  50%      { box-shadow: 0 6px 20px rgba(212, 132, 58, 0.55), 0 0 0 6px rgba(212, 132, 58, 0.18); transform: scale(1.02); }
}
.wg-notify-pulse {
  animation: wgNotifyPulse 0.9s ease-in-out 3;
}

/* Alert row: cliccabile (cursor pointer + hover) per i tipi che lo supportano */
.alert-row-clickable { cursor: pointer; }
.alert-row-clickable:hover { background: rgba(35, 113, 133, 0.10); }
.alert-cta {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 6px;
}
.alert-cta-muted { color: var(--color-text-secondary); }

/* ============================================================
   STORICO CLIENTE — modale timeline (admin)
   ============================================================ */
.history-sheet {
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column;
  max-height: 90vh;
}
.history-stats-bar {
  display: flex;
  gap: 8px;
  padding: 12px 20px 10px;
  background: var(--color-surface-deep);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .history-stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
}
.hstat {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  flex: 0 0 auto;
  min-width: 78px;
}
@media (min-width: 600px) {
  .hstat { min-width: 0; }
}
.hstat-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.hstat-spent .hstat-value {
  color: var(--color-primary);
  font-size: 0.95rem;
}
.hstat-present .hstat-value { color: var(--color-success); }
.hstat-booked .hstat-value  { color: var(--color-primary); }
.hstat-noshow .hstat-value  { color: var(--color-danger); }
.hstat-late .hstat-value    { color: var(--color-danger); }
.hstat-early .hstat-value   { color: #C28140; }
.hstat-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.history-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}
.history-filter-chip {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.history-filter-chip:hover { border-color: var(--color-primary); }
.history-filter-chip.is-active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.history-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--color-bg);
}
.hev-group { margin-bottom: 22px; }
.hev-group:last-child { margin-bottom: 8px; }
.hev-group-header {
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  padding-left: 4px;
}

.hev {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: 14px;
  margin-bottom: 6px;
  font-family: var(--font);
  border-left: 3px solid transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}
.hev:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(26, 79, 92, 0.06);
}
.hev-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hev-icon svg { width: 18px; height: 18px; }

/* 4 stati lezione, ognuno con border-left colorato per scan veloce */
.hev-present { border-left-color: var(--color-success); }
.hev-present .hev-icon {
  background: rgba(90, 139, 110, 0.14);
  color: var(--color-success);
}
.hev-noshow {
  border-left-color: var(--color-danger);
  background: linear-gradient(90deg, rgba(181, 72, 61, 0.04) 0%, var(--color-surface) 30%);
}
.hev-noshow .hev-icon {
  background: rgba(181, 72, 61, 0.14);
  color: var(--color-danger);
}
.hev-cancelled-late { border-left-color: var(--color-danger); }
.hev-cancelled-late .hev-icon {
  background: rgba(181, 72, 61, 0.14);
  color: var(--color-danger);
}
.hev-cancelled-early { border-left-color: #C28140; }
.hev-cancelled-early .hev-icon {
  background: rgba(212, 132, 58, 0.14);
  color: #8a4f17;
}
.hev-package { border-left-color: var(--color-primary); }
.hev-package .hev-icon {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
/* Lezione prenotata (futura): neutra — non e' "svolta", e' solo in programma */
.hev-booked {
  border-left-color: var(--color-border-mid);
  background: linear-gradient(90deg, rgba(35, 113, 133, 0.03) 0%, var(--color-surface) 30%);
}
.hev-booked .hev-icon {
  background: rgba(35, 113, 133, 0.10);
  color: var(--color-primary);
}

.hev-body { flex: 1; min-width: 0; }
.hev-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hev-meta {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.hev-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(181, 72, 61, 0.12);
  color: var(--color-danger);
  padding: 2px 8px;
  border-radius: 999px;
}
.hev-tag-ok {
  background: rgba(90, 139, 110, 0.16);
  color: #2f5d44;
}
.hev-tag-amount {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.hev-tag-muted {
  background: rgba(120, 120, 120, 0.12);
  color: var(--color-text-secondary);
}

.history-load-more {
  margin: 12px 20px 16px;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--color-border-mid);
  border-radius: 12px;
  color: var(--color-primary);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.history-load-more:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}

/* ============================================================
   Storico: controlli admin (modifica / elimina / aggiungi)
   ============================================================ */
/* Bottone "Aggiungi lezione" nell'header del modale storico */
.history-add-btn {
  margin: 0 20px 4px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s;
}
.history-add-btn:hover { filter: brightness(1.06); }
.history-add-btn svg { width: 16px; height: 16px; }

/* Azioni per ogni riga evento (matita + cestino) */
.hev-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.hev-action-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-mid);
  background: var(--color-surface);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hev-action-btn svg { width: 15px; height: 15px; }
.hev-action-btn:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.hev-action-btn.hev-action-delete:hover {
  background: rgba(181, 72, 61, 0.10);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Form di modifica (riusa lo stile modale) */
.hedit-body {
  padding: 4px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hedit-field { display: flex; flex-direction: column; gap: 5px; }
.hedit-field label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.hedit-field input,
.hedit-field select {
  padding: 10px 12px;
  border: 1px solid var(--color-border-mid);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.92rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.hedit-field input:focus,
.hedit-field select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.hedit-hint {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-top: -2px;
}
.hedit-actions {
  display: flex;
  gap: 10px;
  padding: 8px 20px 20px;
}
.hedit-btn-primary {
  flex: 1;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.hedit-btn-primary:hover { filter: brightness(1.06); }
.hedit-btn-primary:disabled { opacity: 0.5; cursor: default; }
.hedit-btn-danger {
  padding: 12px 16px;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.hedit-btn-danger:hover { background: rgba(181, 72, 61, 0.08); }

/* ============================================================
   Routines view (admin sidebar > Routine)
   ============================================================ */
.routines-header { margin-bottom: 18px; }
.routines-header .view-sub {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-top: 4px;
  max-width: 720px;
}
.routines-toolbar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.routines-search {
  flex: 1; min-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font);
  font-size: 0.92rem;
}
.routines-search:focus {
  outline: none;
  border-color: var(--color-primary);
}
.routines-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--color-primary-ghost);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 0.88rem;
  color: var(--color-text);
}
.routines-stat b { color: var(--color-primary); font-weight: 700; }

.routines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.routines-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.routines-day-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}
.routines-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.routines-day-head .routines-day-title { margin: 0; }

/* Pillola insegnante: e' un <button>, non un <select>. Il menu nativo di
   macOS si ancora alla voce selezionata invece che al controllo e finiva
   aperto lontano dalla pillola; quella posizione non e' governabile da CSS,
   quindi il menu se lo disegna routines.js (.instr-menu qui sotto).
   --instr-color arriva inline, dal colore in lau_instructors. */
.routines-instr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--instr-color, var(--color-primary));
  background-color: var(--color-surface);
  border: 1px solid var(--instr-color, var(--color-primary));
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  max-width: 150px;
  cursor: pointer;
}
.routines-instr-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routines-instr-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
}
.routines-instr:hover,
.routines-instr[aria-expanded="true"] { background-color: var(--color-primary-ghost); }
.routines-instr:focus-visible {
  outline: 2px solid var(--instr-color, var(--color-primary));
  outline-offset: 1px;
}
.routines-instr.is-day { font-size: 0.78rem; }

/* Sulla singola fascia il comando resta leggibile ma non compete con quello
   del giorno: nome colorato e freccetta, senza bordo. */
.routines-instr.is-slot {
  border-color: transparent;
  background-color: transparent;
  font-weight: 500;
}
.routines-instr.is-slot:hover,
.routines-instr.is-slot[aria-expanded="true"] { background-color: var(--color-primary-ghost); }

.routines-slot-instr { margin: 2px 0 8px; }

/* Menu delle insegnanti: position fixed, agganciato alla pillola da
   routines.js, cosi' nessun contenitore con overflow puo' tagliarlo. */
.instr-menu {
  position: fixed;
  z-index: 1000;
  min-width: 150px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.instr-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.instr-menu-item:hover { background: var(--color-primary-ghost); }
.instr-menu-item.is-current { font-weight: 700; }
/* "torna alla routine": toglie l'eccezione del giorno */
.instr-menu-reset {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 7px 7px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.instr-menu-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.routines-slot {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border);
}
.routines-slot:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.routines-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.routines-slot-time {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
}
.routines-slot-occ {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-primary-ghost);
  border-radius: 4px;
  padding: 2px 8px;
}
.routines-add-here {
  background: transparent;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font);
}
.routines-add-here:hover { background: var(--color-primary-ghost); }
.routines-slot-list { display: flex; flex-direction: column; gap: 4px; }
.routines-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--color-primary-ghost);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.88rem;
}
.routines-client { color: var(--color-text); }
.routines-remove {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.routines-remove:hover { background: rgba(196, 75, 63, 0.15); color: #C44B3F; }
.routines-empty {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin: 4px 0 0 0;
  font-style: italic;
}

/* picker modale (add-routine) */
.rp-modal { max-width: 480px; }
.rp-modal .modal-header h3 { margin: 0 0 4px 0; }
.rp-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 400;
}
.rp-body { display: flex; flex-direction: column; gap: 10px; }
.rp-warn {
  background: rgba(196, 75, 63, 0.10);
  border: 1px solid rgba(196, 75, 63, 0.35);
  color: #8b3027;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.rp-warn.hidden { display: none; }
.rp-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}
.rp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.92rem;
  font-family: var(--font);
  text-align: left;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.rp-item:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}
.rp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--color-primary-ghost);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.rp-name { flex: 1; color: var(--color-text); }
.rp-check {
  width: 22px;
  text-align: center;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
}
.rp-item-selected {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}
.rp-item-selected .rp-avatar {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* Over-capacity / pieno */
.routines-slot.is-over {
  background: rgba(196, 75, 63, 0.05);
  border-radius: 8px;
  padding: 4px 6px;
  margin-left: -6px; margin-right: -6px;
}
.routines-slot-occ.is-full {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.routines-slot-occ.is-over {
  background: #C44B3F;
  color: #fff;
}
.routines-add-here.is-disabled {
  border-style: solid;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

/* Chip "selezionati" in cima al picker */
.rp-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-primary-ghost);
  border: 1px dashed var(--color-primary);
  border-radius: 10px;
}
.rp-selected.hidden { display: none; }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-pill);
  padding: 3px 4px 3px 3px;
  font-size: 0.78rem;
  font-weight: 500;
  max-width: 100%;
}
.rp-chip-avatar {
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.22);
  color: var(--color-primary-text);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rp-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.rp-chip-x {
  background: transparent;
  border: none;
  color: var(--color-primary-text);
  font-size: 0.95rem;
  line-height: 1;
  width: 18px; height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  opacity: 0.85;
}
.rp-chip-x:hover { background: rgba(255,255,255,0.18); opacity: 1; }

/* ============================================================
   Excel view
   ============================================================ */
.excel-header { margin-bottom: 18px; }
.excel-header .view-sub {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-top: 4px;
  max-width: 720px;
}
.excel-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.excel-toolbar .routines-search { flex: 1; min-width: 200px; }
.excel-period, .excel-date {
  padding: 9px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font);
  font-size: 0.88rem;
  cursor: pointer;
}
.excel-date.hidden { display: none; }
.excel-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--color-primary-ghost);
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}
.excel-stat b { color: var(--color-primary); font-weight: 700; }

.excel-table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-family: var(--font);
  white-space: nowrap;
  table-layout: fixed;
}
/* Larghezze colonne master: chevron / nome / tel / pacchetti / rimaste / speso / stato */
.excel-table thead th:nth-child(1) { width: 44px; }
.excel-table thead th:nth-child(2) { width: auto; }   /* Nome flex */
.excel-table thead th:nth-child(3) { width: 16%; }    /* Telefono */
.excel-table thead th:nth-child(4) { width: 12%; }    /* Pacchetti */
.excel-table thead th:nth-child(5) { width: 12%; }    /* Lez. rimaste */
.excel-table thead th:nth-child(6) { width: 12%; }    /* Totale speso */
.excel-table thead th:nth-child(7) { width: 12%; }    /* Stato */
.excel-table thead th {
  position: sticky; top: 0;
  background: var(--color-primary);
  color: var(--color-primary-text);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  z-index: 1;
}
.excel-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
}
.excel-table tbody tr:hover td {
  background: var(--color-primary-ghost);
}
.excel-table .cell-num { text-align: center; font-variant-numeric: tabular-nums; }
/* Allinea anche gli header delle 3 colonne numeriche al centro per
   non avere lo sfasamento "header a sinistra, valori a destra". */
.excel-table thead th:nth-child(4),
.excel-table thead th:nth-child(5),
.excel-table thead th:nth-child(6) { text-align: center; }
.excel-table thead th:nth-child(7) { text-align: center; }
.excel-table tbody td:nth-child(7) { text-align: center; }
.excel-table .cell-dates {
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
}
.excel-table .cell-active {
  color: #1d6b3f;
  font-weight: 600;
}
.excel-table .cell-completed {
  color: var(--color-text-muted);
}
.excel-table .cell-debito {
  color: #C44B3F;
  font-weight: 700;
}
.excel-empty {
  text-align: center;
  padding: 24px;
  color: var(--color-text-muted);
}

/* ── Toolbar extras (toggle "Solo attivi" + Espandi/Comprimi) ── */
.excel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 6px 10px;
  background: var(--color-primary-ghost);
  border-radius: 999px;
}
.excel-toggle input { accent-color: var(--color-primary); }
.excel-mini-btn {
  font-size: 0.82rem;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--color-border-mid);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s;
}
.excel-mini-btn:hover { background: var(--color-primary-ghost); }

/* Indicatore "Live" — pill con pallino verde pulsante quando il canale
   realtime e' SUBSCRIBED. Diventa ambra mentre sincronizza, grigio se
   il canale e' chiuso. */
.excel-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(35, 113, 133, 0.08);
  color: var(--color-text-secondary);
  user-select: none;
  letter-spacing: 0.02em;
}
.excel-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: background 0.18s;
}
.excel-live[data-state="live"]    { background: rgba(29, 107, 63, 0.10); color: #1d6b3f; }
.excel-live[data-state="live"] .excel-live-dot {
  background: #1d6b3f;
  animation: excel-live-pulse 1.8s ease-out infinite;
}
.excel-live[data-state="syncing"] { background: rgba(212, 132, 58, 0.12); color: #B36E25; }
.excel-live[data-state="syncing"] .excel-live-dot { background: #D4843A; }
.excel-live[data-state="off"]     { background: rgba(196, 75, 63, 0.10); color: #C44B3F; }
.excel-live[data-state="off"] .excel-live-dot { background: #C44B3F; }
@keyframes excel-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 107, 63, 0.50); }
  70%  { box-shadow: 0 0 0 8px rgba(29, 107, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 107, 63, 0); }
}

/* ── Master row: una per cliente, sempre visibile ── */
.excel-table .excel-master-row {
  cursor: pointer;
  transition: background 0.12s;
}
.excel-table .excel-master-row td { white-space: nowrap; }
.excel-table .excel-master-row:hover td { background: var(--color-primary-ghost); }
.excel-table .excel-master-row.is-open td { background: var(--color-primary-bg); }

.excel-chevron-cell { width: 38px; }
.excel-chevron {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.12s;
}
.excel-master-row.is-open .excel-chevron { transform: rotate(90deg); }
.excel-chevron:hover { background: rgba(35, 113, 133, 0.10); }

.excel-name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  color: var(--color-text);
}
.excel-nome-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.excel-nome-link:hover { color: var(--color-primary); text-decoration: underline; }
.excel-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.excel-meta { color: var(--color-text-secondary); font-size: 0.84rem; }
.excel-mini-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ── Detail row: card pacchetti sotto la master row ── */
.excel-detail-row.hidden { display: none; }
.excel-detail-cell {
  padding: 0 !important;
  background: var(--color-bg);
  border-top: none !important;
}
.excel-detail-inner {
  padding: 14px 18px 20px 60px; /* 60px left → si allinea sotto "Nome" */
  border-left: 3px solid var(--color-primary);
  margin-left: 38px;            /* allinea sotto chevron + avatar */
}
.excel-detail-email {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin: -4px 0 10px;
  font-style: italic;
}
.excel-pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 1100px) {
  .excel-pkg-grid { grid-template-columns: 1fr 1fr; }
}

/* Singola card pacchetto */
.excel-pkg {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(20, 50, 60, 0.03);
}
.excel-pkg-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.excel-pkg-num {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.excel-pkg-title { min-width: 0; }
.excel-pkg-type {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.92rem;
}
.excel-pkg-pay {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.excel-pkg-status {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.excel-pkg-status-active    { background: rgba(29, 107, 63, 0.10); color: #1d6b3f; }
.excel-pkg-status-completed { background: rgba(20, 50, 60, 0.08);  color: var(--color-text-secondary); }
.excel-pkg-status-debito    { background: rgba(196, 75, 63, 0.12); color: #C44B3F; }

/* Metriche affiancate */
.excel-pkg-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 10px 6px;
}
.excel-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.excel-metric-v {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.excel-metric-l {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.excel-metric.is-warn .excel-metric-v { color: #C44B3F; }
.excel-metric.is-warn .excel-metric-l { color: #C44B3F; font-weight: 600; }

/* Date lezioni come pill list */
.excel-pkg-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.excel-pkg-dates-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.excel-pkg-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.excel-date-pill {
  display: inline-block;
  font-size: 0.76rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-primary-ghost);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.excel-date-pill.excel-date-absent {
  background: rgba(196, 75, 63, 0.10);
  color: #C44B3F;
  font-weight: 600;
}
.excel-date-pill.excel-date-future {
  background: transparent;
  color: #2f5d44;
  border: 1px dashed rgba(47, 93, 68, 0.5);
  font-style: italic;
}
.excel-pkg-empty {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  font-style: italic;
}
.rp-slots { display: flex; flex-direction: column; gap: 14px; }
.rp-day-group { display: flex; flex-direction: column; gap: 6px; }
.rp-day-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--color-primary);
  font-weight: 600;
}
.rp-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-slot-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font);
}
.rp-slot-btn:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* Bottoni modifica/elimina pacchetto nella sezione Excel */
.excel-pkg-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 8px; }
.excel-pkg-edit, .excel-pkg-del {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-mid);
  background: var(--color-surface);
  border-radius: 7px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.excel-pkg-edit svg, .excel-pkg-del svg { width: 14px; height: 14px; }
.excel-pkg-edit:hover { background: var(--color-primary-ghost); border-color: var(--color-primary); color: var(--color-primary); }
.excel-pkg-del:hover { background: rgba(181,72,61,0.10); border-color: var(--color-danger); color: var(--color-danger); }

/* Pillole lezione cliccabili + bottone aggiungi (sezione Excel) */
.excel-date-edit { cursor: pointer; border: 1px solid transparent; font: inherit; }
.excel-date-edit:hover { border-color: var(--color-primary); background: var(--color-primary-ghost); color: var(--color-primary); }
.excel-date-bonus { background: rgba(120,120,120,0.12); color: var(--color-text-secondary); }
.excel-pkg-dates-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.excel-add-lesson {
  padding: 3px 9px; border: 1px dashed var(--color-primary); background: transparent;
  color: var(--color-primary); border-radius: 999px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.excel-add-lesson:hover { background: var(--color-primary-ghost); }

/* Sezione "Rimosse / disdette" nel calendario presenze (chi è stato tolto da uno slot) */
.slot-removed {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.12);
}
.slot-removed-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B5483D;
  margin: 0 4px 6px;
}
.client-row.removed-row {
  opacity: 0.72;
  cursor: default;
}
.client-row.removed-row .client-name s { color: #888; text-decoration-color: #c98; }
.removed-avatar {
  background: #e8e0dd !important;
  color: #a06b62 !important;
}
.removed-reason {
  margin-left: auto;
  font-size: 0.72rem;
  color: #B5483D;
  background: rgba(181,72,61,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Rimosse/disdette nel pannello "Lezione selezionata" */
.wg-removed-label { color: #B5483D; margin-top: 14px; }
.wg-iscritta-removed { opacity: 0.72; cursor: default; }
.wg-iscritta-removed .wg-iscritta-name s { color: #8a8a8a; text-decoration-color: #c98; }
.wg-iscritta-removed .wg-iscritta-avatar { background: #e8e0dd; color: #a06b62; }
.wg-removed-reason {
  margin-left: auto; font-size: 0.72rem; color: #B5483D;
  background: rgba(181,72,61,0.08); padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}

/* Routine in attesa (forecast) — mostrate ma NON conteggiate nelle presenze */
.wg-forecast-label { color: #8a7a52; margin-top: 14px; }
.wg-iscritta-forecast { opacity: 0.78; }
.wg-forecast-tag {
  font-size: 0.66rem; font-weight: 700; color: #8a7a52;
  background: rgba(201,162,75,0.14); padding: 1px 7px; border-radius: 9px; margin-left: 4px;
}

/* Slot annullato + ripristino (agenda presenze) */
.wg-lesson-btn.is-cancelled { opacity: 0.92; }
.wg-hero.wg-hero-cancelled { background: linear-gradient(135deg,#b5483d,#cf6a5f) !important; }
.wg-restore-btn {
  background: #237185; color: #fff; border: none; font-weight: 700;
  box-shadow: 0 2px 8px rgba(35,113,133,0.3);
}
.wg-restore-btn:active { transform: translateY(1px); }

/* ============================================================
   sql/109 — Posto extra + blocco prenotazioni
   ============================================================ */
.slot-extra {
  color: var(--color-warning);
  font-weight: 600;
  white-space: nowrap;
}

.client-blocked-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-danger);
  background: #FFF4F2;
  border: 1px solid rgba(196, 75, 63, 0.25);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.booking-block-section {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-sm);
}
.booking-block-section.is-blocked {
  background: #FFF4F2;
  border-color: rgba(196, 75, 63, 0.3);
}
.booking-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.booking-block-info { min-width: 0; }
.booking-block-info h4 { margin: 0 0 2px; }
.booking-block-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.booking-block-section.is-blocked .booking-block-status { color: var(--color-danger); }
.booking-block-btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px;
  width: auto;
}
.booking-block-btn-danger {
  color: var(--color-danger);
  border-color: rgba(196, 75, 63, 0.3);
}
.booking-block-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--color-warning);
}
.booking-block-form { margin-top: 12px; }
.booking-block-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.booking-block-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* evita lo zoom automatico su iOS */
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-xs);
  resize: vertical;
}
.booking-block-form-hint {
  margin: 6px 0 10px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.booking-block-form-actions {
  display: flex;
  gap: 8px;
}
.booking-block-form-actions > button { flex: 1; min-height: 44px; }
.wg-hero-extra {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #F6C28E;
}
.booking-block-head .booking-block-btn { flex: 0 0 auto; width: auto; min-width: 104px; }
.booking-block-section .booking-block-info h4 { border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }

/* ============================================================
   TELEFONO — tab "Altro" (Routine, Excel, Statistiche) e le viste
   Routine / Excel impaginate per il telefono. Le regole che cambiano
   il layout stanno sotto i 768px: desktop e iPad (sidebar) restano uguali.
   ============================================================ */

/* Elementi solo-telefono: nascosti di default */
.view-sub-short,
.routines-day-chips,
.excel-cards { display: none; }

/* Foglio "Altro" (riusa .modal-overlay / .modal-sheet) */
@media (min-width: 768px) {
  #more-sheet { display: none !important; }
}
.more-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px var(--spacing-md) 18px;
}
.more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.more-item:active { transform: scale(0.99); background: var(--color-bg); }
.more-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-title { font-weight: 600; font-size: 0.92rem; color: var(--color-text); letter-spacing: -0.01em; }
.more-sub { font-size: 0.78rem; color: var(--color-text-secondary); }
.more-chevron { color: var(--color-muted); flex-shrink: 0; }
.more-tag {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-primary-ghost);
  border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 6px; vertical-align: 1px;
}

/* Excel: card per cliente (la lista si vede solo sotto i 768px) */
.excel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.excel-card.is-open { border-color: var(--color-border-mid); }
.excel-card-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 14px 13px var(--spacing-md);
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.excel-card-head .client-avatar { width: 38px; height: 38px; font-size: 0.78rem; border-radius: 12px; }
.excel-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.excel-card-name { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--color-text); }
.excel-card-meta {
  font-size: 0.78rem; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.excel-card-meta .is-active { color: #1d6b3f; font-weight: 600; }
.excel-card-meta .is-debito { color: #C44B3F; font-weight: 700; }
.excel-card-chev { color: var(--color-primary); flex-shrink: 0; transition: transform 0.18s ease; }
.excel-card.is-open .excel-card-chev { transform: rotate(90deg); }
.excel-card-body {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 12px 10px;
  font-size: 0.84rem; /* come la cella tabella: le pillole data usano font: inherit */
}
.excel-card-body .excel-detail-email { margin: 0 4px 10px; }
/* Testata card pacchetto su 2 righe: azioni a destra, stato sotto al pagamento */
.excel-card-body .excel-pkg-head {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num title actions" "num status status";
  row-gap: 6px;
  align-items: start;
}
.excel-card-body .excel-pkg-num { grid-area: num; }
.excel-card-body .excel-pkg-title { grid-area: title; }
.excel-card-body .excel-pkg-actions { grid-area: actions; margin-left: 0; }
.excel-card-body .excel-pkg-status { grid-area: status; justify-self: start; }
.excel-card-body .excel-metric-l { font-size: 0.62rem; letter-spacing: 0.02em; white-space: nowrap; }

@media (max-width: 767px) {
  /* Titolo e sottotitolo corti */
  .view-title-prefix,
  .view-sub-long { display: none; }
  .view-sub-short { display: block; }
  .routines-header,
  .excel-header { margin: 4px 0 14px; }
  .routines-header .view-title,
  .excel-header .view-title { font-size: 1.5rem; margin: 0; }
  .routines-header .view-sub,
  .excel-header .view-sub { font-size: 0.85rem; margin-top: 2px; color: var(--color-text-secondary); }

  /* Routine */
  .routines-toolbar { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
  .routines-toolbar .routines-search { min-width: 0; }
  .routines-toolbar .btn-primary {
    flex: 0 0 auto; min-height: 40px; padding: 0 16px;
    font-size: 0.85rem; white-space: nowrap;
  }
  .routines-stats { gap: 6px 16px; margin-bottom: 12px; }
  .routines-day-chips { display: flex; margin-bottom: 12px; }
  .routines-day.is-day-hidden { display: none; }

  /* Excel: cerca / periodo + solo attivi / live + scarica */
  .excel-toolbar { gap: 8px; margin-bottom: 12px; }
  .excel-toolbar .routines-search { flex: 1 1 100%; min-width: 0; }
  .excel-period { flex: 1 1 150px; min-width: 0; }
  .excel-date { flex: 1 1 40%; min-width: 0; }
  #excel-expand-all { display: none; }
  .excel-toolbar .btn-primary {
    flex: 0 0 auto; min-height: 38px; padding: 0 16px;
    font-size: 0.85rem; margin-left: auto;
  }
  .excel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .excel-table-wrap { display: none; }
  .excel-cards { display: flex; flex-direction: column; gap: 10px; }
}