/* public/ui-f3.css — UI Portal (kumpulan f3): Inventori, Cari Tempered Glass, Jadual Harga Tetap,
   Perubahan Harga, Katalog Pembekal (portal staf), Log Resit, Servis Lite + modal milik halaman-halaman ini.
   HANYA rupa. Awalan kelas f3-. Guna token tema (--tona-*, --panel, --garis-kad ...) dan kelas kongsi
   x-* / mk-* dalam ui.css. Dimuat SELEPAS ui.css. Tiada hex baharu; animasi: transform/opacity sahaja,
   dibungkus prefers-reduced-motion. */

/* ---------- nada halaman (--tb latar, --tf teks, --ts penegas) ---------- */
#page-inventori{--tb:var(--tona-biru-bg,var(--bg3));--tf:var(--tona-biru-fg,var(--teks));--ts:var(--biru)}
#page-cariTG{--tb:var(--tona-cyan-bg,var(--bg3));--tf:var(--tona-cyan-fg,var(--teks));--ts:var(--cyan)}
#page-hargaTetap{--tb:var(--tona-hijau-bg,var(--bg3));--tf:var(--tona-hijau-fg,var(--teks));--ts:var(--hijau)}
#page-perubahanHarga{--tb:var(--tona-oren-bg,var(--bg3));--tf:var(--tona-oren-fg,var(--teks));--ts:var(--oren)}
#page-katalogPembekal{--tb:var(--tona-pink-bg,var(--bg3));--tf:var(--tona-pink-fg,var(--teks));--ts:var(--accent,var(--merah))}
#page-resit{--tb:var(--tona-ungu-bg,var(--bg3));--tf:var(--tona-ungu-fg,var(--teks));--ts:var(--ungu)}
#page-lite{--tb:var(--tona-kuning-bg,var(--bg3));--tf:var(--tona-kuning-fg,var(--teks));--ts:var(--kuning)}

:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite){overflow-x:clip;min-width:0}

/* ---------- kepala halaman berwarna ikut nada halaman ---------- */
.f3-kepala{--tona-hero-bg:var(--tb);--tona-hero-fg:var(--tf);margin-bottom:14px;background:linear-gradient(135deg,var(--tb),color-mix(in srgb,var(--tb) 62%,var(--panel)));color:var(--tf);border:1px solid color-mix(in srgb,var(--ts) 35%,transparent)}
.f3-kepala .x-kepala-ikon{background:color-mix(in srgb,var(--ts) 28%,transparent);color:var(--tf)}
.f3-kepala .x-b-lut{background:color-mix(in srgb,var(--tf) 10%,transparent);border-color:color-mix(in srgb,var(--tf) 38%,transparent);color:var(--tf)}
.f3-kepala .x-b-lut:active{scale:.96}
@media(max-width:480px){.f3-kepala .x-kepala-aksi .x-b-lut{flex:1 1 100%;justify-content:center}}

/* ---------- panel: kepala panel berikon bertona ---------- */
:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite) .panel{border-radius:var(--r2);margin-bottom:14px}
:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite) .panel-head{padding:12px 14px;gap:10px}
:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite) .panel-head h3{font-size:15px;font-weight:800;gap:9px;min-width:0}
:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite) .panel-head h3>i:first-child{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:13px;background:var(--tb);color:var(--tf);flex:none}
:is(#page-inventori,#page-cariTG,#page-hargaTetap,#page-perubahanHarga,#page-katalogPembekal,#page-resit,#page-lite) .panel-isi{padding:14px}

/* butang aksi dalam kepala panel (berlabel, 44px) */
.f3-aksi{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;min-width:0}
.f3-aksi .btn,.f3-aksi .x-b-lut{min-height:44px;border-radius:12px;padding:0 14px;font-weight:800;gap:7px}
.f3-aksi .x-b-lut{background:var(--panel2);color:var(--teks);border:1.5px solid var(--garis-kad)}
.f3-aksi .x-menu-lagi-isi{z-index:75}
.f3-segar{min-width:44px;min-height:44px;border-radius:12px}
.f3-penuh{width:100%;min-height:48px;margin-top:12px;border-radius:13px;font-weight:800}
.f3-reset{min-width:44px;min-height:44px;border-radius:999px}

/* kad statistik */
.f3-stats{margin-bottom:14px}
.f3-stats:empty{display:none;margin:0}
.f3-stats .x-stat{animation:none}
.f3-ph-stat{margin-bottom:12px}
@media(min-width:760px){.f3-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* ---------- jalur cip (tab) ---------- */
:is(#page-inventori,#page-perubahanHarga) .f3-cipbar,#stokTogolPanel>.panel-isi{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;padding:10px 14px;margin:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0}
.f3-cipbar::-webkit-scrollbar,#stokTogolPanel>.panel-isi::-webkit-scrollbar{display:none}
/* override peraturan global ≤900px (kumpulan butang -> grid 3 lajur / ikon sahaja) */
:is(#page-hargaTetap,#page-inventori,#page-resit,#page-lite,#page-katalogPembekal) .f3-aksi>.btn:not(.hidden){width:auto!important;height:auto!important;min-height:44px!important;padding:0 14px!important;font-size:13px!important;line-height:1.2!important;display:inline-flex}
:is(#page-hargaTetap,#page-inventori,#page-resit,#page-lite,#page-katalogPembekal) .f3-aksi>.btn i{font-size:14px!important}
:is(#page-inventori,#page-perubahanHarga) .f3-cipbar .btn{width:auto!important;font-size:13px!important;padding:0 14px!important;line-height:1.2!important}
#stokTogolPanel{margin-bottom:14px}
#stokTogolPanel>.panel-isi{padding:8px 10px}
.f3-cipbar .btn,#stokTogolPanel>.panel-isi>.btn{flex:0 0 auto;width:auto!important;height:auto!important;min-height:44px;padding:0 14px!important;border-radius:999px;font-size:13px!important;font-weight:800;white-space:nowrap!important;gap:7px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid color-mix(in srgb,var(--ts) 45%,transparent);background:color-mix(in srgb,var(--ts) 9%,var(--panel));color:var(--teks);line-height:1.2}
.f3-cipbar .btn i,#stokTogolPanel>.panel-isi>.btn i{color:var(--ts);font-size:13px}
.f3-cipbar .btn:active,#stokTogolPanel>.panel-isi>.btn:active{scale:.95}
.f3-cipbar .btn.btn-primary,#stokTogolPanel>.panel-isi>.btn.btn-primary{background:var(--ts);border-color:var(--ts);color:var(--on-primary);box-shadow:0 2px 8px color-mix(in srgb,var(--ts) 35%,transparent)}
.f3-cipbar .btn.btn-primary i,#stokTogolPanel>.panel-isi>.btn.btn-primary i{color:inherit}
.f3-cipbar .btn.hidden,#stokTogolPanel>.panel-isi>.btn.hidden{display:none!important}
.f3-cipbar-besar{padding:10px 14px}
[data-stoktab="senarai"]{--ts:var(--biru)}[data-stoktab="restock"]{--ts:var(--oren)}[data-stoktab="pelarasan"]{--ts:var(--ungu)}
[data-stoktab="audit"]{--ts:var(--cyan)}[data-stoktab="kos"]{--ts:var(--kuning)}[data-stoktab="lcd"]{--ts:var(--accent,var(--merah))}
[data-restab="restock"]{--ts:var(--oren)}[data-restab="selalu"]{--ts:var(--merah)}[data-restab="lain"]{--ts:var(--biru)}[data-restab="tg"]{--ts:var(--cyan)}
#btnPhTabUbah{--ts:var(--oren)}#btnPhTabLama{--ts:var(--ungu)}
#page-perubahanHarga .f3-panel-ph{padding:0}

/* ---------- tindakan pantas (Stok Masuk / Guna Stok) ---------- */
.f3-pantas{margin-bottom:14px}
#stokPantasPanel>.panel-isi{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))!important;gap:10px!important}
#stokPantasPanel .btn{min-height:56px!important;width:auto!important;height:auto!important;padding:8px 14px!important;font-size:14.5px!important;line-height:1.25!important;font-weight:800;border-radius:14px;gap:9px;white-space:normal!important;justify-content:center}
#stokPantasPanel .btn i{font-size:17px!important}
#stokPantasPanel .btn:active{scale:.97}

/* ---------- carian & penapis ---------- */
.f3-cari{position:relative;min-width:0;flex:1 1 220px;max-width:100%}
.f3-cari>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--teks3);pointer-events:none}
.f3-cari input{width:100%;min-height:48px;padding:0 14px 0 40px;border-radius:14px;font-size:15px}
.f3-carian{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;min-width:0}
.f3-carian .btn{min-height:48px;border-radius:14px;padding:0 20px;font-weight:800;gap:8px}
@media(max-width:480px){.f3-carian .btn{flex:1 1 100%}}
#page-inventori .filter-bar.f3-tapis,#page-inventori .panel>.filter-bar,#page-resit .panel>.filter-bar,#page-perubahanHarga .filter-bar,#page-lite .filter-bar{gap:10px;padding:12px 14px}
.f3-tapis-aksi{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.f3-tapis-aksi .btn{min-height:44px;border-radius:12px;padding:0 14px;font-weight:800;gap:7px}
@media(max-width:480px){.f3-tapis-aksi{width:100%}.f3-tapis-aksi .btn{flex:1 1 0}}

/* togol kotak semak sebagai cip */
.f3-tog{position:relative;display:inline-flex;min-height:44px;cursor:pointer;flex:0 0 auto;max-width:100%}
.f3-tog input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.f3-tog span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--garis-kad);background:var(--panel);color:var(--teks2);font-size:13px;font-weight:700;white-space:nowrap}
.f3-tog span i{color:var(--ts,var(--teks3));font-size:12px}
.f3-tog:has(input:checked) span{background:var(--tb,var(--bg3));color:var(--tf,var(--teks));border-color:var(--ts,var(--cyan));box-shadow:0 2px 8px color-mix(in srgb,var(--ts,var(--cyan)) 25%,transparent)}
.f3-tog:has(input:focus-visible) span{outline:2px solid var(--ts,var(--cyan));outline-offset:2px}
.f3-tog:active span{scale:.96}

/* ---------- Inventori: kad telefon ---------- */
.f3-inv-kad,.f3-tg-kad,.f3-lt-kad,.f3-ph-kad{border-left:4px solid var(--ts,var(--garis-kad));border-radius:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.f3-inv-kad .kad-r-head,.f3-tg-kad .kad-r-head,.f3-lt-kad .kad-r-head,.f3-ph-kad .kad-r-head{margin:0}
.f3-inv-nama{font-size:15px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.f3-inv-meta{font-size:12.5px;color:var(--teks3);line-height:1.4;overflow-wrap:anywhere}
.f3-inv-angka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.f3-inv-angka>div{background:var(--bg3);border-radius:11px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.f3-inv-angka span{font-size:11.5px;color:var(--teks3);font-weight:700}
.f3-inv-angka b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.f3-inv-angka b small{font-size:.62em;font-weight:700;color:var(--teks3)}
.f3-inv-angka b.f3-rendah{color:var(--txt-merah,var(--merah))}
.f3-inv-kad .kad-r-aksi,.f3-tg-kad .kad-r-aksi,.f3-lt-kad .kad-r-aksi{margin-top:4px;padding-top:10px;gap:8px}
.f3-inv-kad .kad-r-aksi .btn,.f3-tg-kad .kad-r-aksi .btn,.f3-lt-kad .kad-r-aksi .btn,.f3-ph-kad .btn{min-height:44px;font-size:13px;border-radius:12px;font-weight:700;gap:7px}

/* jadual desktop: aksi 44px di telefon-tablet, tajuk lekat */
:is(#page-inventori,#page-resit,#page-lite,#page-perubahanHarga) .jadual-bekas{overflow-x:auto;-webkit-overflow-scrolling:touch}
:is(#page-inventori,#page-resit,#page-lite) .aksi-btn{min-width:36px;min-height:36px}
@media(pointer:coarse){:is(#page-inventori,#page-resit,#page-lite) .aksi-btn{min-width:44px;min-height:44px}}

/* ---------- Cari Tempered Glass ---------- */
.f3-manual{margin-top:14px;padding-top:14px;border-top:1px dashed var(--garis-kad);display:flex;flex-direction:column;gap:10px}
.f3-manual-baris{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.f3-manual-baris select,.f3-manual-baris input{min-height:48px;width:100%;min-width:0;font-size:15px}
.f3-manual-baris .btn{min-height:48px;border-radius:14px;font-weight:800;gap:8px}
@media(min-width:640px){.f3-manual-baris{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto}}
.f3-tg-bil{font-size:12.5px;font-weight:700;color:var(--teks3);margin:2px 2px 10px}
.f3-tg-grid{gap:12px}
.f3-tg-kod{font-size:20px!important;letter-spacing:.02em}
.f3-tg-stok{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.f3-tg-padan{font-size:12.5px;color:var(--teks3);display:flex;gap:7px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.f3-tg-padan b{color:var(--teks)}
.f3-tg-cip{display:flex;gap:6px;flex-wrap:wrap}
.f3-tg-cip .x-cip{min-height:32px;padding:0 11px;font-size:12px;cursor:default;background:var(--tb);color:var(--tf);border-color:transparent}
.f3-tg-cip .x-cip i{color:var(--ts)}
.f3-tg-restock{font-size:12.5px;color:var(--teks2);display:flex;gap:7px;align-items:center;background:var(--bg3);border-radius:10px;padding:7px 10px}
.f3-tg-restock i{color:var(--oren)}
.f3-tg-senarai{display:flex;flex-wrap:wrap;gap:6px}
.f3-tg-senarai .x-cip{min-height:32px;padding:0 11px;font-size:12px;cursor:default;white-space:normal;flex-shrink:1}
.f3-tg-tiada .panel-isi{display:flex;flex-direction:column;gap:12px}
.f3-kaki-borang{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.f3-kaki-borang .btn{min-height:46px;border-radius:13px;font-weight:800;gap:8px;flex:1 1 160px}

/* ---------- Jadual Harga Tetap ---------- */
.f3-panel-cari .panel-isi{display:flex;flex-direction:column;gap:12px}
#page-hargaTetap .ht-tajuk-model{font-size:18px;display:flex;align-items:center;gap:9px;margin:4px 0 6px}
#page-hargaTetap .ht-tajuk-model::before{content:"\f3cf";font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--tb);color:var(--tf);flex:none}
#page-hargaTetap .ht-jenis{font-size:13px;padding:7px 12px;border-radius:999px;background:var(--bg3);width:max-content;max-width:100%;margin:16px 0 10px;color:var(--teks)}
#page-hargaTetap .ht-jenis i{color:var(--ts)}
#page-hargaTetap .ht-kelas{border-radius:16px;padding:12px 14px;gap:9px;background:var(--panel2);border-left:4px solid var(--ts)}
#page-hargaTetap .ht-harga-besar{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
#page-hargaTetap .ht-part summary{min-height:44px;display:flex;align-items:center;gap:6px;border-radius:10px}
#page-hargaTetap .ht-part summary::before{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;color:var(--teks3);transition:transform .2s ease-out}
#page-hargaTetap .ht-part[open] summary::before{transform:rotate(180deg)}
#page-hargaTetap .ht-part-baris{padding:9px 0}
#page-hargaTetap .ht-nota-iphone{display:flex;gap:10px;align-items:center}
#page-hargaTetap #htPeraturan.panel-isi{display:flex;flex-direction:column;gap:12px}
#page-hargaTetap #htPeraturan .kw-nota{margin:0!important}
#page-hargaTetap #htPeraturan input,#page-hargaTetap #htPeraturan select{min-height:44px}
#page-hargaTetap #htPeraturan{overflow-x:auto}
.f3-panel-cari .x-cari input{font-size:16px}

/* ---------- Perubahan Harga ---------- */
.f3-ph-masa{font-size:12px;color:var(--teks3);font-weight:700}
.f3-ph-peranti{font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.f3-ph-harga{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;background:var(--bg3);border-radius:12px;padding:10px 12px}
.f3-ph-harga3{grid-template-columns:repeat(3,minmax(0,1fr))}
.f3-ph-harga>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.f3-ph-harga span{font-size:11.5px;color:var(--teks3);font-weight:700}
.f3-ph-harga b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.f3-ph-harga>i{color:var(--teks3)}
.f3-ph-baru{color:var(--txt-oren,var(--oren))}
.f3-ph-meta{display:flex;gap:6px;flex-wrap:wrap}
.f3-ph-meta .x-cip{min-height:32px;padding:0 11px;font-size:12px;cursor:default}
.f3-ph-medan{font-size:12px;color:var(--teks3);overflow-wrap:anywhere}
#phIsi{display:flex;flex-direction:column;gap:12px}
#phIsi .kad-list{padding:0}
#phIsi .x-nota{margin-top:2px}

/* ---------- Katalog Pembekal ---------- */
.f3-kp{display:flex;flex-direction:column;min-width:0}
.f3-kp>*{min-width:0}
.f3-kp .f3-kp-nota{margin-bottom:14px}
.f3-kp .kp-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.f3-kp .kp-kad{border-radius:16px;border:var(--tebal-garis,1px) solid var(--garis-kad);border-top:4px solid var(--ts);box-shadow:var(--bayang-kad);gap:11px;padding:14px}
.f3-kp .kp-kad-atas{display:flex;gap:11px;align-items:center;min-width:0}
.f3-kp .kp-kad-atas .x-ikon{width:42px;height:42px;font-size:17px;border-radius:13px}
.f3-kp .kp-kad-teks{min-width:0}
.f3-kp .kp-kad h4{font-size:15.5px;overflow-wrap:anywhere}
.f3-kp .kp-lencana{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 11px}
.f3-kp .kp-baris .btn{min-height:44px;border-radius:12px;font-weight:700;gap:7px}
.f3-kp .kp-kad .kp-baris .btn{flex:1 1 auto}
.f3-kp .panel{margin-bottom:12px}
.f3-panel-kp>.panel-isi{display:flex;flex-direction:column;gap:12px}
.f3-panel-kp .filter-bar{padding:0;border:0}
.f3-kp .kp-item{padding:12px 0;gap:12px;flex-wrap:wrap}
.f3-kp .kp-item .kp-nama{font-size:14px}
.f3-kp .kp-qty{gap:8px}
.f3-kp .kp-qty .btn{min-width:44px;min-height:44px;border-radius:12px}
.f3-kp .kp-qty b{min-width:28px;font-size:15px}
.f3-kp .kp-harga{font-size:15px}
.f3-kp .kp-troli{border-radius:16px;box-shadow:0 -6px 20px rgba(0,0,0,.14);z-index:5}
.f3-kp .kp-troli .btn{min-height:46px;border-radius:12px;font-weight:800}
.f3-kp .f3-panel-borang .panel-isi{display:flex;flex-direction:column;gap:12px}
.f3-kp .f3-panel-borang .input-group{margin:0}
.f3-kp .f3-panel-borang input{min-height:46px;font-size:15px}

/* ---------- Log Resit ---------- */
.f3-scan-pilih{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.f3-scan-kad{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:112px;padding:14px 10px;border-radius:16px;border:2px dashed var(--ts);background:color-mix(in srgb,var(--tb) 55%,var(--panel));color:var(--teks);font:inherit;cursor:pointer;text-align:center;transition:scale .15s ease-out,border-color .15s ease-out}
.f3-scan-kad .x-ikon{width:44px;height:44px;font-size:19px;border-radius:14px}
.f3-scan-kad b{font-size:14px;font-weight:800}
.f3-scan-kad small{font-size:11.5px;color:var(--teks3);line-height:1.3}
.f3-scan-kad:active{scale:.96}
.f3-pratonton{margin:12px 0}
.f3-pratonton img{display:block;max-width:min(260px,100%);max-height:260px;border-radius:14px;border:var(--tebal-garis,1px) solid var(--garis-kad);box-shadow:var(--bayang-kad)}
.f3-nota-scan{margin-top:12px}
.f3-sahkan{margin-top:16px}
.f3-sahkan .detail-seksyen h4{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin:0 0 12px}
.f3-sahkan .detail-seksyen h4 i{width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;background:var(--tb);color:var(--tf);font-size:12px}
.f3-sahkan .input-group input,.f3-sahkan .input-group select,.f3-sahkan .input-group textarea{min-height:46px;font-size:15px}
.f3-sahkan .input-group textarea{min-height:76px}
.f3-sahkan .f3-kaki-borang{justify-content:stretch;margin-top:8px}
@media(max-width:480px){.f3-scan-kad{min-height:104px}}

/* ---------- Servis Lite ---------- */
.f3-panel-lite .lt-grid{grid-template-columns:repeat(auto-fill,minmax(min(130px,46%),1fr));gap:10px}
.f3-panel-lite .lt-kad{border-radius:16px;min-height:112px;justify-content:center;padding:14px 8px}
.f3-panel-lite .lt-kad-ikon{width:46px;height:46px;font-size:19px}
.f3-panel-lite .lt-kad-harga{font-variant-numeric:tabular-nums}
#btnUrusLiteKerja{min-height:44px;border-radius:12px;font-weight:800}
.f3-lt-atas{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.f3-lt-kerja{font-size:15px;font-weight:800;overflow-wrap:anywhere;min-width:0}
.f3-lt-harga{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.f3-lt-harga small{font-size:.62em;color:var(--teks3)}
.f3-lt-meta{font-size:12.5px;color:var(--teks3);overflow-wrap:anywhere}
#page-lite #ltSenarai{min-width:0}

/* ---------- modal (melengkapi mk-modal dalam ui.css) ---------- */
:is(#modalItem,#modalStok,#modalStokStaf,#modalSupplier,#modalEditKategori,#modalUrusKategori,#modalResitKategori,#modalResitEdit,#modalLite,#modalLiteBatal,#modalLiteKerja,#modalLiteCepat,#modalGunaTG,#modalSambungTG,#modalTgPadanan,#modalTgDetail,#modalPilihStok,#modalItemDetail,#modalAuditStok,#modalResitProsesStok) .modal-isi .input-group{margin:0}
:is(#modalItem,#modalStok,#modalStokStaf,#modalSupplier,#modalEditKategori,#modalUrusKategori,#modalResitKategori,#modalResitEdit,#modalLite,#modalLiteBatal,#modalLiteKerja,#modalGunaTG,#modalSambungTG,#modalTgPadanan) .modal-isi :is(input:not([type=checkbox]):not([type=file]),select,textarea){min-height:46px;font-size:15px}
:is(#modalItem,#modalStok,#modalStokStaf,#modalSupplier,#modalResitKategori,#modalResitEdit,#modalLite,#modalLiteBatal,#modalLiteKerja,#modalGunaTG,#modalSambungTG,#modalTgPadanan) .modal-isi textarea{min-height:80px}
:is(#modalItem,#modalResitEdit,#modalLiteKerja) .borang-grid{gap:12px}
.mk-modal .modal-isi .baris-detail,.mk-modal .modal-isi .kad-r-baris{padding:9px 12px;border-radius:11px;background:var(--bg3)}
#modalGunaTG .modal-isi,#modalStok .modal-isi{gap:10px}
#modalGunaTG .modal-isi .input-group,#modalStok .modal-isi .input-group{margin-top:2px}
#modalItem .mk-modal,#modalAuditStok .mk-modal,#modalPilihStok .mk-modal,#modalItemDetail .mk-modal,#modalResitProsesStok .mk-modal,#modalLiteKerja .mk-modal{max-width:760px}
#modalLiteBatal .mk-modal,#modalSambungTG .mk-modal,#modalTgPadanan .mk-modal,#modalEditKategori .mk-modal{max-width:480px}
.mk-modal .modal-kaki.mk-kaki-lekat:empty{display:none}
.mk-modal .mk-kaki-lekat .btn{min-height:46px;border-radius:12px;font-weight:800;gap:8px}
.mk-modal .mk-kaki-lekat .btn-primary,.mk-modal .mk-kaki-lekat .btn-merah{flex:1.4 1 0}
.mk-modal .mk-kaki-lekat .btn-ghost{flex:1 1 0}
.mk-modal .mk-mh .btn-ikon,.mk-modal .mk-mh .btn{min-width:44px;min-height:44px;flex:none}
#modalLiteCepat .mk-mh .btn-ikon{margin-left:auto;margin-right:0!important}
#modalLiteCepat .modal-isi .lt-grid{grid-template-columns:repeat(auto-fill,minmax(min(120px,46%),1fr))}
#modalLiteCepat #btnLtcLain{min-height:48px;border-radius:13px;font-weight:800}
#modalItem .mk-sek .borang-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:560px){#modalItem .mk-sek .borang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modalItem .mk-sek .borang-grid .span2{grid-column:1/-1}}
#modalItem .mk-sek .borang-grid .input-group{min-width:0}
#modalItem .mk-sek .borang-grid .input-group>div[style*="display:flex"]{align-items:stretch}
#modalItem .mk-sek .btn-ikon{min-width:46px;min-height:46px;flex:none}
#modalLiteKerja .ikon-picker{max-height:180px;overflow:auto}
#modalPilihStok .modal-isi .kad-grid{margin-bottom:0}
#modalAuditStok .jadual-bekas{max-width:100%}
#modalStokStaf #ssItemHasil,#modalStokStaf #ssRepairHasil{border-radius:12px}

/* ---------- gerakan: maklum balas sentuhan & masuk (transform/opacity sahaja) ---------- */
.f3-scan-kad,.f3-pantas .btn,.f3-tog span,.f3-cipbar .btn,.lt-kad{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:no-preference){
  .f3-kepala,.f3-stats .x-stat,.f3-tg-kad,.f3-inv-kad,.f3-lt-kad,.f3-ph-kad,.f3-kp .kp-kad{animation:f3Masuk .26s ease-out backwards}
  .f3-stats .x-stat:nth-child(2){animation-delay:.04s}.f3-stats .x-stat:nth-child(3){animation-delay:.08s}
  @keyframes f3Masuk{from{opacity:0;transform:translateY(8px)}}
}
@media(prefers-reduced-motion:reduce){
  .f3-scan-kad,.f3-pantas .btn,.f3-tog span,.f3-cipbar .btn{transition:none!important}
  #page-hargaTetap .ht-part summary::before{transition:none}
}

/* ---------- telefon sempit ---------- */
@media(max-width:480px){
  .f3-aksi{width:100%}
  .f3-aksi>.btn:not(.hidden){flex:1 1 auto}
  :is(#page-inventori,#page-resit) .panel-head{align-items:stretch}
  .f3-inv-angka b{font-size:16px}
  .f3-panel-lite .lt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- penambahbaikan: ralat kosong tidak makan ruang; 2 lajur butang pantas ---------- */
.mk-modal .ralat-field:empty,.f3-sahkan .ralat-field:empty,.f3-kp .ralat-field:empty{display:none}
.mk-modal .ralat-field{min-height:0}
#stokPantasPanel>.panel-isi{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))!important}
#ltSenarai .kad-list{padding:0}
#page-perubahanHarga .f3-cipbar-besar{overflow:visible}
#page-perubahanHarga .f3-cipbar-besar .btn{flex:1 1 0;white-space:normal!important;text-align:center;padding:6px 10px!important}