/* ==========================================================================
   eATOM — Gaya khusus modul eSPP
   --------------------------------------------------------------------------
   Modul ini tidak menyunting assets/css/ yang dikongsi. Apa-apa gaya yang
   hanya wujud dalam eSPP tinggal di sini dan dimuatkan SELEPAS keempat-empat
   fail CSS kongsi, supaya ia boleh memperhalus komponen sedia ada tanpa
   menyentuh fail milik modul lain.

   Peraturan yang sama seperti seluruh sistem terpakai: jangan cipta warna
   baharu di sini — guna token dalam assets/css/variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jadual Jaminan Kewangan (BF-EA-SPK-JK-01)
   -------------------------------------------------------------------------- */
.table-jaminan { min-width: 1120px; --atom-freeze-right: 84px; }
.table-jaminan .col-check { width: 42px; padding-inline: .75rem .25rem; }
.table-jaminan .col-num { width: 52px; }
.table-jaminan .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-jaminan .col-freeze-r2 { width: 186px; min-width: 186px; }
.table-jaminan .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-jaminan tbody td { vertical-align: top; padding-top: .75rem; }
.table-jaminan .cell-kitaran { min-width: 17rem; }
/* Tarikh kitaran membawa lencana baki hari di sebelahnya, jadi selnya
   tidak boleh dipaksa satu baris seperti .cell-tarikh biasa. */
.table-jaminan .cell-kitaran-tarikh { min-width: 11rem; }
.table-jaminan .cell-kitaran-tarikh .badge-atom { margin-top: .25rem; }

/* Jadual Jaminan Kewangan — pandangan pemegang lesen (JK-01 #3/#4).
   Lebih sempit daripada jadual pegawai kerana ia tidak membawa lajur
   pemegang lesen: setiap baris sudah milik syarikat yang log masuk.

   `--atom-freeze-right` WAJIB: kelas .col-freeze-r1/.col-freeze-r2
   mengiranya untuk meletakkan lajur beku. Tanpanya lajur Tindakan
   duduk di bawah lajur Status dan butang tiga-titik tidak boleh
   diklik langsung. */
.table-jk-pemohon { min-width: 980px; --atom-freeze-right: 84px; }
.table-jk-pemohon .col-num { width: 52px; }
.table-jk-pemohon .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-jk-pemohon .col-freeze-r2 { width: 186px; min-width: 186px; }
.table-jk-pemohon .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-jk-pemohon tbody td { vertical-align: top; padding-top: .75rem; }
.table-jk-pemohon .cell-kitaran { min-width: 14rem; }
.table-jk-pemohon .cell-kitaran-tarikh { min-width: 11rem; }
.table-jk-pemohon .cell-kitaran-tarikh .badge-atom { margin-top: .25rem; }

/* --------------------------------------------------------------------------
   1b. Jadual Permohonan Lesen (BF-EA-SPK-PL-01B)
   -------------------------------------------------------------------------- */
/* Lebih lebar daripada jadual jaminan kerana ia membawa dua lajur konteks
   tambahan — "Di Tangan" dan "Tempoh Piagam" — yang menjawab soalan
   pegawai sebelum dia membuka mana-mana rekod. */
.table-lesen { min-width: 1320px; --atom-freeze-right: 84px; }
.table-lesen .col-num { width: 52px; }
.table-lesen .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-lesen .col-freeze-r2 { width: 190px; min-width: 190px; }
.table-lesen .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-lesen tbody td { vertical-align: top; padding-top: .75rem; }
.table-lesen .cell-kitaran { min-width: 16rem; }
.table-lesen .cell-kitaran-tarikh { min-width: 11rem; }
.table-lesen .cell-kitaran-tarikh .badge-atom { margin-top: .25rem; }
/* Lencana kelas dibenarkan membalut: satu permohonan boleh meliputi
   beberapa urusan lesen sekali gus. */
.table-lesen .badge-atom + .badge-atom { margin-left: .25rem; }

/* --------------------------------------------------------------------------
   1c. Borang Permohonan Lesen — komponen modal (BF-EA-SPK-PL-01A)
   --------------------------------------------------------------------------
   Padding badan modal ialah 1.375rem. Jalur stepper menembusi padding itu
   (margin negatif + padding balik) supaya latarnya menutup lebar penuh
   semasa kandungan menatal di bawahnya.
   -------------------------------------------------------------------------- */
/* `top` negatif sepadan dengan padding atas badan modal, supaya jaluran
   melekat betul-betul pada tepi kandungan dan tiada jurang yang
   membiarkan kandungan kelihatan menatal di atasnya. */
.stepper-lekat {
  position: sticky;
  top: -1.375rem;
  z-index: 3;
  margin: -1.375rem -1.375rem 1.25rem;
  padding: 0 1.375rem;
  background: var(--atom-card);
  border-bottom: 1px solid var(--atom-border);
}
@media (max-width: 575.98px) {
  /* Padding badan modal mengecil kepada 1rem di bawah 576px, jadi
     tembusan jaluran mesti mengecil sekali — jika tidak ia terkeluar
     daripada tepi badan. */
  .stepper-lekat {
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 0 1rem;
  }
  .borang-progress { margin: 0 -1rem; }
}

/* Bar kemajuan: jawapan sepintas lalu kepada "berapa lagi berbaki",
   yang tidak dapat diberi oleh jujukan langkah semata-mata. */
.borang-progress {
  height: 2px;
  margin: 0 -1.375rem;
  background: var(--atom-border-subtle);
  overflow: hidden;
}
.borang-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--atom-primary);
  transition: width var(--atom-transition-slow);
}

/* Jaluran langkah: bulatan bernombor di atas, label dua baris di bawah,
   garis putus-putus menyambung setiap bulatan.

   Garis itu ialah `::before` pada setiap item KECUALI yang pertama, dan ia
   `flex: 1` — jadi ia meregang mengisi apa-apa ruang yang tinggal dan
   jarak antara bulatan sentiasa sama rata, tanpa mengira panjang label.
   Ia ditolak ke bawah separuh ketinggian bulatan supaya ia bertemu
   bulatan pada paksinya, bukan pada bahagian atasnya. */
.stepper-borang {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: .75rem 0 .625rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
/* Jaluran tidak sepatutnya melimpah lagi; jika ia berlaku pada gabungan
   saiz yang tidak dijangka, bar skrol nipis kekal kelihatan supaya
   langkah yang terkeluar tidak hilang tanpa petunjuk. */
.stepper-borang::-webkit-scrollbar { height: 3px; }
.stepper-borang::-webkit-scrollbar-thumb {
  background: var(--atom-border-strong);
  border-radius: var(--atom-radius-pill);
}

/* Setiap langkah berkongsi lebar yang ada SAMA RATA (`flex: 1 1 0`),
   jadi jaluran sentiasa muat dalam modal dan ketujuh-tujuh langkah kekal
   boleh diklik. Sebelum ini butang berlebar tetap dan penyambung
   dibenarkan membesar, jadi jaluran melimpah — dan kerana bar skrolnya
   disembunyikan, langkah terakhir hilang di tepi tanpa sebarang petunjuk
   bahawa ia masih ada di sana. */
.langkah-item {
  display: flex;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
}
.langkah-item + .langkah-item::before {
  content: '';
  flex: 0 0 auto;
  width: 1.25rem;
  margin: 1rem .25rem 0;
  border-top: 2px dashed var(--atom-border-strong);
}

.langkah-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 .25rem;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}
.langkah-btn:disabled { cursor: default; }
.langkah-btn:focus-visible { outline: none; }
.langkah-btn:focus-visible .langkah-bulat { box-shadow: var(--atom-shadow-focus); }

.langkah-bulat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--atom-neutral-light);
  color: var(--atom-text-muted);
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--atom-transition), color var(--atom-transition);
}
.langkah-btn:hover:not(:disabled) .langkah-bulat { background: var(--atom-border); }

.langkah-teks { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.langkah-tajuk {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  color: var(--atom-text-secondary);
  line-height: 1.25;
}
/* Huraian dipendekkan supaya muat satu baris: huraian yang membalut
   menjadikan setiap langkah tinggi berbeza dan jaluran itu nampak ragged.
   Jika ia terpaksa membalut, ia dipotong dan bukan menolak jaluran. */
.langkah-huraian {
  font-size: .6875rem;
  color: var(--atom-text-muted);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Langkah aktif: bulatan berisi warna jenama. Langkah selesai: hijau
   status dengan tanda semak — ikon, bukan warna sahaja, yang membawa
   maknanya. */
.langkah-item.is-aktif .langkah-bulat {
  background: var(--atom-primary);
  color: var(--atom-text-inverse);
}
.langkah-item.is-aktif .langkah-tajuk { color: var(--atom-primary-800); }
.langkah-item.is-selesai .langkah-bulat {
  background: var(--atom-success-light);
  color: var(--atom-success);
}
.langkah-item.is-selesai .langkah-tajuk { color: var(--atom-text); }

/* Paparan pegawai pengiktirafan: langkah lebih banyak daripada borang
   lesen, jadi setiap langkah diberi lebar minimum dan teksnya dipotong
   ("…") — jaluran ditatal mendatar, bukan teks bertindih. */
.stepper-pegawai .langkah-teks { width: 100%; }
.langkah-pegawai > .modal-seksyen + .modal-seksyen { margin-top: 1.5rem; }

/* Skrin sempit: label huraian digugurkan dahulu, kemudian tajuk bagi
   langkah bukan aktif. Bulatan tidak pernah digugurkan — ia petunjuk
   kedudukan. */
@media (max-width: 991.98px) {
  .langkah-huraian { display: none; }
  .langkah-item + .langkah-item::before { width: .75rem; }
}
@media (max-width: 575.98px) {
  .langkah-item { flex: 0 0 auto; }
  .langkah-item.is-aktif { flex: 1 1 auto; }
  .langkah-item:not(.is-aktif) .langkah-teks { display: none; }
}

/* Bootstrap menetapkan `height: calc(100% - margin*2)` pada
   .modal-dialog-scrollable, jadi modal itu SENTIASA setinggi tetingkap
   tidak kira berapa pendek kandungannya — langkah dua baris meninggalkan
   ruang kosong seluruh skrin di bawahnya.

   Tingginya dikembalikan kepada `auto` dan dihadkan pada tetingkap: modal
   membesar mengikut kandungan, dan hanya menatal apabila langkah itu
   benar-benar panjang. Diskop kepada modal borang sahaja supaya modal
   lain mengekalkan kelakuan Bootstrap. */
#modal-borang-lesen .modal-dialog-scrollable { height: auto; }

/* Had tinggi mesti dalam unit VIEWPORT, bukan peratus.

   Bootstrap menetapkan `.modal-content { max-height: 100% }`, dan peratus
   itu diukur terhadap tinggi dialog. Sebaik tinggi dialog dijadikan
   `auto`, asas peratus itu menjadi tidak tentu — hadnya hilang, kandungan
   membesar melepasi tetingkap, dan kerana dialog ini juga `centered`,
   bahagian ATAS modal (kepala dan tajuknya) terpotong keluar skrin.

   `100vh` memberi had yang tentu tanpa mengembalikan tinggi tetap, jadi
   modal pendek kekal pendek dan modal panjang menatal dalam badannya. */
#modal-borang-lesen .modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 3.5rem);
}

.borang-modal [data-ribbon] { margin-bottom: 1.25rem; }

/* Satu langkah boleh membawa beberapa seksyen (cth. Permohonan membawa
   Tujuan, Urusan Lesen dan Saluran), jadi jarak antaranya dilonggarkan
   supaya mata tahu di mana satu bahagian tamat. */
.borang-modal .modal-seksyen + .modal-seksyen { margin-top: 1.5rem; }

/* Kiraan kecil pada tajuk seksyen (cth. bilangan dokumen dituntut) */
.seksyen-kira {
  margin-left: auto;
  padding: .0625rem .4375rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt);
  color: var(--atom-text-secondary);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Set kad pilihan */
.kad-pilihan-set { display: flex; flex-direction: column; gap: .5rem; }
.kad-pilihan-set.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Panel "kesan pilihan" — akibat pilihan pemohon, bukan medan untuk diisi,
   jadi ia diasingkan secara visual daripada borang. */
.kesan-pilihan {
  padding: 1rem 1.125rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-primary);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.kesan-pilihan .modal-seksyen-tajuk { border-bottom: 0; padding-bottom: .25rem; }
.kesan-pilihan .detail-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* Baris berulang (unsur / radas) dalam langkah butiran kelas */
.baris-unsur {
  position: relative;
  padding: 1rem 1.125rem;
  margin-bottom: .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.baris-unsur:last-child { margin-bottom: 0; }
.baris-tajuk {
  display: flex;
  align-items: center;
  gap: .4375rem;
  margin-bottom: .5rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
}
.baris-tajuk .bi { color: var(--atom-primary); }
.baris-unsur .buang-baris { margin-top: .625rem; color: var(--atom-danger); }

/* Sub-tajuk dalam satu baris rekod. Manual membahagikan satu rekod bahan
   kepada Maklumat Bahan / Pembungkusan / Pembekal; tanpa pembahagi itu
   tujuh belas medan menjadi satu dinding tanpa struktur. */
.baris-subtajuk {
  margin: .875rem 0 .5rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
  border-bottom: 1px solid var(--atom-border);
  padding-bottom: .25rem;
}
.baris-unsur > .baris-subtajuk:first-child { margin-top: 0; }

/* Radio sebaris untuk soalan jawapan pendek (Ya / Tidak / Tidak
   Berkaitan) — membalut apabila ruang tidak cukup, bukan terpotong. */
.pilih-radio.is-sebaris {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .375rem 1.25rem;
  padding: .5rem .75rem;
}

/* Nilai yang ditarik automatik daripada Bank Unsur — dibezakan daripada
   medan yang pemohon isi sendiri. */
.unsur-rujukan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .875rem;
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px dashed var(--atom-border-strong);
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}
.unsur-rujukan .bi { margin-right: .25rem; color: var(--atom-text-muted); }

/* Senarai dokumen sokongan */
.senarai-dokumen { display: flex; flex-direction: column; gap: .5rem; }
.dokumen-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  transition: border-color var(--atom-transition);
}
.dokumen-baris:hover { border-color: var(--atom-border-strong); }
.dokumen-baris.is-kecuali { background: var(--atom-surface-alt); }
.dokumen-baris.is-kecuali:hover { border-color: var(--atom-border); }
.dokumen-baris.is-kecuali .dokumen-nama { color: var(--atom-text-muted); }
.dokumen-nama {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  min-width: 0;
  font-size: var(--atom-fs-sm);
}
.dokumen-nama > .bi { color: var(--atom-text-muted); font-size: 1.125rem; line-height: 1.4; }
.dokumen-teks { display: flex; flex-direction: column; min-width: 0; }
.dokumen-tajuk { line-height: 1.35; }
/* Nama fail sebenar, jenis, saiz dan tarikh — maklumat yang pegawai guna
   untuk mengesahkan dia membuka lampiran yang betul. */
.dokumen-meta {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  overflow-wrap: anywhere;
}

/* Pemapar dibuka DI DALAM baris. Baris itu sudah `flex-wrap: wrap`, jadi
   panel berasas-lebar-penuh jatuh ke baris seterusnya dengan sendirinya —
   tiada `:has()` diperlukan, dan susun aturnya tidak bergantung pada
   sokongan pemilih induk. */
.dokumen-papar { flex: 1 0 100%; margin-top: .75rem; }
.dokumen-muka {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  overflow: hidden;
  background: var(--atom-card);
}
.dokumen-muka-kepala,
.dokumen-muka-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}
.dokumen-muka-kepala { border-bottom: 1px solid var(--atom-border); font-weight: 600; }
.dokumen-muka-kaki { border-top: 1px solid var(--atom-border); justify-content: space-between; }
.dokumen-muka-bil { margin-left: auto; font-weight: 400; color: var(--atom-text-muted); }

/* Kawasan pratonton: nisbah seperti muka surat supaya ia dibaca sebagai
   dokumen, bukan sebagai kotak kosong. */
.dokumen-muka-isi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 11rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--atom-surface-sunken);
  color: var(--atom-text-muted);
  font-size: var(--atom-fs-xs);
}
.dokumen-muka-isi .bi { font-size: 2rem; opacity: .5; }

/* Fi: pecahan sebagai senarai, jumlah sebagai satu baris tebal berasingan
   supaya angka yang perlu dibayar tidak hilang dalam senarai. */
.jadual-fi .detail-value { font-variant-numeric: tabular-nums; }
.fi-jumlah {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  padding: .875rem 1.125rem;
  border-radius: var(--atom-radius);
  background: var(--atom-primary-light);
  color: var(--atom-primary-800);
  font-size: var(--atom-fs-sm);
  font-weight: 600;
}
.fi-jumlah strong {
  font-size: var(--atom-fs-lg);
  font-variant-numeric: tabular-nums;
}

/* Penanda baris yang menunggu tindakan pegawai. Titik + tooltip, bukan
   warna baris penuh: lajur ini sudah bersebelahan lencana status berwarna,
   dan dua isyarat warna bersebelahan saling bersaing. */
.tanda-tindakan {
  display: inline-block;
  width: .4375rem;
  height: .4375rem;
  margin-right: .4375rem;
  border-radius: 50%;
  background: var(--atom-primary);
  vertical-align: middle;
}

/* Tindakan peringkat ialah sebab menu ini dibuka — ia diberatkan. */
.dropdown-item.is-utama { font-weight: 600; }

/* --------------------------------------------------------------------------
   1e. Modal Tindakan Pegawai (BF-EA-SPK-PL-01B)
   -------------------------------------------------------------------------- */
.tindakan-peringkat {
  margin-bottom: 1.25rem;
  padding: .875rem 1.125rem;
  border-radius: var(--atom-radius);
  border-left: 3px solid var(--atom-primary);
  background: var(--atom-primary-light);
}
.tindakan-aktor {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-primary-700);
}
.tindakan-soalan {
  margin-top: .25rem;
  font-size: var(--atom-fs-base);
  font-weight: 600;
  color: var(--atom-primary-900);
}

/* --------------------------------------------------------------------------
   1d. Portal Pemohon — akses luar (BF-EA-SPK-DPB-02 / PL-01A)
   -------------------------------------------------------------------------- */
/* Jadual senarai pemohon. Lebih sempit daripada jadual pegawai kerana ia
   tidak membawa lajur pengurusan dalaman — tiada "Di Tangan", tiada tempoh
   piagam, tiada pegawai penilai. */
.table-pemohon { min-width: 980px; --atom-freeze-right: 84px; }
.table-pemohon .col-num { width: 52px; }
.table-pemohon .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-pemohon .col-freeze-r2 { width: 260px; min-width: 260px; }
.table-pemohon .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-pemohon tbody td { vertical-align: top; padding-top: .75rem; }
.table-pemohon .cell-kitaran { min-width: 14rem; }

/* Draf belum memasuki aliran, jadi barisnya lebih senyap daripada
   permohonan yang sedang diproses. */
.table-pemohon tbody tr.is-draf .kitaran-tajuk { color: var(--atom-text-secondary); }

/* --------------------------------------------------------------------------
   1f. Jadual Sub-Modul Perlesenan Lain (PL-02…PL-20)
   -------------------------------------------------------------------------- */
/* Lebih sempit daripada jadual lesen: tiada lajur kelas, borang diwartakan
   atau saluran — aliran ini tidak membawanya. */
.table-am { min-width: 1120px; --atom-freeze-right: 84px; }
.table-am .col-num { width: 52px; }
.table-am .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-am .col-freeze-r2 { width: 200px; min-width: 200px; }
.table-am .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-am tbody td { vertical-align: top; padding-top: .75rem; }
.table-am .cell-kitaran { min-width: 15rem; }
.table-am .cell-kitaran-tarikh { min-width: 11rem; }
.table-am .cell-kitaran-tarikh .badge-atom { margin-top: .25rem; }

/* --------------------------------------------------------------------------
   1e. Dashboard Pemohon — akses luar
   -------------------------------------------------------------------------- */

/* Blok "perlu tindakan anda" ialah sebab skrin ini wujud, jadi setiap
   barisnya membawa tindakannya sendiri — pemohon tidak perlu pergi ke
   senarai untuk berbuat sesuatu. */
.senarai-tindakan { display: flex; flex-direction: column; gap: .625rem; }
.tindakan-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-warning);
  border-radius: var(--atom-radius);
  background: var(--atom-warning-light);
}
.tindakan-isi { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; min-width: 0; }
.tindakan-atas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; }
.tindakan-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; }
.tindakan-ayat { width: 100%; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.tindakan-ruj { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.tindakan-butang { flex: 0 0 auto; }

/* Senarai semak kesediaan memohon lesen. Ikon membawa keadaan — siap,
   dalam proses, belum — supaya ia terbaca tanpa membezakan warna. */
.senarai-sedia { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.senarai-sedia li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
}
.senarai-sedia li > .bi { font-size: 1.125rem; flex: 0 0 auto; }
.senarai-sedia li.is-sedia > .bi  { color: var(--atom-success); }
.senarai-sedia li.is-proses > .bi { color: var(--atom-warning); }
.senarai-sedia li.is-belum > .bi  { color: var(--atom-text-muted); }
.senarai-sedia li.is-belum { background: var(--atom-surface-alt); }
.sedia-teks { display: flex; flex-direction: column; flex: 1 1 14rem; min-width: 0; }
.sedia-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
}
.sedia-ref {
  font-size: var(--atom-fs-xs);
  font-weight: 400;
  color: var(--atom-text-muted);
}
.sedia-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }

/* Pecahan mengikut tujuan: bar nisbah, bukan carta. Dengan segelintir
   rekod, carta menjadikan angka lebih sukar dibaca daripada senarai. */
.senarai-tujuan { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.tujuan-atas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3125rem;
  font-size: var(--atom-fs-sm);
}
.tujuan-atas strong { font-variant-numeric: tabular-nums; }
.tujuan-bar {
  height: 6px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt);
  overflow: hidden;
}
.tujuan-bar span {
  display: block;
  height: 100%;
  background: var(--atom-primary);
  transition: width var(--atom-transition-slow);
}

.senarai-terkini { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.senarai-terkini li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .75rem;
  border-bottom: 1px dashed var(--atom-border);
}
.senarai-terkini li:last-child { padding-bottom: 0; border-bottom: 0; }
.terkini-teks { display: flex; flex-direction: column; min-width: 0; }
.terkini-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; }
.terkini-ruj { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* --------------------------------------------------------------------------
   2. Dashboard eSPP · SPK (BF-EA-SPK-01)
   -------------------------------------------------------------------------- */
/* Meter pematuhan duduk dalam lajur sempit di sebelah carta trend, bukan
   memenuhi lebar penuh seperti dashboard iPakar — jadi donat sentiasa di
   atas dan jubinnya bertindan pada semua lebar skrin. */
.meter-espp .pencapaian-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.meter-espp .pencapaian-donut { max-width: 190px; margin-inline: auto; }
.meter-espp .pencapaian-tiles { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
/* Jubin di sini bukan pautan — tiada halaman destinasi lagi — jadi kesan
   hover dimatikan supaya ia tidak kelihatan boleh diklik. */
.meter-espp .pencapaian-tile:hover {
  background: var(--atom-surface-alt);
  border-color: var(--atom-border);
  box-shadow: none;
}

.peranan-huraian {
  margin: 0 0 1rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}

/* Senarai status di bawah carta blok — ikon + label membawa makna, warna
   hanya menyokong. Nilai dijajar ke kanan supaya lajur angka boleh dibaca
   menegak. */
.senarai-status li strong {
  margin-left: auto;
  padding-left: .75rem;
  color: var(--atom-text);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Autolengkap Bank rujukan (PL-02 / PL-07 / PL-08)
   --------------------------------------------------------------------------
   Panel cadangan duduk DALAM aliran borang, bukan terapung di atasnya:
   ia hidup dalam badan modal yang sudah menatal, dan lapisan terapung di
   dalam lapisan terapung berakhir dengan panel terpotong pada skrin
   pendek. Borang di bawahnya hanya muncul selepas carian gagal, jadi
   tiada apa-apa yang tertolak ke bawah semasa menaip.
   -------------------------------------------------------------------------- */
.bank-panel { margin-top: .5rem; }

.bank-petunjuk {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

.bank-cadangan {
  margin: 0;
  padding: .25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  box-shadow: var(--atom-shadow-xs);
}

.bank-pilihan {
  display: block;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--atom-radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.bank-pilihan:hover,
.bank-pilihan:focus-visible {
  background: var(--atom-surface-alt);
  outline: none;
}

.bank-pilihan:focus-visible { box-shadow: var(--atom-shadow-focus); }

.bank-model {
  display: block;
  font-size: var(--atom-fs-base);
  font-weight: 600;
  color: var(--atom-text);
}

.bank-pengeluar {
  display: block;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}

.bank-tiada {
  padding: .75rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}

/* --------------------------------------------------------------------------
   Pilihan berbilang (PL-20: unit untuk diiktiraf)
   --------------------------------------------------------------------------
   Satu permohonan mengiktiraf beberapa unit sekaligus, dan Pegawai Penilai
   kemudiannya meluluskan SUBSET daripadanya — jadi setiap unit mesti
   kekal sebagai baris berasingan yang boleh ditanda, bukan satu teks.
   -------------------------------------------------------------------------- */
.pilih-banyak {
  max-height: 13rem;
  overflow-y: auto;
  padding: .625rem .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}

.pilih-banyak .form-check { margin-bottom: .375rem; }
.pilih-banyak .form-check:last-child { margin-bottom: 0; }
.pilih-banyak .form-check-label { font-size: var(--atom-fs-base); }
.pilih-banyak.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .375rem 1rem;
  max-height: none;
}
.pilih-banyak.is-grid .form-check { margin-bottom: 0; }

/* Senarai unit dalam modal butiran PL-20 — satu unit satu baris, kerana
   sebahagiannya lulus dan sebahagiannya tidak; senarai dipisah koma
   menyukarkan pembacaan mana yang mana. */
.senarai-unit {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.senarai-unit li {
  font-size: var(--atom-fs-base);
  color: var(--atom-text);
}

/* --------------------------------------------------------------------------
   Dialog keputusan pegawai
   --------------------------------------------------------------------------
   SweetAlert memusatkan teksnya; medan borang di dalamnya tidak boleh
   ikut — label yang terapung di tengah tidak menunjukkan medan mana yang
   dimilikinya. Jadi kandungan medan dijajar kiri, teks konteks kekal
   seperti dialog lain.
   -------------------------------------------------------------------------- */
.swal2-popup.swal-atom-keputusan .swal2-html-container { text-align: left; }

.swal-atom-keputusan .swal-atom-teks {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--atom-text-secondary);
}

.swal-atom-keputusan .swal-atom-medan { margin-bottom: .875rem; }
.swal-atom-keputusan .swal-atom-medan:last-child { margin-bottom: 0; }

.swal-atom-keputusan .form-label {
  display: block;
  margin-bottom: .375rem;
}

/* Pilihan pasukan: kotak semak ahli + radio Ketua sebaris */
.dk-pasukan {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--atom-border);
  border-radius: .5rem;
}
.dk-pasukan-kepala,
.dk-pasukan-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
}
.dk-pasukan-kepala {
  position: sticky;
  top: 0;
  background: var(--atom-neutral-light);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--atom-text-secondary);
}
.dk-pasukan-baris + .dk-pasukan-baris { border-top: 1px solid var(--atom-border-subtle); }
.dk-pasukan-baris > .form-check-input { flex-shrink: 0; margin: 0 .5rem 0 0; }

/* Peta lokasi kejadian (Google Maps) dalam borang Tambah Aduan */
.ad-peta {
  width: 100%;
  height: 240px;
  border: 1px solid var(--atom-border);
  border-radius: .5rem;
}

/* SweetAlert menyuntik mesej pengesahannya sendiri di bawah kandungan;
   ia dijajar kiri juga supaya ia membaca sebagai ralat medan. */
.swal-atom-keputusan .swal2-validation-message {
  justify-content: flex-start;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Tindakan pada baris dokumen
   --------------------------------------------------------------------------
   Lihat dan Muat Turun berpasangan pada setiap fail. Ia dibalut supaya
   kedua-duanya kekal bersama apabila baris membungkus pada skrin sempit,
   dan tidak terpisah ke hujung bertentangan.
   -------------------------------------------------------------------------- */
.dokumen-tindakan {
  display: flex;
  flex: 0 0 auto;
  gap: .375rem;
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .dokumen-tindakan { margin-left: 0; width: 100%; }
  .dokumen-tindakan .btn { flex: 1 1 0; }
}

/* Senarai dokumen berdiri sendiri (modul AM dan Jaminan) — baris lesen
   sudah mempunyai bekasnya sendiri. */
.dokumen-senarai {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* --------------------------------------------------------------------------
   Slip keputusan (PL-02 / PL-11 / PL-12 / PL-20)
   --------------------------------------------------------------------------
   Susun atur mengikut contoh slip JTA: kepala berjata, blok label-titik-nilai,
   jadual berkotak, nota bernombor, dan blok tandatangan dengan cop.

   Latarnya putih tetap walaupun modal berlatar lain — slip ialah dokumen
   yang akan dicetak, dan kertas tidak mengikut tema skrin.
   -------------------------------------------------------------------------- */
.slip-atom {
  position: relative;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: #FFFFFF;
  color: #1F2937;
  font-size: var(--atom-fs-sm);
  line-height: 1.5;
}

.slip-kepala {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.slip-jata {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  line-height: 1;
}

.slip-jata-atom {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--atom-primary);
}

.slip-jata-sub {
  margin-top: .15rem;
  font-size: .5rem;
  letter-spacing: .34em;
  color: var(--atom-primary);
}

.slip-jata-kecil {
  margin-top: .2rem;
  font-size: .4rem;
  letter-spacing: .1em;
  color: #6B7280;
}

.slip-tajuk {
  flex: 1 1 auto;
  padding: .625rem .75rem;
  border: 1.5px solid #1F2937;
  color: var(--atom-primary);
  font-size: var(--atom-fs-base);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.slip-blok { margin-bottom: 1.25rem; }

/* Label lebar tetap supaya semua titik bertindan menegak, seperti slip
   yang ditaip pada mesin taip. */
.slip-baris {
  display: flex;
  gap: .5rem;
  padding: .1rem 0;
}

.slip-label { flex: 0 0 11rem; font-weight: 600; }
.slip-titik { flex: 0 0 auto; }
.slip-nilai { flex: 1 1 auto; white-space: pre-line; }

.slip-seksyen {
  margin: 1.25rem 0 .5rem;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  color: var(--atom-primary);
}

.slip-tengah { text-align: center; }

.slip-tujuan { margin: 1rem 0; }

.slip-jadual {
  margin: 1rem 0 1.25rem;
  border: 1.5px solid #1F2937;
}

.slip-jadual-tajuk {
  padding: .5rem .625rem;
  border-bottom: 1.5px solid #1F2937;
  font-weight: 700;
  text-align: center;
}

.slip-jadual table { width: 100%; border-collapse: collapse; }

.slip-jadual th,
.slip-jadual td {
  padding: .3rem .625rem;
  border: 1px solid #1F2937;
  text-align: left;
}

.slip-jadual th { color: #1D4ED8; font-weight: 600; }

.slip-perenggan { margin: 0 0 .5rem; padding-left: 1.25rem; }

.slip-nota {
  margin: 0;
  padding-left: 2.5rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-primary);
}

.slip-nota li { margin-bottom: .35rem; }

.slip-takrif {
  margin: .75rem 0 0 2.5rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-primary);
}

.slip-cetakan {
  margin: 1.75rem 0 1.25rem;
  font-style: italic;
}

.slip-kaki {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.slip-tandatangan { display: flex; flex-direction: column; }
.slip-tarikh-cetak { margin-top: .75rem; }

/* Cop bulat bercetak timbul, membawa ID slip seperti pada contoh JTA. */
.slip-cop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border: 3px double var(--atom-primary);
  border-radius: 50%;
  color: var(--atom-primary);
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  text-align: center;
  opacity: .75;
  transform: rotate(-8deg);
}

@media (max-width: 575.98px) {
  .slip-atom { padding: 1.25rem 1rem; }
  .slip-kepala { flex-direction: column; align-items: stretch; }
  .slip-baris { flex-wrap: wrap; }
  .slip-label { flex: 1 1 100%; }
  .slip-titik { display: none; }
  .slip-kaki { flex-direction: column; align-items: flex-start; }
}

/* Baris pengumpul dalam jadual templat — ia tajuk, bukan rekod, jadi ia
   tidak berkelakuan seperti baris yang boleh diklik. */
.baris-kumpulan td {
  padding-top: .875rem;
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--atom-text-secondary);
}

.templat-tajuk { display: block; font-weight: 500; }

.templat-aktiviti {
  display: block;
  margin-top: .15rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}

/* --------------------------------------------------------------------------
   Senarai boleh tambah / buang (editor templat slip)
   --------------------------------------------------------------------------
   Lajur jadual dan nota berkanun bukan medan tetap — bilangannya berbeza
   antara satu slip dengan yang lain, jadi setiap baris membawa butang
   buangnya sendiri di sebelah medan, bukan di hujung senarai.
   -------------------------------------------------------------------------- */
.senarai-boleh {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.senarai-baris {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.senarai-baris > .form-control { flex: 1 1 auto; }
.senarai-baris > .btn { flex: 0 0 auto; }

.senarai-boleh:empty + .btn { margin-top: 0; }

/* --------------------------------------------------------------------------
   Summernote dalam editor templat slip
   --------------------------------------------------------------------------
   Summernote membawa gayanya sendiri; ini hanya menjajarkannya dengan medan
   borang di sekelilingnya supaya ia tidak kelihatan seperti komponen asing
   yang ditampal ke dalam modal.
   -------------------------------------------------------------------------- */
.note-editor.note-frame {
  margin-bottom: 0;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  font-family: var(--atom-font);
}

.note-editor.note-frame .note-toolbar {
  padding: .375rem .5rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
  border-radius: var(--atom-radius) var(--atom-radius) 0 0;
}

.note-editor.note-frame .note-editing-area .note-editable {
  padding: .625rem .75rem;
  background: var(--atom-card);
  color: var(--atom-text);
  font-size: var(--atom-fs-base);
  line-height: 1.55;
}

.note-editor.note-frame .note-editable ol { padding-left: 1.25rem; }
.note-editor.note-frame .note-statusbar { display: none; }

/* Fokus mengikut medan borang lain, bukan biru lalai Bootstrap. */
.note-editor.note-frame:focus-within {
  border-color: var(--atom-primary);
  box-shadow: var(--atom-shadow-focus);
}

/* --------------------------------------------------------------------------
   Senarai boleh tambah / buang (editor templat slip)
   --------------------------------------------------------------------------
   Lajur jadual dan nota berkanun bukan medan tetap — bilangannya berbeza
   antara satu slip dengan yang lain, jadi setiap baris membawa butang
   buangnya sendiri di sebelah medan, bukan di hujung senarai.
   -------------------------------------------------------------------------- */
.senarai-boleh {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.senarai-baris {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.senarai-baris > .form-control { flex: 1 1 auto; }
.senarai-baris > .btn { flex: 0 0 auto; }

.senarai-boleh:empty + .btn { margin-top: 0; }

/* --------------------------------------------------------------------------
   Summernote dalam editor templat slip
   --------------------------------------------------------------------------
   Summernote membawa gayanya sendiri; ini hanya menjajarkannya dengan medan
   borang di sekelilingnya supaya ia tidak kelihatan seperti komponen asing
   yang ditampal ke dalam modal.
   -------------------------------------------------------------------------- */
.note-editor.note-frame {
  margin-bottom: 0;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  font-family: var(--atom-font);
}

.note-editor.note-frame .note-toolbar {
  padding: .375rem .5rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
  border-radius: var(--atom-radius) var(--atom-radius) 0 0;
}

.note-editor.note-frame .note-editing-area .note-editable {
  padding: .625rem .75rem;
  background: var(--atom-card);
  color: var(--atom-text);
  font-size: var(--atom-fs-base);
  line-height: 1.55;
}

.note-editor.note-frame .note-editable ol { padding-left: 1.25rem; }
.note-editor.note-frame .note-statusbar { display: none; }

/* Fokus mengikut medan borang lain, bukan biru lalai Bootstrap. */
.note-editor.note-frame:focus-within {
  border-color: var(--atom-primary);
  box-shadow: var(--atom-shadow-focus);
}

/* Pilihan radio dalam borang permohonan — dua pilihan yang saling
   eksklusif dan menentukan medan seterusnya, jadi kedua-duanya kekal
   kelihatan dan bukan tersembunyi dalam dropdown. */
.pilih-radio {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.25rem;
  padding: .5rem .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}

.pilih-radio .form-check { margin: 0; }
.pilih-radio .form-check-label { font-size: var(--atom-fs-base); }

/* --------------------------------------------------------------------------
   Pengagihan Tugasan & Tempoh Piagam (Pentadbiran Dalaman)
   --------------------------------------------------------------------------
   Bebanan pegawai dibaca sebagai perbandingan, bukan senarai nombor — jadi
   setiap baris membawa bar berkadar dengan pegawai paling sibuk. Ketua Unit
   perlu nampak siapa yang lapang dalam sekali pandang.
   -------------------------------------------------------------------------- */
.senarai-bebanan { margin: 0; padding: 0; list-style: none; }

.beban-baris {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--atom-border-subtle);
}

.beban-baris:last-child { border-bottom: 0; }

.beban-nama {
  flex: 0 0 11rem;
  font-size: var(--atom-fs-sm);
  font-weight: 500;
}

.beban-bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}

.beban-isi {
  display: block;
  height: 100%;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-primary);
}

.beban-kira {
  flex: 0 0 2rem;
  text-align: right;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .beban-baris { flex-wrap: wrap; }
  .beban-nama { flex: 1 1 100%; }
}

/* Peraturan tarikh mula ialah ayat, bukan label — ia perlu membalut. */
.piagam-mula {
  display: block;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}

.senarai-jejak-piagam { margin: 0; padding: 0; list-style: none; }

.jejak-piagam {
  display: flex;
  gap: .875rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--atom-border-subtle);
}

.jejak-piagam:last-child { border-bottom: 0; }

.jejak-masa {
  flex: 0 0 9rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

.jejak-teks { flex: 1 1 auto; font-size: var(--atom-fs-sm); }

.jejak-sebab,
.jejak-oleh {
  display: block;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}

.jejak-oleh { color: var(--atom-text-muted); }

/* Isu terbuka — tajuk tebal, huraian di bawahnya. */
.senarai-isu { margin: 0; padding: 0; list-style: none; }

.senarai-isu li {
  padding: .625rem 0;
  border-bottom: 1px solid var(--atom-border-subtle);
  font-size: var(--atom-fs-sm);
}

.senarai-isu li:last-child { border-bottom: 0; }

.senarai-isu li span {
  display: block;
  margin-top: .2rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
}

@media (max-width: 575.98px) {
  .jejak-piagam { flex-direction: column; gap: .2rem; }
}

/* Setiap perubahan dalam satu pindaan piagam disenaraikan berasingan —
   "dipinda" tanpa menyatakan apa tidak menjawab apa-apa enam bulan
   kemudian. */
.jejak-ubah {
  display: block;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text);
}

/* --------------------------------------------------------------------------
   Pendaftaran Pengguna Luar (sebelum log masuk)
   --------------------------------------------------------------------------
   Halaman ini berada di LUAR aplikasi bersesi: tiada sidebar, tiada navbar,
   tiada menu — tiada sesi lagi untuk menu itu tapis. Jadi ia membawa kepala
   ringkas sendiri dan satu lajur berpusat, sama seperti skrin log masuk di
   sebelahnya.
   -------------------------------------------------------------------------- */
.daftar-page {
  min-height: 100vh;
  background: var(--atom-surface-alt);
}

.daftar-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-card);
}

.daftar-jenama {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: inherit;
}
.daftar-jenama .brand-logo img { height: 40px; }
.daftar-jenama .brand-text {
  padding-left: .75rem;
  border-left: 1px solid var(--atom-border);
}
.daftar-jenama .brand-title { color: var(--atom-text); }
.daftar-jenama .brand-subtitle { color: var(--atom-text-muted); }

.daftar-isi {
  max-width: 940px;
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
}

/* Tajuk seksyen borang — ia memisahkan kumpulan medan, jadi ia perlu
   kelihatan sebagai pemisah dan bukan sebagai label medan lain. */
.daftar-seksyen {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .875rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--atom-border);
  font-size: var(--atom-fs-md);
  font-weight: 600;
  color: var(--atom-primary);
}

.daftar-seksyen .bi { font-size: 1rem; }

/* Pilihan jenis pendaftaran (DPB-01) — dua laluan yang borangnya
   berlainan, jadi kedua-duanya dipapar sebagai kad bersebelahan dengan
   huraian, bukan radio kecil yang mudah terlepas pandang. */
.jenis-daftar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.jenis-daftar-kad {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  cursor: pointer;
  transition: border-color var(--atom-transition), background var(--atom-transition);
}

.jenis-daftar-kad:hover { border-color: var(--atom-border-strong); }

.jenis-daftar-kad.is-dipilih {
  border-color: var(--atom-primary);
  background: var(--atom-primary-light);
}

.jenis-daftar-kad .form-check-input { margin-top: .2rem; flex-shrink: 0; }

.jenis-daftar-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--atom-radius);
  background: var(--atom-surface-sunken);
  color: var(--atom-primary);
  font-size: 1.125rem;
}

.jenis-daftar-teks { display: flex; flex-direction: column; gap: .125rem; }
.jenis-daftar-tajuk { font-weight: 600; color: var(--atom-text); }
.jenis-daftar-hurai { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

@media (max-width: 575.98px) {
  .jenis-daftar { grid-template-columns: 1fr; }
}

/* Tab laluan log masuk (DPB-02) — pengguna memilih laluan sendiri;
   sistem tidak mengesan jenis pengguna. */
/* Log masuk pemohon guna pemilih .auth-jenis yang sama seperti log masuk
   utama eATOM; pautan pulih duduk rapat di bawah kata laluan. */

.pautan-pulih {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin: -.25rem 0 1rem;
  font-size: var(--atom-fs-xs);
}

.daftar-kaki {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--atom-border);
}

.daftar-nota {
  margin: 1rem 0 0;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  text-align: center;
}

/* Captcha aritmetik: soalan, butang tukar, dan kotak jawapan pada satu
   baris supaya hubungan antara ketiga-tiganya jelas tanpa label tambahan. */
.captcha-baris {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.captcha-soalan {
  flex: 0 0 auto;
  padding: .45rem .75rem;
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-sunken);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  user-select: none;
}

.captcha-baris .form-control { max-width: 8rem; }

/* Panel profil pekerja — rujukan, bukan borang. Latar berbeza supaya
   jelas ia dipapar oleh sistem dan bukan diisi pemohon. */
.profil-pekerja {
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.profil-tajuk {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .625rem;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
}
.profil-senarai {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .375rem 1.25rem;
  margin: 0;
}
.profil-baris { display: flex; flex-direction: column; min-width: 0; }
.profil-baris dt {
  font-size: var(--atom-fs-xs);
  font-weight: 500;
  color: var(--atom-text-muted);
}
.profil-baris dd { margin: 0; font-size: var(--atom-fs-sm); }
.profil-nota {
  margin-top: .75rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
@media (max-width: 767.98px) {
  .profil-senarai { grid-template-columns: minmax(0, 1fr); }
}

/* Medan yang diisi daripada rekod, bukan oleh pemohon. Ia kelihatan
   berbeza daripada medan yang boleh ditaip supaya pemohon tidak cuba
   menyuntingnya lalu tertanya-tanya mengapa ia tidak berubah. */
.form-control.is-baca,
.form-control.is-baca:focus {
  background-color: var(--atom-surface-sunken);
  color: var(--atom-text-muted);
  box-shadow: none;
}

/* Perakuan: pernyataan yang diperaku ialah labelnya sendiri, jadi ia
   dibenarkan membalut dan tidak dipaksa satu baris. */
.perakuan-medan .form-check-label { font-size: var(--atom-fs-sm); }

/* Jadual boleh tambah-baris dalam borang. Sel menjadi kawalan input,
   jadi padding sel dikecilkan supaya barisnya tidak setinggi dua baris
   teks biasa. */
.jadual-medan .table-wrap { margin-bottom: .25rem; }
.jadual-medan .jadual-baris th { white-space: nowrap; }
.jadual-medan .jadual-baris td { padding: .35rem .5rem; vertical-align: middle; }
.jadual-medan .jadual-baris td .form-control,
.jadual-medan .jadual-baris td .form-select { min-width: 8rem; }
.jadual-medan .jadual-kosong {
  margin: 0;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.jadual-medan .table-wrap[hidden] { display: none !important; }

/* Jadual yang sama dalam modal butiran ialah paparan sahaja. */
.detail-row .jadual-baris td { padding: .35rem .5rem; }

/* `hidden` mesti mengatasi `display` yang datang daripada kelas komponen —
   tanpa ini, blok yang disembunyikan melalui JS tetap kelihatan. */
.alert-atom[hidden],
.card[hidden],
.welcome-actions .btn[hidden] { display: none !important; }

/* Dropzone yang sudah menerima fail kekal jelas berbeza daripada yang
   masih kosong. */
.form-dropzone.is-diisi {
  border-style: solid;
  border-color: var(--atom-success, #157347);
  background: var(--atom-card);
}

.id-jana {
  font-size: var(--atom-fs-lg);
  letter-spacing: .04em;
  color: var(--atom-primary);
}

@media (max-width: 575.98px) {
  .daftar-kaki { flex-direction: column-reverse; }
  .daftar-kaki .btn { width: 100%; }
}

/* Nama pegawai membawa kiraan portfolionya di bawahnya — dua nombor yang
   berbeza maknanya: berapa syarikat dipegang, dan berapa permohonan
   syarikat itu yang masih bergerak. */
.beban-nama { display: flex; flex-direction: column; }

.beban-sub {
  font-size: var(--atom-fs-xs);
  font-weight: 400;
  color: var(--atom-text-muted);
}

/* Kad butiran penuh OBTL / RPO dalam borang lesen — setiap orang yang
   ditambah dipaparkan dengan semua maklumatnya, bukan nama sahaja. */
.pra-senarai { display: flex; flex-direction: column; gap: .625rem; }
.pra-kad {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  padding: .625rem .875rem .25rem;
}
.pra-kad-kepala {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--atom-border);
}
.pra-kad-nama { font-weight: 600; color: var(--atom-text); }

/* Panel jenama log masuk pemohon bertukar ikut Warga ATOM / Pelanggan. */
.auth-brand-body[hidden] { display: none; }

/* ==========================================================================
   Siasatan & Pendakwaan (espp/siasatan/*)
   Meter KPI 180 hari, rakaman percakapan, hierarki mahkamah. Penunjuk
   langkah .ps-langkah dan .demo-peranan-bar datang daripada app.css kongsi.
   ========================================================================== */
.espp .cell-strong { font-weight: 600; color: var(--atom-text); }
/* Meter KPI 180 hari */
.espp-kol-kpi { min-width: 180px; }
.espp-kpi .progress-label { gap: .5rem; }
.espp-kpi-teks { font-weight: 600; }
.espp-kpi-teks.is-danger { color: var(--atom-danger); }
.espp-kpi-teks.is-warning { color: var(--atom-warning); }
.espp-kpi.is-penuh .progress { height: .5rem; }

/* Langkah dilangkau (cth. representasi apabila OKS mengaku salah) */
.ps-langkah-item.is-langkau .ps-langkah-no { border-style: dashed; color: var(--atom-text-muted); }
.ps-langkah-item.is-langkau .ps-langkah-label { color: var(--atom-text-muted); }

.espp-baris-pudar > td { color: var(--atom-text-secondary); }

/* Rakaman percakapan */
.espp-percakapan { padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.espp-percakapan + .espp-percakapan { margin-top: .75rem; }
.espp-percakapan-teks { white-space: pre-line; font-size: var(--atom-fs-sm); padding: .75rem; background: var(--atom-surface-alt); border-radius: var(--atom-radius); }

/* Hierarki & peringkat mahkamah */
.espp-hierarki { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.espp-mahkamah {
  padding: .25rem .75rem; border: 1px dashed var(--atom-border-strong); border-radius: 999px;
  font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted);
}
.espp-mahkamah.is-dilalui { border-style: solid; color: var(--atom-text-secondary); background: var(--atom-surface-alt); }
.espp-mahkamah.is-semasa { border-style: solid; border-color: var(--atom-primary); color: var(--atom-primary); background: var(--atom-primary-light); }
.espp-peringkat { padding: .875rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.espp-peringkat + .espp-peringkat { margin-top: .75rem; }
.espp-peringkat.is-semasa { border-color: var(--atom-primary); box-shadow: inset 3px 0 0 var(--atom-primary); }
.espp-peringkat-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.espp-peringkat-kepala .fs-xs { margin-left: auto; }

@media print {
  .espp .demo-peranan-bar, .espp .page-header-actions, .espp .alert-atom .btn, .espp .nav-tabs-atom { display: none !important; }
  .espp .tab-content > .tab-pane { display: block !important; opacity: 1 !important; margin-bottom: 1rem; }
}

/* ==========================================================================
   Pengurusan Tindakbalas Nuklear — SPTN (espp/tindakbalas/*)
   Penanda live insiden, simulasi aplikasi mudah alih, Senarai PTN.
   ========================================================================== */
.sptn-live {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  padding: .0625rem .5rem; border-radius: 999px; font-size: var(--atom-fs-xs); font-weight: 700;
  letter-spacing: .04em; color: var(--atom-danger); background: var(--atom-danger-light);
}
.sptn-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--atom-danger); animation: sptn-denyut 1.4s ease-in-out infinite; }
@keyframes sptn-denyut { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sptn-live-dot { animation: none; } }

.sptn-live-senarai > li + li { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--atom-border); }
.sptn-kronologi { max-height: 30rem; overflow-y: auto; }

/* Senarai PTN */
.sptn-sumber {
  display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 3px;
  font-size: .625rem; font-weight: 700; color: var(--atom-info); background: var(--atom-info-light); vertical-align: middle;
}
.sptn-label-kecil { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-muted); margin-bottom: .375rem; }
.sptn-ahli { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--atom-border); }
.table-atom tbody tr.sptn-roster-kini > td { background: var(--atom-primary-light); }

/* Simulasi aplikasi mudah alih */
.sptn-fon {
  max-width: 360px; margin-inline: auto; height: 680px; display: flex; flex-direction: column;
  border: 10px solid #1f2937; border-radius: 2.25rem; overflow: hidden;
  background: var(--atom-card); box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.sptn-fon-bar { display: flex; justify-content: space-between; padding: .375rem 1rem; font-size: var(--atom-fs-xs); font-weight: 600; background: #1f2937; color: #fff; }
.sptn-fon-skrin { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sptn-fon-kepala { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; background: var(--atom-primary); color: #fff; }
.sptn-fon-tajuk { font-weight: 700; }
.sptn-fon-sub { font-size: var(--atom-fs-xs); opacity: .85; }
.sptn-fon-balik { border: 0; background: transparent; color: inherit; padding: .25rem; font-size: 1.125rem; line-height: 1; }
.sptn-fon-isi { flex: 1; overflow-y: auto; padding: 1rem; background: var(--atom-surface-alt); }
.sptn-fon-label { font-size: var(--atom-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-muted); margin-bottom: .5rem; }
.sptn-fon-kad {
  display: block; width: 100%; text-align: left; margin-bottom: .5rem; padding: .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); color: var(--atom-text);
}
.sptn-fon-kad:hover, .sptn-fon-kad:focus-visible { border-color: var(--atom-primary); }
.sptn-fon-id { margin-bottom: 1rem; padding: .75rem; text-align: center; font-size: var(--atom-fs-sm); border: 1px dashed var(--atom-primary); border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary); }
.sptn-fon-borang { margin-bottom: .75rem; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.sptn-fon-kunci { margin-bottom: .75rem; padding: .625rem .75rem; font-size: var(--atom-fs-xs); border-radius: var(--atom-radius); background: var(--atom-neutral-light); color: var(--atom-text-secondary); }
.sptn-fon-k { position: relative; margin-bottom: .5rem; padding: .5rem .75rem; border-left: 3px solid var(--atom-primary); border-radius: 0 var(--atom-radius) var(--atom-radius) 0; background: var(--atom-card); }
.sptn-fon-k.is-komen { border-left-color: var(--atom-warning); background: var(--atom-warning-light); }

/* --------------------------------------------------------------------------
   Templat dokumen prasyarat (LEM-TEK) — Bahagian → sub-bahagian → medan
   -------------------------------------------------------------------------- */
.tp-tajuk.tp-aras-1 { margin-top: 1.25rem; padding: .625rem .875rem; border-radius: var(--atom-radius);
  background: var(--atom-primary-light, #fff1ea); border-left: 4px solid var(--atom-primary); }
.tp-tajuk.tp-aras-1 .tp-tajuk-teks { margin: 0; font-size: 1rem; font-weight: 700; color: var(--atom-text); }
.tp-tajuk.tp-aras-2, .tp-tajuk.tp-aras-3, .tp-tajuk.tp-aras-4, .tp-tajuk.tp-aras-5 { margin-top: .5rem; border-left: 2px solid var(--atom-border); }
.tp-tajuk.tp-aras-2 { padding-left: 1rem; }
.tp-tajuk.tp-aras-3 { margin-left: 1.5rem; padding-left: 1rem; }
.tp-tajuk.tp-aras-4 { margin-left: 3rem; padding-left: 1rem; }
.tp-tajuk.tp-aras-5 { margin-left: 4.5rem; padding-left: 1rem; }
.tp-tajuk:not(.tp-aras-1) .tp-tajuk-teks { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--atom-text); }
.tp-tajuk.tp-aras-3 .tp-tajuk-teks, .tp-tajuk.tp-aras-4 .tp-tajuk-teks, .tp-tajuk.tp-aras-5 .tp-tajuk-teks { font-size: .875rem; }
.tp-medan.tp-dalam-2 { padding-left: 1rem; }
.tp-medan.tp-dalam-3 { padding-left: 2.5rem; }
.tp-medan.tp-dalam-4 { padding-left: 4rem; }
.tp-medan.tp-dalam-5, .tp-medan.tp-dalam-6 { padding-left: 5.5rem; }
@media (max-width: 575.98px) {
  .tp-tajuk.tp-aras-3, .tp-tajuk.tp-aras-4, .tp-tajuk.tp-aras-5 { margin-left: .75rem; }
  .tp-medan.tp-dalam-3, .tp-medan.tp-dalam-4, .tp-medan.tp-dalam-5, .tp-medan.tp-dalam-6 { padding-left: 1.25rem; }
}
.tp-cara { margin-bottom: .25rem; }
.tp-tajuk-baca { margin: 1rem 0 .25rem; font-weight: 700; color: var(--atom-text); }
.tp-tajuk-baca:not(.tp-aras-1) { margin-top: .5rem; padding-left: .75rem; font-weight: 600; border-left: 2px solid var(--atom-border); }
.tp-tajuk-baca.tp-aras-3 { margin-left: 1rem; } .tp-tajuk-baca.tp-aras-4 { margin-left: 2rem; } .tp-tajuk-baca.tp-aras-5 { margin-left: 3rem; }
.tp-sub-baris td:nth-child(2) { padding-left: calc(var(--tp-dalam, 1) * 1.25rem); }
.tp-medan-anak td:first-child { padding-left: 1.75rem; }

/* Borang berlangkah dalam halaman — dokumen prasyarat (permohonan-am.js) */
.am-halaman-langkah { padding: 0 1.25rem; border-bottom: 1px solid var(--atom-border); background: var(--atom-card); }
.am-halaman-langkah .borang-progress { margin: 0 -1.25rem; }
.am-stepper .langkah-item { flex: 0 0 auto; width: 8.5rem; }
.am-stepper .langkah-item.is-tidak-berkenaan { opacity: .45; }
.am-halaman .hal-tutup { display: none !important; }
.am-halaman-kaki {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1.25rem; background: var(--atom-card); border-top: 1px solid var(--atom-border);
  border-radius: 0 0 var(--atom-radius-md) var(--atom-radius-md);
}
@media (max-width: 575.98px) {
  .am-halaman-langkah { padding: 0 1rem; }
  .am-halaman-langkah .borang-progress { margin: 0 -1rem; }
  .am-stepper .langkah-item { width: 6.5rem; }
  .am-halaman-kaki { padding: .75rem 1rem; }
}
.am-stepper .langkah-teks { width: 100%; }
/* Borang lesen dalam halaman: langkah memenuhi lebar penuh — lajur sama
   lebar, bulatan di tengah lajur, garis penyambung antara bulatan. */
@media (min-width: 576px) {
  .borang-lesen-halaman .am-stepper .langkah-item { flex: 1 1 0; width: auto; position: relative; }
  .borang-lesen-halaman .am-stepper .langkah-item + .langkah-item::before {
    position: absolute; top: calc(1rem - 1px); left: calc(-50% + 1.75rem); right: calc(50% + 1.75rem);
    width: auto; margin: 0;
  }
}

.am-stepper .langkah-huraian { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Anak tambahan pemohon (asingkan jawapan kepada a, b, c) */
.anak-tambahan:not(:empty) { margin-top: .75rem; display: flex; flex-direction: column; gap: .75rem; }
.anak-pemohon { padding: .75rem; margin-left: 1rem; border-left: 2px solid var(--atom-border); background: var(--atom-bg-subtle, var(--atom-neutral-light)); border-radius: 0 var(--atom-radius-sm, .375rem) var(--atom-radius-sm, .375rem) 0; }
.anak-pemohon-huruf { flex: 0 0 auto; min-width: 1.5rem; font-weight: 600; color: var(--atom-text-secondary); }
.anak-pemohon-baca { margin: .5rem 0 0 1rem; padding-left: .75rem; border-left: 2px solid var(--atom-border); }

/* Halaman butiran prasyarat — semakan item demi item (permohonan-am.js) */
.semak-senarai { display: flex; flex-direction: column; gap: .5rem; }
.semak-senarai > .tp-tajuk-baca { margin-top: .75rem; }
.semak-senarai > .tp-tajuk-baca.tp-aras-1 { margin-top: 0; font-size: 1.0625rem; padding: .625rem .875rem; border-left: 3px solid var(--atom-primary); background: var(--atom-primary-50, var(--atom-neutral-light)); border-radius: var(--atom-radius-sm, .375rem); }
.semak-item { padding: .75rem .875rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm, .375rem); background: var(--atom-card); }
.semak-item.tp-dalam-3 { margin-left: 1rem; } .semak-item.tp-dalam-4 { margin-left: 2rem; } .semak-item.tp-dalam-5, .semak-item.tp-dalam-6 { margin-left: 3rem; }
.semak-item.is-ok { border-color: var(--atom-success, #1f8a4c); background: var(--atom-success-light, #f1faf4); }
.semak-item.is-query { border-color: var(--atom-warning, #c98a06); background: var(--atom-warning-light, #fff8e6); }
.semak-kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.semak-label { font-weight: 600; color: var(--atom-text); }
.semak-kawal { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.semak-jawapan { margin-top: .375rem; color: var(--atom-text-secondary); }
.semak-teks { white-space: pre-line; }
.semak-query-ruang { margin-top: .625rem; }
.semak-query-nota { margin: .5rem 0; }
.semak-pinda { margin-top: .25rem; }
.am-stepper .langkah-item.ada-query .langkah-bulat { background: var(--atom-warning-light, #fff3cd); color: var(--atom-warning, #a86f00); }
@media (max-width: 575.98px) {
  .semak-item.tp-dalam-3, .semak-item.tp-dalam-4, .semak-item.tp-dalam-5, .semak-item.tp-dalam-6 { margin-left: .5rem; }
}
/* Siasatan — remark rujukan perlu buka IP (penemuan / ditambah sendiri) */
.espp-remark { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; padding: .25rem .5rem; border-left: 2px solid var(--atom-warning); background: var(--atom-surface-alt); color: var(--atom-text-secondary); border-radius: 0 var(--atom-radius) var(--atom-radius) 0; }

/* Akses Menu OBTP (pemohon/akaun/akses-obtp.html) — gaya Peranan Sistem */
.sa-ms-anak { list-style: none; }
.sa-ms-anak > .sa-ms-senarai { margin: 0; padding: 0; }

/* K6a: penanda status syarikat (AtomPenanda) di sebelah nama syarikat */
.penanda-syarikat { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.penanda-syarikat .badge-atom { font-size: .6875rem; white-space: nowrap; }

/* SPTN — Kalendar Aktiviti SPTN (tindakbalas/aktiviti-sptn.html)
   Menggunakan semula komponen .kal-* (Kalendar Penceramah, app.css); warna
   kategori melalui --akt-c / --akt-bg. Rekod automatik daripada submodul
   lain (.is-modul) bergaris putus-putus. */
/* Pengujian: ungu tersendiri — primary & danger kedua-duanya merah dalam tema ini */
.is-pengujian  { --akt-c: #7c3aed; --akt-bg: color-mix(in srgb, #7c3aed 13%, var(--atom-card)); }
.is-pengesanan { --akt-c: var(--atom-danger);  --akt-bg: var(--atom-danger-light); }
.is-lawatan    { --akt-c: var(--atom-info);    --akt-bg: var(--atom-info-light); }
.is-simulasi   { --akt-c: var(--atom-success); --akt-bg: var(--atom-success-light); }
.is-luar       { --akt-c: var(--atom-accent);  --akt-bg: var(--atom-accent-light); }
.is-insiden    { --akt-c: var(--atom-warning); --akt-bg: var(--atom-warning-light); }
.akt-nilai-pengujian  { color: #7c3aed; }
.akt-nilai-pengesanan { color: var(--atom-danger); }
.akt-nilai-lawatan    { color: var(--atom-info); }
.akt-nilai-simulasi   { color: var(--atom-success); }
.akt-nilai-luar       { color: var(--atom-accent); }
.akt-nilai-insiden    { color: var(--atom-warning); }

.akt-filter-grid { grid-template-columns: minmax(200px, 1fr) minmax(180px, .7fr) minmax(0, 2.3fr); }
.kal-chip[class*="is-"] .kal-swatch { color: var(--akt-c); background: var(--akt-c); }
.kal-chip.is-mati .kal-swatch { background: transparent; }
.kal-pil[class*="is-"] { color: var(--akt-c); background: var(--akt-bg); }
.kal-pil.is-modul { background: var(--atom-card); border: 1px dashed var(--akt-c); border-left: 3px solid var(--akt-c); }
.kal-pil.is-dicadang { opacity: .75; font-style: italic; }
.kal-titik[class*="is-"] { background: var(--akt-c); }
.kal-badge[class*="is-"] { color: var(--akt-c); background: var(--akt-bg); border-color: var(--akt-bg); }
.akt-modul { font-weight: 500; }

/* Item panel hari — butang */
.akt-item { width: 100%; text-align: left; font: inherit; color: inherit; border-left-color: var(--akt-c); cursor: pointer;
  transition: background-color var(--atom-transition), border-color var(--atom-transition); }
.akt-item:hover { background: var(--atom-surface-alt); }
.akt-item:focus-visible { outline: 0; box-shadow: var(--atom-shadow-focus); }

.akt-roster { display: flex; flex-direction: column; gap: .375rem; font-size: var(--atom-fs-sm); }
.akt-roster > div:not(.fs-xs) { display: flex; justify-content: space-between; gap: .75rem; }
.akt-roster .kal-panel-label { flex: 0 0 auto; }
.akt-roster > div > span:last-child { text-align: right; font-weight: 500; }

/* Statistik bulanan */
.akt-stat tfoot td { padding: .75rem 1rem; font-weight: 700; border-top: 2px solid var(--atom-border-strong); }
.akt-nilai {
  display: inline-block; min-width: 2.25rem; padding: .125rem .5rem; border-radius: var(--atom-radius-pill);
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akt-c);
  background: linear-gradient(90deg, var(--akt-bg) var(--akt-isi, 0%), var(--atom-surface-alt) var(--akt-isi, 0%));
}
@media (max-width: 991.98px) { .akt-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .akt-filter-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Senarai semak penilaian tapak (ATOM-PLN-3 Lampiran 1–7) — senarai-semak-tapak.js ---- */
.sst { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); padding: .875rem 1rem; background: var(--atom-card); }
.sst-tajuk { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.sst-tajuk h6 { font-weight: 600; }
.sst-kepala-borang { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sst-kepala { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem .75rem; margin-bottom: .75rem; }
.sst-jadual > tbody > tr > td { vertical-align: top; }
.sst-jadual .sst-no { width: 3rem; white-space: nowrap; }
.sst-jadual .sst-yt { width: 8.5rem; white-space: nowrap; }
.sst-jadual .sst-nota-sel { width: 14rem; }
.sst-bahagian > td { background: var(--atom-surface-sunken) !important; font-weight: 600; font-size: var(--atom-fs-sm); }
.sst-perkara { line-height: 1.4; }
.sst-sub { margin: .25rem 0 0 1.125rem; padding: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.sst-nota { margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-info); }
.sst-medan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .375rem .5rem; margin-top: .5rem; }
.sst-medan.is-penuh { grid-column: 1 / -1; }
.sst-medan .form-label { margin-bottom: .125rem; font-size: var(--atom-fs-xs); }
.sst-medan-baca { display: block; font-size: var(--atom-fs-sm); margin-top: .25rem; }
.sst-pilih { display: inline-flex; gap: .25rem; }
.sst-v { font-weight: 600; }
.sst-v.is-ya { color: var(--atom-success); }
.sst-v.is-tidak { color: var(--atom-danger); }
.sst-v.is-kosong { color: var(--atom-text-muted); }
.sst-kaki { border-top: 1px solid var(--atom-border); padding-top: .75rem; margin-top: .5rem; }
.sst-kaki-blok h6 { font-size: var(--atom-fs-sm); font-weight: 600; margin-bottom: .5rem; }