/* Talenta — vista Quadranti di Clio (2026-08-25). Prefisso classi: qd- */

.qd-testata{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.qd-testata h1{margin:0}
.qd-piano{color:var(--muted,#666);font-size:.92em}
.qd-bottoni{margin-left:auto;display:flex;gap:8px}

.qd-griglia{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.qd-quadrante{border:1px solid var(--bordo,#ddd);border-radius:12px;padding:10px 12px;
  background:var(--card,#fff);min-height:130px;display:flex;flex-direction:column}
.qd-quadrante header{display:flex;align-items:center;gap:8px;font-size:1.02em}
.qd-conta{margin-left:auto;background:rgba(128,128,128,.15);border-radius:10px;
  padding:1px 9px;font-size:.85em}
.qd-sotto{color:var(--muted,#777);font-size:.8em;margin:2px 0 8px}
/* dentro il quadrante si scorre: arriveranno molte attività (Matteo, 25/08) */
.qd-corpo{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:52vh;
  overscroll-behavior:contain;scrollbar-width:thin}
.qd-vuoto{color:var(--muted,#999);font-size:.85em;font-style:italic;padding:8px 0}

/* telefono e tablet: un quadrante = una schermata (quasi) intera e fissa, ci si
   entra col dito e si scorre lì dentro; le schede si TOCCANO (pannello), non si
   trascinano — il drag resta al desktop (pointer fine) */
@media (max-width:820px){
  .qd-griglia{grid-template-columns:1fr}
  .qd-quadrante{height:76vh;flex:none;scroll-margin-top:8px}
  .qd-corpo{max-height:none}
  .qd-testo{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

.qd-q1{border-top:3px solid #d93025}
.qd-q2{border-top:3px solid #1a73e8}
.qd-q3{border-top:3px solid #e8710a}
.qd-q4{border-top:3px solid #9aa0a6}

.qd-carta{border:1px solid var(--bordo,#e2e2e2);border-radius:9px;padding:7px 9px;
  background:var(--sfondo,#fafafa);cursor:grab}
@media (pointer:fine){.qd-carta{touch-action:none}}   /* col dito si scorre, col mouse si trascina */
.qd-carta:active{cursor:grabbing}
.qd-carta.qd-bloccata{cursor:default;opacity:.72}
.qd-testo{font-size:.92em;line-height:1.25}
.qd-riga{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.qd-lista{color:var(--muted,#888);font-size:.75em}
.qd-chip{font-size:.72em;border-radius:8px;padding:0 7px;background:rgba(128,128,128,.14)}
.qd-chip.qd-scad{background:rgba(232,113,10,.16)}
.qd-chip.qd-oggi{background:rgba(251,188,5,.25)}
.qd-chip.qd-fuori{background:rgba(26,115,232,.14)}
.qd-chip.qd-star{background:rgba(217,48,37,.14)}
.qd-nota{color:var(--muted,#888);font-size:.8em;margin-top:12px}

/* bottoni Battle Plan sulle schede (GG · ST · MM) */
.qd-bp-riga{margin-left:auto;display:flex;gap:4px}
.qd-bp{border:1px solid var(--bordo,#ccc);background:transparent;color:var(--muted,#777);
  border-radius:7px;font-size:.7em;font-weight:700;padding:1px 6px;cursor:pointer;line-height:1.6}
.qd-bp:hover{color:var(--fg,#222);border-color:var(--muted,#888)}
.qd-bp.on{background:var(--okbg,#e6f4ea);color:var(--ok,#188038);border-color:var(--ok,#188038)}

/* pannello della scheda: tocco su telefono/tablet, click su desktop */
#qd-pannello .qd-sfondo{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.45)}
.qd-scheda{position:fixed;z-index:131;left:50%;transform:translateX(-50%);
  bottom:0;width:min(560px,100vw);max-height:82vh;overflow-y:auto;
  background:var(--card,#fff);border:1px solid var(--bordo,#ddd);border-radius:14px 14px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
@media (min-width:821px){.qd-scheda{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:14px}}
.qd-scheda-testo{font-size:1.02em;line-height:1.35;overflow-wrap:anywhere}
.qd-scheda-motivo{color:var(--muted,#777);font-size:.85em;font-style:italic}
.qd-scheda-tit{font-size:.78em;font-weight:700;color:var(--muted,#888);
  text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.qd-scheda-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qd-qbtn{border:1px solid var(--bordo,#ccc);background:transparent;border-radius:9px;
  padding:8px 4px;font-size:.9em;cursor:pointer;color:var(--fg,#222)}
.qd-qbtn.on{font-weight:800;cursor:default}
.qd-qbtn.qd-bq1.on{background:rgba(217,48,37,.12);border-color:#d93025}
.qd-qbtn.qd-bq2.on{background:rgba(26,115,232,.12);border-color:#1a73e8}
.qd-qbtn.qd-bq3.on{background:rgba(232,113,10,.12);border-color:#e8710a}
.qd-qbtn.qd-bq4.on{background:rgba(154,160,166,.16);border-color:#9aa0a6}
.qd-scheda-bp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.qd-bpbtn{border:1px solid var(--bordo,#ccc);background:transparent;border-radius:9px;
  padding:8px 4px;font-size:.86em;cursor:pointer;color:var(--fg,#222);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.qd-bpbtn small{color:var(--muted,#888);font-size:.78em}
.qd-bpbtn.on{background:var(--okbg,#e6f4ea);border-color:var(--ok,#188038)}
.qd-scheda-chiudi{align-self:stretch;margin-top:4px}

/* trascinamento (stesso schema della Vista Cicli di todo.css) */
.qd-carta.qd-segnaposto{opacity:.35;outline:2px dashed var(--accent,#1a73e8);outline-offset:-2px}
.qd-fantasma{position:fixed;z-index:120;pointer-events:none;opacity:.92;margin:0;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.qd-velo{position:fixed;inset:0;z-index:110;touch-action:none;cursor:grabbing}
body.qd-trascina{user-select:none;-webkit-user-select:none}
.qd-quadrante.qd-bersaglio{outline:2px solid var(--accent,#1a73e8);outline-offset:-2px}