/* =====================================================================
   Calendario Riunioni — foglio di stile
   Struttura, come nel modello scelto dall'utente: barra bianca stretta a sole icone sulla sinistra
   (marchio in alto, sezioni, in fondo impostazioni e avatar), campo di ricerca in alto, colonna di schede
   (mini calendario, promemoria della prossima riunione in verde petrolio, filtri a caselle, sale) e a destra
   l'intestazione del periodo con le viste in un selettore a pillola e la griglia in una scheda bianca:
   giorni in riquadri, riunioni come card pastello morbide senza barra colorata, orario con l'icona
   dell'orologio, iniziali dei partecipanti in fondo alla card, freccia flottante sul bordo destro.
   Un solo carattere (DM Sans), tela grigio-verde chiarissima, ombre appena accennate, poche linee.
   FullCalendar inserisce il proprio <style> prima del primo link[rel=stylesheet], quindi questo foglio vince
   gia per ordine: le regole sono ancorate a #calendar per battere i suoi selettori piu specifici, e gli
   !important sugli eventi battono gli stili inline dei colori scritti da app.js.
   ===================================================================== */
:root {
  --bg: #f2f5f4; --panel: #ffffff; --panel-2: #f3f5f4; --panel-3: #e9edec;
  --ink: #1f2933; --ink-2: #4b5563; --ink-3: #5f6773; --line: #e6eae8; --line-2: #d4dad8; --line-faint: #eef1f0;
  --bar: #16302c; --bar-2: #21453f; --bar-ink: #ffffff;
  --teal: #117f75; --teal-2: #0e6b62; --teal-ink: #ffffff; --teal-muted: #f2fbf9; --teal-soft: #e3f3f1;
  --accent: #117f75; --accent-ink: #ffffff; --accent-soft: #e3f3f1;
  --yellow: #f5c542; --yellow-ink: #1f2933; --yellow-soft: #fdf0c8;
  --ok: #117f75; --ok-soft: #e3f3f1; --warn: #8a5a12; --warn-soft: #fbefd9; --crit: #d64545; --crit-soft: #fbe2e2;
  /* ambra: "oggi, ancora da fare". Serve sulle SCRITTE dei pannelli; sulla carta del foglietto il colore
     e' fisso, perche' la carta resta chiara anche nella versione nera. */
  --ambra: #9a5b00;
  --r-card: 16px; --r-ctl: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
  --shadow-2: 0 12px 40px rgba(16, 24, 40, .18);
  --sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: var(--sans); --mono: var(--sans);
  --tz: '';
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
h3, h4 { margin: 0 0 8px; }
h3 { font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 15px; font-weight: 700; color: var(--ink); }
a { color: var(--accent); }
::selection { background: var(--teal-soft); color: var(--teal-2); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- barra bianca a icone sulla sinistra ---------- */
.app { display: flex; height: 100%; }
.rail { width: 64px; flex: 0 0 64px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0 14px; gap: 6px; }
.rail .mark { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; font-size: 13.5px; display: grid; place-items: center; cursor: pointer; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.rail .mark:hover { background: var(--teal-2); }
.rb { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rb:hover { background: var(--panel-2); color: var(--ink); }
.rb.on { background: var(--yellow-soft); color: var(--ink); }
.rb .badge { position: absolute; top: -1px; right: -3px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 17px; }
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.user-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 10px; letter-spacing: .02em; color: #fff; border: 2px solid var(--panel); margin-left: -7px; flex: 0 0 auto; }
.av:first-child { margin-left: 0; }
.av.more { background: var(--ink-3); }
.av.big { width: 36px; height: 36px; font-size: 12.5px; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; margin: 0; padding: 0; }
.av.big:hover { box-shadow: 0 0 0 2px var(--teal); }
.me-menu { position: absolute; left: 50px; bottom: 0; background: var(--panel); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-2); padding: 12px 14px; min-width: 220px; display: flex; flex-direction: column; gap: 4px; z-index: 40; }
.me-menu b { font-size: 14.5px; }
.me-menu small { color: var(--ink-3); font-size: 11.5px; margin-bottom: 8px; }
.me-menu button { border: 0; background: var(--panel-2); border-radius: 9px; padding: 7px 10px; text-align: left; cursor: pointer; font-weight: 600; }
.me-menu button:hover { background: var(--panel-3); }

/* ---------- pagina: ricerca in alto, poi colonna di schede e area principale ---------- */
.page { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 0 16px; } /* diventa una griglia nel blocco "marchio della sala", in fondo al foglio */
.search { display: flex; align-items: center; gap: 8px; width: 270px; max-width: 100%; height: 36px; padding: 0 12px; background: var(--panel); border-radius: 999px; box-shadow: var(--shadow); color: var(--ink-3); }
.search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); padding: 0; }
.search input::placeholder { color: var(--ink-3); }
.search:focus-within { box-shadow: 0 0 0 2px var(--teal-soft), var(--shadow); color: var(--ink-2); }
.top-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.note { border: 0; background: #fff3cd; color: #7a4f0a; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.note:hover { filter: brightness(.97); }
.shell { flex: 1 1 auto; min-height: 0; display: flex; }
.side { width: 250px; flex: 0 0 250px; padding: 12px 0 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.card { background: var(--panel); border-radius: var(--r-card); padding: 14px 16px 16px; box-shadow: var(--shadow); }
.card-h { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; padding: 0; margin: 0 0 8px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); text-align: left; }
.card-h svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; flex: 0 0 auto; }
.card-h[aria-expanded="false"] svg { transform: rotate(180deg); }
.card-h[aria-expanded="false"] { margin-bottom: 0; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 24px 12px 16px; }
.grid-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
/* a destra la scheda tiene 28px di margine: la barra di scorrimento della griglia finisce prima del pulsante flottante (che copre 24px del bordo) */
#calendar { flex: 1 1 auto; min-width: 0; min-height: 0; background: var(--panel); border-radius: var(--r-card); padding: 10px 28px 12px 12px; box-shadow: var(--shadow); }
/* la barra di scorrimento la tiene solo la griglia delle ore, che scorre davvero: accanto ai nomi
   dei giorni e alla riga "tutto il giorno" restava un solco vuoto di 10px, e quello sparisce */
#calendar .fc-scroller { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
#calendar .fc-scrollgrid-section-header .fc-scroller,
#calendar .fc-scroller:has(> .fc-daygrid-body) { scrollbar-width: none; }
.float-next { position: absolute; right: -20px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); box-shadow: 0 4px 16px rgba(16, 24, 40, .16); cursor: pointer; font-size: 24px; line-height: 1; padding: 0 0 3px; display: grid; place-items: center; z-index: 5; }
.float-next:hover { background: var(--panel-2); }

/* ---------- intestazione: periodo con le frecce, riga di stato, "Oggi" e viste ---------- */
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); flex-wrap: wrap; }
.head-l { min-width: 0; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav button { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 21px; color: var(--ink-2); line-height: 1; display: grid; place-items: center; padding: 0 0 3px; }
.nav button:hover { background: var(--panel-2); color: var(--ink); }
/* "Oggi" sta accanto alla data perche' e' navigazione come le frecce, non un filtro. La regola qui sopra lo
   farebbe diventare un tondino di 30px con la freccia dentro: qui torna un pulsante con la sua scritta. */
.nav #cal-today { width: auto; height: auto; border-radius: 999px; font-size: 12.5px; padding: 5px 12px; margin-left: 8px; color: var(--ink-2); }
.nav #cal-today:hover { color: var(--ink); }
.head h1 { margin: 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyebrow { margin: 0 0 0 38px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* I comandi stanno a destra anche quando vanno a capo: .head va a capo su schermi stretti e
   "space-between", con una cosa sola sulla riga nuova, la lascerebbe a sinistra. */
.head-r { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.seg { display: inline-flex; background: var(--panel-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink-3); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
/* L'interruttore "Tutto / Solo le mie cose / Solo promemoria" e' un FILTRO, non una vista: acceso in
   giallo, cosi' non si confonde con Giorno/Settimana/Mese/Elenco, che restano bianchi. */
.seg.vedo button.on { background: #f5c542; color: #4a3a0a; box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
:root[data-theme="dark"] .seg.vedo button.on { background: #f0c75a; color: #2b2206; }

/* ---------- pulsanti ---------- */
.btn { border: 1px solid var(--line-2); background: var(--panel); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; line-height: 1.3; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover { border-color: var(--ink-3); background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.primary:hover { background: var(--teal-2); border-color: var(--teal-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; }
.btn.danger { color: var(--crit); border-color: #f0b8b8; background: #fff; }
.btn.danger:hover { background: var(--crit-soft); border-color: var(--crit); }
.btn.sm { padding: 3px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.block { display: block; text-align: center; text-decoration: none; margin: 6px 0 10px; }

/* ---------- mini calendario ---------- */
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc-head b { font-size: 15px; font-weight: 700; text-transform: capitalize; letter-spacing: -.01em; }
.mc-nav { display: inline-flex; gap: 2px; }
.mc-nav button { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink-3); padding: 0 0 2px; }
.mc-nav button:hover { background: var(--panel-2); color: var(--ink); }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; }
.mc-dow { text-align: center; font-size: 10px; color: var(--ink-3); font-weight: 600; padding: 2px 0 6px; }
.mc-d { border: 0; background: transparent; padding: 0; height: 30px; display: grid; place-items: center; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink); }
.mc-d i { position: relative; display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-style: normal; }
.mc-d:hover i { background: var(--panel-2); }
.mc-d.out i { color: #6f7874; font-weight: 400; }   /* 4,5:1 su bianco: sono pulsanti, non decorazione */
/* periodo mostrato nella griglia: pillola verde acqua da un estremo all'altro; weekend smorzati (la griglia non li mostra) */
.mc-d.in { background: var(--teal-soft); }
.mc-d.in-start { border-radius: 999px 0 0 999px; }
.mc-d.in-end { border-radius: 0 999px 999px 0; }
.mc-d.we i { color: var(--ink-3); }
.mc-d.in i { font-weight: 700; color: var(--teal-2); }
.mc-d.today i { background: var(--teal); color: #fff; font-weight: 700; }
.mc-d.has i::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--teal); opacity: .75; }
.mc-d.today.has i::after { background: #fff; }
.mc-d.out.has i::after { display: none; }

/* ---------- scheda "prossima riunione" ---------- */
.card.next { background: var(--teal); color: var(--teal-ink); }
.nx-lbl { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--teal-muted); }
.nx-title { margin: 0 0 8px; font-weight: 700; font-size: 17.5px; line-height: 1.2; letter-spacing: -.01em; }
.nx-title .linkish { all: unset; cursor: pointer; color: inherit; }
.nx-title .linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-when { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; }
.nx-when .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nx-day { margin: 2px 0 12px; font-size: 12.5px; color: var(--teal-muted); text-transform: capitalize; }
.nx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.avs { display: flex; align-items: center; }
.next .av { border-color: var(--teal); }
.next .av.more { background: rgba(255, 255, 255, .28); }
.nx-hint { font-size: 12px; color: var(--teal-muted); }
.nx-acts { display: flex; gap: 6px; }
.nx-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; font-size: 15px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; padding: 0; }
.nx-btn.no { background: var(--yellow); color: var(--yellow-ink); }
.nx-btn.ok { background: #0d2f2b; color: #fff; }
.nx-btn:hover { filter: brightness(1.08); }
.nx-btn.on { box-shadow: 0 0 0 3px rgba(255, 255, 255, .65); }

/* ---------- filtri a caselle (reparti) e sale ---------- */
.flist { display: flex; flex-direction: column; gap: 2px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); user-select: none; }
.frow:hover { background: var(--panel-2); }
.frow input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--teal); flex: 0 0 auto; }
.frow .nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .cnt { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.frow .cnt:empty { display: none; }
.frow:has(input:not(:checked)), .frow.off { color: var(--ink-3); }
.frow:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 0; }
.side select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel-2); }
.hint { color: var(--ink-3); font-size: 12px; }

/* il quadratino del colore: lo usa extras.js nella scheda "prossimo appuntamento"
   e nella finestra dell'appuntamento (il colore vero arriva da li', in linea) */
.sw { display: inline-block; flex: 0 0 auto; width: 16px; height: 12px; border-radius: 4px; background: #cfe9fb; }
.sw.appt { background: #e1e6e4; border: 1.5px dashed #6b7f7a; }

.checks label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.checks.inline { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.checks input[type=checkbox] { accent-color: var(--teal); }

/* ---------- FullCalendar ---------- */
.fc { font-family: var(--sans); font-size: 13px;
  --fc-border-color: var(--line-faint); --fc-page-bg-color: var(--panel); --fc-neutral-bg-color: var(--panel-2);
  --fc-today-bg-color: transparent; --fc-now-indicator-color: var(--teal);
  --fc-event-text-color: var(--ink); --fc-event-bg-color: var(--accent-soft); --fc-event-border-color: var(--accent);
  --fc-list-event-hover-bg-color: var(--accent-soft); --fc-more-link-bg-color: var(--panel-2); --fc-more-link-text-color: var(--accent); }
#calendar .fc-scrollgrid { border: 0; }
#calendar .fc-scrollgrid-section > td, #calendar .fc-scrollgrid-section > th { border: 0; }
#calendar .fc-col-header-cell, #calendar .fc-timegrid-axis { border: 0; }
#calendar .fc-timegrid-slot { height: 1.75em; }
#calendar .fc-timegrid-slot-minor { border-top: 0; }
#calendar .fc-timegrid-slot-label { vertical-align: top; border: 0; }
#calendar .fc-timegrid-slot-label-cushion { font-size: 11px; color: var(--ink-3); padding: 3px 10px 0 2px; font-variant-numeric: tabular-nums; }
#calendar .fc-timegrid-axis-frame::after { content: var(--tz); font-size: 10.5px; color: var(--ink-3); padding-right: 6px; }
#calendar .fc-timegrid-col { border-color: var(--line-faint); }
#calendar .fc-timegrid-now-indicator-line { border-color: var(--teal); border-top-width: 2px; }
#calendar .fc-timegrid-now-indicator-arrow { border-color: var(--teal); border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; }
/* intestazioni dei giorni: riquadri grigi con il nome del giorno e il numero grande; oggi in verde acqua */
#calendar .fc-col-header-cell-cushion { display: block; margin: 2px 4px 8px; padding: 9px 6px 8px; border-radius: 12px; background: var(--panel-2); text-decoration: none; color: var(--ink); text-align: center; }
#calendar .dh { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
#calendar .dh .dow { font-size: 11.5px; color: var(--ink-3); font-weight: 500; text-transform: capitalize; }
#calendar .dh .dnum { font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
#calendar .fc-day-today .fc-col-header-cell-cushion { background: var(--teal-soft); }
#calendar .fc-day-today .dh .dow, #calendar .fc-day-today .dh .dnum { color: var(--teal-2); }
#calendar .fc-daygrid-day { border-color: var(--line); }
#calendar .fc-daygrid-day-number { font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 6px 8px; text-decoration: none; }
#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: var(--teal); color: #fff; border-radius: 999px; margin: 4px; padding: 3px 8px; }
#calendar .fc-daygrid-day-top { flex-direction: row; }
/* riunioni: card pastello morbide, senza barra; il colore arriva inline da app.js */
#calendar .fc-v-event { border: 0; border-radius: 12px; box-shadow: none; }
#calendar .fc-v-event .fc-event-main { color: var(--ink); padding: 0; }
#calendar .fc-timegrid-event .fc-event-main { overflow: hidden; }
#calendar .fc-timegrid-event-harness > .fc-timegrid-event { margin: 2px 3px 0 2px; }
#calendar .fc-event.st-PENDING_APPROVAL { border: 1.5px dashed; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 4px, transparent 4px 9px); }
#calendar .fc-event.st-TO_RESCHEDULE { background: #fff !important; border: 2px solid var(--warn) !important; }
#calendar .fc-event.st-TO_RESCHEDULE .fc-event-main { color: var(--warn) !important; }
/* "Occupato": stesso pastello delle altre (colore del reparto), lucchetto e titolo un po' piu leggero */
#calendar .fc-event.masked .evt .n, #calendar .fc-event.masked .fc-list-event-title { color: var(--ink-2); font-weight: 600; }
.lk { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; margin-right: 3px; opacity: .75; }
#calendar .fc-event.st-COMPLETED, #calendar .fc-event.st-NO_SHOW { opacity: .55; }
.evt { height: 100%; padding: 7px 10px 6px; overflow: hidden; line-height: 1.25; display: flex; flex-direction: column; gap: 3px; }
.evt .n { font-weight: 700; font-size: 12.5px; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evt.due .n { -webkit-line-clamp: 1; }
.evt.due { padding: 5px 10px 4px; gap: 2px; }   /* 30 minuti = 44px: col padding standard titolo e orario perdevano 1px */
.evt .t { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; }
.evt .t svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.evt .t .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.evt .avs { margin-top: auto; padding-top: 2px; }
.evt.corta { flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; padding: 3px 8px 2px; }
.evt.corta .n { flex: 1 1 auto; min-width: 0; font-size: 11.5px; display: block; white-space: nowrap; text-overflow: ellipsis; }
.evt.corta .t { flex: 0 0 auto; font-size: 10.5px; }
.avs.sm .av { width: 20px; height: 20px; font-size: 8.5px; border-width: 1.5px; margin-left: -5px; }
.avs.sm .av:first-child { margin-left: 0; }
#calendar .fc-event.is-series .evt .n::before { content: '↻ '; opacity: .7; }
/* vista mese: pillole compatte, stesso pastello */
#calendar .fc-daygrid-event { border: 0; border-radius: 8px; padding: 3px 8px; margin: 2px 5px 0; color: var(--ink); box-shadow: none; }
#calendar .fc-h-event .fc-event-main { color: var(--ink); }
#calendar .fc-daygrid-event:hover { filter: brightness(.97); }
.evt.mese { height: auto; display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; overflow: hidden; padding: 0; line-height: 1.3; }
.evt.mese .t { flex: 0 0 auto; font-size: 10.5px; }
.evt.mese .n { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calendar .fc-daygrid-more-link { font-weight: 700; color: var(--accent); padding: 2px 6px; border-radius: 999px; }
#calendar .fc-popover { border-radius: 12px; box-shadow: var(--shadow-2); border: 0; overflow: hidden; }
#calendar .fc-popover-header { background: var(--panel-2); padding: 6px 10px; font-weight: 700; }
/* vista elenco */
#calendar .fc-list { border: 0; border-radius: 12px; overflow: hidden; }
#calendar .fc-list-day-cushion { background: var(--panel-2); font-weight: 700; }
#calendar .fc-list-event-title a { color: var(--ink); text-decoration: none; font-weight: 600; }
#calendar .fc-list-event-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#calendar .fc-bg-event.holiday { background: repeating-linear-gradient(45deg, rgba(214, 69, 69, .10) 0 6px, transparent 6px 12px); opacity: 1; }

/* ---------- modali ---------- */
.modal { position: fixed; inset: 0; background: rgba(31, 41, 51, .5); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal.open { display: flex; }
.dialog { background: var(--panel); border-radius: 18px; width: min(720px, 100%); padding: 20px 22px 22px; box-shadow: var(--shadow-2); }
.dialog.small { width: min(420px, 100%); }

.dialog.wide { width: min(1120px, 100%); }
.dhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dhead h3 { font-size: 20px; }
.x { border: 0; background: var(--panel-2); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink-2); line-height: 1; display: inline-grid; place-items: center; }
.x:hover { background: var(--panel-3); color: var(--ink); }
form label, label.fld { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; font-size: 12px; color: var(--ink-2); font-weight: 600; letter-spacing: .02em; }
form label.inline { flex-direction: row; align-items: center; margin: 0; font-weight: 500; }
form input, form select, form textarea, .dialog select, .dialog input { padding: 8px 11px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 500; }
form input:focus, form select:focus, form textarea:focus, .dialog select:focus, .dialog input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
form input[type=checkbox], .dialog input[type=checkbox] { accent-color: var(--teal); width: 15px; height: 15px; }
form textarea { resize: vertical; }
.lbl { display: block; font-size: 12px; color: var(--ink-2); margin: 8px 0 4px; font-weight: 600; letter-spacing: .02em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid2 > .hint { grid-column: 1 / -1; margin: -4px 0 8px; }   /* una nota sotto due campi affiancati sta su tutta la larghezza */
.row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; max-height: 210px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--panel-2); }
.plist .grp { grid-column: 1 / -1; font-size: 10.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.plist .grp:first-child { margin-top: 0; }
.plist .p { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.plist .p .opt { margin-left: auto; font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 3px; }
/* partecipanti del modulo riunione: chi c'e' in alto, ricerca, una persona per riga con la sua presenza sulla stessa riga */
.picker { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pk-sel { display: grid; gap: 8px; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.pk-line { display: flex; align-items: flex-start; gap: 10px; }
.pk-k { flex: 0 0 128px; padding-top: 6px; font-size: 10.5px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.pk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pk-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pk-chip.org { padding-right: 10px; }
.picker .pk-chip .av { width: 22px; height: 22px; margin: 0; border: 0; font-size: 9px; }
.pk-note { font-weight: 500; color: var(--ink-3); }
.pk-x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
.pk-x:hover { background: var(--crit-soft); color: var(--crit); }
.pk-empty { padding: 4px 2px; font-size: 12.5px; color: var(--ink-3); }
.pk-help { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.pk-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.pk-search svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.picker .pk-search input { flex: 1 1 auto; min-width: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; font-size: 13.5px; }
.picker .pk-search input:focus { box-shadow: none; }
.pk-search:focus-within { color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); }
.pk-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; scroll-padding-top: 40px; }
.pk-g + .pk-g { border-top: 1px solid var(--line-faint); }
.pk-gh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px 2px 12px; background: var(--panel); }
.pk-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.pk-gn { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.pk-gc { font-size: 11.5px; font-weight: 600; color: var(--teal-2); font-variant-numeric: tabular-nums; }
.pk-gb { margin-left: auto; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--teal); font-size: 12px; font-weight: 600; cursor: pointer; }
.pk-gb:hover { background: var(--teal-soft); color: var(--teal-2); }
/* niente a capo: invitata o no, la riga resta alta uguale a ogni larghezza (se crescesse, le righe sotto scivolerebbero sotto il dito e
   il tocco seguente prenderebbe la persona sbagliata); un nome troppo lungo per stare accanto alla presenza si accorcia coi puntini */
.pk-row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 3px 8px 3px 12px; }
.pk-row:hover { background: var(--panel-2); }
.pk-row.on { background: var(--teal-soft); }
.pk-g[hidden], .pk-row[hidden], .pk-gb[hidden], .pk-none[hidden] { display: none; }
form label.pk-who { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 9px; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.picker .pk-who .av { margin: 0; border: 0; }
.pk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row.on .pk-name { font-weight: 600; }
.pk-pres { display: none; flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); }
.pk-row.on .pk-pres { display: inline-flex; }
form label.pk-opt { position: relative; flex-direction: row; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.picker .pk-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pk-opt > span { display: block; padding: 3px 11px; border-radius: 999px; }
.pk-corto { display: none; }
.pk-opt:hover > span { color: var(--ink); }
.pk-opt input:checked + span { background: var(--teal); color: #fff; }
.pk-opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 1px; }
.pk-none { margin: 0; padding: 14px 12px; font-size: 13px; color: var(--ink-3); }
/* fuoco da tastiera: l'anello chiaro di .dialog input sparirebbe sullo sfondo della riga invitata (stesso #e3f3f1) */
.picker .pk-who input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: none; }
/* contrasto elevato di Windows: gli sfondi diventano colori di sistema, la presenza scelta deve restare riconoscibile */
@media (forced-colors: active) { .pk-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
@media (max-width: 760px) {
  .pk-line { flex-direction: column; gap: 4px; } .pk-k { flex-basis: auto; padding-top: 0; }
  /* la presenza resta sulla riga del nome: etichette corte (Obbl./Facolt.), niente iniziali nell'elenco (restano nel riepilogo) e
     margini stretti, cosi' anche a 360 px accanto alla presenza sta un nome di una ventina di lettere */
  .pk-row { gap: 8px; padding: 3px 6px 3px 10px; }
  .picker .pk-who .av { display: none; }
  .pk-lungo { display: none; } .pk-corto { display: inline; }
  .pk-opt > span { padding: 4px 8px; }
}
.result { margin-top: 10px; }
.result .ok { color: var(--ok); background: var(--ok-soft); padding: 9px 12px; border-radius: 12px; }
.result .conf { background: var(--crit-soft); padding: 9px 12px; border-radius: 12px; }
.result .conf.soft { background: var(--warn-soft); }
.result ul { margin: 4px 0 0; padding-left: 18px; }
.result .sugg { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result .skipped { margin-top: 6px; font-size: 12.5px; }
.result .skipped li { margin: 2px 0; }
.chip { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.chip:hover { background: var(--accent); color: #fff; }
.k { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); margin-right: 4px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); }
.pill.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.pill.crit { color: var(--crit); border-color: var(--crit); background: var(--crit-soft); }
.pill.acc { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; margin: 10px 0 12px; }
.kv dt { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding-top: 2px; } .kv dd { margin: 0; }
.people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px 10px; }
.people li { font-size: 13px; }
.people .rs { font-size: 11px; color: var(--ink-3); }
.dialog .card { border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin: 10px 0; box-shadow: none; }
.card .meta { color: var(--ink-2); font-size: 13px; margin: 4px 0 8px; }
.card .sla { font-size: 11.5px; color: var(--warn); font-weight: 600; }
.dialog .card h4 { font-size: 15.5px; color: var(--ink); font-weight: 700; }
.notif { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; border-radius: 10px; }
.notif .when { font-size: 11px; color: var(--ink-3); }
.notif .kind { font-weight: 700; }
.notif.nuova { background: var(--accent-soft); border-left: 3px solid var(--accent); border-bottom-color: transparent; margin: 2px 0; }
#notifications-head { margin: -4px 0 8px; align-items: center; }
table.kpi { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0 14px; }
table.kpi th, table.kpi td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.kpi th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; }
table.kpi td.num, table.kpi th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { border-radius: 14px; padding: 12px 14px; background: var(--panel-2); }
.tile b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.tile span { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.empty { color: var(--ink-3); padding: 12px 0; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--bar); color: var(--bar-ink); padding: 11px 15px; border-radius: 12px; max-width: 380px; box-shadow: var(--shadow-2); font-size: 13.5px; }
.toast.err { background: var(--crit); color: #fff; }
.toast.ok { background: var(--teal); color: #fff; }
.rsvp-ok { color: var(--ok); } .rsvp-no { color: var(--crit); } .rsvp-maybe { color: var(--warn); }
fieldset.rec { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 10px; margin: 8px 0 0; }
fieldset.rec legend { font-size: 12px; color: var(--ink-2); padding: 0 6px; font-weight: 600; }
fieldset.rec select, fieldset.rec input { padding: 5px 9px; }
fieldset.rec .days label { margin-right: 6px; }

/* ---------- tavolozza del colore nel modulo di prenotazione ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.sw-pick { position: relative; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; margin: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(31, 41, 51, .08); }
.sw-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; clip-path: inset(50%); }
.sw-pick:has(input:checked) { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); }
.sw-pick:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 5px; }

/* ---------- vista sale ---------- */
.board { overflow-x: auto; margin-top: 10px; }
.board table { border-collapse: collapse; min-width: 100%; table-layout: fixed; }
.board th { font-size: 13px; font-weight: 700; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; }
.board th small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11px; }
.board .tcol { width: 56px; }
.board td { vertical-align: top; padding: 0; border-left: 1px solid var(--line); }
.board .col { position: relative; height: 528px; background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--line) 47px 48px); cursor: crosshair; }
.board .times { position: relative; height: 528px; }
.board .times span { position: absolute; left: 6px; font-size: 11px; color: var(--ink-3); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.board .ev { position: absolute; left: 4px; right: 4px; border-radius: 10px; border: 0; padding: 5px 8px; font-size: 11.5px; line-height: 1.25; color: var(--ink); overflow: hidden; cursor: pointer; }
.board .ev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.board .ev.pending { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 4px, transparent 4px 9px); border: 1.5px dashed; }
.board .ev.masked { color: var(--ink-2); }
.board .ev .lk { width: 10px; height: 10px; }
.board .buf { position: absolute; left: 4px; right: 4px; background: repeating-linear-gradient(135deg, rgba(31, 41, 51, .16) 0 4px, transparent 4px 8px); border-radius: 0 0 6px 6px; pointer-events: none; }

/* ---------- profilo e impostazioni ---------- */
.tabs { display: flex; gap: 4px; background: var(--panel-2); border-radius: 999px; padding: 4px; margin-bottom: 14px; flex-wrap: wrap; width: max-content; max-width: 100%; }
.tabs button { border: 0; background: transparent; padding: 6px 14px; cursor: pointer; color: var(--ink-2); border-radius: 999px; font-weight: 600; font-size: 13px; }
.tabs button:hover { color: var(--ink); background: var(--panel); }
.tabs button.on { color: var(--ink); background: var(--panel); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
#admin-body, #profile-body { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th, table.grid td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; }
table.grid input, table.grid select { padding: 5px 8px; font-size: 13px; max-width: 100%; border-radius: 8px; }
table.grid input.f-name { width: 140px; } table.grid input.f-email { width: 225px; }   /* gli indirizzi veri sono piu' lunghi di quelli dimostrativi */
table.grid input[type=number] { width: 72px; } table.grid input[type=time] { width: 92px; } table.grid input[type=color] { width: 40px; padding: 0; height: 28px; border-radius: 8px; }
table.grid td.acts, table.grid td.when { white-space: nowrap; }
table.grid td.when { font-size: 11.5px; color: var(--ink-3); }
.pw-set { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.pref { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pref small { color: var(--ink-3); display: block; }
.copybox { display: flex; gap: 6px; align-items: center; }
.copybox input { flex: 1; font-size: 12px; }
.mini { font-size: 11px; color: var(--ink-3); }
.win-editor .day { display: grid; grid-template-columns: 90px 1fr; gap: 6px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--line); }
.win-editor .bands { display: flex; flex-wrap: wrap; gap: 6px; }
.win-editor .band { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; background: var(--panel-2); }
.win-editor .band button { border: 0; background: transparent; cursor: pointer; color: var(--crit); font-size: 14px; }
.sink pre { font-size: 11px; background: var(--panel-2); padding: 8px; border-radius: 10px; overflow-x: auto; max-height: 160px; }

/* ---------- accesso ---------- */
#modal-login form label { display: block; margin: 0 0 10px; }
#modal-login form input { width: 100%; }
#modal-login .hint, #modal-forgot .hint, #modal-reset .hint { margin: -4px 0 12px; }
#modal-forgot #forgot-msg, #modal-reset #reset-error { margin: 8px 0 0; color: var(--ink-2); }
#modal-new #new-edit-hint { margin: -6px 0 10px; }
#login-sso { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 1360px) { .seg button { padding: 6px 10px; font-size: 12px; } .search { width: 220px; } }
@media (max-width: 1100px) { .side, .float-next { display: none; } .main { padding-right: 16px; } .top { padding-right: 16px; } }
@media (max-width: 760px) {
  .rail { width: 56px; flex-basis: 56px; } .rb { width: 36px; height: 36px; } .me-menu { left: 44px; }
  .grid2 { grid-template-columns: 1fr; } .pref { grid-template-columns: 1fr auto; } .main { padding: 10px; } .head { padding: 8px 12px; } .top { padding: 10px 10px 0; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .card-h svg { transition: none; } }

/* ---------- marchio della sala: logo Mediaprint e "Sala riunioni" in alto ----------
   La barra in alto diventa una griglia. La ricerca resta sopra la colonna delle schede (234 px: i 250 della colonna meno il suo
   margine), il marchio sta al centro della scheda del calendario (colonne 2 e 4 della stessa larghezza) e le azioni a destra.
   Se le azioni sono larghe (avviso dei filtri) il marchio si sposta a sinistra invece di sovrapporsi; solo se manca proprio lo
   spazio il titolo si accorcia. Il logo e' alto al massimo 34 px: il file e' 300x67 e resta nitido anche ad alta densita'. */
.top { display: grid; grid-template-columns: 234px 1fr minmax(0, auto) 1fr; align-items: center; column-gap: 16px; }
.top .search { grid-column: 1; }
/* min-width: auto rimette il minimo del contenuto (la regola di base dice 0): senza, la colonna si stringerebbe sotto i pulsanti
   e l'avviso dei filtri finirebbe sopra il marchio */
.top-r { grid-column: 4; justify-self: end; min-width: auto; }
.top-r .btn { white-space: nowrap; }
.brand { grid-column: 3; display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
.brand img { display: block; flex: 0 0 auto; height: 34px; width: auto; }
.brand-t { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1360px) {
  .brand { gap: 12px; } .brand img { height: 30px; } .brand-t { padding-left: 12px; font-size: 18px; line-height: 24px; }
}
@media (max-width: 1100px) {
  .top { grid-template-columns: 1fr minmax(0, auto) 1fr; }
  .brand { grid-column: 2; } .top-r { grid-column: 3; }
}
@media (max-width: 760px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .brand { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 100%; gap: 10px; }
  .top .search { grid-row: 2; } .top-r { grid-column: 2; grid-row: 2; }
  .brand img { height: 26px; } .brand-t { padding-left: 10px; font-size: 15px; line-height: 20px; letter-spacing: .12em; }
}

/* ---------- pagina di accesso del calendario privato ("cancello") ----------
   La pagina parte con la classe "cancello" sul body: bianca, senza calendario. app.js la toglie appena c'e' qualcosa da mostrare.
   Se il calendario e' privato (SOLO_CON_ACCESSO sul server) e non c'e' una sessione la classe resta e al centro c'e' il modulo di
   accesso, lo stesso che si apre dal calendario: sopra il marchio, niente X (non c'e' un calendario a cui tornare). */
.marchio-accesso, .vista-privata { display: none; }
body.cancello { background: var(--panel); }
body.cancello .app { display: none; }
body.cancello .modal { background: var(--panel); backdrop-filter: none; }
body.cancello .modal .dialog { margin: auto; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.cancello #modal-login .x, body.cancello .vista-pubblica { display: none; }
body.cancello .vista-privata { display: block; }
body.cancello .marchio-accesso { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 22px; }
.marchio-accesso img { display: block; flex: 0 0 auto; height: 30px; width: auto; }
.marchio-accesso span { min-width: 0; padding-left: 12px; border-left: 1px solid var(--line-2); font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  body.cancello .marchio-accesso { gap: 10px; }
  .marchio-accesso img { height: 24px; } .marchio-accesso span { padding-left: 10px; font-size: 13px; line-height: 20px; letter-spacing: .12em; }
}
/* pagina bianca senza modulo aperto (si aspetta il server, all'apertura o subito dopo l'accesso): dopo mezzo secondo compare la
   scritta, cosi' una connessione lenta non sembra una pagina rotta. I browser senza :has() non la mostrano e basta. */
body.cancello:not(:has(.modal.open))::after { content: "Caricamento\2026"; position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--ink-3); font-size: 13px; letter-spacing: .08em; opacity: 0; animation: cancello-attesa .2s ease-out .6s forwards; }
@keyframes cancello-attesa { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.cancello:not(:has(.modal.open))::after { animation-duration: 0s; } }

/* ---------- agenda personale ---------- */
#calendar .fc-event.appt { border: 1.5px dashed; }                       /* appuntamento: stesso pastello, bordo tratteggiato, niente iniziali */
#calendar .fc-event.appt-free { opacity: .72; }                           /* "Libero": piu' leggero */
#calendar .fc-timegrid-divider { padding: 0; border-color: var(--line); background: var(--panel-2); }
#calendar .fc-timegrid-axis-cushion { font-size: 11px; color: var(--ink-3); }
#calendar .fc-timegrid .fc-daygrid-body .fc-daygrid-event { margin: 2px 4px; }   /* riga "tutto il giorno": pillole come nel mese */
/* sull'asse della riga "tutto il giorno" va l'etichetta, non il fuso (che sta gia' nell'angolo sopra): il riquadro e' largo 60px e con
   entrambi l'etichetta finiva fuori, tagliata dall'overflow */
#calendar .fc-timegrid-axis-frame-liquid::after { content: none; }
#calendar .fc-timegrid-axis-frame-liquid .fc-timegrid-axis-cushion { white-space: normal; text-align: right; line-height: 1.15; padding: 2px 6px 2px 2px; }
body.solo-mie .brand-t { color: var(--teal-2); }
#appt-detail-body .meta { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 8px; }
.appt-guest { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.appt-guest .rsvp-ok, .appt-guest .rsvp-no, .appt-guest .rsvp-maybe { font-weight: 700; }

/* ---------- versione nera ----------
   Si accende con l'interruttore "Nero" in alto a destra; la scelta resta nel browser (tema.js, caricato nel <head> per non mostrare
   il lampo bianco). Stessi token del tema chiaro con nero e grigi neutri. Le card delle riunioni diventano vetro colorato (regole
   "vetro" piu' sotto): il colore pieno della riunione arriva in --c e al loro interno il testo torna chiaro.
   --teal resta scuro perche' e' lo sfondo dei pulsanti con testo bianco; --teal-2 e --accent diventano chiari perche' fanno da testo.
   Il logo ha le scritte blu scuro: nella versione nera sta su una targhetta bianca, alta come il logo nel tema chiaro. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --panel: #0e0e0e; --panel-2: #161616; --panel-3: #1f1f1f;
  --ink: #ededed; --ink-2: #c2c2c2; --ink-3: #9e9e9e; --line: #262626; --line-2: #383838; --line-faint: #1a1a1a;
  --bar: #161616; --bar-2: #232323;
  --teal-2: #5ccabd; --teal-soft: #0f2e2a;
  --accent: #4cc0b3; --accent-soft: #0f2e2a;
  --yellow-soft: #2e2710;
  --ok: #56c7b9; --ok-soft: #0f2e2a; --warn: #f0b75e; --warn-soft: #2e2410; --crit: #f07a7a; --crit-soft: #331818;
  --ambra: #e0a040;   /* sul nero l'ambra scura non si legge: misurata, da 3,5 a 8,5 di contrasto */
  --shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 6px 20px rgba(0, 0, 0, .6);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .85);
}
/* interruttore "Nero": la casella vera resta (tastiera e lettori di schermo), si vedono il binario con il pomello e la scritta */
.tema-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; flex: none; }
.tema-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tema-switch .ts-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #c9cfcd; transition: background-color .15s; flex: none; }
.tema-switch .ts-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.tema-switch input:checked + .ts-track { background: #000000; box-shadow: inset 0 0 0 1px #5a5a5a; }
.tema-switch input:checked + .ts-track .ts-knob { transform: translateX(16px); }
.tema-switch input:focus-visible + .ts-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-switch:hover { border-color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .tema-switch .ts-track, .tema-switch .ts-knob { transition: none; } }
/* documenti della riunione: elenco nella scheda e visore in sola lettura (le pagine sono immagini su fondo bianco, come il foglio) */
.docs { margin: 2px 0 12px; }
.docs ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.docs li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.docs .doc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.docs .doc-open:hover b { text-decoration: underline; }
.docs .doc-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.docs .doc-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--teal-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.docs .doc-txt { min-width: 0; display: grid; }
.docs .doc-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.doc-viewer #doc-meta { margin: -4px 0 10px; }
.doc-pages { display: grid; gap: 14px; justify-items: center; max-height: calc(100vh - 190px); overflow: auto; padding: 14px; border-radius: 12px; background: var(--panel-3); }
.doc-page { width: 100%; max-width: 900px; min-height: 120px; display: grid; place-items: center; }
.doc-page img { display: block; width: 100%; height: auto; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); user-select: none; -webkit-user-drag: none; }
/* graffetta dei documenti sulle card: pastiglia bianca con la graffetta e il numero (settimana, giorno, mese, elenco, vista sale).
   Colori scritti qui e non dai token: sul pastello del chiaro deve staccare; nella versione nera la regola "vetro" la schiarisce */
.doc-segno { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; padding: 1px 6px 1px 4px; border-radius: 999px; background: #ffffff; box-shadow: 0 0 0 1px rgba(31, 41, 51, .18); color: #1f2933; font-size: 11px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.doc-segno svg, .evt .t .doc-segno svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.evt.mese .doc-segno, .evt.corta .doc-segno { margin-left: 0; padding: 0 4px 0 3px; }
.fc-list-event .doc-segno { margin-left: 6px; vertical-align: -2px; }
.board .ev .doc-segno { margin: 2px 4px 0 0; vertical-align: -2px; }
:root[data-theme="dark"] .btn.primary:hover, :root[data-theme="dark"] .rail .mark:hover { background: #0c6158; border-color: #0c6158; }
:root[data-theme="dark"] .pk-gb { color: var(--teal-2); }
:root[data-theme="dark"] .chip:hover { color: #0b1f1c; }
:root[data-theme="dark"] .btn.danger { background: transparent; border-color: #7a3434; }
:root[data-theme="dark"] .note { background: #3a3118; color: #f5d27a; }
:root[data-theme="dark"] .mc-d.out i { color: #7c7c7c; }
:root[data-theme="dark"] #calendar .fc-timegrid-divider { background: var(--panel-3); }
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .board .buf { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px 8px); }
:root[data-theme="dark"] .fc { --fc-non-business-color: rgba(0, 0, 0, .28); --fc-highlight-color: rgba(76, 192, 179, .18); }
:root[data-theme="dark"] .sw-pick { --ink-2: #4b5563; }
/* vetro: nella versione nera le card delle riunioni sono vetro colorato. Le trasparenze del colore della riunione arrivano come
   variabili sulla card (--vetro-1, --vetro-2, --vetro-bordo, --vetro-riga: vetroVars in app.js, anche nella vista sale): velo in due
   toni, bordo sottile dello stesso colore, luce sul bordo alto, sfocatura di cio' che sta dietro (le righe della griglia), testo
   chiaro. In attesa con righe e tratteggio, da rischedulare in ambra, come nel chiaro. Senza backdrop-filter resta il velo, senza sfocatura */
:root[data-theme="dark"] #calendar .fc-event, :root[data-theme="dark"] .board .ev {
  --ink: #f2f4f5; --ink-2: #d0d6da; --ink-3: #aab2b8; --panel: #151515; --warn: #f0b75e;
}
:root[data-theme="dark"] #calendar .fc-timegrid-event:not(.pi), :root[data-theme="dark"] #calendar .fc-daygrid-event:not(.pi), :root[data-theme="dark"] .board .ev {
  background: linear-gradient(145deg, var(--vetro-1, rgba(76, 192, 179, .38)), var(--vetro-2, rgba(76, 192, 179, .12))) !important;
  border: 1px solid var(--vetro-bordo, rgba(76, 192, 179, .65)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
:root[data-theme="dark"] #calendar .fc-timegrid-event:not(.pi):hover, :root[data-theme="dark"] #calendar .fc-daygrid-event:not(.pi):hover, :root[data-theme="dark"] .board .ev:hover {
  border-color: rgba(255, 255, 255, .6) !important; filter: none;
}
:root[data-theme="dark"] #calendar .fc-event.st-PENDING_APPROVAL, :root[data-theme="dark"] .board .ev.pending {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 4px, transparent 4px 9px),
              linear-gradient(145deg, var(--vetro-1, rgba(76, 192, 179, .38)), var(--vetro-2, rgba(76, 192, 179, .12))) !important;
  border: 1.5px dashed var(--vetro-bordo, rgba(76, 192, 179, .65)) !important;
}
:root[data-theme="dark"] #calendar .fc-event.st-TO_RESCHEDULE { background: rgba(240, 183, 94, .12) !important; border: 2px solid #f0b75e !important; }
:root[data-theme="dark"] #calendar .fc-list-event { background: var(--vetro-riga, rgba(76, 192, 179, .2)) !important; }
:root[data-theme="dark"] #calendar .fc-list-event:hover td { background-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .doc-segno { background: rgba(255, 255, 255, .22); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
:root[data-theme="dark"] #calendar .fc-timegrid-event.appt, :root[data-theme="dark"] #calendar .fc-daygrid-event.appt { border: 1.5px dashed var(--vetro-bordo, rgba(76, 192, 179, .65)) !important; }   /* il bordo "vetro" e' !important: l'appuntamento resta tratteggiato anche col tema nero */
:root[data-theme="dark"] .brand img { box-sizing: content-box; height: 28px; padding: 3px 8px; background: #ffffff; border-radius: 8px; }
@media (max-width: 1360px) { :root[data-theme="dark"] .brand img { height: 24px; } }
@media (max-width: 760px) { :root[data-theme="dark"] .brand img { height: 20px; padding: 3px 6px; } }
/* pagina di accesso: fondo pieno come il riquadro (la regola .modal qui sopra lo scurirebbe) e logo sulla targhetta bianca */
:root[data-theme="dark"] body.cancello .modal { background: var(--panel); }
:root[data-theme="dark"] .marchio-accesso img { box-sizing: content-box; height: 24px; padding: 3px 8px; background: #ffffff; border-radius: 8px; }
@media (max-width: 480px) { :root[data-theme="dark"] .marchio-accesso img { height: 18px; padding: 3px 6px; } }
/* notifiche sul telefono (profilo): riquadro staccato dall'elenco dei canali, con lo stato del solo dispositivo in uso.
   Tutti i colori arrivano dai token, cosi' il riquadro si legge anche nella versione nera; li' il fondo sale di un gradino
   (--panel-3) perche' --panel-2 sul nero stacca troppo poco dal riquadro del profilo */
.push { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--panel-2); }
.push h4 { margin: 0 0 4px; }
.push .hint { margin: 0 0 10px; }
.push-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.push-stato { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.push-stato b { color: var(--ink); font-weight: 700; }
.push-stato.ok::before { content: '●'; color: var(--ok); margin-right: 5px; }
.push-stato.ko { color: var(--crit); }
.push-ios { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
:root[data-theme="dark"] .push { background: var(--panel-3); }

/* ═══════════ Promemoria "post-it" ═══════════
   Un foglietto di carta appoggiato sul calendario: angolo piegato, ombra morbida, puntina rossa.
   Si distingue a colpo d'occhio da una riunione (card pastello col bordo colorato a sinistra) e da
   un appuntamento personale. Nella griglia sta dove sta il suo orario; se li' c'e' una riunione,
   FullCalendar lo affianca e il foglietto resta sopra. */
.fc .fc-event.pi { --pi-1:#fff6bb; --pi-2:#fdeb93; --pi-3:#e8d684; --pi-ink:#453d1c;
  background: linear-gradient(168deg, var(--pi-1), var(--pi-2)) !important; border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.75) !important; border-radius: 2px 2px 3px 3px !important;
  color: var(--pi-ink) !important;
  /* l'ombra si COMPONE: base + eventuale secondo foglio (condiviso) + eventuale filo rosso (scaduto),
     cosi' i due segni possono stare insieme senza che uno cancelli l'altro */
  --pi-sh-cond: 0 0 transparent; --pi-sh-rit: 0 0 transparent;
  box-shadow: 0 1px 1px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.13), var(--pi-sh-cond), var(--pi-sh-rit);
  overflow: visible; z-index: 5; }
.fc .fc-event.pi.pi-rosa    { --pi-1:#ffe1ee; --pi-2:#ffd0e4; --pi-3:#efb6cd; --pi-ink:#50273c; }
.fc .fc-event.pi.pi-verde   { --pi-1:#d8fbe2; --pi-2:#c3f2d2; --pi-3:#a4d9b6; --pi-ink:#1f4430; }
.fc .fc-event.pi.pi-azzurro { --pi-1:#dcf0ff; --pi-2:#c6e6fb; --pi-3:#a7cde6; --pi-ink:#1d3a52; }
.fc .fc-event.pi { cursor: pointer; }
.fc .fc-event.pi:hover { filter: brightness(1.03);
  box-shadow: 0 2px 3px rgba(16,24,40,.12), 0 7px 16px rgba(16,24,40,.17), var(--pi-sh-cond), var(--pi-sh-rit); }
.fc .fc-event.pi .fc-event-main { color: var(--pi-ink); padding: 0; }
.pi-in { position: relative; padding: 9px 9px 8px; font-size: 11.5px; line-height: 1.3; font-weight: 500; }
/* la puntina: uguale su tutti i promemoria, e' il segno che dice "questo e' un promemoria" */
.pi-pin { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd9d9 0 18%, var(--crit) 22% 58%, #9e2b2b 62% 100%);
  box-shadow: 0 1px 1.5px rgba(16,24,40,.22); }
.pi-ora { display: block; font-size: 10px; font-weight: 700; opacity: .62; letter-spacing: .02em; margin-bottom: 1px; }
.pi-t { overflow-wrap: normal; }
.pi-sv { float: right; font-size: 10px; opacity: .6; }
/* l'angolo piegato in basso a destra, appena accennato */
.fc .fc-event.pi::after { content: ""; position: absolute; right: 0; bottom: 0; width: 15px; height: 15px;
  border-bottom-right-radius: 3px; opacity: .75;
  background: linear-gradient(135deg, transparent 50%, var(--pi-3) 50%); }
/* versione nera: il foglietto resta CARTA (il vetro lo salta, qui sopra). Sul fondo nero
   servono solo un'ombra piu' profonda e una luce piu' tenue sul bordo alto. */
:root[data-theme="dark"] #calendar .fc-event.pi {
  border-top-color: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 7px 18px rgba(0, 0, 0, .55), var(--pi-sh-cond), var(--pi-sh-rit); }
:root[data-theme="dark"] #calendar .fc-event.pi:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .6), var(--pi-sh-cond), var(--pi-sh-rit); }
.fc .fc-event.pi.pi-fatto { opacity: .4; }
.fc .fc-event.pi.pi-fatto .pi-t { text-decoration: line-through; }

/* ---- POST-IT CONDIVISI (3/11/2026) ----
   Tre segni nuovi sul foglietto, e NESSUN colore nuovo: i quattro colori restano di chi scrive e
   vogliono dire quello che vuole lui.
     condiviso  -> il foglietto diventa DUE fogli (il secondo sbuca sotto a sinistra) + le iniziali
     si ripete  -> una freccia tonda piccola davanti all'ora (prima, in griglia, non si vedeva in nessun modo)
     quando     -> scala a tre passi: ora grigia / ambra (oggi da fare) / rossa col filo rosso (scaduto) */
.fc .fc-event.pi.pi-cond { --pi-sh-cond: -5px 5px 0 -1px var(--pi-3), -5px 5px 3px -1px rgba(16,24,40,.16); }
.pi-rip { font-size: 9.5px; font-weight: 700; opacity: .55; margin-right: 3px; letter-spacing: 0; }
.pi-ora .pi-rip { opacity: .6; }
.pi-chi { display: flex; align-items: center; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.pi-chi i { font-style: normal; font-size: 8.5px; font-weight: 700; line-height: 1; padding: 2px 4px;
  border-radius: 3px; background: rgba(0,0,0,.10); letter-spacing: .03em; }
.pi-chi .pi-ok { font-size: 9.5px; font-weight: 700; opacity: .85; margin-right: 1px; }
.fc .fc-event.pi.pi-oggi:not(.pi-scaduto) .pi-ora { color: #9a5b00; opacity: 1; }
.fc .fc-event.pi.pi-scaduto { --pi-sh-rit: inset 0 -3px 0 #d64545; }
.fc .fc-event.pi.pi-scaduto .pi-ora { color: #b32b2b; opacity: 1; }

/* IL LAMPEGGIO, spento finche' l'amministratore non lo accende (postItLampeggia).
   LA REGOLA E' UNA SOLA: lampeggia il foglietto che e' DI OGGI e NON E' ANCORA SPUNTATO.
   Si ferma in due modi e solo in questi due: lo spunti (subito), oppure passa mezzanotte (smette da
   solo e tiene il filo rosso). Quelli degli altri giorni non lampeggiano mai.
   "respiro" schiarisce la carta e la riporta indietro, non la fa sparire; "deciso" e' il lampeggio vero,
   a 1,1 s a giro = 0,9 volte al secondo, sotto le 3 volte al secondo oltre le quali diventa pericoloso.
   Chi ha chiesto "riduci le animazioni" non lo vede: per quello il segno fermo serve comunque. */
@keyframes pi-respiro { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes pi-lampo { 0%, 42% { opacity: 1; } 50%, 66% { opacity: .34; } 74%, 100% { opacity: 1; } }
body.pi-lampeggia #calendar .fc-event.pi.pi-oggi:not(.pi-fatto) { animation: pi-respiro 1.6s ease-in-out infinite; }
body.pi-lampeggia-forte #calendar .fc-event.pi.pi-oggi:not(.pi-fatto) { animation: pi-lampo 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  body.pi-lampeggia #calendar .fc-event.pi.pi-oggi:not(.pi-fatto),
  body.pi-lampeggia-forte #calendar .fc-event.pi.pi-oggi:not(.pi-fatto) { animation: none; }
}
/* "Solo promemoria": in griglia restano SOLO i foglietti (riunioni e appuntamenti li toglie
   fetchEvents, in app.js: prima restavano sbiaditi sullo sfondo). Da soli sul bianco il foglietto
   prende un'ombra un filo piu' marcata, come nel disegno. */
body.solo-prom #calendar .fc-event.pi { box-shadow: 0 2px 4px rgba(16, 24, 40, .14), 0 10px 22px rgba(16, 24, 40, .18), var(--pi-sh-cond), var(--pi-sh-rit); }
:root[data-theme="dark"] body.solo-prom #calendar .fc-event.pi { box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 12px 26px rgba(0, 0, 0, .65), var(--pi-sh-cond), var(--pi-sh-rit); }

/* il menu del foglietto: fatto, rimanda, modifica, elimina */
.prom-menu { position: fixed; z-index: 1200; width: 212px; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow-2); }
.prom-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.prom-menu button:hover { background: var(--teal-soft); color: var(--teal); }
.prom-menu button.pericolo { color: var(--crit); }
.prom-menu button.pericolo:hover { background: rgba(214,69,69,.10); color: var(--crit); }
.prom-menu button.altro { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; color: var(--ink-3); }

/* la scheda nella colonna di lato: un foglietto anche lei */
/* la scheda gialla e' un post-it grande: stessa carta, stessa puntina, stessa ombra dei foglietti */
.card.prom-card { background: linear-gradient(168deg, #fff6bb, #fdeb93); border: 0; border-top: 1px solid rgba(255,255,255,.8);
  color: #453d1c; position: relative;
  box-shadow: 0 1px 1px rgba(16,24,40,.10), 0 6px 18px rgba(16,24,40,.14); }
.card.prom-card::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 32% 28%, #ffd9d9 0 18%, var(--crit) 22% 58%, #9e2b2b 62% 100%);
  box-shadow: 0 1px 1.5px rgba(16,24,40,.22); }
.card.prom-card .nx-lbl { margin: 0 0 5px; font-size: 12px; font-weight: 600; opacity: .65; }
.card.prom-card .nx-title { margin: 0 0 9px; font-size: 16.5px; font-weight: 700; line-height: 1.22; }
.card.prom-card .nx-lbl, .card.prom-card .nx-day { color: #6b5e2a; }
.card.prom-card .nx-title, .card.prom-card .linkish { color: #453d1c; }
.card.prom-card .nx-day.tardi { color: var(--crit); font-weight: 600; }

/* le righe nel pannello */
.prom-rig { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 11px; background: var(--panel); transition: box-shadow .15s, border-color .15s; }
.prom-rig:hover { border-color: var(--line-2); box-shadow: 0 3px 10px rgba(16, 24, 40, .07); }
.prom-rig.fatta { opacity: .42; }
.prom-rig.fatta .prom-t { text-decoration: line-through; }
.prom-bordo { position: relative; width: 26px; height: 26px; flex: 0 0 26px; margin-top: 3px; border-radius: 2px;
  transform: rotate(-3.5deg); border-top: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(168deg, #fff6bb, #fdeb93); box-shadow: 0 1px 2px rgba(16,24,40,.16); }
.prom-bordo.rosa { background: linear-gradient(168deg, #ffe1ee, #ffd0e4); }
.prom-bordo.verde { background: linear-gradient(168deg, #d8fbe2, #c3f2d2); }
.prom-bordo.azzurro { background: linear-gradient(168deg, #dcf0ff, #c6e6fb); }
/* anche qui il condiviso e' DUE fogli, come in griglia */
.prom-bordo.cond { box-shadow: 0 1px 2px rgba(16,24,40,.16), -4px 4px 0 -1px #e8d684, -4px 4px 3px -1px rgba(16,24,40,.16); }
.prom-bordo.cond.rosa { box-shadow: 0 1px 2px rgba(16,24,40,.16), -4px 4px 0 -1px #efb6cd, -4px 4px 3px -1px rgba(16,24,40,.16); }
.prom-bordo.cond.verde { box-shadow: 0 1px 2px rgba(16,24,40,.16), -4px 4px 0 -1px #a4d9b6, -4px 4px 3px -1px rgba(16,24,40,.16); }
.prom-bordo.cond.azzurro { box-shadow: 0 1px 2px rgba(16,24,40,.16), -4px 4px 0 -1px #a7cde6, -4px 4px 3px -1px rgba(16,24,40,.16); }
.prom-bordo::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px;
  border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffd9d9 0 18%, var(--crit) 22% 58%, #9e2b2b 62% 100%);
  box-shadow: 0 1px 1px rgba(16,24,40,.25); }
.prom-txt { flex: 1; min-width: 0; }
.prom-t { font-weight: 600; font-size: 13px; line-height: 1.3; }
.prom-q { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.prom-q.tardi { color: var(--crit); font-weight: 600; }
.prom-q.oggi { color: var(--ambra); font-weight: 600; }
.prom-nota, .prom-rem, .prom-con, .prom-fda { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
/* "con Marco" = e' mio e l'ho dato anche a lui. "condiviso da Franco" = e' suo e io lo vedo. */
.prom-con b { color: var(--ink-2); font-weight: 600; }
.prom-fda { color: var(--teal-2); font-weight: 600; }
.prom-az { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.prom-az .mini { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2);
  display: grid; place-items: center; cursor: pointer; font-size: 13px; color: var(--ink); transition: all .15s; }
.prom-az .mini:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-2); }

/* i colori scegliibili nella finestra */
.pi-col { width: 30px; height: 30px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
  background: linear-gradient(168deg, #fff6bb, #fdeb93); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.pi-col.rosa { background: linear-gradient(168deg, #ffe1ee, #ffd0e4); }
.pi-col.verde { background: linear-gradient(168deg, #d8fbe2, #c3f2d2); }
.pi-col.azzurro { background: linear-gradient(168deg, #dcf0ff, #c6e6fb); }
.pi-col.on { border-color: var(--ink); }
.prom-anteprima { background: var(--teal-soft); color: var(--teal-ink, var(--ink)); border-radius: 10px; padding: 9px 12px;
  font-size: 12.5px; margin: 12px 0 0; }

/* ---- "Chi lo vede": la riga nuova nella finestra del promemoria ---- */
.f.condivisione { background: var(--teal-soft); border-radius: 12px; padding: 11px 12px; }
.pers { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px 5px 3px 3px; font-size: 12.5px; font-weight: 600; }
.pall-i { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px;
  font-weight: 700; color: #fff; font-style: normal; flex: 0 0 auto; }
.pers .via { border: 0; background: none; color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; }
.pers .via:hover { color: var(--crit); }
.piu { border: 1px dashed var(--teal); background: transparent; border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--teal-2); cursor: pointer; }
.elenco-pers { margin-top: 9px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel);
  overflow: hidden; max-height: 230px; overflow-y: auto; }
.elenco-pers .v { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line);
  font-size: 13px; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  color: var(--ink); cursor: pointer; }
.elenco-pers .v:last-child { border-bottom: 0; }
.elenco-pers .v:hover { background: var(--panel-2); }
.elenco-pers .v small { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 400; }
.elenco-pers .v .pall-i { width: 24px; height: 24px; font-size: 10.5px; }
.elenco-pers .v .sp { flex: 1; }
.elenco-pers .v .gia { font-size: 13px; color: var(--teal-2); font-weight: 700; }
.elenco-pers .vuoto { padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); }

/* ---- i reparti nel pannello dell'amministratore ---- */
.reparti { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.rep { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.rep i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
.rep:has(input:checked) { color: var(--ink); font-weight: 600; }
.pref .seg { background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; display: flex; gap: 4px; }
.pref .seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 11.5px;
  font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.pref .seg button.on { background: var(--teal); color: #fff; }

/* l'avvisino con "Annulla" dopo un'eliminazione */
.toast.con-azione { display: flex; gap: 12px; align-items: center; }
.toast.con-azione button { border: 0; background: transparent; color: var(--yellow); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }


/* ══════════ post-it: la grafica del mockup ══════════ */
/* righe e chip: le stesse misure del mockup, dentro le zone dei promemoria */
.prom-veloce .riga, .dialog .fila { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.dialog .fila { margin-top: 6px; }
.prom-veloce .chip, .dialog .fila .chip, .prom-card .chip {
  border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.prom-veloce .chip:hover, .dialog .fila .chip:hover { background: var(--panel-3); color: var(--ink-2); }
.prom-veloce .chip.on, .dialog .fila .chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.sp { flex: 1; }
.minuto { font-size: 11.5px; color: var(--ink-3); }
.dialog .piccolo { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.45; }

/* la scheda gialla di lato */
.card.prom-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  border-bottom-right-radius: var(--r-card); background: linear-gradient(135deg, transparent 50%, #e8d684 50%); opacity: .7; }
.prom-card .meta { font-size: 12.5px; color: #6b5e2a; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.prom-card .meta b { font-weight: 700; color: #453d1c; }
.prom-card .meta.tardi, .prom-card .meta.tardi b { color: var(--crit); font-weight: 700; }
/* i tre tasti stanno su una riga sola, come nel disegno: la colonna qui e' 12px piu' stretta
   di quella del mockup, quindi il fianco dei tasti e' un filo piu' sottile */
.prom-card .az { display: flex; gap: 6px; margin-top: 13px; }
.prom-card .az button { border: 1px solid rgba(69, 61, 28, .22); background: rgba(255, 255, 255, .6); border-radius: 999px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; color: #453d1c; cursor: pointer; transition: background .15s;
  white-space: nowrap; }
.prom-card .az button[data-altro] { padding: 5px 8px; }
.prom-card .az button:hover { background: #fff; }

/* il riquadro per scrivere al volo */
.prom-veloce { margin-top: 12px; }
/* la scheda gialla si apre compatta: il resto sta dietro "Altre impostazioni" */
.prom-veloce .apri-set { border: 0; background: none; color: #6b5e2a; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.prom-veloce .apri-set:hover { color: #453d1c; }
.prom-veloce .apri-set::after { content: "\25be"; font-size: 11px; }
.prom-veloce .apri-set[aria-expanded="true"]::after { content: "\25b4"; }
.prom-veloce input[type=text] { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  padding: 9px 11px; font: inherit; font-size: 13.5px; background: rgba(255, 255, 255, .72); color: var(--ink); }
.prom-veloce input[type=text]:focus { outline: 0; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px var(--teal-soft); }
.prom-veloce .scegli input[type=date], .prom-veloce .scegli input[type=time] {
  flex: 1 1 92px; min-width: 0; padding: 6px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255, 255, 255, .72); color: var(--ink); }
.senzaora { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); flex: 0 0 100%; margin-top: -2px; }
.prom-veloce .senzaora { color: #6b5e2a; }
/* la riga "Quando" della finestra grande: giorno, ora e la spunta, come nel disegno */
.dialog .fila input[type=date], .dialog .fila input[type=time] { flex: 0 1 auto; width: auto; }
.pall { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2); }
.pall.giallo { background: linear-gradient(168deg, #fff6bb, #fdeb93); }
.pall.rosa { background: linear-gradient(168deg, #ffe1ee, #ffd0e4); }
.pall.verde { background: linear-gradient(168deg, #d8fbe2, #c3f2d2); }
.pall.azzurro { background: linear-gradient(168deg, #dcf0ff, #c6e6fb); }
.pall.on { border-color: #453d1c; }
.et-riga { font-size: 11px; color: #6b5e2a; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin-top: 11px; }
.eco { font-size: 11.5px; color: var(--teal-2); font-weight: 600; margin-top: 8px; min-height: 1.1em; }
.prom-card .eco { color: #3d6b1e; }
.altre { border: 0; background: none; color: #6b5e2a; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 0; margin-top: 9px; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.dove { font-size: 11.5px; color: #6b5e2a; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(69, 61, 28, .25); }
.dove b { color: #453d1c; font-weight: 600; }

.head-r .sep { width: 1px; height: 22px; background: var(--line-2); }

/* il cassetto dei promemoria */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 348px; max-width: 92vw; background: var(--panel);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-2); display: flex; flex-direction: column; z-index: 30;
  transition: transform .22s ease; }
.drawer[hidden] { display: flex; transform: translateX(100%); pointer-events: none; }
.drawer .dh { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer .dh h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.drawer .dh .sott { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; max-width: 250px; }
.dtabs { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dtab { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 999px; padding: 4px 11px; font-size: 12px;
  font-weight: 600; display: flex; gap: 6px; align-items: center; color: var(--ink-2); cursor: pointer; }
.dtab .n { background: rgba(0, 0, 0, .09); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.dtab.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.dtab.on .n { background: rgba(255, 255, 255, .25); }
.dtab.scad { border-color: #e9b9b9; color: var(--crit); background: var(--crit-soft); }
.dtab.scad.on { background: var(--crit); border-color: var(--crit); color: #fff; }
.dlist { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.dlist .gruppo { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; margin: 6px 2px 1px; }
.drawer .dfoot { padding: 11px 15px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3);
  background: var(--panel-2); line-height: 1.5; display: block; }
#prom-drawer-x { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2);
  display: grid; place-items: center; font-size: 15px; cursor: pointer; color: var(--ink-2); flex: 0 0 28px; }
#prom-drawer-x:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-2); }
.prom-att { font-size: 11.5px; color: var(--teal-2); margin-top: 4px; font-weight: 500; }

/* la riunione lascia posto al foglietto che le sta attaccato, cosi' il titolo non finisce sotto */
.fc .fc-timegrid-event.con-pi .fc-event-main { padding-right: 48%; }


/* ══════════ il foglietto come nel mockup: un adesivo, non un blocco della griglia ══════════ */
/* Un promemoria con l'ora non occupa la colonna come una riunione: e' un foglietto stretto appoggiato
   a destra, alto quanto il testo (non quanto la durata) e appena storto, come se fosse stato attaccato
   a mano. Quando cade dentro una riunione si sposta sul suo angolo in alto a destra. */
.fc .fc-timegrid-event.pi {
  left: auto !important; right: 7px !important; bottom: auto !important;
  width: 45%; min-width: 96px; max-width: 150px; height: auto !important;
  transform: rotate(-1.1deg); }
.fc .fc-timegrid-event.pi .fc-event-main { position: static; }
.fc .fc-timegrid-event-harness.harness-pi { z-index: 6 !important; }
.fc .fc-timegrid-event.pi.pi-attaccato {
  right: -6px !important; margin-top: -7px; width: 47%; max-width: 146px;
  transform: rotate(1.8deg); transform-origin: top right; }
/* senza orario: nella striscia in cima, appena storto anche li' */
.fc .fc-daygrid-event.pi { transform: rotate(-.7deg); }
.fc .fc-daygrid-event.pi { padding: 0 !important; }
.fc .fc-event.pi .pi-in, .fc .fc-event.pi .pi-t { white-space: normal; }
.fc .fc-daygrid-event.pi .pi-in { font-size: 11px; padding: 6px 9px 7px; }