/* ══ BASE — tema, layout, overlays, popups, print ══════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700&family=Oswald:wght@700&display=swap');
:root{--bg:#1a1a1a;--card:#242424;--accent:#FFD700;--accent2:#ffe44d;--text:#f0f0f0;--muted:#888;--border:#333;--panel:#2a2a2a;--danger:#e53e3e;--success:#38a169;--info:#3182ce;}
body.light-mode{
  --bg:#f2f2f2;--card:#ffffff;--accent:#c49a00;--accent2:#d4aa00;
  --text:#1a1a1a;--muted:#666;--border:#d0d0d0;--panel:#e8e8e8;
  --danger:#c53030;--success:#276749;--info:#2b6cb0;
}
body.light-mode .app-header{background:#fff !important;box-shadow:0 1px 4px rgba(0,0,0,.08);}
body.light-mode nav.tab-bottom{background:#fff !important;border-top:1px solid #e0e0e0;}
body.light-mode #ord-detail-overlay{background:#f2f2f2;}
body.light-mode #odv-header,body.light-mode #odv-footer{background:#f8f8f8;border-color:#ddd;}
body.light-mode .ord-edit-inp{background:#fff;border-color:#ddd;color:#111;}
body.light-mode #altro-popup{background:#fff !important;border-color:#e0e0e0 !important;}
body.light-mode .altro-btn{color:#444 !important;}
body.light-mode .panel{background:#fff !important;}
/* Light mode: elementi con background scuro hardcoded */
body.light-mode .sc{background:#f0f0f0 !important;}
body.light-mode .hi{background:#f5f5f5 !important;}
body.light-mode .search-box{background:#fff !important;color:#111 !important;}
body.light-mode input[type=text]{background:#fff !important;color:#111 !important;}
body.light-mode select{background:#fff !important;color:#111 !important;}
body.light-mode th{background:#e8e8e8 !important;color:var(--accent) !important;}
body.light-mode th:active{background:#d8d8d8 !important;}
body.light-mode .tab-bottom{background:#fff !important;}
body.light-mode .ob{background:#fff !important;}
body.light-mode #cart-search{background:#fff !important;color:#111 !important;border-color:#ccc !important;}
body.light-mode #ep .ob{background:#fff !important;}
body.light-mode #ep input,body.light-mode #ep select,body.light-mode #ep textarea{background:#fff !important;color:#111 !important;border-color:#ccc !important;}
body.light-mode #ricerca-globale-box{background:#fff !important;color:#111 !important;border-color:#ccc !important;}
body.light-mode .overlay.open{background:rgba(0,0,0,.5);}
/* Tab carrello in light mode */
body.light-mode #cart-tabs-bar .cart-tab-pill{color:#111 !important;}
/* Inventario: righe tabella */
body.light-mode td{background:#fff;}
body.light-mode tr:nth-child(even) td{background:#f8f8f8;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:'Inter',Arial,sans-serif;background:var(--bg);color:var(--text);padding:0;padding-bottom:100px;}

/* HEADER */
.app-header{background:#111;padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:500;}
.app-header img{height:44px;width:auto;filter:drop-shadow(0 0 6px rgba(245,196,0,.4));}
.app-header-title{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:1px;text-transform:uppercase;}

/* TAB BAR IN BASSO - stile iPhone */
.tabs{display:none;} /* nascondo tab bar vecchia */
.tab-bottom{position:fixed;bottom:0;left:0;right:0;background:#111;border-top:2px solid var(--accent);display:flex;z-index:999;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-bottom::-webkit-scrollbar{display:none;}
.tab-bottom-btn{flex:1;min-width:48px;padding:6px 2px 8px;border:none;background:transparent;color:var(--muted);font-size:7.5px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;touch-action:manipulation;transition:color .18s;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;}
.tab-bottom-btn .tbi{font-size:20px;line-height:1;}
.tab-bottom-btn.active{color:var(--accent);}
.tab-bottom-btn.active .tbi{filter:drop-shadow(0 0 5px var(--accent));}

/* .tab-btn.active rimossa — vecchia tab bar non più presente nel DOM */
.tab-content{display:none;animation:fadeIn .18s ease;} .tab-content.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.panel{background:var(--panel);padding:14px;border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,.4);margin:10px 10px 14px;border:1px solid var(--border);}
.panel h2{font-size:15px;margin-bottom:10px;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:5px;font-weight:700;}
.btn{background:var(--accent);color:#111;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:13px;margin:2px;min-height:44px;touch-action:manipulation;font-weight:700;transition:transform .1s,filter .1s;}
.btn:active{transform:scale(.96);filter:brightness(.9);}
.btn-green{background:#38a169;color:#fff;} .btn-red{background:#e53e3e;color:#fff;}
.btn-purple{background:#805ad5;color:#fff;} .btn-gray{background:#4a5568;color:#fff;}
.btn-orange{background:#dd6b20;color:#fff;} .btn-teal{background:#2c7a7b;color:#fff;}
.stats-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.sc{background:#1e1e1e;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:11px;color:var(--accent);display:flex;flex-direction:column;align-items:center;min-width:75px;}
.sc .n{font-size:20px;font-weight:900;line-height:1;color:var(--accent);}
.sc.g{border-color:#38a169;} .sc.g .n{color:#68d391;}
.sc.r{border-color:#e53e3e;} .sc.r .n{color:#fc8181;}
.sc.o{border-color:#dd6b20;} .sc.o .n{color:#f6ad55;}
.sc.p{border-color:#805ad5;} .sc.p .n{color:#b794f4;}
.toolbar{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px;}
.search-wrap{display:flex;flex-direction:column;gap:3px;}
.search-box{padding:10px;border:1px solid var(--border);border-radius:8px;font-size:16px;width:100%;max-width:300px;background:#1e1e1e;color:var(--text);}
.search-hint{font-size:10px;color:var(--muted);padding-left:4px;min-height:14px;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:11px;}
th{background:#111;color:var(--accent);padding:6px 4px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;border-bottom:2px solid var(--accent);}
th:active{background:#1a1a1a;}
th .si{margin-left:3px;font-size:9px;opacity:.6;}
td{padding:3px 4px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
tr.hid{display:none;} tr.rem td{opacity:.4;text-decoration:line-through;}
tr.promo-row td{background:rgba(229,62,62,.12)!important;} tr.promo-row{border-left:4px solid #e53e3e;}
input[type=text]{width:100%;padding:3px 4px;border:1px solid var(--border);border-radius:3px;font-size:16px;background:#1e1e1e;color:var(--text);}
select{padding:3px 4px;border:1px solid var(--border);border-radius:3px;font-size:14px;width:100%;background:#1e1e1e;color:var(--text);}
.col-desc input[type=text]{width:100%;min-width:60px;}
.col-desc input[type=text]:focus{width:auto;min-width:200px;position:relative;z-index:100;}
.col-data input[type=text]{width:3.8em;overflow:hidden;text-overflow:clip;}
.col-data input[type=text]:focus{width:7em;}
.col-codf input[type=text]{width:6.5em;}
.col-codm input[type=text]{width:5.2em;}
.del-btn{background:#e53e3e;color:#fff;border:none;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12px;min-height:36px;touch-action:manipulation;transition:transform .1s;}
.del-btn:active{transform:scale(.94);}
.dup-btn{background:#2c7a7b;color:#fff;border:none;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-height:36px;touch-action:manipulation;}
.add-row-btn{background:var(--accent);color:#111;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;margin-top:8px;min-height:44px;touch-action:manipulation;font-weight:700;transition:transform .1s;}
.add-row-btn:active{transform:scale(.96);}
.ni{cursor:pointer;font-size:16px;padding:4px 7px;background:none;border:none;min-height:36px;touch-action:manipulation;color:var(--text);}
.hi{border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:#1e1e1e;}
.hi-info{font-size:12px;color:var(--text);} .hi-info b{font-size:13px;color:var(--accent);} .hi-info span{color:var(--muted);font-size:11px;margin-left:6px;}
#drop-zone{border:2px dashed var(--accent);border-radius:10px;padding:28px 16px;text-align:center;color:var(--accent);cursor:pointer;background:rgba(245,196,0,.06);margin-bottom:12px;transition:background .2s;min-height:100px;}
#drop-zone.over{background:rgba(245,196,0,.14);}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.ob{background:var(--panel);border-radius:12px;padding:20px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 8px 40px rgba(0,0,0,.6);width:95vw;max-width:600px;border:1px solid var(--border);}
#al li{padding:10px 4px;border-bottom:1px solid var(--border);font-size:13px;display:flex;align-items:flex-start;gap:8px;color:var(--text);}
#al li.r{opacity:.4;}
#al li input[type=checkbox]{width:20px;height:20px;cursor:pointer;flex-shrink:0;margin-top:2px;}
.ld{flex:1;} .ln{font-size:11px;color:var(--muted);font-style:italic;display:block;margin-top:2px;}
.lp{font-weight:bold;color:#fc8181;white-space:nowrap;} .lc{color:var(--muted);font-size:10px;white-space:nowrap;}
#pov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:3000;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0;}
#pov.open{display:flex;flex-direction:column;}
#pb{background:#e8e8e8;max-width:230mm;margin:0 auto;border-radius:0;overflow:hidden;flex:1;width:100%;display:flex;flex-direction:column;}
#ph{background:#111;color:var(--accent);padding:11px 16px;display:flex;justify-content:space-between;align-items:center;font-size:14px;border-bottom:2px solid var(--accent);position:sticky;top:0;z-index:10;flex-shrink:0;}
#print-area{display:none;background:white;padding:4mm 4.5mm;width:210mm;}
.tag-row{display:flex;flex-direction:row;flex-wrap:nowrap;}
.tag-row+.tag-row{border-top:.4px dashed #bbb;}
.tag-small+.tag-small,.tag-large+.tag-large{border-left:.4px dashed #bbb;}
.tag-small,.tag-large{border:.5px solid #aaa;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;background:#fff;}
.tag-small{width:67.2mm;height:37.5mm;padding:1.5mm 2.5mm;}
.tag-large{width:94mm;height:38.6mm;padding:1.5mm 3mm;}
.tag-small.cp::before,.tag-large.cp::before{content:'PROMO';position:absolute;font-family:'Oswald',Arial,sans-serif;font-weight:700;color:#fff;background:var(--promo-color,#dc2626);text-align:center;letter-spacing:1.5px;z-index:10;}
.tag-small.cp::before{font-size:6pt;width:22mm;padding:1mm 0;top:5mm;right:-6mm;transform:rotate(35deg);}
.tag-large.cp::before{font-size:7pt;width:26mm;padding:1.2mm 0;top:5.5mm;right:-6.5mm;transform:rotate(35deg);}
.th2{display:flex;justify-content:flex-start;flex-shrink:0;}
.td2{font-size:7pt;color:var(--muted);} .tag-large .td2{font-size:7.5pt;}
.tpa{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:.5mm;}
.top2{font-family:'Oswald',Arial,sans-serif;font-size:10pt;color:var(--muted);text-decoration:line-through;line-height:1;} .tag-large .top2{font-size:12pt;}
.tpr{font-family:'Oswald',Arial,sans-serif;font-size:26pt;font-weight:700;color:#000;line-height:1;} .tag-large .tpr{font-size:32pt;}
.tf2{display:flex;flex-direction:column;align-items:stretch;flex-shrink:0;gap:.2mm;}
.tf2-codes{display:flex;justify-content:space-between;align-items:flex-end;width:100%;flex-shrink:0;}
.tcf,.tcm{font-size:6pt;color:#333;} .tag-large .tcf,.tag-large .tcm{font-size:6.5pt;}
.tnm{font-family:'Oswald',Arial,sans-serif;font-size:5pt;font-weight:500;color:#444;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:.2mm;}
.tag-large .tnm{font-size:5.5pt;}
/* Forme cartellino */
.tag-shape-rounded{border-radius:4mm!important;}
.tag-shape-pill{border-radius:12mm!important;}
.tag-shape-ticket{border-radius:2mm!important;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,3mm 50%);}
/* Cornici */
.tag-frame-double{outline:1px solid var(--frame-color,#aaa);outline-offset:-2.5mm;}
.tag-frame-dotted{outline:1.5px dotted var(--frame-color,#aaa);outline-offset:-2mm;}
.tag-frame-elegant{outline:0.8px solid var(--frame-color,#aaa);outline-offset:-2mm;box-shadow:inset 0 0 0 1mm #fff,inset 0 0 0 1.4mm var(--frame-color,#aaa);}
.tag-frame-deco{outline:1.2px solid var(--frame-color,#aaa);outline-offset:-1.8mm;}
.tag-frame-deco::after{content:'';position:absolute;inset:2.5mm;border:0.4px solid var(--frame-color,#aaa);pointer-events:none;}
/* Editor shape/frame buttons */
.ec-shape-btn.active,.ec-frame-btn.active,.ec-promo-txt-btn.active{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(30,58,95,.15)!important;}
.ec-bg-btn.active{border-color:var(--accent)!important;outline:2px solid var(--accent);outline-offset:1px;}
@media(max-width:600px){
  body{padding:6px;padding-bottom:30px;}
  .tabs{gap:3px;}
  .tab-btn{padding:8px 8px;font-size:10px;}
  .toolbar{flex-direction:column;}
  .search-box{max-width:100%;}
}
@media print{
  @page{size:A4 portrait;margin:4mm;}
  body{background:white;padding:0;}
  body > *{display:none!important;}
  #print-area{display:block!important;padding:0;width:100%;}
  /* Cartellini: se l'anteprima overlay (#pov) è aperta, stampa da lì */
  #pov.open{display:block!important;position:static!important;overflow:visible!important;background:white!important;padding:0!important;}
  #pb{display:block!important;padding:0!important;background:white!important;}
  #ph{display:none!important;}
  #pc{display:block!important;padding:0!important;}
  .tag-row{page-break-inside:avoid;}
  .tag-row+.tag-row{border-top:.4px dashed #999;}
  .tag-small+.tag-small,.tag-large+.tag-large{border-left:.4px dashed #999;}
}
/* NOTE CARD */
.note-card{background:#1e1e1e;border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px;transition:border-color .2s;}
.note-card:hover{border-color:var(--accent);}
.note-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:8px;}
.note-card-title{font-size:13px;font-weight:700;color:var(--text);flex:1;}
.note-card-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.note-card-price{font-size:14px;font-weight:900;color:var(--accent);white-space:nowrap;}
.note-textarea{width:100%;background:#111;border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;padding:9px 11px;resize:vertical;min-height:64px;font-family:inherit;line-height:1.5;}
.note-textarea:focus{outline:none;border-color:var(--accent);}
.note-pos{width:100%;background:#111;border:1px solid #444;border-radius:7px;color:#aaa;font-size:12px;padding:7px 11px;font-family:inherit;margin-top:7px;font-style:italic;}
.note-pos:focus{outline:none;border-color:var(--accent);color:var(--text);font-style:normal;}
.note-save-btn{margin-top:8px;background:var(--accent);color:#111;border:none;padding:7px 16px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;touch-action:manipulation;}
.note-save-btn:active{filter:brightness(.9);}
.note-saved{color:#68d391;font-size:11px;margin-left:8px;opacity:0;transition:opacity .4s;}

/* Toast scorta bassa */
#scorta-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#e53e3e;color:#fff;padding:12px 20px;border-radius:12px;
  font-size:13px;font-weight:700;z-index:9999;opacity:0;
  transition:opacity .3s,transform .3s;pointer-events:none;
  max-width:90vw;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.5);
  white-space:pre-line;
}
#scorta-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Popup verticale dal tab Cartellin. */
#cartellin-popup {
  position: fixed;
  bottom: 68px; /* sopra la tab bar */
  left: 0;
  width: 0; /* posizionato dinamicamente via JS */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #1e1e1e;
  border: 1px solid var(--border);
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  width: auto;
  min-width: 110px;
}
#cartellin-popup.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#cartellin-popup button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
#cartellin-popup button:hover,
#cartellin-popup button:active { background: #2a2a2a; color: var(--accent); }
#cartellin-popup button .tbi { font-size: 20px; line-height: 1; }
/* divisore */
#cartellin-popup .pop-div {
  height: 1px; background: var(--border); margin: 0 4px;
}
/* triangolino puntato verso il basso */
#cartellin-popup::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--border);
}
#cartellin-popup::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e1e1e;
  z-index: 1;
}

/* ── Popup verticale Fatture (Fornitori / Storico / CSV) ── */
#fatture-popup {
  position: fixed;
  bottom: 68px;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #1e1e1e;
  border: 1px solid var(--border);
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  width: auto;
  min-width: 120px;
}
#fatture-popup.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#fatture-popup button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  white-space: nowrap;
}
#fatture-popup button:hover,
#fatture-popup button:active { background: #2a2a2a; color: var(--accent); }
body.light-mode #fatture-popup { background: #fff; border-color: #e0e0e0; }
body.light-mode #fatture-popup button { color: #444; }


/* ─── Ricerca globale ─── */
#global-search-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.75);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
#global-search-overlay.open { opacity: 1; pointer-events: all; }
#global-search-box {
  background: var(--panel); border-radius: 14px; width: min(480px,95vw);
  box-shadow: 0 8px 40px rgba(0,0,0,.7); overflow: hidden;
}
#global-search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
#global-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 16px;
}
#global-search-results {
  max-height: 65vh; overflow-y: auto; padding: 12px 12px 60px;
}

/* ─── Import da foto ─── */
#foto-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
#foto-overlay.open { opacity: 1; pointer-events: all; }
#foto-box {
  background: var(--panel); border-radius: 16px; width: min(420px,95vw);
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.7); padding: 20px;
}

#altro-popup{opacity:0;transform:translateY(12px);pointer-events:none;}
#altro-popup.open{opacity:1;transform:translateY(0);pointer-events:all;}
.altro-btn {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:14px 10px;background:transparent;border:none;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  color:var(--text);font-size:10px;cursor:pointer;min-width:80px;
  transition:background .12s;
}
.altro-btn:hover,.altro-btn:active{background:rgba(245,196,0,.08);}
.altro-btn.active-tab{background:rgba(245,196,0,.12);color:var(--accent);}

/* ─── Modal Nuovo Ordine ─── */
#ordine-modal-backdrop {
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#ordine-modal-backdrop.open { opacity:1;pointer-events:all; }
#ordine-modal {
  background:var(--card);border-radius:18px;width:min(420px,92vw);
  box-shadow:0 12px 60px rgba(0,0,0,.8);overflow:hidden;
  transform:scale(.92) translateY(10px);transition:transform .2s;
}
#ordine-modal-backdrop.open #ordine-modal { transform:scale(1) translateY(0); }
#ordine-modal-header {
  background:linear-gradient(135deg,#1a3a1a,#2d5a2d);
  padding:18px 20px 14px;
  border-bottom:2px solid #38a169;
}
#ordine-modal-body { padding:16px 20px 8px; max-height:55vh; overflow-y:auto; }
#ordine-modal-footer { padding:12px 20px 18px; display:flex; gap:10px; }
.ordine-riga {
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;
}
.ordine-riga:last-child{border-bottom:none;}
/* ─── Lista Ordini ─── */
.ord-act-btn{padding:5px 13px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid;background:transparent;cursor:pointer;font-family:inherit;}
/* Visto in ufficio (sync real-time) — occhio compatto, tinta verde/acqua */
.ord-visto-ico{
  display:inline-block;
  font-size:11px;
  line-height:1;
  vertical-align:middle;
  margin-left:3px;
  opacity:.95;
  text-shadow:0 0 6px rgba(56,161,105,.55), 0 0 2px rgba(99,179,237,.4);
}
@media (max-width:768px){
  .ord-visto-ico{
    font-size:10px;
    margin-left:2px;
    vertical-align:middle;
    line-height:1;
  }
}

/* ─── Dettaglio Ordine Overlay ─── */
#ord-detail-overlay{position:fixed;inset:0;z-index:1500;background:#141414;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;flex-direction:column;overflow:hidden;}
#ord-detail-overlay.open{opacity:1;pointer-events:all;}
#odv-header{padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #222;flex-shrink:0;background:#181818;}
#odv-body{flex:1;overflow-y:auto;padding:12px 14px 90px;}
#odv-footer{position:absolute;bottom:0;left:0;right:0;padding:8px 14px;background:#181818;border-top:1px solid #222;display:flex;gap:7px;align-items:center;}
.odv-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#1e1e1e;margin-bottom:6px;border:1px solid #262626;}
.odv-row-desc{flex:1;min-width:0;}
.odv-row-desc input{background:transparent;border:none;outline:none;color:var(--text);font-size:12px;font-weight:700;width:100%;font-family:inherit;}
.odv-row-desc input:focus{color:var(--accent);}
.odv-row-cf{font-size:10px;color:#555;margin-top:1px;}
.odv-qty-wrap{display:flex;align-items:center;background:#111;border-radius:8px;border:1px solid #2a2a2a;overflow:hidden;flex-shrink:0;}
.odv-qty-btn{background:transparent;border:none;color:#888;width:26px;height:26px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.odv-qty-btn:active{background:#2a2a2a;}
.odv-qty-num{width:30px;text-align:center;background:transparent;border:none;outline:none;color:var(--accent);font-size:12px;font-weight:800;font-family:inherit;padding:0;}
.odv-price{background:transparent;border:none;border-bottom:1px solid #2a2a2a;color:#63b3ed;font-size:11px;font-weight:700;width:48px;text-align:right;outline:none;font-family:inherit;padding:1px 2px;}
.odv-price:focus{border-bottom-color:var(--accent);}
.odv-sub{font-size:12px;font-weight:800;color:var(--accent);min-width:38px;text-align:right;flex-shrink:0;}
.odv-rmv{background:transparent;border:none;color:#333;font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0;transition:color .12s;line-height:1;}
.odv-rmv:hover{color:#e53e3e;}
.ord-edit-inp{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:8px;color:var(--text);font-size:12px;padding:7px 10px;width:100%;box-sizing:border-box;font-family:inherit;}
.ord-edit-inp:focus{border-color:#444;outline:none;}

/* ─── Nuovi stili Carrello/Ordini v2 ─── */
#numpad-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.85);display:none;align-items:flex-end;justify-content:center;}
#numpad-overlay.open{display:flex;}
#numpad-box{background:#1a1a1a;width:100%;max-width:380px;border-radius:20px 20px 0 0;padding:16px 12px 24px;box-shadow:0 -8px 40px rgba(0,0,0,.6);}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.numpad-btn{padding:16px;border-radius:12px;border:1px solid #333;background:#222;color:var(--text);font-size:22px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:background .1s;}
.numpad-btn:active{background:#333;}
.numpad-btn.accent{background:var(--accent);color:#111;border-color:var(--accent);}
.numpad-btn.danger{background:#e53e3e;color:#fff;border-color:#e53e3e;}

/* Sconto overlay */
#sconto-overlay{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;}
#sconto-overlay.open{display:flex;}

/* Ricevuta scontrino */
@media print{
  .receipt-print{width:80mm!important;margin:0 auto!important;padding:4mm!important;font-size:10pt!important;}
  .receipt-print *{font-size:inherit!important;}
}

@keyframes pulseGlow{0%,100%{box-shadow:0 0 8px rgba(245,196,0,.3);}50%{box-shadow:0 0 20px rgba(245,196,0,.6);}}
.ord-counter-pulse{animation:pulseGlow 1.5s ease-in-out infinite;}

/* Vista cassa overlay */
#cassa-overlay{position:fixed;inset:0;z-index:3000;background:#000;display:none;flex-direction:column;overflow:hidden;}
#cassa-overlay.open{display:flex;}
.cassa-header{padding:16px 20px;background:#111;border-bottom:3px solid var(--accent);display:flex;justify-content:space-between;align-items:center;}
.cassa-body{flex:1;overflow-y:auto;padding:16px 20px;}
.cassa-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:2px solid #222;}
.cassa-qty-line{
  margin-top:4px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.cassa-qty-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:#f5c400;
  color:#111;
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
}
.cassa-unit-price{
  font-size:13px;
  color:#9aa0a6;
  font-weight:700;
  white-space:nowrap;
}
.cassa-footer{padding:16px 20px;background:#111;border-top:3px solid var(--accent);display:flex;justify-content:space-between;align-items:center;gap:12px;}


/* DDT stampa — nasconde tutto tranne il DDT */
@media print {
  body > *:not(#ddt-print-overlay):not(#print-area):not(#pov) { display:none !important; }
  #print-area { display:block !important; padding:0 !important; width:100% !important; }
  #ddt-print-overlay { position:static !important; overflow:visible !important; }
  #ddt-print-overlay > div:first-child { display:none !important; } /* nasconde toolbar */
  #ddt-content { padding:0 !important; margin:0 !important; max-width:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Variabili POS (pillole carrello, riepilogo)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variabili POS ─────────────────────────────────────────── */
:root {
  --pos-orange:    #FFD700;
  --pos-orange2:   #e6c200;
  --pos-blue:      #1e6bba;
  --pos-green:     #1a7a3a;
  --pos-yellow:    #b87c00;
  --pos-red:       #c0202a;
  --pos-bg:        #111213;
  --pos-card:      #1c1d1f;
  --pos-card2:     #242628;
  --pos-border:    #2e3033;
  --pos-text:      #f0f0f0;
  --pos-muted:     #7a7d82;
}


/* ══ AUTH LOGIN ══════════════════════════════════════════════════ */
.auth-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #444; background: transparent;
  transition: background .15s, border-color .15s;
}
.auth-dot--on {
  background: var(--accent); border-color: var(--accent);
}
.auth-key {
  padding: 14px; border-radius: 10px;
  border: 1px solid #2a2a2a; background: #1a1a1a;
  color: #eee; font-size: 20px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  min-height: 50px;
  -webkit-tap-highlight-color: transparent;
}
.auth-key:active { background: #2a2a2a; }

/* ══ MODALITÀ CASSA ══ */
#cassa-mode-ov {
  position: fixed; inset: 0; z-index: 99998;
  background: #000; display: none;
  flex-direction: column; overflow: hidden;
}
.cassa-mode-header {
  padding: 16px 20px;
  background: #111;
  border-bottom: 3px solid #38a169;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.cassa-mode-list {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.cassa-mode-card {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.cassa-mode-card:active { background: #1e1e1e; }
.cassa-mode-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #1a1a1a;
}
.cassa-mode-qty-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:#f5c400;
  color:#111;
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
  margin-right:8px;
}
.cassa-mode-unit-price{
  font-size:13px;
  color:#9aa0a6;
  font-weight:700;
  white-space:nowrap;
}
.cassa-mode-item:last-child { border-bottom: none; }
.cassa-mode-footer {
  padding: 16px 20px;
  background: #111;
  border-top: 3px solid #38a169;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.cassa-mode-fatto-btn {
  padding: 16px 32px;
  border-radius: 14px;
  border: none;
  background: #38a169;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.cassa-mode-fatto-btn:active { background: #2f855a; }

/* Light mode */
body.light-mode #cassa-mode-ov { background: #f8f8f8; }
body.light-mode .cassa-mode-header,
body.light-mode .cassa-mode-footer { background: #fff; }
body.light-mode .cassa-mode-card { background: #fff; border-color: #e0e0e0; }
body.light-mode .cassa-mode-card:active { background: #f0f0f0; }
body.light-mode .cassa-mode-item { border-color: #eee; }

/* ════════════════════════════════════════════════════════════════════
   CARTELLINI — Ottimizzazione layout mobile (riferimento image_86.png)
   Solo regole CSS additive: nessun impatto su logica calcoli, sync DB
   o pulsanti del footer/barra inferiore.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── Wrapper: il riquadro nero che contiene anteprima + tabella ── */
  #t1-panel{
    width:98vw;
    max-width:98vw;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:4px !important;
    padding-right:4px !important;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  /* Riduci anche il padding laterale dei contenitori interni
     (lista cartellini + blocco import CSV) per recuperare spazio
     senza alterare il padding verticale. */
  #t1-panel #ct-list{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* ── Tabella prodotti: 100% larghezza, layout fluido ── */
  #ct-list table{
    width:100% !important;
    table-layout:auto;
  }

  /* ── Larghezze colonne ricalibrate per device mobile ──
     Restringe le colonne fisse (Cod.F, prezzi, Dim, Col, Nome, Azioni)
     in modo che TUTTE entrino nello schermo del telefono e resti più
     spazio possibile al nome del prodotto (prima colonna). */
  #ct-list table th:nth-child(2),
  #ct-list table td:nth-child(2){ width:44px !important; }   /* Cod.F   */
  #ct-list table th:nth-child(3),
  #ct-list table td:nth-child(3){ width:38px !important; }   /* € Vec   */
  #ct-list table th:nth-child(4),
  #ct-list table td:nth-child(4){ width:46px !important; }   /* € Nuovo */
  #ct-list table th:nth-child(5),
  #ct-list table td:nth-child(5){ width:26px !important; }   /* Dim     */
  #ct-list table th:nth-child(6),
  #ct-list table td:nth-child(6){ width:32px !important; }   /* Col     */
  #ct-list table th:nth-child(7),
  #ct-list table td:nth-child(7){ width:22px !important; }   /* Nome ✓  */
  #ct-list table th:nth-child(8),
  #ct-list table td:nth-child(8){ width:40px !important; }   /* Azioni  */

  /* Compatta lo spazio (gap) fra le ultime due colonne:
     Nome (checkbox) e Azioni (✓ / ↩ / ✕). */
  #ct-list table td:nth-last-child(-n+2),
  #ct-list table th:nth-last-child(-n+2){
    padding-left:1px !important;
    padding-right:1px !important;
  }

  /* Piccolo buffer di 5px sulla destra dell'ultima colonna delle
     azioni: stacca le icone dal bordo del "vetro" del wrapper. */
  #ct-list table td:last-child,
  #ct-list table th:last-child{
    padding-right:5px !important;
  }

  /* ── Tipografia ridotta su mobile ── */
  /* Nome prodotto: 11px (era 12px) */
  #ct-list table td:first-child > div:first-child{
    font-size:11px !important;
  }
  /* Codice articolo + eventuale data "fatto": 9px */
  #ct-list table td:first-child > div:nth-child(n+2){
    font-size:9px !important;
  }

  /* ── Ellipsis sulle celle di testo lunghe ──
     Trucco per `table-layout:auto`: max-width:0 + overflow:hidden
     sul td costringe il browser a comprimere la prima colonna,
     poi il div interno applica nowrap + ellipsis. */
  #ct-list table td:first-child{
    max-width:0;
    overflow:hidden;
  }
  #ct-list table td:first-child > div{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  /* ── Tap sul nome troncato → mostra completo (toggle) ──
     L'utente può toccare i "..." (o qualunque punto del nome)
     per espandere il testo su più righe. Un secondo tap richiude.
     Non interferisce con input, select o pulsanti vicini perché
     l'onclick è solo sulla <div class="ct-prod-name">. */
  #ct-list table td:first-child > div.ct-prod-name{
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(255,193,7,.15);
  }
  #ct-list table td:first-child > div.ct-prod-name.ct-expanded{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
}