/* Trame — sistema comune. Solo schermo, caricato per ultimo (prima delle vesti).
   Identità della veste classica (Manrope, teal, etichette in maiuscolo): qui solo
   carattere, misure dei controlli e allineamenti. Le dimensioni del testo
   arrivano già sulla scala dagli strati generati in css/scala/. */

/* Manrope latino di base: il file latin-ext conteneva solo la "A", quindi il
   testo ASCII usciva nel carattere di riserva del sistema. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --title-size: 32px;
  --control-min-height: 40px;
  --control-small-min-height: 32px;
  --control-font-size: 13px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --stack-gap: 24px;
}

@media (max-width: 760px) {
  :root { --title-size: 28px; --stack-gap: 16px; }
}

body, button, input, select, textarea { font-family: var(--font-sans); }

/* "bolder" dentro testo già semibold arrivava a 900: un solo grassetto. */
b, strong { font-weight: 700; }

/* Sottotitolo del marchio su una riga anche con il Manrope reale (più largo). */
.brand small { white-space: nowrap; letter-spacing: 0; }

time, .time, td, th, .money-in, .money-out, .planning-home-stat > strong, .billing-home-summary-item > strong, input[type="number"], input[type="date"], input[type="month"] {
  font-variant-numeric: tabular-nums;
}

/* Titolo pagina: una sola misura e una sola linea di base con le azioni. */
.app-main .page-head h1, .calendar-workspace-head h1, .app-main > h1 {
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
/* Solo da desktop: sotto i 761 px la testata è in colonna e flex-end spingerebbe il titolo a destra. */
@media (min-width: 761px) {
  .page-head { align-items: flex-end; row-gap: 12px; }
  .page-head > :is(.button, a.button, form, div:last-child:not(:first-child)) { align-self: flex-end; }
}

/* Controlli: tre taglie (40 / 32 / 24) e un raggio. */
.button, a.button, button.button, input[type="submit"].button {
  min-height: var(--control-min-height);
  border-radius: var(--radius-small);
  font-size: var(--control-font-size);
  line-height: 1.2;
}
.button.small, a.button.small { min-height: var(--control-small-min-height); font-size: 12px; }
.app-main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"]), select) {
  min-height: var(--control-min-height);
  border-radius: var(--radius-small);
}
.app-main textarea { border-radius: var(--radius-small); }

/* Nelle barre comandi i pulsanti non vanno a capo: il testo su due righe
   portava "Vai al calendario" e "Solo da coprire" a 60 px. */
@media (min-width: 761px) {
  :is(.toolbar, .month-nav, .calendar-command-bar, .calendar-board-toolbar, .calendar-summary-toolbar, .calendar-period-picker,
      .report-toolbar, .client-list-toolbar, .document-list-toolbar,
      .billing-client-toolbar, .page-head) .button {
    white-space: nowrap;
  }
  /* Senza testo a capo la barra del calendario può andare su due righe, mai fuori pagina. */
  .calendar-command-bar { flex-wrap: wrap; row-gap: 8px; }
}

/* Calendari: nelle celle che hanno già un evento il "+" (fuori dal flusso, in alto a
   destra) copriva l'orario. Con un puntatore resta nascosto finché non si passa sulla
   cella o lo si raggiunge con la tastiera; le celle vuote lo mostrano sempre. */
@media (hover: hover) and (min-width: 761px) {
  .month-cell:has(.client-event, .operator-event) > :is(.cell-add, .client-cell-add) { opacity: 0; }
  .month-cell:has(.client-event, .operator-event):is(:hover, :focus-within) > :is(.cell-add, .client-cell-add) { opacity: 1; }
}

/* Visuale compatta: il riquadro di riepilogo resta dentro la sua colonna (~31 px) e
   lascia 1 px di respiro, così i bordi delle celle vicine non si sovrappongono. */
.month-cell > .calendar-cell-summary {
  box-sizing: border-box;
  width: calc(100% - 2px);
  min-width: 0;
  margin: 1px;
  overflow: hidden;
}
.month-cell:has(> .calendar-cell-summary) { container-type: inline-size; }
/* Colonne strette (es. 1440 px con il menu aperto: riquadro ~26 px): restano numero e
   colore di stato; parole complete nel title e nel dialogo di dettaglio. */
@container (max-width: 36px) {
  .calendar-cell-summary > span:not(.visually-hidden), .calendar-cell-summary .summary-word { display: none; }
}

/* Visuale mensile su telefono: la griglia resta (non diventa elenco come le viste
   "calendar-board-surface"), quindi l'etichetta "Giovedì 01 Ottobre" pensata per
   l'elenco finiva stretta nella cella sotto il "+". Il giorno è già nell'intestazione. */
@media (max-width: 760px) {
  .calendar-shell:not(.calendar-board-surface) .calendar-mobile-day { display: none; }
  /* Senza mouse il "+" resta sempre visibile: nelle celle con accessi ha una sua fascia
     in alto invece di coprire l'orario del primo accesso. */
  .calendar-shell:not(.calendar-board-surface, .access-calendar-shell) .month-cell:has(.client-event, .operator-event) {
    padding-top: 32px;
  }
}

/* Lista documenti: un indirizzo email lungo va a capo nella sua colonna invece di
   uscire dal bordo destro della tabella scorrevole. */
.email-state-note, .email-error-detail { max-width: 190px; overflow-wrap: break-word; }

/* Orario degli eventi sempre su una riga: negli eventi da assegnare (bordo
   tratteggiato da 2 px) "08:00-09:00" andava a capo sul trattino, negli altri no. */
:is(.operator-event, .client-event) :is(a, .month-event, .client-event-main) > b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Bordo sottile nel colore dell'assistito sugli accessi dei quadri e della pagina
   Accessi, come nel quadro operatrici: app-theme.css lo riportava al grigio di
   linea. Cambia solo il colore; i tratteggi di scoperto, da completare e
   provvisorio sono più specifici e restano. Senza colore assegnato resta il
   grigio. Il calendario riassuntivo (settimana e mese) resta grigio per scelta. */
:is(.operator-event, .client-event) {
  border-color: var(--client-color-border, var(--line));
}

/* Testo sul colore cliente: una regola unica per tutti i calendari (quadri,
   settimana, riassuntivo, Accessi). Il colore arriva da client_color_text()
   come --client-color-text: inchiostro del sistema o bianco, il più leggibile
   secondo WCAG. Orari, nomi e note lo ereditano; badge di stato e pulsanti
   azione hanno un fondo proprio e restano esclusi. */
:is(.client-event, .operator-event, .week-event, .summary-event)[style*="--client-color"] {
  --client-cell-ink: var(--client-color-text, var(--ink));
  color: var(--client-cell-ink);
}
:is(.client-event, .operator-event, .week-event, .summary-event)[style*="--client-color"]
  :is(a, b, strong, span, small, time, .month-event, .client-event-main):not(
    .access-status-badge, .h24-badge, .client-event-uncovered-label,
    .client-event-unavailable, .client-event-reorganize, .calendar-board-edit) {
  color: inherit;
}
/* Pillole "Turno H24" e "Ricorrente": fondo pieno --forest, quindi testo scelto con
   la stessa regola APCA del colore cliente (client_color_text). Bianco in entrambe
   le vesti: Lc 84 contro 21 dell'inchiostro su #246F78 (classica), 91 contro 13 su
   #1E4FA3 (Orario). Serve qui perché ".client-event :is(..., small)" in app.css
   ereditava il colore della cella e dava testo scuro su fondo scuro. */
:is(.client-event, .operator-event, .week-event, .summary-event) .h24-badge {
  color: #ffffff;
}
/* Nel quadro clienti e in Accessi gli scoperti e i da completare mostrano un
   fondo chiaro di stato al posto del colore cliente: inchiostro del sistema. */
.month-cell .client-event[style*="--client-color"]:is(.coverage-uncovered, .coverage-partial) {
  --client-cell-ink: var(--ink);
}
/* I badge di stato chiari di app-theme.css perdevano il testo scuro per il
   "white !important" di app.css: torna il colore previsto dal badge. */
.access-status-badge.uncovered { color: #7c2d18 !important; }
.access-status-badge.partial { color: #6e4905 !important; }
.access-status-badge.provisional { background-color: #ece2f7; color: #4a2a73 !important; }
/* "Assegna" delle opportunità è il pulsante stesso (button.operator-event-action),
   non un suo figlio: riceve lo stesso fondo chiaro degli altri pulsanti azione
   invece del bianco traslucido che sui colori scuri diventava grigio. */
button.operator-event-action {
  background: linear-gradient(180deg, #fff, #eef6f6);
  border-top: 1px solid var(--line);
  color: var(--brand);
  font-weight: 700;
}

.view-switch .button { border-radius: 4px; }

/* Focus uguale per tutti i controlli. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, #2f7f89);
  outline-offset: 2px;
}

/* Ritmo verticale fra testata, filtri e contenuto. */
.app-main > .page-head { margin-bottom: var(--stack-gap); }

/* Movimento: niente sollevamenti al passaggio del mouse. */
.button:hover, a.button:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Preventivi: settimana tipo con la griglia oraria della disponibilità settimanale
   (le regole di app.css sono legate a .availability-calendar-panel). */
.quote-form .field-week_hours { grid-column: 1 / -1; }
.model-form.quote-form .field[hidden] { display: none; }
/* Preventivi: programma giorno per giorno, il totale del giorno separa i giorni. */
.quote-programme .quote-day-total td { border-top: 1px solid var(--line); color: var(--forest); font-weight: 700; }
.quote-programme .quote-programme-extra td { color: var(--muted); }
.quote-tariff-summary { margin-top: 14px; }
.quote-tariff-summary > summary { cursor: pointer; color: var(--forest); font-weight: 700; }
.quote-tariff-summary .table-wrap { margin-top: 10px; }

/* Operatrice esclusa per il cliente: cognome e pillola "ESCLUSA" in una colonna
   propria, con la pillola centrata sotto il cognome. Accodata sulla stessa riga
   restava centrato l'insieme, non la pillola (spostata di ~20 px). La colonna si
   allinea sulla linea di base del cognome, quindi le altre operatrici restano
   sulla stessa riga. */
.client-event-main span.client-event-operator.excluded {
  display: inline-flex; flex-direction: column; align-items: center;
  width: auto; margin: 0;
}
.client-event-operator .access-status-badge.excluded { margin: 2px auto 0; }

/* «Cambia visuale»: passa all'altra veste grafica (solo se l'istanza ne offre più di una).
   Prima voce delle azioni utente, sopra «Gestione utenti» ed «Esci». */
.veste-switch { margin: 0; }
/* Stesso aspetto di «Gestione utenti»: è un pulsante (invia il modulo) ma non ne prende
   altezza minima e grassetto, e non va mai a capo nella colonna stretta delle azioni. */
.sidebar-user .veste-switch-link {
  min-height: 0; padding: 0; border: 0; background: none;
  font: inherit; line-height: inherit; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.sidebar-user .veste-switch-link:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }

/* Schermi bassi (telefono in orizzontale): il menu non comprime più le voci tra marchio
   e utente (restavano 64 px, una voce e mezza); scorre tutto il pannello. Sotto i 761 px
   il marchio è già nella testata e non si ripete nel pannello. La barra in alto della
   veste Orario ridefinisce overflow e nav con selettori più specifici e resta com'è. */
@media (max-height: 520px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .sidebar nav { flex: none; min-height: auto; overflow: visible; }
}
@media (max-width: 760px) and (max-height: 520px) {
  .sidebar .brand { display: none; }
  .sidebar { padding-top: 8px; }
}