/* public/ui-f5.css — UI baharu (kod f5): Budget, Carta Akaun, Jurnal, Laporan Kewangan
   (Trial Balance / General Ledger / Untung Rugi / Balance Sheet / Cash Flow / Tempoh Akaun),
   Papan e-Invois + Profil Cukai, Langganan & Bil. Awalan kelas: f5-.
   Hanya token tema (--tb/--tf/--ts daripada .x-t-*, --panel, --garis-kad ...) supaya sah dalam
   Ceria / Pastel / Asal x gelap / terang. Animasi: transform/opacity sahaja, di bawah
   prefers-reduced-motion: no-preference. Dimuat SELEPAS ui.css. */

/* ---------- asas halaman ---------- */
#page-budget,#page-cartaAkaun,#page-jurnal,#page-laporanKewangan,#page-einvois,#page-langganan{overflow-x:clip}
.f5-pg{gap:14px}
@media(max-width:900px){.f5-pg{padding-bottom:88px}}   /* ruang untuk FAB */
.f5-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.f5-susun{display:flex;flex-direction:column;gap:14px;min-width:0}
.f5-kecil-teks{font-size:11.5px;font-weight:700;color:var(--teks3)}
.f5-bantu{font-size:12px;color:var(--teks3);line-height:1.5;margin-top:4px}
.f5-bantu i{margin-right:4px}
.f5-teks-bantu{font-size:13px;color:var(--teks2);line-height:1.55}
.f5-pudar{opacity:.55}
.x-btn.f5-kecil{min-height:44px;font-size:13px;padding:0 14px}
.x-btn.penuh{width:100%}
.x-btn-amaran.x-t-merah{background:var(--tb);color:var(--tf);border-color:var(--ts)}

/* ---------- kad statistik: 4 / 3 lajur ---------- */
.f5-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:1000px){.f5-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.f5-stats3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:2px}
.f5-stats3>:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:700px){.f5-stats3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.f5-stats3>:last-child:nth-child(odd){grid-column:auto}}
.f5-stats>.skeleton,.f5-stats>.x-kosong{grid-column:1/-1}

/* ---------- pemilih bulan dalam kepala ---------- */
.f5-bulan{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--tona-hero-fg) 35%,transparent);background:color-mix(in srgb,var(--tona-hero-fg) 10%,transparent);color:var(--tona-hero-fg);cursor:pointer}
.f5-bulan input{background:transparent;border:0;color:inherit;font:inherit;font-weight:700;font-size:14px;min-height:40px;width:auto;padding:0;color-scheme:dark}
.f5-bulan input:focus-visible{outline:2px solid var(--tona-hero-fg);outline-offset:3px;border-radius:6px}
@media(max-width:480px){.f5-bulan{flex:1 1 100%}.f5-bulan input{flex:1}}

/* ---------- chip, kod, butang aksi ---------- */
.f5-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--tb,var(--bg3));color:var(--tf,var(--teks2));white-space:nowrap;max-width:100%}
.f5-kod{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:12px;padding:2px 8px;border-radius:8px;background:color-mix(in srgb,var(--ts,var(--teks3)) 15%,var(--panel2));color:var(--teks);overflow-wrap:anywhere}
.f5-aksi{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.f5-ab{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:12px;border:1.5px solid var(--garis-kad);background:var(--panel2);color:var(--teks);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;list-style:none;transition:scale var(--pantas)}
.f5-ab:active{scale:.95}
.f5-ab::-webkit-details-marker{display:none}
.f5-ab-hijau{color:var(--txt-hijau);border-color:color-mix(in srgb,var(--hijau) 55%,transparent)}
.f5-ab-oren{color:var(--txt-oren);border-color:color-mix(in srgb,var(--oren) 55%,transparent)}
.f5-ab-bahaya{color:var(--txt-merah);border-color:color-mix(in srgb,var(--merah) 55%,transparent)}
.f5-ab:focus-visible,.x-btn:focus-visible,.f5-bg:focus-visible,.lg-pelan:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(min-width:900px){.f5-tbl .f5-ab{min-height:36px;padding:0 10px}}

/* ---------- penapis / alat ---------- */
.f5-tapis{padding:12px}
.f5-alat .x-btn{flex:0 0 auto}
@media(max-width:480px){.f5-alat .x-btn{flex:1 1 100%}}
.f5-lap{padding:14px}

/* ---------- tab laporan (pil, skrol mendatar dalam komponen) ---------- */
.f5-lekit{padding-block:6px}
.f5-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 2px 4px;border:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.f5-tabs::-webkit-scrollbar{display:none}
.f5-tabs .tab{flex:0 0 auto;min-height:44px;align-items:center;gap:8px;padding:0 15px;border:1.5px solid var(--garis-kad);border-radius:999px;background:var(--panel);color:var(--teks);font-weight:700;transition:scale var(--pantas)}
.f5-tabs .tab:active{scale:.95}
.f5-tabs .tab.aktif{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.f5-tabs .tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- kumpulan akaun (Carta Akaun / Trial Balance) ---------- */
.f5-grp{background:var(--panel);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r2);box-shadow:var(--bayang-kad);overflow:hidden;min-width:0}
.f5-grp-t{display:flex;align-items:center;gap:10px;margin:0;padding:11px 14px;background:var(--tb);color:var(--tf);font-size:13.5px;font-weight:800;letter-spacing:.2px}
.f5-grp-t .t{flex:1;min-width:0;overflow-wrap:anywhere}
.f5-grp-t .x-ikon{background:color-mix(in srgb,var(--tf) 14%,transparent);color:inherit;width:30px;height:30px;font-size:14px}
.f5-grp-t .f5-chip{background:color-mix(in srgb,var(--tf) 14%,transparent);color:inherit}
.f5-grp .jadual-bekas{overflow-x:auto}
.f5-tbl{width:100%;border-collapse:collapse;font-size:13px}
.jadual.f5-tbl{min-width:0}
.f5-tbl td{padding:10px 13px;border-bottom:1px solid var(--line-halus);vertical-align:middle}
.f5-tbl tbody tr:last-child td{border-bottom:0}
.f5-tbl td.kanan,.f5-tbl th.kanan{text-align:right}
.f5-tbl .f5-aksi{flex-wrap:nowrap;gap:6px}
.f5-anak{padding-left:30px!important;position:relative}
.f5-anak::before{content:"";position:absolute;left:15px;top:0;bottom:50%;width:9px;border-left:2px solid var(--garis-kad);border-bottom:2px solid var(--garis-kad);border-bottom-left-radius:6px}
.f5-jadual-panel{padding:0;overflow:hidden}
.f5-jadual-panel>.jadual-bekas{border:0;border-radius:0}
.f5-jadual-panel .jadual thead th{white-space:nowrap}

/* ---------- kad baris di telefon ---------- */
.f5-kad-list{padding:12px;gap:10px}
.f5-kr{position:relative;overflow:hidden;background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);padding:12px 13px 12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.f5-kr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ts,var(--garis-kad))}
.f5-kr-atas{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.f5-kr-atas b{font-size:14.5px}
.f5-kr-nama{font-size:14px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.f5-kr-meta{display:flex;flex-wrap:wrap;gap:6px}
.f5-kr-baris{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--teks2);min-width:0}
.f5-kr-baris b{color:var(--teks);font-size:13px}
.f5-kr-baris.jum{border-top:1px dashed var(--garis-kad);padding-top:7px;font-weight:700}
.f5-kr-baris span i{margin-right:5px;color:var(--ts,var(--teks3))}
.f5-kr .f5-aksi{padding-top:8px;border-top:1px solid var(--line-halus)}
.f5-kr .f5-aksi .f5-ab{flex:1 1 auto}
.f5-senarai-nota{margin:6px 0 10px 18px}

/* ---------- penyata (Untung Rugi, Balance Sheet, Cash Flow) ---------- */
.f5-penyata{display:flex;flex-direction:column;gap:12px;min-width:0}
.f5-st{background:var(--panel);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r2);box-shadow:var(--bayang-kad);overflow:hidden;min-width:0}
.f5-st-t{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;background:var(--tb);color:var(--tf);font-size:13.5px;font-weight:800}
.f5-st-t .x-ikon{background:color-mix(in srgb,var(--tf) 14%,transparent);color:inherit;width:28px;height:28px;font-size:13px}
.f5-st-b{min-width:0}
.f5-st-r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line-halus);font-size:13px;min-width:0}
.f5-st-r .n{min-width:0;overflow-wrap:anywhere;color:var(--teks2)}
.f5-st-r .v{flex:none;font-weight:700;text-align:right}
.f5-st-r .v.pos,.f5-st-jum .pos{color:var(--txt-hijau)}
.f5-st-r .v.neg,.f5-st-jum .neg{color:var(--txt-merah)}
.f5-st-kosong{padding:12px 14px;font-size:12.5px;color:var(--teks3)}
.f5-st-jum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 14px;font-weight:800;font-size:14px;border-top:2px solid var(--ts);background:color-mix(in srgb,var(--tb) 45%,var(--panel))}
.f5-st-jum b{font-variant-numeric:tabular-nums;white-space:nowrap}
.f5-tot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--tb) 70%,var(--panel));border:1px solid color-mix(in srgb,var(--ts) 45%,transparent);color:var(--teks);font-weight:800;font-size:14px;min-width:0}
.f5-tot>span{min-width:0;overflow-wrap:anywhere}
.f5-tot small{display:block;font-size:11.5px;font-weight:700;color:var(--teks3);margin-top:1px}
.f5-tot b{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tf)}
.f5-tot.besar{font-size:16px;padding:14px 16px}
.f5-tot.besar b{font-size:19px}
#glBakiPembukaan,#glBakiPenutup,#cfBakiPembukaan,#cfBakiPenutup,#tbRingkasan{min-width:0}
#glBakiPembukaan:empty,#glBakiPenutup:empty,#cfBakiPembukaan:empty,#cfBakiPenutup:empty,#tbRingkasan:empty,#urRekonsiliasi:empty,#bsIndikator:empty{display:none}
.f5-rek{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:2px 0}
.f5-rek b{font-variant-numeric:tabular-nums}

/* ringkasan Trial Balance */
.f5-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 16px;border-radius:var(--r2);border:1px solid;font-size:13px}
.f5-sum-l span{display:block;font-size:11.5px;font-weight:700;color:var(--teks2)}
.f5-sum-l b{font-size:17px;font-variant-numeric:tabular-nums}
.f5-sum-st{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.f5-sum.ok{background:var(--tona-hijau-bg);color:var(--tona-hijau-fg);border-color:color-mix(in srgb,var(--hijau) 50%,transparent)}
.f5-sum.salah{background:var(--tona-merah-bg);color:var(--tona-merah-fg);border-color:color-mix(in srgb,var(--merah) 55%,transparent)}
.f5-sum-l span{color:inherit;opacity:.85}
@media(max-width:480px){.f5-sum-st{margin-left:0;width:100%}}

/* penunjuk seimbang */
.f5-ind{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r2);border:1px solid}
.f5-ind>i{font-size:26px}
.f5-ind b{display:block;font-size:16px}
.f5-ind small{font-size:12.5px;opacity:.85}
.f5-ind.ok{background:var(--tona-hijau-bg);color:var(--tona-hijau-fg);border-color:color-mix(in srgb,var(--hijau) 50%,transparent)}
.f5-ind.salah{background:var(--tona-merah-bg);color:var(--tona-merah-fg);border-color:var(--merah)}

/* Balance Sheet */
.f5-bs{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:900px){.f5-bs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.f5-bs-lajur{display:flex;flex-direction:column;gap:14px;min-width:0}
.f5-bs-lajur>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.f5-bs-tajuk{display:flex;align-items:center;gap:9px;margin:0;padding:9px 12px;border-radius:12px;background:var(--tb);color:var(--tf);font-size:13.5px;font-weight:800}
.f5-bs-lajur .f5-st-b{background:var(--panel);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);overflow:hidden}
.f5-bs-lajur .f5-st-r:last-child{border-bottom:0}

/* ---------- Budget ---------- */
.f5-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@media(min-width:700px){.f5-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.f5-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.f5-grid>.skeleton,.f5-grid>.x-kosong{grid-column:1/-1}
.f5-bg{position:relative;overflow:hidden;background:var(--panel);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);box-shadow:var(--bayang-kad);padding:14px 14px 12px 18px;display:flex;flex-direction:column;gap:11px;min-width:0;cursor:pointer;transition:scale var(--pantas),border-color var(--pantas)}
.f5-bg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ts)}
.f5-bg:hover{border-color:var(--ts)}
.f5-bg:active{scale:.98}
.f5-bg-atas{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center}
.f5-bg-nama{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.f5-bg-nama b{font-size:14.5px;font-weight:800;overflow-wrap:anywhere}
.f5-bg-pct{font-size:24px;font-weight:800;color:var(--tf);font-variant-numeric:tabular-nums;line-height:1}
.f5-bg-pct small{font-size:.55em;margin-left:1px}
.f5-trek{height:10px;border-radius:999px;background:var(--bg3);overflow:hidden}
.f5-trek i{display:block;height:100%;width:100%;border-radius:999px;background:var(--ts);transform-origin:left center;transform:scaleX(var(--p,0))}
@media(prefers-reduced-motion:no-preference){.f5-trek i{animation:xBarMasuk .5s ease-out both}}
.f5-bg-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f5-bg-angka span{display:block;font-size:11px;font-weight:700;color:var(--teks3)}
.f5-bg-angka b{display:block;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.f5-bg-angka b.neg{color:var(--txt-merah)}
.f5-bg-kaki{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--teks3);border-top:1px solid var(--line-halus);padding-top:8px}
.f5-lihat{font-weight:800;color:var(--tf);white-space:nowrap}

/* modal perbelanjaan budget */
.f5-bahagian{display:flex;flex-direction:column;gap:10px;min-width:0}
.f5-bh-t{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;font-weight:800;color:var(--teks2)}
.f5-bh-t i{color:var(--ts,var(--primary))}
.f5-bh-t .f5-chip{margin-left:auto}
.f5-rekod-list{display:flex;flex-direction:column;gap:8px}
.f5-rekod{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:11px 12px;border-radius:var(--r);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2)}
.f5-rekod-t{min-width:0;display:flex;flex-direction:column}
.f5-rekod-t b{font-size:13.5px;overflow-wrap:anywhere}
.f5-rekod-t span{font-size:11.5px;color:var(--teks3);font-weight:600}
.f5-rekod-j{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.f5-rekod .f5-ab{grid-column:1/-1;justify-self:end}
.f5-rekod-list .x-kosong{padding:18px 10px}

/* ---------- modal kongsi (tambahan kepada mk-*) ---------- */
.modal-overlay.mk-ov .mk-modal.f5-lebar{max-width:860px}
.f5-ringkas{background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);padding:2px 13px}
.f5-ringkas .baris-detail:last-child{border-bottom:0}
.mk-modal .mk-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mk-modal .mk-g2>.penuh{grid-column:1/-1}
.mk-modal .mk-f .ralat-field:empty,.mk-modal .ralat-field:empty{display:none}
.mk-modal .mk-kaki-lekat .x-btn{padding:0 10px;font-size:13.5px}
.mk-modal .mk-kaki-lekat .x-btn .btn-teks{display:inline-flex;align-items:center;gap:7px}
.mk-modal .mk-f select{min-height:46px;font-size:15px;width:100%;min-width:0}

/* baris jurnal */
.f5-jb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px;margin-bottom:10px;border-radius:var(--r);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2);min-width:0}
.f5-jb-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f5-jb-f>span{font-size:11.5px;font-weight:700;color:var(--teks2)}
.f5-jb-f input,.f5-jb-f select{min-height:46px;font-size:15px;width:100%;min-width:0}
.f5-jb-ak,.f5-jb-ket{grid-column:1/-1}
.f5-jb .f5-ab{grid-column:1/-1}
@media(min-width:700px){
  .f5-jb{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) 44px;align-items:end;gap:10px}
  .f5-jb-ak,.f5-jb-ket{grid-column:auto}
  .f5-jb .f5-ab{grid-column:auto;width:44px;padding:0}
  .f5-jb .f5-ab span{display:none}
}
.f5-imb-lekat{flex:none;border-top:1px solid var(--line-halus)}
.f5-imb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:10px 16px;font-size:13px}
.f5-imb-l span{font-size:11.5px;font-weight:700;color:var(--teks3);margin-right:6px}
.f5-imb-l b{font-variant-numeric:tabular-nums}
.f5-imb-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:800}
.f5-imb.ok{background:color-mix(in srgb,var(--hijau) 14%,var(--panel));color:var(--txt-hijau)}
.f5-imb.salah{background:color-mix(in srgb,var(--merah) 12%,var(--panel));color:var(--txt-merah)}
.f5-imb .f5-imb-l span{color:var(--teks2)}.f5-imb .f5-imb-l b{color:var(--teks)}
@media(max-width:480px){.f5-imb-st{margin-left:0;width:100%}}

/* jadual bertindan (detail jurnal) — kad di telefon */
.f5-tumpuk{width:100%;border-collapse:collapse;font-size:13px}
.f5-tumpuk th{background:var(--bg2);padding:9px 12px;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--teks3)}
.f5-tumpuk th.kanan{text-align:right}
.f5-tumpuk td{padding:10px 12px;border-bottom:1px solid var(--line-halus)}
.f5-tumpuk .f5-jum td{font-weight:800;border-top:2px solid var(--garis-kad);border-bottom:0;font-variant-numeric:tabular-nums}
.f5-tumpuk .f5-jum-l{text-align:right}
@media(max-width:600px){
  .f5-tumpuk thead{display:none}
  .f5-tumpuk,.f5-tumpuk tbody,.f5-tumpuk tfoot,.f5-tumpuk tr,.f5-tumpuk td{display:block}
  .f5-tumpuk tbody tr{padding:10px 12px;margin-bottom:8px;border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);background:var(--panel2)}
  .f5-tumpuk td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border:0;text-align:right}
  .f5-tumpuk td::before{content:attr(data-l);color:var(--teks3);font-size:12px;font-weight:600;text-align:left;flex:none}
  .f5-tumpuk td[data-l="Akaun"]{font-weight:800;text-align:left;display:block}
  .f5-tumpuk td[data-l="Akaun"]::before{display:none}
  .f5-tumpuk tfoot tr.f5-jum{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ts) 45%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--tb) 60%,var(--panel))}
  .f5-tumpuk .f5-jum td{display:block;text-align:right;padding:0;border:0}
  .f5-tumpuk .f5-jum td::before{display:block;text-align:left;margin-bottom:2px}
  .f5-tumpuk .f5-jum-l{grid-column:1/-1;text-align:left;font-size:12px;color:var(--teks3)}
}

/* ---------- Tempoh Akaun ---------- */
.f5-legenda{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:900px){.f5-legenda{grid-template-columns:repeat(3,minmax(0,1fr))}}
.f5-legenda .x-nota{display:grid;padding:10px 12px}
.f5-ta{position:relative;overflow:hidden;background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);padding:13px 13px 13px 17px;display:flex;flex-direction:column;gap:9px;min-width:0}
.f5-ta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ts)}
.f5-ta-atas{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center}
.f5-ta-atas b{font-size:15px;font-weight:800}
.f5-ta-baris{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--teks3)}
.f5-ta-baris b{color:var(--teks);font-weight:700}
.f5-ta-aksi{display:flex;flex-wrap:wrap;gap:8px;padding-top:9px;border-top:1px solid var(--line-halus)}
.f5-ta-aksi .x-btn{flex:1 1 140px}
.f5-nota-kecil{font-size:12px;color:var(--teks3);font-weight:700}

/* ---------- Papan e-Invois ---------- */
.f5-senarai{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@media(min-width:1000px){.f5-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f5-senarai>.skeleton,.f5-senarai>.x-kosong,.f5-senarai>.f5-kiraan{grid-column:1/-1}
.f5-ei{position:relative;overflow:hidden;background:var(--panel);border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r);box-shadow:var(--bayang-kad);padding:13px 13px 12px 17px;display:flex;flex-direction:column;gap:9px;min-width:0}
.f5-ei::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ts)}
.f5-ei-atas{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.f5-ei-nama{font-size:14.5px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.f5-ei-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-size:12.5px;color:var(--teks3);min-width:0}
.f5-ei-meta>span{min-width:0;overflow-wrap:anywhere}
.f5-ei-meta b{font-size:15px;color:var(--teks)}
.f5-ei .x-nota{padding:9px 11px}
.f5-ei-aksi{display:flex;flex-wrap:wrap;gap:8px;padding-top:9px;border-top:1px solid var(--line-halus);align-items:flex-start}
.f5-ei-aksi .x-btn{flex:1 1 150px}
.f5-ei-aksi>.f5-ab{flex:1 1 auto}
.f5-lagi{flex:1 1 auto;min-width:0}
.f5-lagi>summary{width:100%}
.f5-lagi[open]{flex:1 1 100%}
.f5-lagi-isi{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.f5-lagi-isi .f5-ab{flex:1 1 auto;white-space:normal;text-align:center}
.f5-kiraan{text-align:center;font-size:12px;color:var(--teks3);padding:4px}
#einvDisatukan:empty{display:none}
#einvLagi .x-btn{max-width:none}
#einvDisatukan .x-nota p{margin:0}#einvDisatukan .x-nota p+p{margin-top:5px}
#einvDisatukan .x-nota a{color:inherit;text-decoration:underline;font-weight:700}

/* ---------- Profil Cukai & e-Invois (isi dalam Tetapan) ---------- */
.f5-cukai-isi{display:flex;flex-direction:column;gap:18px;min-width:0}
.f5-cukai-isi input:not([type=checkbox]),.f5-cukai-isi select{min-height:46px;font-size:15px;width:100%;min-width:0}
.f5-cukai-isi .input-group+.input-group,.f5-cukai-isi .input-group input+input{margin-top:6px}
.f5-cukai-isi .borang-grid .input-group{margin-bottom:6px}
.f5-suis{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border-radius:var(--r2);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2);cursor:pointer;min-height:64px}
.f5-suis>input{position:absolute;opacity:0;width:46px;height:30px;left:14px;top:50%;margin:-15px 0 0;cursor:pointer}
.f5-suis-k{position:relative;width:46px;height:26px;border-radius:999px;background:var(--bg3);border:1.5px solid var(--garis-kad);flex:none;transition:background-color var(--pantas)}
.f5-suis-k::after{content:"";position:absolute;left:2px;top:2px;width:19px;height:19px;border-radius:50%;background:var(--teks3);transition:transform var(--pantas),background-color var(--pantas)}
.f5-suis>input:checked ~ .f5-suis-k{background:color-mix(in srgb,var(--hijau) 30%,var(--panel));border-color:var(--hijau)}
.f5-suis>input:checked ~ .f5-suis-k::after{transform:translateX(20px);background:var(--hijau)}
.f5-suis>input:focus-visible ~ .f5-suis-k{outline:2px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.f5-suis-k,.f5-suis-k::after{transition:none}}
.f5-suis-t b{display:block;font-size:14px}
.f5-suis-t small{display:block;font-size:12.5px;color:var(--teks3);line-height:1.5;margin-top:3px}
.f5-suis-st{font-size:12px;font-weight:800}
.f5-suis-st span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px}
.f5-suis-st .hidup{display:none;background:var(--tona-hijau-bg);color:var(--tona-hijau-fg)}
.f5-suis-st .mati{display:inline-flex;background:var(--bdg-neutral-bg);color:var(--bdg-neutral-fg)}
.f5-suis>input:checked ~ .f5-suis-st .hidup{display:inline-flex}
.f5-suis>input:checked ~ .f5-suis-st .mati{display:none}
@media(max-width:480px){.f5-suis{grid-template-columns:auto minmax(0,1fr)}.f5-suis-st{grid-column:2}}
.f5-cukai-isi .f5-bahagian{padding-top:16px;border-top:1px solid var(--line-halus)}
.f5-cukai-aksi{display:flex;flex-wrap:wrap;gap:10px}
.f5-cukai-aksi .x-btn{flex:1 1 200px}
.f5-uji{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r);border:1px solid;font-size:13px}
.f5-uji:empty{display:none}
.f5-uji.ok{background:var(--tona-hijau-bg);color:var(--tona-hijau-fg);border-color:color-mix(in srgb,var(--hijau) 50%,transparent)}
.f5-uji.amaran{background:var(--tona-oren-bg);color:var(--tona-oren-fg);border-color:color-mix(in srgb,var(--oren) 50%,transparent)}
.f5-uji.gagal{background:var(--tona-merah-bg);color:var(--tona-merah-fg);border-color:color-mix(in srgb,var(--merah) 50%,transparent)}
.f5-uji-r{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.f5-uji-r span{min-width:0;overflow-wrap:anywhere}
.f5-dis-bulan{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.f5-dis-bulan>b{font-size:13px}.f5-dis-bulan small{font-weight:600;color:var(--teks3)}
.f5-dis-kad{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--r);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2)}
.f5-dis-n{font-size:11.5px;font-weight:700;color:var(--teks3)}
.f5-dis-baris{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:13.5px}
.f5-dis-meta{font-size:12.5px;color:var(--teks2);line-height:1.6;overflow-wrap:anywhere}
.f5-dis-meta .neg{color:var(--txt-merah)}.f5-dis-meta .amaran{color:var(--txt-oren)}
.f5-dis-kad .x-btn{align-self:flex-start;min-height:44px}

/* ---------- Langganan & Bil ---------- */
.f5-lg-isi{display:flex;flex-direction:column;gap:14px;min-width:0}
.f5-lg-hero{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r2);background:linear-gradient(135deg,var(--tb),color-mix(in srgb,var(--tb) 55%,var(--panel)));color:var(--tf);border:1px solid color-mix(in srgb,var(--ts) 45%,transparent);min-width:0}
.f5-lg-hero-atas{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.f5-lg-hero .x-ikon{width:44px;height:44px;border-radius:14px;font-size:19px;background:color-mix(in srgb,var(--tf) 16%,transparent);color:inherit}
.f5-lg-pelan-n small{display:block;font-size:11.5px;font-weight:700;opacity:.8}
.f5-lg-pelan-n b{display:block;font-size:21px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.f5-lg-hero .f5-chip{background:color-mix(in srgb,var(--tf) 16%,transparent);color:inherit}
.f5-lg-tamat{font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.f5-lg-extra{display:flex;flex-direction:column;gap:10px;min-width:0}
.f5-chiplist{display:flex;flex-wrap:wrap;gap:8px}
.f5-lg-modul{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:600px){.f5-lg-modul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.f5-lg-modul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.f5-modul{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 12px;border-radius:var(--r);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2);font-size:13px;font-weight:600;min-width:0}
.f5-modul>span{min-width:0;overflow-wrap:anywhere}
.f5-modul i{color:var(--hijau);flex:none}
.f5-modul.kunci{color:var(--teks3)}
.f5-modul.kunci i{color:var(--teks3)}
.f5-modul small{margin-left:auto;font-size:11.5px;white-space:nowrap}

/* pilihan pelan */
#page-langganan .lg-pelan-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
@media(min-width:700px){#page-langganan .lg-pelan-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
#page-langganan .lg-pelan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;min-height:44px;border:2px solid var(--garis-kad);border-radius:var(--r2);background:var(--panel2);color:var(--teks);font:inherit;text-align:left;cursor:pointer;transition:scale var(--pantas),border-color var(--pantas),background-color var(--pantas)}
#page-langganan .lg-pelan:active{scale:.98}
#page-langganan .lg-pelan.pilih{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--panel))}
.f5-lg-semak{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-size:12px}
.f5-lg-nama{font-size:15px;font-weight:800;padding-right:30px}
#page-langganan .lg-pelan .lg-harga{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
#page-langganan .lg-pelan .lg-harga small{font-size:12px;font-weight:700;color:var(--teks3)}
.f5-lg-had{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--teks2);font-weight:600}
.f5-lg-had i{color:var(--ts,var(--primary));margin-right:4px}
.f5-lg-ciri{font-size:11.5px;color:var(--teks3);line-height:1.45}
#page-langganan .f5-bh-t,#lgPilihBody .f5-bh-t{margin:14px 0 8px}
.f5-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px;border-radius:14px;background:var(--bg3)}
.f5-seg label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:6px 10px;border-radius:11px;font-size:13.5px;font-weight:800;cursor:pointer;color:var(--teks2);transition:background-color var(--pantas)}
.f5-seg label small{display:block;font-size:11px;font-weight:600;opacity:.85}
.f5-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.f5-seg label:has(input:checked){background:var(--primary);color:var(--on-primary)}
.f5-seg label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.f5-pilih-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:600px){.f5-pilih-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f5-pilih-kad{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 13px;border:2px solid var(--garis-kad);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.f5-pilih-kad input{width:22px;height:22px;flex:none;margin:0}
.f5-pilih-kad b{display:block;font-size:13.5px}
.f5-pilih-kad small{display:block;font-size:12px;color:var(--teks3)}
.f5-pilih-kad:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--panel))}
.f5-resit{margin:14px 0;padding:13px 14px;border:1.5px dashed var(--garis-kad);border-radius:var(--r);background:var(--panel2);min-width:0}
.f5-resit-t{font-size:13px;font-weight:800;color:var(--teks2);margin-bottom:6px;display:flex;gap:8px;align-items:center}
.f5-resit .lg-baris{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--garis-kad);font-size:13px}
.f5-resit .lg-baris>span:first-child{min-width:0;overflow-wrap:anywhere}
.f5-resit .lg-baris.jimat{color:var(--txt-hijau)}
.f5-resit .lg-baris.jumlah{border-bottom:0;padding-top:11px;font-size:17px;font-weight:800}
.f5-resit .lg-baris .f5-num{flex:none}
.f5-langkah{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:14px}
.f5-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:13px;font-weight:800;flex:none}
.f5-qr-kad{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;border-radius:var(--r2);background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);text-align:center}
.f5-qr-kad small{font-size:12px;color:var(--teks3);font-weight:700}
.f5-qr-kad p{margin:0;font-size:13px;color:var(--teks2)}
#page-langganan .lg-jumlah-besar{font-size:30px;font-weight:800;margin:2px 0}
#page-langganan .lg-qr{max-width:240px;width:100%;margin:8px auto}
#page-langganan #lgBayarBody .input-group input[type=file]{min-height:46px;padding:9px}
#page-langganan .input-group input,#page-langganan .input-group select{min-height:46px;font-size:15px}
#page-langganan .input-group{margin-bottom:10px}
#page-langganan .input-group label small{font-weight:500;color:var(--teks3)}
#page-langganan .x-nota{margin:8px 0}
.f5-lg-bil-senarai{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:900px){.f5-lg-bil-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f5-lg-bil{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:12px 13px 12px 17px;border-radius:var(--r);border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2);min-width:0}
.f5-lg-bil::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ts)}
.f5-lg-bil-atas{display:flex;justify-content:space-between;align-items:center;gap:8px}
.f5-lg-bil-atas b{font-size:17px}
.f5-lg-bil-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--teks2)}
.f5-lg-bil-meta i{margin-right:5px;color:var(--ts)}
.f5-lg-bil .f5-aksi{padding-top:8px;border-top:1px solid var(--line-halus)}
.f5-lg-bil .x-nota{margin:0}
.f5-wa-kad{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r2);border:1px solid color-mix(in srgb,var(--ts) 45%,transparent);background:color-mix(in srgb,var(--tb) 35%,var(--panel));margin-top:12px;min-width:0}
.f5-wa-kad:first-of-type{margin-top:12px}
.f5-wa-atas{display:flex;flex-wrap:wrap;gap:8px}
.f5-wa-kad .input-group{margin:0}
.f5-wa-kad .f5-aksi .x-btn{flex:1 1 150px}
.f5-wa-kad>.x-btn{align-self:flex-start}
.f5-cadang{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);background:var(--tona-biru-bg);color:var(--tona-biru-fg);margin-top:10px}
.f5-cadang small{display:block;font-size:11.5px;opacity:.85}
.f5-cadang b{font-size:16px}
.f5-cadang .x-ikon{background:color-mix(in srgb,var(--tona-biru-fg) 16%,transparent);color:inherit}
#lgPilihBody .lg-pilih-senarai{margin:0 0 6px}

/* ---------- masuk (transform/opacity sahaja) ---------- */
@keyframes f5Naik{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:no-preference){
  .f5-kad-masuk{animation:f5Naik .24s ease-out both}
  .lk-pane.aktif .f5-st,.lk-pane.aktif .f5-grp{animation:f5Naik .24s ease-out both}
}
.f5-lebar .mk-kaki-lekat .x-btn{white-space:nowrap}
.f5-lebar .mk-kaki-lekat .x-btn[data-tutup]{flex:0 0 auto}