*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#f1f5f9;
--white:#ffffff;
--border:#e2e8f0;
--border2:#cbd5e1;
--text:#0f172a;
--text2:#475569;
--text3:#94a3b8;
--blue:#006caa;
--blue-light:#e0f2fe;
--orange:#e8501d;
--orange-hover:#d14518;
--green:#16a34a;
--green-bg:#f0fdf4;
--green-border:#bbf7d0;
--red:#dc2626;
--radius:10px;
}
html{background:var(--blue);touch-action:pan-y}
input:not(.note-input),textarea:not(.note-input),select{font-size:16px!important}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:var(--blue);color:var(--text);
line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;touch-action:pan-y;
}
#app{min-height:100vh;min-height:100dvh;background:var(--bg)}
/* ══════ LOGIN ══════ */
.login-screen{
min-height:100vh;min-height:100dvh;min-height:var(--login-viewport-height,100dvh);height:var(--login-viewport-height,100dvh);
display:grid;place-items:center;overflow-y:auto;
background:var(--blue);
background-image:
radial-gradient(ellipse at 20% 50%, rgba(0,108,170,.8) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(0,77,122,.6) 0%, transparent 50%),
radial-gradient(ellipse at 50% 100%, rgba(232,80,29,.15) 0%, transparent 40%);
padding:20px;
animation:loginBgFade .8s ease;
}
.login-screen:focus-within{
place-items:start center;
padding-top:max(20px,env(safe-area-inset-top));
padding-bottom:max(20px,env(safe-area-inset-bottom));
}
@keyframes loginBgFade{from{opacity:0}to{opacity:1}}
.login-card{
background:var(--white);border-radius:20px;
padding:36px 40px 32px;width:100%;max-width:420px;
box-shadow:0 40px 80px rgba(0,0,0,.35), 0 15px 30px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.08);
animation:loginCardIn .5s ease .1s both;
}
@keyframes loginCardIn{
from{opacity:0;transform:translateY(20px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.login-header{text-align:center;margin-bottom:28px}
.login-logo{max-width:200px;width:100%;height:auto;margin-bottom:0}
.login-title{
font-size:1.4rem;font-weight:700;color:var(--text);
margin-bottom:6px;
}
.login-subtitle{
color:var(--text3);font-size:.85rem;
}
.input-group{
position:relative;margin-bottom:20px;
}
.input-icon{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--text3);pointer-events:none;transition:.2s;
}
.input-group input{
width:100%;padding:14px 42px 14px 44px;
background:var(--bg);border:2px solid transparent;
border-radius:12px;font-size:.95rem;color:var(--text);
font-family:inherit;outline:none;transition:.2s;
}
.input-group input:focus{
border-color:var(--blue);background:var(--white);
box-shadow:0 0 0 4px rgba(0,108,170,.08);
}
.input-group input:focus + .input-icon,
.input-group:focus-within .input-icon{color:var(--blue)}
.input-group input::placeholder{color:var(--text3)}
.input-group input.ios-pwa-password-fallback{-webkit-text-security:disc}
.input-group input.ios-pwa-password-fallback.password-visible{-webkit-text-security:none}
.toggle-pw{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--text3);
cursor:pointer;padding:4px;display:flex;transition:.2s;
}
.toggle-pw:hover{color:var(--text2)}
.nf-mac-remember{display:flex;align-items:center;gap:8px;margin:-6px 0 16px;color:var(--text2);font-size:.8rem;cursor:pointer;user-select:none}
.nf-mac-remember input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.login-btn{
width:100%;padding:14px;
background:var(--orange);color:#fff;border:none;
border-radius:12px;font-size:.95rem;font-weight:600;
font-family:inherit;cursor:pointer;transition:.2s;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.login-btn:hover{
background:var(--orange-hover);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(232,80,29,.3);
}
.login-btn:active{transform:translateY(0);box-shadow:none}
.login-btn svg{transition:transform .2s}
.login-btn:hover svg{transform:translateX(3px)}
.passkey-login-area{margin-top:16px}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--text3);font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px}
.login-divider::before,.login-divider::after{content:'';height:1px;background:var(--border);flex:1}
.passkey-login-btn{width:100%;padding:12px 14px;background:#fff;color:var(--blue);border:1.5px solid rgba(0,108,170,.35);border-radius:12px;font-family:inherit;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:.18s}
.passkey-login-btn:hover,.passkey-login-btn:active{background:var(--blue-light);border-color:var(--blue)}
.passkey-login-btn:disabled{opacity:.65;cursor:wait}
.login-error{
color:var(--red);font-size:.82rem;margin-top:14px;
text-align:center;padding:10px;
background:#fef2f2;border:1px solid #fecaca;border-radius:10px;
animation:shakeError .4s ease;
}
@keyframes shakeError{
0%,100%{transform:translateX(0)}
20%,60%{transform:translateX(-6px)}
40%,80%{transform:translateX(6px)}
}
.input-error{border-color:var(--red) !important;animation:shakeInput .4s ease}
@keyframes shakeInput{
0%,100%{transform:translateX(0)}
25%,75%{transform:translateX(-4px)}
50%{transform:translateX(4px)}
}
.login-btn:disabled{opacity:.7;cursor:wait}
.login-footer{
text-align:center;margin-top:28px;
color:var(--text3);font-size:.75rem;letter-spacing:.3px;
}
/* ══════ TOPBAR ══════ */
.topbar{
display:flex;align-items:center;justify-content:space-between;
padding:10px 24px;
height:60px;
background:var(--blue);
border-bottom:none;
position:sticky;top:0;z-index:50;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-logo{height:44px;background:#fff;padding:4px 8px;border-radius:8px}
.topbar-info{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.topbar-info strong{display:block;font-size:.9rem;color:#fff;line-height:1.2}
.topbar-info small{font-size:.7rem;color:rgba(255,255,255,.7)}
.topbar-info small.topbar-clock{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:1.5px;font-variant-numeric:tabular-nums;line-height:1}
.topbar-info small.topbar-sync{font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600}
.topbar-info small.topbar-sync.is-skeleton{display:inline-block;min-width:140px;height:10px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.12) 100%);background-size:200% 100%;animation:skShimmer 1.4s ease-in-out infinite;color:transparent}
.topbar-right{display:flex;gap:10px}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.topbar-center{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;overflow:hidden}
.topbar-center *{pointer-events:auto}
.topbar-title-icon{color:#fff;opacity:.85;flex-shrink:0}
.topbar-center strong{color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;line-height:1}
.topbar-pulse{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:rgba(232,80,29,.25);border:1px solid rgba(232,80,29,.55);border-radius:999px;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;line-height:1}
.topbar-pulse-dot{width:7px;height:7px;border-radius:50%;background:#ff7b3d;box-shadow:0 0 0 0 rgba(255,123,61,.7);animation:topbarPulse 1.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes topbarPulse{0%{box-shadow:0 0 0 0 rgba(255,123,61,.65)}70%{box-shadow:0 0 0 8px rgba(255,123,61,0)}100%{box-shadow:0 0 0 0 rgba(255,123,61,0)}}
@media(max-width:760px){
.topbar-center{padding:0 4px;gap:6px}
.topbar-center strong{font-size:.85rem;letter-spacing:.3px}
.topbar-title-icon{display:none}
.topbar-pulse{padding:2px 7px;font-size:.6rem}
}
/* Failover indicator */
.failover-indicator{
display:flex;align-items:center;gap:.5rem;
padding:.35rem .8rem;border-radius:20px;
font-size:.75rem;font-weight:600;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
color:#fff;flex-shrink:0;
}
.failover-label{font-weight:400;opacity:.7;margin-right:.2rem}
.failover-system{
display:flex;align-items:center;gap:.3rem;
padding:.15rem .45rem;border-radius:12px;font-weight:600;
}
.failover-system.active{background:rgba(0,120,212,.4);color:#bfdbfe}
.failover-system.standby{background:rgba(148,163,184,.2);color:rgba(255,255,255,.6)}
.failover-separator{opacity:.4;font-size:.65rem}
.failover-status{font-size:.6rem;text-transform:uppercase;opacity:.8;letter-spacing:.5px}
.failover-icon{width:14px;height:14px}
/* ── Modo operativo (segmented control) ── */
.modo-switch{
display:flex;align-items:center;gap:10px;
margin-left:auto;
}
.modo-label{
font-size:.7rem;font-weight:600;
text-transform:uppercase;letter-spacing:.5px;
color:var(--text3);white-space:nowrap;
}
.modo-track{
position:relative;
display:flex;
background:var(--white);
border:1px solid var(--border);
border-radius:10px;
padding:0;
gap:2px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.modo-slider{
position:absolute;
top:0;
left:0;
height:100%;
width:0;
background:#16a34a;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,.18);
transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background .25s ease;
z-index:0;
pointer-events:none;
}
.modo-track[data-modo="pubblica"] .modo-slider{background:#16a34a;box-shadow:0 2px 8px rgba(22,163,74,.35)}
.modo-track[data-modo="aggiornamento"] .modo-slider{background:#d97706;box-shadow:0 2px 8px rgba(217,119,6,.35)}
.modo-track[data-modo="stop"] .modo-slider{background:#dc2626;box-shadow:0 2px 8px rgba(220,38,38,.35)}
.modo-btn{
position:relative;
z-index:1;
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;
border:none;border-radius:8px;
font-size:.78rem;font-weight:600;font-family:inherit;
background:transparent;color:var(--text3);
cursor:pointer;
transition:color .25s ease;
white-space:nowrap;
}
.modo-btn:hover:not(.active){color:var(--text2)}
/* Dot indicator */
.modo-dot{
width:8px;height:8px;border-radius:50%;
display:inline-block;flex-shrink:0;
transition:background .25s ease,box-shadow .25s ease;
}
.dot-green{background:#86efac}
.dot-yellow{background:#fcd34d}
.dot-red{background:#fca5a5}
/* Active: SOLO testo bianco. Il colore di sfondo lo da lo slider sottostante. */
.modo-btn.active{color:#fff}
.modo-btn.active .modo-dot{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.5)}
.topbar-btn{
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.25);
border-radius:8px;color:#fff;
font-size:.8rem;font-weight:600;font-family:inherit;
cursor:pointer;transition:.15s;white-space:nowrap;
}
.topbar-btn:hover{background:rgba(255,255,255,.25)}
.topbar-btn-logout{background:var(--red);border-color:var(--red);color:#fff}
.topbar-btn-logout:hover{background:#b91c1c;border-color:#b91c1c}
.export-wrapper{position:relative}
.export-dropdown{
position:absolute;top:100%;right:0;margin-top:6px;
background:var(--white);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,.15);
min-width:180px;z-index:100;overflow:hidden;
}
.export-opt{
display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;
border:none;background:none;text-align:left;
font-size:.85rem;font-weight:500;font-family:inherit;color:var(--text);
cursor:pointer;transition:.12s;
}
.export-opt:hover{background:var(--bg)}
.export-opt+.export-opt{border-top:1px solid var(--border)}
.export-icon{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:24px;border-radius:4px;
font-size:.6rem;font-weight:800;letter-spacing:.5px;color:#fff;
}
.export-icon.csv{background:#16a34a}
.export-icon.pdf{background:#dc2626}
/* ══════ TABS ══════ */
.tabs-bar{
background:var(--bg);
padding:10px 24px 6px;
display:flex;justify-content:center;
}
.tabs{
position:relative;
display:flex;
background:linear-gradient(180deg,#e5edf3 0%,#f1f5f9 100%);
border:1px solid var(--border);
border-radius:12px;
padding:0;
gap:0;
width:100%;max-width:720px;
overflow:hidden;
box-shadow:inset 0 2px 4px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.6);
}
.tab-slider{
position:absolute;
top:0;left:0;
height:100%;
background:linear-gradient(180deg,#ff7037 0%,var(--orange) 55%,#c54417 100%);
border-radius:0;
transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
z-index:0;
box-shadow:0 4px 10px rgba(232,80,29,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18);
}
.tab{
flex:1;
position:relative;z-index:1;
padding:11px 14px;
background:transparent;border:none;border-radius:0;
font-size:.88rem;font-weight:600;color:var(--text3);
cursor:pointer;transition:color .3s ease, text-shadow .2s ease;font-family:inherit;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
white-space:nowrap;
text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.tab.active{text-shadow:0 1px 1px rgba(0,0,0,.25)}
.tab:not(:last-child)::after{content:'';position:absolute;right:0;top:18%;bottom:18%;width:1px;background:linear-gradient(180deg,transparent 0%,rgba(15,23,42,.18) 50%,transparent 100%);z-index:2;pointer-events:none}
.tab svg{opacity:.5;transition:opacity .3s ease}
.tab:hover{color:var(--text2)}
@media(max-width:900px){.tab:hover{color:rgba(255,255,255,.5)}}
.tab.active{color:#fff}
.tab.active svg{opacity:1}
/* Tab slider */
.tab-panels{overflow:clip}
.tab-badge{
display:none;
font-size:.65rem;padding:2px 7px;
background:var(--orange);color:#fff;
border-radius:10px;font-weight:700;
min-width:18px;text-align:center;
}
/* ══════ PAGE ══════ */
.page{max-width:1320px;margin:0 auto;padding:8px 24px 40px}
/* ── Filters ── */
.filters{
display:flex;align-items:center;gap:10px;
margin:0 auto 4px;flex-wrap:wrap;
max-width:1270px;
position:sticky;top:60px;z-index:40;
background:var(--bg);
padding:4px 0;
}
.search{
flex:1;min-width:200px;
display:flex;align-items:center;gap:8px;
background:var(--white);border:1px solid var(--border);
border-radius:12px;padding:0 14px;transition:.15s;
}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.search svg{color:var(--text3);flex-shrink:0}
.search input{
flex:1;padding:9px 0;border:none;outline:none;
background:none;color:var(--text);font-size:.85rem;font-family:inherit;
}
.search input::placeholder{color:var(--text3)}
.chip{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;background:var(--white);
border:1.5px solid var(--border);border-radius:20px;
font-size:.82rem;color:var(--text2);font-weight:600;
cursor:pointer;user-select:none;white-space:nowrap;transition:.15s;
}
.chip input{accent-color:var(--orange);width:14px;height:14px}
.chip:has(input:checked){border-color:var(--orange);color:var(--orange);background:#fff7ed}
.chip-count{cursor:default}
.btn-filter-stock{cursor:pointer;font-weight:600;transition:.15s}
.btn-filter-stock:hover{border-color:var(--orange);color:var(--orange)}
.btn-filter-stock.active{border-color:var(--orange);color:var(--orange);background:#fff7ed;font-weight:600}
.chip-count span{font-weight:700;color:var(--text)}
.btn-sync{
width:36px;height:36px;
display:inline-flex;align-items:center;justify-content:center;
background:var(--white);border:1px solid var(--border);border-radius:8px;
color:var(--text3);cursor:pointer;transition:.2s;flex-shrink:0;
}
.btn-sync:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-light)}
.btn-sync:active svg{animation:spinOnce .5s ease}
@keyframes spinOnce{to{transform:rotate(360deg)}}
/* ══════ TABLE ══════ */
/* Testi secondari Stock: stesso blu dei pulsanti. */
#stock-table,#milano-table,#stock-cards,#milano-cards{
--text2:var(--blue);
--text3:var(--blue);
}
.table-card{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 1px 3px rgba(0,0,0,.04);
}
/* Lo scroll verticale avviene DENTRO questo contenitore, così thead (sticky top:0) resta
ancorato in cima alla tabella. max-height calcolata sugli elementi sopra: topbar 60px +
tabs ~52px + filters ~64px + bottone Nuovo Ordine ~52px + padding pagina ~32px ≈ 260px.
Se il valore è troppo basso il contenitore eccede il viewport, scrolla la PAGINA e
l'header sparisce (bug 20/07). */
.table-scroll{
overflow:auto;
/* NIENTE -webkit-overflow-scrolling:touch qui: in Safari crea un layer composito che
ROMPE position:sticky sulle th dentro il contenitore (header che scrolla via).
La property è legacy iOS, inutile da Safari 13. */
max-height:calc(100vh - 260px);
}
/* Tabella Milano: min-width così le colonne non si comprimono/troncano ("Data scad."→"DAT");
se eccede il container, il .table-scroll scorre orizzontalmente (frecce sotto). */
#milano-table{min-width:1080px}
#stock-table{min-width:1080px}
/* Frecce scroll orizzontale allineate all'HEADER (thead), non su tutta la tabella.
Alte quanto la riga header (~38px), in alto; scorrono l'intera tabella. */
.table-scroll-wrap{position:relative}
.tbl-arrow{
position:absolute;top:0;height:38px;width:32px;z-index:11;border:none;cursor:pointer;
display:none;align-items:center;justify-content:center;color:#005384;font-size:.95rem;
transition:color .15s;
}
.tbl-arrow.left{left:0;background:linear-gradient(90deg,var(--white) 65%,rgba(255,255,255,0))}
.tbl-arrow.right{right:0;background:linear-gradient(270deg,var(--white) 65%,rgba(255,255,255,0))}
.table-scroll-wrap.can-left .tbl-arrow.left{display:flex}
.table-scroll-wrap.can-right .tbl-arrow.right{display:flex}
.tbl-arrow:hover{color:var(--orange)}
/* border-collapse:SEPARATE, non collapse: in Safari position:sticky sulle th NON funziona
con border-collapse:collapse (bug WebKit) → l'header scrollava via. I bordi riga sono
sulle CELLE (tbody td) perché con separate i bordi su non vengono renderizzati. */
table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
tbody td{overflow:hidden;text-overflow:ellipsis}
thead th{
padding:10px 12px;
font-size:.7rem;font-weight:600;
text-transform:uppercase;letter-spacing:.5px;
color:var(--text2);
background:var(--white);
border-bottom:2px solid var(--border);
text-align:left;
position:sticky;top:0;z-index:10;
white-space:nowrap;
}
.col-resize-handle{position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize;user-select:none}
.col-resize-handle:hover,.col-resize-handle.active{background:var(--blue);opacity:.5}
/* Bordi sulle celle: con border-collapse:separate il border-bottom su
non si vede. */
tbody td{border-bottom:1px solid #f1f5f9}
tbody tr:last-child td{border-bottom:none}
tbody td{padding:8px 12px;font-size:.78rem;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
tbody td:has(input),tbody td:has(textarea){overflow:visible;white-space:normal}
/* Row states */
tr.row-zero{}
tr.row-has-stock{}
/* ── Cells ── */
.td-img{width:28px;height:28px;border-radius:6px;object-fit:contain;vertical-align:middle;margin-right:6px;background:#fff;border:1px solid #f1f5f9}
.product-code{
font-family:ui-monospace,'SF Mono',monospace;
font-size:.75rem;color:#fff;font-weight:600;
background:var(--blue);padding:3px 8px;border-radius:4px;vertical-align:middle;
}
.code-cell-stack,.code-mobile-stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.csv-row-id{font-family:ui-monospace,'SF Mono',monospace;font-size:.56rem;line-height:1;color:var(--text3);white-space:nowrap;font-weight:600}
.product-name{font-weight:500;color:var(--text);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.badge-nd{
font-size:.65rem;font-weight:600;
padding:2px 8px;border-radius:10px;
background:#f1f5f9;color:var(--text3);
margin-left:6px;vertical-align:middle;
}
.badge-disp{
font-size:.65rem;font-weight:600;
padding:2px 8px;border-radius:10px;
background:#dbeafe;color:#1e40af;
margin-left:6px;vertical-align:middle;
}
tr.row-nd{opacity:.4}
tr.row-pref{background:#bbf7d0}
tr.row-pref td:first-child{border-left:3px solid var(--green)}
tr.row-promo{background:#f0abfc}
tr.row-promo td:first-child{border-left:3px solid #d946ef}
#btn-tutti{cursor:pointer;font-weight:600;color:var(--blue);border-color:var(--blue);background:var(--white)}
#btn-tutti:hover{background:#e0f2fe}
#btn-tutti.active{background:var(--blue);color:#fff}
#btn-preferiti{cursor:pointer;font-weight:600;color:var(--green);border-color:var(--green);background:var(--white)}
#btn-preferiti:hover{background:#ecfdf5}
#btn-preferiti.active{background:var(--green);color:#fff}
#btn-promo{cursor:pointer;font-weight:600;color:#d946ef;border-color:#d946ef;background:var(--white)}
#btn-promo:hover{background:#fdf4ff}
#btn-promo.active{background:#d946ef;color:#fff}
#milano-btn-tutti{cursor:pointer;font-weight:600;color:var(--blue);border-color:var(--blue);background:var(--white)}
#milano-btn-tutti:hover{background:#e0f2fe}
#milano-btn-tutti.active{background:var(--blue);color:#fff}
#milano-btn-preferiti{cursor:pointer;font-weight:600;color:var(--green);border-color:var(--green);background:var(--white)}
#milano-btn-preferiti:hover{background:#ecfdf5}
#milano-btn-preferiti.active{background:var(--green);color:#fff}
#milano-btn-promo{cursor:pointer;font-weight:600;color:#d946ef;border-color:#d946ef;background:var(--white)}
#milano-btn-promo:hover{background:#fdf4ff}
#milano-btn-promo.active{background:#d946ef;color:#fff}
.kg-value{
display:block;text-align:right;color:var(--text2);
font-size:.78rem;font-variant-numeric:tabular-nums;
}
.date-value{
display:block;text-align:right;color:var(--text3);
font-size:.75rem;font-variant-numeric:tabular-nums;
}
/* ── Quantity ── */
.th-casse{min-width:160px}
/* Mobile cards (hidden on desktop) */
.stock-cards{display:none}
/* Mobile list — Arctic Precision */
.ml-row{background:#fff;border-radius:12px;margin-bottom:10px;box-shadow:0 4px 20px rgba(23,28,31,.04);overflow:hidden}
.ml-row.ml-pref{border-left:4px solid var(--green);background:#bbf7d0}
.ml-row.ml-promo{border-left:4px solid #9333ea;background:#faf5ff}
.ml-row.ml-open{background:#fff}
.ml-row.ml-nd{opacity:.4}
.ml-header{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none;min-height:52px;box-sizing:border-box}
.ml-img{width:44px;height:44px;border-radius:10px;object-fit:contain;flex-shrink:0;background:#fff;padding:4px;border:1px solid #f1f5f9}
.ml-header .product-code{flex-shrink:0;font-size:.7rem;background:var(--blue);color:#fff;padding:3px 8px;border-radius:6px;font-weight:700;font-family:ui-monospace,monospace}
.ml-name{flex:1 1 0;min-width:0;font-size:.88rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#005384;text-transform:uppercase;letter-spacing:-.02em}
.ml-disp{font-weight:700;font-size:.9rem;min-width:36px;text-align:center;background:#f0fdf4;color:var(--green);padding:4px 8px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;flex-shrink:0}
.ml-disp small{font-size:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;display:block;text-align:center}
.ml-disp.has-stock{color:var(--green)}
.ml-disp.no-stock,.ml-disp.has-stock{padding:4px 8px!important;min-height:0!important;gap:0!important;max-width:none}
.ml-disp.no-stock{color:#dc2626;background:#fee2e2}
.ml-disp.no-stock{padding:6px 10px}
.ml-esaurito{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#dc2626;white-space:nowrap;line-height:1}
.ml-chevron{font-size:1.2rem;color:var(--text3);transition:transform .25s ease;flex-shrink:0}
.ml-open .ml-chevron{transform:rotate(90deg)}
.ml-detail{padding:0 16px 16px}
.ml-top-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}
.ml-chip{display:inline-flex;align-items:center;gap:4px;background:#f1f5f9;padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--text)}
.ml-chip .ml-label{font-size:.6rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ml-actions{border-radius:12px;padding:12px 16px;width:100%;margin:6px 0;display:flex;align-items:center;justify-content:space-between;background:var(--bg)}
.ml-actions .ml-label{font-size:.6rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.08em;min-width:auto}
.ml-actions .order-qty{display:flex;align-items:center;gap:8px}
.ml-actions .order-btn{width:40px;height:40px;font-size:18px;border-radius:10px;border:none;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.ml-actions .order-btn:active{transform:scale(.92)}
.ml-actions .order-input,.ml-actions .disp-input{width:52px;font-size:1.1rem;padding:8px 4px;font-weight:700;text-align:center;border:1px solid #e2e8f0;border-radius:8px;background:#fff}
.ml-note{margin-top:8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.ml-note .ml-label{font-size:.6rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ml-note .note-input{min-height:36px;font-size:.82rem;padding:8px 12px;width:100%;border:none;background:#f1f5f9;border-radius:10px;resize:none;text-align:center}
.ml-note .note-input:focus{background:#fff;box-shadow:0 0 0 2px rgba(0,83,132,.15)}
.stock-card{
background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);padding:14px;margin-bottom:8px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.stock-card.card-nd{opacity:.4}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.card-name{font-weight:600;font-size:.9rem;color:var(--text);line-height:1.3}
.card-code{font-family:ui-monospace,monospace;font-size:.7rem;color:#fff;font-weight:600;background:var(--blue);padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.card-stats{display:flex;gap:12px;margin-bottom:12px}
.card-stat{flex:1;text-align:center;background:var(--bg);border-radius:8px;padding:8px 4px}
.card-stat-label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);margin-bottom:2px}
.card-stat-value{font-size:.9rem;font-weight:700;color:var(--text)}
.card-stat-value.has-stock{color:var(--green)}
.card-stat-value.no-stock{color:var(--text3)}
.card-qty{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--bg)}
.card-qty-label{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
.card-qty .qty-control{gap:10px}
.card-qty .qty-btn{width:52px;height:52px;font-size:22px;border-radius:10px}
.card-qty .qty-input{width:64px;font-size:1.2rem;padding:12px 4px;border-radius:10px}
.qty-control{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:nowrap;white-space:nowrap;overflow:visible}
.qty-btn{
width:28px;height:28px;
display:inline-flex;align-items:center;justify-content:center;
background:var(--white);border:1px solid var(--border);
border-radius:6px;color:var(--text2);
font-size:14px;font-weight:700;
cursor:pointer;transition:.12s;user-select:none;
}
.qty-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.qty-btn.minus:hover{background:var(--red);border-color:var(--red)}
.qty-btn:active{transform:scale(.92)}
.qty-input{
width:36px;text-align:center;padding:4px 2px;
background:var(--white);border:1px solid var(--border);
border-radius:6px;color:var(--text);
font-size:.85rem;font-weight:700;
font-family:inherit;outline:none;
font-variant-numeric:tabular-nums;transition:.12s;
}
.qty-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.1)}
.qty-input.has-stock{color:var(--green);border-color:var(--green-border)}
.qty-input.no-stock{color:var(--text3)}
.td-ord{text-align:center}
.order-qty{display:flex;align-items:center;justify-content:center;gap:2px}
.order-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:14px;font-weight:700;cursor:pointer;transition:.15s;user-select:none}
.order-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.order-btn:active{transform:scale(.92)}
.order-input{width:36px;text-align:center;padding:4px 2px;background:var(--white);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;font-weight:700;font-family:inherit;outline:none;font-variant-numeric:tabular-nums;transition:.15s}
.order-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,29,.1)}
.order-input.has-qty{border-color:var(--orange);color:var(--orange);background:#fff7ed}
.order-input::placeholder{color:var(--text3);font-weight:400}
.milano-row-qta::placeholder{color:var(--text);font-weight:700;opacity:1}
.order-input::-webkit-inner-spin-button,.order-input::-webkit-outer-spin-button{-webkit-appearance:none}
.qty-label{display:none}
.note-input{width:100%;padding:0;margin:0;border:1px solid transparent;border-radius:4px;font:inherit;font-size:.78rem;outline:none;color:var(--text3);background:transparent;transition:.15s;resize:none;overflow:hidden;min-height:0;height:auto;line-height:1.3;display:block;vertical-align:middle;box-sizing:border-box;letter-spacing:inherit}
textarea.note-input{height:1.3em}
input.note-input{height:1.3em}
.note-input:hover{border-color:var(--border);background:var(--white);color:var(--text)}
.note-input:focus{border-color:var(--blue);background:var(--white);color:var(--text);box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.note-input::placeholder{color:var(--text3)}
/* Disponibili column */
.casse-value{
display:block;text-align:center;
font-weight:700;font-size:.85rem;
font-variant-numeric:tabular-nums;
}
.casse-value.has-stock{color:var(--green)}
.casse-value.no-stock{color:var(--text3)}
/* Prenotate column */
.prenotate-value{
display:block;text-align:center;
font-weight:700;font-size:.82rem;color:var(--orange);
font-variant-numeric:tabular-nums;
}
.prenotate-value.zero{color:var(--text3);font-weight:400}
/* ══════ ORDINI ══════ */
.ordini-toolbar{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin:0 auto 12px;max-width:1270px;display:flex;flex-direction:column;gap:0}
.ordini-toolbar>*{padding:16px 0}
.ordini-toolbar>*+*{border-top:1px solid #e2e8f0}
.ordini-toolbar>.ordini-row-top{padding-top:4px}
.ordini-summary{padding:12px 0!important;font-weight:600;flex-wrap:wrap;justify-content:center}
.ordini-row-top{display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(180px,1fr);gap:12px;align-items:center}
.ordini-row-top .pill-group{justify-self:center}
.ordini-row-top .agente-filter{justify-self:end}
@media(max-width:760px){.ordini-row-top{display:flex!important;flex-direction:column;align-items:center;gap:8px}.ordini-row-top>*{align-self:center}}
@media(max-width:480px){
.ordini-toolbar{padding:16px 18px;gap:0;align-items:stretch}
.ordini-toolbar>*{padding:18px 0}
.ordini-row-top{gap:12px;justify-items:center}
.ordini-row-top .pill-group,.ordini-row-top .agente-filter{justify-self:stretch!important;margin-left:0!important;margin-right:0!important}
/* Pills: una sola riga con scroll orizzontale */
.ordini-row-top .pill-group,
#ordini-periodo-filters,
#prev-periodo-filters,
#ord-week-nav{
justify-content:flex-start;
gap:8px;
flex-wrap:nowrap;
width:100%;
padding:2px 4px 6px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
scrollbar-width:none;
}
.ordini-row-top .pill-group::-webkit-scrollbar,
#ordini-periodo-filters::-webkit-scrollbar,
#prev-periodo-filters::-webkit-scrollbar,
#ord-week-nav::-webkit-scrollbar{display:none}
.ord-filter-btn,.ord-period-btn,.prev-filter-btn,.prev-period-btn{
padding:7px 14px;font-size:.74rem;flex:0 0 auto;scroll-snap-align:start;
}
.search-wrapper{max-width:100%;margin:0 auto}
.ordini-search-input{font-size:.8rem;text-align:center}
.agente-filter{width:auto;max-width:100%;font-size:.8rem;text-align:center;margin:0 auto!important;display:block!important;align-self:center!important}
.ordini-summary{font-size:.78rem;gap:6px;justify-content:center;flex-wrap:wrap;text-align:center;padding:4px 8px}
.ordini-summary .sum-dot{display:none}
}
.ordini-filters{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.pill-group{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.agente-filter{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:8px 32px 8px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font-size:.82rem;font-weight:600;font-family:inherit;color:var(--text);outline:none;cursor:pointer;transition:.15s;flex:0 0 auto;width:180px;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;box-shadow:0 2px 8px rgba(23,28,31,.04)}
.agente-filter:hover{border-color:rgba(0,108,170,.3);background-color:#f8fafc}
.agente-filter:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.ordini-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;font-weight:600;justify-content:center}
.sum-dot{width:4px;height:4px;background:var(--text3);border-radius:50%}
.ord-filter-btn,.ord-period-btn,.prev-filter-btn,.prev-period-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.prev-period-btn.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.prev-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.prev-filter-btn[data-stato="inviato"]{color:var(--blue);border-color:var(--blue)}
.prev-filter-btn[data-stato="inviato"].active{background:var(--blue);color:#fff}
.prev-filter-btn[data-stato="processato"]{color:#7c3aed;border-color:#7c3aed}
.prev-filter-btn[data-stato="processato"].active{background:#7c3aed;color:#fff}
.prev-filter-btn[data-stato="in_attesa"]{color:var(--orange);border-color:var(--orange)}
.prev-filter-btn[data-stato="in_attesa"].active{background:var(--orange);color:#fff}
.prev-filter-btn[data-stato="confermato"]{color:var(--green);border-color:var(--green)}
.prev-filter-btn[data-stato="confermato"].active{background:var(--green);color:#fff}
.search-wrapper{position:relative;display:flex;align-items:center;width:100%;max-width:260px}
.search-wrapper .search-icon{position:absolute;left:14px;color:#94a3b8;pointer-events:none}
.ordini-search-input{padding:8px 32px 8px 36px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:.85rem;font-weight:500;font-family:inherit;outline:none;width:100%;transition:.15s;box-shadow:0 2px 8px rgba(23,28,31,.04)}
.ordini-search-input:hover{border-color:rgba(0,108,170,.3)}
.ordini-search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.1)}
.search-clear{position:absolute;right:10px;width:20px;height:20px;border:0;border-radius:50%;background:#e2e8f0;color:#475569;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s}
.search-clear:hover{background:#cbd5e1;color:#0f172a}
.ordini-search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.ord-period-btn.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.ord-date-chip{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ord-date-chip.has-value{background:var(--orange);color:#fff;border-color:var(--orange)}
.ord-date-chip input[type="date"]{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;width:100%;height:100%}
.ord-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ord-filter-btn[data-stato="nuovo"]{color:var(--orange);border-color:var(--orange)}
.ord-filter-btn[data-stato="nuovo"].active{background:var(--orange);color:#fff}
.ord-filter-btn[data-stato="confermato"]{color:var(--green);border-color:var(--green)}
.ord-filter-btn[data-stato="confermato"].active{background:var(--green);color:#fff}
.ord-filter-btn[data-stato="rifiutato"]{color:var(--red);border-color:var(--red)}
.ord-filter-btn[data-stato="rifiutato"].active{background:var(--red);color:#fff}
.order-card{
background:var(--white);
border-radius:12px;
padding:16px 20px;
margin-bottom:12px;
box-shadow:0 4px 20px rgba(23,28,31,.04);
}
.order-card.stato-confermato{border-left:4px solid var(--green);border:1px solid rgba(22,163,74,.08)}
.order-card.stato-rifiutato{border-left:4px solid var(--red);opacity:.6;border:1px solid rgba(220,38,38,.08)}
.order-card.stato-annullato{border-left:4px solid #94a3b8;opacity:.55;border:1px solid rgba(148,163,184,.18)}
.order-card.stato-nuovo{border-left:4px solid var(--orange);border:1px solid rgba(232,80,29,.08)}
.order-stato.annullato{background:#f1f5f9;color:#475569}
.btn-annulla{padding:8px 16px;background:var(--bg);color:#475569;border:1px solid var(--border);border-radius:8px;font-size:.82rem;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.btn-annulla:hover{background:#e2e8f0;border-color:#94a3b8;color:#0f172a}
.order-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:12px;flex-wrap:wrap;gap:8px;
}
.order-azienda{font-weight:700;font-size:1rem}
.order-meta{font-size:.75rem;color:var(--text3)}
.order-stato{
font-size:.7rem;font-weight:700;
padding:4px 10px;border-radius:20px;
text-transform:uppercase;letter-spacing:.3px;
}
.order-stato.nuovo{background:#fff7ed;color:var(--orange)}
.order-stato.confermato{background:#f0fdf4;color:var(--green)}
.order-stato.rifiutato{background:#fef2f2;color:var(--red)}
.ord-pill,.prev-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;vertical-align:middle;margin-right:6px}
.prev-pill-stock{background:#fef3c7;color:#92400e;box-shadow:inset 0 0 0 1px #fcd34d}
.prev-pill-offerta{background:#dbeafe;color:#1e40af;box-shadow:inset 0 0 0 1px #93c5fd}
.prev-pill-offerta-pdf{background:#ede9fe;color:#6b21a8;box-shadow:inset 0 0 0 1px #c4b5fd}
.ord-pill-stock{background:#ede9fe;color:#6b21a8;box-shadow:inset 0 0 0 1px #d8b4fe}
.ord-pill-allevato{background:#dcfce7;color:#14532d;box-shadow:inset 0 0 0 1px #86efac}
.ord-pill-pescato{background:#fed7aa;color:#9a3412;box-shadow:inset 0 0 0 1px #fdba74}
.ord-pill-offerta{background:#fef3c7;color:#92400e;box-shadow:inset 0 0 0 1px #fcd34d}
.ord-pill-milano{background:#dbeafe;color:#075985;box-shadow:inset 0 0 0 1px #7dd3fc}
/* === Stock Milano tab === */
/* Stato chip Milano */
.milano-stato-chip{font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.milano-stato-chip.stato-pubblica{background:#dcfce7;color:#15803d;border-color:#86efac}
.milano-stato-chip.stato-aggiornamento{background:#fef9c3;color:#854d0e;border-color:#fde68a}
.milano-stato-chip.stato-off,.milano-stato-chip.stato-{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
/* Bottone Nuovo ordine in toolbar */
.milano-btn-new{padding:8px 18px;background:var(--orange);color:#fff;border:none;border-radius:20px;font-weight:700;cursor:pointer;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.milano-btn-new:hover{background:#c54417}
/* Distribuzione filtri tab Stock Milano: sinistra search/filtri/modo — destra estrema "+ Nuovo ordine" */
#tab-stockmilano .filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#tab-stockmilano .filters .search{flex:1 1 220px;max-width:320px}
#tab-stockmilano .filters .btn-sync{flex:0 0 36px}
#tab-stockmilano .filters .milano-btn-new{margin-left:auto}
@media(max-width:760px){
#tab-stockmilano .filters{gap:6px}
#tab-stockmilano .filters .search{flex:1 1 100%;max-width:none}
#tab-stockmilano .filters #milano-modo-switch{margin-left:0;flex:1 1 100%}
#tab-stockmilano .filters .milano-btn-new{flex:1 1 100%;justify-content:center;margin:0}
}
/* Carrello Milano in topbar (coerente con pagine cliente: square, badge corner) */
.milano-cart-wrapper{position:relative;display:inline-flex;align-items:center}
.milano-btn-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:8px;color:#fff;cursor:pointer;transition:.15s;padding:7px 10px;font-family:inherit}
.milano-btn-cart:hover{background:rgba(255,255,255,.25)}
.milano-btn-cart svg{width:18px;height:18px}
.milano-cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-size:.7rem;font-weight:700;border-radius:10px;padding:0 5px;border:2px solid var(--blue);line-height:1}
@keyframes cartDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.milano-cart-dropdown{position:fixed;top:60px;right:0;bottom:0;background:#fff;border-radius:0;border-left:1px solid var(--border,#e2e8f0);box-shadow:-14px 0 44px rgba(15,23,42,.20);width:min(440px,92vw);max-height:none;height:auto;display:flex;flex-direction:column;overflow:hidden;z-index:1000;color:var(--text);animation:cartDrawerIn .25s ease}
.milano-cart-dd-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:#f8fafc}
.milano-cart-dd-head h3{margin:0;font-size:.95rem;color:var(--text);font-weight:700}
.milano-cart-close{background:none;border:none;font-size:1.4rem;line-height:1;color:var(--text3);cursor:pointer;padding:0 4px}
.milano-cart-dd-form{padding:10px 14px;background:#f8fafc;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.milano-cart-dd-form input,.milano-cart-dd-form textarea{width:100%;padding:7px 10px;border:1.5px solid var(--border);border-radius:6px;font:inherit;outline:none;font-size:.82rem;background:#fff}
.milano-cart-dd-form input:focus,.milano-cart-dd-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.milano-cart-dd-form .milano-cliente-info{padding:6px 10px;background:#f0f9ff;border:1px solid #bae6fd;border-left:3px solid #0284c7;border-radius:6px;font-size:.78rem;color:#075985}
.milano-cart-dd-form .milano-cliente-info .mc-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.milano-cart-dd-form .milano-cliente-info .mc-tag{background:#fff;border:1px solid #bae6fd;padding:1px 6px;border-radius:8px;font-size:.7rem;font-weight:600;color:#075985}
.milano-cart-dd-cliente{padding:8px 16px;background:#f0f9ff;border-bottom:1px solid #bae6fd;font-size:.8rem;color:#075985}
.milano-cart-dd-items{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.milano-cart-dd-totale{padding:10px 16px;background:#f0fdf4;border-top:1px solid #bbf7d0;font-size:.88rem;text-align:right;color:var(--text2);min-height:18px}
.milano-cart-dd-totale strong{color:var(--text);margin:0 2px}
.milano-cart-dd-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:#f8fafc}
.milano-cart-dd-actions .btn-svuota-cart{flex:0 0 auto;padding:8px 14px;background:var(--white);color:var(--text2);border:1.5px solid var(--border);border-radius:8px;font-weight:600;cursor:pointer;font-size:.85rem}
.milano-cart-dd-actions .btn-ordina-cart{flex:1;padding:9px 14px;background:#16a34a;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:.88rem}
.milano-cart-dd-actions .btn-ordina-cart:disabled{background:#cbd5e1;cursor:not-allowed;opacity:.7}
.milano-modal-cart-hint{padding:8px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.82rem;color:#15803d;text-align:center}
.milano-modal-cart-hint strong{font-weight:800}
/* Modal Nuovo ordine */
.milano-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.milano-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.milano-modal-box{position:relative;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.18);width:min(720px,92vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.milano-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:#f8fafc}
.milano-modal-head h3{margin:0;font-size:1.05rem;color:var(--text);font-weight:700}
.milano-modal-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--text3);cursor:pointer;padding:0 4px}
.milano-modal-close:hover{color:var(--text)}
.milano-modal-body{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.milano-modal-field{display:flex;flex-direction:column;gap:4px}
.milano-modal-field>span{font-size:.78rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.milano-modal-field input,.milano-modal-field textarea{padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font:inherit;outline:none;font-size:.9rem}
.milano-modal-field input:focus,.milano-modal-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.milano-modal-field textarea{resize:vertical;min-height:40px}
.milano-cliente-info{background:#f0f9ff;border:1px solid #bae6fd;border-left:4px solid #0284c7;border-radius:8px;padding:8px 12px;font-size:.82rem}
.milano-cliente-info .mc-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.milano-cliente-info .mc-row-meta{color:var(--text2);font-size:.76rem;margin-bottom:0}
.milano-cliente-info .mc-tag{background:#fff;border:1px solid #bae6fd;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:600;color:#075985}
.milano-modal-addprod{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.milano-modal-addprod h4{margin:0;font-size:.85rem;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.milano-combo-wrap{position:relative;flex:1 1 auto;min-width:0}
.milano-addprod-inline{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.milano-prod-search{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font:inherit;outline:none;font-size:.88rem;background:#fff}
.milano-prod-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.milano-combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50}
.milano-combo-opt{padding:8px 12px;font-size:.85rem;cursor:pointer;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;gap:8px}
.milano-combo-opt:last-child{border-bottom:none}
.milano-combo-opt:hover,.milano-combo-opt.highlight{background:var(--blue);color:#fff}
.milano-combo-opt.disabled{color:#cbd5e1;cursor:not-allowed;font-style:italic;background:#f8fafc}
.milano-combo-opt.disabled:hover{background:#f8fafc;color:#cbd5e1}
.milano-combo-opt .mc-disp{font-size:.72rem;font-weight:700;opacity:.85;white-space:nowrap}
.milano-combo-empty{padding:12px;text-align:center;color:var(--text3);font-style:italic;font-size:.85rem}
.milano-add-prod-info{padding:8px 12px;background:#f0f9ff;border:1px solid #bae6fd;border-left:4px solid #0284c7;border-radius:8px;font-size:.85rem;color:#075985;line-height:1.5}
.milano-add-prod-info strong{font-weight:800;color:#0c4a6e}
.milano-add-prod-info .mc-tag{background:var(--blue);color:#fff;padding:2px 8px;border-radius:10px;font-size:.72rem;font-weight:700;font-family:ui-monospace,monospace}
.milano-foot-qta{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font:inherit;outline:none;font-size:.88rem;text-align:center;font-weight:700;width:90px}
.milano-foot-qta:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,29,.15)}
/* Pull-to-refresh indicator */
.ptr-indicator{position:fixed;top:0;left:50%;transform:translate(-50%,-100%);z-index:200;background:#fff;border:1px solid var(--border);border-radius:0 0 20px 20px;padding:8px 18px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--text2);transition:transform .25s ease;pointer-events:none}
.ptr-indicator.visible{transform:translate(-50%,0)}
.ptr-indicator.refreshing svg{animation:spin .7s linear infinite}
.ptr-indicator.armed{color:var(--orange)}
/* Overlay successo ordine Milano (stesso stile pagina cliente) */
.milano-order-success{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#006caa 0%,#004d7a 100%);display:flex;align-items:center;justify-content:center}
.milano-success-box{text-align:center;padding:48px 40px;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.2);max-width:420px;width:90%;animation:milanoSuccessIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes milanoSuccessIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.milano-success-logo{max-width:160px;width:100%;height:auto;margin-bottom:16px}
.milano-success-icon{margin-bottom:20px}
.milano-success-box h2{font-size:1.4rem;margin:0 0 10px;color:#16a34a}
.milano-success-box p{color:var(--text2);font-size:.9rem;margin:0 0 10px;line-height:1.5}
.milano-success-id{font-family:ui-monospace,monospace;font-size:.82rem;color:var(--text3);background:var(--bg);padding:6px 12px;border-radius:6px;display:inline-block}
.milano-order-success .btn-new-order{margin-top:16px;padding:12px 28px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s}
.milano-order-success .btn-new-order:hover{background:#005a8c}
.milano-btn-addtocart{padding:8px 14px;background:#16a34a;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:.85rem;white-space:nowrap}
.milano-btn-addtocart:hover{background:#15803d}
.milano-add-prod-info{margin-top:8px;padding:6px 10px;background:#fff;border-radius:6px;font-size:.82rem;color:var(--text2);border:1px solid var(--border)}
.milano-modal-recap h4{margin:0 0 8px;font-size:.85rem;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.milano-modal-items-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:6px}
.mm-item{display:grid;grid-template-columns:80px 1fr 60px 60px 80px 28px;gap:8px;align-items:center;padding:6px 8px;background:#f8fafc;border-radius:6px;font-size:.82rem}
.mm-codice{font-family:ui-monospace,monospace;font-size:.78rem;color:#fff;font-weight:600;background:var(--blue);padding:2px 6px;border-radius:4px;text-align:center}
.mm-desc{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-qta,.mm-kg{text-align:center;color:var(--text2);font-weight:600}
.mm-eur{text-align:right;color:var(--green);font-weight:700}
.mm-rm{background:#fee2e2;color:#991b1b;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:1rem;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.mm-rm:hover{background:#fecaca}
.milano-modal-tot{margin-top:10px;padding:8px 12px;background:#f0fdf4;border-radius:8px;font-size:.88rem;color:var(--text2);text-align:right}
.milano-modal-tot strong{color:var(--text);margin:0 2px}
.milano-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);background:#f8fafc}
.milano-modal-foot .btn-primary{padding:10px 24px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:.9rem}
.milano-modal-foot .btn-primary:hover:not(:disabled){background:#c54417}
.milano-modal-foot .btn-primary:disabled{background:#cbd5e1;cursor:not-allowed;opacity:.7}
.milano-modal-foot .btn-secondary{padding:10px 20px;background:var(--white);color:var(--text2);border:1.5px solid var(--border);border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem}
@media(max-width:760px){
.milano-btn-new{width:100%;margin-left:0;justify-content:center}
.milano-modal-box{width:96vw;max-height:96vh;border-radius:10px}
.milano-modal-body{padding:12px}
.milano-addprod-row{flex-direction:column;align-items:stretch}
.milano-addprod-row input,.milano-btn-addtocart{width:100%}
.mm-item{grid-template-columns:1fr;gap:4px;text-align:left}
.mm-codice,.mm-qta,.mm-kg,.mm-eur{text-align:left;width:fit-content}
}
/* Mobile: card list invece di tabella */
.order-items-mobile{display:none;flex-direction:column;gap:8px;margin-bottom:12px}
.oi-card{background:#f8fafc;border-radius:10px;padding:10px 14px}
.oi-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.oi-name{font-size:.82rem;font-weight:600;color:#005384;line-height:1.3}
.oi-bottom{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.oi-chip{font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:4px}
.oi-chip.c1{background:#86efac;color:#14532d}
.oi-chip.c2{background:#fef9c3;color:#a16207}
.oi-chip.c3{background:#e0f2fe;color:#0369a1}
.oi-note{font-size:.72rem;color:var(--text3);font-style:italic}
@media(max-width:900px){
.order-table-wrap,.prev-table-wrap{display:none!important}
.order-items-mobile{display:flex!important}
}
@media(min-width:901px){
.order-items-mobile{display:none!important}
}
.order-table-wrap{margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.order-table{min-width:600px;border-collapse:collapse;font-size:.82rem}
.order-table th{padding:6px 10px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.order-table td{padding:6px 10px;border-bottom:1px solid var(--bg);vertical-align:middle;white-space:nowrap}
.order-table td:nth-child(2){white-space:normal;min-width:180px;max-width:320px;word-break:break-word}
.order-table tr:last-child td{border-bottom:none}
.order-totale-row td{border-top:2px solid var(--border);padding-top:8px}
/* Colonne consegna */
.th-cons1,.td-cons1,.th-ord1,.td-ord1{text-align:center;font-weight:700;background:#86efac;color:#14532d}
.th-cons2,.td-cons2,.th-ord2,.td-ord2{text-align:center;font-weight:700;background:#fef9c3;color:#a16207}
.th-cons3,.td-cons3,.th-ord3,.td-ord3{text-align:center;font-weight:700;background:#e0f2fe;color:#0369a1}
.order-note-gen{padding:8px 12px;margin-top:8px;background:#fff7ed;border-left:3px solid var(--orange);border-radius:4px;font-size:.82rem;color:var(--text)}
.order-note-gen strong{color:var(--orange);margin-right:4px}
.ordini-stats{display:flex;justify-content:center;gap:12px;margin:12px auto 16px;max-width:1270px;flex-wrap:wrap}
.stat-card{flex:0 1 280px;min-width:220px;max-width:360px;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 2px 12px rgba(23,28,31,.04);border:1px solid #f1f5f9;display:flex;flex-direction:column;gap:4px;transition:.15s}
.stat-card-combo{flex:1 1 100%;max-width:1270px;flex-direction:row;gap:0;padding:0;overflow:hidden}
.stat-combo-section{flex:1 1 0;padding:16px 22px;display:flex;flex-direction:column;gap:4px;min-width:0;text-align:center;align-items:center}
.stat-combo-section .stat-val{justify-content:center}
.stat-combo-section + .stat-combo-section{border-left:1px solid #e2e8f0}
@media(max-width:700px){.stat-card-combo{flex-direction:column}.stat-combo-section + .stat-combo-section{border-left:none;border-top:1px solid #e2e8f0}}
.stat-card.active{border-color:var(--orange);box-shadow:0 4px 16px rgba(232,80,29,.15)}
.stat-card.active .stat-label{color:var(--orange)}
.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-weight:600}
.stat-val{display:flex;align-items:baseline;gap:4px}
.stat-val strong{font-size:1.6rem;color:var(--text);font-weight:800;line-height:1}
.stat-val small{font-size:.72rem;color:var(--text3)}
.stat-sub{font-size:.75rem;color:var(--text2)}
.stat-eur{font-size:1.05rem;color:var(--orange);font-weight:700;margin-top:2px}
@media(max-width:700px){.stat-card{flex:1 1 100%;max-width:100%}}
.order-summary-tot{display:flex;gap:16px;padding:10px 14px;margin-top:10px;background:#f8fafc;border-radius:8px;font-size:.88rem;color:var(--text2);flex-wrap:wrap;align-items:center}
.ost-spacer{flex:1}
.btn-order-pdf,.btn-order-csv{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1.5px solid var(--border);border-radius:8px;color:var(--text2);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.btn-order-pdf:hover,.btn-order-csv:hover{border-color:var(--blue);color:var(--blue)}
.btn-order-pdf svg,.btn-order-csv svg{flex-shrink:0}
.order-summary-tot span{display:inline-flex;align-items:center;gap:4px}
.order-summary-tot strong{color:var(--text);font-weight:700}
.order-summary-tot .ost-eur strong{color:var(--orange)}
.order-actions{display:flex;gap:8px;justify-content:flex-end}
.btn-conferma{
padding:8px 16px;background:var(--green);color:#fff;
border:none;border-radius:8px;font-size:.82rem;font-weight:600;
font-family:inherit;cursor:pointer;transition:.15s;
}
.btn-conferma:hover{opacity:.9}
.btn-rifiuta{
padding:8px 16px;background:var(--bg);color:var(--red);
border:1px solid var(--border);border-radius:8px;
font-size:.82rem;font-weight:600;
font-family:inherit;cursor:pointer;transition:.15s;
}
.btn-rifiuta:hover{background:#fef2f2;border-color:var(--red)}
/* Rifiuto ordine con motivazione personalizzata */
.modal-rifiuto{max-width:620px;max-height:92vh}
.rifiuto-cliente{margin:4px 0 0;color:var(--text2);font-size:.8rem}
.rifiuto-canali{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.rifiuto-canale{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#ecfdf5;color:#166534;font-size:.76rem;font-weight:700;border:1px solid #bbf7d0}
.rifiuto-canale.mancante{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.rifiuto-label{display:block;margin-bottom:8px;font-size:.82rem;font-weight:700;color:var(--text)}
#rifiuto-motivo{width:100%;min-height:112px;resize:vertical;padding:11px 12px;border:1.5px solid var(--border);border-radius:9px;font:inherit;font-size:.88rem;line-height:1.5;color:var(--text);outline:none}
#rifiuto-motivo:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.09)}
.rifiuto-count{text-align:right;margin-top:4px;color:var(--text3);font-size:.7rem}
.rifiuto-preview{margin-top:14px;padding:13px 15px;background:#f8fafc;border:1px solid var(--border);border-left:4px solid var(--red);border-radius:8px;font-size:.8rem;line-height:1.45;color:var(--text2)}
.rifiuto-preview>strong{display:block;color:var(--text);margin-bottom:6px}
.rifiuto-preview p{margin:3px 0}
.rifiuto-footer{gap:12px}
.rifiuto-footer>span{font-size:.74rem;color:var(--text3)}
.rifiuto-footer>div{display:flex;gap:8px;margin-left:auto}
.btn-rifiuta-submit{padding:9px 16px;background:var(--red);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.btn-rifiuta-submit:hover{background:#b91c1c}
.btn-rifiuta-submit:disabled{opacity:.45;cursor:not-allowed}
.order-reject-reason{margin:0 0 12px;padding:10px 12px;background:#fef2f2;border-left:4px solid var(--red);border-radius:7px;color:#7f1d1d;font-size:.82rem;line-height:1.45;white-space:pre-wrap}
.order-reject-reason strong{display:block;margin-bottom:3px;color:#991b1b}
.campo-facoltativo{font-weight:500;color:var(--text3)}
#conferma-nota{width:100%;min-height:112px;resize:vertical;padding:11px 12px;border:1.5px solid var(--border);border-radius:9px;font:inherit;font-size:.88rem;line-height:1.5;color:var(--text);outline:none}
#conferma-nota:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.09)}
.conferma-preview{border-left-color:var(--red);background:#fef2f2}
.conferma-preview #conferma-preview-riga{color:#991b1b}
.btn-conferma-submit{padding:9px 16px;background:var(--green);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.btn-conferma-submit:hover{background:#15803d}
.btn-conferma-submit:disabled{opacity:.45;cursor:not-allowed}
.order-confirm-note{margin:0 0 12px;padding:10px 12px;background:#fef2f2;border-left:4px solid var(--red);border-radius:7px;color:#991b1b;font-size:.82rem;line-height:1.45;white-space:pre-wrap}
.order-confirm-note strong{display:block;margin-bottom:3px;color:#991b1b}
@media(max-width:600px){.rifiuto-footer{align-items:stretch;flex-direction:column}.rifiuto-footer>div{width:100%;margin-left:0}.rifiuto-footer button{flex:1}}
/* ══════ INVIA CLIENTI ══════ */
.invia-section h2{font-size:1.1rem;margin-bottom:6px}
.invia-desc{font-size:.85rem;color:var(--text2);margin-bottom:20px}
.upload-zone{
border:2px dashed var(--border);
border-radius:var(--radius);
padding:32px 20px;
text-align:center;
cursor:pointer;transition:.15s;
display:flex;flex-direction:column;align-items:center;gap:8px;
color:var(--text2);margin-bottom:24px;
}
.upload-zone:hover{border-color:var(--blue);background:#f8fafc}
.upload-zone.dragover{border-color:var(--orange);background:#fff7ed}
.upload-zone svg{color:var(--text3)}
.upload-zone span{font-size:.85rem}
.upload-zone small{font-size:.72rem;color:var(--text3)}
.manual-add{margin-bottom:24px}
.manual-add h3{font-size:.9rem;margin-bottom:10px;color:var(--text2)}
.manual-form{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:8px;align-items:end;
}
.manual-form input{
padding:9px 12px;border:1px solid var(--border);
border-radius:8px;font-size:.82rem;font-family:inherit;
outline:none;transition:.15s;
}
.manual-form input:focus{border-color:var(--blue)}
.manual-form input::placeholder{color:var(--text3)}
.btn-add-cliente{
padding:9px 16px;background:var(--blue);color:#fff;
border:none;border-radius:8px;font-size:.82rem;
font-weight:600;font-family:inherit;cursor:pointer;
transition:.15s;white-space:nowrap;
}
.btn-add-cliente:hover{opacity:.9}
#clienti-preview h3{font-size:.9rem;margin-bottom:10px}
.invia-actions{
display:flex;gap:10px;justify-content:flex-end;
margin-top:12px;
}
.btn-invia{
padding:10px 20px;
background:var(--green);color:#fff;border:none;
border-radius:8px;font-size:.85rem;font-weight:600;
font-family:inherit;cursor:pointer;transition:.15s;
display:inline-flex;align-items:center;gap:6px;
}
.btn-invia:hover{opacity:.9}
.btn-invia:disabled{opacity:.4;cursor:not-allowed}
.btn-remove{
background:none;border:none;color:var(--red);
cursor:pointer;font-size:.8rem;font-weight:600;
padding:4px 8px;border-radius:4px;transition:.15s;
}
.btn-remove:hover{background:#fef2f2}
#invio-results h3{font-size:.9rem;margin-bottom:10px}
.result-item{
display:flex;align-items:center;justify-content:space-between;
padding:8px 12px;border-bottom:1px solid var(--bg);
font-size:.82rem;
}
.result-ok{color:var(--green)}
.result-fail{color:var(--red)}
/* ── Empty ── */
.empty{padding:48px 20px;text-align:center;color:var(--text3);font-size:.9rem}
.no-stock{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:60px 20px;text-align:center;gap:12px;color:var(--text3);
}
.no-stock svg{color:var(--border);margin-bottom:4px}
.no-stock h3{font-size:1.1rem;color:var(--text2);font-weight:600;margin:0}
.no-stock p{font-size:.85rem;color:var(--text3);max-width:360px;line-height:1.5;margin:0}
/* Loader */
.loader-box{
padding:80px 20px;text-align:center;color:var(--text3);font-size:.85rem;
}
.loader-box .spinner{
width:36px;height:36px;
border:3px solid var(--border);border-top-color:var(--blue);
border-radius:50%;animation:spin .7s linear infinite;
margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.prev-loader{padding:60px 20px;text-align:center;color:var(--text3);font-size:.85rem}
.prev-loader .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
.is-loading .filters{opacity:.4;pointer-events:none}
.is-loading .table-card{display:none}
/* ══════ TOASTS ══════ */
.toasts{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column-reverse;gap:10px}
.toast{
padding:14px 20px;border-radius:12px;
font-size:.85rem;font-weight:500;line-height:1.4;
box-shadow:0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
animation:toastSlide .4s cubic-bezier(.22,1,.36,1);
display:flex;align-items:center;gap:10px;
max-width:420px;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.toast.success{background:rgba(240,253,244,.92);color:#15803d;border:1px solid #86efac}
.toast.error{background:rgba(254,242,242,.92);color:#dc2626;border:1px solid #fca5a5}
.toast.info{background:rgba(239,246,255,.92);color:#2563eb;border:1px solid #93c5fd}
@keyframes toastSlide{
from{opacity:0;transform:translateY(16px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* ══════ PREVENTIVI ══════ */
.prev-toolbar{display:flex;gap:10px;margin-bottom:16px}
.prev-filters{display:flex;gap:6px;margin-bottom:12px;align-items:center;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.prev-filter-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.prev-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.prev-filter-btn[data-stato="confermato"]{color:var(--green);border-color:var(--green)}
.prev-filter-btn[data-stato="confermato"].active{background:var(--green);color:#fff}
.prev-filter-btn[data-stato="inviato"]{color:var(--blue);border-color:var(--blue)}
.prev-filter-btn[data-stato="inviato"].active{background:var(--blue);color:#fff}
.prev-filter-btn[data-stato="bozza"]{color:var(--text3);border-color:var(--text3)}
.prev-filter-btn[data-stato="bozza"].active{background:var(--text3);color:#fff}
.preventivi-list{display:flex;flex-direction:column;gap:10px}
.prev-load-more{align-self:center;margin:12px 0 4px;padding:10px 22px;border:1.5px solid var(--blue);border-radius:22px;background:var(--white);color:var(--blue);font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:.15s}
.prev-load-more:hover{background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(0,108,170,.2)}
.prev-load-more small{font-size:.72rem;font-weight:500;opacity:.75}
.prev-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.prev-card.stato-bozza{border-left:3px solid var(--text3)}
.prev-card.stato-inviato{border-left:3px solid var(--blue)}
.prev-card.stato-processato{border-left:3px solid #7c3aed}
.prev-card.stato-in_attesa{border-left:3px solid var(--orange)}
.prev-card.stato-confermato{border-left:3px solid var(--green)}
.prev-card.stato-scaduto{border-left:3px solid var(--red)}
.prev-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.prev-cliente{font-weight:700;font-size:.95rem;color:var(--text)}
.prev-meta{display:block;font-size:.75rem;color:var(--text3);margin-top:2px}
.prev-stato{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.prev-stato.bozza{background:#f1f5f9;color:var(--text3)}
.prev-stato.inviato{background:#eff6ff;color:var(--blue)}
.prev-stato.processato{background:#f5f3ff;color:#7c3aed}
.prev-stato.in_attesa{background:#fff7ed;color:var(--orange)}
.prev-document-trace.processato{background:#f5f3ff;color:#6d28d9}
.prev-document-trace.in_attesa{background:#fff7ed;color:#c2410c}
.prev-stato.confermato{background:#ecfdf5;color:var(--green)}
.prev-stato.scaduto{background:#fef2f2;color:var(--red)}
.prev-summary{font-size:.82rem;color:var(--text2);margin-bottom:8px}
.prev-note-gen{margin-bottom:10px}
.prev-note-textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:.82rem;font-family:inherit;color:var(--text);resize:vertical;min-height:36px;outline:none;background:#fff7ed;transition:.15s}
.prev-note-textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,29,.08)}
.prev-note-textarea::placeholder{color:var(--text3)}
.prev-table-wrap{margin:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
/* Scrollbar thin globale */
html{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.prev-prod-table{font-size:.75rem;min-width:500px}
.prev-prod-table .row-pref{background:#dcfce7}
.prev-prod-table .row-promo{background:#f5d0fe}
.prev-risposta{font-size:.8rem;color:var(--text2);background:#f8fafc;padding:10px;border-radius:8px;margin-bottom:8px}
.prev-risposta strong{color:var(--text)}
.prev-actions{display:flex;gap:8px;justify-content:flex-end}
.btn-prev-invia,.btn-prev-link{padding:6px 14px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.btn-prev-invia:hover,.btn-prev-link:hover{opacity:.85}
.btn-prev-delete{padding:6px 14px;background:none;color:var(--red);border:1px solid #fecaca;border-radius:6px;font-size:.78rem;font-weight:500;font-family:inherit;cursor:pointer}
.btn-prev-delete:hover{background:#fef2f2}
/* Modale preventivo */
.modal-preventivo{max-width:700px;max-height:90vh;overflow-y:auto}
.prev-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.form-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.form-group input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.85rem;font-family:inherit;color:var(--text);outline:none;transition:.15s}
.form-group input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.08)}
.prev-section-title{font-size:.85rem;font-weight:700;color:var(--text);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.prev-prodotti{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.prev-item-header{display:grid;grid-template-columns:80px 1fr 70px 80px 30px;gap:6px;font-size:.7rem;font-weight:600;color:var(--text3);text-transform:uppercase;padding:0 4px}
.prev-row{display:grid;grid-template-columns:80px 1fr 70px 80px 30px;gap:6px;align-items:center}
.prev-row-cat{display:grid;grid-template-columns:1fr 30px;gap:6px;align-items:center}
.prev-inp,.prev-cat-input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:.82rem;font-family:inherit;outline:none;color:var(--text)}
.prev-inp:focus,.prev-cat-input:focus{border-color:var(--blue)}
.prev-cat-input{background:#fff7ed;border-color:#fed7aa;font-weight:600;color:var(--orange)}
.prev-row-del{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);font-size:1rem;cursor:pointer}
.prev-row-del:hover{background:#fef2f2;color:var(--red);border-color:#fecaca}
.btn-add-row{display:inline-block;padding:6px 12px;background:none;border:1px dashed var(--border);border-radius:6px;color:var(--text3);font-size:.78rem;font-family:inherit;cursor:pointer;margin-right:8px;transition:.15s}
.btn-add-row:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.btn-add-cat:hover{border-color:var(--orange);color:var(--orange);background:#fff7ed}
/* ══════ RESPONSIVE ══════ */
/* --- Tablet landscape / small desktop (< 1024px) --- */
@media(max-width:1400px){
/* Laptop 1366x768 (con scaling Windows 125% = ~1093 CSS px effective): layout compatto */
.topbar{padding:8px 14px}
.topbar-btn{padding:7px 12px;font-size:.78rem}
.chip{padding:7px 12px;font-size:.78rem}
.modo-btn{padding:7px 12px;font-size:.78rem}
.search input{padding:8px 0;font-size:.85rem}
.tab{padding:10px 18px;font-size:.85rem}
.filters{padding:10px 16px;gap:8px;max-width:100%}
.page{padding:8px 14px 32px;max-width:100%}
.page-content{padding:0 14px 16px}
.ordini-toolbar{max-width:100%;padding:12px 14px}
.ordini-stats{max-width:100%;padding:0 14px}
thead th{padding:8px 10px}
tbody td{padding:6px 10px;font-size:.8rem}
.th-casse{width:160px}
.qty-btn{width:30px;height:30px;font-size:14px}
.qty-input{width:50px;font-size:14px;padding:5px 2px}
.table-scroll{max-height:calc(100vh - 280px)}
}
@media(max-width:900px){
.table-scroll{display:none}
.stock-cards{display:block}
*::-webkit-scrollbar{width:0 !important;height:0 !important}
*{scrollbar-width:none !important}
/* Milano: usa stock-cards mobile (pattern Codroipo) — table-scroll resta nascosta */
#milano-cards{display:block}
}
@media(max-width:1024px){
.topbar-btn{padding:7px 12px;font-size:.75rem}
.chip{padding:7px 12px;font-size:.78rem}
.modo-btn{padding:7px 12px;font-size:.75rem}
}
/* --- Tablet small (< 768px) --- */
@media(max-width:768px){
.topbar{padding:8px 12px;height:auto;gap:8px;flex-wrap:wrap}
.topbar-left{flex:0 0 auto}
.topbar-logo{height:48px}
.topbar-info{display:none}
.topbar-right{gap:4px;flex:1;justify-content:flex-end}
.topbar-btn{padding:6px 10px;font-size:.72rem}
.failover-indicator{font-size:.65rem;padding:.25rem .5rem;gap:.3rem}
.failover-label{display:none}
.failover-system{padding:.1rem .35rem;gap:.2rem}
.failover-icon{width:12px;height:12px}
/* Modo switch: piena larghezza sotto i filtri */
.modo-switch{width:100%;margin-left:0}
.modo-label{display:none}
.modo-track{flex:1}
.modo-btn{flex:1;justify-content:center;padding:7px 10px;font-size:.74rem}
/* Modale: più largo su tablet */
.modal-content{width:95%;max-width:520px}
}
/* Mobile portrait */
@media(max-width:640px) and (orientation:portrait){
.login-screen{padding:20px}
.login-card{padding:24px 20px 20px;max-width:100%;width:100%;border-radius:16px;box-sizing:border-box}
.login-logo{max-width:120px}
.login-title{font-size:1.3rem}
.login-subtitle{font-size:.82rem}
.login-btn{padding:14px;font-size:.95rem}
.input-group input{font-size:1rem;padding:14px 42px 14px 44px}
/* Topbar portrait — Stitch: logo sx, pulsanti dx */
.topbar{padding:14px 16px;height:auto;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.topbar-left{display:flex;align-items:center;flex-shrink:0}
.topbar-logo{height:36px;padding:3px 6px;border-radius:8px}
.topbar-info{display:none}
.topbar-right{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;flex:1}
.topbar-btn{padding:7px 12px;font-size:.68rem;height:32px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;justify-content:center}
.topbar-btn span,.topbar-btn-text{display:inline}
.topbar-btn svg{width:13px;height:13px}
.topbar-btn-logout{font-size:.68rem;flex:0 0 auto}
/* Tabs portrait — bottom bar fissa Stitch */
/* Bottombar floating — pill staccata dai bordi */
.tabs-bar{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;z-index:50;padding:0;background:transparent;border-top:none;margin:0;height:60px;pointer-events:none;justify-content:stretch}
.tabs-bar::after{display:none}
.tabs{pointer-events:auto;background:var(--blue);border:1px solid rgba(255,255,255,.12);border-radius:18px;max-width:none;width:100%;overflow:hidden;height:100%;align-items:stretch;box-shadow:0 14px 32px rgba(15,23,42,.22),0 4px 12px rgba(0,83,132,.18)}
.tab-slider{display:block;background:linear-gradient(180deg,#f97316,#e8501d);border-radius:14px;box-shadow:0 4px 12px rgba(232,80,29,.35);margin:5px 0;top:0!important;height:calc(100% - 10px)!important}
.tab{flex:1;padding:0;font-size:.65rem;color:rgba(255,255,255,.5);flex-direction:column;gap:3px;border-right:none;align-items:center;justify-content:center;border-radius:14px;margin:5px 2px}
.tab:first-child{margin-left:5px}
.tab:last-child{margin-right:5px}
.tab svg{width:22px;height:22px;opacity:.5}
.tab.active{color:#fff;background:none;box-shadow:none}
.tab.active svg{opacity:1}
.tab span{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* Filtri — Stitch style */
.filters{flex-wrap:wrap;gap:8px;padding:10px 0;display:flex}
.search{width:100%;flex:0 0 100%;border-radius:12px}
.search input{padding:10px 0;font-size:.88rem}
.chip-count{display:none}
.chip{padding:6px 14px;font-size:.75rem;text-align:center;justify-content:center;height:34px;align-items:center;border-radius:20px;font-weight:600;flex:0 0 auto;white-space:nowrap}
.chip.active{box-shadow:0 2px 8px rgba(0,83,132,.15)}
.modo-switch{width:100%;flex:0 0 100%;margin-left:0;margin-top:4px}
.modo-label{display:none}
.modo-btn{flex:1;padding:8px;font-size:.72rem;border-radius:20px}
.page{padding:12px 14px calc(90px + env(safe-area-inset-bottom))}
}
/* --- Mobile (< 640px) --- */
@media(max-width:640px){
/* Topbar mobile — Stitch: logo sx, pulsanti dx */
.topbar{padding:12px 14px;height:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.topbar-left{display:flex;align-items:center;flex-shrink:0}
.topbar-logo{height:32px;padding:2px 4px;border-radius:6px}
.topbar-info{display:none}
.topbar-right{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;flex:1}
.topbar-btn{padding:6px 10px;font-size:.6rem;min-height:30px;white-space:nowrap;border-radius:20px;display:inline-flex;align-items:center;gap:3px;flex:0 1 auto;justify-content:center}
.topbar-btn span,.topbar-btn-text{display:inline}
.topbar-btn svg{flex-shrink:0;width:12px;height:12px}
.topbar-btn-logout{flex:0 0 auto}
.failover-indicator{display:none}
/* Nascondi colonna "Prenotate" */
th:nth-child(5),td:nth-child(5){display:none}
/* Filtri — Stitch style */
.filters{
flex-wrap:wrap;top:auto;position:relative;
padding:10px 0;gap:8px;display:flex;
}
.search{width:100%;flex:0 0 100%;border-radius:12px}
.search input{padding:10px 0;font-size:.88rem}
.chip-count{display:none}
.chip{padding:6px 14px;font-size:.75rem;text-align:center;justify-content:center;height:34px;align-items:center;border-radius:20px;font-weight:600;flex:0 0 auto;white-space:nowrap}
.chip.active{box-shadow:0 2px 8px rgba(0,83,132,.15)}
/* Modo switch + reload sulla stessa riga */
.modo-switch{flex:1;margin-left:0;order:5}
.btn-sync{order:6;height:34px;width:34px;border-radius:20px;flex:0 0 auto}
.modo-label{display:none}
.modo-track{flex:1}
.modo-btn{flex:1;justify-content:center;padding:6px 8px;font-size:.72rem;border-radius:20px}
.page{padding:12px 14px calc(90px + env(safe-area-inset-bottom))}
/* Mobile: card a 1 colonna */
.stock-cards{grid-template-columns:1fr}
/* Card mobile: ottimizzazione */
.stock-card{padding:12px;margin-bottom:6px}
.card-top{gap:6px;margin-bottom:8px}
.card-name{font-size:.85rem}
.card-stats{gap:8px;margin-bottom:10px}
.card-stat{padding:6px 4px;border-radius:6px}
.card-stat-label{font-size:.6rem}
.card-stat-value{font-size:.85rem}
.card-qty .qty-btn{width:40px;height:40px;font-size:16px}
.card-qty .qty-input{width:52px;font-size:.95rem;padding:8px 4px}
.col-resize-handle{display:none}
/* Login: compatto ma centrato */
.login-card{padding:28px 24px 24px}
.login-logo{max-width:160px}
.login-title{font-size:1.2rem}
.login-subtitle{font-size:.8rem}
/* Nascondi scrollbar su mobile */
*::-webkit-scrollbar{width:0 !important;height:0 !important}
*{scrollbar-width:none !important}
/* Modale: quasi full screen */
.modal-content{width:95%;max-height:85vh;border-radius:12px}
.modal-header{padding:14px 16px}
.modal-body{padding:12px 16px}
.modal-footer{padding:10px 16px}
.clienti-toolbar{flex-direction:column;gap:8px}
.clienti-toolbar .search-input{width:100%}
/* Tab badge su mobile — già gestito dal portrait breakpoint */
/* Toast: posizionamento mobile-friendly */
.toasts{bottom:16px;right:12px;left:12px}
.toast{max-width:100%}
/* Ordini card mobile */
.order-header{flex-direction:column;gap:4px}
.order-meta{font-size:.7rem;word-break:break-word}
.order-item{flex-direction:column;gap:2px}
.order-item-name{font-size:.8rem}
.order-item-qty{font-size:.8rem;text-align:right}
.order-actions{flex-direction:column;gap:6px}
.btn-conferma,.btn-rifiuta{width:100%;text-align:center;justify-content:center;padding:10px}
}
/* --- Mobile small (< 480px) --- */
@media(max-width:480px){
.modo-btn{padding:7px 6px;font-size:.68rem}
.modo-dot{width:6px;height:6px}
/* Login ancora più compatto */
.login-card{padding:24px 18px 20px;border-radius:16px}
.login-logo{max-width:140px}
.input-group input{padding:12px 38px 12px 40px;font-size:.88rem}
.login-btn{padding:12px;font-size:.88rem}
}
/* --- Mobile tiny (< 375px) --- */
@media(max-width:375px){
.topbar-btn{padding:5px 6px;font-size:.65rem;gap:3px}
.topbar-logo{height:44px}
.tab{font-size:.5rem}
.tab svg{width:20px;height:20px}
.modo-btn{padding:6px 4px;font-size:.64rem;gap:3px}
.modo-dot{width:5px;height:5px}
.card-qty .qty-btn{width:36px;height:36px;font-size:14px}
.card-qty .qty-input{width:48px;font-size:.88rem}
.chip{padding:5px 8px;font-size:.7rem;min-height:40px}
.login-card{padding:20px 14px 18px}
.login-logo{max-width:120px}
.login-title{font-size:1.05rem}
}
/* --- Mobile minimum (320px) --- */
@media(max-width:320px){
.topbar{padding:4px 6px;gap:4px}
.topbar-logo{height:38px}
.topbar-btn{padding:4px 5px;font-size:.6rem}
.page{padding:8px 6px 20px}
.filters{gap:4px;padding:6px 0}
.search input{font-size:.8rem;padding:7px 0}
.stock-card{padding:10px}
.card-name{font-size:.8rem}
.card-stats{gap:6px}
.card-stat{padding:5px 2px}
.card-stat-value{font-size:.8rem}
.modal-content{width:98%;max-height:90vh}
}
/* Scrollbar - forza visibilità su tutti i browser */
.table-scroll{scrollbar-width:auto;scrollbar-color:#94a3b8 var(--bg)}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:7px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#64748b}
/* Modale Link Clienti */
.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-content{position:relative;background:var(--white);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.3);width:90%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:1rem;font-weight:600;color:var(--text)}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text3);line-height:1}
.modal-body{padding:16px 20px;overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none}
.modal-body::-webkit-scrollbar{display:none}
.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border)}
.clienti-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.clienti-toolbar .search-input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:.85rem}
.check-label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text2);white-space:nowrap;cursor:pointer}
.clienti-list{display:flex;flex-direction:column;gap:4px}
.cliente-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.cliente-row:hover{background:var(--bg)}
.cliente-row.selected{background:#e0f2fe}
.cliente-row input[type=checkbox]{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
.cliente-info{flex:1;min-width:0}
.cliente-azienda{font-weight:600;font-size:.85rem;color:var(--text)}
.cliente-agente{font-size:.75rem;color:var(--text3)}
#clienti-count{font-size:.85rem;color:var(--text2)}
.btn-primary{background:var(--blue);color:#fff;border:none;padding:8px 20px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer}
.btn-primary:hover{background:#0059a3}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.empty-msg{text-align:center;color:var(--text3);padding:24px;font-size:.9rem}
/* ═══════════════════════════════════════════════════════════
UX/UI MODERN UPGRADE — patch additiva
═══════════════════════════════════════════════════════════ */
/* ── 11. Topbar gradient leggero (era flat blue) ── */
.topbar{background:linear-gradient(180deg,#006caa 0%,#005384 100%)}
/* ── 12. Bottoni topbar uniformi (glass) — il logout solo accent rosso più tenue ── */
.topbar-btn-logout{background:rgba(220,38,38,.78);border-color:rgba(220,38,38,.55)}
.topbar-btn-logout:hover{background:rgba(185,28,28,.9);border-color:rgba(185,28,28,.7)}
/* ── 9. Tab bottombar (no bounce / no transform) ── */
.tab{transition:color .25s ease}
/* ── 10. Tabular nums per numeri grandi ── */
.stat-val strong,.stat-eur,.order-azienda + .order-meta,.casse-value,.kg-value,.qty-input,.order-input{font-variant-numeric:tabular-nums}
/* ── 1. Fade hint per scroll orizzontale pills ── */
.pill-group-scroll{position:relative}
.pill-group-scroll::before,
.pill-group-scroll::after{
content:'';position:absolute;top:0;bottom:6px;width:24px;pointer-events:none;
z-index:2;transition:opacity .2s;
}
.pill-group-scroll::before{left:0;background:linear-gradient(90deg,var(--white) 0%,rgba(255,255,255,0) 100%);opacity:0}
.pill-group-scroll::after{right:0;background:linear-gradient(270deg,var(--white) 0%,rgba(255,255,255,0) 100%);opacity:1}
.pill-group-scroll[data-at-start="false"]::before{opacity:1}
.pill-group-scroll[data-at-end="true"]::after{opacity:0}
/* ── 2. Kebab menu mobile + sheet ── */
.topbar-btn-kebab{display:none;width:36px;height:36px;padding:0;justify-content:center;align-items:center;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff}
.topbar-btn-kebab:hover{background:rgba(255,255,255,.25)}
.topbar-btn-kebab svg{width:18px;height:18px}
/* Sheet bottom (kebab + agente) */
.kebab-sheet,.agente-sheet{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center}
.kebab-sheet[hidden],.agente-sheet[hidden]{display:none}
.kebab-sheet-backdrop,.agente-sheet-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .2s ease}
.kebab-sheet-panel,.agente-sheet-panel{position:relative;width:100%;max-width:480px;background:var(--white);border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.18);animation:sheetUp .28s cubic-bezier(.22,1,.36,1)}
.kebab-sheet-grabber{width:40px;height:4px;background:#cbd5e1;border-radius:2px;margin:6px auto 14px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.kebab-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 12px;border:none;background:none;font-family:inherit;font-size:.95rem;font-weight:500;color:var(--text);text-align:left;cursor:pointer;border-radius:10px;transition:background .12s}
.kebab-item[hidden]{display:none!important}
.kebab-item:hover,.kebab-item:active{background:var(--bg)}
.kebab-item + .kebab-item{margin-top:2px}
.kebab-item-danger{color:var(--red)}
.kebab-item-danger:hover{background:#fef2f2}
.kebab-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:4px;font-size:.6rem;font-weight:800;letter-spacing:.5px;color:#fff;flex-shrink:0}
.kebab-ic.csv{background:#16a34a}
.kebab-ic.pdf{background:#dc2626}
/* ── 4. Custom dropdown referenti ── */
.agente-filter-wrap{position:relative;display:inline-block}
.agente-filter-trigger{display:inline-flex;align-items:center;gap:8px;justify-content:space-between;padding:6px 12px;border-radius:8px;border:2px solid var(--border);background:var(--white);font-size:.82rem;font-weight:500;font-family:inherit;color:var(--text);outline:none;cursor:pointer;transition:.15s;min-width:180px}
.agente-filter-trigger:hover{border-color:var(--blue)}
.agente-filter-trigger[aria-expanded="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,108,170,.12)}
.agente-filter-trigger svg{flex-shrink:0;opacity:.6;transition:transform .2s}
.agente-filter-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.agente-filter-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agente-filter-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.agente-sheet-title{font-size:1rem;font-weight:700;color:var(--text);margin:0 4px 12px}
.agente-sheet-search{width:100%;padding:11px 14px;background:var(--bg);border:none;border-radius:10px;font-family:inherit;font-size:.9rem;outline:none;margin-bottom:10px;-webkit-appearance:none}
.agente-sheet-search:focus{background:#fff;box-shadow:0 0 0 2px var(--blue)}
.agente-sheet-list{max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.agente-sheet-opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;border:none;background:none;font-family:inherit;font-size:.92rem;color:var(--text);text-align:left;cursor:pointer;border-radius:10px}
.agente-sheet-opt:hover,.agente-sheet-opt:active{background:var(--bg)}
.agente-sheet-opt.selected{background:#e0f2fe;color:var(--blue);font-weight:600}
.agente-sheet-opt.selected::after{content:'✓';font-weight:700}
/* ── 5. Stat-card combo più compatta su mobile + scroll orizzontale ── */
@media(max-width:640px){
.ordini-stats{padding:0 10px}
.stat-card-combo{flex-direction:row!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;border-radius:14px;scrollbar-width:none}
.stat-card-combo::-webkit-scrollbar{display:none}
.stat-combo-section{flex:0 0 70%;min-width:0;scroll-snap-align:start;padding:14px 16px;border-left:none!important;border-right:1px solid #e2e8f0}
.stat-combo-section:last-child{border-right:none}
.stat-combo-section .stat-val strong{font-size:1.4rem}
.stat-combo-section .stat-eur{font-size:.95rem}
}
/* ── 13. Spaziatura più compatta tra card su mobile ── */
@media(max-width:480px){
.order-card{padding:14px 14px;margin-bottom:10px}
.prev-card{padding:13px 14px}
.ordini-toolbar{padding:12px 14px}
.ordini-toolbar>*{padding:12px 0}
.ordini-stats{margin:8px auto 12px;gap:8px}
}
/* ── 7. Skeleton loader ── */
.skeleton-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.skeleton-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.skeleton-line{background:linear-gradient(90deg,#eef2f6 0%,#dde4ec 50%,#eef2f6 100%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:6px;height:14px}
.skeleton-line.sk-w60{width:60%}
.skeleton-line.sk-w40{width:40%}
.skeleton-line.sk-w80{width:80%}
.skeleton-line.sk-tall{height:36px;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── 6. Pull-to-refresh hint (solo visivo, browser fa il resto) ── */
.ptr-indicator{display:none;justify-content:center;align-items:center;gap:8px;height:0;overflow:hidden;color:var(--blue);font-size:.78rem;transition:height .25s}
.ptr-indicator.active{height:36px;display:flex}
.ptr-indicator svg{animation:spin 1s linear infinite}
/* ── Override mobile: nascondi bottoni desk, mostra kebab ── */
@media(max-width:760px){
.topbar-btn-desk{display:none!important}
.topbar-btn-kebab{display:inline-flex}
/* Min-width agente trigger su mobile */
.agente-filter-trigger{min-width:auto;width:100%}
.agente-filter-wrap{width:100%}
}
/* ── Topbar più compatta su portrait (recupera spazio verticale) ── */
@media(max-width:640px) and (orientation:portrait){
.topbar{padding:10px 14px!important;min-height:0!important;height:auto!important;gap:8px!important}
.topbar-logo{height:30px!important;padding:2px 6px!important;border-radius:6px!important}
.topbar-right{flex:0 0 auto!important}
.topbar-btn-kebab{width:34px;height:34px}
}
/* ── Ridurre padding ordini-toolbar su portrait per più spazio contenuto ── */
@media(max-width:640px) and (orientation:portrait){
.ordini-toolbar{padding:8px 12px!important;border-radius:14px}
.ordini-toolbar>*{padding:10px 0!important}
}
/* LOGO_CENTERED — logo centrale grande in topbar mobile portrait */
@media(max-width:760px){
.topbar{position:relative;justify-content:space-between;align-items:center}
.topbar-left{flex:0 0 auto;min-width:44px}
.topbar-logo{
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
height:42px!important;
padding:5px 12px!important;
border-radius:10px!important;
box-shadow:0 2px 8px rgba(0,0,0,.12);
z-index:1;
}
/* Nascondi l'eventuale wrapper logo originale, lascia solo l'immagine assolutamente centrata */
.topbar-left .topbar-logo{position:absolute}
.topbar-right{flex:0 0 auto;min-width:44px;justify-content:flex-end}
/* Riserva un placeholder a sinistra della stessa dimensione del kebab per simmetria */
.topbar-left::before{content:'';display:inline-block;width:36px;height:36px}
}
@media(max-width:640px) and (orientation:portrait){
.topbar{padding:12px 14px!important;min-height:64px!important}
.topbar-logo{height:46px!important;padding:6px 14px!important}
}
@media(max-width:375px){
.topbar-logo{height:40px!important;padding:5px 10px!important}
}
/* AGENTE_FILTER_CENTERED — pill referenti centrata, non a piena larghezza */
@media(max-width:760px){
.agente-filter-wrap{width:auto!important;display:flex!important;justify-content:center;margin:0 auto!important}
.agente-filter-trigger{
width:auto!important;
min-width:200px!important;
max-width:90%;
margin:0 auto!important;
border-radius:20px!important;
padding:8px 16px!important;
box-shadow:0 2px 8px rgba(23,28,31,.04);
}
.ordini-row-top .agente-filter-wrap{justify-self:center!important}
}
@media(max-width:640px) and (orientation:portrait){
.agente-filter-trigger{min-width:220px!important}
}
/* AGENTE_FILTER_DESKTOP_COHERENT — trigger pill coerente con altri filtri anche su desktop */
.agente-filter-trigger{
border-radius:20px!important;
padding:8px 14px 8px 16px!important;
border:1.5px solid var(--border)!important;
font-weight:600!important;
box-shadow:0 2px 8px rgba(23,28,31,.04);
height:34px;
}
.agente-filter-trigger:hover{
border-color:rgba(0,108,170,.3)!important;
background:#f8fafc;
}
.agente-filter-trigger[aria-expanded="true"]{
border-color:var(--blue)!important;
box-shadow:0 0 0 3px rgba(0,108,170,.08)!important;
}
.agente-filter-trigger svg{margin-left:2px}
/* MOBILE_REFINEMENT_V2 — densità, topbar compatta, card ordine collassabile */
/* ── Card ordine: header come pulsante (cursore + transizione + chevron) ── */
.order-header-toggle{cursor:pointer;user-select:none;transition:background .15s}
.order-header-toggle:hover{background:rgba(0,108,170,.02)}
.order-header-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.order-header-aside{display:flex;align-items:center;gap:8px;flex-shrink:0}
.order-chevron{color:var(--text3);transition:transform .25s ease;flex-shrink:0}
.order-card[data-collapsed="true"] .order-chevron{transform:rotate(-90deg)}
/* Preview totali nell'header (visibile sempre) */
.order-preview-totals{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.opt-pill{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;background:#f1f5f9;border-radius:12px;font-size:.72rem;color:var(--text2);font-weight:500;font-variant-numeric:tabular-nums}
.opt-pill strong{color:var(--text);font-weight:700}
.opt-pill.opt-eur{background:#fff7ed;color:var(--orange)}
.opt-pill.opt-eur strong{color:var(--orange)}
/* Collapse: nasconde tabella, lista mobile, riepilogo totali, note.
.order-actions rimane visibile anche su card collassata (Conferma/Rifiuta sempre accessibili) */
.order-card[data-collapsed="true"] .order-table-wrap,
.order-card[data-collapsed="true"] .order-items-mobile,
.order-card[data-collapsed="true"] .order-summary-tot,
.order-card[data-collapsed="true"] .order-note-gen{
display:none!important;
}
/* Quando collassato, la card ha padding ridotto */
.order-card[data-collapsed="true"]{padding:12px 14px}
/* Animazione apertura: usa max-height su contenuti collassabili */
.order-table-wrap,.order-items-mobile,.order-summary-tot,.order-note-gen,.order-actions{
animation:cardOpen .25s ease;
}
@keyframes cardOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Accordion attivo anche su desktop: collapse mostra solo header.
Preview totals visibili dentro header per dare info quando chiusa. */
/* ── Topbar ulteriormente compatta su portrait ── */
@media(max-width:640px) and (orientation:portrait){
.topbar{padding:8px 12px!important;min-height:54px!important}
.topbar-logo{height:38px!important;padding:4px 10px!important;border-radius:8px!important}
.topbar-btn-kebab{width:32px!important;height:32px!important}
.topbar-btn-kebab svg{width:16px;height:16px}
/* Ricalcola lo spazio del placeholder a sinistra per simmetria */
.topbar-left::before{width:32px;height:32px}
}
/* ── Densità informazioni ── */
@media(max-width:640px){
/* Card ordine compatta */
.order-card{padding:12px 14px;margin-bottom:8px;border-radius:12px}
.order-azienda{font-size:.92rem;line-height:1.25}
.order-meta{font-size:.7rem;line-height:1.35;color:var(--text3);word-break:break-word}
.order-stato{font-size:.62rem;padding:3px 8px;letter-spacing:.4px}
.order-summary-tot{padding:8px 12px;font-size:.82rem;gap:10px;margin-top:8px}
/* Toolbar ordini più stretta */
.ordini-toolbar{padding:10px 12px!important;border-radius:12px;margin-bottom:8px}
.ordini-toolbar>*{padding:8px 0!important}
.ordini-toolbar>*+*{border-top:1px solid #f1f5f9}
.ordini-summary{padding:6px 0!important;font-size:.72rem;gap:5px}
/* Search input più piccola */
.ordini-search-input,.search-input{padding:9px 12px!important;font-size:.85rem}
.search-wrapper{margin:0!important}
/* Stat-card più stretta */
.stat-combo-section{padding:10px 14px!important}
.stat-combo-section .stat-label{font-size:.62rem}
.stat-combo-section .stat-val strong{font-size:1.25rem!important}
.stat-combo-section .stat-eur{font-size:.85rem!important;margin-top:0}
.stat-combo-section .stat-sub{font-size:.68rem}
.ordini-stats{margin:6px auto 10px!important}
/* Page con padding ridotto laterale */
.page{padding:8px 10px calc(80px + env(safe-area-inset-bottom))!important}
}
/* ── Tap target accettabile su header collassabile ── */
@media(max-width:760px){
.order-header-toggle{min-height:44px;padding:2px 0;align-items:flex-start}
.order-header-aside{flex-direction:column;align-items:flex-end;gap:4px}
.order-stato{margin-bottom:auto}
}
/* ── Riduzione gap tra card ── */
@media(max-width:640px){
#ordini-list{display:flex;flex-direction:column;gap:8px}
}
/* Focus visibile per accessibilità header toggle */
.order-header-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
/* CHEVRON_TOP_RIGHT — chevron in alto a destra della card, stato sotto */
@media(max-width:760px){
.order-header-toggle{position:relative;padding-right:32px}
.order-header-aside{flex-direction:row;align-items:center;gap:8px}
/* Chevron staccato dall'aside, in alto a destra assoluto */
.order-chevron{
position:absolute;
top:10px;
right:8px;
width:22px;height:22px;
color:var(--text3);
padding:2px;
}
.order-stato{margin-bottom:0}
}
/* HEADER_STICKY — header card ordine sticky quando aperta (tap sempre raggiungibile) */
@media(max-width:760px){
.order-card{position:relative}
/* Solo quando espansa l'header diventa sticky entro la card */
.order-card[data-collapsed="false"] .order-header-toggle{
position:sticky;
/* Topbar mobile occupa ~54px; lascio 4px di gap per non incollarlo */
top:58px;
z-index:5;
background:var(--white);
margin:-12px -14px 0;
padding:12px 32px 12px 14px;
border-radius:12px 12px 0 0;
box-shadow:0 1px 0 #f1f5f9;
}
/* Chevron riposizionato per il nuovo padding sticky */
.order-card[data-collapsed="false"] .order-chevron{
top:14px;
right:10px;
}
/* Quando appena sotto il bordo superiore della card, aggiunge una sottile separazione */
.order-card[data-collapsed="false"] .order-header-toggle::after{
content:'';
position:absolute;
left:14px;right:14px;bottom:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(15,23,42,.08),transparent);
}
/* Accent bordo sinistro: estendiamolo anche all'header sticky per coerenza con stato */
.order-card.stato-nuovo[data-collapsed="false"] .order-header-toggle{box-shadow:inset 4px 0 0 var(--orange),0 1px 0 #f1f5f9}
.order-card.stato-confermato[data-collapsed="false"] .order-header-toggle{box-shadow:inset 4px 0 0 var(--green),0 1px 0 #f1f5f9}
.order-card.stato-rifiutato[data-collapsed="false"] .order-header-toggle{box-shadow:inset 4px 0 0 var(--red),0 1px 0 #f1f5f9}
}
/* Topbar portrait con safe-area: aggiusta il top sticky se cambia altezza */
@media(max-width:640px) and (orientation:portrait){
.order-card[data-collapsed="false"] .order-header-toggle{
top:54px;
}
}
/* TOPBAR_STICKY_MOBILE — topbar segue lo scroll su mobile */
@media(max-width:760px){
.topbar{
position:sticky!important;
top:0;
z-index:60;
/* sticky è containing block per absolute, quindi il logo centrato continua a funzionare */
background:linear-gradient(180deg,#006caa 0%,#005384 100%);
box-shadow:0 2px 8px rgba(0,0,0,.06);
}
}
/* Quando si scrolla, riduco leggermente l'ombra per stile più pulito */
@media(max-width:640px) and (orientation:portrait){
.topbar{box-shadow:0 1px 0 rgba(0,0,0,.08),0 4px 12px rgba(0,83,132,.08)}
}
/* PILL_ACTIVE_GRADIENT — gradient e ombra coerenti su tutte le pillole attive */
.ord-filter-btn.active,
.prev-filter-btn.active{
background:linear-gradient(180deg,#0078bd 0%,#005384 100%);
border-color:transparent;
box-shadow:0 4px 12px rgba(0,83,132,.28),0 1px 0 rgba(255,255,255,.15) inset;
}
.ord-period-btn.active,
.prev-period-btn.active{
background:linear-gradient(180deg,#f97316 0%,#d14518 100%);
border-color:transparent;
box-shadow:0 4px 12px rgba(232,80,29,.28),0 1px 0 rgba(255,255,255,.18) inset;
}
/* Varianti colorate del filtro stato (Da confermare arancione / Confermati verde / Rifiutati rosso) */
.ord-filter-btn[data-stato="nuovo"].active{
background:linear-gradient(180deg,#f97316 0%,#d14518 100%);
box-shadow:0 4px 12px rgba(232,80,29,.28),0 1px 0 rgba(255,255,255,.18) inset;
}
.ord-filter-btn[data-stato="confermato"].active{
background:linear-gradient(180deg,#22c55e 0%,#15803d 100%);
box-shadow:0 4px 12px rgba(22,163,74,.25),0 1px 0 rgba(255,255,255,.18) inset;
}
.ord-filter-btn[data-stato="rifiutato"].active{
background:linear-gradient(180deg,#ef4444 0%,#b91c1c 100%);
box-shadow:0 4px 12px rgba(220,38,38,.28),0 1px 0 rgba(255,255,255,.18) inset;
}
.prev-filter-btn[data-stato="confermato"].active{
background:linear-gradient(180deg,#22c55e 0%,#15803d 100%);
box-shadow:0 4px 12px rgba(22,163,74,.25),0 1px 0 rgba(255,255,255,.18) inset;
}
.prev-filter-btn[data-stato="inviato"].active{
background:linear-gradient(180deg,#0078bd 0%,#005384 100%);
box-shadow:0 4px 12px rgba(0,83,132,.28),0 1px 0 rgba(255,255,255,.15) inset;
}
/* CHEVRON_NO_OVERLAP — riservare spazio al chevron senza far andare a capo l'header */
@media(max-width:760px){
.order-header-toggle{padding-right:38px!important}
.order-card[data-collapsed="false"] .order-header-toggle{padding-right:38px!important}
.order-chevron{top:12px;right:10px}
/* Forza il main a non superare la larghezza disponibile */
.order-header-main{min-width:0;max-width:100%}
.order-azienda{display:block;overflow:hidden;text-overflow:ellipsis}
.order-meta{display:block}
/* Aside (badge stato) torna inline sotto azienda invece di colonna assoluta a dx */
.order-header-aside{flex-direction:row;gap:6px;margin-top:4px}
}
/* PWA_SAFE_AREA — supporto modalità standalone (PWA installata) */
@supports (padding: env(safe-area-inset-bottom)) {
/* Tabbar floating: stacca correttamente dall'home indicator anche in PWA */
@media(max-width:640px) and (orientation:portrait){
.tabs-bar{
bottom:calc(8px + env(safe-area-inset-bottom))!important;
}
/* Page padding-bottom: spazio per tabbar + home indicator */
.page{
padding-bottom:calc(80px + env(safe-area-inset-bottom))!important;
}
}
}
/* Quando l'app è in modalità standalone (PWA), aggiungi padding-top alla topbar
per evitare che la status bar copra il logo, e gestisci safe-area laterali */
@media all and (display-mode: standalone){
.topbar{
padding-top:calc(8px + env(safe-area-inset-top))!important;
padding-left:calc(14px + env(safe-area-inset-left))!important;
padding-right:calc(14px + env(safe-area-inset-right))!important;
}
/* Tabbar PWA: maggiore distanza dal bordo per home indicator */
@media(max-width:640px){
.tabs-bar{
bottom:calc(10px + env(safe-area-inset-bottom))!important;
left:calc(12px + env(safe-area-inset-left))!important;
right:calc(12px + env(safe-area-inset-right))!important;
}
/* Page con extra padding bottom per evitare overlap tabbar */
.page{
padding-bottom:calc(95px + env(safe-area-inset-bottom))!important;
padding-left:calc(10px + env(safe-area-inset-left))!important;
padding-right:calc(10px + env(safe-area-inset-right))!important;
}
/* Toast sopra tabbar in PWA */
.toasts{
bottom:calc(95px + env(safe-area-inset-bottom))!important;
}
}
}
/* iOS-PWA standalone (versione legacy) */
@media all and (-webkit-min-device-pixel-ratio:0) {
@media (display-mode: standalone) and (max-width:640px){
/* Backup: se env() non funziona, usa 34px (home indicator typical) */
.tabs-bar{padding-bottom:0}
}
}
/* TABBAR_COMPACT — tabbar mobile più compatta */
@media(max-width:640px){
.tabs-bar{height:50px!important}
.tabs{border-radius:14px!important}
.tab{padding:6px 4px!important;gap:2px!important}
.tab svg{width:18px;height:18px;opacity:.55}
.tab span{font-size:.6rem!important;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* Slider più stretto verticalmente */
.tab-slider{margin:4px 0!important;height:calc(100% - 8px)!important;border-radius:11px!important}
/* Page padding aggiornato per la nuova altezza */
.page{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
.toasts{bottom:calc(66px + env(safe-area-inset-bottom))!important}
}
/* Stesse regole valide in PWA standalone */
@media all and (display-mode: standalone){
@media(max-width:640px){
.tabs-bar{height:50px!important}
.page{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
.toasts{bottom:calc(78px + env(safe-area-inset-bottom))!important}
}
}
/* LOGO_LEFT_BROWSER_ONLY — logo a sinistra in browser, centrato solo in PWA */
@media(max-width:760px) and not all and (display-mode: standalone){
.topbar-logo{
position:static!important;
transform:none!important;
left:auto!important;top:auto!important;
}
.topbar-left::before{display:none!important}
.topbar{justify-content:space-between!important}
}
/* In PWA standalone: mantieni il logo centrato come prima */
@media all and (display-mode: standalone) and (max-width:760px){
.topbar-logo{
position:absolute!important;
left:50%!important;top:50%!important;
transform:translate(-50%,-50%)!important;
}
.topbar-left::before{display:inline-block!important;content:''!important}
}
/* LOGO_LEFT_BROWSER_FIX — usa display-mode:browser invece di "not standalone" */
@media (display-mode: browser) and (max-width:760px){
.topbar{justify-content:space-between!important}
.topbar-logo{
position:static!important;
transform:none!important;
left:auto!important;top:auto!important;
margin:0!important;
}
.topbar-left{flex:0 0 auto!important}
.topbar-left::before{display:none!important;width:0!important;content:none!important}
}
/* STOCK_OFFERTE_MOBILE_COHERENT — layout coerente nelle pagine Stock e Offerte su mobile */
/* ── PAGINA STOCK ── */
@media(max-width:640px){
/* Filters: layout vertical-stack come ordini-toolbar */
#tab-stock .filters{
background:var(--white);
border:1px solid var(--border);
border-radius:12px;
padding:10px 12px;
margin:0 0 8px;
flex-direction:column;
align-items:stretch;
gap:0;
position:relative;
top:auto;
}
#tab-stock .filters>*{
margin:0;
padding:8px 0;
}
#tab-stock .filters>*+*{
border-top:1px solid #f1f5f9;
}
/* Search full-width */
#tab-stock .search{
flex:1 1 100%;
width:100%;
border:1px solid var(--border);
border-radius:10px;
padding:0 10px;
background:var(--bg);
}
#tab-stock .search input{
padding:9px 0;
font-size:.85rem;
background:transparent;
}
/* Riga chips: scroll orizzontale */
#tab-stock .filters-row-chips{
display:flex;
flex-wrap:nowrap;
gap:6px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:6px 0!important;
}
#tab-stock .filters-row-chips::-webkit-scrollbar{display:none}
#tab-stock .chip{
flex:0 0 auto;
padding:6px 12px;
font-size:.75rem;
border-radius:18px;
}
/* Modo-switch full-width */
#tab-stock .modo-switch{
width:100%;
margin:0;
flex-direction:column;
align-items:stretch;
gap:6px;
}
#tab-stock .modo-label{display:none}
#tab-stock .modo-track{width:100%}
#tab-stock .modo-btn{flex:1;font-size:.7rem;padding:8px 4px;justify-content:center}
/* Btn-sync compatto in alto a dx */
#tab-stock .btn-sync{
width:36px;height:36px;
margin-left:auto;
flex-shrink:0;
}
/* Stock cards: padding compatto */
#tab-stock .stock-cards{
grid-template-columns:1fr;
gap:8px;
}
#tab-stock .stock-card{
padding:12px 14px;
border-radius:12px;
margin-bottom:0;
}
#tab-stock .card-name{font-size:.88rem;line-height:1.25}
#tab-stock .card-code{font-size:.68rem}
#tab-stock .card-stat-label{font-size:.6rem}
#tab-stock .card-stat-value{font-size:.85rem}
/* Empty/loader: compatto */
#tab-stock .empty,#tab-stock .no-stock,#tab-stock .loader-box{padding:32px 16px}
#tab-stock .no-stock h3{font-size:.95rem}
#tab-stock .no-stock p{font-size:.78rem}
/* Table-card: niente bordi su mobile, le card si vedono direttamente */
#tab-stock .table-card{
background:transparent;
border:none;
box-shadow:none;
padding:0;
}
}
/* Pagina Stock filtri mobile: 3 chip filtro su singola riga equi-distribuita */
@media(max-width:640px){
#tab-stock .filters{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}
#tab-stock .filters>*{padding:0}
#tab-stock .filters>*+*{border-top:none}
#tab-stock .modo-switch{flex-direction:row;align-items:center;gap:0}
#tab-stock .modo-track{flex-direction:row;width:100%;display:flex}
#tab-stock .modo-btn{flex:1 1 0;min-width:0}
#tab-stock .filters .search{flex:1 1 100%;width:100%}
#tab-stock .filters label.chip{flex:1 1 calc(50% - 3px);min-width:0;padding:7px 10px;font-size:.72rem}
#tab-stock .filters .chip-count{flex:1 1 calc(50% - 3px);justify-content:center;padding:7px 10px;font-size:.72rem}
#tab-stock .filters #btn-tutti,
#tab-stock .filters #btn-preferiti,
#tab-stock .filters #btn-promo{
flex:1 1 calc(33.33% - 4px);
min-width:0;
padding:7px 6px;
font-size:.72rem;
}
#tab-stock .filters .btn-sync{flex:0 0 auto;height:34px;width:34px}
#tab-stock .filters .modo-switch{flex:1 1 100%;width:100%;margin-top:2px}
}
/* ── PAGINA OFFERTE: card preventivo collapse coerente con ordini ── */
.prev-header-toggle{cursor:pointer;user-select:none;transition:background .15s;display:flex;align-items:flex-start;gap:8px;justify-content:space-between;position:relative}
.prev-header-toggle:hover{background:rgba(0,108,170,.02)}
.prev-header-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.prev-header-aside{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Preview totali nella prev-card */
.prev-preview-totals{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* Chevron prev-card (riusa la classe order-chevron) */
.prev-card .order-chevron{
width:20px;height:20px;
color:var(--text3);
transition:transform .25s ease;
flex-shrink:0;
}
.prev-card[data-collapsed="true"] .order-chevron{transform:rotate(-90deg)}
/* Collapse contenuto */
.prev-card[data-collapsed="true"] .prev-summary,
.prev-card[data-collapsed="true"] .prev-note-gen,
.prev-card[data-collapsed="true"] .prev-prodotti-table,
.prev-card[data-collapsed="true"] .prev-prodotti-cards,
.prev-card[data-collapsed="true"] .prev-prod-lazy,
.prev-card[data-collapsed="true"] .prev-table-wrap,
.prev-card[data-collapsed="true"] .order-items-mobile,
.prev-card[data-collapsed="true"] .prev-actions,
.prev-card[data-collapsed="true"] .prev-risposta,
.prev-card[data-collapsed="true"] .prev-totale-row{
display:none!important;
}
/* Accordion attivo anche su desktop: collapse mostra solo header */
/* Mobile: chevron in alto a destra absolute (coerente con order-card) */
@media(max-width:760px){
.prev-card .order-chevron{
position:absolute;
top:10px;
right:8px;
width:22px;height:22px;
padding:2px;
}
}
/* Densità prev-card mobile + padding-right per chevron */
@media(max-width:640px){
.prev-card{padding:12px 14px;border-radius:12px;margin-bottom:8px}
.prev-header-toggle{padding-right:32px}
.prev-cliente{font-size:.92rem;line-height:1.25;display:block;overflow:hidden;text-overflow:ellipsis}
.prev-meta{font-size:.7rem;line-height:1.35;color:var(--text3);word-break:break-word}
.prev-stato{font-size:.62rem;padding:3px 8px;letter-spacing:.4px}
.preventivi-list{display:flex;flex-direction:column;gap:8px}
}
/* Header sticky anche per prev-card aperte (coerenza con ordini) */
@media(max-width:760px){
.prev-card{position:relative}
.prev-card[data-collapsed="false"] .prev-header-toggle{
position:sticky;
top:58px;
z-index:5;
background:var(--white);
margin:-12px -14px 0;
padding:12px 32px 12px 14px;
border-radius:12px 12px 0 0;
box-shadow:0 1px 0 #f1f5f9;
}
.prev-card[data-collapsed="false"] .order-chevron{top:14px;right:10px}
.prev-card.stato-bozza[data-collapsed="false"] .prev-header-toggle{box-shadow:inset 4px 0 0 var(--text3),0 1px 0 #f1f5f9}
.prev-card.stato-inviato[data-collapsed="false"] .prev-header-toggle{box-shadow:inset 4px 0 0 var(--blue),0 1px 0 #f1f5f9}
.prev-card.stato-confermato[data-collapsed="false"] .prev-header-toggle{box-shadow:inset 4px 0 0 var(--green),0 1px 0 #f1f5f9}
.prev-card.stato-scaduto[data-collapsed="false"] .prev-header-toggle{box-shadow:inset 4px 0 0 var(--red),0 1px 0 #f1f5f9}
}
/* Focus visibile per accessibilità */
.prev-header-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
/* TOPBAR_CENTER_NO_OVERLAP — Fix sovrapposizione logo↔titolo "DASHBOARD" su mobile.
In browser mode il logo è a sinistra (LOGO_LEFT_BROWSER_FIX) ma .topbar-center
resta position:absolute centrato e su schermi stretti il blocco "Dashboard +
pulse 4 DA CONFERMARE" finisce sotto al logo. Soluzione: in browser mode mobile
il center diventa flex normale tra logo e kebab, con riduzione tipografica e
troncamento. Sotto i 420px nascondiamo il testo "Dashboard" lasciando solo il
pulse, che è l'informazione utile. */
@media (display-mode: browser) and (max-width:760px){
.topbar-center{
position:static!important;
transform:none!important;
flex:1 1 auto;
min-width:0;
justify-content:center;
padding:0 6px;
overflow:hidden;
}
.topbar-center strong{
font-size:.78rem;
letter-spacing:.3px;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.topbar-pulse{padding:2px 7px;font-size:.58rem}
}
/* Schermi molto stretti: titolo Dashboard ridotto ma sempre visibile (no piu' badge da nascondere) */
@media (display-mode: browser) and (max-width:420px){
.topbar-center strong{font-size:.7rem}
.topbar-title-icon{display:none}
}
/* PWA standalone portrait stretto: titolo compatto ma visibile */
@media all and (display-mode: standalone) and (max-width:420px){
.topbar-center{padding:0 4px}
.topbar-center strong{font-size:.7rem}
.topbar-title-icon{display:none}
}
/* === Pagina Stock Milano: stesso layout mobile di Stock Codroipo === */
@media(max-width:640px){
/* Filters: layout vertical-stack come ordini-toolbar */
#tab-stockmilano .filters{
background:var(--white);
border:1px solid var(--border);
border-radius:12px;
padding:10px 12px;
margin:0 0 8px;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
gap:6px;
position:relative;
top:auto;
}
/* Search full-width */
#tab-stockmilano .search{
flex:1 1 100%;
width:100%;
border:1px solid var(--border);
border-radius:10px;
padding:0 10px;
background:var(--bg);
}
#tab-stockmilano .search input{
padding:9px 0;
font-size:.85rem;
background:transparent;
}
/* Chip Tutti/Preferiti/Promo equi-distribuite */
#tab-stockmilano .filters label.chip{flex:1 1 calc(50% - 3px);min-width:0;padding:7px 10px;font-size:.72rem}
#tab-stockmilano .filters .chip-count{flex:1 1 calc(50% - 3px);justify-content:center;padding:7px 10px;font-size:.72rem}
#tab-stockmilano .filters #milano-btn-tutti,
#tab-stockmilano .filters #milano-btn-preferiti,
#tab-stockmilano .filters #milano-btn-promo{
flex:1 1 calc(33.33% - 4px);
min-width:0;
padding:7px 6px;
font-size:.72rem;
}
/* Modo-switch full-width orizzontale (3 bottoni in fila) */
#tab-stockmilano .modo-switch{
flex:1 1 100%;
width:100%;
margin:0;
margin-top:2px;
flex-direction:row;
align-items:center;
gap:0;
}
#tab-stockmilano .modo-label{display:none}
#tab-stockmilano .modo-track{flex-direction:row;width:100%;display:flex}
#tab-stockmilano .modo-btn{flex:1 1 0;min-width:0;font-size:.7rem;padding:8px 4px;justify-content:center}
/* Stock cards Milano: padding compatto */
#tab-stockmilano .stock-cards{
grid-template-columns:1fr;
gap:8px;
}
}
/* === Cliente toolbar (stock per cliente) === */
.cliente-toolbar{
display:flex;align-items:center;gap:8px;padding:8px 12px;margin:6px 0;
background:#f8fafc;border:1px solid var(--border);border-radius:8px;
position:relative;flex-wrap:wrap;
}
.cliente-toolbar.has-cliente{background:#fef3c7;border-color:#fbbf24}
.cliente-combo-wrap{position:relative;flex:1;min-width:200px;max-width:340px}
.cliente-combo-wrap .cliente-input{
width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;
font-size:.85rem;font-family:inherit;outline:none;background:#fff;
}
.cliente-combo-wrap .cliente-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.cliente-combo-list{
position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;
border:1px solid var(--border);border-radius:6px;max-height:280px;overflow-y:auto;
z-index:1000;box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.cliente-combo-list .cli-row{padding:8px 12px;cursor:pointer;font-size:.85rem;border-bottom:1px solid #f1f5f9}
.cliente-combo-list .cli-row:hover,.cliente-combo-list .cli-row.active{background:#f1f5f9}
.cliente-combo-list .cli-row strong{font-weight:600;color:var(--text)}
.cliente-combo-list .cli-row small{display:block;color:var(--text3);font-size:.72rem;margin-top:2px}
.cliente-toolbar .data-consegna-input,
.cliente-toolbar .luogo-consegna-input{
padding:7px 10px;border:1px solid var(--border);border-radius:6px;
font-size:.85rem;font-family:inherit;outline:none;background:#fff;
}
.cliente-toolbar .data-consegna-input{width:140px}
.cliente-toolbar .luogo-consegna-input{flex:1;min-width:140px;max-width:240px}
.cliente-toolbar .cliente-clear{
background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c;border-radius:6px;
width:28px;height:28px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.cliente-toolbar .cliente-clear:hover{background:#fca5a5;color:#fff}
.cliente-toolbar .cliente-status{font-size:.75rem;color:var(--text3);margin-left:auto}
.cliente-toolbar .cliente-status.ok{color:var(--green)}
.cliente-toolbar .cliente-status.warn{color:#b45309}
/* Highlight prezzo cliente dedicato vs catalogo */
.prezzo-cliente{background:#fef9c3;color:#a16207;font-weight:700;padding:2px 4px;border-radius:3px}
.prezzo-cliente::after{content:'*';color:#d97706;font-weight:900;margin-left:2px}
.cliente-toolbar .cliente-select{
padding:7px 10px;border:1px solid var(--border);border-radius:6px;
font-size:.85rem;font-family:inherit;outline:none;background:#fff;
flex:1;min-width:200px;max-width:380px;cursor:pointer;
}
.cliente-toolbar .cliente-select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.08)}
/* Cliente mode: disp-input diventa qta ordine (visual cue) */
.cliente-mode .disp-input{background:#fef9c3 !important;color:#a16207 !important;font-weight:700 !important;border-color:#fbbf24 !important}
.cliente-mode .disp-input::placeholder{color:#d97706}
.cliente-mode .qty-plus,.cliente-mode .qty-minus{background:#fffbeb;border-color:#fbbf24;color:#a16207}
/* === Sede selector (post-login) === */
.sede-selector{position:fixed;inset:0;z-index:9998;background:linear-gradient(135deg,#006caa 0%,#004d7a 100%);display:flex;align-items:center;justify-content:center}
.sede-selector-box{background:#fff;border-radius:20px;padding:36px 32px;text-align:center;border:3px solid #006caa;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -3px 0 rgba(0,0,0,.06) inset,0 24px 60px rgba(0,0,0,.4),0 12px 24px rgba(0,0,0,.25);max-width:480px;width:90%}
.sede-selector-logo{max-width:140px;margin-bottom:14px}
.sede-selector-box h2{margin:6px 0 4px;color:var(--text);font-size:1.4rem}
.sede-selector-box p{color:var(--text2);font-size:.9rem;margin:0 0 18px}
/* Box "Ricorda sede" SOPRA i bottoni: opzione secondaria con gerarchia distinta.
Pill muted + separatore sotto per staccarla dai bottoni-azione primari. */
.sede-selector-actions{display:flex;gap:14px;justify-content:center;padding-top:20px;border-top:1px solid var(--border,#e9eef3)}
.sede-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;border:2px solid var(--border);border-radius:14px;background:#fff;cursor:pointer;font-family:inherit;transition:.18s;font-size:.95rem}
.sede-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.sede-btn-cod{background:#006caa;border:2px solid rgba(255,255,255,.35);color:#fff}
.sede-btn-cod:hover{background:#005384;border-color:rgba(255,255,255,.6)}
.sede-btn-mil{background:#e8501d;border:2px solid rgba(255,255,255,.35);color:#fff}
.sede-btn-mil:hover{background:#c64517;border-color:rgba(255,255,255,.6)}
.sede-btn-label{font-size:1.4rem;font-weight:900;letter-spacing:1.5px;color:#fff}
/* === Sede pill switcher topbar === */
.sede-pill-switch{display:inline-flex;margin-left:12px;background:rgba(255,255,255,.18);border-radius:14px;padding:3px;gap:3px}
.sede-pill-btn{background:transparent;border:none;color:rgba(255,255,255,.7);font-family:inherit;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:11px;cursor:pointer;transition:.15s;letter-spacing:.5px}
.sede-pill-btn:hover{color:#fff}
.sede-pill-btn.active{background:#fff;color:#006caa}
.sede-pill-btn[data-sede="milano"].active{color:#e8501d}
/* === Modal Nuovo Ordine === */
.modal-nuovo-ordine{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center}
.mno-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px)}
.mno-box{position:relative;background:#fff;border-radius:16px;width:min(960px,94vw);max-height:94vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:visible}
.mno-head{border-top-left-radius:16px;border-top-right-radius:16px}
.mno-foot{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.mno-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:linear-gradient(135deg,#006caa 0%,#004d7a 100%);color:#fff}
.mno-head h2{margin:0;font-size:1.1rem;font-weight:700}
.mno-close{background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0 6px}
.mno-form{padding:14px 22px;border-bottom:1px solid var(--border);background:#f8fafc}
.mno-form label{display:block;font-size:.75rem;color:var(--text3);font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.mno-row{margin-bottom:10px}
.mno-row select,.mno-row input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.9rem;font-family:inherit;outline:none;background:#fff}
.mno-row select:focus,.mno-row input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.mno-row-grid{display:grid;grid-template-columns:200px 1fr;gap:14px}
.mno-status{display:block;font-size:.75rem;color:var(--text3);margin-top:4px}
.mno-status.ok{color:var(--green)}
.mno-status.warn{color:#b45309}
.mno-stock-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.mno-search-row{padding:10px 22px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--border)}
.mno-search-row input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:.85rem;outline:none}
.mno-stock-count{font-size:.75rem;color:var(--text3);font-weight:600}
.mno-stock-list{flex:1;overflow-y:auto;padding:8px 22px}
.mno-prod-row{display:grid;grid-template-columns:80px 1fr 70px 90px 80px 130px 80px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:.82rem}
.mno-prod-dalla{text-align:center;font-variant-numeric:tabular-nums;color:#a16207;font-weight:600;font-size:.78rem}
.mno-prod-row.mno-has-qta{background:#f0fdf4}
.mno-prod-code{font-family:ui-monospace,monospace;color:#005384;font-weight:700}
.mno-prod-name{color:var(--text)}
.mno-prod-kg,.mno-prod-tot{text-align:right;font-variant-numeric:tabular-nums}
.mno-prod-prezzo{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mno-prod-prezzo.is-cliente{color:#a16207;background:#fef9c3;padding:2px 6px;border-radius:4px}
.mno-prod-qty{display:flex;align-items:center;gap:4px;justify-content:center}
.mno-prod-qty button{width:22px;height:22px;border:1px solid var(--border);background:#fff;border-radius:4px;cursor:pointer;font-weight:700;color:var(--blue)}
.mno-prod-qty input{width:50px;padding:4px;border:1px solid var(--border);border-radius:4px;text-align:center;font-size:.85rem;font-weight:700}
.mno-foot{padding:14px 22px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);background:#f8fafc}
.mno-totale{flex:1;font-weight:700;color:var(--text);font-size:.95rem}
.mno-cancel,.mno-submit{padding:10px 18px;border-radius:8px;font-weight:700;font-family:inherit;cursor:pointer;font-size:.9rem;border:none}
.mno-cancel{background:#e2e8f0;color:var(--text2)}
.mno-cancel:hover{background:#cbd5e1}
.mno-submit{background:var(--orange);color:#fff}
.mno-submit:disabled{opacity:.5;cursor:not-allowed}
.mno-submit:not(:disabled):hover{background:#c64517}
.topbar-btn-new-order{background:#16a34a !important;color:#fff !important;border-color:#16a34a !important;font-weight:700}
.topbar-btn-new-order:hover{background:#15803d !important;border-color:#15803d !important}
@media (max-width:768px){
.mno-box{width:96vw;max-height:96vh}
.mno-row-grid{grid-template-columns:1fr}
.mno-prod-row{grid-template-columns:60px 1fr 110px;gap:6px;font-size:.78rem}
.mno-prod-kg,.mno-prod-prezzo,.mno-prod-tot{display:none}
}
/* === Bottone Nuovo Ordine sotto stati === */
.new-order-row{margin:10px 0 14px;display:flex;justify-content:flex-start}
.btn-new-order{background:#006caa;color:#fff;border:none;border-radius:10px;padding:10px 22px;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 4px 12px rgba(0,108,170,.18);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn-new-order:hover{background:#005384;box-shadow:0 6px 16px rgba(0,108,170,.28);transform:translateY(-1px)}
.btn-new-order:active{transform:translateY(0)}
/* === Modal Nuovo Ordine — datepicker coerente === */
.mno-row input[type="date"]{
appearance:none;-webkit-appearance:none;
padding:8px 12px;border:1px solid var(--border);border-radius:6px;
font-size:.9rem;font-family:inherit;background:#fff url("data:image/svg+xml;utf8,") right 10px center no-repeat;
background-size:16px;padding-right:34px;color:var(--text);
width:100%;cursor:pointer;
}
.mno-row input[type="date"]:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,108,170,.08);outline:none}
.mno-row input[type="date"]::-webkit-calendar-picker-indicator{
opacity:0;cursor:pointer;position:absolute;right:0;width:30px;height:100%;
}
.mno-row input[type="date"]::-webkit-inner-spin-button,
.mno-row input[type="date"]::-webkit-clear-button{display:none}
/* === Flatpickr override Nordfish === */
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:#006caa !important;border-color:#006caa !important;color:#fff !important}
.flatpickr-day.today{border-color:#e8501d !important;color:#e8501d}
.flatpickr-day.today:hover{background:#e8501d !important;color:#fff !important}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{color:#006caa !important;font-weight:700}
.flatpickr-input.form-control[readonly],
input.form-control[readonly].flatpickr-input{background:#fff}
.mno-row .flatpickr-input + input{
width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;
font-size:.9rem;font-family:inherit;background:#fff;color:var(--text);cursor:pointer;
}
.mno-row .flatpickr-input + input:focus{border-color:#006caa;box-shadow:0 0 0 2px rgba(0,108,170,.08);outline:none}
/* === Tom Select override Nordfish === */
.mno-row .ts-wrapper{width:100%}
.mno-row .ts-control{padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:#fff;min-height:auto}
.mno-row .ts-wrapper.focus .ts-control{border-color:#006caa;box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.mno-row .ts-dropdown{border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.1);font-size:.85rem}
.mno-row .ts-dropdown .active{background:#eff6fb;color:#006caa}
.mno-row .ts-dropdown .optgroup-header{background:#f8fafc;color:var(--text3);font-weight:700;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;padding:6px 10px}
/* === Tom Select z-index sopra modal + altezza ampia === */
.ts-dropdown{z-index:10000 !important}
.ts-dropdown .ts-dropdown-content{max-height:340px !important;overflow-y:auto !important}
.ts-dropdown .option{padding:8px 12px;border-bottom:1px solid #f1f5f9;font-size:.85rem}
.ts-dropdown .option:last-child{border-bottom:none}
.ts-dropdown .option.active,.ts-dropdown .active{background:#eff6fb !important;color:#006caa}
/* === Modal nuovo ordine — combobox cliente custom === */
.mno-combo-wrap{position:relative}
.mno-combo-wrap input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:.9rem;font-family:inherit;background:#fff;outline:none}
.mno-combo-wrap input:focus{border-color:#006caa;box-shadow:0 0 0 2px rgba(0,108,170,.08)}
.mno-combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:6px;max-height:340px;overflow-y:auto;z-index:11000;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.mno-combo-row{padding:8px 12px;cursor:pointer;font-size:.85rem;border-bottom:1px solid #f1f5f9}
.mno-combo-row:last-child{border-bottom:none}
.mno-combo-row:hover{background:#eff6fb}
.mno-combo-row strong{color:var(--text);font-weight:600}
.mno-combo-row small{display:block;color:var(--text3);font-size:.72rem;margin-top:2px}
.mno-combo-empty{color:var(--text3);cursor:default}
/* === Sede modale: highlight ultima sede usata === */
.sede-btn.sede-btn-last{position:relative}
.sede-btn.sede-btn-last::after{
content:'Ultima usata';position:absolute;bottom:-8px;right:-8px;
background:#fff;color:var(--text);padding:2px 8px;border-radius:10px;
font-size:.6rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
line-height:1;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.sede-selector-actions{padding-bottom:8px}
/* === Sede modale: checkbox 'Ricorda' === */
.sede-remember{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin:0 0 20px;padding:9px 16px;border-radius:999px;background:var(--surface2,#f1f5f9);border:1px solid var(--border,#e2e8f0);font-size:.82rem;color:var(--text2);cursor:pointer;user-select:none;transition:.15s}
.sede-remember:hover{background:#e8eef4;border-color:#cbd5e1}
.sede-remember input{width:16px;height:16px;cursor:pointer;accent-color:#006caa;margin:0}
/* === Modal nuovo ordine — link result === */
.mno-link-result{padding:20px 22px;background:#f0fdf4;border-top:1px solid #86efac;border-bottom:1px solid #86efac}
.mno-link-label{margin:0 0 8px;font-size:.78rem;font-weight:700;color:#166534;text-transform:uppercase;letter-spacing:.5px}
.mno-link-row{display:flex;gap:8px;align-items:center}
.mno-link-row input{flex:1;padding:7px 10px;border:1px solid #86efac;border-radius:6px;font-size:.7rem;font-family:ui-monospace,monospace;background:#fff;color:var(--text);outline:none}
.mno-link-copy,.mno-link-open{padding:8px 16px;border:none;border-radius:6px;font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem;background:#e8501d;color:#fff}
.mno-link-copy:hover,.mno-link-open:hover{background:#c64517}
.mno-link-actions{margin-top:10px;text-align:right}
/* === Debug source banner per tab === */
.debug-source{margin:0 0 8px;padding:6px 10px;background:#fef3c7;border:1px dashed #f59e0b;border-radius:6px;font-size:.7rem;color:#78350f;font-family:ui-monospace,monospace;line-height:1.4;word-break:break-all}
.debug-source .dbg-lbl{font-weight:700;color:#92400e;margin-right:4px}
.debug-source code{background:#fef3c7;color:#78350f;padding:0;font-family:inherit;font-size:inherit;font-weight:600}
.debug-source .dbg-extra{display:block;margin-top:2px;color:#a16207;font-size:.65rem}
/* === Debug toggle topbar === */
#debug-toggle-btn.is-active{background:#f59e0b;color:#fff;border-color:#f59e0b}
#debug-toggle-btn.is-active:hover{background:#d97706;border-color:#d97706}
body:not(.debug-on) .debug-source{display:none !important}
/* PWA_IOS_HEADER_GRID — separa logo/menu e selettore sede sotto la Dynamic Island */
@media all and (display-mode:standalone) and (max-width:760px){
.topbar{
display:grid!important;
grid-template-columns:36px minmax(0,1fr) 36px!important;
grid-template-areas:
". logo menu"
"switch switch switch"!important;
grid-template-rows:40px auto!important;
align-items:center!important;
flex-wrap:nowrap!important;
column-gap:8px!important;
row-gap:6px!important;
min-height:0!important;
height:auto!important;
padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) 10px calc(env(safe-area-inset-left) + 12px)!important;
}
.topbar-left{
grid-area:logo!important;
min-width:0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
}
.topbar-left::before{display:none!important;content:none!important;width:0!important;height:0!important}
.topbar-logo{
position:static!important;
left:auto!important;
top:auto!important;
transform:none!important;
margin:0!important;
height:38px!important;
padding:4px 10px!important;
border-radius:8px!important;
}
.topbar-right{
grid-area:menu!important;
min-width:36px!important;
display:flex!important;
justify-content:flex-end!important;
align-items:center!important;
}
.topbar-btn-kebab{width:34px!important;height:34px!important}
.topbar-center{
grid-area:switch!important;
position:static!important;
left:auto!important;
top:auto!important;
transform:none!important;
width:100%!important;
min-width:0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:7px!important;
padding:0!important;
overflow:visible!important;
}
.topbar-center strong{font-size:.72rem!important;letter-spacing:.35px!important;flex:0 0 auto!important}
.sede-pill-switch{margin-left:0!important;flex:0 1 auto!important;min-width:0!important}
.sede-pill-btn{padding:4px 9px!important;font-size:.68rem!important}
}
@media all and (display-mode:standalone) and (max-width:380px){
.topbar-center{gap:5px!important}
.topbar-center strong{font-size:.66rem!important}
.sede-pill-btn{padding:4px 7px!important;font-size:.63rem!important}
}
/* NOTCH_SAFE_BROWSER — safe-area laterale anche in Safari normale (non solo standalone), su touch */
@media (orientation:landscape) and (pointer:coarse){
.topbar{padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
}
@media (orientation:portrait) and (pointer:coarse){
.topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}
/* Overlay "Contatta il tuo agente" operatore (cliente senza listino dedicato) */
.op-agente-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.55);align-items:center;justify-content:center;padding:20px}
.op-agente-box{background:#fff;border-radius:16px;padding:32px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.op-agente-box h3{margin:0 0 12px;font-size:1.25rem;color:#0f172a}
.op-agente-box p{margin:0 0 18px;color:#475569;font-size:.95rem;line-height:1.55}
.op-agente-contatti{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:20px}
.op-agente-nome{font-weight:700;color:#0f172a;font-size:1.05rem}
.op-agente-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#006caa;color:#fff;border-radius:10px;text-decoration:none;font-weight:600}
.op-agente-close{padding:11px 26px;background:#006caa;color:#fff;border:none;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer}
.op-agente-close:hover{opacity:.9}
/* Leggibilità Stock: caratteri più grandi. */
:is(#stock-table,#milano-table) th{font-size:.8rem;font-weight:700}
:is(#stock-table,#milano-table) td{font-size:.875rem!important;font-weight:600}
:is(#stock-table,#milano-table) :is(.product-name,.kg-value,.date-value,.note-input){font-size:.875rem;font-weight:600}
:is(#stock-table,#milano-table) .product-code{font-size:.8rem}
:is(#stock-table,#milano-table) .csv-row-id{font-size:.7rem}
:is(#stock-table,#milano-table) .badge-nd{font-size:.75rem;font-weight:700}
:is(#stock-cards,#milano-cards) :is(.ml-label,.card-stat-label){font-size:.75rem;font-weight:700}
:is(#stock-cards,#milano-cards) .note-input{font-size:.875rem;font-weight:600}
:is(#stock-table,#milano-table,#stock-cards,#milano-cards) .note-input::placeholder{opacity:1;font-weight:600}
/* Stock: dieci colonne proporzionate al contenitore; su mobile restano le schede. */
:is(#stock-table,#milano-table){min-width:0;width:100%;table-layout:fixed}
:is(#stock-table,#milano-table) :is(th,td){padding-left:clamp(4px,.65vw,12px);padding-right:clamp(4px,.65vw,12px)}
:is(#stock-table,#milano-table) th{white-space:normal!important;overflow-wrap:anywhere;letter-spacing:.2px;line-height:1.3}
:is(#stock-table,#milano-table) th:nth-child(1){width:7.5%!important}
:is(#stock-table,#milano-table) th:nth-child(2){width:22.5%!important}
:is(#stock-table,#milano-table) th:nth-child(3){width:7%!important;overflow-wrap:normal}
:is(#stock-table,#milano-table) th:nth-child(4){width:6%!important}
:is(#stock-table,#milano-table) th:nth-child(5){width:9%!important}
:is(#stock-table,#milano-table) th:nth-child(6){width:11%!important}
:is(#stock-table,#milano-table) th:nth-child(7){width:10%!important}
:is(#stock-table,#milano-table) th:nth-child(8){width:10%!important}
:is(#stock-table,#milano-table) th:nth-child(9){width:8%!important}
:is(#stock-table,#milano-table) th:nth-child(10){width:9%!important}
:is(#stock-table,#milano-table) .product-name{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:8px;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.4}
:is(#stock-table,#milano-table) .stock-photo-button[data-photo-operator="1"]{margin:3px 0}
:is(#stock-table,#milano-table) :is(.product-code,.csv-row-id){max-width:100%;overflow-wrap:anywhere;white-space:normal}
:is(#stock-table,#milano-table) .product-code{padding:3px 5px}
:is(#stock-table,#milano-table) :is(.kg-value,td:nth-child(5),td:nth-child(10)){overflow-wrap:anywhere}
:is(#stock-table,#milano-table) .order-qty{gap:2px}
:is(#stock-table,#milano-table) .order-btn{flex:0 0 24px;width:24px}
:is(#stock-table,#milano-table) .order-input{min-width:0;width:36px;flex:1 1 36px;padding-left:0;padding-right:0}
:is(#stock-table,#milano-table) textarea.note-input{white-space:pre-wrap;overflow-wrap:anywhere;min-height:2.6em;line-height:1.3}
:is(#stock-table,#milano-table) .col-resize-handle{display:none}
@media(min-width:901px) and (max-width:1200px){
:is(#stock-table,#milano-table) :is(th,td){padding-left:4px;padding-right:4px}
:is(#stock-table,#milano-table) th{font-size:.72rem}
:is(#stock-table,#milano-table) :is(td:nth-child(5),td:nth-child(10)){font-size:.75rem!important}
}
:is(#stock-table,#milano-table) td{overflow-wrap:anywhere}
/* Il lotto resta leggibile per intero anche nelle schede più strette. */
:is(#stock-cards,#milano-cards) .ml-lotto{max-width:100%;min-width:0;box-sizing:border-box}
:is(#stock-cards,#milano-cards) .ml-lotto .ml-label{flex-shrink:0}
:is(#stock-cards,#milano-cards) .lotto-value{min-width:0;white-space:normal;overflow-wrap:anywhere}
/* Intestazioni Stock centrate; la fotocamera resta sopra la colonna foto. */
:is(#stock-table,#milano-table) th{text-align:center!important}
:is(#stock-table,#milano-table) .stock-product-heading > span:last-child{flex:1;min-width:0;text-align:center}
/* Testi delle righe allineati al centro delle rispettive colonne. */
:is(#stock-table,#milano-table) td{text-align:center!important}
:is(#stock-table,#milano-table) :is(.product-name,.kg-value,.date-value,.note-input){text-align:center}
:is(#stock-table,#milano-table) .code-cell-stack{align-items:center}
/* Ordine operatore: stessi testi blu e gerarchia della tabella Stock. */
:is(#modal-nuovo-ordine,.milano-modal,.milano-cart-dropdown,.cliente-toolbar){--text2:var(--blue);--text3:var(--blue)}
#modal-nuovo-ordine :is(.mno-row label,.mno-status,.mno-stock-count,.mno-combo-sub){font-size:.875rem;font-weight:600}
#modal-nuovo-ordine :is(input,select,textarea){font-weight:600;min-width:0}
#modal-nuovo-ordine input::placeholder{color:var(--blue);opacity:1}
#modal-nuovo-ordine .mno-prod-row{font-size:.875rem;grid-template-columns:minmax(0,.8fr) minmax(0,2.6fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr)}
#modal-nuovo-ordine .mno-prod-row > *{min-width:0;overflow-wrap:anywhere}
#modal-nuovo-ordine .mno-prod-name{font-weight:600;white-space:normal}
:is(.milano-modal,.milano-cart-dropdown) :is(label,.mc-detail,.mc-note){font-size:.875rem;font-weight:600}
@media(max-width:640px){#modal-nuovo-ordine .mno-prod-row{grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,1.3fr)}}
/* Ritiro e consegne: chip compatto visibile anche nella card chiusa. */
.order-header .order-delivery-date {
display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;margin-top:6px;
width:fit-content;max-width:100%;box-sizing:border-box;
padding:4px 9px;border:0;border-radius:12px;background:#e5f3fb;color:#006caa;white-space:normal;
font-size:.78rem;line-height:1.45;
}
.order-header .order-delivery-label {
font-size:inherit;font-weight:400;line-height:inherit;letter-spacing:normal;text-transform:none;
}
.order-header .order-delivery-label::after {content:':';}
.order-header .order-delivery-value {
font-size:inherit;font-weight:600;line-height:inherit;word-break:normal;overflow-wrap:normal;
}