/* Disponibilità Ops — stile.
 * Carattere aziendale Montserrat e una sola scala di grandezze, uguale su computer e telefono:
 * 28 titoli di pagina · 20 settimana, finestre, orari e numeri · 16 titoli delle schede, giorni ed eventi ·
 * 14 testo, campi e tasti · 12 testo secondario. Orari e date in grassetto con cifre allineate.
 * L'anello del logo (da ciano a blu) compare solo come linea di segnale: testata, scheda attiva, oggi. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('font/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --sfondo: #edf0f5;
  --pannello: #ffffff;
  /* inchiostro blu notte, dal blu del logo */
  --inchiostro: #0f1830;
  --inchiostro-2: #4f5a70;
  --inchiostro-3: #808ba0;
  --linea: #dde2eb;
  --linea-forte: #c6cdda;
  /* colori ripresi dal logo TGI Sport (anello da ciano a blu) */
  --accento: #0b2ff0;
  --accento-scuro: #0822c4;
  --accento-tenue: #e8edff;
  --segnale: #00b8d9;
  --marchio-gradiente: linear-gradient(90deg, #00e8fe, #0018fe);
  --ok: #188a4a;
  --ok-tenue: #e7f6ee;
  --attenzione: #a86500;
  --attenzione-tenue: #fff4e0;
  --errore: #c62f28;
  --errore-tenue: #fdecea;
  --vuoto: #eff2f6;
  --raggio: 10px;
  --ombra: 0 1px 2px rgba(15, 24, 48, .05);
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-20: 20px;
  --t-28: 28px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-14);
  color: var(--inchiostro);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--sfondo); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* orari, date e numeri: grassetto con cifre della stessa larghezza */
.titolo-pagina h1, .navigatore .settimana, .ev-ora b, .ev-giorno-testa b, .conv-data b, .giorno-data b, .kpi b,
.cal-barra h2, .accesso-scheda h1, dialog h2, .richiesta-admin .conteggio, .codice-grande, .giorno-testa b, .cal-num {
  font-variant-numeric: tabular-nums;
}
.titolo-pagina h1, .accesso-scheda h1, dialog h2, .cal-barra h2, .navigatore .settimana, .kpi b, .ev-ora b { letter-spacing: -.01em; }

/* tastiera: anello visibile su tutto ciò che si può premere */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  height: 60px; padding: 0 20px;
  background: var(--pannello); border-bottom: 1px solid var(--linea);
}
/* linea del marchio sopra la testata */
.testata::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--marchio-gradiente); }
.marchio { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marchio-logo { display: block; height: 36px; width: auto; }
.marchio-nome {
  padding-left: 14px; border-left: 1px solid var(--linea-forte);
  font-weight: 600; font-size: var(--t-14); line-height: 22px; white-space: nowrap;
}
/* chi sta usando la dashboard: accanto al nome su computer, sotto e in piccolo sul telefono */
.marchio-ruolo::before { content: "\00a0·\00a0"; }
.schede { display: flex; gap: 4px; height: 100%; }
.schede button {
  border: 0; background: none; padding: 0 12px; cursor: pointer;
  color: var(--inchiostro-2); font-weight: 500; position: relative; display: flex; align-items: center; gap: 7px;
}
.schede button[aria-selected="true"] { color: var(--inchiostro); font-weight: 600; }
.schede button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--marchio-gradiente); border-radius: 3px 3px 0 0;
}
.schede button:hover { color: var(--inchiostro); }
.testata .spazio { flex: 1; }
.utente { color: var(--inchiostro-2); font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utente b { color: var(--inchiostro); font-weight: 600; }
.esci {
  height: 32px; padding: 0 14px; border: 1px solid var(--linea-forte); border-radius: 8px; background: var(--pannello); flex: none;
  color: var(--inchiostro-2); font-weight: 500; font-size: var(--t-14); cursor: pointer;
}
.esci:hover { color: var(--inchiostro); border-color: var(--inchiostro-3); }
.badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--errore); color: #fff; font-size: var(--t-12); font-weight: 700; font-variant-numeric: tabular-nums;
}
.badge:empty { display: none; }

.demo-banner {
  padding: 8px 20px; background: var(--attenzione-tenue); color: var(--attenzione); font-size: var(--t-12); line-height: 1.45;
  border-bottom: 1px solid #f3dfb8;
}

/* ---------- accesso ---------- */
.accesso {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: var(--sfondo); isolation: isolate;
}
/* l'anello del logo, grande e leggero, dietro la scheda d'accesso */
.accesso::before {
  content: ""; position: fixed; z-index: -1; width: 760px; height: 760px; right: -240px; top: -280px; border-radius: 50%;
  /* aperto come l'anello del logo */
  background: conic-gradient(from 150deg, transparent 0 9%, #00e8fe 9%, #0018fe 100%); opacity: .14;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 30px), #000 calc(100% - 29px));
  mask: radial-gradient(closest-side, transparent calc(100% - 30px), #000 calc(100% - 29px));
}
.accesso-scheda {
  width: 100%; max-width: 380px; padding: 32px 30px 28px; border-radius: 16px; background: var(--pannello);
  border: 1px solid var(--linea); box-shadow: 0 24px 60px -24px rgba(15, 24, 48, .28); position: relative; overflow: hidden;
}
.accesso-scheda::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--marchio-gradiente); }
.accesso-logo { display: block; height: 52px; width: auto; margin: 0 0 22px; }
.accesso-scheda h1 { margin: 0 0 6px; font-size: var(--t-28); font-weight: 700; line-height: 1.1; }
.accesso-scheda > p { margin: 0 0 20px; color: var(--inchiostro-2); line-height: 1.5; }
.accesso-scheda .spunta { margin: 2px 0 16px; }
.accesso-scheda .errore { margin: 0 0 14px; }
.accesso-scheda .nota { margin-top: 16px; }
.accesso-scheda .informazione { margin: 0 0 14px; padding: 9px 11px; border-radius: 8px; background: var(--accento-tenue); color: var(--accento-scuro); font-size: var(--t-12); line-height: 1.45; }
.accesso-link { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#accesso-codice { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; font-size: var(--t-16); }

/* ---------- campi e bottoni ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.campo > span { font-size: var(--t-12); color: var(--inchiostro-2); font-weight: 550; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], select, textarea {
  height: 36px; padding: 0 10px; border: 1px solid var(--linea-forte); border-radius: 8px; background: #fff; width: 100%;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
/* menu a tendina con una sola freccia (quella di sistema su Mac si sovrappone al testo) */
select {
  -webkit-appearance: none; appearance: none; padding-right: 28px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235a606d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
select::-ms-expand { display: none; }
input:disabled { background: var(--vuoto); color: var(--inchiostro-3); }
/* campi spenti tutti uguali, menu compresi (iPhone non li grigia e schiarisce il testo per conto suo) */
select:disabled, textarea:disabled { background-color: var(--vuoto); color: var(--inchiostro-3); }
input:disabled, select:disabled, textarea:disabled { -webkit-text-fill-color: var(--inchiostro-3); opacity: 1; }
/* data e ora su iPhone: niente larghezza minima di sistema, testo a sinistra come negli altri campi */
.due-campi > *, .tre-campi > * { min-width: 0; }
input[type="date"], input[type="time"] { min-width: 0; display: block; }
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; line-height: 34px; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}

.spunta { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-14); margin: 6px 0 0; }
.spunta input { width: 16px; height: 16px; accent-color: var(--accento); margin: 0; flex: none; }

.errore { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: var(--errore-tenue); color: var(--errore); font-size: var(--t-12); line-height: 1.45; }
.nota { font-size: var(--t-12); color: var(--inchiostro-2); line-height: 1.5; margin: 6px 0 0; }
.nota code, code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-12); background: var(--vuoto); padding: 1px 5px; border-radius: 4px; }

button.primario {
  height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--accento); color: #fff; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .05s; box-shadow: 0 1px 0 rgba(15, 24, 48, .12);
}
form button.primario, .pieno { width: 100%; }
button.primario:hover { background: var(--accento-scuro); }
button.primario:active { transform: translateY(1px); }
button.primario:disabled { background: #b4c0ef; box-shadow: none; cursor: not-allowed; }
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--linea-forte); border-radius: 8px; background: var(--pannello); cursor: pointer; font-weight: 550; font-size: var(--t-14); white-space: nowrap;
  text-decoration: none; color: var(--inchiostro); transition: background .15s, border-color .15s;
}
.bottone:hover { border-color: var(--inchiostro-3); background: #f7f9fc; }
.bottone:disabled { opacity: .45; cursor: not-allowed; }
.bottone.pericolo { color: var(--errore); }
.bottone.pericolo:hover { border-color: var(--errore); }
.bottone svg, .icona svg { width: 16px; height: 16px; }
.icona {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linea-forte); border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--inchiostro-2); flex: none;
}
.icona:hover { color: var(--inchiostro); border-color: var(--inchiostro-3); }
.icona:disabled { opacity: .4; cursor: not-allowed; }
.link { border: 0; background: none; color: var(--accento); padding: 0; cursor: pointer; font-size: var(--t-12); font-weight: 500; }
.link:hover { text-decoration: underline; }

.tenue { color: var(--inchiostro-3); }
@media (min-width: 761px) { .solo-mobile { display: none !important; } }
.icona.gira svg { animation: gira .9s linear infinite; }

/* ---------- stati di disponibilità ---------- */
.st-D { --st: var(--ok); --st-tenue: var(--ok-tenue); }
.st-P { --st: var(--attenzione); --st-tenue: var(--attenzione-tenue); }
.st-A { --st: var(--errore); --st-tenue: var(--errore-tenue); }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--linea-forte)); flex: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-12); color: var(--inchiostro-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pallino-nota { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro-2); }

/* ---------- impaginazione ---------- */
.contenuto { max-width: 1480px; margin: 0 auto; padding: 22px 20px 120px; }
.contenuto.stretto { max-width: 780px; }
.titolo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.titolo-pagina h1 { margin: 0; font-size: var(--t-28); font-weight: 700; line-height: 1.05; }
.titolo-pagina p { margin: 4px 0 0; color: var(--inchiostro-2); }
.scheda { background: var(--pannello); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra); }
.scheda-testa { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.scheda-testa h2 { margin: 0; font-size: var(--t-16); font-weight: 650; color: var(--inchiostro); }
.scheda-testa .spazio { flex: 1; }
.scheda-corpo { padding: 18px; }

.navigatore { display: flex; align-items: center; gap: 8px; }
.navigatore .settimana { min-width: 190px; text-align: center; font-weight: 700; font-size: var(--t-20); line-height: 1.1; }
.navigatore .settimana small { display: block; font-weight: 500; font-size: var(--t-12); color: var(--inchiostro-3); }

/* ---------- pagina operatore ---------- */
.azioni-box { padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.azioni-rapide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aggiornamento { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--inchiostro-3); }
.aggiornamento span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-forte); border-top-color: var(--accento); animation: gira .8s linear infinite; }

.richiesta {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 12px;
  background: var(--accento-tenue); border: 1px solid #cdd8ff; color: var(--inchiostro); line-height: 1.45;
}
.richiesta > svg { width: 22px; height: 22px; flex: none; color: var(--accento); }
.richiesta-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.richiesta-testo q, .richiesta-admin q { display: block; quotes: none; color: var(--inchiostro-2); font-style: italic; }
.richiesta-testo small { font-size: var(--t-12); color: var(--accento); }
.richiesta .bottone { flex: none; }
.richiesta.fatta { background: var(--ok-tenue); border-color: #c4e7d3; }
.richiesta.fatta > svg, .richiesta.fatta small { color: var(--ok); }
.azioni-rapide > span { font-size: var(--t-12); color: var(--inchiostro-3); margin-right: 2px; }
.giorni { list-style: none; margin: 0; padding: 0; }
.giorno { display: grid; grid-template-columns: 112px 1fr; gap: 10px 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.giorno:last-child { border-bottom: 0; }
.giorno-data { display: flex; flex-direction: column; line-height: 1.2; }
.giorno-data b { font-size: var(--t-16); font-weight: 700; }
.giorno-data small { color: var(--inchiostro-3); font-size: var(--t-12); }
.giorno-data .oggi, .giorno-data .richiesto { align-self: flex-start; margin-top: 4px; padding: 1px 7px; border-radius: 10px; background: var(--accento-tenue); color: var(--accento); font-size: var(--t-12); font-weight: 600; white-space: nowrap; }
/* oggi: il segnale ciano del logo */
.giorno-data .oggi { display: inline-flex; align-items: center; gap: 5px; background: #e2f8fc; color: #00708a; }
.giorno-data .oggi::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--segnale); }
.giorno-data .richiesto { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.giorno.da-fare { box-shadow: inset 3px 0 0 var(--accento); }
.aggiungi-nota { align-self: flex-start; font-size: var(--t-12); color: var(--inchiostro-3); }
.giorno-data .bloccato-tag { align-self: flex-start; margin-top: 4px; padding: 1px 7px; border-radius: 10px; background: var(--vuoto); color: var(--inchiostro-2); font-size: var(--t-12); font-weight: 600; line-height: 1.5; }
.conv-spiegazione { color: var(--attenzione); font-size: var(--t-12); margin-top: 2px; }
.conv-senza-numero { font-size: var(--t-12); color: var(--inchiostro-3); }
.conv-azioni a.telefona { text-decoration: none; }
.conv-numero { font-size: var(--t-12); font-weight: 600; color: var(--inchiostro-2); white-space: nowrap; user-select: all; }
.giorno-data .onsite-tag { align-self: flex-start; margin-top: 4px; padding: 1px 7px; border-radius: 10px; background: #efe7ff; color: #5b34c9; font-size: var(--t-12); font-weight: 600; }
.onsite-giorni { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--t-14); color: var(--inchiostro-2); }
.onsite-giorni b { color: var(--inchiostro); font-weight: 600; }
.convocazione.onsite .conv-data { background: #efe7ff; color: #5b34c9; }
.onsite-nota { font-size: var(--t-12); color: var(--inchiostro-2); }
.convocazione.richiesta-evento .conv-data { background: var(--accento-tenue); color: var(--accento); }
.convocazione.richiesta-evento.coperta { opacity: .7; }
.aggiungi-nota:hover { color: var(--accento); }
.giorno-scelte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* sotto i tre stati: la nota (o «+ Aggiungi una nota») e «Cancella» per svuotare il giorno */
.giorno-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.giorno-extra .nota-giorno { flex: 1 1 100%; }
.cancella-giorno { margin-left: auto; font-size: var(--t-12); color: var(--inchiostro-3); }
.cancella-giorno:hover { color: var(--errore); }
.giorno.modificato { background: #f5f7ff; box-shadow: inset 3px 0 0 var(--accento); }
.giorno.passato { opacity: .55; }
.giorno.passato .giorno-scelte { pointer-events: none; }

.stati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stati button {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 8px; min-width: 0;
  border: 1px solid var(--linea-forte); border-radius: 8px; background: var(--pannello); cursor: pointer; font-weight: 550; font-size: var(--t-14);
  color: var(--inchiostro-2); transition: border-color .15s, background .15s, color .15s;
}
.stati button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stati button:hover { border-color: var(--st); color: var(--inchiostro); }
/* la scelta fatta è piena: si legge anche al sole, sul telefono */
.stati button[aria-checked="true"] { border-color: var(--st); background: var(--st); color: #fff; font-weight: 650; }
.stati button[aria-checked="true"] .pallino { background: #fff; }
.stati button:disabled { cursor: not-allowed; }
.giorno .nota-giorno { height: 32px; font-size: var(--t-14); }

.barra-invio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -16px rgba(15, 24, 48, .25); padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
}
.barra-invio-dentro { max-width: 740px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.barra-invio .stato-invio { flex: 1; min-width: 0; font-size: var(--t-14); color: var(--inchiostro-2); line-height: 1.4; }
.barra-invio .stato-invio b { color: var(--inchiostro); }
.barra-invio button.primario { flex: none; min-width: 200px; }

.conferma { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; border-radius: 12px; background: var(--ok-tenue); color: var(--ok); line-height: 1.45; }
.conferma svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.conferma b { display: block; color: #0f6a37; }

/* ---------- dashboard: griglia ---------- */
.strumenti { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.strumenti select, .strumenti input[type="search"] { width: auto; min-width: 160px; height: 34px; }
.strumenti input[type="month"] { width: auto; height: 34px; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.dashboard.con-pannello { grid-template-columns: minmax(0, 1fr) 340px; }
.griglia-box { overflow-x: auto; border-radius: 0 0 12px 12px; }
table.griglia { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
.griglia th, .griglia td { border-bottom: 1px solid var(--linea); padding: 0; text-align: center; }
.griglia thead th { position: sticky; top: 0; background: #fafbfc; font-weight: 600; font-size: var(--t-12); color: var(--inchiostro-2); z-index: 1; }
.griglia th.colonna-op, .griglia td.colonna-op { position: sticky; left: 0; background: #fff; text-align: left; z-index: 2; border-right: 1px solid var(--linea); width: 230px; min-width: 200px; }
.griglia thead th.colonna-op { background: #fafbfc; z-index: 3; padding: 10px 14px; }
.griglia tbody tr:last-child td { border-bottom: 0; }
.giorno-testa {
  width: 100%; border: 0; background: none; cursor: pointer; padding: 9px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: inherit; font-weight: inherit; border-bottom: 2px solid transparent;
}
.giorno-testa:hover { background: var(--accento-tenue); }
.giorno-testa b { color: var(--inchiostro); font-size: var(--t-14); font-weight: 650; }
.giorno-testa.oggi b { color: var(--accento); }
.giorno-testa .conti { display: flex; gap: 6px; font-size: var(--t-12); font-variant-numeric: tabular-nums; font-weight: 600; }
.conti .st-D { color: var(--ok); } .conti .st-P { color: var(--attenzione); } .conti .st-A { color: var(--errore); }
.giorno-testa[aria-pressed="true"] { background: var(--accento-tenue); border-bottom-color: var(--accento); }
.griglia td.selezionato { background: rgba(23, 64, 240, .04); }

.op-cella { display: flex; flex-direction: column; padding: 9px 14px; line-height: 1.3; min-width: 0; }
.op-cella b { font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cella small { color: var(--inchiostro-3); font-size: var(--t-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nuovo { width: 7px; height: 7px; border-radius: 50%; background: var(--accento); flex: none; }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; position: relative;
  min-width: 70px; height: 28px; margin: 6px 4px; padding: 0 9px; border-radius: 7px; font-size: var(--t-12); font-weight: 600;
  background: var(--st-tenue, var(--vuoto)); color: var(--st, var(--inchiostro-3));
}
.chip.vuoto { font-weight: 500; }
.chip .con-nota { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.griglia-vuota { padding: 40px 20px; text-align: center; color: var(--inchiostro-2); line-height: 1.6; }
.chip .corto { display: none; }
.griglia td.cella { cursor: default; outline: none; }
.griglia td.cella:hover .chip, .griglia td.cella:focus-visible .chip { box-shadow: 0 0 0 2px var(--st, var(--linea-forte)); }
.griglia td.passato .chip, .giorno-testa.passato { opacity: .55; }
.scheda-piede { padding: 11px 18px; border-top: 1px solid var(--linea); }
.griglia-box + .scheda-piede { border-radius: 0 0 12px 12px; }

.popup {
  position: fixed; z-index: 40; width: 250px; padding: 12px 14px; border-radius: 12px; background: var(--pannello); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 20, 30, .08), 0 12px 32px rgba(16, 20, 30, .18); font-size: var(--t-14); line-height: 1.45; animation: entra .12s ease;
}
.popup-testa { display: flex; flex-direction: column; margin-bottom: 8px; }
.popup-testa span { color: var(--inchiostro-3); font-size: var(--t-12); }
.popup-stato { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--st, var(--inchiostro-2)); }
.popup-nota { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--vuoto); white-space: pre-wrap; word-break: break-word; }
.popup-vuota { margin: 6px 0 0; color: var(--inchiostro-3); font-size: var(--t-12); }
.popup small { display: block; margin-top: 6px; color: var(--inchiostro-3); font-size: var(--t-12); }

/* ---------- pannello convocazione ---------- */
.pannello-conv { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.pannello-conv .scheda-corpo { overflow-y: auto; padding: 14px 18px 18px; }
.pannello-conv h3 { margin: 16px 0 8px; font-size: var(--t-14); font-weight: 650; color: var(--inchiostro); display: flex; align-items: center; gap: 7px; }
.pannello-conv h3:first-child { margin-top: 0; }
.elenco-conv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.elenco-conv label { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border: 1px solid var(--linea); border-radius: 8px; cursor: pointer; }
.elenco-conv label:hover { border-color: var(--linea-forte); }
.elenco-conv input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accento); flex: none; }
.elenco-conv .chi { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.elenco-conv .chi small { color: var(--inchiostro-3); font-size: var(--t-12); }
.elenco-conv .chi em { font-style: normal; color: var(--attenzione); font-size: var(--t-12); }
.elenco-semplice { margin: 0; padding: 0; list-style: none; font-size: var(--t-14); color: var(--inchiostro-2); line-height: 1.7; }
.azioni-conv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--linea); }
.azioni-conv .primario { grid-column: 1 / -1; }

/* ---------- richieste (supervisori) ---------- */
.richieste-sintesi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sintesi-richiesta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  background: var(--accento-tenue); border: 1px solid #cdd8ff; font-size: var(--t-14);
}
.sintesi-richiesta .pallino { background: var(--accento); }
.sintesi-richiesta .pallino.st-D { background: var(--ok); }
.sintesi-richiesta > span:nth-child(2) { flex: 1; min-width: 200px; }
.barra-avanzamento { height: 6px; border-radius: 3px; background: rgba(23, 64, 240, .14); overflow: hidden; width: 120px; }
.barra-avanzamento span { display: block; height: 100%; background: var(--marchio-gradiente); border-radius: 3px; }
.richieste-lista { list-style: none; margin: 0; padding: 0; }
.richiesta-admin { padding: 16px 18px; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.richiesta-admin:last-child { border-bottom: 0; }
.richiesta-admin.scaduta { opacity: .6; }
.richiesta-admin-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.richiesta-admin-testa small { display: block; color: var(--inchiostro-3); font-size: var(--t-12); margin-top: 2px; }
.richiesta-admin .conteggio { font-weight: 700; font-size: var(--t-16); font-variant-numeric: tabular-nums; }
.richiesta-admin .barra-avanzamento { width: 100%; }
.richiesta-admin .nota { margin: 0; }
.giorni-mancanti { color: var(--inchiostro-3); font-size: var(--t-12); }
.st-D-testo { color: var(--ok); }
.richiesta-admin-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

dialog.largo { width: min(580px, calc(100vw - 32px)); }
.periodo-rapido { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.periodo-rapido .bottone { height: 30px; font-size: var(--t-12); }
.due-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.destinatari-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; font-size: var(--t-12); color: var(--inchiostro-2); font-weight: 500; }
.destinatari-testa select { width: auto; height: 30px; font-size: var(--t-12); }
.elenco-conv.destinatari { max-height: 240px; overflow-y: auto; padding-right: 2px; }
.elenco-semplice small { color: var(--inchiostro-3); }

/* ---------- aggiornamenti ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-voce { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.feed-voce:last-child { border-bottom: 0; }
.feed-voce.non-letto { background: #f5f7ff; box-shadow: inset 3px 0 0 var(--accento); }
.iniziali { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inchiostro); color: #fff; font-weight: 650; font-size: var(--t-14); }
.feed-voce.non-letto .iniziali { background: var(--marchio-gradiente); }
.feed-titolo { margin: 0 0 2px; line-height: 1.4; }
.feed-quando { font-size: var(--t-12); color: var(--inchiostro-3); }
.modifiche { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.modifiche li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: var(--vuoto); font-size: var(--t-12); color: var(--inchiostro-2); }
.modifiche li b { color: var(--inchiostro); font-weight: 600; }
.modifiche li i { font-style: normal; color: var(--inchiostro-3); }
.feed-azioni { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ---------- operatori ---------- */
table.tabella { width: 100%; border-collapse: collapse; }
.tabella th { text-align: left; font-size: var(--t-12); font-weight: 600; color: var(--inchiostro-2); padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid var(--linea); }
.tabella td { padding: 10px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella td.azioni { text-align: right; white-space: nowrap; }
.tabella td.azioni .bottone { height: 30px; padding: 0 10px; font-size: var(--t-12); }
.tabella tr.disattivo td:not(.azioni) { color: var(--inchiostro-3); }
.etichetta { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--t-12); font-weight: 600; background: var(--ok-tenue); color: var(--ok); }
.etichetta.spenta { background: var(--vuoto); color: var(--inchiostro-3); }
.tabella-box { overflow-x: auto; }

/* ---------- impostazioni ---------- */
.impostazioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.impostazioni-colonna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.impostazioni form { display: flex; flex-direction: column; }
.impostazioni form .primario { width: auto; align-self: flex-start; margin-top: 6px; }
.impostazioni form > .bottone, .impostazioni form > .link { align-self: flex-start; }

/* ---------- finestre ---------- */
dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: var(--pannello); color: var(--inchiostro);
  box-shadow: 0 30px 80px -20px rgba(15, 24, 48, .45);
}
dialog::backdrop { background: rgba(15, 24, 48, .5); }
dialog form { padding: 24px; }
dialog h2 { margin: 0 0 16px; font-size: var(--t-20); font-weight: 700; line-height: 1.1; }
.dialog-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dialog-azioni .primario { width: auto; }
/* finestra del sito (al posto di quelle del sistema) */
.dlg-sito p { margin: -6px 0 16px; color: var(--inchiostro-2); line-height: 1.5; }
.dlg-sito .campo textarea { min-height: 76px; }
button.primario.pericolo { background: var(--errore); }
button.primario.pericolo:hover { background: #a32520; }
.codice-grande {
  display: block; margin: 4px 0 14px; padding: 14px; border-radius: 10px; background: var(--vuoto); text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-28); font-weight: 700; letter-spacing: .14em;
}
.copia-riga { display: flex; gap: 8px; margin-bottom: 10px; }
.copia-riga input { font-size: var(--t-12); }

/* ---------- avvisi ---------- */
.avvisi { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 70; pointer-events: none; width: calc(100% - 32px); }
.avviso {
  pointer-events: auto; max-width: 560px; padding: 11px 16px; border-radius: 10px; background: var(--inchiostro); color: #fff; font-size: var(--t-14); line-height: 1.45;
  box-shadow: 0 12px 32px -8px rgba(15, 24, 48, .45); animation: entra .2s ease;
}
.avviso.ok { background: #13653a; }
.avviso.errore { background: #a32520; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.caricamento { display: grid; place-items: center; padding: 50px; color: var(--inchiostro-3); }
.caricamento span { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea-forte); border-top-color: var(--accento); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }


/* ---------- convocazioni (supervisori) ---------- */
.testo-errore { color: var(--errore); }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 9px; font-size: var(--t-12); font-weight: 600; background: var(--accento-tenue); color: var(--accento); white-space: nowrap; }
.tag-sup { background: #efe9ff; color: #5b34c7; }
.tag-magg { background: var(--attenzione-tenue); color: var(--attenzione); }
.tag-errore { background: var(--errore-tenue); color: var(--errore); }
.tag-ridosso { background: #fff1d6; color: #8a4b00; }
.etichetta.ruolo-TL { background: #efe9ff; color: #5b34c7; }
.etichetta.ruolo-OP { background: var(--vuoto); color: var(--inchiostro-2); }
.etichetta.ruolo-SUP { background: #e3f4f2; color: #0f766e; }
.st-blu { --st: var(--accento); --st-tenue: var(--accento-tenue); }
.st-vuoto { --st: var(--inchiostro-3); --st-tenue: var(--vuoto); }
.st-annullato { --st: var(--inchiostro-3); --st-tenue: var(--vuoto); text-decoration: line-through; }
.stato-chip { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: var(--t-12); font-weight: 600; background: var(--st-tenue, var(--vuoto)); color: var(--st, var(--inchiostro-2)); white-space: nowrap; }

.conteggi-conv { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.conteggi-conv:empty { display: none; }
.conteggio-conv { border: 1px solid var(--linea-forte); background: var(--pannello); border-radius: 18px; padding: 6px 12px; font-size: var(--t-12); cursor: pointer; color: var(--inchiostro-2); }
.conteggio-conv b { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.conteggio-conv:hover { border-color: var(--inchiostro-3); }
.conteggio-conv.attivo { border-color: var(--accento); background: var(--accento-tenue); color: var(--accento); }
.conv-rifiutato b, .conv-sostituire b { color: var(--errore); }
.conv-da-assegnare b { color: var(--attenzione); }
.navigatore.spento .icona, .navigatore.spento #ev-oggi { visibility: hidden; }
.filtro-attivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--accento-tenue); color: var(--accento-scuro); border-bottom: 1px solid #cdd8ff; font-size: var(--t-14); }
.filtro-attivo .bottone { margin-left: auto; height: 30px; }

.ev-giorno { border-bottom: 1px solid var(--linea); }
.ev-giorno:last-child { border-bottom: 0; }
.ev-giorno.passato { opacity: .7; }
.ev-giorno-testa { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px 9px; background: #f6f8fb; border-bottom: 1px solid var(--linea); }
.ev-giorno-testa b { font-size: var(--t-16); font-weight: 700; line-height: 1.1; }
.ev-giorno-testa span { color: var(--inchiostro-3); font-size: var(--t-12); flex: 1; }
.ev-giorno-testa.oggi b { color: var(--accento); display: inline-flex; align-items: center; gap: 7px; }
.ev-giorno-testa.oggi b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--segnale); box-shadow: 0 0 0 3px #d4f5fb; }
.ev-giorno-testa .link { font-size: var(--t-12); }
.ev-riga { display: grid; grid-template-columns: 92px minmax(0, 1.3fr) minmax(220px, 1fr) 150px 34px; gap: 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--linea); box-shadow: inset 4px 0 0 var(--comp, transparent); transition: background .12s; }
.ev-riga:hover { background-color: #f8fafd; }
.ev-giorno > .ev-riga:last-child { border-bottom: 0; }
.ev-riga.sup { background-color: #fbf9ff; }
.ev-riga.annullato { opacity: .55; }
.ev-riga.annullato .ev-info b { text-decoration: line-through; }
.ev-ora { display: flex; flex-direction: column; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ev-ora b { font-size: var(--t-20); font-weight: 700; line-height: 1.05; margin-bottom: 1px; }
.ev-ora small { color: var(--inchiostro-3); font-size: var(--t-12); }
.ev-ora .notte { color: #5b34c7; font-weight: 600; }
.ev-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-info b { font-weight: 650; font-size: var(--t-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-info small { color: var(--inchiostro-3); font-size: var(--t-12); }
.ev-tag { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ev-nota { color: var(--inchiostro-2) !important; font-style: italic; }
.ev-op { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-op select { height: 34px; font-size: var(--t-14); }
.avviso-op { font-size: var(--t-12); color: var(--inchiostro-3); line-height: 1.35; }
.avviso-op.giallo { color: var(--attenzione); }
.avviso-op.rosso { color: var(--errore); }
.ev-stato { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ev-stato small { font-size: var(--t-12); }
.ev-modifica { width: 32px; height: 32px; }

.tre-campi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dialog-azioni.separati { align-items: center; flex-wrap: wrap; }
.dialog-azioni .spazio { flex: 1; }
.storico { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: var(--t-12); color: var(--inchiostro-3); max-height: 110px; overflow-y: auto; }
.storico:empty { display: none; }
.nuova-versione { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 10px 12px 10px 16px; border-radius: 10px; background: var(--inchiostro); color: #fff; font-size: var(--t-14); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.nuova-versione .primario { flex: none; height: 32px; }
/* collega in sola visualizzazione: spariscono i comandi che modificano */
body.sola-lettura .solo-modifica { display: none !important; }
body:not(.sola-lettura) .solo-lettura { display: none !important; }
.riga-aggiungi { display: flex; gap: 8px; margin-bottom: 10px; }
.riga-aggiungi input { flex: 1; min-width: 0; }
.elenco-visualizzatori { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.elenco-visualizzatori li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--linea); border-radius: 8px; font-size: var(--t-14); }
.elenco-visualizzatori li .chi { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.elenco-visualizzatori li small { display: block; color: var(--inchiostro-3); font-size: var(--t-12); }
.evd-richiesta { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 8px; font-size: var(--t-12); color: var(--inchiostro-2); }
.evd-richiesta .evd-risposte { flex: 1; min-width: 0; }
.evd-richiesta .evd-risposte:empty::before { content: 'Nessuna richiesta di disponibilità per questo evento.'; color: var(--inchiostro-3); }
.evd-richiesta button { flex: none; }
.storico b { color: var(--inchiostro-2); font-weight: 600; }
.griglia td.impegnato .chip::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--accento); opacity: .7; }
.popup-impegno { margin: 6px 0 0; padding: 6px 9px; border-radius: 7px; background: var(--accento-tenue); color: var(--accento-scuro); font-size: var(--t-12); }

/* ---------- riepilogo ---------- */
#rie-contenuto { display: flex; flex-direction: column; gap: 18px; }
#rie-contenuto > .errore { margin: 0; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi > div { background: var(--pannello); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--ombra); }
.kpi span { font-size: var(--t-12); color: var(--inchiostro-2); }
.kpi small { font-size: var(--t-12); color: var(--inchiostro-3); }
.rie-attesa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--attenzione-tenue); color: var(--attenzione); }
.kpi b { font-size: var(--t-20); font-weight: 700; line-height: 1.2; }
.tabella.numeri td, .tabella.numeri th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella.numeri td:first-child, .tabella.numeri th:first-child, .tabella.numeri .sx { text-align: left; }
.tabella tfoot td { font-weight: 700; background: #fafbfc; border-top: 1px solid var(--linea-forte); padding: 10px 14px; }
.tabella.compatta td, .tabella.compatta th { padding: 9px 10px; font-size: var(--t-12); }
.tabella.compatta tfoot td { padding: 9px 10px; }
.tabella.ampia th:first-child, .tabella.ampia td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.tabella.ampia th:last-child, .tabella.ampia td:last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -1px 0 0 var(--linea); }
.tabella.ampia thead th:first-child, .tabella.ampia thead th:last-child { background: #fafbfc; }
.tabella.ampia tfoot td:first-child, .tabella.ampia tfoot td:last-child { background: #fafbfc; }

/* ---------- impostazioni: regole e importazione ---------- */
.tabella.tariffe { table-layout: fixed; }
.tabella.tariffe td, .tabella.tariffe th { padding: 6px 8px; }
.tabella.tariffe th:first-child, .tabella.tariffe td:first-child { width: 80px; font-weight: 600; }
.tabella.tariffe input { height: 34px; text-align: right; padding: 0 8px; }
.tre-campi .campo { justify-content: flex-end; }
.elenco-competizioni { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.elenco-competizioni li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 50px 50px 62px 116px 30px; gap: 8px; align-items: center; }
.colore-comp { display: flex; align-items: center; gap: 2px; }
.colore-comp input[type="color"] { width: 30px; height: 30px; padding: 1px; border: 1px solid var(--linea); border-radius: 6px; background: none; cursor: pointer; }
.colore-comp button { font-size: var(--t-12); padding: 0 2px; }
.colore-comp.auto input[type="color"] { opacity: .75; }
.elenco-competizioni input[type="number"] { height: 32px; padding: 0 6px; text-align: center; font-size: var(--t-14); }
.intestazione-competizioni { display: grid; grid-template-columns: minmax(0, 1fr) 110px 50px 50px 62px 116px 30px; gap: 8px; font-size: var(--t-12); color: var(--inchiostro-3); margin: 0 4px 4px 0; text-align: center; }
.intestazione-competizioni span:first-child { text-align: left; }
.elenco-competizioni input[type="text"], .elenco-competizioni select { height: 32px; font-size: var(--t-14); }
.elenco-competizioni .icona { width: 30px; height: 30px; font-size: var(--t-12); }
.elenco-competizioni li.mansione input[readonly] { grid-column: span 2; background: var(--vuoto); font-weight: 600; }
.elenco-competizioni li.mansione input:disabled { opacity: .55; }
.importazione { margin-top: 14px; padding: 14px; border-radius: 10px; background: #fafbfc; border: 1px solid var(--linea); }
.importazione h3 { margin: 0 0 8px; font-size: var(--t-14); }
.importazione .elenco-semplice { line-height: 1.55; margin-bottom: 8px; }
.importazione .elenco-semplice li { margin-bottom: 4px; }

/* ---------- vista mensile (operatore) ---------- */
.testa-disponibilita { flex-direction: column; align-items: stretch; gap: 12px; }
.vista-scelta { align-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--vuoto); }
.vista-scelta button { border: 0; background: none; padding: 6px 18px; border-radius: 8px; font-weight: 600; color: var(--inchiostro-2); cursor: pointer; }
.vista-scelta button[aria-pressed="true"] { background: var(--pannello); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(15, 24, 48, .14); }
.testa-disponibilita .navigatore { justify-content: center; }
.mese-op { padding: 14px 18px 18px; }
.mese-intestazione, .mese-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mese-intestazione { margin-bottom: 6px; text-align: center; font-size: var(--t-12); font-weight: 600; color: var(--inchiostro-3); }
.mc {
  position: relative; min-width: 0; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 6px 7px; border: 1px solid var(--linea); border-radius: 10px; background: var(--pannello); color: var(--inchiostro); font: inherit; cursor: pointer;
}
.mc:hover { border-color: var(--inchiostro-3); }
.mc-num { font-size: var(--t-14); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.mc.st-D { background: var(--ok-tenue); border-color: #b9e0c9; }
.mc.st-P { background: var(--attenzione-tenue); border-color: #f0d6a6; }
.mc.st-A { background: var(--errore-tenue); border-color: #f3c5c1; }
.mc.st-D .mc-num, .mc.st-P .mc-num, .mc.st-A .mc-num { color: var(--st); }
.mc-onsite, .mc-campione.mc-onsite { background: #efe7ff; border-color: #d9c9ff; }
.mc-onsite .mc-num { color: #5b34c9; }
.mc-oggi { box-shadow: inset 0 0 0 2px var(--segnale); }
.mc-richiesto { border: 2px dashed var(--accento); }
.mc-spento { opacity: .5; }
.mc-modificato::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accento); }
.mc-fuori { visibility: hidden; }
.mc-segni { display: flex; gap: 3px; }
.segno { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.segno-nota { background: var(--inchiostro-2); }
.segno-conv { background: var(--accento); border-radius: 2px; }
.segno-modifica { background: var(--accento); }
.mese-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--t-12); color: var(--inchiostro-2); }
.mese-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.mc-campione { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--linea); }
.mc-campione.mc-richiesto { border: 2px dashed var(--accento); }
dialog.dlg-giorno { width: min(440px, calc(100vw - 32px)); }
.dlg-giorno form { display: flex; flex-direction: column; gap: 12px; }
.dlg-giorno h2 { margin: 0; }
.dlg-giorno-segni { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.dlg-giorno-segni > span { margin-top: 0; }
.dlg-giorno-info { margin: 0; color: var(--inchiostro-2); line-height: 1.5; }
.dlg-giorno .dialog-azioni { margin-top: 4px; align-items: center; }
.dlg-giorno .dialog-azioni .spazio { flex: 1; }
.dlg-giorno-telefono { justify-content: flex-start; }

/* ---------- convocazioni (operatore) ---------- */
.mie-convocazioni { margin-bottom: 16px; }
.mie-convocazioni:empty { display: none; }
.conv-vuoto { margin: 0; padding: 14px 18px; color: var(--inchiostro-2); font-size: var(--t-14); line-height: 1.5; }
.convocazione { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.convocazione:last-child { border-bottom: 0; }
.convocazione.annullata { opacity: .55; }
.convocazione.annullata .conv-info b { text-decoration: line-through; }
.conv-data { display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 7px 0 6px; border-radius: 10px; background: var(--accento-tenue); color: var(--accento); }
.conv-data small { font-size: var(--t-12); font-weight: 600; }
.conv-data b { font-size: var(--t-28); font-weight: 700; }
.conv-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conv-info b { font-weight: 650; font-size: var(--t-16); }
.conv-info span { color: var(--inchiostro-2); font-size: var(--t-14); }
.conv-info .ritrovo { color: var(--inchiostro); font-weight: 600; }
.conv-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.conv-azioni .primario { height: 36px; }
.giorno-convocato { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 10px; background: var(--ok-tenue); color: var(--ok); font-size: var(--t-12); font-weight: 600; }

/* ---------- schermi piccoli ---------- */
/* testata della dashboard: fino a 1180 px chi la usa va sotto il nome e le schede si stringono */
@media (max-width: 1180px) {
  .testata { gap: 16px; }
  .schede button { padding: 0 9px; }
  .marchio-nome { line-height: 1.2; }
  .marchio-ruolo { display: block; font-size: var(--t-12); font-weight: 500; color: var(--inchiostro-2); }
  .marchio-ruolo::before { content: none; }
}
/* sotto i 960 px le schede scendono su una riga loro e scorrono sotto il logo */
@media (max-width: 960px) {
  .testata { padding: 0 16px; }
  .testata.con-schede { height: auto; flex-wrap: wrap; padding-top: 10px; row-gap: 4px; }
  .testata.con-schede .schede { order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 0 8px; height: 42px; overflow-x: auto; border-top: 1px solid var(--linea); }
  .testata.con-schede .schede button { flex: none; }
}
@media (max-width: 1080px) {
  .dashboard.con-pannello { grid-template-columns: minmax(0, 1fr); }
  .pannello-conv { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .solo-desktop { display: none !important; }
  /* campi da compilare a 16 px: sotto, l'iPhone ingrandisce la pagina quando si tocca il campo */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size: var(--t-16) !important; }
  /* Operatori: una scheda per operatore con tutte le voci */
  .tabella-operatori thead { display: none; }
  .tabella-operatori, .tabella-operatori tbody, .tabella-operatori tr { display: block; }
  .tabella-operatori tr { padding: 10px 14px; border-bottom: 1px solid var(--linea); }
  table.tabella-operatori td { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; border: 0; }
  .tabella-operatori td .valore { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .tabella-operatori td[data-voce]::before { content: attr(data-voce); flex: 0 0 92px; font-size: var(--t-12); color: var(--inchiostro-3); }
  .tabella-operatori td.op-nome { display: block; padding-bottom: 6px; }
  .tabella-operatori td.azioni { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 8px; white-space: normal; }
  table.tabella-operatori td.azioni .bottone { flex: 1 1 auto; width: auto; margin: 0; }
  .testata { gap: 12px; padding: 0 16px; }
  .titolo-pagina > .primario { width: 100%; }
  .titolo-pagina h1 { font-size: var(--t-28); }
  .richiesta { flex-wrap: wrap; }
  .richiesta .bottone { width: 100%; }
  .azioni-rapide > span { width: 100%; }

  /* griglia compatta: tutta la settimana in larghezza, simboli al posto delle parole */
  .griglia-box { overflow-x: visible; }
  table.griglia { min-width: 0; table-layout: fixed; }
  .griglia th.colonna-op, .griglia td.colonna-op { width: 104px; min-width: 0; }
  .griglia thead th.colonna-op { padding: 8px 10px; font-size: var(--t-12); }
  .op-cella { padding: 7px 8px 7px 10px; }
  .op-cella b span { overflow: hidden; text-overflow: ellipsis; }
  .op-cella small { font-size: var(--t-12); }
  .giorno-testa { padding: 7px 0 6px; gap: 2px; }
  .giorno-testa b { line-height: 1.2; display: flex; flex-direction: column; align-items: center; }
  .giorno-testa b span:first-child { font-weight: 500; color: var(--inchiostro-3); font-size: var(--t-12); }
  .giorno-testa .conti { font-size: var(--t-12); }
  .giorno-testa .conti .st-P, .giorno-testa .conti .st-A { display: none; }
  .chip { min-width: 0; width: calc(100% - 6px); max-width: 34px; height: 30px; margin: 4px 3px; padding: 0; font-size: var(--t-14); }
  .chip .lungo { display: none; }
  .chip .corto { display: inline; }
  .chip .con-nota { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; }
  .scheda-piede { padding: 10px 14px; gap: 6px 12px; font-size: var(--t-12); }
  .scheda-testa { padding: 12px 14px; }

  .tabella td, .tabella th { padding: 10px; }
  .tabella td.azioni { white-space: normal; }
  .tabella td.azioni .bottone { width: 100%; margin: 2px 0; }
  .richiesta-admin-azioni .bottone { flex: 1 1 calc(50% - 8px); }
  .due-campi { gap: 8px; }
  dialog form { padding: 20px 18px; }
  .popup { width: min(270px, calc(100vw - 16px)); }
  .elenco-conv.destinatari { max-height: 180px; }
  .ev-giorno-testa { flex-wrap: wrap; padding: 10px 14px 8px; row-gap: 4px; column-gap: 14px; }
  .ev-giorno-testa span { flex: 1 1 auto; }
  /* i tasti per aggiungere eventi in una riga a sé, sotto la data */
  .ev-giorno-testa::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .ev-giorno-testa .link { order: 2; }
  .ev-riga { grid-template-columns: 86px minmax(0, 1fr) 32px; gap: 8px 10px; padding: 12px 14px; }
  .ev-ora small { white-space: nowrap; font-size: var(--t-12); }
  .ev-ora { grid-row: 1 / span 2; align-self: start; }
  .ev-info { grid-column: 2; }
  .ev-modifica { grid-column: 3; grid-row: 1; align-self: start; }
  .ev-op { grid-column: 2 / span 2; }
  .ev-stato { grid-column: 2 / span 2; flex-direction: row; align-items: center; gap: 8px; }
  .tre-campi { grid-template-columns: 1fr 1fr; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .impostazioni { grid-template-columns: minmax(0, 1fr); }
  .kpi b { font-size: var(--t-20); }
  /* competizioni sul telefono: nome su tutta la riga; sport e compenso; poi ore prima/dopo, colore e ✕ */
  .elenco-competizioni { gap: 0; }
  .elenco-competizioni li { grid-template-columns: minmax(0, 1fr) 56px 56px 66px 30px; row-gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
  .elenco-competizioni li > input[type="text"], .elenco-competizioni li.mansione input[readonly] { grid-column: 1 / -1; grid-row: 1; }
  .elenco-competizioni select[data-campo="sport"] { grid-column: 1 / span 2; grid-row: 2; }
  .elenco-competizioni select[data-campo="compenso"] { grid-column: 3 / span 3; grid-row: 2; }
  .elenco-competizioni li::before { content: "Ore prima / dopo, colore"; grid-column: 1; grid-row: 3; align-self: center; font-size: var(--t-12); color: var(--inchiostro-3); }
  .elenco-competizioni input[data-campo="prima"] { grid-column: 2; grid-row: 3; }
  .elenco-competizioni input[data-campo="dopo"] { grid-column: 3; grid-row: 3; }
  /* turni: «ore prima» è sempre 0 (campo spento), sul telefono basta la durata */
  .elenco-competizioni li.mansione input[type="number"]:disabled { display: none; }
  .elenco-competizioni li.mansione input[data-campo="dopo"] { grid-column: 2; }
  .elenco-competizioni li.mansione select[data-campo="compenso"] { grid-column: 1 / -1; }
  .elenco-competizioni li.mansione .colore-comp { grid-column: 3; }
  .elenco-competizioni .colore-comp { grid-column: 4; grid-row: 3; }
  .elenco-competizioni li > [data-togli], .elenco-competizioni li > span:last-child { grid-column: 5; grid-row: 3; }
  .elenco-competizioni li.mansione::before { content: "Ore di turno, colore"; }
  .intestazione-competizioni { display: none; }
  .convocazione { grid-template-columns: 54px minmax(0, 1fr); padding: 12px 14px; }
  .conv-azioni { grid-column: 1 / -1; justify-content: stretch; }
  .conv-azioni button { flex: 1; }
  .accesso::before { width: 460px; height: 460px; right: -170px; top: -150px; }
  .marchio-logo { height: 30px; }
  .marchio-nome { padding-left: 10px; font-size: var(--t-14); line-height: 1.2; }
  .testata .utente { display: none; }
  .contenuto { padding: 16px 16px 150px; }
  .giorno { grid-template-columns: 1fr; padding: 14px 16px; }
  /* data in riga; le etichette (oggi, bloccato, convocato…) vanno a capo intere invece di schiacciarsi */
  .giorno-data { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .giorno-data small { white-space: nowrap; }
  .giorno-data > span, .giorno-data > em, .giorno-data .giorno-convocato { margin-top: 0; }
  .giorno-data .oggi { margin-top: 0; }
  /* sul telefono "Non disponibile" va a capo invece di essere troncato */
  .stati button { height: 46px; font-size: var(--t-14); line-height: 1.15; white-space: normal; text-align: center; padding: 0 4px; }
  .stati button .pallino { display: none; }
  /* vista mensile: celle più compatte; il pannello del giorno sale dal basso */
  .mese-op { padding: 12px 10px 14px; }
  .mese-intestazione, .mese-griglia { gap: 4px; }
  .mc { padding: 5px; border-radius: 8px; }
  dialog.dlg-giorno { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .stati button span:last-child { white-space: normal; overflow: visible; }
  /* stato sopra, tasto a tutta larghezza sotto (a 14 px accanto al tasto andrebbe su tre righe) */
  .barra-invio-dentro { flex-wrap: wrap; gap: 8px; }
  .barra-invio .stato-invio { flex: 1 1 100%; }
  .barra-invio button.primario { flex: 1 1 100%; padding: 0 14px; }
  .barra-invio { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .barra-invio button.primario { min-width: 0; }
  .navigatore .settimana { min-width: 0; flex: 1; }
  /* settimana a 20 px su una riga sua, i tasti sotto (accanto non ci sta) */
  .scheda-testa .navigatore { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .scheda-testa .navigatore .settimana { order: -1; flex: 1 0 100%; }
  .scheda-testa .navigatore { width: 100%; }
  .feed-voce { grid-template-columns: 34px 1fr; }
  .iniziali { width: 34px; height: 34px; }
  .feed-azioni { grid-column: 2; flex-direction: row; align-items: center; }
  .strumenti select, .strumenti input[type="search"] { flex: 1 1 100%; min-width: 0; }
}

/* ---------- on-site (dashboard) ---------- */
.onsite-righe { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.onsite-righe li { display: grid; grid-template-columns: 92px 130px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.onsite-righe li b { font-size: var(--t-14); font-weight: 600; }
.onsite-righe select, .onsite-righe input { height: 34px; font-size: var(--t-14); }
.ev-riga.onsite { background-color: #f8f4ff; cursor: pointer; }
.ev-riga.onsite .ev-ora b { color: #5b34c9; }
.st-onsite { --st: #5b34c9; --st-tenue: #efe7ff; }
.chip.st-onsite { background: #efe7ff; color: #5b34c9; }
.etichetta.etichetta-onsite { background: #efe7ff; color: #5b34c9; }
.onsite-modifica { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.elenco-conv .persona { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--linea); border-radius: 8px; }
.elenco-conv .persona .chi { flex: 1; }
@media (max-width: 640px) {
  .onsite-righe li { grid-template-columns: 1fr 30px; }
  .onsite-righe li b { grid-column: 1 / -1; }
}

/* ---------- invio di una selezione ---------- */
.invio-gruppo { margin: 0 0 10px; }
.invio-op { margin: 0 0 4px; }
.elenco-invio { list-style: none; margin: 0 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.elenco-invio .spunta { margin: 0; font-size: var(--t-14); color: var(--inchiostro-2); }

/* ---------- calendario mensile a schermo intero (Convocazioni) ---------- */
body.con-calendario { overflow: hidden; }
.calendario-pieno { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--sfondo); }
.calendario-pieno[hidden] { display: none; }
.cal-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; background: var(--pannello); border-bottom: 1px solid var(--linea); }
.cal-barra h2 { margin: 0 4px; min-width: 170px; text-align: center; font-size: var(--t-20); font-weight: 700; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--t-12); color: var(--inchiostro-2); }
.cal-legenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; background: var(--stato); vertical-align: -1px; }
.cal-intestazione { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 6px 0; background: var(--pannello); border-bottom: 1px solid var(--linea); font-size: var(--t-12); font-weight: 600; color: var(--inchiostro-3); text-align: center; }
.cal-griglia { --cella: 96px; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); overflow: auto; }
.cal-giorno { min-height: var(--cella); min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 5px; background: var(--pannello); overflow: hidden; }
.cal-giorno.fuori { background: #f7f8fa; }
.cal-giorno.fuori .cal-num { color: var(--inchiostro-3); }
.cal-num { align-self: flex-start; padding: 0 6px; border-radius: 10px; font-size: var(--t-12); font-weight: 600; color: var(--inchiostro-2); }
.cal-giorno.oggi .cal-num { background: var(--accento); color: #fff; }
.cal-voce { display: block; width: 100%; min-width: 0; margin: 0; padding: 2px 6px 2px 9px; border: 0; border-radius: 5px; background: var(--stato-tenue); color: var(--stato);
  box-shadow: inset 3px 0 0 var(--comp, transparent); font: inherit; font-size: var(--t-12); font-weight: 600; line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-voce:hover, .cal-voce:focus-visible { filter: brightness(.96); outline: 2px solid var(--comp); outline-offset: -1px; }
.cal-verde { --stato: #166534; --stato-tenue: #dcfce7; }
.cal-blu { --stato: #1d4ed8; --stato-tenue: #dbeafe; }
.cal-arancione { --stato: #b45309; --stato-tenue: #ffedd5; }
.cal-rosso { --stato: #b91c1c; --stato-tenue: #fee2e2; }
.cal-altri { align-self: flex-start; padding: 0 6px; border: 0; background: none; font: inherit; font-size: var(--t-12); color: var(--inchiostro-2); cursor: pointer; }
.cal-altri:hover { color: var(--accento); }
.cal-dettagli { position: fixed; z-index: 61; display: flex; flex-direction: column; gap: 2px; max-width: 300px; padding: 10px 12px; border: 1px solid var(--linea-forte); border-radius: 10px;
  background: var(--pannello); box-shadow: 0 8px 24px rgba(16, 20, 30, .16); font-size: var(--t-14); line-height: 1.45; color: var(--inchiostro-2); }
.cal-dettagli[hidden] { display: none; }
.cal-dettagli b { color: var(--inchiostro); }
.cal-dettagli .cal-note { font-style: italic; }
.cal-dettagli .primario { margin-top: 6px; }
@media (max-width: 640px) {
  .cal-barra { padding: 8px 10px; gap: 6px; }
  /* il mese a 20 px su una riga sua; sotto frecce, Oggi e, a destra, Chiudi */
  .cal-barra h2 { min-width: 0; order: -1; flex: 1 0 100%; margin: 0 2px 2px; text-align: left; }
  .cal-barra #cal-chiudi { margin-left: auto; }
  .cal-legenda, #cal-schermo { display: none; }
  /* celle alte abbastanza per le quattro voci a 12 px */
  .cal-griglia { --cella: 96px; }
  .cal-giorno { padding: 2px; }
  .cal-voce { padding: 1px 3px 1px 5px; font-size: var(--t-12); }
  .cal-altri { font-size: var(--t-12); padding: 0 3px; }
}