/* ===========================================================
   Petfood ERP — design system (monochrome zinc, touch-first)
   =========================================================== */
:root{
  --bg:#eef0f3;            /* app background — grigio chiaro, le card bianche staccano */
  --bg-2:#ffffff;          /* panels */
  --bg-3:#e7eaee;          /* raised / hover leggero */
  --bg-4:#dde1e7;          /* hover marcato */
  --line:#dfe2e7;          /* borders */
  --line-2:#c9cfd7;
  --txt:#1b1d22;           /* primary text */
  --txt-2:#4f5560;         /* secondary */
  --txt-3:#8a909b;         /* muted */
  --accent:#E8853A;        /* arancio brand */
  --accent-ink:#2a1804;
  --accent-soft:#f2f4f6;   /* fondo voci attive / chip — grigino, niente giallino */
  --accent-line:#dde1e6;
  --pos:#13905e;           /* positive / in-stock */
  --pos-bg:#e0f5eb;
  --warn:#ad6a0b;          /* low / attention */
  --warn-bg:#fcf1d8;
  --bad:#d33c43;           /* out / danger */
  --bad-bg:#fce5e6;
  --info:#2e6fd0;
  --info-soft:#e7effb;     /* agenda / blocchi info */
  --info-line:#c9daf4;
  --ok-line:#b4e3cc;       /* bordi stato ok */
  --bad-line:#f2c6c9;
  --warn-line:#ecd9a8;
  --sel:#cfe0f5;           /* ::selection */
  --av-a:#e8ebef;          /* gradient avatar */
  --av-b:#d6dbe2;
  --radius:14px;
  --radius-sm:10px;
  --tap:38px;              /* densità v4: 38px su desktop, cresce su touch */
  --pad:16px;
  --nav-w:236px;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------------- Tema scuro (Impostazioni → Tema) ----------------
   html[data-theme=dark] = forzato; html[data-theme=auto] segue il sistema.
   I due blocchi sono identici: tenerli allineati a ogni modifica. */
html[data-theme="dark"]{
  --bg:#16161a; --bg-2:#1d1d22; --bg-3:#24242a; --bg-4:#2c2c33;
  --line:#36363e; --line-2:#44444d;
  --txt:#f1f2f4; --txt-2:#b2b6bd; --txt-3:#7e828b;
  --accent-ink:#140d04; --accent-soft:#26262c; --accent-line:#3a3a42;
  --pos:#3ecf8e; --pos-bg:#0f2a1d; --warn:#e6b450; --warn-bg:#2a2310;
  --bad:#f0676b; --bad-bg:#2a1316; --info:#6aa6ff;
  --info-soft:#16263b; --info-line:#244668;
  --ok-line:#1f5e40; --bad-line:#5e2a2e; --warn-line:#5a4a1e;
  --sel:#3a3a42; --av-a:#3a3a42; --av-b:#26262b;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#16161a; --bg-2:#1d1d22; --bg-3:#24242a; --bg-4:#2c2c33;
    --line:#36363e; --line-2:#44444d;
    --txt:#f1f2f4; --txt-2:#b2b6bd; --txt-3:#7e828b;
    --accent-ink:#140d04; --accent-soft:#26262c; --accent-line:#3a3a42;
    --pos:#3ecf8e; --pos-bg:#0f2a1d; --warn:#e6b450; --warn-bg:#2a2310;
    --bad:#f0676b; --bad-bg:#2a1316; --info:#6aa6ff;
    --info-soft:#16263b; --info-line:#244668;
    --ok-line:#1f5e40; --bad-line:#5e2a2e; --warn-line:#5a4a1e;
    --sel:#3a3a42; --av-a:#3a3a42; --av-b:#26262b;
  }
}

/* Touch mode: bigger everything. Auto-enabled on coarse pointers, or forced. */
@media (pointer: coarse){ :root{ --tap:54px; --pad:20px; } }
body[data-touch="on"]{ --tap:58px; --pad:22px; font-size:15px; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font); background:var(--bg); color:var(--txt);
  font-size:14px; line-height:1.45; overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
kbd{ font-family:var(--mono); font-size:9.5px; color:var(--txt-3); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }
button{ font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; font-size:16px; color:var(--txt); }
::selection{ background:var(--sel); }
svg{ display:block; }
[data-icon]{ display:inline-flex; vertical-align:middle; }   /* icone usabili anche in mezzo al testo senza spezzare la riga */
[data-icon] svg{ width:1.25em; height:1.25em; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
input[type="checkbox"]{ width:22px; height:22px; accent-color:var(--accent); cursor:pointer; }
body[data-touch="on"] input[type="checkbox"]{ width:26px; height:26px; }

/* scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

/* ---------------- App shell ---------------- */
#app{ display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:minmax(0,1fr); height:100%; }   /* minmax(0,1fr): la riga non può crescere oltre il viewport, sennò lo scroll di #view muore */

#sidenav{
  background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-width:0;
}
.brand{ display:flex; align-items:center; gap:10px; padding:16px 16px 12px; }
.brand-mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--accent); color:#fff; flex:0 0 auto; }
.brand-mark [data-icon] svg{ width:20px; height:20px; }
.brand-name{ font-size:16px; letter-spacing:-.01em; color:var(--txt-2); }
.brand-name strong{ color:var(--txt); font-weight:700; }

.nav{ display:flex; flex-direction:column; gap:0; padding:4px 10px 10px; overflow:auto; flex:1; }
.nav-foot{ padding:8px 10px; border-top:1px solid var(--line); }
.navbtn{
  display:flex; align-items:center; gap:11px; width:100%; min-height:38px;
  padding:0 11px; border-radius:8px; color:var(--txt-2);
  font-size:13.5px; font-weight:500; transition:background .12s,color .12s; text-align:left;
}
body[data-touch="on"] .navbtn{ min-height:48px; }
.navbtn [data-icon] svg{ width:18px; height:18px; }
.navbtn:hover{ background:var(--bg-3); color:var(--txt); }
.navbtn.active{ background:var(--accent-soft); color:var(--accent); }
.navbtn .badge{ margin-left:auto; }
.navbtn .bdg{ margin-left:auto; min-width:20px; height:18px; padding:0 6px; border-radius:99px;
  background:var(--bg-4); color:var(--txt-2); font-size:11px; font-weight:600;
  display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.navbtn.active .bdg{ background:var(--accent-line); color:var(--accent); }
.nav-grp{ margin:13px 8px 5px; font-size:10.5px; color:var(--txt-3); font-weight:600; }
.nav-grp:first-child{ margin-top:6px; }
.nav-foot .navbtn{ min-height:34px; font-size:13px; color:var(--txt-3); }
.nav-foot .navbtn [data-icon] svg{ width:16px; height:16px; }

#main{ display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
#topbar{
  display:flex; align-items:center; gap:14px; padding:0 18px; height:54px;
  border-bottom:1px solid var(--line); background:var(--bg); flex:0 0 auto;
}
body[data-touch="on"] #topbar{ height:62px; }
.store{ display:flex; flex-direction:column; line-height:1.1; }
.store-name{ font-weight:600; font-size:14px; }
.store-op{ font-size:11px; color:var(--txt-3); }
.spacer{ flex:1; }
.clock{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--txt-3); font-size:13px; }
#view{ flex:1; min-height:0; overflow:auto; padding:18px 20px; }   /* min-height:0: senza, il flex item cresce oltre il viewport e lo scroll muore */

#tabbar{ display:none; }
.only-narrow{ display:none !important; }   /* !important: .iconbtn{display:grid} la sovrascriverebbe; la media <860 ribalta con !important successivo */

/* ---------------- Generic components ---------------- */
.page-head{ display:flex; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap; }
.page-head h1{ font-size:21px; font-weight:650; letter-spacing:-.02em; margin:0; }
.page-head .spacer{ flex:1; }
.muted{ color:var(--txt-3); }
.row{ display:flex; gap:10px; align-items:center; }
.wrap{ flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 15px; border-radius:9px;
  background:var(--bg-2); color:var(--txt); font-weight:600; font-size:13.5px;
  border:1px solid var(--line); transition:background .12s,border-color .12s, transform .05s; white-space:nowrap;
}
.btn [data-icon] svg{ width:16px; height:16px; }
.btn:hover{ background:var(--bg-3); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover{ filter:brightness(.93); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--txt-2); }
.btn.ghost:hover{ background:var(--bg-3); color:var(--txt); }
.btn.danger{ color:var(--bad); border-color:var(--bad); background:var(--bg-2); }
.btn.danger:hover{ background:var(--bad-bg); }
.btn.sm{ min-height:30px; padding:0 11px; font-size:12.5px; border-radius:7px; }
.btn.sm [data-icon] svg{ width:14px; height:14px; }
body[data-touch="on"] .btn.sm{ min-height:40px; }
.btn.lg{ min-height:calc(var(--tap) + 12px); font-size:16px; padding:0 22px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.45; pointer-events:none; }

.iconbtn{ display:grid; place-items:center; width:var(--tap); height:var(--tap);
  border-radius:var(--radius-sm); background:var(--bg-3); border:1px solid var(--line); color:var(--txt-2); }
.iconbtn:hover{ background:var(--bg-4); color:var(--txt); }
.iconbtn [data-icon] svg{ width:21px; height:21px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:var(--txt-2); font-weight:600; }
.input{
  min-height:var(--tap); padding:0 13px; border-radius:9px; font-size:13.5px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt); width:100%; outline:none;
}
body[data-touch="on"] .input{ font-size:16px; }   /* iOS non zooma sotto 16px */
textarea.input{ padding:12px 14px; min-height:84px; resize:vertical; }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--bg-2); }
.input::placeholder{ color:var(--txt-3); }
select.input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; }

.search{ position:relative; flex:1; min-width:180px; }
.search [data-icon]{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--txt-3); }
.search [data-icon] svg{ width:15px; height:15px; }
.search .input{ padding-left:36px; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11.5px; font-weight:600; background:var(--bg-4); color:var(--txt-2); white-space:nowrap; }
.badge.pos{ background:var(--pos-bg); color:var(--pos); }
.badge.warn{ background:var(--warn-bg); color:var(--warn); }
.badge.bad{ background:var(--bad-bg); color:var(--bad); }

.card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(18,22,28,.05); }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }

.stat{ padding:18px; }
.stat .k{ font-size:11.5px; color:var(--txt-3); }
.stat .v{ font-size:28px; font-weight:700; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .s{ font-size:13px; color:var(--txt-3); margin-top:2px; }
.stat .spark-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; min-height:22px; }
.stat .spark{ width:70px; height:22px; flex:0 0 auto; }
.stat .delta{ font-size:12px; font-weight:600; color:var(--txt-3); white-space:nowrap; }
.stat .delta.up{ color:var(--pos); }
.stat .delta.down{ color:var(--bad); }

/* tables */
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; font-size:11px; color:var(--txt-3);
  font-weight:600; padding:9px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg-2); z-index:1; }
.tbl td{ padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr:hover td{ background:var(--bg-3); }
.tbl tr.clickable:hover td{ background:var(--bg-3); cursor:pointer; }
.tbl td b{ font-size:13px; font-weight:600; }
.tbl .sub{ font-size:12px; color:var(--txt-3); margin-top:1px; font-weight:400; }
.tbl tr.tot td{ font-weight:600; }
.tbl tr.tot:hover td{ background:var(--bg-2); }
td.num, th.num{ text-align:right; white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.empty{ text-align:center; color:var(--txt-3); padding:60px 20px; }
.empty [data-icon] svg{ width:40px; height:40px; margin:0 auto 12px; color:var(--line-2); }

/* In cassa la sidebar collassa a rail di sole icone: tutto lo spazio al banco */
@media (min-width:861px){
  #app[data-screen="cassa"]{ grid-template-columns:64px 1fr; }
  #app[data-screen="cassa"] .navbtn-label,
  #app[data-screen="cassa"] .nav-grp,
  #app[data-screen="cassa"] .brand-name,
  #app[data-screen="cassa"] .navbtn .bdg{ display:none; }
  #app[data-screen="cassa"] .brand{ justify-content:center; padding:14px 0 10px; }
  #app[data-screen="cassa"] .nav{ padding:8px 10px; }
  #app[data-screen="cassa"] .navbtn{ justify-content:center; padding:0; gap:0; }
  #app[data-screen="cassa"] .nav-foot .navbtn{ justify-content:center; padding:0; }
}

/* ---------------- POS ---------------- */
.cassa{ display:grid; grid-template-columns:1fr 400px; grid-template-rows:minmax(0,1fr) auto; gap:0 16px; height:100%; }
.pos-left{ display:flex; flex-direction:column; gap:14px; min-height:0; }
.pos-scan{ display:flex; gap:10px; align-items:center; }
.mult{ display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.mult .lbl-sm{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); font-weight:600; margin-right:3px; }
.mbtn{ min-width:44px; min-height:var(--tap); padding:0 10px; border-radius:var(--radius-sm);
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt-2);
  font-weight:650; font-size:14px; font-variant-numeric:tabular-nums; }
.mbtn:hover{ background:var(--bg-3); }
.mbtn.active{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
@media (max-width:1100px){ .pos-scan{ flex-wrap:wrap; } }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cassa .chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.cassa .chips .chip{ flex:0 0 auto; }
.chip{ min-height:32px; padding:0 13px; border-radius:99px; background:var(--bg-2); border:1px solid var(--line);
  color:var(--txt-2); font-weight:500; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }
.chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cassa .chip{ min-height:38px; font-weight:600; font-size:13px; }
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; overflow:auto; padding-right:4px; align-content:start; flex:1; }
.tile{ display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:104px;
  padding:13px; border-radius:var(--radius-sm); background:var(--bg-2); border:1px solid var(--line);
  text-align:left; transition:background .12s,border-color .12s,transform .05s; }
.tile:hover{ background:var(--bg-3); border-color:var(--line-2); }
.tile:active{ transform:translateY(1px); }
.tile.out{ opacity:.5; }
.tile .t-tag{ font-size:11.5px; color:var(--txt-3); font-weight:500; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip .chip-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; margin-right:7px; display:inline-block; vertical-align:1px; }
.chip.active .chip-dot{ background:#fff !important; }
.tile .t-name{ font-weight:600; font-size:13.5px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile .t-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; white-space:nowrap; }
.tile .t-price{ font-weight:700; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tile .t-stock{ font-size:11.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }
.tile .t-stock.warn{ color:var(--warn); font-weight:600; }
.tile .t-stock.bad{ color:var(--bad); font-weight:600; }

/* modalità consulente: la striscia "Per {animale}" sopra la griglia */
.forpet{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px 14px; margin-bottom:2px; }
.forpet .fp-h{ display:flex; align-items:center; gap:9px; margin-bottom:11px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.forpet .fp-h [data-icon] svg{ width:18px; height:18px; color:var(--accent); }
.forpet .fp-h .muted2{ color:var(--txt-3); font-weight:500; font-size:12.5px; }
.forpet .fp-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; }
.forpet .fp{ border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; text-align:left; background:var(--bg-2);
  display:flex; flex-direction:column; gap:3px; font-family:inherit; }
.forpet .fp:hover{ border-color:var(--txt-3); }
.forpet .fp:active{ transform:translateY(1px); }
.forpet .fp b{ font-size:13.5px; font-weight:650; line-height:1.25; }
.forpet .fp .why{ font-size:11.5px; color:var(--txt-2); }
.forpet .fp .why .w{ color:var(--warn); font-weight:650; }
.forpet .fp .pr{ font-size:15px; font-weight:750; margin-top:2px; font-variant-numeric:tabular-nums; text-align:left; }
.forpet .fp .pr-sub{ font-size:11px; font-weight:500; color:var(--txt-3); }
.forpet .fp .add{ font-size:11px; color:var(--accent); font-weight:650; margin-top:1px; }
.forpet .fp.urgent{ border-color:var(--warn); }

/* riga animale nel carrello */
.cart-pet{ display:flex; align-items:center; gap:8px; padding:7px 16px; border-bottom:1px solid var(--line);
  font-size:12px; color:var(--txt-2); flex-wrap:wrap; }
.cart-pet .pw{ color:var(--warn); font-weight:650; }
.cart-pet .sep{ color:var(--txt-3); }

/* barra inferiore della cassa: azioni F-key, totale, PAGA */
.pos-bottom{ grid-column:1/-1; display:flex; align-items:center; gap:18px; padding:10px 4px 2px;
  border-top:1px solid var(--line); margin-top:12px; }
.pb-acts{ display:flex; gap:18px; }
.pb-act{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--txt-2); background:none; border:none; }
.pb-act:hover{ color:var(--txt); }
.pb-act kbd{ font-family:var(--mono); font-size:10px; color:var(--txt-3); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }
.pb-mini{ flex:1; font-size:12.5px; color:var(--txt-3); text-align:right; }
.pb-tot{ text-align:right; }
.pb-tot .l{ font-size:11.5px; color:var(--txt-3); }
.pb-tot .v{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums; }
.pb-pay{ min-height:54px; padding:0 30px; font-size:17px; }
.pb-pay kbd{ font-family:var(--mono); font-size:9.5px; background:rgba(255,255,255,.25); border-radius:4px; padding:1px 5px; margin-left:2px; }
@media (max-width:1100px){ .pb-acts{ gap:10px; } .pb-mini{ display:none; } }
@media (max-width:860px){
  .pos-bottom{ flex-wrap:wrap; gap:10px; position:sticky; bottom:0; background:var(--bg); padding-bottom:8px; }
  .forpet .fp-row{ grid-template-columns:1fr; }
}

/* receipt / cart */
.cart{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; min-height:0; }
.cart-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.cart-head .ttl{ font-weight:650; }
.cart-cust{ padding:10px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:14px; color:var(--txt-2); }
.cart-cust .who{ flex:1; }
.cart-lines{ flex:1; overflow:auto; }
.cline{ display:flex; align-items:flex-start; gap:11px; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.cline > .q{ flex:0 0 auto; min-width:32px; height:32px; border-radius:8px; background:var(--bg-3);
  font-variant-numeric:tabular-nums; font-weight:650; font-size:13px; color:var(--txt);
  display:grid; place-items:center; border:none; }
.cline > .q:hover{ background:var(--bg-4); color:var(--accent); }
.cline .cl-bd{ flex:1; min-width:0; }
.cline .cl-name{ font-weight:600; font-size:13.5px; line-height:1.3; }
.cline .cl-sub{ font-size:11.5px; color:var(--txt-3); margin-top:1px; }
.cline .cl-acts{ display:none; margin-top:7px; }
.cline.open .cl-acts{ display:inline-flex; }
.cline .cl-tot{ font-weight:700; font-variant-numeric:tabular-nums; font-size:13.5px; margin-top:6px; }
body[data-touch="on"] .cline > .q{ min-width:42px; height:42px; }
.qty{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.qty button{ width:28px; height:28px; display:grid; place-items:center; background:transparent; color:var(--txt-3); }
.qty button:hover{ background:var(--bg-3); color:var(--txt); }
.qty button [data-icon] svg{ width:14px; height:14px; }
.qty .q{ min-width:34px; height:28px; text-align:center; font-variant-numeric:tabular-nums; font-weight:650; font-size:13px;
  background:transparent; color:var(--txt); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.qty .q:hover{ background:var(--bg-3); color:var(--accent); }
body[data-touch="on"] .qty button{ width:40px; height:40px; }
body[data-touch="on"] .qty .q{ min-width:44px; height:40px; }
.cart-foot{ border-top:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.totals{ display:flex; flex-direction:column; gap:4px; }
.totals .tr{ display:flex; justify-content:space-between; font-size:14px; color:var(--txt-2); }
.totals .tr.grand{ font-size:24px; color:var(--txt); font-weight:750; font-variant-numeric:tabular-nums; padding-top:6px; }
.cart-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* keypad */
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
body[data-touch="on"] .keypad button{ min-height:48px; font-size:18px; }   /* compatto: il Resto deve restare sopra la piega */
body[data-touch="on"] .pay-amount{ font-size:26px; padding:4px; }
body[data-touch="on"] .chip{ min-height:48px; }
.keypad button{ min-height:var(--tap); border-radius:var(--radius-sm); background:var(--bg-3); border:1px solid var(--line);
  font-size:20px; font-weight:600; }
.keypad button:hover{ background:var(--bg-4); }
.keypad button:active{ transform:translateY(1px); }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pay-method{ min-height:var(--tap); border-radius:var(--radius-sm); background:var(--bg-3); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:9px; font-weight:600; }
.pay-method.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.pay-amount{ font-size:34px; font-weight:750; font-variant-numeric:tabular-nums; text-align:right; padding:8px 4px; }
.pay-line{ display:flex; justify-content:space-between; font-size:15px; color:var(--txt-2); padding:4px 0; }
.pay-line.change{ font-size:22px; color:var(--pos); font-weight:700; }

/* ---------------- Modal ---------------- */
.modal-back{ position:fixed; inset:0; background:rgba(23,26,31,.35); display:grid; place-items:center; padding:20px; z-index:60; backdrop-filter:blur(2px); }
.modal{ width:min(560px,100%); max-height:92vh; overflow:auto; background:var(--bg-2); border:1px solid var(--line-2); border-radius:18px; }
.modal.wide{ width:min(720px,100%); }
.modal-head{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg-2); }
.modal-head h2{ font-size:18px; margin:0; font-weight:650; }
.modal-head .spacer{ flex:1; }
.modal-body{ padding:20px 20px 28px; display:flex; flex-direction:column; gap:14px; }
.modal-foot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--bg-2); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1/-1; }

/* receipt print */
.receipt{ font-family:var(--mono); background:#fff; color:#111; border-radius:10px; padding:18px; }
.receipt h3{ text-align:center; margin:0 0 4px; }
.receipt .r-line{ display:flex; justify-content:space-between; font-size:13px; }
.receipt hr{ border:none; border-top:1px dashed #aaa; margin:8px 0; }
.receipt .r-tot{ font-weight:700; font-size:16px; }
.receipt .r-note{ text-align:center; font-size:11px; color:#666; margin-top:8px; }

/* toast */
#toast-root{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--bg-4); border:1px solid var(--line-2); color:var(--txt); padding:12px 18px; border-radius:99px; font-weight:600; font-size:14px;
  box-shadow:0 8px 30px rgba(20,24,30,.14); animation:toastin .2s ease; }
.toast.ok{ border-color:var(--ok-line); }
.toast.bad{ border-color:var(--bad-line); }
@keyframes toastin{ from{ opacity:0; transform:translateY(8px); } }

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){ .cassa{ grid-template-columns:1fr 340px; } }

@media (max-width:860px){
  #app{ grid-template-columns:1fr; }
  #sidenav{ display:none; }
  #view{ padding-bottom:84px; }
  .only-narrow{ display:grid !important; }
  #tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; height:72px; background:var(--bg-2);
    border-top:1px solid var(--line); padding:6px; gap:2px; z-index:40; }
  .tabbtn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--txt-3); font-size:11px; font-weight:600; border-radius:10px; }
  .tabbtn [data-icon] svg{ width:24px; height:24px; }
  .tabbtn.active{ color:var(--txt); background:var(--bg-3); }
  .cassa{ grid-template-columns:1fr; height:auto; }
  .pos-left{ height:auto; }
  .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .cart{ position:sticky; bottom:78px; }
  .form-grid{ grid-template-columns:1fr; }
  /* colonna azioni sempre raggiungibile quando la tabella sborda */
  .tbl th:last-child, .tbl td:last-child{ position:sticky; right:0; background:var(--bg-2); }
  .tbl tr.clickable:hover td:last-child{ background:var(--bg-3); }
}

/* drawer for narrow nav */
#sidenav.drawer{ display:flex; position:fixed; inset:0 auto 0 0; width:260px; z-index:70; box-shadow:0 0 0 100vmax rgba(23,26,31,.3); }

@media print{
  body *{ visibility:hidden; }
  #print-area, #print-area *{ visibility:visible; }
  #print-area{ position:fixed; inset:0; background:#fff; padding:20px; }
  .receipt{ box-shadow:none; }
}

/* ---------------- Extended modules (v2) ---------------- */
.dot{ width:9px; height:9px; border-radius:99px; display:inline-block; background:var(--txt-3); }
.dot.t1{ background:var(--pos); } .dot.t2{ background:#7fd0a0; } .dot.t3{ background:var(--warn); }
.dot.t4{ background:#d88; } .dot.t5{ background:var(--txt-3); }

.alert-list{ display:flex; flex-direction:column; }
.alert-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.alert-row.watch{ width:100%; text-align:left; cursor:pointer; font-size:inherit; }
.alert-row.watch:hover{ background:var(--bg-3); }
.alert-row.watch [data-icon="chevron"]{ color:var(--txt-3); }
.alert-row.watch [data-icon="chevron"] svg{ width:15px; height:15px; }
.alert-row:last-child{ border-bottom:none; }
.alert-row .ic{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--bg-3); color:var(--txt-2); flex:0 0 auto; }
.alert-row .ic [data-icon] svg{ width:16px; height:16px; }
.alert-row .ic.warn{ background:var(--warn-bg); color:var(--warn); }
.alert-row .ic.bad{ background:var(--bad-bg); color:var(--bad); }
.alert-row .ic.pos{ background:var(--pos-bg); color:var(--pos); }
.alert-row .body{ flex:1; min-width:0; }
.alert-row .body .t{ font-weight:600; font-size:13px; }
.alert-row .body .s{ font-size:11.5px; color:var(--txt-3); }
.alert-row .acts{ display:flex; gap:7px; flex:0 0 auto; }

.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:860px){ .dash-grid{ grid-template-columns:1fr; } }
.card-title{ padding:13px 16px; border-bottom:1px solid var(--line); font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:9px; }
.card-title .spacer{ flex:1; }
.card-title [data-icon]{ color:var(--txt-3); }
.card-title [data-icon] svg{ width:16px; height:16px; }
.card-title .pill, .card-title .badge{ font-weight:600; }

.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; background:var(--bg-4); color:var(--txt-2); white-space:nowrap; }
.pill.b{ background:var(--accent-soft); color:var(--accent); }   /* etichette in evidenza = accento, non un secondo colore */
.pill.g{ background:var(--pos-bg); color:var(--pos); }
.pill.w{ background:var(--warn-bg); color:var(--warn); }
.pill.r{ background:var(--bad-bg); color:var(--bad); }

.so-flow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.so-flow .step{ font-size:11px; color:var(--txt-3); padding:3px 8px; border-radius:99px; border:1px solid var(--line); }
.so-flow .step.done{ color:var(--pos); border-color:var(--ok-line); }
.so-flow .step.now{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.so-flow .sep{ color:var(--txt-3); }

.banner{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:14px; }
.banner.warn{ background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn); }
.banner.info{ background:var(--bg-3); border:1px solid var(--line-2); color:var(--txt-2); }   /* nota descrittiva, non stato: niente blu decorativo */
.banner .spacer{ flex:1; }

.supplier-pick{ display:flex; flex-direction:column; gap:8px; }
.sp-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-2); }
.sp-row.best{ border-color:var(--ok-line); }
.sp-row .nm{ font-weight:600; flex:1; }
.sp-row .meta{ font-size:13px; color:var(--txt-3); text-align:right; }

/* ---------------- Dev mode toggles ---------------- */
.toggle-row{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); }
.toggle-row:last-child{ border-bottom:none; }
.toggle-row > div:first-child{ flex:1; min-width:0; }
.toggle-row .t{ font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
.toggle-row .s{ font-size:11px; color:var(--txt-3); margin-top:1px; }
.switch{ width:42px; height:24px; border-radius:99px; background:var(--bg-4); border:none; position:relative; flex:0 0 auto; transition:background .15s; cursor:pointer; padding:0; }
.switch .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:99px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .15s; }
.switch.on{ background:var(--pos); }
.switch.on .knob{ transform:translateX(18px); }
body[data-touch="on"] .switch{ width:50px; height:30px; }
body[data-touch="on"] .switch .knob{ width:24px; height:24px; }
body[data-touch="on"] .switch.on .knob{ transform:translateX(20px); }

.navbtn.devbtn{ color:var(--txt-3); }

/* agenda / calendar */
.cal-grid{ display:grid; grid-template-columns:64px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); }
.cal-time{ padding:10px 8px; font-size:12px; color:var(--txt-3); text-align:right; border-top:1px solid var(--line); border-right:1px solid var(--line); font-variant-numeric:tabular-nums; }
.cal-slot{ position:relative; border-top:1px solid var(--line); min-height:46px; }
.cal-appt{ margin:3px 6px; padding:7px 10px; border-radius:8px; background:var(--info-soft); border:1px solid var(--info-line); color:var(--info); font-size:13px; cursor:pointer; }
.cal-appt .ttl{ font-weight:600; color:var(--txt); }
.cal-appt.done{ background:var(--pos-bg); border-color:var(--ok-line); color:var(--pos); }
.cal-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }

.subbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* fix layout riga fornitore (ordina per cliente) */
.sp-row{ flex-wrap:wrap; }
.sp-row .dot{ flex:0 0 auto; }
.sp-row .nm{ flex:1 1 160px; min-width:0; }
.sp-row .badge{ flex:0 0 auto; }
.sp-row .meta{ flex:0 0 auto; white-space:nowrap; line-height:1.35; }

/* ---------------- v3: ricerca globale (⌘K) ---------------- */
#globalSearch{ display:flex; align-items:center; gap:9px; width:min(300px,28vw); height:36px; padding:0 12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:9px; color:var(--txt-3);
  font-size:13.5px; cursor:pointer; }
#globalSearch:hover{ border-color:var(--line-2); color:var(--txt-2); }
#globalSearch [data-icon] svg{ width:15px; height:15px; }
#globalSearch kbd{ margin-left:auto; font-family:var(--mono); font-size:10.5px; background:var(--bg-4);
  border:1px solid var(--line-2); border-radius:5px; padding:1px 5px; color:var(--txt-3); }
@media (max-width:860px){ #globalSearch{ display:none; } }
.gs-back{ position:fixed; inset:0; background:rgba(23,26,31,.35); z-index:65; padding:10vh 20px 20px;
  display:flex; justify-content:center; align-items:flex-start; backdrop-filter:blur(2px); }
.gs{ width:min(560px,100%); background:var(--bg-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.gs-head{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); }
.gs-head [data-icon] svg{ width:18px; height:18px; color:var(--txt-3); }
.gs-head input{ flex:1; background:none; border:none; outline:none; font-size:16px; color:var(--txt); font-family:inherit; }
.gs-head kbd{ font-family:var(--mono); font-size:10.5px; background:var(--bg-4); border:1px solid var(--line-2);
  border-radius:5px; padding:2px 6px; color:var(--txt-3); }
.gs-row{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.gs-row:last-child{ border-bottom:none; }
.gs-row:hover, .gs-row.on{ background:var(--bg-3); }
.gs-row.on .gs-go{ color:var(--accent); }
.gs-kind{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); font-weight:600;
  width:84px; flex:0 0 auto; }
.gs-bd{ flex:1; min-width:0; }
.gs-bd b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-bd span{ font-size:12px; color:var(--txt-3); }
.gs-go{ color:var(--txt-3); font-size:13px; }
.gs-empty{ padding:26px; text-align:center; color:var(--txt-3); font-size:13.5px; }

/* ---------------- v3: stato sync ---------------- */
.sync{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--txt-3); white-space:nowrap; }
.sync .d{ width:8px; height:8px; border-radius:50%; background:var(--pos); flex:0 0 auto; }
.sync.local .d{ background:var(--txt-3); }
.sync.off .d{ background:var(--warn); }

/* ---------------- v3: riepilogo del mattino (cruscotto) ---------------- */
.brief{ border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--bg-2),var(--bg)); padding:16px 18px; margin-bottom:16px; }
.brief .bh{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.brief .bh h2{ font-size:18px; font-weight:650; letter-spacing:-.02em; margin:0; }
.brief .bh .bs{ font-size:12.5px; color:var(--txt-3); }
.brief .bit{ display:flex; align-items:center; gap:14px; padding:11px 0; border-top:1px solid var(--line); }
.brief .bit:first-of-type{ border-top:none; margin-top:8px; }
.brief .bn{ width:24px; height:24px; border-radius:7px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:12px; font-weight:600; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.brief .bt{ flex:1; min-width:0; }
.brief .bt b{ font-weight:600; font-size:14px; display:block; }
.brief .bt span{ font-size:12px; color:var(--txt-3); }
.brief .btn{ flex:0 0 auto; }

/* ===========================================================
   v4 — componenti delle pagine mockup (mockups/v4-pagine)
   =========================================================== */
.cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:860px){ .cols, .cols2{ grid-template-columns:1fr; } }
.footnote{ padding:10px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--txt-3); }

/* tabs sottolineate (magazzino) */
.tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line-2); margin-bottom:16px; overflow-x:auto; }
.tabs button{ padding:0 2px 9px; font-size:13.5px; font-weight:600; color:var(--txt-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex:0 0 auto; }
.tabs button:hover{ color:var(--txt-2); }
.tabs button.on{ color:var(--txt); border-bottom-color:var(--txt); }
body[data-touch="on"] .tabs button{ padding-bottom:13px; font-size:14.5px; }

/* cruscotto: striscia KPI unita, celle divise da hairline */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:16px; box-shadow:0 1px 2px rgba(18,22,28,.05); }
.kpi{ background:var(--bg-2); padding:14px 17px; }
.kpi .k{ font-size:11.5px; color:var(--txt-3); }
.kpi .v{ font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:4px; }
.kpi .f{ display:flex; align-items:center; justify-content:space-between; margin-top:5px; min-height:22px; }
.kpi .d{ font-size:12px; font-weight:600; color:var(--txt-3); white-space:nowrap; }
.kpi .d.up{ color:var(--pos); } .kpi .d.dn{ color:var(--bad); }
@media (max-width:860px){ .kpis{ grid-template-columns:1fr 1fr; } }

/* agenda di oggi nel cruscotto */
.agr{ display:flex; gap:11px; padding:10px 16px; border-bottom:1px solid var(--line); align-items:center; }
.agr:last-child{ border-bottom:none; }
.agr .hh{ font-size:12px; color:var(--txt-3); width:40px; flex:0 0 auto; }
.agr .tt{ font-size:13px; font-weight:550; }
.watch .body .t{ font-weight:550; }

/* report: striscia statistiche hairline + barre top prodotti */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:16px; padding:0; }
.stats .st{ padding:14px 18px 15px; border-left:1px solid var(--line); }
.stats .st:first-child{ border-left:none; }
.stats .k{ display:block; font-size:11.5px; color:var(--txt-3); font-weight:500; margin-bottom:4px; }
.stats .v{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.stats .sub{ font-size:12px; color:var(--txt-3); font-weight:500; margin-left:4px; }
@media (max-width:860px){ .stats{ grid-template-columns:1fr 1fr; } .stats .st{ border-top:1px solid var(--line); } }
.brow{ display:grid; grid-template-columns:190px 1fr 84px; gap:14px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); }
.brow:last-child{ border-bottom:none; }
.brow .bn{ font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brow .bt i{ display:block; height:8px; border-radius:99px; background:var(--line-2); }
.card-title + .brow .bt i{ background:var(--accent); }   /* la prima barra è arancio come nel mockup */
.brow .bv{ text-align:right; font-size:12.5px; font-weight:600; }
@media (max-width:860px){ .brow{ grid-template-columns:120px 1fr 84px; gap:10px; } }

/* ordini cliente: kanban — colonne nude, solo le card sono bianche */
.kb{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
.kb-h{ display:flex; align-items:center; gap:8px; padding:0 2px 10px; font-weight:600; font-size:13px; }
.kb-col{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.oc{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.oc:hover{ border-color:var(--line-2); }
.oc .r1{ display:flex; align-items:baseline; gap:8px; font-size:11.5px; color:var(--txt-3); }
.oc b{ font-size:13px; line-height:1.3; }
.oc .s{ font-size:12px; color:var(--txt-2); }
.oc .btn{ align-self:flex-start; margin-top:7px; }
.oc.dim{ opacity:.5; }
@media (max-width:1100px){ .kb{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .kb{ grid-template-columns:1fr; } }

/* acquisti: righe riordino con checkbox */
.rrow{ display:flex; align-items:center; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.rrow:last-child{ border-bottom:none; }
.rrow:hover{ background:var(--bg-3); }
.rrow input[type=checkbox]{ width:16px; height:16px; accent-color:var(--txt); flex:0 0 auto; }
body[data-touch="on"] .rrow input[type=checkbox]{ width:24px; height:24px; }
.rrow .bd{ flex:1; min-width:0; }
.rrow .bd b{ font-size:13px; font-weight:600; display:block; }
.rrow .bd span{ font-size:11.5px; color:var(--txt-3); }
.sup{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--txt-2); margin-left:auto; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.sup b{ font-weight:600; color:var(--txt); }

/* listini & promo: righe promozione con switch */
.prow{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); }
.prow:last-child{ border-bottom:none; }
.prow .bd{ flex:1; min-width:0; cursor:pointer; }
.prow .bd b{ display:block; font-size:13px; font-weight:600; }
.prow .bd span{ font-size:11.5px; color:var(--txt-3); }

/* punti vendita */
.srow{ display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); }
.srow:last-child{ border-bottom:none; }
.srow .bd{ flex:1; min-width:0; cursor:pointer; }
.srow .bd .nm{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.srow .bd .ad{ font-size:12px; color:var(--txt-3); margin-top:2px; }
.roadnote{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line-2); font-size:12px; color:var(--txt-3); }
.wrap-720{ max-width:720px; }

/* piano & moduli */
.tiernote{ font-size:12.5px; color:var(--txt-3); margin:10px 2px 18px; }
.trow{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.trow:last-child{ border-bottom:none; }
.trow .bd{ flex:1; min-width:0; }
.trow .bd .nm{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; flex-wrap:wrap; }
.trow .bd .ds{ font-size:11px; color:var(--txt-3); margin-top:1px; }
.pill.tp{ font-size:10.5px; padding:2px 8px; }
.pill.tp.i{ background:var(--info-soft); color:var(--info); }
.pill.tp.w{ background:var(--warn-bg); color:var(--warn); }

/* scheda cliente */
.chead{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.cav{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:750; font-size:17px; flex:0 0 auto; }
.chead h1{ font-size:19px; font-weight:650; margin:0; }
.chead .sub{ font-size:12px; color:var(--txt-3); margin-top:2px; }
.cstat{ display:flex; gap:26px; flex-wrap:wrap; }
.cstat .k{ font-size:11px; color:var(--txt-3); }
.cstat .v{ font-size:16px; font-weight:650; margin-top:1px; }
.arow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.arow .c{ background:var(--bg-2); padding:11px 15px; }
.arow .c .k{ font-size:11px; color:var(--txt-3); }
.arow .c .v{ font-size:14.5px; font-weight:650; margin-top:2px; }
.dose{ display:flex; align-items:center; gap:20px; padding:13px 16px; flex-wrap:wrap; }
.dose .dn b{ font-size:13px; display:block; }
.dose .dn span{ font-size:11.5px; color:var(--txt-3); }
.dose .dv{ text-align:right; }
.dose .dv .v{ font-size:15px; font-weight:650; }
.dose .dv .k{ font-size:10.5px; color:var(--txt-3); }
.tlr{ display:flex; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); align-items:center; }
.tlr:last-child{ border-bottom:none; }
.tlr .tic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--bg-3); color:var(--txt-2); flex:0 0 auto; }
.tlr .tic [data-icon] svg{ width:15px; height:15px; }
.tlr .tic.warn{ background:var(--warn-bg); color:var(--warn); }
.tlr .tic.pos{ background:var(--pos-bg); color:var(--pos); }
.tlr .tic.info{ background:var(--info-soft); color:var(--info); }
.tlr .tb b{ font-size:13px; }
.tlr .tb div{ font-size:11.5px; color:var(--txt-3); }
.tlr .when{ margin-left:auto; font-size:11.5px; color:var(--txt-3); white-space:nowrap; }
.gauge{ padding:13px 16px; border-bottom:1px solid var(--line); }
.gauge:last-of-type{ border-bottom:none; }
.gauge .gt{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; font-size:13px; gap:10px; }
.gauge .gt b{ font-weight:600; }
.gauge .gt span{ font-size:12px; color:var(--warn); font-weight:600; white-space:nowrap; }
.gauge .gt span.calm{ color:var(--txt-3); }
.track{ height:6px; background:var(--bg-3); border-radius:99px; overflow:hidden; }
.track .f{ height:100%; border-radius:99px; background:var(--warn); }
.track .f.calm{ background:var(--line-2); }
.gauge .sub{ font-size:11px; color:var(--txt-3); margin-top:6px; }

/* portale cliente: frame telefono */
.phone{ width:380px; max-width:100%; margin:0 auto; background:var(--bg-2); border:9px solid #25282e; border-radius:36px; overflow:hidden; }
.ph-head{ display:flex; align-items:flex-end; justify-content:space-between; padding:20px 18px 16px; border-bottom:1px solid var(--line); }
.ph-head .sn{ font-size:11.5px; color:var(--txt-3); }
.ph-head .hi{ font-size:18px; font-weight:700; letter-spacing:-.01em; margin-top:2px; }
.ph-head .pts{ text-align:right; }
.ph-head .pts span{ display:block; font-size:11.5px; color:var(--txt-3); }
.ph-head .pts b{ font-size:30px; font-weight:750; letter-spacing:-.02em; color:var(--accent); line-height:1.05; }
.ph-sec{ padding:16px 18px; border-bottom:1px solid var(--line); }
.ph-sec:last-child{ border-bottom:none; }
.sec-l{ font-size:11.5px; color:var(--txt-3); font-weight:600; margin-bottom:9px; }
.pet{ display:flex; align-items:baseline; gap:8px; }
.pet b{ font-size:15px; font-weight:700; }
.pet span{ font-size:12px; color:var(--txt-3); }
.due{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:12.5px; }
.due + .due{ margin-top:7px; }
.buy{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.buy:last-child{ border-bottom:none; }
.buy .d{ color:var(--txt-3); font-size:11.5px; width:52px; flex:0 0 auto; }
.buy .a{ margin-left:auto; font-weight:600; }
.ph-cta{ padding:14px 18px 18px; }
.ph-cta .btn{ width:100%; justify-content:center; min-height:42px; }

/* agenda: vista giorno a griglia oraria + pannello dettaglio */
.ag{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
@media (max-width:1100px){ .ag{ grid-template-columns:1fr; } }
.sc-head{ display:grid; border-bottom:1px solid var(--line); }
.sc-head div{ padding:11px 12px; font-weight:600; font-size:13px; border-left:1px solid var(--line); }
.sc-head div:first-child{ border-left:none; }
.sc-body{ display:grid; height:564px; }
.sc-times{ position:relative; }
.sc-times span{ position:absolute; right:8px; font-size:10.5px; color:var(--txt-3); }
.sc-col{ position:relative; border-left:1px solid var(--line);
  background:repeating-linear-gradient(to bottom, transparent 0, transparent 59px, var(--line) 59px, var(--line) 60px); }
.ev{ position:absolute; left:6px; right:6px; border-left:3px solid var(--line-2); background:var(--accent-soft);
  border-radius:6px; padding:5px 9px; font-size:11px; color:var(--txt-2); overflow:hidden; cursor:pointer; border-top:none; border-right:none; border-bottom:none; text-align:left; width:auto; }
.ev b{ display:block; font-size:12px; color:var(--txt); font-weight:600; line-height:1.25; }
.ev.sel{ border-left-color:var(--accent); background:var(--bg-2); outline:1px solid var(--line); }
.ev.done{ border-left-color:var(--pos); }
.ev.done b{ color:var(--txt-2); }
.det-h{ padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.det-h b{ font-size:15px; display:block; }
.det-h span{ font-size:12px; color:var(--txt-3); }
.drow{ display:flex; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.drow .k{ color:var(--txt-3); flex:0 0 auto; }
.drow .v{ text-align:right; }
.cut{ padding:12px 16px; border-bottom:1px solid var(--line); }
.cut .t{ font-size:12.5px; font-weight:600; margin-bottom:7px; }
.cut p{ font-size:12.5px; color:var(--txt-2); line-height:1.45; margin:0 0 4px; }
.cut p:last-child{ margin-bottom:0; }
.det-act{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.det-act .row{ display:flex; gap:8px; }
.det-act .row .btn{ flex:1; justify-content:center; }
.det-act .btn.primary{ width:100%; justify-content:center; }

/* impostazioni: form a card */
.form-card{ max-width:560px; }
.form-card .body{ padding:18px 20px 20px; }
.form-card .field{ margin-bottom:15px; }
.form-card .hint{ font-size:11.5px; color:var(--txt-3); margin-top:5px; }
.danger-zone{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.danger-zone .bd{ flex:1; }
.danger-zone .bd b{ display:block; font-size:13px; font-weight:600; }
.danger-zone .bd span{ font-size:11.5px; color:var(--txt-3); }