/* =========================================================
   Popup A (aliran repair) — melengkapi gaya mk-* dalam ui.css
   Awalan: pa-. Hanya token tema; transform/opacity sahaja untuk animasi.
   Skop: #modalDetail #modalEdit #modalStatus #modalBayar #modalHargaAkhir
   #modalSerah #modalCetak #modalTagRepair #modalTagFilter #modalBulkStatus
   #modalBulkBayar #modalQc #modalQcLog #modalQuickParts #modalNotifRepair
   #modalChat #modalAssign #modalPilihWA #modalKongsiResit #modalAckStatus
   #modalInvoisPembeli
   ========================================================= */

/* Gaya "asal": token tona belum wujud (hanya ceria/pastel menetapkannya) — pinjam token chip supaya
   kepala & bahagian berwarna tetap terpapar. Skop popup A sahaja. */
html:not([data-gaya]) .pa-modal{
  --tona-biru-bg:var(--bdg-biru-bg);--tona-biru-fg:var(--bdg-biru-fg);
  --tona-hijau-bg:var(--bdg-hijau-bg);--tona-hijau-fg:var(--bdg-hijau-fg);
  --tona-oren-bg:var(--bdg-oren-bg);--tona-oren-fg:var(--bdg-oren-fg);
  --tona-kuning-bg:var(--bdg-kuning-bg);--tona-kuning-fg:var(--bdg-kuning-fg);
  --tona-ungu-bg:var(--bdg-ungu-bg);--tona-ungu-fg:var(--bdg-ungu-fg);
  --tona-merah-bg:var(--bdg-merah-bg);--tona-merah-fg:var(--bdg-merah-fg);
  --tona-cyan-bg:var(--bdg-cyan-bg);--tona-cyan-fg:var(--bdg-cyan-fg)}

/* ---------- asas kongsi ---------- */
.pa-modal{overflow-x:hidden}
.pa-modal .mk-mh h3{flex-wrap:wrap;row-gap:2px}
.pa-modal .mk-mh .mono{color:inherit;opacity:.85;font-size:13px}
.pa-modal .modal-isi{overflow-x:hidden;-webkit-overflow-scrolling:touch}
.pa-modal .modal-isi>*{min-width:0}
.pa-modal .modal-isi label{overflow-wrap:anywhere}

/* Medan teratas (bukan dalam bahagian) dijadikan kad seragam */
.pa-modal .modal-isi>.input-group:not(.hidden){background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px;padding:12px;margin:0}
.pa-modal .modal-isi>.input-group[style*="margin-top"]{margin-top:0!important}
.pa-modal .modal-isi>.input-group.hidden{display:none}

/* Dalam bahagian bertajuk: buang jarak sebaris yang lama */
.pa-modal .mk-sek-b .input-group{margin:0!important}
.pa-modal .mk-sek-b>[style*="margin-top"]{margin-top:0!important}
.pa-modal .mk-sek .baris-detail{background:var(--bg3);color:var(--teks)}
.pa-modal .mk-sek .baris-detail b{color:var(--teks);text-align:right;overflow-wrap:anywhere;min-width:0}
.pa-modal .mk-sek .baris-detail span{color:var(--teks3)}
.pa-modal .mk-sek-b input:not([type=checkbox]):not([type=radio]):not([type=file]),
.pa-modal .mk-sek-b select{min-height:46px;font-size:15px;width:100%;min-width:0}
.pa-modal .mk-sek-b textarea{font-size:15px;width:100%;min-width:0}
.pa-modal .modal-isi input[type=checkbox],.pa-modal .modal-isi input[type=radio]{width:22px!important;height:22px;min-height:0!important;flex:none;accent-color:var(--primary)}

/* Kaki melekat: butang berlabel, sasaran sentuh >=44px */
.pa-modal .mk-kaki-lekat{flex-wrap:wrap}
.pa-modal .mk-kaki-lekat .btn{min-height:46px;min-width:0;border-radius:12px;font-weight:800;gap:8px;justify-content:center;white-space:normal;line-height:1.25;text-align:center;padding-top:8px;padding-bottom:8px}
.pa-modal .mk-kaki-lekat .btn:active{transform:scale(.96)}
.pa-modal .mk-kaki-lekat:empty{display:none}
.pa-modal .btn-kecil{min-height:44px}

/* Ralat/info dalam modal */
.pa-modal .modal-isi>.alert{margin:0!important;border-radius:12px!important}

/* ---------- Detail Repair: Terima -> Kerja -> Serah ---------- */
#modalDetail .mk-modal,#modalDetail .pa-modal{max-width:760px}
#mdBody{gap:12px;padding:12px}
#modalDetail .mk-mh h3{font-size:16px}
#mdNotifBadge{border-radius:999px!important}

/* ringkasan status & warranty di atas fasa */
#mdBody>.detail-seksyen{margin:0}
#mdBody .detail-seksyen{background:var(--panel2);border:1px solid var(--line-halus);border-radius:14px;padding:11px 12px;margin:0 0 10px}
#mdBody .detail-seksyen:last-child{margin-bottom:0}
#mdBody .detail-seksyen h4{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.9px;color:var(--teks2);margin:0 0 8px;padding:0 0 7px;border-bottom:1px solid var(--line-halus)}
#mdBody .detail-seksyen h4 i{color:var(--txt-cyan)}
#mdBody .baris-detail{align-items:center;padding:8px 0;min-width:0;background:transparent;border-radius:0;border-bottom:1px solid var(--line-halus)}
#mdBody .baris-detail:last-child{border-bottom:0}
#mdBody .baris-detail b{color:var(--teks)}
#mdBody>.alert,#mdBody .fasa-isi>.alert{display:block;margin:0!important}
#mdBody .baris-detail b{min-width:0;overflow-wrap:anywhere}

#mdBody .fasa{--tb:var(--tona-biru-bg);--tf:var(--tona-biru-fg);--ts:var(--biru);
  border:var(--tebal-garis) solid var(--garis-kad);border-left:4px solid var(--ts);border-radius:16px;
  background:var(--panel);box-shadow:var(--bayang-kad);margin:0;overflow:hidden;min-width:0}
#mdBody .fasa.f1{--tb:var(--tona-biru-bg);--tf:var(--tona-biru-fg);--ts:var(--biru)}
#mdBody .fasa.f2{--tb:var(--tona-oren-bg);--tf:var(--tona-oren-fg);--ts:var(--oren)}
#mdBody .fasa.f3{--tb:var(--tona-hijau-bg);--tf:var(--tona-hijau-fg);--ts:var(--hijau)}
#mdBody .fasa-kepala{background:var(--tb);color:var(--tf);min-height:60px;padding:10px 12px;touch-action:manipulation;transition:filter .15s ease-out}
#mdBody .fasa-kepala:active{filter:brightness(.94)}
#mdBody .fasa-no{background:var(--ts);color:var(--on-primary);width:32px;height:32px;font-size:15px}
#mdBody .fasa-tajuk b{font-size:15px;color:var(--tf);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
#mdBody .fasa-tajuk span{color:var(--tf);opacity:.8}
#mdBody .fasa-tajuk .fasa-semasa{opacity:1;background:var(--ts);color:var(--on-primary)}
#mdBody .fasa-kira{background:color-mix(in srgb,var(--tf) 14%,transparent);color:var(--tf);padding:3px 10px;border-radius:999px;font-weight:800}
#mdBody .fasa-anak{color:var(--tf)}
#mdBody .fasa-isi{padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
#mdBody .fasa-isi>*{flex-shrink:0;min-width:0}
#mdBody .fasa-isi .detail-seksyen{background:var(--bg2,var(--panel2))}
#mdBody .fasa.tutup .fasa-isi{display:none}
@media(prefers-reduced-motion:no-preference){
  #mdBody .fasa:not(.tutup) .fasa-isi{animation:paBuka .22s ease-out both}
}
@keyframes paBuka{from{opacity:0;transform:translateY(-4px)}}

/* jadual/imej tidak melebihi lebar */
#mdBody img,#mdBody table{max-width:100%}
#mdBody .fq-jadual{display:block;overflow-x:auto}

/* kaki Detail: 2-3 butang UTAMA berlabel + "Semua tindakan" yang membuka lembaran grid
   (#mdAksi, butang asal dalam DOM). Tiada leret mendatar. */
#mdFoot.mk-kaki-lekat{justify-content:center;gap:8px;padding-top:10px;flex-wrap:nowrap;overflow:visible}
#mdFoot>.btn{flex:1 1 0;min-width:0;font-size:13px}
#mdFoot .pa-ft-lagi{background:var(--panel2);color:var(--txt-cyan);border:1.5px solid var(--garis-kad)}
#mdFoot .pa-aksi{position:absolute;left:0;right:0;bottom:100%;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 12px 10px;
  background:var(--panel);border-top:1px solid var(--line-halus);border-radius:18px 18px 0 0;box-shadow:0 -10px 28px rgba(0,0,0,.28);max-height:60vh;overflow-y:auto}
#mdFoot .pa-aksi.hidden{display:none!important}
#mdFoot .pa-aksi .btn,#mdFoot .pa-aksi .btn[style]{width:auto!important;height:auto!important;min-width:0!important;min-height:72px;flex:none;padding:8px 2px!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px;
  background:var(--panel2);border:1px solid var(--garis-kad);color:var(--teks);font-size:11px;font-weight:700;line-height:1.2;white-space:normal;overflow-wrap:break-word;hyphens:manual;text-align:center}
#mdFoot .pa-aksi .btn i{font-size:19px;color:var(--txt-cyan)}
#mdFoot .pa-aksi .btn-hijau i{color:var(--hijau)}
#mdFoot .pa-aksi .btn-merah i,#mdFoot .pa-aksi [data-batalrepair] i{color:var(--txt-merah)}
#mdFoot .pa-aksi .btn[aria-label]:not([data-assign])::after{content:attr(aria-label)}
#mdFoot .pa-aksi .btn:active{transform:scale(.95)}
#mdFoot .pa-aksi .badge{top:2px!important;right:6px!important}
@media(prefers-reduced-motion:no-preference){#mdFoot .pa-aksi:not(.hidden){animation:paAksiNaik .2s ease-out}}
@keyframes paAksiNaik{from{opacity:0;transform:translateY(10px)}}
@media(max-width:360px){#mdFoot .pa-aksi{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Detail: baris label-nilai, cip, lencana — tiada potong/bertindih ---------- */
#mdBody .baris-detail>span:first-child{flex:0 0 auto;max-width:60%;min-width:0}
#mdBody .baris-detail>span:last-child:not(:first-child){flex:0 1 auto;max-width:100%;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 8px;text-align:right}
#mdBody .baris-detail>b{flex:1 1 0;text-align:right}
#mdBody .badge{white-space:nowrap;overflow:visible;text-overflow:clip;flex:0 0 auto}
#mdBody .tg-cip,#mdBody .x-cip{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;line-height:1.35;min-height:0;text-align:left;border-radius:14px;padding-top:3px;padding-bottom:3px}
/* nilai ialah senarai cip: label di atas, cip berbalut lebar penuh */
#mdBody .baris-detail.pa-baris-cip{flex-direction:column;align-items:stretch;gap:6px}
#mdBody .baris-detail.pa-baris-cip>span{max-width:100%}
#mdBody .baris-detail.pa-baris-cip>.tg-baris{display:flex;text-align:left;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-start;gap:6px;max-width:100%;width:100%}
#mdBody .baris-detail.pa-part{align-items:stretch;justify-content:flex-start;padding:10px 12px;margin:0 0 8px;border:1px solid var(--line-halus);border-radius:14px;background:var(--bg2)}
#mdBody .baris-detail.pa-part:last-child{border:1px solid var(--line-halus)}
#mdBody .baris-detail.pa-baris-cip>.tg-baris{justify-content:flex-start!important}
/* QC: tajuk+lencana / meta / butang sebaris */
#mdBody .pa-qc-baris{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-bottom:0}
#mdBody .pa-qc-meta{font-size:11.5px;color:var(--teks3);line-height:1.4;overflow-wrap:anywhere}
#mdBody .qc-ringkas{overflow-wrap:anywhere}
#mdBody .pa-qc-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#mdBody .pa-qc-aksi:empty{display:none}
#mdBody .pa-qc-aksi .btn{flex:0 0 auto}
/* Borang Persetujuan */
#bfPanel .ka-gambar{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
#bfPanel .ka-jubin.ka-tambah,#bfPanel button.ka-tambah{aspect-ratio:auto;grid-column:1/-1;width:100%;min-height:52px;flex-direction:row;gap:8px;font-size:13.5px;border-radius:12px;background:var(--bg3)}
#bfPanel .ps-cetak-baris{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#bfPanel .ps-cetak-baris>.btn{min-width:0;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
#bfPanel .ps-cetak-baris>[data-bfcetak]{grid-column:1/-1}
#bfPanel .ps-lebar{grid-column:1/-1;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--garis-kad);border-radius:12px;overflow:hidden}
#bfPanel .ps-lebar .btn{border-radius:0;border:0;min-height:44px;justify-content:center;box-shadow:none}
#mdBody .ka-nota-kecil,#mdBody .ps-nota,#mdBody .ps-kunci-nota{overflow-wrap:anywhere;line-height:1.4}

/* ---------- Status / Bayar / Serah ---------- */
#modalStatus .mk-modal,#modalSerah .mk-modal,#modalBayar .mk-modal{max-width:560px}
#modalSerah #svBayarWrap,#modalSerah #svInvoisWrap:not(.hidden),
#modalStatus #msTagKerjaWrap:not(.hidden){position:relative}
#modalSerah #svBayarWrap{background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-left:4px solid var(--hijau);border-radius:14px;padding:0 12px 12px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
#modalSerah #svBayarWrap::before{content:"Bayaran";display:block;margin:0 -12px;padding:9px 12px;background:var(--tona-hijau-bg,var(--bg3));color:var(--tona-hijau-fg,var(--teks));font-size:13px;font-weight:800}
#modalSerah #svBayarWrap .input-group{margin:0!important}
#modalSerah #svInvoisWrap{background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px;padding:12px;margin:0!important}
#modalSerah #svInvoisWrap label{min-height:44px}
#modalSerah #svAddonWrap:empty,#modalSerah #svInvoisSiap:empty{display:none}
#modalSerah #svGunaPartWrap>div,#modalStatus #msGunaPartWrap>div{border-radius:12px}
#modalSerah #svGunaPartWrap label,#modalStatus #msGunaPartWrap label{min-height:44px}
#modalSerah .borang-grid,#modalInvoisPembeli .borang-grid{gap:11px}
#modalSerah .borang-grid .input-group,#modalInvoisPembeli .borang-grid .input-group{margin:0}
#modalBayar .pantas button{min-height:40px;padding:6px 14px;font-size:13px}
#modalBayar #mbBaki,#modalSerah #svBaki{font-size:16px;font-weight:800}
#modalBayar .mk-sek-b>.pantas{margin:0}
#modalStatus #msTemplat button,#modalStatus #msTemplat .btn{min-height:40px}

/* ---------- Harga Akhir ---------- */
#modalHargaAkhir .mk-modal{max-width:460px}
#modalHargaAkhir #haNilai{font-size:22px;font-weight:800;text-align:center;min-height:56px}

/* ---------- Cetak ---------- */
#modalCetak .cetak-pilih{gap:10px;margin-bottom:0}
#modalCetak .cetak-jenis{min-height:84px;border-radius:14px;background:var(--panel2);transition:transform .15s ease-out,border-color .15s ease-out}
#modalCetak .cetak-jenis:active{transform:scale(.95)}
#modalCetak .cetak-jenis.aktif{border-color:var(--biru);background:var(--tona-biru-bg)}
#modalCetak .cetak-jenis.aktif i,#modalCetak .cetak-jenis.aktif b{color:var(--tona-biru-fg)}
#modalCetak .cetak-pratonton{border-radius:14px;overflow:auto;max-width:100%}
#modalCetak .modal-isi>div[style*="font-size:11.5px"]{margin:0!important;line-height:1.5}

/* ---------- Tag ---------- */
#modalTagRepair .tg-pilih,#modalTagFilter .tg-pilih{background:var(--panel);border-radius:12px}
#modalTagRepair .input-group>label,#modalTagFilter .input-group>label{display:block;margin-bottom:8px}

/* ---------- Pukal ---------- */
#modalBulkStatus #bsSenarai{margin:0!important;border-radius:12px;max-height:150px}
#modalBulkBayar .mk-sek-b>div[style*="display:flex"]{margin-bottom:0!important}
#modalBulkBayar #bbSenarai{max-height:min(300px,40dvh);border-radius:12px}
#modalBulkBayar .mk-sek-b>div[style*="margin:4px 0 0 26px"]{margin:0!important}
#modalBulkBayar .mk-sek-b>label{margin:0!important;min-height:44px}
#modalBulkBayar #bbJumlah{font-size:18px}

/* ---------- QC ---------- */
#modalQc .mk-modal,#modalQcLog .mk-modal{max-width:720px}
#modalQc #qcDrafBanner:not(.hidden){margin:0!important;border-radius:12px!important}
#modalQc .qc-kemajuan{margin:0}
#modalQc #qcLangkah,#modalQc #qcChecklistWrap{margin-top:0!important}
#modalQc #qcChecklistWrap>.input-group{margin-top:12px!important}
#modalQcLog .modal-isi{gap:10px}

/* ---------- Part sampai terus guna ---------- */
#modalQuickParts .mk-sek-b>label{margin:0!important;min-height:44px;align-items:center}
#modalQuickParts .mk-sek-b>label[style*="display:none"]{display:none}
#modalQuickParts .mk-sek-b .borang-grid{gap:11px}
#modalQuickParts #qpHasil{border-radius:12px}
#modalQuickParts #qpDipilihInfo,#modalQuickParts #qpBaharuInfo{margin:0!important;border-radius:12px!important}
#modalQuickParts #qpPratonton{margin:0;border-radius:12px}

/* ---------- Notifikasi / Chat / Ack / Pilih WA / Kongsi ---------- */
#modalChat #chatSenarai{max-height:min(340px,42dvh)!important;margin-bottom:0!important;padding:10px!important;background:var(--panel2);border-radius:14px;border:var(--tebal-garis) solid var(--garis-kad)}
#modalChat .modal-isi>.input-group{padding:0;background:none;border:0}
#modalChat #chatMesej{min-height:84px}
#modalChat #chatUntukBossWrap{min-height:44px;padding:8px 10px;border-radius:12px;background:var(--panel2)}
#modalKongsiResit #kongsiResitTeks{min-height:220px}
#modalKongsiResit .modal-isi>.input-group{padding:12px}
#modalPilihWA .mk-modal,#modalKongsiResit .mk-modal{max-width:520px}
#waPilihBody>*{min-width:0}
#waPilihBody button,#waPilihBody .btn{min-height:46px;border-radius:12px}
#notifRepairSenarai,#qcLogSenarai,#ackBody{min-width:0}
#ackBody .btn,#ackBody button{min-height:44px}
#modalAssign .mk-modal{max-width:520px}
#modalAssign #btnBatalAssign{color:var(--txt-merah)}
#modalInvoisPembeli .mk-modal{max-width:640px}
#modalInvoisPembeli .modal-isi>label{margin:0!important;padding:10px 12px;border-radius:12px;background:var(--panel2);border:var(--tebal-garis) solid var(--garis-kad)}
#modalInvoisPembeli .modal-isi>div[style*="font-size:12.5px"]{margin:0!important;padding:10px 12px;border-radius:12px;background:var(--tona-biru-bg);color:var(--tona-biru-fg)}

/* ---------- Edit ---------- */
#modalEdit .mk-modal{max-width:760px}
#meBody{gap:12px}
#meBody .borang-grid{gap:12px}
#meBody .borang-grid>.input-group{margin:0;min-width:0}
#meBody .borang-grid>.input-group.span2{grid-column:1/-1}
#meBody input:not([type=checkbox]):not([type=radio]):not([type=file]),#meBody select{min-height:46px;font-size:15px;width:100%;min-width:0}
#meBody textarea{font-size:15px;width:100%;min-width:0;min-height:76px}
#meBody .ka-cip{min-height:44px}

/* ---------- Telefon: 1 lajur, tiada lebihan lebar ---------- */
@media(max-width:600px){
  .pa-modal .borang-grid{grid-template-columns:minmax(0,1fr)}
  .pa-modal .borang-grid>.span2{grid-column:auto}
}