/* ═══════════════════════════════════════════════════════════════
   area-task.css — Attività, la to-do del team. PR 10 del nuovo design.
   Qui: il modale Attività (#taskModalOverlay: filtri, voci, form nuova e
   modifica, tendina assegnatari), i badge delle attività (.task-badge,
   tabella della Riunione), lo storico note col form "Nuova Attività"
   dalla nota (.note-history-*, .note-entry*) e le carte del pannello
   Scadenze (.scad-*). Il markup lo generano js/modules/tasks.js e
   js/modules/tools.js (updateDeadlineBadge).
   Caricato dopo gli altri file di area e PRIMA di area-shell.css, che
   chiude la cascata col blocco prefers-reduced-motion: i selettori
   animati di qui (.task-modal-overlay, .task-item, .note-history-overlay)
   stanno anche là.
   Solo token: niente hex, niente !important, niente font-family, niente
   rem, testo mai sotto gli 11 px. Ogni superficie e ogni controllo
   dichiara fondo E testo: .fg input di style.css aveva il fondo #F8F8F6
   scritto a mano e in scuro darebbe testo chiaro su fondo chiaro.
   Mostra/nascondi con l'attributo hidden ([hidden] di base.css). Da
   telefono i campi stanno a 16 px e 44 di altezza per conto loro, senza
   contare sulla regola generale dei campi in coda a base.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Modale Attività: forma di prima (520 px, centrato), pelle nuova ── */
.task-modal-overlay{position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;background:var(--fc-scrim);animation:fcFadeIn .2s ease}
/* scroll-padding-top = altezza della testata ferma (chiusura 44 px + padding) più un respiro: scrollIntoView del form
   di modifica (tasks.js _renderTaskForm) lo allinea sotto la testata, non dietro */
.task-modal{width:95%;max-width:520px;max-height:85vh;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:calc(44px + 2 * var(--sp-1) + var(--sp-2));background:var(--fc-card);color:var(--fc-label);border-radius:var(--r);box-shadow:var(--fc-shadow)}
.task-modal-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);background:var(--fc-card);color:var(--fc-label);border-bottom:1px solid var(--fc-sep)}
.task-modal-header h3{min-width:0;overflow:hidden;font-size:17px;font-weight:600;line-height:22px;white-space:nowrap;text-overflow:ellipsis}
.task-modal-body{padding:var(--sp-4)}

/* ── Filtri in testa alla lista ── */
.task-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.task-filters-sp{flex:1}
.task-filter{min-height:36px;max-width:100%;padding:0 var(--sp-2);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);font:inherit;font-size:13px}
.task-filter:focus-visible{outline:2px solid var(--fc-accent);outline-offset:1px}
.task-empty{padding:var(--sp-6) var(--sp-4);text-align:center;font-size:13px;color:var(--fc-label2)}

/* ── Bottoni dell'area: secondario, primario, icona ── */
.task-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:36px;padding:0 var(--sp-4);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.task-btn-primary{background:var(--fc-accent-fill);color:var(--fc-on-accent);border-color:var(--fc-accent-fill)}
.task-btn:disabled{opacity:.5;cursor:default}
/* Dopo .task-remind di base.css (stessa specificità): nel modale il 🔔 prende la forma delle altre icone */
.task-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.task-btn:focus-visible,.task-icon-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:1px}

/* ── Voci: righe separate da una linea (prototipo .task), non riquadri ── */
.task-item{padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--fc-sep);transition:box-shadow .3s}
.task-item:last-child{border-bottom:0}
.task-item.completata{color:var(--fc-label2)}
.task-item.completata .task-item-title{text-decoration:line-through}
/* aperta da un link di notifica (openTasksHighlight): anello per la durata del toast */
.task-item.is-flash{border-radius:var(--rs);box-shadow:0 0 0 3px var(--fc-accent)}
.task-item-header{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.task-item-title{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:20px;overflow-wrap:anywhere}
/* priorità: pallino; la parola sta nei meta (semaforo, spec §4.5) */
.task-prio-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fc-rail)}
.task-prio-dot.alta{background:var(--fc-danger)}
.task-prio-dot.media{background:var(--fc-warn-fill)}
.task-prio-dot.bassa{background:var(--fc-info)}
.task-progress{flex:none;padding:1px var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--r-pill);font-size:11px;font-weight:700;line-height:16px;color:var(--fc-label2);white-space:nowrap;font-variant-numeric:tabular-nums}
.task-progress.done{border-color:var(--fc-accent);color:var(--fc-accent)}
.task-item-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);padding-left:var(--sp-4);font-size:12px;line-height:16px;color:var(--fc-label2)}
.task-op-link{font-weight:600;color:var(--fc-accent);text-decoration:none}
.task-op-addr{color:var(--fc-label2)}
/* scadenza superata: colore PIÙ la parola "⚠ scaduta" scritta da tasks.js */
.task-due.is-over{font-weight:700;color:var(--fc-danger)}
.task-done-at{color:var(--fc-ok)}
.task-forced{color:var(--fc-warn)}
.task-desc{flex-basis:100%;margin-top:2px;font-size:13px;line-height:18px;color:var(--fc-label)}
/* assegnatari: la propria riga è un <button>, quelle altrui uno <span> */
.task-ass-list{display:flex;flex-direction:column;flex-basis:100%;gap:2px}
.task-ass-row{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:var(--sp-1);font-size:13px;color:var(--fc-label)}
.task-ass-row.is-other{color:var(--fc-label2)}
button.task-ass-row{appearance:none;-webkit-appearance:none;width:100%;margin:0;border:0;border-radius:var(--rs);background:none;font:inherit;font-size:13px;text-align:left;cursor:pointer}
button.task-ass-row:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
/* la casella è quella della To-do della Home (area-home.css .h-chk) */
.task-chk,.task-as-check{display:grid;place-items:center;flex:none;width:18px;height:18px;border:2px solid var(--fc-rail);border-radius:6px;font-size:11px;line-height:1}
.task-chk.done,.task-as-opt.is-sel .task-as-check{background:var(--fc-accent-fill);border-color:var(--fc-accent-fill);color:var(--fc-on-accent)}
.task-ass-ts{font-size:11px;color:var(--fc-label2)}

/* ── Badge delle attività (tabella della Riunione, renderTaskBadges) ── */
.task-badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;line-height:16px;white-space:nowrap;cursor:pointer}
.task-badge.da_fare{background:var(--fc-warn-soft);color:var(--fc-warn)}
.task-badge.in_corso{background:var(--fc-info-soft);color:var(--fc-info)}
.task-badge.completata{background:var(--fc-accent-soft);color:var(--fc-accent)}
.task-badge.overdue{background:var(--fc-danger-soft);color:var(--fc-danger)}
.task-badge-none{font-size:11px;color:var(--fc-label2)}

/* ── Form nuova/modifica attività (anche quello dalla nota, Task 4) ── */
.task-form{margin-bottom:var(--sp-4);padding:var(--sp-4);background:var(--fc-bg);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--r)}
.task-form-title{margin-bottom:var(--sp-3);font-size:15px;font-weight:600}
.task-form-ctx{margin-bottom:var(--sp-3);font-size:12px;color:var(--fc-label2)}
.task-form .fg{margin-bottom:var(--sp-3)}
/* batte .fg label di base.css (era in style.css; maiuscoletto): (0,2,1) contro (0,1,1) */
.task-form .fg label{display:block;margin-bottom:var(--sp-1);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fc-label2)}
/* batte .fg input di base.css (era in style.css, col fondo #F8F8F6 scritto a mano): fondo E testo, sempre */
.task-form .fg input,.task-form .fg select,.task-form .fg textarea{width:100%;min-height:36px;padding:var(--sp-2) var(--sp-3);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);font:inherit;font-size:14px;outline:none}
/* batte .fg input:focus di base.css (era in style.css, col fondo #fff): (0,3,1) */
.task-form .fg input:focus,.task-form .fg select:focus,.task-form .fg textarea:focus{background:var(--fc-card);border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
/* .fr in riga che va a capo: due o tre campi, secondo il form */
.task-form .fr{display:flex;flex-wrap:wrap;gap:0 var(--sp-3)}
.task-form .fr .fg{flex:1 1 160px;min-width:0}
.task-form-acts{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-1)}

/* ── Tendina assegnatari (form del modale e form dalla nota) ── */
.task-as{position:relative}
.task-as-field{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);min-height:36px;padding:var(--sp-1) var(--sp-2);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);cursor:pointer}
.task-as-ph{font-size:13px;color:var(--fc-label2)}
.task-as-chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:12px;font-weight:600}
.task-as-chip-x{padding:0 2px;font-size:11px;cursor:pointer}
.task-as-dd{position:absolute;top:100%;left:0;right:0;z-index:2;max-height:180px;overflow-y:auto;background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:0 0 var(--rs) var(--rs);box-shadow:var(--fc-shadow)}
.task-as-opt{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:var(--sp-1) var(--sp-3);border-bottom:1px solid var(--fc-sep);font-size:13px;cursor:pointer}
.task-as-opt:last-child{border-bottom:0}
.task-as-opt.is-sel{background:var(--fc-accent-soft);color:var(--fc-label)}

@media (hover:hover){
  .task-btn:not(.task-btn-primary):not(:disabled):hover{background:var(--fc-fill)}
  button.task-icon-btn:hover{background:var(--fc-fill);color:var(--fc-label)}
  /* :not(.is-sel): a pari specificità l'hover, che viene dopo, spegnerebbe il verde della scelta */
  button.task-ass-row:hover,.task-as-opt:not(.is-sel):hover{background:var(--fc-bg)}
  .task-op-link:hover{text-decoration:underline}
}
@media (hover:none){
  .task-btn,.task-filter,.task-as-field,.task-as-opt,.task-ass-row{min-height:44px}
  .task-icon-btn{width:44px;height:44px}
  /* la ✕ del chip sta dentro un campo alto 44: 32×32 è il massimo che ci entra */
  .task-as-chip-x{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
}
/* Da telefono: foglio dal basso (spec §4.5), filtri in due colonne, testata della voce su due righe */
@media screen and (max-width:768px){
  .task-modal-overlay{align-items:flex-end;overscroll-behavior:contain}
  .task-modal{width:100%;max-width:none;max-height:calc(100vh - var(--fc-safe-top) - var(--sp-3));max-height:calc(100dvh - var(--fc-safe-top) - var(--sp-3));border-radius:var(--r) var(--r) 0 0}
  .task-modal-body{padding-bottom:calc(var(--sp-4) + var(--fc-safe-bottom))}
  .task-filter{flex:1 1 140px;font-size:16px}
  .task-filters-sp{display:none}
  .task-filters .task-btn-primary{flex:1 1 100%}
  .task-item-header{flex-wrap:wrap}
  .task-item-title{flex:1 1 calc(100% - var(--sp-4))}
  .task-progress{margin-right:auto}
  .task-form .fg input,.task-form .fg select,.task-form .fg textarea{min-height:44px;font-size:16px}
}

/* ── Storico note della Riunione (openNoteHistory) e "Nuova Attività" dalla nota ──
   Stessa pelle del modale: velo --fc-scrim, riquadro --fc-card, testata chiara con
   la chiusura .btn-icon, bottoni .task-btn; il form dalla nota è il .task-form di sopra.
   Entra con fcFadeIn (area-shell.css): il vecchio @keyframes fadeIn è sparito con lui. */
.note-history-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--fc-scrim);animation:fcFadeIn .2s ease}
.note-history-box{display:flex;flex-direction:column;width:min(520px,92vw);max-height:80vh;max-height:80dvh;overflow:hidden;background:var(--fc-card);color:var(--fc-label);border-radius:var(--r);box-shadow:var(--fc-shadow)}
.note-history-header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);border-bottom:1px solid var(--fc-sep);font-size:15px;font-weight:600;line-height:20px}
.note-history-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--sp-3) var(--sp-4)}
.note-history-empty{padding:var(--sp-6) 0;text-align:center;font-size:13px;color:var(--fc-label2)}
/* fondo --fc-bg, non --fc-fill: la data e i testi secondari (--fc-label2) su --fc-fill non reggono il 4,5:1 */
.note-entry{display:flex;align-items:flex-start;gap:var(--sp-2);margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);background:var(--fc-bg);border-left:3px solid var(--fc-accent-fill);border-radius:0 var(--rs) var(--rs) 0;font-size:13px;line-height:18px}
.note-entry-main{flex:1;min-width:0}
.note-entry-date{margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-accent)}
.note-entry-text{color:var(--fc-label);overflow-wrap:anywhere}
.note-entry-acts{display:flex;flex:none;flex-direction:column;gap:2px}
.note-entry-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font:inherit;font-size:14px;line-height:1;cursor:pointer}
.note-entry-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.note-edit-ta{width:100%;min-height:60px;padding:var(--sp-2);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-accent);border-radius:var(--rs);font:inherit;font-size:14px;resize:vertical;outline:none}
.note-edit-acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
/* il form dalla nota sta fra la lista e il piede: se è più alto dello spazio, scorre lui */
#noteHistoryTaskForm{flex:0 1 auto;min-height:0;overflow-y:auto;padding:var(--sp-3) var(--sp-4) 0}
#noteHistoryTaskForm .task-form{margin-bottom:var(--sp-3)}
/* …e dentro il form che scorre la tendina assoluta finirebbe sotto il suo bordo: qui sta nel
   flusso, apre spazio sotto i chip e, se non basta, scorre il form (decisione 19) */
#noteHistoryTaskForm .task-as-dd{position:static;margin-top:var(--sp-1);border-radius:var(--rs);box-shadow:none}
.note-history-footer{display:flex;flex:none;align-items:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--fc-sep)}
.note-history-footer textarea{flex:1;min-width:0;min-height:36px;padding:var(--sp-2);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);font:inherit;font-size:14px;resize:none;outline:none}
.note-history-footer textarea:focus,.note-edit-ta:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}

@media (hover:hover){
  button.note-entry-btn:hover{background:var(--fc-card);color:var(--fc-accent)}
  button.note-entry-btn.is-danger:hover{color:var(--fc-danger)}
}
@media (hover:none){
  .note-entry-btn{width:44px;height:44px}
}
/* Da telefono: foglio dal basso come il modale (decisione 4) */
@media screen and (max-width:768px){
  .note-history-overlay{align-items:flex-end}
  .note-history-box{width:100%;max-height:calc(100vh - var(--fc-safe-top) - var(--sp-3));max-height:calc(100dvh - var(--fc-safe-top) - var(--sp-3));border-radius:var(--r) var(--r) 0 0}
  .note-history-footer{padding-bottom:calc(var(--sp-3) + var(--fc-safe-bottom))}
  .note-history-footer textarea,.note-edit-ta{min-height:44px;font-size:16px}
}

/* ── Pannello Scadenze della testata (#scadenzePanelBody, tools.js updateDeadlineBadge) ──
   La carta è neutra; la gravità (data-sev) colora la barra di 3 px a sinistra e il badge
   con la parola, sulle coppie morbide dei token. Il pannello (.hdr-panel, testata, toggle)
   resta di area-shell.css. Prima: bianco su colore pieno, in scuro 2,6:1 su --fc-danger. */
.scad-empty{padding:var(--sp-5) var(--sp-3);text-align:center;font-size:13px;color:var(--fc-label2)}
.scad-bar{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding-bottom:var(--sp-2)}
.scad-bar-btn{min-height:28px;padding:0 var(--sp-3);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--r-pill);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.scad-bar-btn.is-danger{border-color:var(--fc-danger);color:var(--fc-danger)}
.scad-bar-btn.is-info{border-color:var(--fc-info);color:var(--fc-info)}
.scad-item{position:relative;margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);overflow:hidden}
.scad-item::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--fc-rail)}
.scad-item[data-sev="overdue"]::before{background:var(--fc-danger)}
.scad-item[data-sev="urgent1"]::before,.scad-item[data-sev="urgent3"]::before{background:var(--fc-warn-fill)}
.scad-item[data-sev="upcoming"]::before{background:var(--fc-info)}
.scad-item.is-dismissed{opacity:.5}
.scad-row{display:flex;align-items:center;gap:var(--sp-2)}
.scad-badge{flex:none;padding:1px var(--sp-2);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;line-height:16px;letter-spacing:.02em}
.scad-item[data-sev="overdue"] .scad-badge{background:var(--fc-danger-soft);color:var(--fc-danger)}
.scad-item[data-sev="urgent1"] .scad-badge,.scad-item[data-sev="urgent3"] .scad-badge{background:var(--fc-warn-soft);color:var(--fc-warn)}
.scad-item[data-sev="upcoming"] .scad-badge{background:var(--fc-info-soft);color:var(--fc-info)}
.scad-label{flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer} /* <button>: raggiungibile da tastiera (review xhigh #362) */
.scad-label:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px;border-radius:2px}
.scad-when{flex:none;font-size:12px;font-weight:600;color:var(--fc-label2)}
.scad-item[data-sev="overdue"] .scad-when{color:var(--fc-danger)}
.scad-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font:inherit;font-size:14px;line-height:1;cursor:pointer}
.scad-x:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.scad-addr,.scad-date{margin-top:2px;font-size:12px;color:var(--fc-label2)}
.scad-addr{cursor:pointer}

@media (hover:hover){
  .scad-label:hover,.scad-addr:hover{text-decoration:underline}
  .scad-x:hover{color:var(--fc-label)}
}
@media (hover:none){
  .scad-bar-btn{min-height:44px}
  .scad-x{width:44px;height:44px}
}