/* ═══════════════════════════════════════════════════════════════
   area-home.css — Home (#pan-home). PR 3 del nuovo design.
   Caricato dopo base.css e stampa.css e PRIMA di area-shell.css (che chiude la
   cascata col blocco prefers-reduced-motion). Solo token: niente hex,
   niente !important, niente font-family, niente --h-*. Testo mai
   sotto gli 11 px. Il markup lo genera js/modules/home.js; i valori
   che vengono dai dati arrivano come variabili (--h, --st).
   ═══════════════════════════════════════════════════════════════ */
#pan-home{padding:var(--sp-4) var(--sp-5) var(--sp-3)}
#pan-home .h-loading{padding:var(--sp-5);color:var(--fc-label2)}

/* ── Saluto e interruttore tema (dietro __FC_TEMA_SCURO) ── */
#pan-home .h-greeting{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-1)}
#pan-home .h-hello{font-size:24px;font-weight:700;letter-spacing:-.3px;color:var(--fc-accent)}
#pan-home .h-hello em{font-style:normal;color:var(--fc-ok)}
#pan-home .h-date{font-size:13px;color:var(--fc-label2);text-transform:capitalize}
#pan-home .h-theme{display:flex;align-self:center;gap:2px;height:48px;margin-left:auto;padding:2px;border-radius:11px;background:var(--fc-fill)}
#pan-home .h-theme-btn{flex:1;min-width:64px;height:44px;padding:0 var(--sp-3);border:0;border-radius:9px;background:none;color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#pan-home .h-theme-btn[aria-pressed="true"]{background:var(--fc-card);box-shadow:0 1px 3px var(--fc-sep)}
#pan-home .h-theme-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}

/* ── KPI ── */
#pan-home .h-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
#pan-home .h-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r)}
#pan-home .h-kpi-n{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--fc-accent);font-variant-numeric:tabular-nums}
#pan-home .h-kpi-n.alert{color:var(--fc-danger)}
#pan-home .h-kpi-l{font-size:12px;font-weight:600;color:var(--fc-label2)}

/* ── Priorità ── */
#pan-home .h-prio-bar{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--fc-card);border:1px solid var(--fc-sep);border-left:5px solid var(--fc-warn-fill);border-radius:var(--r)}
#pan-home .h-prio-h{margin-bottom:var(--sp-2);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--fc-label2)}
#pan-home .h-prio-h b{color:var(--fc-label)}
#pan-home .h-prio-items{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
#pan-home .h-pchip{display:flex;align-items:center;gap:7px;padding:7px var(--sp-3);border-radius:var(--rs);background:var(--fc-bg);font-size:13px;font-weight:600;cursor:pointer}
#pan-home .h-pchip.danger{background:var(--fc-danger-soft);color:var(--fc-danger)}
#pan-home .h-pchip.warn{background:var(--fc-warn-soft);color:var(--fc-warn)}

/* ── Funnel ── */
#pan-home .h-funnel{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:var(--sp-3)}
#pan-home .h-fl{margin-right:var(--sp-1);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--fc-label2)}
#pan-home .h-fstage{display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r-pill);font-size:12px}
#pan-home .h-fstage b{font-weight:700;color:var(--fc-accent)}
#pan-home .h-fstage span{color:var(--fc-label2)}

/* ── Profitto (analista) ── */
#pan-home .h-profit-band{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--fc-card);border:1px solid var(--fc-sep);border-left:5px solid var(--fc-ok);border-radius:var(--r)}
#pan-home .h-pb-stat{min-width:160px}
#pan-home .h-pb-l{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--fc-label2)}
#pan-home .h-pb-n{margin-top:2px;font-size:27px;font-weight:700;letter-spacing:-.5px;color:var(--fc-accent);font-variant-numeric:tabular-nums}
#pan-home .h-pb-n.proj{color:var(--fc-ok)}
#pan-home .h-pb-s{margin-top:2px;font-size:12px;color:var(--fc-label2)}

/* ── Finanza (direzione) ── */
#pan-home .h-fin-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
#pan-home .h-fin-card .h-fin-body{padding:6px var(--sp-4) var(--sp-4)}
#pan-home .h-fin-card .h-pf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px}
#pan-home .h-fin-card .h-pb-n{font-size:23px}
#pan-home .h-cf-chart{display:flex;align-items:flex-end;gap:9px;height:74px;margin:2px 0 var(--sp-2)}
#pan-home .h-cf-m{display:flex;flex:1;flex-direction:column;align-items:center;gap:3px}
#pan-home .h-cf-bars{display:flex;align-items:flex-end;gap:3px;height:56px}
#pan-home .h-cf-out,#pan-home .h-cf-in{width:10px;min-height:3px;height:var(--h,3px);border-radius:3px 3px 0 0}
#pan-home .h-cf-out{background:var(--fc-rail)}
#pan-home .h-cf-in{background:var(--fc-accent-fill)}
body.theme-dark #pan-home .h-cf-in{background:var(--fc-accent)}
#pan-home .h-cf-ml{font-size:11px;font-weight:600;color:var(--fc-label2)}
#pan-home .h-cf-sum{font-size:11px;line-height:1.8;color:var(--fc-label2)}
#pan-home .h-cf-leg{padding:1px 6px;border-radius:5px;font-weight:700}
#pan-home .h-cf-leg.out{background:var(--fc-fill);color:var(--fc-label)}
#pan-home .h-cf-leg.in{background:var(--fc-accent-soft);color:var(--fc-accent)}

/* ── Griglie ── */
#pan-home .h-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-4);margin-top:var(--sp-4)}
/* 2026-09-22 (#290): To-do a tutta riga, Email e Agenda sotto su due colonne.
   Sotto gli 860px la griglia e' gia' a una colonna, grid-column 1/-1 non cambia niente. */
#pan-home .h-grid-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
#pan-home #home-todo-card{grid-column:1/-1}

/* ── Card ── */
#pan-home .h-card{display:flex;flex-direction:column;overflow:hidden;background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r)}
#pan-home .h-card-h{display:flex;align-items:center;gap:9px;padding:var(--sp-4) var(--sp-4) 11px}
#pan-home .h-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--fc-accent-soft);font-size:15px}
#pan-home .h-card-h h2{flex:1;margin:0;font-size:15px;font-weight:700}
#pan-home .h-count{padding:3px 9px;border-radius:var(--r-pill);background:var(--fc-bg);font-size:12px;font-weight:600;color:var(--fc-label2)}

/* ── Liste ── */
#pan-home .h-list{padding:2px var(--sp-2) 10px}
#pan-home .h-item{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;cursor:pointer}
#pan-home .h-item:hover{background:var(--fc-bg)}
#pan-home .h-item+.h-item{border-top:1px solid var(--fc-sep)}
#pan-home .h-empty{padding:18px;text-align:center;font-size:13px;color:var(--fc-label2)}
/* .h-more e' un <button> (review #290, tastiera): reset dei default del bottone,
   poi lo stesso aspetto del div di prima. */
#pan-home .h-more{display:block;width:100%;appearance:none;-webkit-appearance:none;border:0;border-top:1px solid var(--fc-sep);background:none;font:inherit;padding:9px;text-align:center;font-size:12px;font-weight:700;color:var(--fc-accent);cursor:pointer;user-select:none}
#pan-home .h-more:hover{background:var(--fc-bg)}

/* ── Badge di stato: pallino del colore dello stato (--st, spec 5.1 caso 2) più parola in --fc-label. Era testo colorato con --st: il verde chiaro su bianco valeva 1,66:1 (decisione 10 della PR 4). ── */
#pan-home .h-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
#pan-home .h-badge::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--st,var(--fc-rail))}
#pan-home .h-bcol{display:flex;align-items:center;flex:none;width:120px}

/* ── Voci ── */
#pan-home .h-main{flex:1;min-width:0}
#pan-home .h-ttl{overflow:hidden;font-size:13.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
#pan-home .h-sub{margin-top:1px;font-size:12px;color:var(--fc-label2)}
/* riga "codice · indirizzo" della to-do: una riga sola, come il titolo (#290) */
#pan-home .h-op{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pan-home .h-right{text-align:right;font-size:12px;color:var(--fc-label2);white-space:nowrap}
#pan-home .h-gprog{font-size:11px;font-weight:700;color:var(--fc-accent)}
#pan-home .h-gprog.warn{color:var(--fc-warn)}
#pan-home .h-due{font-weight:700}
#pan-home .h-due.over{color:var(--fc-danger)}
#pan-home .h-due.soon{color:var(--fc-warn)}

/* ── To-do: la spunta è un <button> per chi è assegnatario, uno <span> per gli
   altri; il reset del bottone stava inline in home.js e ora sta qui ── */
#pan-home .h-chk{display:grid;place-items:center;flex:none;width:18px;height:18px;border:2px solid var(--fc-rail);border-radius:6px;font-size:11px;cursor:pointer}
#pan-home button.h-chk{appearance:none;-webkit-appearance:none;padding:0;margin:0;background:none;color:inherit;font:inherit;font-size:11px}
#pan-home .h-chk.done{background:var(--fc-accent-fill);border-color:var(--fc-accent-fill);color:var(--fc-on-accent)}
#pan-home .h-item.waiting{opacity:.55}
#pan-home .h-waiting{margin-top:2px;font-size:11px;color:var(--fc-label2)}
#pan-home .h-prog{margin-right:3px;font-size:11px;font-weight:700;color:var(--fc-label2)}

/* ── Email, agenda, priorità ── */
#pan-home .h-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:13px;font-weight:700}
#pan-home .h-item.unread .h-ttl{font-weight:700}
#pan-home .h-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--fc-ok)}
#pan-home .h-tm{flex:none;width:46px;text-align:center;font-size:12px;font-weight:700;color:var(--fc-accent)}
#pan-home .h-prio{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;vertical-align:middle}
#pan-home .h-p-alta{background:var(--fc-danger)}
#pan-home .h-p-media{background:var(--fc-warn-fill)}
#pan-home .h-p-bassa{background:var(--fc-ok)}

/* ── Larghezze ── */
@media screen and (max-width:860px){
  #pan-home .h-grid,#pan-home .h-grid-row2,#pan-home .h-fin-row{grid-template-columns:1fr}
  #pan-home .h-kpis{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:768px){
  #pan-home{padding:var(--sp-3)}
  #pan-home .h-greeting{flex-wrap:wrap;gap:var(--sp-1)}
  #pan-home .h-theme{width:100%;margin:var(--sp-2) 0 0}
  #pan-home .h-hello{font-size:20px}
  #pan-home .h-profit-band{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
}