/* Palette e metriche allineate a GecoUI (pacchetto gecoadmin/gecoui): Fluent 2
   con i colori Generale Conserve, come gli altri applicativi interni.
   Questa app non è Laravel, quindi non può montare gecoui via vendor:publish:
   qui se ne riprendono i token, non il guscio (waffle, rail, command bar).
   Se i valori cambiano nel pacchetto, vanno riallineati a mano. */
:root {
  /* Neutri Fluent: grigi caldi, non blu-grigi */
  --bg: #FAF9F8;            /* --canvas in gecoui */
  --surface: #FFFFFF;
  --ink: #323130;
  --ink-soft: #605E5C;      /* --ink-2 */
  --ink-faint: #A19F9D;     /* --ink-3 */
  --border: #EDEBE9;        /* --line */
  --border-strong: #8A8886; /* --line-strong */
  --hover: #F3F2F1;
  --selected: #EDEBE9;

  /* Blu e oro del marchio al posto del blu Fluent */
  --brand: #164194;
  --brand-hover: #12356F;
  --brand-pressed: #0E2A5A;
  --brand-tint: #E7EDF8;
  --brand-ink: #FFFFFF;
  --accent: #E2CC5F;        /* --gold: il filo sotto la barra */

  /* Stati delle presenze: tinte proprie di questa app, ritarate sui neutri
     caldi di Fluent. I nomi restano quelli usati da app.js (cat-*). */
  --sede: #107C10;
  --sede-bg: #DFF6DD;
  --fuori: #8A5A00;
  --fuori-bg: #FFF4CE;
  --assenza: #5C2E91;
  --assenza-bg: #F0EAF7;
  /* "Altro": location non elencata, con nota libera obbligatoria */
  --altro: #005B70;
  --altro-bg: #E0F1F5;
  --verificare: #605E5C;
  --verificare-bg: #F3F2F1;

  /* Fluent usa angoli quasi vivi e ombre appena accennate */
  --radius: 2px;
  --depth4: 0 1.6px 3.6px rgba(0,0,0,.132), 0 .3px .9px rgba(0,0,0,.108);
  --depth8: 0 3.2px 7.2px rgba(0,0,0,.132), 0 .6px 1.8px rgba(0,0,0,.108);

  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* --- Login --- */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.login-logo { display: block; width: 60%; max-width: 180px; height: auto; margin: 0 auto 22px; }
.login-card h1 { font-size: 1.35rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.login-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 24px; }

/* Metriche del .btn di gecoui: 32px di altezza, angoli da 2px, peso 600.
   Gli stati usano i blu dedicati del marchio invece di sbiadire con opacity,
   che su fondo colorato dà un blu slavato e non il blu premuto. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 32px;
  background: var(--brand);
  color: var(--brand-ink);
  text-decoration: none;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-pressed); }
.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* --- App shell --- */
.topbar {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-logo { height: 30px; width: auto; }
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.85rem; position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--brand-ink); padding: 2px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.22); color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.user-avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 220px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14); z-index: 60;
}
.user-menu-header { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu-name { font-weight: 700; font-size: 0.9rem; }
.user-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 10px 12px; font-size: 0.88rem; color: var(--ink);
  text-decoration: none; border-radius: var(--radius);
}
.user-menu-item:hover { background: var(--bg); }
.btn-link { color: var(--brand-ink); opacity: 0.85; text-decoration: none; font-size: 0.85rem; }
.btn-link:hover { opacity: 1; text-decoration: underline; }
button.btn-link { background: none; border: none; padding: 0; cursor: pointer; opacity: 1; }

.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
#week-label { font-weight: 600; font-size: 0.95rem; min-width: 220px; }
.btn-icon {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius);
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.btn-icon:hover { background: var(--hover); }
.btn-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* .btn-default di gecoui: bordo netto sul neutro forte, non sul grigio chiaro */
/* Usata sia su <button> sia su <a> (Esporta Excel, Crea riunione). Un anchor
   è display:inline, dove height e padding verticale non si applicano: senza
   inline-flex resterebbe più basso e disallineato rispetto agli altri. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--hover); }
.btn-secondary:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.loading, .error-box {
  margin: 12px 20px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.loading { background: var(--verificare-bg); color: var(--verificare); }
.error-box { background: var(--fuori-bg); color: var(--fuori); }

/* --- Self widget: "un tap" auto-dichiarazione --- */
.self-widget {
  margin: 14px 20px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.self-widget-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.self-widget-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.self-widget-label { font-size: 0.85rem; color: var(--ink-soft); }
.self-widget-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Stacco più marcato fra il gruppo "Quando" e il gruppo "Dove": con gap
   uniforme i due gruppi si leggevano come una fila sola. */
.self-widget-controls {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.onboarding-hint { font-size: 0.82rem; color: var(--ink-soft); margin: 4px 0 12px; }
.self-widget-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.change-default-link {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: underline;
}
#self-add-meeting { font-size: 0.82rem; color: var(--brand); text-decoration: none; font-weight: 600; }
#self-add-meeting:hover { text-decoration: underline; }

.no-access-box {
  margin: 14px 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--verificare-bg);
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.filter-active-note {
  margin: 0 20px 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--sede-bg);
  color: var(--sede);
  font-size: 0.82rem;
}
.filter-active-note .btn-link { color: var(--sede); font-weight: 600; margin-left: 4px; }

.filter-quick-actions { display: flex; gap: 14px; }
.filter-quick-actions .btn-link { font-size: 0.82rem; color: var(--brand); }

/* --- Matrice settimanale: nomi in riga, giorni in colonna --- */
.matrix-scroll {
  padding: 8px 20px 40px;
  /* overflow visible: lo scorrimento è quello della PAGINA, così c'è UNA sola
     barra verticale e l'intestazione giorni resta sticky rispetto alla pagina
     (un contenitore con overflow:auto qui creerebbe una seconda barra e
     ancorerebbe lo sticky al box). Sotto i 760px subentra la vista mobile; sopra
     la tabella sta nella larghezza, quindi non serve lo scroll orizzontale. */
  overflow: visible;
}
/* table-layout: fixed e' il punto chiave. Con il calcolo automatico la
   larghezza di una colonna dipende dal suo contenuto: bastava una nota lunga
   in "Altro" perche' quel giorno si allargasse spingendo gli altri fuori
   dallo schermo. Qui le colonne-giorno si dividono in parti uguali lo spazio
   che resta dopo la colonna dei nomi, e il contenuto si adatta a loro. */
.matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Niente overflow:hidden qui: renderebbe la tabella il contenitore di
     scorrimento degli header sticky, che resterebbero quindi ancorati alla
     tabella (che non scorre) invece che al box .matrix-scroll. */
}
/* Con table-layout fisso la larghezza della prima colonna la detta
   l'intestazione: va dichiarata, altrimenti si spartirebbe lo spazio come
   tutte le altre. */
.matrix-corner { width: 190px; }
.matrix-corner {
  /* Angolo in alto a sinistra: sticky su ENTRAMBI gli assi, quindi sopra sia
     l'intestazione giorni sia la colonna nomi (z-index più alto di tutti). */
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  background: var(--brand-tint);
  border-bottom: 2px solid var(--brand);
  border-right: 1px solid var(--border);
  min-width: 160px;
  padding: 8px 10px;
}
.matrix-filter-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--brand);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.matrix-filter-btn:hover { background: var(--bg); }
.matrix-filter-btn.is-active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* Riga della persona loggata ("self"): fissa in cima, evidenziata da un fondo
   tenue e da un accento a sinistra sul nome. Niente bordi spessi (facevano
   sembrare la riga una "scatola" fra intestazione e primo gruppo). */
.matrix-self-row .matrix-name-cell,
.matrix-self-row .matrix-cell { background: var(--brand-tint); }
.matrix-self-row .matrix-name-cell {
  color: var(--brand);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand);
}
/* Etichetta "Tu" accanto al proprio nome. */
.matrix-self-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Riga-intestazione di sede nella griglia: separa i gruppi (Genova, Olbia, …) */
.matrix-group-cell {
  text-align: left;
  padding: 6px 14px;
  background: var(--hover);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.matrix-day-header {
  /* Sticky in alto: resta visibile scorrendo l'elenco. Fondo tinto + bordo
     inferiore marcato per staccarla nettamente dalle righe dati. */
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 12px;
  background: var(--brand-tint);
  border-bottom: 2px solid var(--brand);
  border-left: 1px solid var(--border);
  text-align: left;
  min-width: 130px;
}
.matrix-day-label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--brand);
}
.matrix-day-label .date-num { color: var(--ink-soft); font-weight: 500; font-size: 0.78rem; margin-left: 4px; }

.matrix-name-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.matrix-cell {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  cursor: pointer;
  vertical-align: middle;
}
/* Hover sull'intera riga, non solo sulla cella sotto il puntatore: aiuta a
   seguire la persona lungo tutti i giorni della settimana. Comprende la cella
   nome (sticky), così si evidenzia anche quella. */
.matrix-table tbody tr:hover > .matrix-cell,
.matrix-table tbody tr:hover > .matrix-name-cell { background: var(--hover); }
/* La riga "self" ha già un fondo azzurro: in hover usa una tinta del brand un
   filo più marcata, così resta riconoscibile come la propria riga. */
.matrix-table tbody tr.matrix-self-row:hover > .matrix-cell,
.matrix-table tbody tr.matrix-self-row:hover > .matrix-name-cell { background: var(--brand-tint); }
tbody tr:last-child .matrix-cell,
tbody tr:last-child .matrix-name-cell { border-bottom: none; }

.busy-dot {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fuori);
  white-space: nowrap;
  margin-left: 6px;
}
.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* --- Mezze giornate (mattina/pomeriggio) ---
   Quando le due metà coincidono si mostra una pillola sola, senza etichetta;
   quando divergono ("is-split") si impilano con il prefisso Mattina/Pomeriggio. */
.half-pill-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
}
.half-pill-group.is-split {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
/* Le note libere di "Altro" sono testo arbitrario: devono poter andare a capo
   dentro la cella. overflow-wrap: anywhere spezza anche una parola unica
   lunghissima - un indirizzo, un link incollato - che altrimenti sborderebbe
   comunque. Il raggio scende da 999px a 12px: su una pillola di tre righe la
   forma a lozenga ritaglia gli angoli del testo. */
.half-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.half-pill-text { overflow-wrap: anywhere; min-width: 0; }
.half-pill em {
  font-style: normal;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Vista compatta (griglia settimanale e mobile): una nota lunga di "Altro"
   allungava la cella a dismisura, in altezza (molte righe) e in larghezza
   (la colonna si espandeva per contenerla). Qui la pillola si limita a due
   righe con l'ellissi e non supera una larghezza fissa; il testo integrale
   resta nel tooltip e nel dettaglio del giorno. */
.half-pill-group.is-compact .half-pill { max-width: 190px; }
.half-pill-group.is-compact .half-pill-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Il selettore dell'ambito (tutto il giorno / mattina / pomeriggio) risponde a
   "QUANDO", i pulsanti location a "DOVE": sono due domande diverse e devono
   avere due forme diverse, altrimenti si leggono come un'unica fila di
   pulsanti uguali. Qui: interruttore a pillola su fondo tinto, con la voce
   attiva come pastiglia bianca in rilievo — la convenzione del segmented
   control. I pulsanti location restano squadrati, come azioni. */
.control-group { display: flex; align-items: center; gap: 8px; }
.control-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: none;
}
.span-selector {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--hover);
  border: 1px solid var(--border);
}
.span-selector button {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.span-selector button:hover { color: var(--ink); }
.span-selector button.is-active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--depth4);
}
.span-selector button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.override-box .control-group { margin-bottom: 10px; }

.status-sede,
.cat-sede { background: var(--sede-bg); color: var(--sede); }
.status-fuori_sede,
.cat-fuori { background: var(--fuori-bg); color: var(--fuori); }
.cat-assenza { background: var(--assenza-bg); color: var(--assenza); }
.cat-altro { background: var(--altro-bg); color: var(--altro); }
.status-da_verificare,
.status-nessun_evento,
.cat-verificare { background: var(--verificare-bg); color: var(--verificare); }

/* --- Vista giornaliera --- */
.dayview-header-controls { display: flex; align-items: center; gap: 10px; }
#dayview-day {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--ink);
}
#dayview-content { overflow: auto; max-height: 75vh; padding: 12px 20px 20px; }
.dayview-grid {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 480px;
}
.dv-cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 6px 8px;
  font-size: 0.75rem;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dv-corner, .dv-person-header {
  background: var(--bg);
  font-weight: 700;
  font-size: 0.78rem;
  position: sticky;
  top: 0;
  z-index: 1;
}
.dv-time-label {
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 600;
  position: sticky;
  left: 0;
}
.dv-free { background: var(--surface); }
.dv-occupied { background: var(--verificare-bg); color: var(--verificare); font-weight: 600; }
.override-readonly { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; padding: 4px 0; }
.dv-slot-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-slot-location { font-size: 0.68rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.busy-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.busy-busy { color: var(--fuori); border-color: var(--fuori-bg); }
.busy-tentative { color: var(--verificare); }
.busy-oof { color: var(--fuori); }
.busy-workingElsewhere { color: var(--sede); }

/* --- Day detail panel --- */
.day-detail {
  position: fixed;
  inset: 0;
  background: rgba(28,30,33,0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  z-index: 50;
}
.day-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.day-detail-header h2 { font-size: 1rem; margin: 0; }
#day-detail-content,
#freeslot-content,
#filter-content,
#users-content,
#quickstart-content {
  background: var(--surface);
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}
/* Questi due hanno contenuto proprio (form + elenco / schede) senza sezioni
   già spaziate: serve il padding qui. */
#users-content,
#quickstart-content { padding: 16px 20px; }
.day-detail > div { background: var(--surface); width: 100%; }

.event-item { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.event-item:last-child { border-bottom: none; }
.event-subject { font-weight: 600; font-size: 0.9rem; }
.event-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.event-empty { padding: 20px; color: var(--ink-soft); font-size: 0.88rem; text-align: center; }

.override-box {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.override-label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 10px; }
.override-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.override-actions .btn-link { font-size: 0.8rem; color: var(--fuori); }

.add-meeting-box {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.add-meeting-box .btn-link { font-size: 0.82rem; color: var(--brand); text-decoration: none; font-weight: 600; }
.add-meeting-box .btn-link:hover { text-decoration: underline; }

/* --- Trova slot libero --- */
.freeslot-controls {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.freeslot-field { display: flex; flex-direction: column; gap: 6px; }
.freeslot-label { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; }
#freeslot-day, #freeslot-duration {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--ink);
}
.freeslot-people { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.freeslot-person { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
#freeslot-search { align-self: flex-start; }

.freeslot-results { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.freeslot-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--sede-bg);
}
.freeslot-range { font-weight: 700; font-size: 0.9rem; color: var(--sede); }

@media (min-width: 600px) {
  .day-detail { align-items: center; justify-content: center; }
  .day-detail > div { max-width: 560px; max-height: 85vh; }
  .day-detail-header { border-radius: var(--radius) var(--radius) 0 0; }
  #day-detail-content,
  #freeslot-content,
  #filter-content,
  #users-content,
  #quickstart-content,
  #dayview-content { border-radius: 0 0 var(--radius) var(--radius); }
  /* La vista giornaliera ha più colonne (una per utente): le serve più spazio */
  #dayview-modal > div { max-width: 90vw; }
  /* L'elenco utenti e la guida (schede affiancabili) stanno più comodi larghi */
  #users-modal > div { max-width: 680px; }
  #quickstart-modal > div { max-width: 760px; }
  /* Il contenuto può usare quasi tutta l'altezza del box; il footer sticky
     della guida resta comunque visibile in fondo. */
  #users-content,
  #quickstart-content { max-height: calc(85vh - 58px); }
}


/* Avviso sui partecipanti senza stato dichiarato: lo slot proposto vale solo
   per chi risulta effettivamente in sede, e va detto invece che tacerlo. */
.freeslot-warning {
  background: var(--fuori-bg);
  color: var(--fuori);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 12px;
}

/* --- Selettore partecipanti di Trova Slot ---
   Con molte persone la lista piatta non basta: ricerca, raggruppamento per
   sede e conteggio di quanti sono selezionati. L'elenco ha altezza massima e
   scorre, così i controlli e il pulsante Cerca restano sempre raggiungibili. */
.freeslot-count {
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}
.freeslot-people-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.freeslot-people-tools input[type="search"] {
  flex: 1 1 180px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.freeslot-people-tools input[type="search"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: inset 0 -1px 0 0 var(--brand);
}
.freeslot-people { max-height: 260px; overflow-y: auto; }
.freeslot-group + .freeslot-group { margin-top: 10px; }
.freeslot-group-title {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Risultati raggruppati per giorno e per sede: con la ricerca settimanale
   un elenco piatto di orari non direbbe di che giorno né di che sede sono. */
.freeslot-day-block + .freeslot-day-block { margin-top: 18px; }
.freeslot-day-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.freeslot-sede { margin-bottom: 10px; }
.freeslot-sede > .status-pill { margin-bottom: 6px; }
.freeslot-more {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 4px 0 0;
}

.freeslot-range-box {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}
.freeslot-range-box label { display: inline-flex; align-items: center; gap: 6px; }
.freeslot-range-box input[type="date"] {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

/* --- Vista mobile: un giorno alla volta, persone in elenco ---
   Sotto i 760px la matrice sparisce. Non e' una questione di gusto: ha le
   persone su un asse, quindi la sua larghezza cresce col numero di dirigenti
   e a sessanta righe nessuno schermo stretto la regge. Qui invece nulla
   cresce in larghezza, si scorre in verticale. */
.mobile-day { display: none; }

@media (max-width: 760px) {
  .matrix-scroll { display: none; }
  .mobile-day { display: block; }
}

.mday-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mday-label { font-weight: 600; font-size: 15px; }
.mday-nav .btn-icon:disabled { opacity: .4; cursor: default; }

.mday-group + .mday-group { margin-top: 16px; }
.mday-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mday-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.mday-count {
  margin-left: auto;
  color: var(--ink-faint);
}

/* Riga persona: e' un button, quindi raggiungibile da tastiera e con un'area
   di tocco piena invece di un testo cliccabile. */
.mday-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px; /* bersaglio di tocco */
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.mday-person + .mday-person { margin-top: 4px; }
.mday-person:hover { background: var(--hover); }
.mday-person:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mday-person.is-self { border-left: 3px solid var(--brand); }
.mday-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mday-person .half-pill-group { flex: none; }

/* Indicatore "ha appuntamenti". Deliberatamente neutro, in grigio: dice che
   la persona ha impegni in agenda, non dove si trova. La sede resta quella
   che ha dichiarato lei, ed e' la pillola colorata accanto. */
.appt-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.mday-person .appt-badge { margin-left: 0; flex: none; }
.appt-badge .appt-ico { flex: none; }
.appt-badge .appt-count { line-height: 1; }

/* --- Gestione utenti (pagina admin) --- */
.user-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.user-add-row { display: flex; flex-direction: column; gap: 4px; }
.user-add-row input,
.user-add-row select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
}
.user-add-form .btn-primary { align-self: flex-start; }

.users-count {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.users-list { display: block; }
.users-group { margin-bottom: 14px; }
.users-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.users-group-title .users-count { margin: 0; }
.users-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
}
.users-row:last-child { border-bottom: none; }
.users-row-move { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.users-move-btn {
  width: 24px;
  height: 18px;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.users-move-btn:disabled { opacity: 0.35; cursor: default; }
.users-row-mail { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.users-row-sede {
  flex: none;
  padding: 4px 6px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.users-row-remove { color: var(--fuori); flex: none; }

/* --- Guida rapida (visuale, a schede) --- */
.qs-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--brand-tint);
}
.qs-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
}
.qs-hero-title { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.qs-hero-sub { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.qs-cards { display: flex; flex-direction: column; gap: 12px; }
.qs-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.qs-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
}
.qs-card-body { min-width: 0; }
.qs-card-body h3 {
  margin: 1px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.qs-card-body p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.qs-card-body p:last-child { margin-bottom: 0; }
.qs-card-body em { font-style: normal; font-weight: 600; color: var(--ink); }
.qs-tag {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--fuori-bg);
  color: var(--fuori);
}

/* Mini-anteprime che riprendono i componenti veri */
.qs-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-demo-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.qs-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  padding: 2px;
  gap: 2px;
}
.qs-seg span {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.qs-seg .is-active { background: var(--surface); color: var(--brand); box-shadow: var(--depth4); }
.qs-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.qs-minigrid { gap: 5px; }
.qs-sq { width: 22px; height: 16px; border-radius: 4px; }
.qs-userrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.qs-user-mail { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.qs-user-remove { font-size: 0.78rem; font-weight: 600; color: var(--fuori); }

.quickstart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* Sticky in fondo al modale: "Ho capito" e la casella restano sempre
     visibili anche con molte schede, senza doverle scorrere tutte. Il margine
     negativo e il padding riportano il fondo bianco fino ai bordi del box, che
     ha padding 16px 20px. */
  position: sticky;
  bottom: 0;
  margin: 18px -20px 0;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.quickstart-dontshow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.quickstart-dontshow input { cursor: pointer; }