/* dashboard/css/32-impostazioni.css — estratto da app.css (2026-07, split senza build). */
/* Impostazioni: due gruppi DICHIARATI (sede vs account) — spec avvisi §6.1.
   .imp-group-ttl e' un livello sopra .section-title (che resta per le
   sotto-sezioni Operativita'/Sicurezza/Profilo dentro il gruppo sede): risponde
   a "questa cosa vale per la sede o per me?" prima di elencare le card. */
.imp-group + .imp-group { border-top: 1px solid var(--line); margin-top: 8px; }
.imp-group-ttl { margin: 0; padding: 20px var(--page-pad-x) 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.imp-group-sub { margin: 0; padding: 4px var(--page-pad-x) 0; font-size: 13px; color: var(--ink-3); }
.imp-group-note { margin: 12px var(--page-pad-x) 0; }
/* Impostazioni · sezioni collassabili (riordino semantico 2026-07-17).
   Stesso pattern card di .reservations-disclosure ("Mostra prenotazioni",
   scelta Andrea): card bianca, titolo bold, marker +/× a destra. Il
   .list-group interno si appiattisce (la card è una sola). Stato open/chiuso
   persistito per sezione in localStorage da app.js (imp-acc:<data-acc>). */
.imp-acc { margin: 12px 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.imp-acc > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); }
.imp-acc > summary::-webkit-details-marker { display: none; }
.imp-acc > summary::marker { display: none; }
.imp-acc > summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-3); margin-left: auto; transition: color 120ms ease; }
.imp-acc[open] > summary::after { content: '\00d7'; font-size: 24px; }
.imp-acc > summary:hover::after { color: var(--brand); }
.imp-acc-ttl { font-size: 15px; font-weight: 700; }
.imp-acc-sub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.imp-acc > summary .pill { text-transform: none; letter-spacing: 0; flex-shrink: 0; }
.imp-acc .list-group { margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }

/* Modal "I miei avvisi": MATRICE eventi x canali (righe = eventi, colonne =
   Push | Email, checkbox indipendenti — pattern GitHub/Linear). Ogni riga e'
   un <form> a se' con auto-save (hx-trigger="change"); head e righe
   condividono lo stesso grid-template cosi' le colonne restano allineate
   anche se il titolo "Report" le interrompe. Il selettore sedi per-riga
   (2+ sedi entitled, §6.2) e' nascosto di default e appare solo con
   "alcune sedi" (classe .is-some, toggle inline sul checkbox all_labs). */
.avvisi-mx-head, .avvisi-mx-row { display: grid; grid-template-columns: 1fr 52px 52px; align-items: center; }
.avvisi-mx-head { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.avvisi-mx-col { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); text-align: center; }
.avvisi-mx-lbl { font-size: 14px; color: var(--ink); padding: 6px 0; }
.avvisi-mx-desc { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
/* Cella = tutta l'area cliccabile (touch target >= 44px, Apple HIG). */
.avvisi-mx-cell { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.avvisi-mx-cell input { width: 18px; height: 18px; accent-color: var(--brand); cursor: inherit; }
.avvisi-mx-cell.is-off { cursor: default; opacity: 0.35; }
.avvisi-row { border-bottom: 1px solid var(--line); }
.avvisi-row:last-of-type { border-bottom: none; }
.avvisi-scope { margin: 0 0 10px; }
.avvisi-scope-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.avvisi-scope-labs { display: none; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; padding-left: 2px; }
.avvisi-scope.is-some .avvisi-scope-labs { display: flex; }
.avvisi-scope-labs label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); cursor: pointer; }


/* ===== Modali Detersivi / Dispenser: lista prodotti (redesign 2026-08-01) =====
   Via la tabella multi-colonna (su mobile 4 colonne non stanno, feedback
   Andrea): riga-prodotto con nome+dettagli a sinistra e controllo a destra.
   Detersivi: i campi prezzo/ml compaiono SOLO da attivo (13 prodotti x 3
   controlli sempre visibili = rumore). Dispenser: solo prezzo, sempre. */
.prod-list { display: flex; flex-direction: column; margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.prod-row { border-bottom: 1px solid var(--line); }
.prod-row:last-child { border-bottom: 0; }
.prod-row-main { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 44px; }
.prod-row-main .body { flex: 1; min-width: 0; }
.prod-row-main .ttl { font-size: 14px; font-weight: 700; }
.prod-row-main .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
/* Tap target >=44px: la label ingloba checkbox + testo "In uso". */
.prod-row-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.prod-row-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); cursor: pointer; }
/* Campi del prodotto attivo: label sopra, larghezza proporzionata al dato
   (form-design R1/R4); restano affiancati anche su mobile (entrambi compatti). */
.prod-row-fields { display: none; gap: 14px; padding: 0 14px 12px; }
.prod-row.is-active .prod-row-fields { display: flex; flex-wrap: wrap; }
.prod-row-fields .fld > label { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.prod-list .numfield { display: inline-flex; align-items: center; gap: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 44px; cursor: text; transition: border-color 120ms ease, background 120ms ease; }
.prod-list .numfield:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.prod-list .numfield input { border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0; font-weight: 700; font-size: 16px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; width: 4.5rem; }
.prod-list .numfield-suffix { color: var(--ink-3); font-size: 13px; font-weight: 700; flex-shrink: 0; }
/* Dispenser: prezzo inline a destra della riga, sempre visibile. */
.prod-row-price { flex-shrink: 0; }