/* ============================================================
   CALENDARIO — REDESIGN DROP-IN  (NutriLift / DietApp)
   ------------------------------------------------------------
   Caricare DOPO il CSS esistente del calendario, così queste
   regole vincono per cascata. Usa i NOMI DI CLASSE REALI della
   tua appuntamenti.html + le classi nuove di calendario-timeline.js.

   Nessun !important salvo dove necessario: se qualcosa non vince,
   aumenta la specificità prefissando con `#appuntamenti-management`.
   ============================================================ */

/* ---------- 1. DESIGN TOKEN ---------- */
/* I colori arrivano da theme.css (variabili globali su :root). Un solo set di
   token: il dark mode segue AUTOMATICAMENTE `.dark-mode` di theme.css, perché
   ogni --cal-* punta a una variabile di tema che viene già ridefinita lì.
   I token strutturali (raggi, altezza ora, ombre) restano locali. */
#appuntamenti-management {
  --cal-bg: var(--bg-surface-card);
  --cal-surface: var(--bg-surface);
  --cal-surface-2: var(--bg-surface-raised);
  --cal-surface-3: var(--bg-surface-alt);
  --cal-border: var(--border-light);
  --cal-border-2: var(--border-medium);
  --cal-text: var(--text-heading);
  --cal-text-2: var(--text-secondary);
  --cal-text-3: var(--text-hint);
  --cal-brand: var(--nl-nutri);
  --cal-brand-2: var(--nl-nutri-light);
  --cal-brand-soft: color-mix(in srgb, var(--nl-nutri) 12%, var(--bg-surface));
  --cal-teal: var(--brand);
  --cal-shadow-sm: 0 1px 2px var(--shadow-sm), 0 1px 6px var(--shadow-sm);
  --cal-shadow-md: 0 8px 28px var(--shadow-md);
  --cal-shadow-lg: 0 24px 60px var(--shadow-lg);
  --cal-grid-line: var(--border-light);
  --cal-now: var(--danger);
  --cal-r-md: 12px;
  --cal-r-lg: 16px;
  /* altezza di un'ora nella timeline: USATA ANCHE DAL JS (calcolo drag) */
  --cal-hour-h: 58px;
}

/* ---------- 1b. SHELL DIREZIONE B / STUDIO ---------- */
#appuntamenti-management,
#appuntamenti-management * {
  font-family: 'Space Grotesk', 'Futura', 'Trebuchet MS', Arial, sans-serif !important;
  scrollbar-width: none;
}

#appuntamenti-management {
  color: var(--cal-text) !important;
}

#appuntamenti-management:not(.hidden) {
  display: block;
}

#appuntamenti-management .cal-studio-shell {
  display: flex;
  min-height: calc(100vh - 150px);
  
  background: var(--cal-bg);
  border: 1px solid color-mix(in srgb, var(--cal-border) 80%, transparent);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--cal-shadow-lg);
}

.cal-studio-rail {
  width: 320px;
  flex: 0 0 320px;
  background: var(--cal-surface);
  border-right: 1px solid var(--cal-border);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.cal-studio-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-studio-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--cal-brand), var(--cal-brand-2));
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  box-shadow: var(--cal-shadow-sm);
}

.cal-studio-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--cal-text) !important;
  letter-spacing: -.3px;
}

.cal-studio-brand-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cal-text-3) !important;
}

.cal-studio-clock {
  background: linear-gradient(150deg, var(--cal-brand), var(--cal-brand-2));
  border-radius: var(--cal-r-lg);
  padding: 16px 18px;
  color: #fff !important;
  box-shadow: var(--cal-shadow-md);
}

.cal-studio-clock-time {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1;
  color: #fff !important;
}

.cal-studio-clock-date {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 650;
  opacity: .9;
  text-transform: capitalize;
  color: #fff !important;
}

.cal-studio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cal-studio-stat {
  border: 1px solid var(--cal-border);
  background: var(--cal-surface-2);
  border-radius: var(--cal-r-md);
  padding: 11px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}

.cal-studio-stat:hover {
  border-color: var(--cal-brand);
  transform: translateY(-1px);
}

.cal-studio-stat-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--cal-text) !important;
}

.cal-studio-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cal-text-3) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cal-studio-stat[data-tone="ok"] .cal-studio-stat-num { color: var(--success) !important; }
.cal-studio-stat[data-tone="warn"] .cal-studio-stat-num { color: var(--warning) !important; }

.cal-studio-agenda {
  flex: 1;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

.cal-studio-agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.cal-studio-agenda-head > span:first-child,
.cal-studio-panel-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--cal-text) !important;
}

.cal-studio-agenda-sub {
  font-size: 12px;
  font-weight: 650;
  color: var(--cal-text-3) !important;
  white-space: nowrap;
}

.cal-studio-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  min-height: 0;
}

.cal-studio-agenda-empty {
  padding: 20px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cal-text-3) !important;
}

.cal-studio-mini-event {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--cal-border);
  background: var(--cal-surface-2);
  border-radius: 11px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.cal-studio-mini-event:hover {
  border-color: var(--ev);
  transform: translateX(2px);
}

.cal-studio-mini-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--cal-text-2) !important;
  flex: 0 0 auto;
}

.cal-studio-mini-bar {
  width: 3px;
  align-self: stretch;
  background: var(--ev);
  border-radius: 3px;
}

.cal-studio-mini-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-studio-mini-title {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--cal-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-studio-mini-type {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cal-text-3) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-studio-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-studio-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  background: var(--cal-surface-2);
  border-color: var(--cal-border);
  padding: 8px;
}

.cal-studio-reminder {
  justify-content: space-between;
  background: var(--cal-surface-2);
  border: 1px solid var(--cal-border);
  padding: 8px;
  padding-left: 12px;
}

.cal-studio-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--cal-surface);
}

.cal-studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.cal-studio-topbar-left,
.cal-studio-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cal-studio-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cal-surface);
  border: 1px solid var(--cal-border);
  border-radius: 11px;
  padding: 4px;
  box-shadow: var(--cal-shadow-sm);
}

.cal-studio-topbar .cal-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--cal-text-2) !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cal-studio-topbar .cal-nav-btn:hover,
.cal-studio-topbar .cal-today-btn:hover {
  background: var(--cal-surface-2);
  color: var(--cal-text) !important;
}

.cal-studio-topbar .cal-nav-btn .cal-nav-icon,
.cal-studio-topbar .cal-nav-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cal-studio-topbar .cal-nav-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal-studio-topbar .cal-today-btn {
  border: none;
  background: none;
  color: var(--cal-text) !important;
  font-size: 12.5px;
  font-weight: 750;
  padding: 6px 12px;
  border-radius: 8px;
}

.cal-studio-period {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--cal-text) !important;
  letter-spacing: -.6px;
  text-transform: capitalize;
  white-space: nowrap;
}

.cal-studio-pills {
  background: var(--cal-surface);
  border: 1px solid var(--cal-border);
  border-radius: 11px;
  padding: 3px;
  box-shadow: none;
}

.cal-studio-pills .cal-view-btn {
  color: var(--cal-text-2) !important;
  font-size: 13px;
  font-weight: 750;
  padding: 7px 16px;
  border-radius: 8px;
}

.cal-studio-pills .cal-view-btn.active {
  background: var(--cal-text);
  color: var(--cal-surface) !important;
}

.cal-studio-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cal-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 750;
  box-shadow: var(--cal-shadow-sm);
}

.cal-studio-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0 24px 24px;
}

.cal-studio-canvas {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cal-studio-canvas > #cal-view-month,
.cal-studio-canvas > #cal-view-week,
.cal-studio-canvas > #cal-view-day {
  flex: 1;
  min-height: 0;
}

#appuntamenti-management .cal-filters {
  padding: 0 24px 14px;
}

/* ---------- 2. FILTRI (markup generato da calBuildFilterBar) ---------- */
.cal-filters { display: flex; align-items: center; gap: 12px; padding: 10px 0 16px; flex-wrap: wrap; }
.cal-flt-label { font-size: 11px; font-weight: 700; color: var(--cal-text-3); text-transform: uppercase; letter-spacing: .5px; }
.cal-flt-status { display: flex; gap: 6px; }
.cal-flt-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--cal-border); background: var(--cal-surface); color: var(--cal-text-3); border-radius: 20px; padding: 6px 13px 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.cal-flt-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cal-text-3); }
.cal-flt-chip[data-st="confirmed"].on { border-color: #10b981; color: var(--cal-text); background: color-mix(in srgb, #10b981 10%, var(--cal-surface)); }
.cal-flt-chip[data-st="confirmed"].on .cal-flt-chip-dot { background: #10b981; }
.cal-flt-chip[data-st="pending"].on { border-color: #f59e0b; color: var(--cal-text); background: color-mix(in srgb, #f59e0b 10%, var(--cal-surface)); }
.cal-flt-chip[data-st="pending"].on .cal-flt-chip-dot { background: #f59e0b; }
.cal-flt-chip[data-st="rejected"].on { border-color: #ef4444; color: var(--cal-text); background: color-mix(in srgb, #ef4444 10%, var(--cal-surface)); }
.cal-flt-chip[data-st="rejected"].on .cal-flt-chip-dot { background: #ef4444; }
.cal-flt-chip[data-st="cancelled_by_patient"].on { border-color: #6b7280; color: var(--cal-text); background: color-mix(in srgb, #6b7280 10%, var(--cal-surface)); }
.cal-flt-chip[data-st="cancelled_by_patient"].on .cal-flt-chip-dot { background: #6b7280; }
.cal-flt-chip:not(.on) { opacity: .7; text-decoration: line-through; text-decoration-color: var(--cal-border-2); }
.cal-flt-chip:hover { opacity: 1; }
.cal-flt-reset { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--cal-text-2); font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.cal-flt-reset:hover { color: var(--cal-text); background: var(--cal-surface-2); }
.cal-flt-count { font-size: 11px; font-weight: 700; color: var(--cal-brand); background: var(--cal-brand-soft); padding: 2px 7px; border-radius: 20px; }
/* il tuo campo cliente esistente (.cal-client-search-wrap) può essere riusato come picker */

/* ---------- 3. TOGGLE VISTA: aggiunge "Giorno" ---------- */
.cal-view-toggle { display: inline-flex; background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: 11px; padding: 3px; box-shadow: var(--cal-shadow-sm); }
.cal-view-btn { border: none; background: none; color: var(--cal-text-2); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all .18s; }
.cal-view-btn.active { background: var(--cal-brand); color: #fff; }
#cal-view-week,
#cal-view-day { min-height: min(720px, 72vh); }

/* ---------- 4. TIMELINE ORARIA (settimana + giorno) ---------- */
/* Markup atteso (generato dal JS):
   .cal-tl > .cal-tl-head (col header)  +  .cal-tl-scroll > .cal-tl-body
   .cal-tl-body > .cal-tl-gutter (ore)  +  .cal-tl-cols > .cal-tl-col*
   evento: .cal-tl-ev[data-st] con style top/height/left/width + --ev   */
.cal-tl { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: var(--cal-r-lg); overflow: hidden; box-shadow: var(--cal-shadow-md); }
.cal-tl-head { display: flex; border-bottom: 1px solid var(--cal-border); flex-shrink: 0; }
.cal-tl-head-gutter { width: 58px; flex-shrink: 0; }
.cal-tl-head-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border-left: 1px solid var(--cal-border); cursor: pointer; }
.cal-tl-head-col:hover { background: var(--cal-surface-2); }
.cal-tl-head-wd { font-size: 10.5px; font-weight: 700; color: var(--cal-text-3); text-transform: uppercase; letter-spacing: .6px; }
.cal-tl-head-num { font-size: 17px; font-weight: 700; color: var(--cal-text); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-tl-head-col.cal-today .cal-tl-head-wd { color: var(--cal-brand); }
.cal-tl-head-col.cal-today .cal-tl-head-num { background: var(--cal-brand); color: #fff; }

.cal-tl-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-tl-body { position: relative; display: flex; }
.cal-tl-gutter { width: 58px; flex-shrink: 0; position: relative; border-right: 1px solid var(--cal-border); }
.cal-tl-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; font-weight: 500; color: var(--cal-text-3); font-variant-numeric: tabular-nums; }
.cal-tl-cols { flex: 1; position: relative; display: grid; }
.cal-tl-lines { position: absolute; inset: 0; pointer-events: none; }
.cal-tl-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--cal-grid-line); }
.cal-tl-col { position: relative; border-left: 1px solid var(--cal-border); }
.cal-tl-col.cal-today { background: color-mix(in srgb, var(--cal-brand) 4%, transparent); }
.cal-tl-col.cal-drop { background: color-mix(in srgb, var(--cal-brand) 8%, transparent); }
.cal-tl-slot { position: absolute; left: 0; right: 0; cursor: pointer; }
.cal-tl-slot:hover { background: color-mix(in srgb, var(--cal-brand) 7%, transparent); }

.cal-tl-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--cal-now); z-index: 6; pointer-events: none; }
.cal-tl-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-now); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-now) 30%, transparent); }

.cal-tl-ev { position: absolute; border: none; text-align: left; overflow: hidden; border-radius: 8px; padding: 5px 8px 5px 11px; z-index: 3; cursor: grab; touch-action: none; background: color-mix(in srgb, var(--ev) 15%, var(--cal-surface)); color: var(--cal-text); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--cal-shadow-sm); transition: transform .12s, box-shadow .15s; }
.cal-tl-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ev); }
.cal-tl-ev:hover { transform: translateY(-1px); box-shadow: var(--cal-shadow-md); z-index: 7; }
.cal-tl-ev.cal-dragging { cursor: grabbing; z-index: 20; box-shadow: var(--cal-shadow-lg); opacity: .96; transition: none; }
.cal-tl-ev-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tl-ev-meta { font-size: 10.5px; color: var(--cal-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tl-ev[data-st="pending"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ev) 13%, var(--cal-surface)) 0 7px, color-mix(in srgb, var(--ev) 21%, var(--cal-surface)) 7px 14px); }
.cal-tl-ev[data-st="rejected"], .cal-tl-ev[data-st="cancelled_by_patient"] { opacity: .6; }
.cal-tl-ev[data-st="rejected"] .cal-tl-ev-title { text-decoration: line-through; }
.cal-tl-ev-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; }
.cal-tl-ev[data-st="confirmed"] .cal-tl-ev-dot { background: #10b981; }
.cal-tl-ev[data-st="pending"] .cal-tl-ev-dot { background: #f59e0b; }
.cal-tl-ev[data-st="rejected"] .cal-tl-ev-dot { background: #ef4444; }
.cal-tl-ev[data-st="cancelled_by_patient"] .cal-tl-ev-dot { background: #6b7280; }

/* ---------- 5. RESTYLE LEGGERO DELLE VISTE ESISTENTI ---------- */
/* (queste vincono sul tuo CSS perché caricate dopo) */
#cal-days-month .cal-day { background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: var(--cal-r-md); transition: border-color .15s, box-shadow .15s; }
#cal-days-month .cal-day:hover { border-color: var(--cal-brand-2); box-shadow: var(--cal-shadow-sm); }
#cal-days-month .cal-day.cal-today { border-color: var(--cal-brand); box-shadow: inset 0 0 0 1px var(--cal-brand); }
#cal-days-month .cal-day.cal-selected { border-color: var(--cal-brand); box-shadow: 0 0 0 2px var(--cal-brand-soft); }

/* ---------- 6. OVERRIDE MESE DIREZIONE B ---------- */
#appuntamenti-management .cal-weekdays { gap: 6px; margin-bottom: 8px; }
#appuntamenti-management .cal-weekdays div { text-align: left; font-size: 11px; font-weight: 800; color: var(--cal-text-3) !important; letter-spacing: .8px; padding-left: 4px; }
#appuntamenti-management .cal-days { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(108px, 1fr); gap: 6px; }
#appuntamenti-management #cal-days-month .cal-day { display: flex; flex-direction: column; gap: 3px; background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: var(--cal-r-md); transition: border-color .15s, box-shadow .15s, transform .12s; }
#appuntamenti-management #cal-days-month .cal-day:hover { border-color: var(--cal-brand-2); box-shadow: var(--cal-shadow-sm); }
#appuntamenti-management #cal-days-month .cal-day.cal-today { border-color: var(--cal-brand); box-shadow: inset 0 0 0 1px var(--cal-brand); }
#appuntamenti-management #cal-days-month .cal-day.cal-selected { border-color: var(--cal-brand); box-shadow: 0 0 0 2px var(--cal-brand-soft); }
#appuntamenti-management #cal-days-month .cal-day-number { color: var(--cal-text) !important; font-size: 13px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
#appuntamenti-management #cal-days-month .cal-today .cal-day-number { background: var(--cal-brand); color: #fff !important; }
#appuntamenti-management #cal-days-month .cal-day-event { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; border: none; border-radius: 6px; padding: 3px 7px 3px 10px; background: color-mix(in srgb, var(--ev) 13%, var(--cal-surface)); color: var(--cal-text) !important; text-align: left; font-size: 11.5px; font-weight: 650; overflow: hidden; cursor: pointer; transition: transform .12s, background .15s; }
#appuntamenti-management #cal-days-month .cal-day-event::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ev); border-radius: 3px; }
#appuntamenti-management #cal-days-month .cal-day-event:hover { transform: translateX(1px); background: color-mix(in srgb, var(--ev) 22%, var(--cal-surface)); }
#appuntamenti-management #cal-days-month .cal-day-event-time { color: var(--ev) !important; font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
#appuntamenti-management #cal-days-month .cal-day-event-title { color: var(--cal-text) !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#appuntamenti-management #cal-days-month .cal-day-event[data-st="pending"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ev) 12%, var(--cal-surface)) 0 6px, color-mix(in srgb, var(--ev) 20%, var(--cal-surface)) 6px 12px); }
#appuntamenti-management #cal-days-month .cal-day-event[data-st="rejected"],
#appuntamenti-management #cal-days-month .cal-day-event[data-st="cancelled_by_patient"] { opacity: .62; }
#appuntamenti-management #cal-days-month .cal-day-event[data-st="rejected"] .cal-day-event-title { text-decoration: line-through; }
#appuntamenti-management #cal-days-month .cal-day-more { color: var(--cal-text-3) !important; font-size: 10.5px; font-weight: 700; padding-left: 4px; }

/* ---------- 7. AGENDA DEL RAIL: giorno selezionato ---------- */
/* La cal-sidebar è stata rimossa: cliccando un giorno gli eventi appaiono qui.
   Header con titolo a sinistra, azioni (reset "Oggi" + data + "+") a destra. */
.cal-studio-agenda-actions { display: inline-flex; align-items: center; gap: 8px; }
.cal-studio-agenda-reset {
  border: 1px solid var(--cal-border); background: var(--cal-surface-2);
  color: var(--cal-text-2) !important; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; transition: border-color .15s, color .15s;
}
.cal-studio-agenda-reset:hover { border-color: var(--cal-brand); color: var(--cal-text) !important; }
.cal-studio-agenda-add {
  width: 24px; height: 24px; flex: 0 0 auto; border: none; border-radius: 7px; padding: 0;
  background: var(--cal-brand); color: #fff !important; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
  transition: background .15s, transform .12s;
}
.cal-studio-agenda-add:hover { background: var(--cal-brand-2); transform: translateY(-1px); }

/* ---------- 8. MODAL NUOVO/MODIFICA EVENTO — redesign (theme.css) ---------- */
/* Il modal è FUORI da #appuntamenti-management: usa le variabili globali di
   theme.css. Look "Studio": superficie pulita, barra-accento brand→teal in
   cima, header su superficie (niente più barra piena), CTA teal. Stessi campi
   e struttura (solo CSS).
   Layout a colonna: header/footer fissi + BODY SCROLLABILE → corregge lo
   scroll bloccato quando il form è più alto del viewport. */

/* Scroll-lock: blocca lo scroll della pagina mentre un modal del calendario è
   aperto (il modal evento non lo faceva, a differenza degli altri modal). */
body:has(#cal-event-modal:not(.hidden)),
body:has(#cal-apple-modal:not(.hidden)) {
  overflow: hidden;
}

#cal-event-modal,
#cal-event-modal * {
  font-family: 'Space Grotesk', 'Futura', 'Trebuchet MS', Arial, sans-serif;
}
#cal-event-modal .modal-content.cal {
  width: min(580px, 94vw);
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: 0 30px 70px var(--shadow-lg);
  overflow: hidden;
}
/* barra-accento sottile in cima */
#cal-event-modal .modal-content.cal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--nl-nutri), var(--brand));
  z-index: 3;
}

/* header pulito su superficie (override della barra piena --gradient-app) */
#cal-event-modal .modal-header {
  flex-shrink: 0;
  position: static;
  padding: 20px 24px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  margin-bottom: 0;
}
#cal-event-modal .modal-header h3 {
  margin: 0;
  font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  color: var(--text-heading);
}
#cal-event-modal .modal-close {
  background: transparent;
  width: 36px; height: 36px; border-radius: 10px;
}
#cal-event-modal .modal-close:hover { background: var(--bg-hover); }

/* body scrollabile */
#cal-event-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  scrollbar-width: none;
}
#cal-event-modal .form-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-hint);
}

/* input / textarea / select / picker orari coerenti */
#cal-event-modal .form-input,
#cal-event-modal .cal-time-picker-btn-form {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 11px;
  color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
}
#cal-event-modal .form-input:focus {
  border-color: var(--nl-nutri);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-nutri) 22%, transparent);
  outline: none;
}
#cal-event-modal .cal-time-picker-btn-form:hover { border-color: var(--nl-nutri); }

/* color picker */
#cal-event-modal .cal-color-dot { border-width: 3px; }
#cal-event-modal .cal-color-dot.active {
  border-color: var(--nl-nutri);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-nutri) 18%, transparent);
}

/* sezione notifiche come card morbida */
#cal-event-modal .cal-notifications-section {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
}

/* dropdown ricerca cliente */
#cal-event-modal .cal-client-dropdown {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 11px;
  box-shadow: 0 12px 32px var(--shadow-md);
}

/* footer fisso */
#cal-event-modal .modal-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  display: flex; justify-content: flex-end; gap: 10px;
}
#cal-event-modal .modal-footer .btn { border-radius: 11px; font-weight: 750; padding: 10px 20px; }
#cal-event-modal .modal-footer .btn-primary {
  background: var(--brand); border: none; color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: background .15s, transform .12s, box-shadow .15s;
}
#cal-event-modal .modal-footer .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
#cal-event-modal .modal-footer .btn-secondary {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
}
#cal-event-modal .modal-footer .btn-secondary:hover { background: var(--bg-hover); }
#cal-event-modal .modal-footer .btn-danger {
  margin-right: auto; /* spinge "Elimina" a sinistra, lontano da Annulla/Salva */
  background: var(--danger-bg-light, color-mix(in srgb, var(--danger) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}
#cal-event-modal .modal-footer .btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }