@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/inter-latin-v20.woff2) format('woff2')}
/* Design system Codebi: tutti i valori vengono da DESIGN.md */
:root{
  --notte:#14213D;--firenze:#1D3557;--azzurro:#9DB8E0;--link:#2E5A9C;
  --cotto:#B4532A;--cotto-hover:#9E4421;--cotto-testo:#9E4421;
  --panna:#FBF8F2;--panna-scura:#F4EEE4;--card:#FFFDF9;--bordo:#E6DED2;
  --testo:#1B2537;--testo-2:#5A5F6B;--testo-su-scuro:#FBF8F2;--testo-2-su-scuro:#C9D3E3;
  --ok:#1F7A4D;--attenzione:#9A5806;--errore:#B42318;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-s:8px;--r-m:16px;--r-p:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ombra:0 8px 24px -12px color-mix(in srgb,var(--notte) 30%,transparent);
  --campo:color-mix(in srgb,var(--testo-2) 70%,var(--card));
  --fs-h2:clamp(1.75rem,3.5vw,2.5rem);--fs-h3:1.25rem;--fs-l:1.125rem;--fs-t:1rem;--fs-p:.875rem;--fs-e:.75rem
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:color-mix(in srgb,var(--testo-2) 45%,transparent) var(--panna)}
body{font-family:Inter,system-ui,sans-serif;font-size:var(--fs-t);background:var(--panna);color:var(--testo);line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--link)}
::selection{background:color-mix(in srgb,var(--link) 22%,transparent)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-s)}
.side :focus-visible,.top-m :focus-visible,.commento :focus-visible,.login-wrap>:not(.login) :focus-visible{outline-color:var(--azzurro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-bar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--attenzione) 12%,var(--card));color:var(--attenzione);border-bottom:1px solid color-mix(in srgb,var(--attenzione) 30%,var(--card));font-size:var(--fs-p);padding:var(--s2) var(--s4);display:flex;gap:var(--s3);align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.demo-bar a,.demo-bar button{color:var(--attenzione);font-weight:600;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.viewas{background:var(--attenzione);color:var(--testo-su-scuro);padding:var(--s2) var(--s4);font-weight:600;font-size:var(--fs-p);display:flex;gap:var(--s3);justify-content:center;align-items:center;flex-wrap:wrap}
.viewas button{background:var(--card);color:var(--attenzione);border:0;border-radius:var(--r-p);padding:var(--s1) var(--s3);font-weight:600;cursor:pointer}

/* impaginazione */
.app{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - 38px)}
.side{background:var(--notte);color:var(--testo-2-su-scuro);padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:38px;height:calc(100vh - 38px);overflow:auto}
.side .brand{color:var(--testo-su-scuro);display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s3) var(--s5);text-decoration:none}
.side .brand svg{height:32px;width:auto}
.side .brand small{display:block;font-size:var(--fs-e);letter-spacing:.08em;text-transform:uppercase;color:var(--azzurro);font-weight:600}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-s);text-decoration:none;color:var(--testo-2-su-scuro);font-weight:600;font-size:var(--fs-p);transition:background-color .2s,color .2s}
.side nav a:hover{background:color-mix(in srgb,var(--testo-su-scuro) 8%,transparent);color:var(--testo-su-scuro)}
.side nav a.on{background:var(--firenze);color:var(--testo-su-scuro)}
.side .badge{margin-left:auto;background:var(--azzurro);color:var(--notte);border-radius:var(--r-p);font-size:var(--fs-e);font-weight:700;padding:0 var(--s2);font-variant-numeric:tabular-nums}
.side .who{margin-top:auto;padding:var(--s4) var(--s3) 0;border-top:1px solid color-mix(in srgb,var(--testo-su-scuro) 14%,transparent);font-size:var(--fs-p)}
.side .who b{color:var(--testo-su-scuro);display:block}
.side .who button{margin-top:var(--s3);background:none;border:1px solid color-mix(in srgb,var(--testo-su-scuro) 40%,transparent);color:var(--testo-su-scuro);border-radius:var(--r-p);padding:var(--s1) var(--s4);cursor:pointer;font-size:var(--fs-p)}
.top-m{display:none}
main{padding:var(--s6) clamp(var(--s4),3vw,var(--s7)) var(--s8);min-width:0}
main:focus{outline:none}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.ph h1{font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--notte);line-height:1.15;font-weight:700;text-wrap:balance}
.ph p{color:var(--testo-2);margin-top:var(--s1)}
.upd{font-size:var(--fs-p);color:var(--testo-2)}

/* elementi */
.card{background:var(--card);border:1px solid var(--bordo);border-radius:var(--r-m);padding:var(--s5)}
.card h2{font-size:var(--fs-l);color:var(--notte);margin-bottom:var(--s3);font-weight:600}
.card h3{font-size:var(--fs-t);color:var(--notte);font-weight:600}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:1px solid transparent;border-radius:var(--r-p);padding:var(--s3) var(--s5);font-weight:600;cursor:pointer;min-height:44px;text-decoration:none;transition:background-color .2s,transform .2s var(--ease),border-color .2s}
.btn:active{transform:scale(.97)}
.btn-o{background:var(--cotto);color:var(--testo-su-scuro)}.btn-o:hover{background:var(--cotto-hover)}
.btn-n,.btn-g{background:transparent;border-color:var(--notte);color:var(--notte)}.btn-n:hover,.btn-g:hover{background:color-mix(in srgb,var(--notte) 6%,transparent)}
.btn-s{padding:var(--s1) var(--s4);min-height:36px;font-size:var(--fs-p)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.tag{display:inline-block;font-size:var(--fs-e);font-weight:600;border-radius:var(--r-p);padding:2px var(--s3);background:var(--panna-scura);color:var(--notte);white-space:nowrap}
.tag.new{background:var(--link);color:var(--testo-su-scuro)}
.tag.aperta{background:color-mix(in srgb,var(--errore) 10%,var(--card));color:var(--errore)}
.tag.lavorazione{background:color-mix(in srgb,var(--attenzione) 12%,var(--card));color:var(--attenzione)}
.tag.chiusa{background:color-mix(in srgb,var(--ok) 10%,var(--card));color:var(--ok)}
.muted{color:var(--testo-2)}
.small{font-size:var(--fs-p)}
.list{list-style:none;display:grid}
.list li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s1);border-bottom:1px solid var(--bordo);flex-wrap:wrap}
.list li:last-child{border-bottom:0}
.list .t{flex:1 1 240px;min-width:0}
.list li>.btn{flex:none}
.list .t b{display:block;color:var(--notte);font-weight:600;overflow-wrap:anywhere}
.list .t a{color:var(--notte);text-decoration:none}
.list .t a:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.list .t span{font-size:var(--fs-p);color:var(--testo-2)}
.fi{width:40px;height:40px;border-radius:var(--r-s);display:grid;place-items:center;font-size:.6875rem;font-weight:700;color:var(--notte);background:var(--panna-scura);border:1px solid var(--bordo);flex:none;letter-spacing:.02em}
.linkbtn{background:none;border:0;color:var(--link);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:var(--s1)}
.toolbar{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:end;margin-bottom:var(--s4)}
.fld{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s4)}
.fld label,.fld legend{font-weight:600;font-size:var(--fs-p);color:var(--notte)}
.fld .hint,.hint-corr{font-size:var(--fs-e);color:var(--testo-2);font-weight:400}
.hint-corr{display:block;margin-top:var(--s1)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=month],input[type=number],select,textarea{border:1px solid var(--campo);border-radius:var(--r-s);padding:0 var(--s3);background-color:var(--card);height:44px;line-height:1.2;width:100%;-webkit-appearance:none;appearance:none}
input[type=month]::-webkit-datetime-edit{padding:0}
select{padding-right:var(--s7);background-image:linear-gradient(45deg,transparent 50%,var(--testo-2) 50%),linear-gradient(135deg,var(--testo-2) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
::placeholder{color:var(--testo-2);opacity:1}
textarea{height:auto;min-height:96px;padding:var(--s3);resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 20%,transparent)}
.toolbar .fld{margin:0;min-width:150px;flex:1;justify-content:flex-end}
.err{color:var(--errore);font-size:var(--fs-p)}
.note{border-radius:var(--r-s);padding:var(--s3) var(--s4);font-size:var(--fs-p);margin:var(--s3) 0;border:1px solid}
.note.warn{background:color-mix(in srgb,var(--attenzione) 8%,var(--card));color:var(--attenzione);border-color:color-mix(in srgb,var(--attenzione) 25%,var(--card))}
.note.info{background:var(--panna-scura);color:var(--notte);border-color:var(--bordo)}
.note.ok{background:color-mix(in srgb,var(--ok) 8%,var(--card));color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,var(--card))}
.note.ko{background:color-mix(in srgb,var(--errore) 8%,var(--card));color:var(--errore);border-color:color-mix(in srgb,var(--errore) 25%,var(--card))}
.empty{text-align:center;color:var(--testo-2);padding:var(--s6) var(--s3)}
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-p)}
table.t th,table.t td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--bordo);vertical-align:top}
table.t th{color:var(--testo-2);font-weight:600;font-size:var(--fs-e);text-transform:uppercase;letter-spacing:.08em}
.tw{overflow-x:auto}
.num{text-align:right;font-variant-numeric:tabular-nums}
.stack{margin-top:var(--s5)}

/* accesso */
.login-wrap{min-height:calc(100vh - 38px);display:grid;place-items:center;padding:var(--s6) var(--s4);background:var(--notte)}
.login{background:var(--card);border-radius:var(--r-m);padding:var(--s6);width:min(440px,100%)}
.login .lg{display:block;margin-bottom:var(--s5)}
.login .lg svg{height:40px;width:auto}
.login h1{font-size:var(--fs-h3);color:var(--notte);margin-bottom:var(--s1);font-weight:700}
.pw{position:relative}
.pw input{padding-right:84px}
.pw button{position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);background:none;border:0;color:var(--link);font-weight:600;font-size:var(--fs-p);cursor:pointer;padding:var(--s2)}
.chk{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-p)}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--link);flex:none}
.meter{display:flex;gap:var(--s1);margin-top:var(--s2)}
.meter i{flex:1;height:6px;border-radius:3px;background:var(--bordo)}
.meter.l1 i:nth-child(-n+1){background:var(--errore)}
.meter.l2 i:nth-child(-n+2){background:var(--attenzione)}
.meter.l3 i:nth-child(-n+3){background:var(--link)}
.meter.l4 i:nth-child(-n+4){background:var(--ok)}
.demo-pick{display:grid;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--bordo)}

/* commenti e conversazioni */
.thread{display:grid;gap:var(--s3);margin:var(--s4) 0}
.msg{border:1px solid var(--bordo);border-radius:var(--r-m);padding:var(--s3) var(--s4);background:var(--card)}
.msg.cdb{background:var(--panna-scura)}
.msg.unread{border-color:var(--link)}
.msg header{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline;font-size:var(--fs-p);color:var(--testo-2);margin-bottom:var(--s1)}
.msg header b{color:var(--notte)}
.msg p{white-space:pre-wrap;overflow-wrap:anywhere}

/* zona di caricamento */
.drop{display:block;position:relative;margin:var(--s3) 0;border:1px dashed var(--campo);border-radius:var(--r-m);padding:var(--s5);text-align:center;background:var(--panna);cursor:pointer;transition:border-color .2s,background-color .2s}
.drop.over{border-color:var(--link);background:color-mix(in srgb,var(--link) 6%,var(--card))}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop .sfoglia{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* indicatori */
.kpis{display:grid;gap:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.due{grid-template-columns:1fr 1fr}
.kpi{background:var(--card);border:1px solid var(--bordo);border-radius:var(--r-m);padding:var(--s4);position:relative;text-decoration:none;color:inherit;display:block}
a.kpi{transition:box-shadow .3s var(--ease)}a.kpi:hover{box-shadow:var(--ombra)}
.kpi .h{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.kpi small{color:var(--testo-2);font-weight:600;font-size:var(--fs-p)}
.kpi .v{font-size:var(--fs-h3);font-weight:700;color:var(--notte);letter-spacing:-.01em;margin:var(--s1) 0 var(--s2);font-variant-numeric:tabular-nums}
.kpi .f{font-size:var(--fs-p);color:var(--testo)}
.sem{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-e);font-weight:600;border-radius:var(--r-p);padding:2px var(--s2)}
.sem svg{width:10px;height:10px}
.sem.verde{background:color-mix(in srgb,var(--ok) 10%,var(--card));color:var(--ok)}
.sem.giallo{background:color-mix(in srgb,var(--attenzione) 12%,var(--card));color:var(--attenzione)}
.sem.rosso{background:color-mix(in srgb,var(--errore) 10%,var(--card));color:var(--errore)}
.cmp{display:block;font-size:var(--fs-e);color:var(--testo-2);margin-top:var(--s1)}
.why{background:none;border:1px solid var(--campo);border-radius:var(--r-p);width:24px;height:24px;font-weight:700;color:var(--link);cursor:pointer;font-size:var(--fs-e);flex:none}
.pop{background:var(--panna);border:1px solid var(--bordo);border-radius:var(--r-s);padding:var(--s3);margin-top:var(--s3);font-size:var(--fs-p)}
.pop b{color:var(--notte)}
.commento{background:var(--notte);color:var(--testo-2-su-scuro);border-radius:var(--r-m);padding:var(--s5)}
.commento h2{color:var(--testo-su-scuro);font-size:var(--fs-l);margin-bottom:var(--s2)}
.commento .firma{margin-top:var(--s3);font-size:var(--fs-p)}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-size:11px;fill:var(--testo-2);font-family:Inter,system-ui,sans-serif}
.leg{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-p);color:var(--testo-2);margin-top:var(--s2)}
.leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:var(--s1);vertical-align:-1px}
.c-notte{background:var(--notte)}.c-cotto{background:var(--cotto)}.c-link{background:var(--link)}.c-errore{background:var(--errore)}
details.dati summary{cursor:pointer;color:var(--link);font-weight:600;font-size:var(--fs-p);margin-top:var(--s2)}
.linea-prod{margin:var(--s3) 0 var(--s4)}
.linea-prod .r{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--fs-p)}
.linea-prod .r b{color:var(--notte)}
.linea-prod .b{height:var(--s3);background:var(--panna-scura);border-radius:var(--r-p);margin-top:var(--s2);overflow:hidden}
.linea-prod .b i{display:block;height:100%;background:var(--link);border-radius:inherit}
.sim{display:grid;gap:var(--s4)}
.sim label{display:flex;justify-content:space-between;font-weight:600;font-size:var(--fs-p);color:var(--notte)}
.sim output{font-variant-numeric:tabular-nums}
.sim input[type=range]{width:100%;accent-color:var(--link)}
.sec-nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.sec-nav a{text-decoration:none;border:1px solid var(--campo);border-radius:var(--r-p);padding:var(--s1) var(--s4);font-size:var(--fs-p);background:var(--card);color:var(--notte)}
.sec-nav a:hover{border-color:var(--link);color:var(--link)}
.sez{margin:var(--s6) 0 var(--s3);color:var(--notte);font-size:var(--fs-h3)}

/* finestra */
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--notte) 60%,transparent);display:grid;place-items:center;padding:var(--s4);z-index:100}
.modal .box{background:var(--card);border-radius:var(--r-m);max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:var(--s5)}
.modal h2{font-size:var(--fs-h3);color:var(--notte);margin-bottom:var(--s3)}
.codice{font-family:ui-monospace,monospace;font-size:var(--fs-l);background:var(--panna-scura);padding:var(--s3);border-radius:var(--r-s);margin:var(--s4) 0;word-break:break-all}
.a4{background:var(--card);border:1px solid var(--bordo);padding:var(--s6);max-width:620px;margin:var(--s3) auto;font-size:var(--fs-p)}
.a4 h3{color:var(--notte);margin:var(--s3) 0 var(--s2)}
.toast{position:fixed;bottom:var(--s4);left:50%;transform:translateX(-50%);z-index:120;max-width:min(560px,calc(100% - var(--s6)));box-shadow:var(--ombra)}

@media (max-width:1023.98px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;bottom:0;width:min(300px,80vw);height:100vh;z-index:80;transform:translateX(-105%);transition:transform .3s var(--ease)}
  .side.open{transform:none;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--notte) 50%,transparent)}
  .top-m{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:var(--notte);color:var(--testo-su-scuro);padding:var(--s3) var(--s4);position:sticky;top:0;z-index:50}
  .top-m svg{height:28px;width:auto}
  .top-m button{background:color-mix(in srgb,var(--testo-su-scuro) 12%,transparent);border:0;color:var(--testo-su-scuro);border-radius:var(--r-s);padding:var(--s2) var(--s3);font-weight:600;cursor:pointer}
  .demo-bar{position:relative}
  .g3,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  main{padding:var(--s5) 20px var(--s7)}
  .g2,.g3,.kpis,.kpis.due{grid-template-columns:1fr}
}
@media print{
  .demo-bar,.side,.top-m,.viewas,.no-print,details.dati summary{display:none!important}
  .app{display:block}
  main{padding:0}
  .card,.kpi{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}