/* admin/css/print.css — Cetak (#/cetak): pratonton skrin, label 100×150 mm dan senarai pek A4. Awalan kelas: .prt-
   Label: semua ukuran dalam unit --u (1mm semasa cetak; 1cqw pada skrin = lebar bingkai ÷ 100) — pratonton ialah label yang sama, hanya diskalakan.
   @page dinamakan (prt-label / prt-pek) supaya TIDAK menjejaskan cetakan halaman lain. Kelas html.prt-on dipasang oleh print.js semasa paparan ini aktif. */

/* ---------- kerangka skrin ---------- */
.prt{display:flex;flex-direction:column}
.prt .btn{min-height:2.75rem}
.prt-top{margin-bottom:.85rem}
.prt-sub{margin-top:.2rem;min-height:1.4rem;font-size:.875rem;font-weight:600;color:var(--ink-soft)}
.prt-notes{display:flex;flex-direction:column;gap:.6rem}
.prt-notes:not(:empty){margin-bottom:.9rem}
.prt-notes__list{margin:.25rem 0 0;padding-left:1.15rem}
.prt-notes b+.prt-notes__list{margin-top:.15rem}
.prt-body{min-height:8rem}
.prt-empty{background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.prt-empty .btn{margin-top:.5rem}
.prt-empty__links{justify-content:center;margin-top:.5rem}
.prt-empty__links .btn{margin-top:0}

/* bar tindakan: mudah alih = terapung di bawah (di atas nav bawah); desktop = bawah tajuk */
.prt-bar{order:99;position:sticky;bottom:calc(var(--bottombar-h) + var(--safe-b) + .6rem);z-index:15;display:flex;gap:.5rem;margin-top:1rem;padding:.4rem;border:1px solid var(--plum-500);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-md)}
.prt-bar .btn{flex:1 1 0;min-width:0;padding-left:.6rem;padding-right:.6rem}
.prt-bar .btn--primary{flex:1.4 1 0}
.prt-bar .btn{white-space:nowrap}
.prt-bar #prt-mark{white-space:normal;line-height:1.15;padding-top:.4rem;padding-bottom:.4rem}
@media (max-width:480px){.prt-bar #prt-back .ico,.prt-bar #prt-mark .ico{display:none}.prt-bar #prt-back{flex:0 0 auto}.prt-bar #prt-mark{flex:1.25 1 0}}
@media (min-width:901px){
  .prt-bar{order:0;position:static;margin:0 0 1.1rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;justify-content:flex-start}
  .prt-bar .btn,.prt-bar .btn--primary{flex:0 0 auto;padding-left:1.1rem;padding-right:1.1rem}
  .prt-bar #prt-back{order:3;margin-left:auto}
  .prt-bar #prt-print{order:1}
  .prt-bar #prt-mark{order:2}
}

/* ---------- pratonton label ---------- */
.prt-sheet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(0,100mm));gap:1.6rem 1.5rem;justify-content:start}
.prt-item{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.prt-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .4rem;min-height:1.6rem}
.prt-cap__id{font-weight:700;color:var(--plum-900)}
.prt-frame{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:.3rem;box-shadow:var(--shadow-sm)}

/* ---------- label (unit --u: 1mm semasa cetak) ---------- */
.prt-lbl{--u:1mm;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;width:100%;height:calc(var(--u)*149.6);padding:calc(var(--u)*4);overflow:hidden;background:#fff;color:#000;font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;font-size:calc(var(--u)*4);line-height:1.2;overflow-wrap:anywhere}
@supports (width:1cqw){@media screen{.prt-frame{container-type:inline-size}.prt-lbl{--u:1cqw}}}
.prt-lbl__head{display:flex;align-items:baseline;gap:calc(var(--u)*2.4);padding-bottom:calc(var(--u)*1.6);border-bottom:calc(var(--u)*.6) solid #000}
.prt-lbl__brand{font-size:calc(var(--u)*4.6);font-weight:800;letter-spacing:.16em}
.prt-lbl__prod{font-size:calc(var(--u)*3.2)}
.prt-lbl__sg{margin-left:auto;padding:calc(var(--u)*.5) calc(var(--u)*1.8);border:calc(var(--u)*.6) solid #000;font-size:calc(var(--u)*3.8);font-weight:800;letter-spacing:.06em}
.prt-lbl__to{min-height:0;overflow:hidden;padding-top:calc(var(--u)*2.4)}
.prt-lbl__k{margin-bottom:calc(var(--u)*1);font-size:calc(var(--u)*3);font-weight:800;letter-spacing:.12em}
.prt-lbl__name{margin-bottom:calc(var(--u)*1);font-size:calc(var(--u)*6.6);font-weight:800;line-height:1.12}
.prt-lbl__tel{margin-bottom:calc(var(--u)*1.8);font-size:calc(var(--u)*5.6);font-weight:700}
.prt-lbl__addr{font-size:calc(var(--u)*4.9);line-height:1.26}
.prt-lbl[data-fit="1"] .prt-lbl__name{font-size:calc(var(--u)*5.8)}
.prt-lbl[data-fit="1"] .prt-lbl__tel{font-size:calc(var(--u)*5)}
.prt-lbl[data-fit="1"] .prt-lbl__addr{font-size:calc(var(--u)*4.3)}
.prt-lbl[data-fit="2"] .prt-lbl__name{font-size:calc(var(--u)*5.2)}
.prt-lbl[data-fit="2"] .prt-lbl__tel{font-size:calc(var(--u)*4.5)}
.prt-lbl[data-fit="2"] .prt-lbl__addr{font-size:calc(var(--u)*3.8);line-height:1.22}
.prt-lbl[data-fit="3"] .prt-lbl__name,.prt-lbl[data-fit="4"] .prt-lbl__name{font-size:calc(var(--u)*4.6)}
.prt-lbl[data-fit="3"] .prt-lbl__tel,.prt-lbl[data-fit="4"] .prt-lbl__tel{font-size:calc(var(--u)*4)}
.prt-lbl[data-fit="3"] .prt-lbl__addr,.prt-lbl[data-fit="4"] .prt-lbl__addr{font-size:calc(var(--u)*3.3);line-height:1.2}
.prt-lbl__pay{margin-top:calc(var(--u)*2.4);padding:calc(var(--u)*2) calc(var(--u)*2);border:calc(var(--u)*1) solid #000;text-align:center}
.prt-lbl__pk{font-size:calc(var(--u)*3.2);font-weight:700;letter-spacing:.04em}
.prt-lbl__pv{font-size:calc(var(--u)*10.5);font-weight:800;line-height:1.08}
.prt-lbl__pv--sm{font-size:calc(var(--u)*7.4);letter-spacing:.02em}
.prt-lbl__pay--paid{border-style:dashed}
.prt-lbl__pay--ujian,.prt-lbl__pay--belum,.prt-lbl__pay--semak{border-width:calc(var(--u)*1.4)}
.prt-lbl__items{margin-top:calc(var(--u)*2.4);font-size:calc(var(--u)*3.6)}
.prt-lbl__items b{display:block;font-size:calc(var(--u)*4.6)}
.prt-lbl__foot{margin-top:calc(var(--u)*2.2);padding-top:calc(var(--u)*1.6);border-top:calc(var(--u)*.6) solid #000}
.prt-lbl__id{font:800 calc(var(--u)*8.4)/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.02em}
.prt-lbl__note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:calc(var(--u)*1.2);font-size:calc(var(--u)*3.5);line-height:1.25}
.prt-lbl__ship{display:flex;align-items:flex-end;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*1.8);min-height:calc(var(--u)*6);font-size:calc(var(--u)*3.6);font-weight:700}
.prt-lbl__sk{flex:none;font-weight:400}
.prt-lbl__blank{flex:1 1 auto;align-self:flex-end;height:calc(var(--u)*5);border-bottom:calc(var(--u)*.4) dotted #000}
@media screen{.prt-lbl[data-clip]{outline:3px solid var(--bad);outline-offset:-3px}}

/* ---------- senarai pek (kertas A4) ---------- */
.prt-pek{max-width:210mm;padding:1.1rem 1.2rem 1.3rem;background:#fff;color:#000;border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.prt-pek__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:2px solid #000}
.prt-pek__head h2{font-size:1.25rem}
.prt-pek__meta{margin-top:.1rem;font-size:.8125rem;color:var(--ink-soft)}
.prt-pek__big{font-size:1.05rem}
.prt-pek__big b{font-size:1.5rem}
.prt-tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.prt-tbl caption{text-align:left}
.prt-tbl th{padding:.45rem .55rem;text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#000;border-bottom:2px solid #000;white-space:nowrap}
.prt-tbl td,.prt-tbl tbody th{padding:.55rem .55rem;border-bottom:1px solid var(--line-strong);vertical-align:top;text-align:left}
.prt-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.prt-tbl tfoot th,.prt-tbl tfoot td{border-top:2px solid #000;border-bottom:0;font-weight:700}
.prt-tbl tbody th{font-size:inherit;letter-spacing:0;text-transform:none;white-space:normal}
.prt-sum{margin-bottom:1.1rem;max-width:34rem}
.prt-sum tbody th{font-weight:600}
.prt-wrap{overflow-x:auto}
.prt-wrap:focus-visible{outline-offset:-3px}
.prt-box{display:inline-block;width:1.15rem;height:1.15rem;border:2px solid #000;border-radius:3px;vertical-align:middle}
.prt-main{table-layout:fixed}
.prt-col-box{width:5%}.prt-col-id{width:12%}.prt-col-name{width:20%}.prt-col-pak{width:22.5%}.prt-col-botol{width:6%}.prt-col-pay{width:14%}.prt-col-note{width:20.5%}
.prt-c-box{width:2.4rem}
.prt-c-id{white-space:nowrap;overflow:hidden;text-overflow:clip}
.prt-c-botol{width:3.5rem}
.prt-c-pay{white-space:nowrap}
.prt-main th:nth-child(6),.prt-main td:nth-child(6){padding-left:.9rem}
.prt-c-name,.prt-c-pak{overflow-wrap:anywhere}
.prt-c-note{overflow-wrap:anywhere}
.prt-qty{font-size:1.02em}
.prt-tag{font-weight:700}
.prt-bad{color:var(--bad)}
.prt-row--bad td{background:var(--bad-bg)}
@media screen and (max-width:640px){
  .prt-pek{padding:.9rem .8rem 1rem}
  .prt-wrap{overflow:visible}
  .prt-main thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prt-main,.prt-main tbody{display:block}
  .prt-main colgroup{display:none}
  .prt-main tr{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;grid-template-areas:"box name botol" ". pak pak" ". pay pay" ". note note" ". id id";gap:.15rem .5rem;padding:.7rem 0;border-bottom:1px solid var(--line-strong)}
  .prt-main td{display:block;min-width:0;padding:0;border:0}
  .prt-main .prt-c-box{grid-area:box;width:auto}
  .prt-main .prt-c-name{grid-area:name;font-weight:700}
  .prt-main .prt-c-botol{grid-area:botol;width:auto;text-align:right;font-weight:700}
  .prt-main .prt-c-botol::after{content:" bottle(s)";font-weight:400}
  .prt-main .prt-c-pak{grid-area:pak}
  .prt-main .prt-c-pay{grid-area:pay}
  .prt-main .prt-c-id{grid-area:id;font-size:.8rem;color:var(--muted)}
  .prt-main .prt-c-note{grid-area:note;min-width:0}
  .prt-main .prt-c-note:empty{display:none}
  .prt-row--bad{background:var(--bad-bg)}
  .prt-row--bad td{background:transparent}
}

/* ---------- cetak ---------- */
@page prt-label{size:100mm 150mm;margin:0}
@page prt-pek{size:A4 portrait;margin:12mm 10mm}
@media print{
  .prt-on,.prt-on body{background:#fff!important;color:#000}
  .prt-on .app,.prt-on .main{display:block;min-height:0}
  .prt-on .page{display:block;margin:0;padding:0;max-width:none;width:auto}
  .prt-on #main{outline:0}
  .prt-on .no-print,.prt-on .newbar,.prt-on #offline-flag,.prt-on #modal-root,.prt-on #toasts{display:none!important}   /* #modal-root kosong ialah kotak tanpa nama halaman: ia memaksa halaman kosong tambahan selepas label */
  .prt{display:block}
  .prt-body{min-height:0}
  .prt--label .prt-sheet{display:block;margin:0;padding:0}
  .prt--label .prt-item{display:block;margin:0;padding:0;page:prt-label;break-after:page;break-inside:avoid}
  .prt--label .prt-item:last-child{break-after:auto}
  .prt--label .prt-frame{width:100mm;margin:0;border:0;border-radius:0;box-shadow:none}
  .prt--label .prt-lbl{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prt--senarai .prt-pek{page:prt-pek;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none;font-size:10pt}
  .prt--senarai .prt-wrap{overflow:visible}
  .prt--senarai .prt-tbl{font-size:9.5pt}
  .prt--senarai .prt-tbl thead{display:table-header-group}
  .prt--senarai .prt-tbl tr{break-inside:avoid}
  .prt--senarai .prt-tbl td,.prt--senarai .prt-tbl th{padding:1.6mm 1.6mm}
  .prt--senarai .prt-tbl td,.prt--senarai .prt-tbl tbody th{border-bottom:.3mm solid #666}
  .prt--senarai .prt-row--bad td{background:transparent}
  .prt--senarai .prt-bad{color:#000;text-decoration:underline}
  .prt--senarai .prt-pek__head h2{font-size:15pt}
  .prt--senarai .prt-pek__meta{color:#000}
  .prt--senarai .prt-box{width:4.2mm;height:4.2mm;border-width:.4mm}
}