/**
 * REPO: yoyohub-v2
 * MODULE: public/css/crtl-analisi.css
 * PURPOSE: Stile della sezione «Analisi Farm» (js/crtl-analisi.js): 5 numeri
 *          grandi cliccabili, filtri, due colonne affiancate («In gestione ·
 *          senza esito» / «Esitati» con chip), schede, pannello laterale di
 *          dettaglio + storico appeso a document.body. Pensata per capirsi a
 *          colpo d'occhio come la sezione KPI: stesso aspetto professionale
 *          e d'impatto, pagina bianca.
 * DEPENDENCIES: css/centro-rinnovi-tl.css (gettoni --crtl-*, .crtl-card,
 *          .crtl-btn*, .crtl-pill*, .crtl-skel, [hidden]).
 * EXPOSES: classi .crtl-an-* usate solo da js/crtl-analisi.js.
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: Sofia Pro MAI font-weight:600. ZERO arancione/ambra come colore
 *          di testo: --crtl-amber/--crtl-amber-soft solo come riempimento
 *          (vedi crtl-kpi.css, stesso vincolo). `.crtl-an-root [hidden]` E il
 *          pannello/overlay (appesi a document.body, fuori da .crtl-an-root)
 *          hanno `display:none!important`: regola `[hidden]` esplicita anche
 *          per loro qui sotto. Le due linguette mobile (#crtl-an-tabs) NON
 *          usano `hidden`: usano data-tab su #crtl-an-colonne + media query,
 *          cosi' non confliggono con la regola `[hidden]` del filtro
 *          colonna=sinistra/destra (quella resta valida a qualunque
 *          larghezza). Breakpoint sulla LARGHEZZA DELLA FINESTRA (come
 *          crtl-kpi.css): 1000px e 620px.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-04 [AI] Added: prima stesura (operaio D).
 */

.crtl-an-root [hidden]{display:none!important}
.crtl-an-overlay[hidden],.crtl-an-pannello[hidden]{display:none!important}

.crtl-an-root{display:flex; flex-direction:column; gap:20px}

/* ============================================ 1 · TESTATA + 5 NUMERI ===== */
.crtl-an-testata{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.crtl-an-titolo{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em}
.crtl-an-sotto{margin:2px 0 0; color:var(--crtl-ink-3); font-weight:500}

.crtl-an-numeri{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.crtl-an-num{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left;
  padding:18px 16px; border-radius:var(--crtl-radius); border:1px solid var(--crtl-line);
  background:#fff; cursor:pointer; font:inherit; color:var(--crtl-ink);
  box-shadow:var(--crtl-shadow); transition:border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.crtl-an-num:hover{border-color:var(--crtl-ink-3)}
.crtl-an-num:active{transform:translateY(1px)}
.crtl-an-num.is-attivo{border-color:#121212; background:var(--crtl-paper-2); box-shadow:inset 0 0 0 1.5px #121212}
.crtl-an-num-valore{font-size:40px; font-weight:200; line-height:1}
.crtl-an-num-eti{font-size:12.5px; font-weight:500; color:var(--crtl-ink-3)}
.crtl-an-num--verde .crtl-an-num-valore{color:var(--crtl-green)}
.crtl-an-num--rosso .crtl-an-num-valore{color:var(--crtl-red)}
.crtl-an-num--rosso.is-attivo{border-color:var(--crtl-red)}
.crtl-an-num--verde.is-attivo{border-color:var(--crtl-green)}

.crtl-an-num--myboard{cursor:default; gap:10px}
.crtl-an-num-eti--myboard{font-size:11.5px; font-weight:700; color:var(--crtl-ink-2); text-transform:uppercase; letter-spacing:.03em}
.crtl-an-num-myboard-righe{display:flex; gap:10px; width:100%}
.crtl-an-num-myboard-btn{
  flex:1; display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:8px 10px;
  border-radius:var(--crtl-radius-sm); border:1px solid var(--crtl-line); background:var(--crtl-paper-2);
  cursor:pointer; font:inherit; color:var(--crtl-ink); text-align:left; min-width:0;
}
.crtl-an-num-myboard-btn:hover{border-color:var(--crtl-ink-3)}
.crtl-an-num-myboard-btn.is-attivo{border-color:#121212; background:#fff; box-shadow:inset 0 0 0 1.5px #121212}
.crtl-an-num-myboard-btn .crtl-an-num-valore{font-size:24px}
.crtl-an-num-myboard-btn span:last-child{font-size:11px; font-weight:500; color:var(--crtl-ink-3)}

.crtl-an-assegnati-riga{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:var(--crtl-paper-2); border:1px solid var(--crtl-line); border-radius:var(--crtl-radius-sm); font-size:13px; color:var(--crtl-ink-2)}
.crtl-an-link-btn{border:none; background:transparent; color:var(--crtl-ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; padding:0}

/* ============================================ 2 · FILTRI + RIEPILOGO + LINGUETTE ===== */
.crtl-an-filtri{padding:16px 20px; display:flex; flex-direction:column; gap:12px}
.crtl-an-filtri-riga{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end}
.crtl-an-filtro{display:flex; flex-direction:column; gap:5px; min-width:160px}
.crtl-an-filtro--cerca{flex:1; min-width:220px}
.crtl-an-filtro-lbl{font-size:11.5px; font-weight:500; color:var(--crtl-ink-3)}
.crtl-an-filtro-select,.crtl-an-filtro-input{height:36px; border-radius:9px; border:1px solid var(--crtl-line-2); padding:0 10px; font-size:13px; background:#fff; font-family:inherit; width:100%}
.crtl-an-riepilogo-riga{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.crtl-an-riepilogo{margin:0; font-size:13px; color:var(--crtl-ink-2)}

.crtl-an-tabs{display:none; gap:8px}
.crtl-an-tab{flex:1; height:40px; border-radius:999px; border:1px solid var(--crtl-line-2); background:#fff; font:inherit; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--crtl-ink-2)}
.crtl-an-tab.is-attiva{background:#121212; color:#fff; border-color:#121212}
.crtl-an-tab.is-attiva .crtl-num{color:var(--crtl-accent)}

/* ============================================ 3 · COLONNE + CHIP + SCHEDE ===== */
.crtl-an-colonne{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.crtl-an-colonna{display:flex; flex-direction:column; gap:12px; min-width:0}
.crtl-an-colonna-titolo{margin:0; font-size:15px; font-weight:700; display:flex; align-items:baseline; gap:8px}
.crtl-an-colonna-conta{font-size:13px; font-weight:700; color:var(--crtl-ink-3); background:var(--crtl-paper-2); border-radius:999px; padding:1px 9px}

.crtl-an-chips{display:flex; gap:6px; flex-wrap:wrap}
.crtl-an-chip{height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--crtl-line-2); background:#fff; font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:var(--crtl-ink-2)}
.crtl-an-chip .crtl-num{font-weight:700; color:var(--crtl-ink-3)}
.crtl-an-chip.is-attivo{background:#121212; color:#fff; border-color:#121212}
.crtl-an-chip.is-attivo .crtl-num{color:var(--crtl-accent)}

.crtl-an-lista{display:flex; flex-direction:column; gap:10px}
.crtl-an-vuoto{margin:0; padding:28px 14px; text-align:center; color:var(--crtl-ink-3); font-weight:500; background:var(--crtl-paper-2); border-radius:var(--crtl-radius); border:1px dashed var(--crtl-line-2)}
.crtl-an-piu{align-self:center; margin-top:4px}

.crtl-an-card{
  display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:var(--crtl-radius-sm);
  border:1px solid var(--crtl-line); background:#fff; cursor:pointer; text-align:left; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease; font:inherit; color:var(--crtl-ink);
}
.crtl-an-card:hover{border-color:var(--crtl-ink-3); box-shadow:0 4px 14px -8px rgba(18,18,18,.12)}
.crtl-an-card:focus-visible{outline:2px solid var(--crtl-ink); outline-offset:2px}

.crtl-an-card-riga1{display:flex; align-items:center; justify-content:space-between; gap:8px}
.crtl-an-card-cliente{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crtl-an-card-riga2{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--crtl-ink-3)}
.crtl-an-card-auto{font-weight:500}

.crtl-an-card-riga3{display:flex; align-items:center; gap:8px; margin-top:2px}
.crtl-an-card-avatar{width:26px; height:26px; border-radius:50%; background:#121212; color:var(--crtl-accent); font-size:11px; font-weight:700; display:grid; place-items:center; flex:none}
.crtl-an-card-gestore{flex:1; min-width:0; font-size:12.5px; font-weight:500; color:var(--crtl-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crtl-an-card-preso{font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; flex:none}
.crtl-an-card-preso--neutro{background:var(--crtl-paper-2); color:var(--crtl-ink-2)}
.crtl-an-card-preso--giallo{background:var(--crtl-amber-soft); color:var(--crtl-ink)}
.crtl-an-card-preso--rosso{background:var(--crtl-red-soft); color:var(--crtl-red)}

.crtl-an-card-scaduto{font-size:11.5px; font-weight:700; color:var(--crtl-red); background:var(--crtl-red-soft); border-radius:8px; padding:4px 9px; margin:-2px -2px 2px}
.crtl-an-card-nota{margin:0; font-size:12.5px; color:var(--crtl-ink-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.crtl-an-card-riga4{font-size:11.5px; color:var(--crtl-ink-3)}
.crtl-an-card-richiamo{font-size:12px; color:var(--crtl-ink-2)}
.crtl-an-card-richiamo--rosso{color:var(--crtl-red); font-weight:700}
.crtl-an-card-myboard{font-size:12px; color:var(--crtl-blue); font-weight:500}
.crtl-an-card-finale{margin-top:2px}

/* ============================================ 4 · PANNELLO DI DETTAGLIO (document.body) ===== */
.crtl-an-overlay{position:fixed; inset:0; z-index:70; background:rgba(18,18,18,.38)}
.crtl-an-pannello{
  position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(440px,100vw); background:#fff;
  box-shadow:-18px 0 40px -18px rgba(0,0,0,.35); display:flex; flex-direction:column;
  animation:crtl-an-pannello .22s ease both; overflow:hidden;
}
@keyframes crtl-an-pannello{from{transform:translateX(100%)} to{transform:none}}
.crtl-an-pan-testata{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 18px 14px; border-bottom:1px solid var(--crtl-line)}
.crtl-an-pan-titolo{font-size:17px; font-weight:700; margin:0 0 3px}
.crtl-an-pan-sotto{font-size:12.5px; color:var(--crtl-ink-3); margin:0}
.crtl-an-pan-azioni-testata{display:flex; align-items:center; gap:4px; flex:none}
.crtl-an-pan-nav,.crtl-an-pan-chiudi{border:none; background:transparent; color:var(--crtl-ink-3); cursor:pointer; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:16px}
.crtl-an-pan-nav:hover,.crtl-an-pan-chiudi:hover{background:rgba(18,18,18,.07); color:var(--crtl-ink)}
.crtl-an-pan-corpo{flex:1; overflow:auto; padding:16px 18px 24px; display:flex; flex-direction:column; gap:18px}

.crtl-an-pan-campi{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0}
.crtl-an-pan-campo dt{font-size:11.5px; color:var(--crtl-ink-3); margin:0 0 2px}
.crtl-an-pan-campo dd{margin:0; font-size:13px; font-weight:500}

.crtl-an-pan-myboard{display:flex; flex-direction:column; gap:8px}
.crtl-an-pan-myboard-ids{display:flex; flex-direction:column; gap:6px}
.crtl-an-pan-myboard-id{display:flex; align-items:center; gap:8px; font-size:13px}
.crtl-an-pan-myboard-id code{background:var(--crtl-paper-2); border-radius:7px; padding:3px 8px; font-family:ui-monospace,monospace}
.crtl-an-pan-copia{border:1px solid var(--crtl-line-2); background:#fff; border-radius:7px; width:26px; height:26px; cursor:pointer; color:var(--crtl-ink-2)}
.crtl-an-pan-copia:hover{border-color:var(--crtl-ink-3); color:var(--crtl-ink)}
.crtl-an-pan-myboard-vuoto{margin:0; font-size:12.5px; color:var(--crtl-ink-3)}

.crtl-an-pan-blocco-titolo{font-size:11px; font-weight:700; color:var(--crtl-ink-3); text-transform:uppercase; letter-spacing:.03em; margin:0 0 9px}
.crtl-an-pan-storico{display:flex; flex-direction:column}
.crtl-an-storico-skel{display:flex; flex-direction:column; gap:8px}
.crtl-an-storico-errore{text-align:center; padding:16px; display:flex; flex-direction:column; gap:10px; align-items:center}
.crtl-an-storico-errore p{margin:0; color:var(--crtl-red); font-size:13px}
.crtl-an-storico-vuoto{margin:0; color:var(--crtl-ink-3); font-size:13px; padding:10px 0}
.crtl-an-storico-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.crtl-an-storico-voce{border:1px solid var(--crtl-line); border-radius:var(--crtl-radius-sm); padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.crtl-an-storico-voce-testa{display:flex; align-items:center; justify-content:space-between; gap:8px}
.crtl-an-storico-data{font-size:12px; font-weight:700; color:var(--crtl-ink-2)}
.crtl-an-storico-nota{margin:0; font-size:13px; color:var(--crtl-ink-2); line-height:1.4; word-break:break-word}
.crtl-an-storico-voce-piede{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--crtl-ink-3)}

/* ============================================ 5 · RESPONSIVE ===== */
@media (max-width:1000px){
  .crtl-an-numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crtl-an-tabs{display:flex}
  .crtl-an-colonne{grid-template-columns:1fr}
  #crtl-an-colonne[data-tab="sinistra"] #crtl-an-col-destra{display:none}
  #crtl-an-colonne[data-tab="destra"] #crtl-an-col-sinistra{display:none}
}
@media (max-width:620px){
  .crtl-an-numeri{grid-template-columns:1fr 1fr}
  .crtl-an-num{padding:14px 12px}
  .crtl-an-num-valore{font-size:30px}
  .crtl-an-filtri-riga{flex-direction:column; align-items:stretch}
  .crtl-an-filtro{min-width:0}
  .crtl-an-pannello{width:100vw}
  .crtl-an-pan-campi{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .crtl-an-pannello{animation:none}
}