/* ============================================================
   IL QUADRANTE DELLA PORTA (`src/js/core/login-quadrante.js`)

   La metà destra della schermata d'accesso: un pannello chiaro con la
   quadrettatura, le schede che si spostano, il quadrante delle
   ventiquattro ore e la legenda dei clienti. Le tinte dei clienti
   arrivano in `--tint`; il resto sono token. Prefisso `qd-`.
   ============================================================ */
.lg-visual{position:relative;margin:16px 16px 16px 0;border-radius:28px;overflow:hidden;border:1px solid var(--border);
  display:flex;flex-direction:column;padding:clamp(24px,4vw,48px);min-height:calc(100vh - 32px);box-sizing:border-box;
  background:
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--primary-dark) 6%,transparent) 0 1px,transparent 1px 44px),
    radial-gradient(120% 80% at 90% 0%,var(--primary-soft) 0%,transparent 55%),
    radial-gradient(90% 70% at 0% 100%,var(--amber-soft) 0%,transparent 60%),
    linear-gradient(165deg,var(--primary-tint),var(--bg));}
.qd-head{position:relative;z-index:2;max-width:460px;}
.qd-title{font-size:clamp(28px,3.2vw,42px);font-weight:800;letter-spacing:-1.4px;line-height:1.02;margin:0 0 12px;text-wrap:balance;}
.qd-title em{font-style:normal;background:linear-gradient(90deg,var(--primary-dark),var(--primary) 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;}
.qd-sub{color:var(--neutral-ink);font-size:14px;line-height:1.55;margin:0;max-width:400px;}

.qd-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:420px;margin-top:10px;}
.qd-card{position:absolute;z-index:3;cursor:grab;touch-action:none;user-select:none;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:12px 14px;font-size:12.5px;animation:qd-galleggia 7s ease-in-out infinite;}
.qd-card.a{top:4%;left:0;width:230px;}
.qd-card.b{bottom:6%;right:0;width:220px;animation-delay:-2.5s;}
.qd-card.c{top:14%;right:2%;animation-delay:-4.5s;display:flex;align-items:center;gap:10px;}
.qd-card.dragging{cursor:grabbing;animation:none;z-index:6;}
@keyframes qd-galleggia{50%{transform:translateY(-6px);}}
.qd-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.qd-label svg{width:14px;height:14px;color:var(--primary-dark);}
.qd-card-t{font-weight:600;font-size:13px;margin-bottom:8px;}
.qd-card-t0{font-weight:600;}
.qd-muted{color:var(--muted);font-size:11.5px;}
.qd-big{font-size:22px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.qd-big small{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0;}
.qd-track{height:6px;background:var(--track);border-radius:5px;overflow:hidden;margin-top:8px;}
.qd-track > div{height:100%;background:var(--primary);border-radius:5px;}
.qd-tile{width:32px;height:32px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qd-tile svg{width:16px;height:16px;}
.qd-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;text-transform:none;letter-spacing:0;}
.qd-badge.rev{background:var(--violet-soft);color:var(--violet);}
.qd-badge.ok{background:var(--primary-soft);color:var(--primary-dark);}

/* ---- il cliente: il suo colore, tenue sotto e pieno nell'icona ---- */
.qd-chip{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:999px;padding:3px 12px 3px 3px;font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;
  background:color-mix(in srgb,var(--tint,var(--primary)) 13%,var(--card));color:color-mix(in srgb,var(--tint,var(--primary)) 70%,var(--text));}
.qd-chip-ic{width:22px;height:22px;border-radius:50%;background:var(--tint,var(--primary));color:var(--on-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qd-chip-ic svg{width:12px;height:12px;stroke-width:2.4;}
button.qd-chip{cursor:pointer;transition:transform .15s,box-shadow .15s;}
button.qd-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px color-mix(in srgb,var(--tint,var(--primary)) 22%,transparent);}
button.qd-chip:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tint,var(--primary)) 35%,transparent);}
button.qd-chip[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--tint,var(--primary));}
button.qd-chip[aria-pressed="true"]::after{content:"";width:6px;height:6px;margin-left:2px;border-radius:2px;background:var(--tint,var(--primary));animation:qd-pulsa 1.6s ease-in-out infinite;}

/* ---- il quadrante ---- */
.qd-dial{width:min(380px,82%);aspect-ratio:1;max-width:100%;position:relative;}
.qd-dial svg{width:100%;height:100%;display:block;overflow:visible;}
.qd-halo{fill:color-mix(in srgb,var(--card) 50%,transparent);}
.qd-ring{fill:none;stroke:var(--track);}
.qd-work{fill:none;stroke:var(--primary-mid);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 6;}
.qd-face{fill:var(--card);stroke:var(--border);}
.qd-tick{stroke:var(--border);stroke-width:1.2;stroke-linecap:round;}
.qd-tick.major{stroke:var(--dim);stroke-width:2;}
.qd-num{fill:var(--muted);font-size:10.5px;font-weight:700;text-anchor:middle;dominant-baseline:central;}
.qd-seg{fill:none;stroke:var(--tint,var(--primary));cursor:pointer;transition:opacity .2s;}
.qd-seg.dim{opacity:.18;}
.qd-hand{stroke:var(--text);stroke-width:2;stroke-linecap:round;}
.qd-dot{fill:var(--card);stroke:var(--primary-dark);stroke-width:3;transition:r .15s;}
.qd-dial:hover .qd-dot,.qd-dial.scrubbing .qd-dot{r:9;}
.qd-hit{fill:transparent;cursor:grab;outline:none;}
.qd-hit:focus-visible{stroke:var(--primary-mid);stroke-width:4;}
.qd-dial.scrubbing .qd-hit{cursor:grabbing;}
.qd-ring-ic{position:absolute;z-index:1;transform:translate(-50%,-50%);width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--dim);pointer-events:none;}
.qd-ring-ic svg{width:11px;height:11px;stroke-width:2.2;}
.qd-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.qd-pill{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:3px 9px 3px 7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);box-shadow:var(--shadow);}
.qd-pill svg{width:12px;height:12px;animation:qd-pulsa 2s ease-in-out infinite;}
.qd-pill.paused{color:var(--amber-dark);}
.qd-pill.travel{color:var(--violet);}
.qd-pill.paused svg,.qd-pill.travel svg{animation:none;}
@keyframes qd-pulsa{50%{opacity:.35;}}
.qd-timer{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-1px;margin:10px 0 4px;font-variant-numeric:tabular-nums;}
.qd-timer.bump{animation:qd-salta .35s ease-out;}
@keyframes qd-salta{40%{transform:scale(1.06);color:var(--primary-dark);}}
.qd-dial.scrubbing .qd-timer{color:var(--violet);}
.qd-timer-sub{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--neutral-ink);font-weight:500;}
.qd-timer-sub .qd-chip{font-size:11.5px;}
.qd-task{max-width:200px;text-wrap:balance;}
.qd-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--neutral-ink);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px 11px 4px 8px;}
.qd-note svg{width:13px;height:13px;color:var(--primary-dark);}
.qd-play{pointer-events:auto;margin-top:10px;width:38px;height:38px;border-radius:50%;border:none;background:var(--primary);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 35%,transparent);transition:transform .15s,background .15s;}
.qd-play:hover{background:var(--primary-deep);transform:scale(1.06);}
.qd-play:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft);}
.qd-play svg{width:16px;height:16px;fill:currentColor;}
.qd-dial.scrubbing .qd-play{visibility:hidden;}
.qd-tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 14px));background:var(--inverse);color:var(--on-inverse);border-radius:10px;padding:7px 10px;font-size:11.5px;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lift);}
.qd-tip b{display:block;font-size:12px;}
.qd-tip span{color:var(--on-inverse-dim);font-variant-numeric:tabular-nums;}

.qd-hint{position:relative;z-index:2;display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:12px;color:var(--neutral-ink);}
.qd-hint svg{width:14px;height:14px;color:var(--primary-dark);flex-shrink:0;}
.qd-legend{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.qd-tot{margin-left:auto;font-size:12px;color:var(--neutral-ink);display:flex;align-items:center;gap:6px;}
.qd-tot svg{width:14px;height:14px;color:var(--primary-dark);}
.qd-tot b{color:var(--text);font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .qd-card,.qd-pill svg,.qd-timer.bump,button.qd-chip[aria-pressed="true"]::after{animation:none;}
  .qd-seg,.qd-dot,.qd-play,button.qd-chip{transition:none;}
}