@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ══ TOKENS ══ */
:root{
  --ink:#1a1a2e;--paper:#f5f0e8;--cream:#ede8dc;--white:#fff;
  --accent:#c8452a;--accd:#a83620;--a2:#2a6b8c;--a2d:#1e5470;
  --gold:#b8962e;--green:#257a4a;--muted:#7a7068;--border:#d4cdc0;
  --shadow:rgba(26,26,46,.1);
  --hh:54px;--th:50px;--ab:58px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  height:100%;
  height:-webkit-fill-available;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);
  height:100%;
  height:-webkit-fill-available;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}

/* ══ HEADER ══ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--hh);background:var(--ink);border-bottom:3px solid var(--accent);
  display:flex;align-items:center;padding:0 16px;gap:10px;
}
.h-logo{font-family:'DM Serif Display',serif;font-size:1.28rem;color:var(--paper);line-height:1}
.h-logo span{color:var(--accent)}
.h-sub{font-size:.57rem;color:#6a8a9a;letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
.h-r{margin-left:auto;display:flex;align-items:center;gap:7px}
.bdg{background:var(--accent);color:#fff;font-size:.58rem;padding:2px 8px;
  border-radius:20px;letter-spacing:.8px;font-weight:700;text-transform:uppercase}
.bdg.v6{background:var(--gold)}
.si{font-size:.62rem;color:#6ab88a;opacity:0;transition:opacity .35s;
  display:flex;align-items:center;gap:3px;white-space:nowrap}
.si.on{opacity:1}

/* ══ TAB BAR ══ */
.tbr{
  position:fixed;top:var(--hh);left:0;right:0;z-index:199;
  height:var(--th);background:#fff;border-bottom:1.5px solid var(--border);
  display:flex;
}
.tbtn{
  flex:1;border:none;background:none;
  font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:color .2s;position:relative;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;
}
.tbtn::after{content:'';position:absolute;bottom:0;left:8px;right:8px;
  height:3px;background:var(--accent);border-radius:3px 3px 0 0;
  transform:scaleX(0);transition:transform .2s}
.tbtn.on{color:var(--accent)}.tbtn.on::after{transform:scaleX(1)}
@media(min-width:900px){.tbr{display:none}}

/* ══ WRAP ══ */
.wrap{
  /* Mobile: fill exactly the space below header+tabbar */
  position:fixed;
  top:calc(var(--hh) + var(--th));
  left:0;right:0;
  bottom:0;
}
@media(min-width:900px){
  /* Desktop: back to normal flow */
  .wrap{
    position:static;
    margin-top:var(--hh);
    height:calc(100dvh - var(--hh));
    display:grid;
    grid-template-columns:430px 1fr;
  }
}
@media(min-width:1200px){.wrap{grid-template-columns:460px 1fr}}

/* ══ PANELS ══ */
.panel{display:none;flex-direction:column}
.panel.on{display:flex}

/* Mobile: both panels fill the fixed wrap container exactly */
@media(max-width:899px){
  .panel.on{
    position:absolute;
    inset:0;
  }
  /* Form panel: fscr scrolls, actbar stays pinned at bottom */
  .pnl-form.on{
    /* actbar is fixed globally; just need padding so content clears it */
    overflow:hidden; /* fscr handles scroll */
  }
  /* Preview panel scrolls as a whole */
  .pnl-prev.on{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    align-items:center;
    padding:14px 12px;
    padding-bottom:calc(60px + env(safe-area-inset-bottom,0px) + 16px);
    gap:14px;
    background:#e2ddd4;
  }
}

/* Mobile: form panel needs bottom padding for fixed action bar */
.pnl-form{
  background:#fff;
}
/* Mobile: preview panel scrollable */
.pnl-prev{
  background:#e2ddd4;align-items:center;
  padding:14px 12px 24px;gap:14px;
}
@media(min-width:900px){
  .panel{display:flex!important}
  .panel.on{position:static;} /* undo mobile absolute */
  .pnl-form{
    border-right:1px solid var(--border);
    height:calc(100dvh - var(--hh));
    position:sticky;top:var(--hh);
    overflow:hidden;
    padding-bottom:0;
  }
  .pnl-prev{
    height:calc(100dvh - var(--hh));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:20px 20px 50px;
  }
}

/* ══ FORM SCROLL ══ */
.fscr{
  flex:1;
  min-height:0; /* critical: allows flex child to shrink below content height on iOS */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:14px 14px 0;
}
@media(min-width:900px){.fscr{padding:16px 16px 0}}

/* Small breathing room at bottom of form scroll */
.fscr-end{height:16px}
@media(min-width:900px){.fscr-end{height:16px}}

/* ══ ACCORDION ══ */
.acc{margin-bottom:9px;border:1.5px solid var(--border);border-radius:8px;overflow:hidden}
.ach{display:flex;align-items:center;gap:8px;padding:11px 13px;
  background:var(--paper);border:none;width:100%;text-align:left;
  cursor:pointer;user-select:none;transition:background .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ach:hover{background:var(--cream)}.ach.open{background:var(--cream);border-bottom:1px solid var(--border)}
.aic{color:var(--accent);flex-shrink:0}
.att{font-family:'DM Serif Display',serif;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);flex:1}
.achv{margin-left:auto;color:var(--muted);transition:transform .22s;flex-shrink:0}
.ach.open .achv{transform:rotate(180deg)}
.acb{display:none;padding:12px 13px;background:#fff}.acb.open{display:block}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:-2px}
.dot.ok{background:var(--green)}.dot.part{background:var(--gold)}.dot.no{background:var(--border)}

/* ══ FORM FIELDS ══ */
.fg{display:flex;flex-direction:column;gap:10px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* On very narrow screens, OIB+IBAN stack vertically — IBAN needs space */
@media(max-width:420px){.fr-oib-iban{grid-template-columns:1fr}.fld-iban{grid-column:1}}
.fld label{font-size:.62rem;font-weight:700;color:var(--muted);
  letter-spacing:.8px;text-transform:uppercase;display:block;margin-bottom:4px}

/* font-size:16px — prevents iOS Safari auto-zoom on focus (keyboard close bug) */
input,select,textarea{
  width:100%;padding:12px;
  border:1.5px solid var(--border);border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:16px;
  color:var(--ink);background:var(--paper);
  transition:border-color .15s,box-shadow .15s;outline:none;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--a2);background:#fff;
  box-shadow:0 0 0 3px rgba(42,107,140,.1)}
select{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='%237a7068' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}
textarea{resize:none;overflow:hidden;min-height:44px;line-height:1.45}
@media(min-width:900px){input,select,textarea{font-size:.87rem;padding:8px 10px}select{padding-right:28px}}

/* ══ STORAGE BAR ══ */
.stor{display:flex;align-items:center;gap:7px;font-size:.67rem;color:#257a4a;
  background:#e6f5ed;border:1px solid #a8d8b8;border-radius:6px;padding:7px 11px;margin-bottom:10px}

/* ══ PDV CARD ══ */
.pdv-card{background:var(--paper);border:1.5px solid var(--border);border-radius:8px;
  padding:13px 14px;display:flex;align-items:center;gap:12px;margin-bottom:10px;transition:all .25s}
.pdv-card.off{background:#fffbee;border-color:var(--gold)}
.pdv-i{flex:1}
.pdv-m{font-size:.88rem;font-weight:600;color:var(--ink)}
.pdv-card.off .pdv-m{color:var(--gold)}
.pdv-s{font-size:.71rem;color:var(--muted);margin-top:3px;line-height:1.4}
.pdv-l{font-size:.69rem;color:#9a7010;font-style:italic;margin-top:4px;line-height:1.4;display:none}
.pdv-card.off .pdv-l{display:block}
.tog{position:relative;width:50px;height:28px;flex-shrink:0}
.tog input{position:absolute;opacity:0;width:0;height:0}
.tog-sl{position:absolute;inset:0;background:#c8c0b4;border-radius:28px;cursor:pointer;transition:background .25s;touch-action:manipulation}
.tog-sl::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.tog input:checked+.tog-sl{background:var(--gold)}
.tog input:checked+.tog-sl::before{transform:translateX(22px)}

/* ══ KPD ══ */
.kw{position:relative}
.krs{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;
  border:1.5px solid var(--a2);border-radius:8px;max-height:210px;overflow-y:auto;
  z-index:600;box-shadow:0 8px 24px var(--shadow)}
.ki{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);
  display:flex;gap:9px;align-items:flex-start;transition:background .1s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.ki:last-child{border-bottom:none}.ki:hover,.ki:active{background:var(--paper)}
.kc{font-family:monospace;font-size:.75rem;font-weight:700;color:var(--a2);white-space:nowrap;min-width:68px}
.kn2{font-size:.8rem;color:var(--ink);line-height:1.35}
.ksel{display:flex;align-items:center;gap:6px;background:#e8f4fc;border:1px solid #8fcbe0;
  border-radius:5px;padding:6px 9px;font-size:.78rem;margin-top:5px}
.ksel .kcode{font-weight:700;color:var(--a2);font-family:monospace}
.kclr{margin-left:auto;background:none;border:none;color:#999;cursor:pointer;font-size:.9rem;padding:3px 5px;min-height:32px}
.kno{font-size:.67rem;color:#bbb;margin-top:3px}

/* ══ STAVKE ══ */
.sl{display:flex;flex-direction:column;gap:8px}
.sc{background:var(--paper);border:1.5px solid var(--border);border-radius:8px;padding:10px 11px;transition:border-color .18s}
.sc:focus-within{border-color:#aac0cc}
.sh{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.snum{background:var(--ink);color:#fff;width:21px;height:21px;border-radius:50%;
  font-size:.64rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stit{font-size:.78rem;font-weight:600;flex:1}
.sdel{background:none;border:none;color:#ccc;cursor:pointer;padding:5px 6px;
  min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sdel:hover,.sdel:active{color:var(--accent);background:#fff0ed}

/* stavka naziv textarea — auto-grows, always shows full content */
.st-name{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:16px;
  color:var(--ink);background:var(--paper);
  transition:border-color .15s,box-shadow .15s;outline:none;
  -webkit-appearance:none;
  resize:none;overflow:hidden;
  min-height:48px;line-height:1.45;
  /* show all typed content */
  word-break:break-word;
}
.st-name:focus{border-color:var(--a2);background:#fff;box-shadow:0 0 0 3px rgba(42,107,140,.1)}
@media(min-width:900px){.st-name{font-size:.87rem;padding:8px 10px}}

/* stavka number/price inputs — smaller on mobile */
.si2{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:16px;color:var(--ink);background:var(--paper);
  transition:border-color .15s;outline:none;-webkit-appearance:none;appearance:none;text-align:right}
.si2:focus{border-color:var(--a2);background:#fff;box-shadow:0 0 0 3px rgba(42,107,140,.1)}
@media(min-width:900px){.si2{font-size:.87rem;padding:8px 10px}}

/* Mobile stavka layout */
.sm-n{margin-bottom:7px}
.sm-r1{display:grid;grid-template-columns:72px 1fr 1fr;gap:6px;margin-bottom:6px}
.sm-r1.nopdv{grid-template-columns:72px 1fr}
/* Desktop stavka layout */
.sd{display:none}
@media(min-width:700px){
  .sm-n{margin-bottom:0}
  .sm-r1{display:none}
  .sd{display:grid;gap:7px}
  .sd.pdv-on{grid-template-columns:72px 90px 1fr 82px}
  .sd.pdv-off{grid-template-columns:72px 90px 1fr}
}

.stot{text-align:right;font-size:.71rem;color:var(--muted);
  margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
.stot strong{color:var(--ink)}

.add-s{display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:12px;background:none;border:2px dashed var(--border);
  border-radius:8px;color:var(--muted);font-size:.82rem;cursor:pointer;margin-top:7px;
  font-family:'DM Sans',sans-serif;transition:all .17s;min-height:44px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.add-s:hover,.add-s:active{border-color:var(--a2);color:var(--a2);background:#f0f7fc}

/* ══ TOTAL STRIP ══ */
.tstrip{background:var(--ink);color:#fff;border-radius:8px;padding:12px 14px;
  display:flex;flex-direction:column;gap:5px;margin-top:10px}
.trow{display:flex;justify-content:space-between;font-size:.8rem;color:#aaa}
.trow.main{font-size:1.05rem;font-weight:700;color:#fff;
  border-top:1px solid #3a3a52;padding-top:7px;margin-top:2px}
.trow.main span:last-child{color:var(--accent)}

/* ══ ACTION BAR ══ */
.actbar{
  background:#fff;border-top:1.5px solid var(--border);
  display:flex;gap:7px;
  padding:8px 12px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  flex-shrink:0; /* never compress — always visible */
}
/* Mobile: actbar sits as natural flex child at bottom of pnl-form (no fixed) */
@media(max-width:899px){
  .actbar{
    /* NOT position:fixed — flexbox pins it at bottom of the panel */
    position:static;
  }
}
@media(min-width:900px){.actbar{padding:10px 14px}}

.btn{flex:1;height:44px;border:none;border-radius:7px;
  font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .17s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  white-space:nowrap;}
.btn-new{background:#e8f4ee;color:var(--green);border:1.5px solid #b8dcc8}
.btn-new:hover,.btn-new:active{background:#d4edde}
.btn-pr{background:var(--a2);color:#fff}.btn-pr:hover,.btn-pr:active{background:var(--a2d)}
.btn-pdf{background:var(--accent);color:#fff;position:relative}
.btn-pdf:hover,.btn-pdf:active{background:var(--accd)}

/* PDF loading overlay on button */
.btn-pdf.loading{opacity:.7;pointer-events:none}
.btn-pdf.loading::after{content:'';position:absolute;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ PREVIEW CONTROLS ══ */
.prev-hd{display:flex;gap:8px;width:100%;max-width:720px;flex-shrink:0}
@media(max-width:899px){.prev-hd{display:none}}
.phb{padding:8px 16px;height:38px;border:none;border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .17s;white-space:nowrap}
.phb.pdf{background:var(--accent);color:#fff;position:relative}
.phb.pdf:hover{background:var(--accd)}
.phb.pdf.loading{opacity:.7;pointer-events:none}
.phb.pdf.loading::after{content:'';position:absolute;right:10px;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
.phb.prt{background:var(--ink);color:#fff}.phb.prt:hover{background:#333}

/* Dirty notice */
.pn{width:100%;max-width:720px;background:#fff8e1;border:1px solid #e0c848;
  border-radius:6px;padding:9px 14px;font-size:.75rem;color:#7a6010;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.pn button{background:var(--gold);color:#fff;border:none;padding:5px 12px;
  border-radius:5px;font-size:.75rem;font-weight:600;cursor:pointer;
  font-family:'DM Sans',sans-serif;touch-action:manipulation;white-space:nowrap}

/* ══ DOCUMENT CARD ══ */
.pcard{width:100%;max-width:720px;background:#fff;border-radius:4px;
  box-shadow:0 4px 28px var(--shadow);
  /* overflow:hidden would clip the barcode canvas on some mobile browsers — use clip-path instead */
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;flex-shrink:0}
/* Allow barcode canvas to overflow pcard bounds if needed */
.bc-wrap{overflow:visible}

.dh{background:var(--ink);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dh-co{flex:1;min-width:0}
.dh-nm{font-family:'DM Serif Display',serif;font-size:1.1rem}
.dh-dt{font-size:.67rem;color:#9ab;margin-top:3px;line-height:1.65}
.dh-r{text-align:right;flex-shrink:0}
.dh-ti{font-family:'DM Serif Display',serif;font-size:1.35rem;color:var(--accent);letter-spacing:.5px}
.dh-nu{font-size:.67rem;color:#aaa;margin-top:3px}

.db{padding:16px 20px}
.pty{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}
@media(max-width:500px){.pty{grid-template-columns:1fr}}
.pt{background:var(--paper);border-radius:5px;padding:9px 12px;border-left:3px solid var(--border)}
.pt.b{border-left-color:var(--a2)}
.pl{font-size:.58rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pn2{font-weight:700;font-size:.85rem}
.pd{font-size:.72rem;color:var(--muted);line-height:1.6;margin-top:2px}

.rok{display:flex;flex-wrap:wrap;gap:5px;justify-content:space-between;
  font-size:.72rem;color:var(--muted);margin-bottom:12px;padding:7px 11px;
  background:var(--paper);border-radius:5px;border-left:3px solid var(--gold)}
.rok strong{color:var(--gold)}

.pdv-disc{display:flex;align-items:flex-start;gap:8px;background:#fffbee;border:1px solid #e0c848;
  border-radius:5px;padding:8px 12px;font-size:.73rem;color:#7a6010;margin-bottom:12px}

.itbl{width:100%;border-collapse:collapse;margin-bottom:13px;font-size:.77rem}
.itbl th{background:var(--ink);color:#fff;padding:6px 8px;text-align:left;font-size:.63rem;letter-spacing:.7px;text-transform:uppercase}
.itbl th:last-child,.itbl td:last-child{text-align:right}
.itbl td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.itbl td:last-child{font-weight:700}
.itbl tr:nth-child(even) td{background:var(--paper)}
.ktag{display:inline-block;font-size:.59rem;font-family:monospace;background:#e8f4fc;
  color:var(--a2);padding:1px 4px;border-radius:3px;border:1px solid #b8ddf0;margin-top:2px}
.kn-small{font-size:.6rem;color:var(--muted);display:inline}

.dtots{display:flex;justify-content:flex-end;margin-bottom:13px}
.dti{width:220px;font-size:.77rem}
.dtr{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.dtr.bold{font-weight:700;font-size:.92rem;color:var(--ink);border-bottom:2px solid var(--ink);padding:4px 0}
.dtr.bold span:last-child{color:var(--accent)}

.doc-nap{font-size:.72rem;color:var(--muted);background:var(--paper);padding:8px 11px;
  border-radius:5px;border-left:3px solid var(--gold);margin-bottom:13px}
.doc-nap b{text-transform:uppercase;font-size:.61rem;letter-spacing:1px;font-weight:700;display:block;margin-bottom:2px}

/* ══ UPLATNICA HUB-3A ══ */
.upl{border-top:2px dashed var(--border);padding:13px 20px 18px;background:#fafaf8}
.upll{font-size:.58rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.upll::after{content:'';flex:1;height:1px;background:var(--border)}

/* HUB-3A form: single column for all data fields */
.h3{border:1.5px solid #222;border-radius:3px 3px 0 0;border-bottom:none}
.h3-top{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:480px){.h3-top{grid-template-columns:1fr}}
.h3l{padding:9px 11px;border-right:1.5px solid #222}
@media(max-width:480px){.h3l{border-right:none;border-bottom:1.5px solid #222}}
.h3r-data{padding:9px 11px}

/* Iznos row — spans full width, between fields and barcode */
.h3-iznos{
  border:1.5px solid #222;border-top:none;border-bottom:none;
  padding:8px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;
}
.h3-iznos-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.h3-iznos-val{
  font-size:1.3rem;font-weight:700;color:var(--accent);
  display:flex;align-items:baseline;gap:6px;
}
.h3-iznos-cur{font-size:.8rem;color:var(--muted);font-weight:500}

/* Barcode section — BELOW entire form, full width */
.h3-bc{
  border:1.5px solid #222;border-top:1.5px solid #222;
  border-radius:0 0 3px 3px;
  background:#fff;
  padding:12px 16px 14px;
}
.h3-bc-lbl{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);margin-bottom:8px;
  display:flex;align-items:center;gap:7px;
}
.h3-bc-lbl::after{content:'';flex:1;height:1px;background:var(--border)}

.hf{margin-bottom:5px}
.hfl{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.hfv{font-size:.78rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);
  padding-bottom:2px;margin-top:1px;min-height:15px;word-break:break-all}
.hfv.mn{font-family:monospace;letter-spacing:.4px;font-size:.72rem}
.hamt{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:.98rem;
  font-weight:700;color:var(--accent);margin-bottom:7px;border:1.5px solid #222;
  border-radius:3px;padding:4px 8px}
.hcur{font-size:.7rem;color:var(--muted);font-weight:400}

/* ── BARCODE: fixed zoom-independent, FULL WIDTH below form ──
   BC_CSS_W = 220px — width locked by JS, zoom-proof
   Internal scale=4 for razor-sharp scannability and print quality.
   The canvas parent (.bc-wrap) fills the available width,
   but canvas itself is locked to BC_CSS_W px via JS + CSS.
*/
.bc-wrap{
  /* Full width of the barcode section */
  display:flex;
  justify-content:center;
  background:#fff;
  padding:8px 0 4px;
}
#bc{
  display:block;
  /* CSS width locked to BC_CSS_W px by JS — zoom-independent */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  image-rendering:-moz-crisp-edges;
}
.bc-note{
  font-size:.63rem;color:var(--muted);margin-top:6px;line-height:1.5;
  text-align:center;
  background:#f8f8f6;border-radius:4px;padding:5px 10px;
  border:1px solid var(--border);
}
.bc-err{font-size:.66rem;color:var(--accent);background:#fff0ed;padding:5px 8px;
  border-radius:4px;border:1px solid #f0c0b8;margin-top:4px;display:none}

/* ══ MOBILE PREV PRINT BTN ══ */
.mob-pr{display:flex;gap:8px;width:100%;max-width:720px;flex-shrink:0}
@media(max-width:899px){
  .mob-pr{
    /* NOT fixed — sits as a sticky bottom flex child inside pnl-prev scroll */
    position:sticky;
    bottom:0;
    z-index:10;
    background:#fff;
    border-top:1.5px solid var(--border);
    padding:8px 12px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    margin-top:auto; /* pushes to bottom when content is short */
    /* Pull it out of pnl-prev padding area */
    margin-left:-12px;margin-right:-12px;
    width:calc(100% + 24px);
    max-width:none;
  }
}
@media(min-width:900px){.mob-pr{display:none}}

/* ══ PRINT ══ */
@media print{
  .hdr,.tbr,.pnl-form,.actbar,.prev-hd,.pn,.mob-pr{display:none!important}
  .wrap{position:static;display:block}
  .pnl-prev,.pnl-prev.on{
    display:block!important;position:static!important;
    padding:0;background:#fff;height:auto;overflow:visible;
  }
  .pcard{box-shadow:none;max-width:100%;border-radius:0}
}

/* ══ PDF TOAST ══ */
.toast{
  position:fixed;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;
  padding:10px 20px;border-radius:20px;
  opacity:0;transition:all .3s;pointer-events:none;z-index:999;white-space:nowrap;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:900px){.toast{bottom:20px}}