/* GARGANO VETRI — palette "matita grassa":
   inchiostro blu di Prussia, carta da banco, verde del filo del vetro,
   rosso-arancio della matita grassa con cui si segnano le lastre. */
:root{
  --ink:#14232E; --ink2:#2E4352; --prim:#16303F; --paper:#EDEAE2; --card:#F8F6F0; --line:#C9C2B3; --line2:#DDD7CA;
  --acc:#D4471A; --acc-soft:#F6DACD; --glass:#BFD9D2; --glass-edge:#3E7F72; --off:#F3D9A4; --off-edge:#A86B10;
  --ok:#2F6B3A; --ok-soft:#D7E8D5; --warn:#9A5B00; --warn-soft:#F4E2BC; --bad:#A3231B; --bad-soft:#F3D3CF;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --r:6px; --fs:16px;
}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.45;min-height:100dvh}
body.role-lab{--fs:18px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--prim)}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:1.9rem;font-weight:800}
h2{font-size:1.3rem;font-weight:750}
h3{font-size:1.05rem;font-weight:700}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:#5B6870}
.small{font-size:.85rem}
.big{font-size:2.2rem;font-weight:800;font-family:var(--mono);letter-spacing:-.03em}

/* ---- testata ---- */
.top{display:flex;align-items:center;gap:1rem;padding:.6rem 1.2rem;background:var(--prim);color:#F1EEE6;flex-wrap:wrap}
.wm{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.wm .mark{width:34px;height:34px;display:grid;place-items:center;border:2px solid #F1EEE6;font-weight:800;font-size:.85rem;letter-spacing:.05em;position:relative}
.wm .mark::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;background:var(--acc)}
.wm b{font-size:1.05rem;letter-spacing:.14em}
.wm span{font-size:.72rem;opacity:.75;display:block;letter-spacing:.04em}
.top .sp{flex:1}
.top label{font-size:.78rem;opacity:.8}
.top select{background:#22404F;border:1px solid #47606E;color:#F1EEE6;padding:.35rem .5rem;border-radius:var(--r)}
.top .btn{background:transparent;color:#F1EEE6;border-color:#5A7280}
.seeas{background:var(--acc);color:#fff;padding:.5rem 1.2rem;display:flex;gap:1rem;align-items:center;font-weight:600}
.seeas button{background:#fff;color:var(--acc);border:0;padding:.3rem .8rem;border-radius:var(--r);font-weight:700;cursor:pointer}
nav.main{display:flex;gap:.15rem;padding:0 1.2rem;background:var(--card);border-bottom:2px solid var(--ink);overflow-x:auto}
nav.main a{padding:.8rem .9rem;text-decoration:none;color:var(--ink2);font-weight:650;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
nav.main a.on{border-color:var(--acc);color:var(--ink)}
nav.more{display:flex;gap:.9rem;padding:.35rem 1.2rem;font-size:.85rem;flex-wrap:wrap;border-bottom:1px solid var(--line2)}
nav.more a{color:#4D5B63;text-decoration:none}
nav.more a.on{color:var(--acc);font-weight:700}
main{padding:1.4rem 1.2rem 4rem;max-width:1440px;margin:0 auto;animation:in .22s ease-out}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- blocchi ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.card.flat{background:transparent}
.card.hl{border-color:var(--acc);border-width:2px}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:1rem}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);font-weight:800}
.stat .v{font-family:var(--mono);font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.stat .l{font-size:.82rem;color:#4D5B63}
.stat.bad .v{color:var(--bad)} .stat.ok .v{color:var(--ok)}
hr{border:0;border-top:1px solid var(--line2);margin:1rem 0}

/* ---- pulsanti ---- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border:2px solid var(--ink);background:var(--card);border-radius:var(--r);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink);transition:transform .08s,background .15s}
.btn:hover{background:#fff8}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--ink);color:#F6F3EC}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.ghost{border-color:var(--line)}
.btn.sm{padding:.3rem .6rem;font-size:.85rem;border-width:1.5px}
.btn.xl{padding:1.1rem 1.4rem;font-size:1.15rem;min-height:64px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.tip{display:inline-block}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:transparent;padding:.45rem .85rem;font-weight:700;cursor:pointer}
.seg button.on{background:var(--ink);color:#F6F3EC}

/* ---- tabelle ---- */
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#4D5B63;border-bottom:2px solid var(--ink);padding:.45rem .5rem}
td{border-bottom:1px solid var(--line2);padding:.5rem;vertical-align:top}
td.r,th.r{text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:#fff9}
.tw{overflow-x:auto}

/* ---- chip di stato ---- */
.chip{display:inline-block;padding:.12rem .5rem;border-radius:99px;font-size:.78rem;font-weight:700;border:1px solid currentColor;white-space:nowrap}
.st-da_tagliare{color:#4D5B63}.st-tagliato{color:#2A5C8A}.st-molato{color:#5B4A9A}.st-fuori_tempera{color:var(--warn)}
.st-rientrato{color:#1F6E77}.st-pronto{color:var(--ok)}.st-consegnato{color:#6C7A6A}.st-rotto{color:var(--bad)}
.chip.bad{color:var(--bad);background:var(--bad-soft)} .chip.ok{color:var(--ok);background:var(--ok-soft)} .chip.warn{color:var(--warn);background:var(--warn-soft)}
.alert{padding:.8rem 1rem;border-radius:var(--r);border-left:6px solid var(--acc);background:var(--acc-soft)}
.alert.bad{border-color:var(--bad);background:var(--bad-soft)} .alert.ok{border-color:var(--ok);background:var(--ok-soft)} .alert.warn{border-color:var(--warn);background:var(--warn-soft)}

/* ---- scacchiera ---- */
.board{display:flex;flex-wrap:wrap;gap:4px}
.sq{width:22px;height:22px;border-radius:2px;border:1px solid #0002}
body.role-lab .sq{width:28px;height:28px}
.sqc-da_tagliare{background:#D6D1C5}.sqc-tagliato{background:#8FB3D4}.sqc-molato{background:#A99BD6}.sqc-fuori_tempera{background:#E8B04A}
.sqc-rientrato{background:#6FB8BF}.sqc-pronto{background:#5E9C68}.sqc-consegnato{background:#55625F}.sqc-rotto{background:var(--bad)}
.legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem}
.legend span{display:inline-flex;gap:.3rem;align-items:center}

/* ---- form ---- */
label.f{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;font-weight:650;color:#3D4B54}
input[type=text],input[type=number],input[type=date],input:not([type]),select,textarea{border:1.5px solid var(--line);background:#FFFDF8;border-radius:var(--r);padding:.5rem .55rem;min-width:0;width:100%}
textarea{min-height:84px}
input[type=number]{font-family:var(--mono)}
.fgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.check{display:flex;gap:.45rem;align-items:center;font-size:.92rem;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--acc)}
.sides{display:inline-grid;grid-template-columns:repeat(4,auto);gap:.4rem}

/* ---- SVG lastre ---- */
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:1.2rem}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem}
.sheet svg{width:100%;height:auto;display:block}
.sheet .pc rect{fill:var(--glass);stroke:var(--glass-edge);stroke-width:5}
.sheet .pc{animation:drop .5s cubic-bezier(.2,.8,.2,1) both}
.sheet .pc:hover rect{fill:#9CC7BC}
.sheet .oc rect{fill:var(--off);stroke:var(--off-edge);stroke-width:5;stroke-dasharray:28 14}
.sheet .src rect{fill:#EDDDB8}
@keyframes drop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch}
.cmp .arrow{align-self:center;font-size:2rem;font-weight:800;color:var(--acc)}
.cmp .side{padding:1rem;border:2px solid var(--line);border-radius:var(--r)}
.cmp .side.win{border-color:var(--ink);background:var(--card)}
.save{background:var(--ink);color:#F6F3EC;padding:1rem 1.2rem;border-radius:var(--r)}
.save .big{color:#F3B79F}
.piecepv svg{width:100%;max-height:340px}

/* ---- lab tiles ---- */
.tile{display:block;padding:1.1rem;border:2px solid var(--ink);border-radius:var(--r);background:var(--card);text-decoration:none;color:var(--ink)}
.tile .big{font-size:2.8rem}
.queue .phase{border-top:4px solid var(--ink);padding-top:.6rem}
.qitem{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line2)}
body.role-lab .qitem{font-size:1.1rem;padding:.8rem 0}

/* ---- dialoghi e toast ---- */
dialog{border:2px solid var(--ink);border-radius:var(--r);padding:0;max-width:min(760px,94vw);width:100%;background:var(--card);color:var(--ink)}
dialog::backdrop{background:#14232E99}
#dlg-body{padding:1.2rem 1.3rem;max-height:86vh;overflow:auto}
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#F6F3EC;padding:.75rem 1.1rem;border-radius:var(--r);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:92vw;font-weight:600;z-index:50}
#toast.on{opacity:1;transform:translateX(-50%)}
#toast.bad{background:var(--bad)}
canvas.sig{width:100%;height:160px;background:#FFFDF8;border:1.5px dashed var(--ink2);border-radius:var(--r);touch-action:none;display:block}
.photo{width:96px;height:72px;display:inline-grid;place-items:center;border:1.5px solid var(--line);background:repeating-linear-gradient(135deg,#E3DED2 0 8px,#ECE8DE 8px 16px);font-size:.7rem;color:#4D5B63;margin:.2rem;border-radius:4px}
.steps{display:flex;gap:.3rem;flex-wrap:wrap}
.steps .s{flex:1;min-width:120px;padding:.6rem;border:2px solid var(--line);border-radius:var(--r);font-size:.85rem;font-weight:650}
.steps .s.done{border-color:var(--ok);background:var(--ok-soft)}
.steps .s.cur{border-color:var(--acc);background:var(--acc-soft)}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px}
.bars div{flex:1;background:var(--ink2);min-height:2px;position:relative}
.bars div.cur{background:var(--acc)}
.foot{margin-top:2.5rem;font-size:.78rem;color:#5B6870}
.offline{background:var(--warn);color:#fff;padding:.4rem 1.2rem;font-weight:700}
.denied{max-width:560px;margin:3rem auto;text-align:center}

/* ---- responsive ---- */
@media (max-width:980px){.split{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .sheets{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}.cmp .arrow{transform:rotate(90deg);justify-self:center}
  h1{font-size:1.5rem}
  main{padding:1rem .8rem 4rem}
  .top{padding:.5rem .8rem}
}

/* ---- stampa ---- */
@media print{
  .top,nav,.seeas,.no-print,#toast,.offline{display:none!important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .card,.sheet{border-color:#999;break-inside:avoid}
  body.print-dlg #app{display:none}
  body.print-dlg dialog{position:static;border:0;max-width:none;display:block}
  body.print-dlg #dlg-body{max-height:none;overflow:visible}
}