/* ==========================================================================
   Panel Pentadbir Agensi — tab, sub-tab, tapisan, kad, jadual
   ========================================================================== */

/* --------------------------------------------------------------- kepala */
.pn-kepala{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.pn-lencana{
  display:inline-block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal, #005C83);
  background:#EAF3F8;
  border-radius:4px;
  padding:3px 8px;
  margin-bottom:8px;
}

.pn-kepala-teks h1{
  margin:0 0 2px;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
}

.pn-kepala-teks p{
  margin:0;
  font-size:12.5px;
  color:var(--ink-3);
}

.pn-tarikh{
  font-size:11.5px;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ----------------------------------------------------------------- tabs */
.pn-tabs{
  display:flex;
  gap:2px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.pn-tabs::-webkit-scrollbar{display:none}

.pn-tab{
  appearance:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:11px 16px;
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-3);
  cursor:pointer;
  white-space:nowrap;
  transition:color .16s var(--ease), border-color .16s var(--ease);
  margin-bottom:-1px;
}

.pn-tab:hover{color:var(--ink)}

.pn-tab.aktif{
  color:var(--navy);
  border-bottom-color:var(--navy);
  font-weight:600;
}

.pn-tab:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:-2px;
  border-radius:4px 4px 0 0;
}

/* ------------------------------------------------------------- sub-tabs */
.pn-subnav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.pn-sub{
  appearance:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  font:inherit;
  font-size:12px;
  font-weight:500;
  color:var(--ink-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:all .16s var(--ease);
}

.pn-sub:hover{border-color:var(--sempadan-2, #D4D9E4);background:#FAFBFE}

.pn-sub.aktif{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  font-weight:600;
}

.pn-sub-bil{
  display:inline-block;
  min-width:18px;
  padding:0 5px;
  height:17px;
  line-height:17px;
  border-radius:9px;
  background:#EEF1F8;
  color:var(--ink-3);
  font-size:10.5px;
  font-weight:600;
  text-align:center;
}

.pn-sub.aktif .pn-sub-bil{
  background:rgba(255,255,255,.22);
  color:#fff;
}

.pn-sub:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------------------------------------------------------- kad ringkas */
.kad-ringkas--4{grid-template-columns:repeat(4,1fr)}
.kad-ringkas--3{grid-template-columns:repeat(3,1fr)}

.kr-kad.kr-merah{
  border-color:#F2D4D4;
  background:#FFF8F8;
}

.kr-kad.kr-merah .kr-nilai{color:#A32020}

/* -------------------------------------------------------- kotak tapisan */
.tapis-kotak{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px 14px;
  margin-bottom:18px;
}

.tk-kepala{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.tk-kepala strong{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.01em;
}

.tk-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px 14px;
}

.tk-grid--dua{grid-template-columns:repeat(2, minmax(0,1fr))}
.tk-grid--tiga{grid-template-columns:repeat(3, minmax(0,1fr))}

.tk-grid .medan{margin-bottom:0}

.tk-butang{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
  padding-top:13px;
  border-top:1px dashed #E9EDF5;
}

.btn-teks{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:11.5px;
  color:var(--teal, #005C83);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

.btn-teks:hover{color:var(--navy)}

/* ----------------------------------------------------------- jadual nota */
.jadual-lebar{min-width:1000px}

.jadual-nota{
  margin:10px 0 0;
  font-size:11.5px;
  color:var(--ink-3);
}

.jadual-nota strong{
  color:var(--ink-2);
  font-weight:600;
}

/* ------------------------------------------------------------------ pil */
.pil{
  display:inline-block;
  padding:3px 9px;
  border-radius:20px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}

.pil-hijau{background:#E8F6EE;color:#1A6B41}
.pil-amber{background:#FFF4DC;color:#8A6D00}
.pil-biru{background:#E9EEFB;color:#25358C}
.pil-kelabu{background:#F1F3F8;color:#5A6178}

/* --------------------------------------------------------- nota kotak */
.nota-kotak{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#F5F8FD;
  border:1px solid #DCE6F5;
  border-radius:10px;
  padding:13px 16px;
  margin-bottom:18px;
}

.nota-kotak svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  margin-top:1px;
  fill:none;
  stroke:var(--teal, #005C83);
  stroke-width:1.7;
  stroke-linecap:round;
}

.nota-kotak strong{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.nota-kotak p{
  margin:0;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink-3);
}

.nota-kotak em{font-style:normal;font-weight:600;color:var(--ink-2)}

/* ============================================================== trend */
.trend-bekas{
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.tr-baris{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 88px;
  gap:12px;
  align-items:center;
}

.tr-label{
  font-size:11px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.tr-bar{
  height:9px;
  background:#F0F3F9;
  border-radius:5px;
  overflow:hidden;
  display:block;
}

.tr-bar i{
  display:block;
  height:100%;
  background:var(--navy);
  border-radius:5px;
  transition:width .3s var(--ease);
}

.tr-nilai{
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-2);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------- ringkasan pengguna */
.ringkas-pengguna{
  padding:16px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.rp-baris{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  font-size:12.5px;
  color:var(--ink-2);
}

.rp-baris strong{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ======================================================== borang agensi */
.borang-pn{padding:20px 22px 22px}

.bp-kumpulan{
  padding:0 0 20px;
  margin-bottom:20px;
  border-bottom:1px solid #EEF0F7;
}

.bp-kumpulan:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}

.bp-kumpulan h3{
  margin:0 0 14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}

.borang-tiga{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0 16px;
}

.bp-logo{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

.bp-logo-kotak{
  width:92px;
  height:92px;
  flex:0 0 auto;
  border:1px dashed #D4DAE8;
  border-radius:9px;
  background:#FAFBFE;
  display:grid;
  place-items:center;
  padding:10px;
}

.bp-logo-kotak img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.bp-logo .hint{margin:6px 0 0}

.bp-butang{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:18px;
  margin-top:20px;
  border-top:1px solid #EEF0F7;
}

/* ==================================================== hubungi kami */
.hk-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.hk-kad{
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.hk-kad.hk-lalai{background:#FAFBFD;border-style:dashed}

.hk-atas{
  display:flex;
  align-items:center;
  gap:11px;
}

.hk-avatar{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:50%;
  background:#EEF1F9;
  color:var(--navy);
  display:grid;
  place-items:center;
  font-size:12.5px;
  font-weight:600;
}

.hk-teks{
  min-width:0;
  flex:1 1 auto;
}

.hk-teks strong{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
}

.hk-teks span{
  display:block;
  font-size:11.5px;
  color:var(--ink-3);
  margin-top:1px;
}

.hk-senarai{
  margin:0;
  display:grid;
  gap:7px;
}

.hk-senarai > div{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:10px;
  align-items:baseline;
}

.hk-senarai dt{
  font-size:11px;
  color:var(--ink-3);
}

.hk-senarai dd{
  margin:0;
  font-size:12px;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}

.hk-senarai dd.mono{
  font-family:ui-monospace, Consolas, monospace;
  font-size:11.5px;
  letter-spacing:.02em;
}

.hk-butang{
  display:flex;
  gap:8px;
  padding-top:11px;
  border-top:1px solid #F0F2F8;
  margin-top:auto;
}

/* ========================================================= berita mini */
.br-mini{
  width:44px;
  height:32px;
  object-fit:cover;
  border-radius:4px;
  display:block;
}

.br-mini--kosong{
  display:block;
  background:#EEF1F7;
  border:1px dashed #D8DEE9;
}

/* ============================================================== banner */
.bn-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.bn-kad{
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.bn-kad.bn-lalai{opacity:.72}

.bn-gambar{
  position:relative;
  aspect-ratio:16 / 7;
  background:#EEF1F7;
  overflow:hidden;
}

.bn-gambar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bn-nombor{
  position:absolute;
  top:10px;
  left:10px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(27,29,58,.72);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:600;
}

.bn-tanda{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(27,29,58,.72);
  color:#fff;
  font-size:10px;
  font-weight:600;
  padding:3px 8px;
  border-radius:4px;
}

.bn-isi{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1 1 auto;
}

.bn-isi strong{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
}

.bn-isi p{
  margin:0;
  font-size:11.5px;
  line-height:1.55;
  color:var(--ink-3);
}

.bn-meta{
  font-size:11px;
  color:var(--ink-3);
  margin-top:2px;
}

.bn-butang{
  display:flex;
  gap:8px;
  padding-top:11px;
  margin-top:auto;
  border-top:1px solid #F0F2F8;
}

/* ============================================================ muat naik */
.muat-kotak{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px dashed #CCD6E8;
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:18px;
}

.mk-ikon{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:10px;
  background:#EEF3FC;
  display:grid;
  place-items:center;
}

.mk-ikon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mk-teks{
  flex:1 1 auto;
  min-width:0;
}

.mk-teks strong{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.mk-teks p{
  margin:0;
  font-size:11.5px;
  color:var(--ink-3);
}

/* ============================================================ responsif */
@media (max-width:1080px){
  .kad-ringkas--4{grid-template-columns:repeat(2,1fr)}
  .hk-grid{grid-template-columns:repeat(2,1fr)}
  .bn-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  .tk-grid,
  .tk-grid--tiga{grid-template-columns:repeat(2, minmax(0,1fr))}
  .borang-tiga{grid-template-columns:repeat(2, minmax(0,1fr))}
  .hk-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:700px){
  .pn-kepala{flex-direction:column;align-items:flex-start;gap:8px}
  .kad-ringkas,
  .kad-ringkas--3,
  .kad-ringkas--4{grid-template-columns:minmax(0,1fr)}
  .tk-grid,
  .tk-grid--dua,
  .tk-grid--tiga{grid-template-columns:minmax(0,1fr)}
  .borang-tiga{grid-template-columns:minmax(0,1fr)}
  .akaun-dua{grid-template-columns:minmax(0,1fr)}
  .muat-kotak{flex-wrap:wrap}
  .mk-teks{flex-basis:calc(100% - 58px)}
  .muat-kotak .btn-utama{width:100%}
  .bp-logo{flex-wrap:wrap}
  .tr-baris{grid-template-columns:32px minmax(0,1fr) 74px;gap:9px}
  .pn-tab{padding:10px 13px;font-size:12px}
}

/* -------------------------------------------------------------- tema gelap */
html[data-tema="gelap"] .tapis-kotak,
html[data-tema="gelap"] .hk-kad,
html[data-tema="gelap"] .bn-kad,
html[data-tema="gelap"] .muat-kotak,
html[data-tema="gelap"] .nota-kotak{
  background:var(--kad, #1A1D2E);
  border-color:var(--sempadan, #2C3145);
}

html[data-tema="gelap"] .hk-kad.hk-lalai{background:#161928}

html[data-tema="gelap"] .nota-kotak{
  background:#151A2A;
  border-color:#26304A;
}

html[data-tema="gelap"] .pn-sub{
  background:var(--kad, #1A1D2E);
  border-color:var(--sempadan, #2C3145);
  color:var(--teks-2, #B9BFD4);
}

html[data-tema="gelap"] .pn-sub-bil{background:#252A3E;color:#9AA2BC}

html[data-tema="gelap"] .tr-bar{background:#252A3E}

html[data-tema="gelap"] .pil-hijau{background:#14321F;color:#7BD6A5}
html[data-tema="gelap"] .pil-amber{background:#332A12;color:#E8C877}
html[data-tema="gelap"] .pil-biru{background:#1C2440;color:#9FB0EE}
html[data-tema="gelap"] .pil-kelabu{background:#242940;color:#A9B0C4}

html[data-tema="gelap"] .kr-kad.kr-merah{background:#231618;border-color:#4A2A2E}
html[data-tema="gelap"] .kr-kad.kr-merah .kr-nilai{color:#E89090}

html[data-tema="gelap"] .hk-avatar{background:#252A3E;color:#A9B6E8}
html[data-tema="gelap"] .bp-logo-kotak{background:#151928;border-color:#2C3145}
html[data-tema="gelap"] .mk-ikon{background:#1C2440}
html[data-tema="gelap"] .pn-lencana{background:#152736;color:#7FB8D8}
html[data-tema="gelap"] .br-mini--kosong{background:#242940;border-color:#333A52}
html[data-tema="gelap"] .bp-kumpulan{border-color:#262B3F}
html[data-tema="gelap"] .hk-butang,
html[data-tema="gelap"] .bn-butang{border-color:#262B3F}
html[data-tema="gelap"] .tk-butang{border-color:#262B3F}
html[data-tema="gelap"] .bp-butang{border-color:#262B3F}

/* butang borang jangan meregang */
.bp-butang .btn-utama,
.bp-butang .btn-garis{
  flex:0 0 auto;
  width:auto;
  min-width:132px;
  white-space:nowrap;
}

.bp-kumpulan .medan:last-child{margin-bottom:0}

/* jadual penyesuaian — elak teks pecah dua baris */
.jadual-lebar{min-width:1120px}
.jadual-lebar thead th,
.jadual-lebar tbody td{
  white-space:nowrap;
  padding-left:11px;
  padding-right:11px;
}
.jadual-lebar tbody td:first-child{white-space:normal}
.jadual-lebar .sel-sub{
  display:block;
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==================================================== modal borang */
.borang-modal{
  width:100%;
  max-width:640px;
  background:var(--kad, #fff);
  border-radius:13px;
  box-shadow:0 24px 60px rgba(12,15,40,.32);
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 96px);
}

.bm-kepala{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 16px;
  border-bottom:1px solid #EEF0F7;
  flex:0 0 auto;
}

.bm-kepala h2{
  margin:0 0 2px;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
}

.bm-kepala span{
  display:block;
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-3);
}

.bm-badan{
  padding:20px 22px 4px;
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
}

.bm-badan .medan{margin-bottom:15px}
.bm-badan .borang-dua{margin-bottom:0}

.bm-kaki{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 22px 18px;
  border-top:1px solid #EEF0F7;
  flex:0 0 auto;
}

.bm-kaki .btn-garis,
.bm-kaki .btn-utama{
  flex:0 0 auto;
  min-width:104px;
  justify-content:center;
}

.bm-badan .ralat,
.borang-modal .ralat{
  margin:0 22px;
  font-size:12px;
  color:#B3261E;
  min-height:0;
}

.bm-amaran{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-2);
}

.bm-amaran strong{color:var(--ink);font-weight:600}

/* ------------------------------------------------ suis toggle */
.suis{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}

.suis input{position:absolute;opacity:0;width:0;height:0}

.suis-trek{
  position:relative;
  width:40px;
  height:22px;
  flex:0 0 auto;
  background:#D6DCE8;
  border-radius:12px;
  transition:background .18s var(--ease);
}

.suis-bola{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(20,24,60,.22);
  transition:transform .18s var(--ease);
}

.suis input:checked + .suis-trek{background:var(--navy)}
.suis input:checked + .suis-trek .suis-bola{transform:translateX(18px)}
.suis input:focus-visible + .suis-trek{outline:2px solid var(--blue);outline-offset:2px}

.suis-teks{font-size:12px;color:var(--ink-2)}

/* ------------------------------------------------ pratonton berita */
.pratonton{
  margin:4px 0 16px;
  padding:14px 16px;
  background:#F8FAFD;
  border:1px dashed #D8DFEC;
  border-radius:9px;
}

.pr-label{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:9px;
}

.pr-kad{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  gap:12px;
  align-items:stretch;
}

.pr-gambar{width:104px;flex:0 0 auto;background:#EEF1F7}
.pr-gambar img{width:100%;height:100%;object-fit:cover;display:block}

.pr-isi{padding:10px 12px;min-width:0}
.pr-jenis{
  display:inline-block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--navy);
  background:#EEF3FC;
  padding:2px 6px;
  border-radius:3px;
  margin-bottom:5px;
}
.pr-isi strong{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  margin-bottom:3px;
}
.pr-isi p{
  margin:0;
  font-size:11px;
  line-height:1.5;
  color:var(--ink-3);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ------------------------------------------------ tema gelap */
html[data-tema="gelap"] .borang-modal{background:#1A1D2E}
html[data-tema="gelap"] .bm-kepala,
html[data-tema="gelap"] .bm-kaki{border-color:#262B3F}
html[data-tema="gelap"] .pratonton{background:#151928;border-color:#2C3145}
html[data-tema="gelap"] .pr-kad{background:#1A1D2E;border-color:#2C3145}
html[data-tema="gelap"] .pr-gambar{background:#242940}
html[data-tema="gelap"] .pr-jenis{background:#1C2440;color:#9FB0EE}
html[data-tema="gelap"] .suis-trek{background:#333A52}

@media (max-width:640px){
  .borang-modal{max-height:calc(100vh - 48px)}
  .bm-badan{padding:16px 16px 0}
  .bm-kepala{padding:16px 16px 13px}
  .bm-kaki{padding:14px 16px 16px}
  .bm-kaki .btn-garis,
  .bm-kaki .btn-utama{flex:1 1 0;min-width:0}
  .lapik-resit{padding:20px 14px}
  .bm-badan .borang-dua{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ------------------------------------------------- perbaikan modal */
.lapik-resit .borang-modal{position:relative}

.bm-badan::-webkit-scrollbar{width:9px}
.bm-badan::-webkit-scrollbar-thumb{
  background:#CBD5E6;border-radius:6px;
  border:2px solid transparent;background-clip:content-box;
}

/* footer jangan bertindih kandungan */
.bm-kaki{position:relative;z-index:2;background:var(--kad,#fff)}

/* suis: paksa papar trek + bola */
.bm-badan .suis{display:inline-flex;min-height:24px}
.bm-badan .suis input{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.bm-badan .suis-trek{
  display:block;
  position:relative;
  width:42px;height:23px;
  flex:0 0 42px;
  min-width:42px;
  background:#CBD3E1;
  border-radius:12px;
  transition:background .18s var(--ease);
}
.bm-badan .suis-bola{
  display:block;
  position:absolute;
  top:3px;left:3px;
  width:17px;height:17px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(20,24,60,.25);
  transition:transform .18s var(--ease);
}
.bm-badan .suis input:checked + .suis-trek{background:var(--navy)}
.bm-badan .suis input:checked + .suis-trek .suis-bola{transform:translateX(19px)}

.bm-suiri{margin-bottom:16px}
.bm-suiri .medan{margin-bottom:0}

/* ruang bawah supaya kandungan terakhir tidak tersorok footer */
.bm-badan{padding-bottom:20px}
.bm-badan > *:last-child{margin-bottom:4px}

/* ==================================================== muat naik gambar */
.muat-gambar{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px;
  border:1px dashed #D4DAE8;
  border-radius:9px;
  background:#FAFBFE;
}

.mg-pratonton{
  width:112px;
  height:78px;
  flex:0 0 auto;
  border-radius:7px;
  overflow:hidden;
  background:#EEF1F7;
  border:1px solid #E2E6F0;
}

.mg-pratonton[hidden]{display:none}

.mg-pratonton img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mg-kawalan{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:2px;
}

.mg-pilih{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border:1px solid var(--sempadan-2, #D4D9E4);
  border-radius:7px;
  background:#fff;
  font-size:12px;
  font-weight:500;
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}

.mg-pilih:hover{border-color:var(--navy);background:#F7F9FE}

.mg-pilih svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mg-pilih:focus-within{outline:2px solid var(--blue);outline-offset:2px}

.mg-buang{
  appearance:none;
  background:none;
  border:0;
  padding:8px 4px;
  font:inherit;
  font-size:11.5px;
  color:#B3261E;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

.mg-buang[hidden]{display:none}
.mg-buang:hover{color:#8A1B15}

.mg-info{
  flex-basis:100%;
  font-size:11px;
  line-height:1.5;
  color:var(--ink-3);
  overflow-wrap:anywhere;
}

html[data-tema="gelap"] .muat-gambar{background:#151928;border-color:#2C3145}
html[data-tema="gelap"] .mg-pratonton{background:#242940;border-color:#333A52}
html[data-tema="gelap"] .mg-pilih{background:#1A1D2E;border-color:#333A52;color:#C4CADC}
html[data-tema="gelap"] .mg-pilih:hover{border-color:#4A5480;background:#1F2438}

@media (max-width:520px){
  .muat-gambar{flex-direction:column;align-items:stretch}
  .mg-pratonton{width:100%;height:132px}
}

/* ============================================ avatar gambar pegawai */
.hk-avatar,
.pk-avatar{
  overflow:hidden;
  background:#EEF1F9;
}

.hk-avatar img,
.pk-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}

.hk-avatar{width:42px;height:42px}
.pk-avatar{width:48px;height:48px}

.mg-pratonton.kosong{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F1F4FA;
  border-style:dashed;
}

.mg-tiada{
  width:34px;
  height:34px;
  fill:none;
  stroke:#B8C1D4;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mg-tiada[hidden]{display:none}

html[data-tema="gelap"] .mg-pratonton.kosong{background:#20243A}
html[data-tema="gelap"] .mg-tiada{stroke:#4A5480}

/* imej tersorok mesti benar-benar hilang (elak padding melebar) */
.mg-pratonton img[hidden]{display:none !important}

/* ---------------------------------------- footer modal: butang tidak meregang */
.bm-kaki{min-width:0}
.bm-kaki .btn-garis,
.bm-kaki .btn-utama{
  width:auto;
  flex:0 0 auto;
  min-width:104px;
  max-width:160px;
  padding:11px 20px;
  font-size:13.5px;
  border-radius:8px;
}

/* -------------------------------------- butang ikon + tooltip (kolum tindakan) */
.btn-ikon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid #DCE1EC;
  border-radius:6px;
  background:#fff;
  color:var(--ink-2,#4A5169);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}

.btn-ikon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.btn-ikon:hover,
.btn-ikon:focus-visible{
  border-color:var(--navy,#293084);
  background:#F2F5FD;
  color:var(--navy,#293084);
}

.btn-ikon:focus-visible{outline:2px solid var(--blue,#3C6FC4);outline-offset:2px}

/* tooltip global (dipasang oleh pentadbir.js) */
.pn-tip{
  position:fixed;
  z-index:4000;
  padding:5px 9px;
  border-radius:5px;
  background:#1C2140;
  color:#fff;
  font-size:10.5px;
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-100%) translateY(4px);
  transition:opacity .13s ease, transform .13s ease;
  box-shadow:0 4px 14px rgba(12,15,40,.28);
}

.pn-tip.tunjuk{opacity:1;transform:translate(-50%,-100%) translateY(0)}

.pn-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:#1C2140;
}

html[data-tema="gelap"] .btn-ikon{background:#1A1D2E;border-color:#333A52;color:#C4CADC}
html[data-tema="gelap"] .btn-ikon:hover{background:#22283C;border-color:#5A6AA0;color:#A9C6F0}