:root{
    --paper:#E9EBE4; --card:#fff; --ink:#15181A; --ink2:#5D655F; --ink3:#8A928B;
    --rule:#C9CFC4; --rule2:#DDE1D8;
    --accent:#24418C; --accent-bg:#E6EAF4;
    --warn:#9C5E12; --warn-bg:#F5EBDC;
    --alert:#9E2D21; --alert-bg:#F6E4E1;
    --ok:#2C6B4B; --ok-bg:#E2EEE7;
    --mono:ui-monospace,SFMono-Regular,Menlo,"Courier New",monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  #app *{box-sizing:border-box}
  #app{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:14px;line-height:1.45;min-height:100vh}
  .boot{padding:40px;font-family:var(--mono);color:var(--ink2)}

  /* ---- invariante: la firma dell'interfaccia ---- */
  .bilancio{background:var(--ink);color:var(--paper);padding:14px 18px;display:flex;gap:0;flex-wrap:wrap;align-items:stretch}
  .bil-item{padding:0 18px;border-right:1px solid #333;flex:1;min-width:118px}
  .bil-item:first-child{padding-left:0}
  .bil-item:last-child{border-right:0}
  .bil-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#9AA39B}
  .bil-num{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
  .bil-item.fuori .bil-num{color:#E0A85C}
  .bil-item.tot{border-left:1px solid #333}
  .bil-item.tot .bil-num{color:#fff}
  .bil-sub{font-family:var(--mono);font-size:10px;color:#79817A}

  .shell{display:flex;align-items:flex-start}
  nav.rail{width:186px;flex:0 0 186px;padding:18px 0 60px;border-right:1px solid var(--rule);min-height:calc(100vh - 84px);position:sticky;top:0}
  nav.rail button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);cursor:pointer;border-left:3px solid transparent}
  nav.rail button:hover{color:var(--ink);background:rgba(0,0,0,.03)}
  nav.rail button.on{color:var(--ink);border-left-color:var(--accent);font-weight:700}
  nav.rail .sep{height:1px;background:var(--rule2);margin:12px 18px}
  main{flex:1;padding:22px 26px 90px;min-width:0}

  h1{font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 2px;font-weight:700}
  .sub{color:var(--ink2);margin:0 0 18px;font-size:13px;max-width:62ch}
  h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:26px 0 9px;font-weight:700}

  .card{background:var(--card);border:1px solid var(--rule);padding:16px}
  .card+.card{margin-top:12px}

  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule)}
  th{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap;font-weight:700}
  td{padding:8px 10px;border-bottom:1px solid var(--rule2);vertical-align:top}
  tr:last-child td{border-bottom:0}
  tbody tr:hover{background:#F7F8F5}
  th.sortable{cursor:pointer;user-select:none}
  th.sortable:hover{color:var(--ink)}
  th .arrow{opacity:.35;font-size:8px;margin-left:3px}
  th.asc .arrow,th.desc .arrow{opacity:1;color:var(--accent)}
  tr.filtri th{padding:3px 5px;border-bottom:1px solid var(--rule)}
  tr.filtri input{padding:3px 5px;font-size:11px;font-family:var(--mono);border-color:var(--rule2)}
  .matita{border:1px solid var(--rule);background:#fff;cursor:pointer;border-radius:2px;color:var(--ink2);
    font-size:12px;line-height:1;padding:4px 6px}
  .matita:hover{border-color:var(--ink);color:var(--ink)}
  .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .muted{color:var(--ink3)}
  .zero{color:var(--ink3)}

  .code{font-family:var(--mono);font-size:11px;background:var(--accent-bg);color:var(--accent);padding:1px 5px;border-radius:2px;white-space:nowrap}
  .code.ddt{background:#EDEAE2;color:#6A5B3C}
  .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:2px;white-space:nowrap}
  .t-mag{background:#EFF1EC;color:var(--ink2)} .t-evt{background:var(--warn-bg);color:var(--warn)}
  .t-riv{background:var(--accent-bg);color:var(--accent)} .t-out{background:var(--ok-bg);color:var(--ok)}
  .t-alert{background:var(--alert-bg);color:var(--alert)}

  button.btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;border-radius:2px;font-weight:700}
  button.btn:hover{background:#000}
  button.btn.ghost{background:none;color:var(--ink);border-color:var(--rule)}
  button.btn.ghost:hover{background:#fff;border-color:var(--ink)}
  button.btn.small{padding:5px 9px;font-size:9.5px}
  button.btn.danger{background:var(--alert);border-color:var(--alert);color:#fff}
  button.btn:disabled{opacity:.4;cursor:not-allowed}
  .actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .linkish{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;padding:0;text-decoration:underline;font-family:var(--sans)}

  label.f{display:block;margin-bottom:12px}
  label.f>span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px;font-weight:700}
  input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--rule);border-radius:2px;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink)}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}

  .modal-bg{position:fixed;inset:0;background:rgba(21,24,26,.55);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
  .modal{background:var(--card);border:1px solid var(--ink);max-width:660px;width:100%;padding:20px}
  .modal h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px}
  .modal .hint{color:var(--ink2);font-size:12.5px;margin:0 0 16px}
  .modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;border-top:1px solid var(--rule2);padding-top:14px}

  .righe .riga{display:grid;grid-template-columns:1fr 74px 92px 30px;gap:6px;margin-bottom:6px;align-items:start}
  .righe .riga.noprice{grid-template-columns:1fr 74px 30px}
  .righe .rm{border:1px solid var(--rule);background:#fff;cursor:pointer;border-radius:2px;color:var(--ink2);height:35px}
  .avail{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:2px}

  .alert{border-left:3px solid var(--alert);background:var(--alert-bg);padding:10px 13px;margin-bottom:8px}
  .alert.warn{border-left-color:var(--warn);background:var(--warn-bg)}
  .alert.info{border-left-color:var(--accent);background:var(--accent-bg)}
  .alert b{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:2px}
  .alert p{margin:0;font-size:13px;color:var(--ink)}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .kpi{background:var(--card);border:1px solid var(--rule);padding:13px}
  .kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
  .kpi .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em}

  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;font-family:var(--mono);font-size:11.5px;z-index:90;border-radius:2px;max-width:90vw}
  .empty{padding:30px;text-align:center;color:var(--ink2);background:var(--card);border:1px dashed var(--rule)}
  .empty p{margin:0 0 12px}
  .locked{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:8px}
  .barwrap{background:var(--rule2);height:5px;border-radius:3px;overflow:hidden;min-width:56px}
  .bar{background:var(--ok);height:100%}

  @media(max-width:760px){
    .shell{display:block}
    nav.rail{width:auto;position:sticky;top:0;z-index:20;background:var(--paper);min-height:0;display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--rule)}
    nav.rail .sep{display:none}
    nav.rail button{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:11px 13px}
    nav.rail button.on{border-left:0;border-bottom-color:var(--accent)}
    main{padding:16px 14px 80px}
    .bilancio{padding:11px 14px}
    .bil-item{padding:0 11px;min-width:88px}
    .bil-num{font-size:19px}
    .grid2,.grid3{grid-template-columns:1fr}
    table{font-size:13px}
    th,td{padding:7px 7px}
    .modal-bg{padding:0}
    .modal{border:0;min-height:100vh}
  }
  @media(prefers-reduced-motion:no-preference){
    .kpi,.card,table{animation:in .18s ease-out both}
    @keyframes in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  }

/* ================= aggiunte della versione server ================= */

html,body{margin:0;padding:0;background:var(--paper)}

/* stato del salvataggio: sta nella barra nera, sempre sott'occhio */
.bil-item.sessione{flex:0 0 auto;min-width:0;border-right:0;border-left:1px solid #333;
  display:flex;flex-direction:column;justify-content:center;text-align:right;padding-left:18px}
.stato{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#79817A}
.stato.salvo{color:#9AA39B}
.stato.salvato{color:#7FB093}
.stato.modificato{color:#E0A85C}
.stato.errore,.stato.scaduto{color:#E08A7C}
.stato.unito{color:#E0A85C}
.bil-item.sessione .bil-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
button.esci{background:none;border:0;color:#9AA39B;font-family:var(--mono);font-size:10px;
  cursor:pointer;padding:0;text-decoration:underline}
button.esci:hover{color:var(--paper)}

/* pagina di accesso */
.accesso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.accesso .card{max-width:380px;width:100%;padding:26px}
.accesso h1{margin-bottom:4px}
.accesso .sub{margin-bottom:22px}
.accesso .alert{margin:0 0 14px}
.accesso .btn{width:100%;padding:11px}

@media(max-width:760px){
  .bil-item.sessione{border-left:0;text-align:left;padding-left:11px;width:100%;margin-top:8px}
  .bil-item.sessione .bil-sub{max-width:none}
}

/* ================= modifiche del 26/08 ================= */

/* trascinamento delle schede nel catalogo */
.scheda{cursor:default}
.scheda .presa{cursor:grab;color:var(--ink3);font-size:13px;letter-spacing:-1px;user-select:none}
.scheda .presa:active{cursor:grabbing}
.scheda.presa-in-corso{opacity:.4}
.scheda.sopra{outline:2px dashed var(--accent);outline-offset:2px}

/* quanto resta di una tiratura */
.tir{display:flex;align-items:center;gap:8px;min-width:150px}
.tir .barwrap{flex:1}
.tir-n{font-family:var(--mono);font-size:10px;color:var(--ink3);white-space:nowrap}
.bar.basso{background:var(--warn)}
.bar.scarso{background:var(--alert)}

/* cestino e cella del DDT */
.azioni{white-space:nowrap;display:flex;gap:4px;align-items:flex-start}
.cestino{border:1px solid var(--rule);background:#fff;cursor:pointer;border-radius:2px;color:var(--ink3);
  font-size:11px;line-height:1;padding:4px 6px}
.cestino:hover{border-color:var(--alert);color:var(--alert);background:var(--alert-bg)}
.ddt-cell{border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:left}
.ddt-cell:hover .code.ddt{outline:1px solid var(--ink2)}
.ddt-cell:hover .zero{color:var(--accent);text-decoration:underline}

/* rivenditori chiusi: presenti ma in secondo piano */
tr.chiuso td{color:var(--ink3)}
tr.chiuso td:first-child{font-style:italic}

/* la griglia degli incassi nella chiusura evento */
.modal table input[type=number]{padding:4px 6px;font-family:var(--mono);font-size:12px}

/* una tabella larga scorre dentro il suo riquadro, la pagina non si sposta mai */
.scorre{overflow-x:auto;max-width:100%}
.scorre>table{min-width:100%}
/* le note lunghe non devono dilatare la tabella */
td.nota{max-width:280px;white-space:normal}
td.tipo{white-space:nowrap}
td.tipo .sotto{display:block;font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-top:3px}

/* righe di tabella riordinabili a mano */
tr[data-rid]{cursor:default}
tr[data-rid] td.presa{cursor:grab;color:var(--ink3);width:22px;text-align:center;
  font-size:13px;letter-spacing:-1px;user-select:none}
tr[data-rid] td.presa:active{cursor:grabbing}
tr[data-rid].presa-in-corso{opacity:.4}
tr[data-rid].sopra td{border-top:2px solid var(--accent)}

/* un filtro rimasto attivo si deve vedere */
.filtro-attivo{display:flex;align-items:center;gap:10px;background:var(--accent-bg);
  border:1px solid var(--rule);border-bottom:0;padding:5px 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.filtro-attivo button{background:none;border:0;color:var(--accent);cursor:pointer;
  font:inherit;text-decoration:underline;padding:0}
.filtro-attivo button:hover{color:var(--ink)}

/* anagrafica del rivenditore: tre blocchi affiancati */
.card.anagrafica{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 22px}
.anagrafica .blocco h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 8px;font-weight:700;border-bottom:1px solid var(--rule2);padding-bottom:5px}
.anagrafica .blocco>div{font-size:13px;margin-bottom:5px;line-height:1.4}
.anagrafica .et{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3)}
.anagrafica .vuoto{color:var(--ink3);font-style:italic;font-size:12.5px}
@media(max-width:760px){ .card.anagrafica{gap:14px} }

/* resi e perdite: righe che tolgono, non aggiungono */
.reso{border:1px solid var(--rule);background:#fff;cursor:pointer;border-radius:2px;color:var(--ink3);
  font-size:12px;line-height:1;padding:4px 6px}
.reso:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
tr.reso-riga td{background:#FBF3F1}
tr.reso-riga td.num{color:var(--alert)}

/* azioni scritte a parole: un'icona da sola si deve indovinare */
.azione{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule);background:#fff;color:var(--ink2);cursor:pointer;
  border-radius:2px;padding:5px 7px;white-space:nowrap}
.azione:hover{border-color:var(--ink);color:var(--ink)}
.azione.el:hover{border-color:var(--alert);color:var(--alert);background:var(--alert-bg)}
.azione.re:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
/* una rettifica che toglie si vede subito */
td.num.meno{color:var(--alert)}

/* scelte multiple: caselle in colonna, leggibili */
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px 12px;
  border:1px solid var(--rule);border-radius:2px;padding:8px 10px;background:#fff}
.scelta{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400;cursor:pointer;padding:2px 0}
.scelta input{width:auto;margin:0}