/* Base layout e componenti iniziali
   Estratto da assets/style.css per rendere il progetto piu manutenibile. */


:root{--bg:#eef2f7;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#dbe3ef;--dark:#020617;--good:#059669;--danger:#dc2626;--warn:#d97706}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.app{max-width:1680px;margin:auto;padding:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;gap:12px;align-items:center}.logo{background:var(--dark);color:white;border-radius:18px;padding:14px;font-weight:900}h1{margin:0;font-size:28px}.muted{color:var(--muted);font-size:13px}.scan{display:flex;background:white;border:1px solid var(--border);padding:8px;border-radius:18px;gap:8px;box-shadow:0 1px 3px #0001}
input,select,textarea{width:100%;height:42px;border:1px solid #cbd5e1;border-radius:12px;background:white;padding:0 12px;font-size:14px}textarea{height:80px;padding-top:10px}button{border:0;border-radius:12px;background:var(--dark);color:white;padding:10px 14px;font-weight:800;cursor:pointer}button.secondary{background:white;color:var(--text);border:1px solid #cbd5e1}button.good{background:var(--good)}button.warn{background:var(--warn)}button.danger{background:var(--danger)}button:disabled{opacity:.45;cursor:not-allowed}
.nav{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;background:white;border:1px solid var(--border);border-radius:20px;padding:8px;margin:18px 0;box-shadow:0 1px 3px #0001}.nav button{background:white;color:#334155}.nav button.active{background:var(--dark);color:white}
.nav-label-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav-alert-dot{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  box-shadow:0 0 0 3px rgba(220,38,38,.16);
}
.nav-alert-dot.inline{
  vertical-align:middle;
  margin-left:8px;
}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)}.layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}.card{background:white;border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 1px 3px #0000000d}.row{display:flex;justify-content:space-between;gap:12px;align-items:center}.badge{display:inline-flex;align-items:center;border-radius:999px;background:#f1f5f9;padding:5px 10px;font-size:12px;font-weight:800}.badge.dark{background:var(--dark);color:white}.badge.good{background:#dcfce7;color:#166534}.badge.warn{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:#991b1b}
.stat .val{font-size:32px;font-weight:900}.bigtotal{border:4px solid #10b981;background:#ecfdf5;text-align:center}.bigtotal .amount{font-size:64px;font-weight:1000;color:#047857;line-height:1.05}.sticky{position:sticky;top:12px}.item{background:#f8fafc;border:1px solid #edf2f7;border-radius:16px;padding:12px;margin:8px 0}.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:16px}.table{border-collapse:collapse;width:100%;min-width:850px}.table th,.table td{padding:11px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}.table th{background:#f8fafc}.hidden{display:none!important}.section-title{font-size:20px;font-weight:900;margin:0 0 4px}
.touch button{min-height:92px;font-size:16px}.qrbox{width:76px;height:76px;border:3px solid #111;border-radius:14px;display:grid;place-items:center;font-size:34px;background:white}.greenbox{background:#ecfdf5;color:#065f46}.amberbox{background:#fffbeb;color:#92400e}.bluebox{background:#eff6ff;color:#1d4ed8}.redbox{background:#fef2f2;color:#991b1b}.toolbar{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1050px){.nav{grid-template-columns:repeat(3,1fr)}.layout,.g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:stretch}.bigtotal .amount{font-size:44px}}

button.out{background:white;color:#0f172a;border:1px solid #cbd5e1}.blue{background:#eff6ff;color:#1d4ed8}.amber{background:#fffbeb;color:#92400e}


/* V4.2 - Totale da pagare molto visibile */
.total-card, .bigtotal, .pay-total-card {
  border: 4px solid #10b981 !important;
  background: #ecfdf5 !important;
  text-align: center !important;
  box-shadow: 0 18px 40px rgba(16,185,129,.18) !important;
}
.huge, .pay-total-amount {
  font-size: clamp(46px, 7vw, 86px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  color: #047857 !important;
  letter-spacing: -0.05em !important;
}
.pay-total-sticky {
  position: sticky;
  top: 12px;
  z-index: 20;
}
.pay-confirm-button {
  width: 100%;
  min-height: 70px;
  font-size: 20px;
  font-weight: 1000;
}


/* V4.5 - Cassa a due colonne con carrello sempre accanto */
.cashier-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:16px;
  align-items:start;
}
.cashier-left{
  min-height:70vh;
}
.cashier-right{
  position:sticky;
  top:12px;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 24px);
  overflow:auto;
}
.cashier-cart-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cart-line{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 90px 84px 120px 86px;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border,#dbe3ef);
  border-radius:16px;
  background:#f8fafc;
}
.cart-line-main small,
.cart-line-total small{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-top:2px;
}
.cart-line-qty input{
  text-align:center;
  font-weight:900;
}
.empty-cart{
  padding:40px;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  text-align:center;
}
.pay-total-card{
  border:4px solid #10b981 !important;
  background:#ecfdf5 !important;
  border-radius:22px;
  padding:18px;
  text-align:center;
  box-shadow:0 18px 40px rgba(16,185,129,.18);
}
.pay-total-label{
  font-size:13px;
  font-weight:1000;
  letter-spacing:.22em;
  color:#065f46;
}
.pay-total-amount{
  margin-top:6px;
  font-size:clamp(48px,6vw,82px);
  font-weight:1000;
  line-height:1;
  color:#047857;
  letter-spacing:-.06em;
}
.pay-total-badges{
  margin-top:10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.payment-panel{
  padding:14px;
}
.quick-cash{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.change-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.change-box>div{
  border-radius:16px;
  background:#f8fafc;
  padding:12px;
  text-align:center;
}
.change-box span,
.profit-summary span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.change-box b{
  display:block;
  margin-top:4px;
  font-size:24px;
}
.change-highlight{
  background:#eff6ff !important;
  color:#1d4ed8;
}
.change-highlight b{
  font-size:34px;
}
.profit-summary{
  margin:12px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.profit-summary>div{
  border-radius:14px;
  background:#f8fafc;
  padding:10px;
  text-align:center;
}
.pay-confirm-button{
  width:100%;
  min-height:74px;
  font-size:22px;
  font-weight:1000;
}
.pay-secondary-button{
  width:100%;
  margin-top:8px;
  min-height:48px;
}
@media(max-width:1100px){
  .cashier-layout{
    grid-template-columns:1fr;
  }
  .cashier-right{
    position:static;
    max-height:none;
    overflow:visible;
  }
  .cart-line{
    grid-template-columns:1fr;
  }
}


/* V4.9 - visibilità movimenti e configurazione servizi */
button.danger{background:#dc2626;color:white;border:1px solid #dc2626}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar input{max-width:220px}
.tablewrap input,.tablewrap select{min-width:90px}


/* V5 - servizi per categoria e sottocategoria */
.greenbox{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0}
.bluebox{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.amberbox{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar input{max-width:230px}
button.danger{background:#dc2626;color:white;border:1px solid #dc2626}