/* ============================================================
   MARIN · components.css
   Card, campi, righe preventivo, liste, modali, firma, toast
   ============================================================ */

/* ---------- Card ---------- */
.card{background:var(--card);box-shadow:var(--out);border-radius:var(--r);padding:20px;margin-bottom:18px}
.pane.on .card{animation:cardIn .45s var(--ease-out) backwards}
.pane.on .card:nth-child(2){animation-delay:.04s}
.pane.on .card:nth-child(3){animation-delay:.08s}
.pane.on .card:nth-child(4){animation-delay:.12s}
.pane.on .card:nth-child(5){animation-delay:.16s}
.pane.on .card:nth-child(6){animation-delay:.2s}
.card-t{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.card-t .ct-ic{width:26px;height:26px;border-radius:9px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;box-shadow:2px 2px 6px color-mix(in srgb,var(--a1) 35%,var(--dark))}
.card-t .ct-ic svg{width:13px;height:13px;color:#fff}
.card-t .sp{flex:1}
.hint{font-size:12.5px;color:var(--mut);line-height:1.65;margin-bottom:14px}
.tag-priv{font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:4px 9px;border-radius:99px;background:var(--card);box-shadow:var(--in-sm);color:var(--mut2)}

/* ---------- Campi ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.field label{display:block;font-size:10.5px;font-weight:800;color:var(--mut);margin:0 4px 6px;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}
.field:focus-within label{color:var(--a1)}
.field input,.field select,.field textarea{width:100%;background:var(--card);box-shadow:var(--in-sm);border:none;border-radius:12px;padding:11px 14px;transition:box-shadow .22s var(--ease-out),background .22s}
.field textarea{resize:vertical;min-height:70px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--in-sm),0 0 0 2.5px color-mix(in srgb,var(--a1) 40%,transparent);outline:none;background:color-mix(in srgb,var(--card) 88%,#fff)}
/* Su iPad il campo di data nativo si allinea come gli altri */
.field input[type=date]{min-height:42px;-webkit-appearance:none;appearance:none;text-align:left}
.field input[type=date]::-webkit-date-and-time-value{text-align:left}
.field select{appearance:none;background-image: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='%2368758C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.inline-fields{display:flex;gap:12px}
.inline-fields .field{flex:1}
.pill-select{width:190px;background:var(--card);box-shadow:var(--in-sm);border:none;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:700}
input[type=range]{-webkit-appearance:none;width:100%;height:12px;border-radius:99px;background:var(--card);box-shadow:var(--in-sm);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:3px 3px 8px var(--dark),-2px -2px 6px #fff,inset 0 0 0 6px var(--card),inset 0 0 0 10px var(--a1);cursor:grab}
input[type=color]{border:none;background:var(--card);box-shadow:var(--in-sm);border-radius:12px;height:42px;width:100%;padding:6px;cursor:pointer}

/* ---------- Capitoli e righe del preventivo ---------- */
.sec-block{background:var(--card);box-shadow:var(--out);border-radius:var(--r);margin-bottom:18px;overflow:visible;animation:cardIn .4s var(--ease-out) backwards}
.sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.sec-num{width:32px;height:32px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:3px 3px 8px color-mix(in srgb,var(--a1) 35%,var(--dark))}
.sec-head input{flex:1;border:none;background:var(--card);box-shadow:var(--in-sm);font-weight:800;font-size:14px;padding:9px 13px;border-radius:11px;min-width:0}
.rows{padding:2px 12px 6px}
/* Riga di lavorazione: descrizione + campi etichettati.
   Su editor largo tutto in linea; quando l'editor si stringe (iPad)
   la descrizione prende tutta la larghezza e i campi scendono sotto,
   ordinati: niente più lettere in colonna né bottoni fuori dalla card. */
.rowline{display:grid;gap:7px;align-items:end;padding:8px 4px;border-radius:12px;transition:background .15s;animation:rowIn .3s var(--ease-out);
  grid-template-columns:minmax(0,1fr) 66px 62px 88px 56px auto;
  grid-template-areas:"desc um qty price disc btns"}
.rowline .r-desc{grid-area:desc}
.rowline .rf{display:flex;flex-direction:column;gap:3px;min-width:0}
.rowline .rf>span{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);padding-left:3px;white-space:nowrap}
.rowline .rf-um{grid-area:um}.rowline .rf-qty{grid-area:qty}.rowline .rf-price{grid-area:price}.rowline .rf-disc{grid-area:disc}
.rowline .row-btns{grid-area:btns}
@container editor (max-width:560px){
  .rowline{grid-template-columns:76px 70px minmax(0,1fr) 64px auto;
    grid-template-areas:"desc desc desc desc desc" "um qty price disc btns"}
}
.rowline:hover{background:rgba(255,255,255,.4)}
.rowline textarea{width:100%;border:none;background:var(--card);box-shadow:var(--in-sm);border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.45;resize:none;overflow:hidden;min-height:34px}
.rowline .mini{width:100%;border:none;background:var(--card);box-shadow:var(--in-sm);border-radius:10px;padding:8px 7px;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.rowline select.mini{padding:8px 3px;font-size:11.5px;appearance:none;text-align:center;text-align-last:center}
.rowline textarea:focus,.rowline .mini:focus{outline:none;box-shadow:var(--in-sm),0 0 0 2px color-mix(in srgb,var(--a1) 35%,transparent)}
.rowline .row-btns{display:flex;gap:4px;margin-top:2px}
.rowline .row-btns .nicon{width:30px;height:30px}
@media (pointer:coarse){
  .rowline .row-btns .nicon{width:42px;height:42px}
  .rowline .mini,.rowline textarea{font-size:16px}
}
.sec-foot{display:flex;align-items:center;gap:10px;padding:10px 16px 16px;flex-wrap:wrap}
.sec-subtot{margin-left:auto;font-size:11px;color:var(--mut);font-weight:700;background:var(--card);box-shadow:var(--in-sm);border-radius:99px;padding:8px 14px}
.sec-subtot b{color:var(--txt);font-variant-numeric:tabular-nums;font-size:13px;margin-left:6px}
.add-line{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--a1);padding:8px 14px;border-radius:99px;background:var(--card);box-shadow:var(--out-xs);transition:.16s}
.add-line:hover{transform:translateY(-1px)}
.add-line:active{box-shadow:var(--in-sm)}
.add-line svg{width:13px;height:13px}
.add-sec{width:100%;border-radius:var(--r);padding:16px;color:var(--mut);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px;transition:.18s;background:var(--card);box-shadow:var(--in);margin-bottom:18px}
.add-sec:hover{color:var(--a1)}
.add-sec svg{width:16px;height:16px}

/* ---------- Riepilogo economico ---------- */
.tot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tot-final{margin-top:16px;background:var(--grad);border-radius:16px;padding:16px 20px;display:flex;align-items:baseline;justify-content:space-between;color:#fff;box-shadow:6px 6px 16px color-mix(in srgb,var(--a1) 40%,var(--dark)),-4px -4px 12px var(--lite)}
.tot-final .lab{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.tot-final .val{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vat-note{font-size:11px;color:var(--mut);margin-top:10px;line-height:1.5;padding:0 4px}
.deposit-line{font-size:11.5px;font-weight:700;color:var(--mut);text-align:right;margin-top:9px;padding:0 4px;font-variant-numeric:tabular-nums}
.deposit-line:empty{display:none}

/* ---------- Firma: stato nella card ---------- */
.sig-done{display:flex;align-items:center;gap:14px;background:var(--card);box-shadow:var(--in-sm);border-radius:14px;padding:12px 16px;animation:glowOk 1.2s ease-out}
.sig-done+.sig-done,.sig-done+.add-line,#sig-status .sig-co{margin-top:10px}
.sig-co{animation:none}
.sig-done img{height:52px;max-width:190px;object-fit:contain;filter:contrast(1.05)}
.sig-done .sd-m{flex:1;min-width:0}
.sig-done .sd-n{font-weight:800;font-size:13px}
.sig-done .sd-d{font-size:11px;color:var(--mut);margin-top:1px}
.sig-done .sd-ok{color:var(--ok);display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800}
.sig-done .sd-ok svg{width:14px;height:14px}

/* ---------- Catalogo ---------- */
.cat-toolbar{display:flex;gap:10px;margin-bottom:16px}
.search-pill{flex:1;display:flex;align-items:center;gap:10px;background:var(--card);box-shadow:var(--in-sm);border-radius:99px;padding:0 16px}
.search-pill svg{width:15px;height:15px;color:var(--mut2);flex-shrink:0}
.search-pill input{flex:1;border:none;background:transparent;padding:11px 0;font-size:13px}
.search-pill input:focus{outline:none}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:11px;font-weight:800;padding:7px 14px;border-radius:99px;background:var(--card);box-shadow:var(--out-xs);color:var(--mut);transition:.16s}
.chip:hover{color:var(--txt);transform:translateY(-1px)}
.chip.on{background:var(--grad);color:#fff;box-shadow:3px 3px 8px color-mix(in srgb,var(--a1) 35%,var(--dark))}
.cat-item{background:var(--card);box-shadow:var(--out-sm);border-radius:16px;padding:14px 16px;margin-bottom:12px;display:flex;gap:12px;align-items:center;transition:.18s;animation:rowIn .3s var(--ease-out) backwards}
.cat-item:hover{transform:translateY(-2px)}
.cat-item .ci-main{flex:1;min-width:0}
.cat-item .ci-cat{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--a1);margin-bottom:3px}
.cat-item .ci-name{font-weight:800;font-size:13px}
.cat-item .ci-desc{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-item .ci-pr{text-align:right;flex-shrink:0}
.cat-item .ci-price{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.cat-item .ci-um{font-size:10px;color:var(--mut2);font-weight:700}

/* ---------- Clienti ---------- */
.cli-card{background:var(--card);box-shadow:var(--out-sm);border-radius:18px;margin-bottom:14px;overflow:hidden;transition:.18s;animation:rowIn .3s var(--ease-out) backwards}
.cli-head{display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer}
.cli-av{width:44px;height:44px;border-radius:15px;background:var(--grad);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:3px 3px 9px color-mix(in srgb,var(--a1) 35%,var(--dark));letter-spacing:.03em}
.cli-m{flex:1;min-width:0}
.cli-n{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-d{font-size:11.5px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-stats{text-align:right;flex-shrink:0}
.cli-tot{font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums}
.cli-cnt{font-size:10.5px;color:var(--mut2);font-weight:700}
.cli-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
.cli-card.open .cli-body{max-height:900px}
.cli-body-in{padding:4px 16px 14px;border-top:1px solid rgba(255,255,255,.6)}
.cli-actions{display:flex;gap:8px;padding:10px 0 4px;flex-wrap:wrap}
.cli-q{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--card);box-shadow:var(--in-sm);margin-top:8px}
.cli-q .q-n{font-weight:800;font-size:12px}
.cli-q .q-s{font-size:11px;color:var(--mut);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-q .q-v{font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cli-q .nicon{width:30px;height:30px}

/* ---------- Archivio ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.stat-box{background:var(--card);box-shadow:var(--out-sm);border-radius:16px;padding:14px 16px}
.stat-box .sb-l{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.stat-box .sb-v{font-size:19px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-box.ok .sb-v{color:var(--ok)}
.saved-it{background:var(--card);box-shadow:var(--out-sm);border-radius:16px;padding:13px 15px;margin-bottom:12px;display:flex;align-items:center;gap:12px;transition:.18s;animation:rowIn .3s var(--ease-out) backwards;flex-wrap:wrap}
.saved-it:hover{transform:translateY(-2px)}
.saved-it .si-ic{width:40px;height:40px;border-radius:13px;background:var(--card);box-shadow:var(--in-sm);color:var(--a1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.saved-it .si-ic svg{width:17px;height:17px}
.saved-it .si-m{flex:1;min-width:180px}
.saved-it .si-n{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-it .si-d{font-size:11px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-it .si-v{font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-badge{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px;box-shadow:var(--in-sm);cursor:pointer;white-space:nowrap}
.st-badge.st-bozza{color:var(--mut)}
.st-badge.st-inviato{color:var(--a1)}
.st-badge.st-accettato{color:var(--ok)}
.st-badge.st-pagato{color:#0D9488;background:rgba(13,148,136,.09)}
.st-badge.st-rifiutato{color:var(--danger)}

.empty{text-align:center;padding:44px 20px;color:var(--mut)}
.empty .e-ic{width:64px;height:64px;border-radius:20px;background:var(--card);box-shadow:var(--in);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.empty svg{width:26px;height:26px;color:var(--mut2)}
.empty p{font-size:13px;line-height:1.6}

/* ---------- Design panel ---------- */
.swatches{display:flex;gap:11px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:13px;cursor:pointer;position:relative;transition:.16s;box-shadow:3px 3px 8px var(--dark),-3px -3px 8px var(--lite)}
.swatch:hover{transform:translateY(-2px) scale(1.06)}
.swatch.on::after{content:'';position:absolute;inset:-5px;border-radius:17px;border:2.5px solid var(--txt)}
.seg{display:flex;background:var(--card);box-shadow:var(--in-sm);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 6px;border-radius:10px;font-size:12px;font-weight:800;color:var(--mut);transition:.16s}
.seg button.on{background:var(--grad);color:#fff;box-shadow:2px 2px 7px color-mix(in srgb,var(--a1) 35%,var(--dark))}
.toggline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px}
.toggline+.toggline{border-top:1px solid rgba(255,255,255,.65)}
.toggline .tl-t{font-size:13px;font-weight:700}
.toggline .tl-s{font-size:11px;color:var(--mut);margin-top:1px}
.sw{position:relative;width:46px;height:26px;flex-shrink:0}
.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.sw .tr{position:absolute;inset:0;background:var(--card);box-shadow:var(--in-sm);border-radius:99px;transition:.22s}
.sw .th{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.22s cubic-bezier(.3,1.4,.6,1);box-shadow:2px 2px 5px rgba(60,70,100,.35)}
.sw input:checked ~ .tr{background:var(--grad)}
.sw input:checked ~ .th{left:23px}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:calc(26px + var(--sab));left:50%;transform:translate(-50%,90px);background:var(--card);color:var(--txt);padding:13px 20px;border-radius:99px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:var(--out),0 20px 50px -12px rgba(43,53,72,.4);transition:.32s var(--ease-pop);z-index:99;opacity:0;pointer-events:none}
#toast.show{transform:translate(-50%,0);opacity:1}
#toast svg{width:16px;height:16px;color:var(--ok)}

/* ---------- Modali ---------- */
.modal{position:fixed;inset:0;background:rgba(120,132,155,.35);backdrop-filter:blur(5px);z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex}
.mbox{background:var(--bg);border-radius:26px;width:560px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 40px 100px -20px rgba(43,53,72,.55);overflow:hidden;animation:pop .28s cubic-bezier(.2,.9,.3,1.18)}
.mbox-h{padding:20px 22px 12px;display:flex;align-items:center;gap:12px}
.mbox-h h3{font-size:16px;font-weight:800;flex:1}
.mbox-b{flex:1;overflow-y:auto;padding:8px 22px 20px;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.mbox-f{padding:14px 22px calc(20px + var(--sab));display:flex;gap:10px;justify-content:flex-end}
.pk-it{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;cursor:pointer;transition:.14s;background:var(--card);box-shadow:var(--out-xs);margin-bottom:9px}
.pk-it:hover{transform:translateY(-1px);box-shadow:var(--out-sm)}
.pk-it:active{box-shadow:var(--in-sm)}
.pk-it .n{font-weight:800;font-size:13px}
.pk-it .d{font-size:11px;color:var(--mut);margin-top:1px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pk-it .pr{margin-left:auto;font-weight:800;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0}
.pk-it .um{font-size:10px;color:var(--mut2);text-align:right;font-weight:700}
.pk-cat{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:12px 6px 7px}

/* ---------- Modale firma (iPad first) ---------- */
.mbox-sig{width:780px}
.sig-meta{margin-bottom:12px}
.sig-frame{position:relative;background:#fff;border-radius:18px;box-shadow:var(--in),0 0 0 1px rgba(120,132,155,.12);overflow:hidden;height:min(320px,38vh);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#sig-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sig-baseline{position:absolute;left:36px;right:36px;bottom:52px;border-bottom:1.5px dashed #C9D1E0;color:#B4BECF;font-size:11.5px;font-weight:700;padding-bottom:8px;display:flex;gap:10px;pointer-events:none;letter-spacing:.04em}
.sig-baseline span{font-size:15px;color:#9AA6BA}
.sig-frame.has-ink .sig-baseline{opacity:.35}
.sig-foot{align-items:center}

/* ---------- Lock e busy ---------- */
#lock{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:26px;padding:24px}
#lock.show{display:flex}
#lock .lk-logo{width:92px;height:92px;border-radius:28px;background:var(--card);box-shadow:var(--out);display:flex;align-items:center;justify-content:center;animation:float 4s ease-in-out infinite}
#lock .lk-logo svg{width:52px;height:52px}
#lock h1{font-size:20px;font-weight:900;letter-spacing:.14em}
#lock p{font-size:12.5px;color:var(--mut);text-align:center;max-width:300px;line-height:1.6;margin-top:-14px}
#lock input{background:var(--card);box-shadow:var(--in);border:none;border-radius:16px;padding:15px 20px;font-size:22px;font-weight:800;letter-spacing:.5em;text-align:center;width:240px}
#lock input:focus{outline:none;box-shadow:var(--in),0 0 0 3px color-mix(in srgb,var(--a1) 30%,transparent)}
#lock .lk-err{color:var(--danger);font-size:12px;font-weight:700;height:16px}
#busy{position:fixed;inset:0;background:rgba(232,236,244,.75);backdrop-filter:blur(4px);z-index:150;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px}
#busy.show{display:flex}
.spinner{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--a1),var(--a2),transparent 70%);animation:spin 1s linear infinite;-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 64%);mask:radial-gradient(closest-side,transparent 62%,#000 64%)}
#busy span{font-size:13px;font-weight:800;color:var(--mut)}


/* ---------- Backup automatici ---------- */
.abk-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;background:var(--card);box-shadow:var(--in-sm);margin-top:9px;animation:rowIn .3s var(--ease-out) backwards}
.abk-dot{width:9px;height:9px;border-radius:50%;background:var(--mut2);flex-shrink:0}
.abk-dot.latest{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.abk-m{flex:1;min-width:0}
.abk-t{font-size:12.5px;font-weight:800}
.abk-latest{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin-left:6px}
.abk-d{font-size:11px;color:var(--mut);margin-top:1px}
.abk-row .nbtn{padding:8px 14px;font-size:12px}
.abk-row .nicon{width:34px;height:34px}

/* ---------- Esportazione ERP ---------- */
.ex-selbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.ex-count{font-size:12px;color:var(--mut);font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums}
.ex-count b{color:var(--txt)}
.ex-sep{display:inline-block;width:1px;height:20px;background:rgba(120,132,155,.25);margin:0 4px;align-self:center}
.ex-list{max-height:420px;overflow-y:auto;border-radius:14px;padding:2px;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.ex-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);box-shadow:var(--in-sm);margin-bottom:8px;cursor:pointer;transition:.15s;content-visibility:auto;contain-intrinsic-size:auto 46px}
.ex-row input{display:none}
.ex-row .ex-chk{width:22px;height:22px;border-radius:8px;background:var(--card);box-shadow:var(--in-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.ex-row .ex-chk svg{width:12px;height:12px;color:#fff;opacity:0;transition:.15s}
.ex-row.sel{box-shadow:var(--in-sm),0 0 0 2px color-mix(in srgb,var(--a1) 40%,transparent)}
.ex-row.sel .ex-chk{background:var(--grad)}
.ex-row.sel .ex-chk svg{opacity:1}
.ex-row .ex-num{font-weight:800;font-size:12px;white-space:nowrap}
.ex-row .ex-cli{flex:1;min-width:0;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-row .ex-cli i{font-style:normal;color:var(--mut2)}
.ex-row .ex-val{font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ex-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Liste lunghe (archivio, clienti): il browser salta il rendering
   delle schede fuori schermo — scorrimento fluido anche a migliaia. */
.saved-it{content-visibility:auto;contain-intrinsic-size:auto 68px}
.cli-card{content-visibility:auto;contain-intrinsic-size:auto 76px}

/* ---------- Segmento stato nel form ---------- */
.st-seg{display:flex;gap:6px;flex-wrap:wrap}
.st-seg .st-opt{font-size:11px;font-weight:800;padding:9px 14px;border-radius:99px;background:var(--card);box-shadow:var(--out-xs);color:var(--mut);transition:.18s;letter-spacing:.03em}
.st-seg .st-opt:hover{transform:translateY(-1px);color:var(--txt)}
.st-seg .st-opt:active{transform:scale(.95)}
.st-seg .st-opt.on{color:#fff;box-shadow:var(--in-sm)}
.st-seg .st-opt.on.st-bozza{background:#8E9AAE}
.st-seg .st-opt.on.st-inviato{background:linear-gradient(135deg,var(--a1),var(--a2))}
.st-seg .st-opt.on.st-accettato{background:var(--ok)}
.st-seg .st-opt.on.st-pagato{background:#0D9488}
.st-seg .st-opt.on.st-rifiutato{background:var(--danger)}