/* Monthly hour register — estratto da components.css per modularità (AGENTS.md: CSS modulare) */
.monthly-section { margin-top: 1.25rem; padding: 1rem; }
/* Messaggi della pagina Orari mensili.
   Perche' hanno uno stile proprio: prima qui si scriveva un <div class="flash">
   che non era definito in nessun foglio di stile dell'app. Il messaggio finiva
   quindi in cima alla pagina come testo nudo, senza bordo ne' colore, e
   spariva dopo 5 secondi: chi lavorava sul registro interventi (che sta a meta'
   pagina) non lo vedeva mai e sembrava che il pulsante "Salva" non facesse
   nulla. Ora il messaggio ha lo stesso linguaggio delle notifiche dell'app.
   Gli errori NON si chiudono da soli: restano finche' non li si chiude, cosi'
   non si perdono mentre si guarda il punto giusto della pagina. */
.monthly-alerts { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; }
.monthly-alerts:empty { display: none; }
/* Lo stile del messaggio (colori compresi) e' quello comune `.flash`, definito
   in components-ui.css; qui c'e' solo quello che e' proprio di questa pagina. */
.monthly-alert.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-weight: 600;
}
/* Sottotitolo con l'indicazione pratica (per esempio "quello del 15/08"). */
.monthly-alert__dettaglio { display: block; margin-top: 0.2rem; font-weight: 400; }
.monthly-alert__chiudi { margin-left: auto; padding: 0 0.25rem; border: 0; background: none; color: inherit; font-size: var(--text-xl); line-height: 1; opacity: 0.65; cursor: pointer; }
.monthly-alert__chiudi:hover { opacity: 1; }

.monthly-hero { align-items: center; margin-top: 0.2rem; }
.monthly-hero-person { display: flex; min-width: 12rem; flex-direction: column; align-items: flex-end; padding-left: 1.5rem; border-left: 1px solid var(--green-200); }
.monthly-hero-person span, .monthly-hero-person small { color: var(--text-secondary); font-size: .72rem; }
.monthly-hero-person strong { margin: .2rem 0; font-size: 1rem; }
.monthly-status-line { display: flex; align-items: center; gap: .45rem; margin: .25rem 0 1rem; color: var(--text-secondary); font-size: .78rem; }
.monthly-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gray-400); }
.monthly-status-dot.is-editable { background: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.monthly-status-dot.is-readonly { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); }
.monthly-status-separator { color: var(--gray-400); }
.monthly-dirty-state { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--warning-fg); font-weight: 700; }
.monthly-dirty-state .icon-xs { fill: currentColor; }
.monthly-nav { margin-bottom: 1rem; }
.monthly-nav-fields { align-items: end; }
.monthly-nav label { display: grid; gap: .25rem; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; }
.monthly-nav select, .monthly-nav input { min-height: 2.25rem; }
.monthly-heading { align-items: end; gap: 1rem; }
.monthly-heading-title { display: grid; gap: .25rem; }
.monthly-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.monthly-title-row h2 { margin: 0; }
.monthly-save-button { min-height: 2.3rem; }
.monthly-save-sidebar { width: 100%; box-shadow: 0 8px 20px rgb(5 150 105 / 28%); }
.monthly-save-floating.is-saved { background: var(--green-700); color: var(--on-success); box-shadow: 0 8px 20px rgb(5 150 105 / 28%); }
.monthly-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.monthly-send-button { box-shadow: 0 8px 20px rgb(5 150 105 / 28%); }
.section-kicker { display: block; margin-bottom: .15rem; color: var(--green-700); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.report-detail-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .35rem .6rem; border: 1px solid var(--green-200); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--green-50) 58%, var(--surface)); color: var(--green-800); font-size: .78rem; font-weight: 700; }
.report-detail-toggle input { accent-color: var(--green-700); }
.monthly-table { border: 1px solid var(--gray-300); border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; }
.monthly-table th, .monthly-table td { white-space: nowrap; border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.monthly-table th:last-child, .monthly-table td:last-child { border-right: 0; }
.monthly-table tbody tr:last-child th, .monthly-table tbody tr:last-child td { border-bottom: 0; }
.monthly-table thead th { border-bottom: 1px solid var(--green-200); background: color-mix(in srgb, var(--green-50) 65%, var(--surface)); }
.monthly-table tfoot th, .monthly-table tfoot td { border-top: 2px solid var(--green-200); border-bottom: 0; background: color-mix(in srgb, var(--green-50) 55%, var(--surface)); }
.monthly-table th:nth-child(2), .monthly-table td:nth-child(2) { width: 4.25rem; min-width: 4.25rem; max-width: 4.25rem; padding-left: .35rem; padding-right: .35rem; text-align: center; }
.monthly-table td:nth-child(2) select { width: 3.2rem; min-width: 3.2rem; padding-left: .15rem; padding-right: .15rem; }
.monthly-table input[type="text"], .monthly-table input[type="number"], .monthly-table select { width: 7rem; min-width: 7rem; }
.monthly-table th:first-child { min-width: 7rem; }
.monthly-table small { display: block; color: var(--gray-500); font-weight: 400; }
/* Giorno della settimana nella prima colonna: testo pieno per il contrasto. */
.monthly-table tbody th small { color: var(--gray-600); }
.monthly-table .is-weekend { background: color-mix(in srgb, var(--gray-100) 60%, transparent); }
.monthly-table tfoot { border-top: 2px solid var(--gray-300); }
.monthly-table thead th { line-height: 1.25; text-align: center; }
/* Testata piena: stacca la tabella dalla pagina e resta leggibile in dark mode. */
.monthly-table thead th, .monthly-details thead th {
  background: var(--success-solid);
  color: var(--on-success);
}
.monthly-table thead small, .monthly-details thead small { color: var(--on-success); font-weight: 700; }
.monthly-table thead th { border-bottom-color: rgb(255 255 255 / 25%); }
.monthly-table tbody th:first-child { background: color-mix(in srgb, var(--green-50) 48%, var(--surface)); color: var(--green-800); text-align: center; }
.monthly-table tbody tr:hover th:first-child { background: color-mix(in srgb, var(--green-100) 55%, var(--surface)); }
.monthly-table td:last-child { text-align: center; }
.monthly-table td:last-child .monthly-switch { justify-content: center; }
.monthly-table tbody td, .monthly-table tbody th { vertical-align: middle; }
.monthly-table tbody input[type="number"], .monthly-table tbody input[type="text"] { text-align: center; }
.monthly-table tbody input.is-invalid { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.monthly-table tbody input[data-field="on_call"], .monthly-table tbody input[data-field="overtime"] { cursor: default; background: var(--info-bg); color: var(--info-fg); font-weight: 700; }
.monthly-table tbody select { font-weight: 700; text-align: center; }
.monthly-table tbody tr:hover { background: var(--green-50); }
.monthly-table tbody tr.is-empty { background: color-mix(in srgb, var(--warning-bg) 28%, var(--surface)); }
.monthly-table tbody tr.has-absence { background: color-mix(in srgb, var(--info-bg) 38%, var(--surface)); }
.monthly-table tbody tr.has-hours { background: color-mix(in srgb, var(--green-50) 62%, var(--surface)); }
.monthly-table tbody tr.is-empty th:first-child { background: color-mix(in srgb, var(--warning-bg) 52%, var(--surface)); }
.monthly-table tbody tr.has-absence th:first-child { background: color-mix(in srgb, var(--info-bg) 65%, var(--surface)); }
.monthly-table tbody tr.has-hours th:first-child { background: color-mix(in srgb, var(--green-100) 56%, var(--surface)); }
.monthly-table tbody tr.has-oncall td:nth-child(6) { background: var(--info-bg); }
.monthly-table tbody tr.has-allowance td:last-child { background: var(--green-50); }
.monthly-table select.absence-r { color: var(--info-fg); background: var(--info-bg); }
.monthly-table select.absence-fe { color: var(--warning-fg); background: var(--warning-bg); }
.monthly-table select.absence-p { color: var(--info-fg); background: var(--info-bg); }
.monthly-table tbody input:focus, .monthly-table tbody select:focus { position: relative; z-index: var(--z-raised-1); border-color: var(--green-500); box-shadow: 0 0 0 3px rgb(16 185 129 / 15%); }
.monthly-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: .85rem; margin-top: 1rem; }
.monthly-workspace .monthly-table-wrap { display: flex; justify-content: center; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.monthly-stat-strip { position: sticky; top: calc(9.25rem + env(safe-area-inset-top)); align-self: start; display: grid; grid-template-columns: 1fr; gap: .45rem; }
.monthly-stat { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; padding: .65rem .8rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 1px 2px rgb(15 23 42 / 6%); }
.monthly-stat span, .monthly-stat small { color: var(--text-secondary); font-size: .7rem; }
.monthly-stat span { display: inline-flex; align-items: center; gap: .3rem; }
/* Chip icona tinta per voce: il riepilogo si legge a colpo d'occhio. */
.monthly-stat span .icon-xs { padding: .32rem; border-radius: .55rem; background: var(--green-100); color: var(--green-800); }
.stat-overtime span .icon-xs { background: var(--amber-100); color: var(--amber-700); }
.stat-oncall span .icon-xs { background: var(--blue-50); color: var(--blue-800); }
.stat-allowance span .icon-xs { background: var(--success-bg); color: var(--success-fg); }
.monthly-stat strong { grid-row: span 2; color: var(--green-800); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.monthly-stat small { grid-column: 1; }
.monthly-stat.stat-overtime { border-left: 3px solid var(--amber-500); }
.monthly-stat.stat-oncall { border-left: 3px solid var(--blue-500); }
.monthly-stat.stat-allowance { border-left: 3px solid var(--green-500); }
.monthly-count { display: inline-flex; min-width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; margin-left: .25rem; color: var(--green-800); background: var(--green-100); border-radius: 999px; font-size: .7rem; vertical-align: middle; }
/* Mese visibile nel titolo: pill che rispecchia i menu di navigazione. */
.monthly-month-label { display: inline-flex; align-items: center; margin-left: .6rem; padding: .2rem .7rem; color: var(--green-800); background: var(--green-100); border-radius: 999px; font-size: .85rem; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; }
.monthly-preview-content { max-width: 31rem; }
.monthly-preview-content .modal-body p + p { margin-top: .55rem; color: var(--text-secondary); }
.monthly-preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.monthly-switch { display: inline-flex; cursor: pointer; }
.monthly-switch input { position: absolute; opacity: 0; pointer-events: none; }
.monthly-switch span { position: relative; display: block; width: 2.1rem; height: 1.15rem; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--gray-200); transition: background .15s ease, border-color .15s ease; }
.monthly-switch span::after { position: absolute; top: .13rem; left: .14rem; width: .82rem; height: .82rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 20%); content: ''; transition: transform .15s ease; }
.monthly-switch input:checked + span { border-color: var(--green-600); background: var(--green-600); }
.monthly-switch input:checked + span::after { transform: translateX(.92rem); }
.monthly-switch input:focus-visible + span { outline: 3px solid rgb(16 185 129 / 25%); outline-offset: 2px; }
.monthly-table tfoot th, .monthly-table tfoot td { padding-top: .8rem; padding-bottom: .8rem; text-align: center; }
.monthly-table tfoot th:first-child { text-align: left; }
.monthly-details-section > .table-wrap {
  display: block;
  /* NON si centra la tabella dentro un contenitore che scorre: quando la
     tabella e' piu' larga del contenitore, centrandola la parte sinistra esce
     dall'area e non si recupera nemmeno scorrendo (con lo zoom del browser al
     150% il campo Data finiva fuori dallo schermo). Allineata a sinistra, la
     tabella si scorre come ci si aspetta: si vede l'inizio e si va a destra. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Il registro sta a tutta larghezza: non serve riservare spazio alla barra
   dei riepiloghi, che e' un blocco a se'. Prima qui c'era un padding-right di
   19rem che toglieva spazio proprio alla tabella. */
.monthly-details { width: auto; min-width: 73.5rem; table-layout: fixed; }
.monthly-details th:nth-child(1), .monthly-details td:nth-child(1) { width: 9rem; }
.monthly-details th:nth-child(2), .monthly-details td:nth-child(2) { width: 12rem; }
.monthly-details th:nth-child(3), .monthly-details td:nth-child(3) { width: 31.5rem; }
.monthly-details th:nth-child(4), .monthly-details td:nth-child(4) { width: 10rem; }
.monthly-details th:nth-child(5), .monthly-details td:nth-child(5) { width: 11rem; }
.monthly-details .detail-reason { width: 100%; min-width: 0; }
.monthly-details input:not(.detail-reason) { min-width: 8rem; }
.monthly-details tbody tr:nth-child(even) { background: var(--green-50); }
.monthly-details tbody tr:hover { background: var(--green-100); }
.detail-duration-stepper { display: flex; align-items: center; gap: .25rem; }
.detail-duration-stepper button { min-width: 2.2rem; min-height: 2.2rem; padding: .2rem .45rem; font-size: 1.1rem; line-height: 1; }
.monthly-details .detail-duration-stepper .detail-duration { min-width: 4.5rem; width: 4.5rem; text-align: center; }
.monthly-details input.is-invalid { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.monthly-details button + button { margin-left: .35rem; }
.monthly-mobile-only, .monthly-mobile-details-toggle { display: none; }
/* Tablet e schermi con lo zoom alto.
   Allinea Orari mensili al resto dell'app: la bacheca passa a colonna singola
   già a 1100px. Qui la soglia è piu' alta (1400px) di proposito: uno schermo
   da 1920 punti con lo zoom del browser al 150% equivale a 1280 punti, e in
   quella fascia la tabella non ci stava piu': il registro richiede 73.5rem
   (1176px) e nella griglia a due colonne ne aveva meno di 600. Il risultato
   era che il campo Data finiva fuori dallo schermo.
   Sotto questa soglia il registro prende tutta la larghezza e la barra dei
   riepiloghi va sotto, invece di rubare spazio alla tabella. */
@media (max-width: 1400px) {
  .monthly-workspace { grid-template-columns: 1fr; }
  .monthly-workspace .monthly-table-wrap { justify-content: stretch; overflow-x: hidden; max-width: 100%; }
  .monthly-stat-strip { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Su schermi stretti il registro non ha bisogno di scorrere: la tabella usa il
   100% della larghezza con gli input flessibili. Le colonne hanno larghezze
   dichiarate (in tutto 73.5rem, circa 1176px) che con `table-layout: fixed`
   verrebbero rispettate anche quando lo spazio e' meno: qui si torna a
   `auto`, cosi' la tabella si stringe invece di uscire dallo schermo. */
@media (max-width: 1200px) {
  .monthly-details-section > .table-wrap { overflow-x: auto; max-width: 100%; }
  .monthly-details { min-width: 0; width: 100%; table-layout: auto; }
  .monthly-details th:nth-child(1), .monthly-details td:nth-child(1) { width: 8.5rem; }
  .monthly-details th:nth-child(2), .monthly-details td:nth-child(2) { width: 10rem; }
  .monthly-details th:nth-child(4), .monthly-details td:nth-child(4) { width: 9rem; }
  .monthly-details th:nth-child(5), .monthly-details td:nth-child(5) { width: 9.5rem; }
  .monthly-details input:not(.detail-reason) { min-width: 0; }
  .monthly-table { max-width: 100%; }
  .monthly-table input[type="text"], .monthly-table input[type="number"], .monthly-table select { width: 100%; min-width: 0; max-width: 100%; }
}
@media (max-width: 768px) {
  .job-material-heading { align-items: stretch; flex-direction: column; }
  .job-material-row { align-items: flex-start; }
  .monthly-hero { display: block; }
  .monthly-hero-person { min-width: 0; align-items: flex-start; margin-top: 0.75rem; padding: .75rem 0 0; border-top: 1px solid var(--green-200); border-left: 0; }
  .monthly-workspace { grid-template-columns: 1fr; }
  .monthly-workspace .monthly-table-wrap { position: relative; z-index: var(--z-raised-1); overflow: visible; justify-content: flex-start; }
  .monthly-stat-strip { position: static; z-index: var(--z-base); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monthly-section { padding: .65rem; }
  .monthly-heading { align-items: flex-start; }
  .monthly-heading-title { width: 100%; }
  .monthly-title-row { justify-content: space-between; }
  .monthly-preview-actions > button { flex: 1 1 100%; }
  .monthly-actions { width: 100%; justify-content: flex-start; }
  .monthly-status-line { flex-wrap: wrap; }
  .monthly-dirty-state { width: 100%; margin-left: 0; }
  .calendar-toolbar { align-items: stretch; }
  .calendar-search, .calendar-operator-filter, .calendar-toolbar > .btn-secondary { flex: 1 1 100%; }
  .calendar-operator-filter select { width: 100%; }
  .calendar-day-event { grid-template-columns: 1fr; }
  .calendar-day-event .btn-link-reset { grid-row: auto; justify-self: start; }
  .cal-container.fc .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 5.25rem; }
  /* Mobile: menu completamente adattato alla larghezza, mai scroll orizzontale.
     Allinea il nav al resto dell'app (hamburger/full-width) */
  .monthly-page, .monthly-section, .monthly-workspace, .monthly-table-wrap, .monthly-details-section > .table-wrap { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .container.monthly-page { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); }
  .monthly-nav { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 100%; }
  .monthly-nav-fields { display: grid; grid-template-columns: 44px 44px 44px 1fr 1fr; gap: 0.4rem; align-items: end; width: 100%; max-width: 100%; }
  .monthly-nav-fields label { grid-column: 1 / -1; margin: 0; }
  .monthly-nav-fields label select { width: 100%; min-width: 0; max-width: 100%; }
  .monthly-nav-fields .btn-icon-sm { width: 44px; min-width: 44px; max-width: 44px; justify-content: center; padding-left: 0; padding-right: 0; }
  .monthly-nav-fields select.input-compact { width: 100%; min-width: 0; max-width: 100%; }
  .monthly-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; max-width: 100%; }
  .monthly-actions > * { min-width: 0; max-width: 100%; justify-content: center; box-sizing: border-box; }
  .monthly-actions > .monthly-send-button { grid-column: 1 / -1; }

   /* Il registro conserva la lettura tabellare: ogni giorno espone dettagli senza comprimere le colonne.
      Allargando la schermata la vista a schede resta fino a 768px (come il resto dell'app),
      evitando il salto brutale da schede a tabella compressa che avveniva a 700px. */
  .monthly-table-wrap { overflow: hidden; display: block; max-width: 100%; margin-inline: 0; padding-inline: 0; }
  .monthly-details-section > .table-wrap { overflow: hidden; display: block; padding-right: 0; margin-inline: 0; padding-inline: 0; max-width: 100%; }
  .monthly-table { display: block; min-width: 0; width: 100%; border: 0; border-radius: 0; background: transparent; }
  .monthly-table thead, .monthly-table tfoot { display: none; }
  .monthly-table tbody { display: grid; gap: .5rem; }
  .monthly-table tbody tr { display: grid; grid-template-columns: minmax(4.5rem, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .45rem; align-items: end; padding: .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 6%); scroll-margin-top: 9rem; }
  .monthly-table tbody th { grid-column: 1; padding: 0; border: 0; background: transparent; color: var(--green-800); text-align: left; }
  .monthly-table tbody td { display: none; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
  .monthly-table tbody td:nth-child(2), .monthly-table tbody td:nth-child(4), .monthly-table tbody td:nth-child(8) { display: grid; gap: .25rem; }
  .monthly-table tbody td:nth-child(2) { grid-column: 2; }
  .monthly-table tbody td:nth-child(4) { grid-column: 3; }
  .monthly-table tbody td:nth-child(2)::before, .monthly-table tbody td:nth-child(4)::before { color: var(--text-secondary); font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .monthly-table tbody td:nth-child(2)::before { content: 'Assenza'; }
  .monthly-table tbody td:nth-child(4)::before { content: 'Ore'; }
  .monthly-table tbody td:nth-child(8) { grid-column: 4; }
  .monthly-mobile-details-toggle { display: block; }
  .monthly-mobile-details-toggle button { display: inline-flex; min-height: 2.45rem; padding: .35rem .45rem; gap: .2rem; white-space: nowrap; }
  .monthly-table tbody input[type="text"], .monthly-table tbody input[type="number"], .monthly-table tbody select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.45rem; }
  .monthly-table tbody tr.is-mobile-expanded { background: color-mix(in srgb, var(--green-50) 55%, var(--surface)); }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(3), .monthly-table tbody tr.is-mobile-expanded td:nth-child(5), .monthly-table tbody tr.is-mobile-expanded td:nth-child(6), .monthly-table tbody tr.is-mobile-expanded td:nth-child(7) { display: grid; grid-column: span 2; gap: .25rem; padding-top: .45rem; border-top: 1px solid var(--border); }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(3)::before, .monthly-table tbody tr.is-mobile-expanded td:nth-child(5)::before, .monthly-table tbody tr.is-mobile-expanded td:nth-child(6)::before, .monthly-table tbody tr.is-mobile-expanded td:nth-child(7)::before { color: var(--text-secondary); font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(3)::before { content: 'Permessi'; }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(5)::before { content: 'Straordinario'; }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(6)::before { content: 'Reperibilità'; }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(7)::before { content: 'Gettone'; }
  .monthly-table tbody tr.is-mobile-expanded td:nth-child(7) .monthly-switch { min-height: 2.45rem; align-items: center; }

  /* Gli interventi restano in schede, indipendenti dalla tabella compatta del registro.
     Su viewport medie (es. 600-768px) le schede si allargano occupando tutta la larghezza
     senza lasciare spazi vuoti laterali. */
  .monthly-details { display: block; min-width: 0; width: 100%; border: 0; table-layout: auto; background: transparent; }
  .monthly-details thead { display: none; }
  .monthly-details tbody { display: grid; gap: .5rem; }
  .monthly-details tbody tr { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
  .monthly-details tbody td { display: grid; gap: .25rem; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
  .monthly-details tbody td::before { color: var(--text-secondary); font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .monthly-details tbody td:nth-child(1)::before { content: 'Data'; }
  .monthly-details tbody td:nth-child(2)::before { content: 'Tipo intervento'; }
  .monthly-details tbody td:nth-child(3)::before { content: 'Motivo'; }
  .monthly-details tbody td:nth-child(4)::before { content: 'Durata'; }
  .monthly-details tbody td:nth-child(5)::before { content: 'Azioni'; }
  .monthly-details input:not(.detail-reason), .monthly-details .detail-reason { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.45rem; }
  .monthly-details .detail-duration-stepper { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
  .monthly-details .detail-duration-stepper .detail-duration { min-width: 0; width: 100%; }
  .monthly-details .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .monthly-details .detail-actions button { width: 100%; margin: 0; }

  .section-heading { align-items: flex-start; gap: .5rem; }
}
/* Smartphone stretto: evita che i 2 menu mese/anno siano schiacciati in 80px */
@media (max-width: 480px) {
  .monthly-nav-fields { grid-template-columns: 44px 44px 44px 1fr; }
  .monthly-nav-fields select[name="mese_mese"] { grid-column: 4; }
  .monthly-nav-fields select[name="mese_anno"] { grid-column: 1 / -1; }
  .monthly-actions { grid-template-columns: 1fr; }
  /* Riepilogo mensile: 1 colonna su schermi stretti per evitare numeri troncati */
  .monthly-stat-strip { grid-template-columns: 1fr; }
  .monthly-stat strong { font-size: 1.05rem; }
}