/* ==========================================================================
   eATOM — App / Page Composition
   Style peringkat halaman yang membina di atas components.css.
   Tambah seksyen baharu di sini apabila modul baharu dibangunkan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dashboard
   -------------------------------------------------------------------------- */
.welcome-banner {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  border-radius: var(--atom-radius-md);
  background: var(--atom-primary);
  color: #fff;
}
.welcome-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% 20%, rgba(255, 255, 255, .08) 0, transparent 48%);
  pointer-events: none;
}
.welcome-banner > * { position: relative; z-index: 1; }
.welcome-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.welcome-text { flex: 1 1 22rem; min-width: 0; }
.welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  margin-bottom: .5rem;
}
.welcome-title {
  font-size: var(--atom-fs-2xl);
  font-weight: 700;
  letter-spacing: -.022em;
  color: #fff;
  margin: 0 0 .375rem;
}
.welcome-subtitle {
  font-size: var(--atom-fs-md);
  color: rgba(255, 255, 255, .76);
  margin: 0;
  max-width: 40rem;
}
.welcome-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; }
.welcome-actions .btn-secondary {
  --bs-btn-bg: rgba(255, 255, 255, .1);
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .24);
  --bs-btn-hover-bg: rgba(255, 255, 255, .18);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .32);
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-color: #fff;
}
.welcome-actions .btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--atom-primary);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--atom-primary-light);
  --bs-btn-hover-color: var(--atom-primary);
  --bs-btn-hover-border-color: var(--atom-primary-light);
}

@media (max-width: 575.98px) {
  .welcome-banner { padding: 1.25rem; }
  .welcome-title { font-size: var(--atom-fs-xl); }
  .welcome-actions { width: 100%; }
  .welcome-actions .btn { flex: 1 1 auto; }
}

/* Jaringan statistik */
.stat-grid { margin-bottom: 1.5rem; }

/* Blok ringkasan kecil */
.mini-stat {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.mini-stat-value { font-size: var(--atom-fs-lg); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mini-stat-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* --- Pencapaian sasaran 40 jam (boleh klik -> Rekod Latihan) ---
   Warna hijau/ambar ialah pasangan status, bukan siri kategorikal. CVD
   AE protan 6.8 berada dalam jalur lantai, jadi setiap segmen WAJIB
   membawa pengekodan kedua: ikon, label terus, dan jurang 2px. */
.pencapaian-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}
.pencapaian-donut { position: relative; }
.pencapaian-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  pointer-events: none;   /* klik mesti sampai ke canvas */
  text-align: center;
}
.pencapaian-center-nilai {
  font-size: var(--atom-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--atom-text);
  font-variant-numeric: tabular-nums;
}
.pencapaian-center-label {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  max-width: 7.5rem;
}

.pencapaian-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.pencapaian-tile {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition),
              background-color var(--atom-transition);
}
.pencapaian-tile:hover,
.pencapaian-tile:focus-visible {
  background: var(--atom-card);
  border-color: var(--atom-border-strong);
  box-shadow: var(--atom-shadow-sm);
  color: inherit;
}
.pencapaian-tile.is-capai { border-left-color: var(--atom-success); }
.pencapaian-tile.is-belum { border-left-color: var(--atom-warning); }

.pencapaian-tile-ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--atom-radius-sm);
  font-size: 1.0625rem;
}
.pencapaian-tile.is-capai .pencapaian-tile-ikon {
  background: var(--atom-success-light);
  color: var(--atom-success);
}
.pencapaian-tile.is-belum .pencapaian-tile-ikon {
  background: var(--atom-warning-light);
  color: var(--atom-warning);
}

.pencapaian-tile-body { flex: 1 1 auto; min-width: 0; }
.pencapaian-tile-label {
  display: block;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--atom-text-secondary);
}
.pencapaian-tile-nilai {
  display: block;
  margin-top: .125rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-muted);
}
.pencapaian-tile-nilai strong {
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  color: var(--atom-text);
  font-variant-numeric: tabular-nums;
  margin-right: .25rem;
}
.pencapaian-tile-bar {
  display: block;
  height: 4px;
  margin-top: .5rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.pencapaian-tile-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--atom-radius-pill);
  transition: width var(--atom-transition-slow);
}
.pencapaian-tile.is-capai .pencapaian-tile-bar > span { background: var(--atom-success); }
.pencapaian-tile.is-belum .pencapaian-tile-bar > span { background: var(--atom-warning); }

.pencapaian-tile-arrow {
  flex: 0 0 auto;
  color: var(--atom-text-muted);
  transition: transform var(--atom-transition), color var(--atom-transition);
}
.pencapaian-tile:hover .pencapaian-tile-arrow {
  transform: translateX(2px);
  color: var(--atom-primary);
}

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

@media (max-width: 991.98px) {
  .pencapaian-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* Elak donat terapung di tengah ruang lebar apabila lajur bertindan */
  .pencapaian-donut { max-width: 200px; margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .pencapaian-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   2. Profile
   -------------------------------------------------------------------------- */
.profile-hero {
  position: relative;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  background: var(--atom-card);
  box-shadow: var(--atom-shadow-xs);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.profile-cover {
  height: 104px;
  background: var(--atom-primary);
  position: relative;
}
.profile-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .09) 0, transparent 50%);
}
.profile-hero-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
/* Hanya avatar yang menindih kawasan cover — teks identiti kekal di bawahnya */
.profile-avatar-wrap { position: relative; flex: 0 0 auto; margin-top: -68px; }
.profile-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--atom-card);
  border-radius: 50%;
  background: var(--atom-card);
  color: var(--atom-text-secondary);
  box-shadow: var(--atom-shadow-sm);
  font-size: .8125rem;
  transition: color var(--atom-transition), background-color var(--atom-transition);
}
.profile-avatar-edit:hover { background: var(--atom-primary); color: #fff; }

.profile-identity { flex: 1 1 18rem; min-width: 0; padding-bottom: .125rem; }
.profile-name {
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .1875rem;
  line-height: 1.3;
}
.profile-position { font-size: var(--atom-fs-base); color: var(--atom-text-secondary); margin: 0 0 .625rem; }
.profile-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.profile-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; padding-bottom: .125rem; }

.profile-tabs-wrap {
  padding-inline: 1.5rem;
  border-top: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
}

@media (max-width: 767.98px) {
  .profile-hero-body { padding-inline: 1.25rem; }
  .profile-avatar-wrap { margin-top: -56px; }
  .profile-tabs-wrap { padding-inline: 1.25rem; }
  .profile-hero-actions { width: 100%; }
  .profile-hero-actions .btn { flex: 1 1 auto; }
}

/* Senarai maklumat kelengkapan profil */
.completion-list { list-style: none; margin: 0; padding: 0; }
.completion-list li {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 0;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
  border-bottom: 1px dashed var(--atom-border);
}
.completion-list li:last-child { border-bottom: 0; }
.completion-list .bi-check-circle-fill { color: var(--atom-success); }
.completion-list .bi-circle { color: var(--atom-border-strong); }
.completion-list .completion-status { margin-left: auto; font-size: var(--atom-fs-xs); font-weight: 600; }

/* Senarai sesi log masuk */
.session-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--atom-border-subtle);
}
.session-item:last-child { border-bottom: 0; }
.session-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--atom-radius);
  background: var(--atom-surface-sunken);
  color: var(--atom-text-secondary);
  font-size: 1.0625rem;
}
.session-body { flex: 1 1 auto; min-width: 0; }
.session-title { font-size: var(--atom-fs-base); font-weight: 600; margin: 0; }
.session-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin: .125rem 0 0; }

/* --------------------------------------------------------------------------
   3. Components showcase (components.html)
   -------------------------------------------------------------------------- */
.showcase-layout {
  display: grid;
  /* minmax(0, 1fr) — tanpa ini, kandungan lebar (jadual) memaksa trek grid
     melebihi bekasnya dan menyebabkan skrol mendatar pada skrin kecil. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.showcase-layout > * { min-width: 0; }
@media (min-width: 1200px) {
  .showcase-layout { grid-template-columns: 208px minmax(0, 1fr); }
}

.showcase-toc {
  position: sticky;
  top: calc(var(--atom-navbar-height) + 1.5rem);
  display: none;
}
@media (min-width: 1200px) { .showcase-toc { display: block; } }
.showcase-toc-title {
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
  padding: 0 .75rem .5rem;
}
.showcase-toc ul { list-style: none; margin: 0; padding: 0; }
.showcase-toc a {
  display: block;
  padding: .375rem .75rem;
  border-left: 2px solid var(--atom-border);
  color: var(--atom-text-secondary);
  font-size: var(--atom-fs-sm);
  font-weight: 500;
  transition: color var(--atom-transition), border-color var(--atom-transition);
}
.showcase-toc a:hover { color: var(--atom-primary); border-left-color: var(--atom-border-strong); }
.showcase-toc a.is-active { color: var(--atom-primary); font-weight: 600; border-left-color: var(--atom-primary); }

.showcase-section { scroll-margin-top: calc(var(--atom-navbar-height) + 1rem); }
.showcase-section + .showcase-section { margin-top: 1.5rem; }
.showcase-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .875rem;
}
.showcase-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--atom-fs-lg);
  font-weight: 600;
  margin: 0;
}
.showcase-section-title .bi { color: var(--atom-primary); font-size: 1rem; }
.showcase-section-desc { font-size: var(--atom-fs-sm); color: var(--atom-text-muted); margin: 0; }

.showcase-block { padding: 1.25rem; }
.showcase-block + .showcase-block { border-top: 1px solid var(--atom-border); }
.showcase-block-label {
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
  margin-bottom: .875rem;
}
.showcase-row { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }

.token-swatch {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.token-chip {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--atom-radius-sm);
  border: 1px solid rgba(74, 22, 12, .12);
}
.token-name { display: block; font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.3; }
.token-hex {
  display: block;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
}

.type-sample { padding: .625rem 0; border-bottom: 1px dashed var(--atom-border); }
.type-sample:last-child { border-bottom: 0; }
.type-sample-meta {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  margin-top: .1875rem;
}

/* --------------------------------------------------------------------------
   3b. Rekod Latihan (BF-EA-SPSM-LAT)
   Jadual berkumpulan mengikut kakitangan — meniru struktur Excel rujukan.
   -------------------------------------------------------------------------- */

/* Petunjuk ringkas di atas jadual */
.petunjuk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
}
.petunjuk-label {
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.petunjuk-item {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
  font-weight: 500;
}
.petunjuk-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(74, 22, 12, .16);
  flex: 0 0 auto;
}
/* Warna diambil terus daripada Excel rujukan */
.petunjuk-swatch.is-bakal  { background: #FFE599; }
.petunjuk-swatch.is-capai  { background: #D9EAD3; }

/* Jalur status — mesti boleh membalut pada skrin sempit */
.petunjuk-bands {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .petunjuk-bands { margin-left: 0; width: 100%; }
}

/* Bar penapis padat */
.filter-bar { padding: 1rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  align-items: end;
}
.filter-field .form-label {
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  color: var(--atom-text-muted);
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Medan teks perlu lebih lebar daripada dropdown */
.filter-field.is-wide { grid-column: span 2; }
@media (max-width: 575.98px) { .filter-field.is-wide { grid-column: span 1; } }

.filter-actions { display: flex; gap: .5rem; }
.filter-actions .btn { flex: 1 1 auto; }
@media (min-width: 992px) {
  .filter-actions { flex: 0 0 auto; }
  .filter-actions .btn { flex: 0 0 auto; }
}

/* Penapis aktif — penanda kekal bahawa senarai sedang ditapis
   (contohnya apabila dibuka daripada carta pencapaian Dashboard) */
.filter-aktif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px dashed var(--atom-border);
}
.filter-aktif-label {
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atom-text-muted);
}
.filter-aktif-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  min-width: 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .5rem .1875rem .625rem;
  border: 1px solid var(--atom-primary-soft);
  border-radius: var(--atom-radius-pill);
  background: var(--atom-primary-light);
  font-size: var(--atom-fs-xs);
  font-weight: 500;
  color: var(--atom-primary-900);
}
.filter-chip-buang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--atom-primary-700);
  line-height: 1;
  transition: background-color var(--atom-transition);
}
.filter-chip-buang:hover { background: var(--atom-primary-soft); }
.filter-chip-buang i { font-size: .6875rem; }
.filter-aktif .btn { margin-left: auto; }
@media (max-width: 575.98px) {
  .filter-aktif .btn { margin-left: 0; }
}

/* Ringkasan padat */
.ringkasan-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--atom-border);
}
.ringkasan-item {
  padding: .875rem 1.25rem;
  border-right: 1px solid var(--atom-border);
}
.ringkasan-item:last-child { border-right: 0; }
.ringkasan-nilai {
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ringkasan-label {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  margin-top: .125rem;
}
.ringkasan-nilai.is-capai { color: var(--atom-success); }
.ringkasan-nilai.is-belum { color: var(--atom-warning); }
/* Tahap paling kritikal — cth. kiraan dokumen Rahsia dalam eDOC */
.ringkasan-nilai.is-bahaya { color: var(--atom-danger); }

/* --- Jadual rekod latihan --- */
.table-latihan { --atom-freeze-offset: 56px; --atom-freeze-right: 48px; }
/* Lebar tetap supaya offset lajur beku sentiasa tepat */
.table-latihan .col-num { width: 56px; min-width: 56px; }
.table-latihan thead th { white-space: nowrap; }
.table-latihan td:not(.cell-emp):not(.cell-jumlah) { padding-inline: .75rem; }

/* Setiap kakitangan = satu <tbody> supaya pengumpulan jelas dan hover sekumpulan */
.emp-group { border-bottom: 2px solid var(--atom-border); }
.emp-group:last-child { border-bottom: 0; }
.emp-group > tr > td { border-bottom: 1px solid var(--atom-border-subtle); }
.emp-group > tr:last-child > td { border-bottom: 0; }

/* Sel maklumat kakitangan (rowspan) */
.table-latihan .cell-emp {
  vertical-align: top;
  padding-top: .9375rem;
  background: var(--atom-surface-alt);
}
.emp-nama {
  font-weight: 600;
  color: var(--atom-text);
  line-height: 1.35;
  display: block;
  min-width: 10.5rem;
}
.emp-bahagian {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  margin-top: .1875rem;
}

/* Hover pada seluruh kumpulan kakitangan */
.emp-group:hover > tr > td { background: var(--atom-primary-light); }
.emp-group:hover > tr > td.cell-emp { background: var(--atom-primary-soft); }

/* Baris "Bakal Hadir" — kuning, sama seperti Excel */
.emp-group > tr.is-bakal > td:not(.cell-emp) { background: #FFFBEB; }
.emp-group:hover > tr.is-bakal > td:not(.cell-emp) { background: #FEF3C7; }

/* Sel latihan */
.cell-latihan { min-width: 17rem; }
.latihan-tajuk { font-weight: 500; color: var(--atom-text); line-height: 1.45; }
.latihan-meta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .25rem;
  flex-wrap: wrap;
}
.sumber-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 11px;
  color: var(--atom-text-muted);
  cursor: help;
}
.sumber-tag .bi { font-size: .8125rem; }

/* Kategori latihan (Rekod Latihan) — satu warna bagi setiap kategori */
.badge-kategori { padding: .0625rem .4375rem; font-size: 11px; cursor: help; }
.badge-kategori.is-dn          { background: var(--atom-info-light); color: var(--atom-info); border-color: #CCE0F2; }
.badge-kategori.is-ln          { background: #EEF2FF; color: #4338CA; border-color: #DDE3FE; }
.badge-kategori.is-ppk         { background: #F0FDFA; color: #0F766E; border-color: #CCFBF1; }
.badge-kategori.is-fellowship  { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; }
.badge-kategori.is-inisiatif   { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }

.cell-lokasi  { min-width: 8.5rem; color: var(--atom-text-secondary); }
.cell-tarikh  { min-width: 7.5rem; white-space: nowrap; color: var(--atom-text-secondary); }
.cell-anjuran { min-width: 8.5rem; color: var(--atom-text-secondary); }
.cell-tempoh  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Sel JUMLAH (JAM) */
.table-latihan .cell-jumlah {
  vertical-align: top;
  padding-top: .9375rem;
  min-width: 10.5rem;
  background: var(--atom-surface-alt);
}
.emp-group:hover > tr > td.cell-jumlah { background: var(--atom-primary-soft); }
.jumlah-nilai {
  font-size: var(--atom-fs-lg);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.jumlah-unit { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); }
.jumlah-hari { font-size: 11px; color: var(--atom-text-muted); margin-top: .0625rem; }
.jumlah-bar {
  height: 4px;
  margin: .4375rem 0 .3125rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-border);
  overflow: hidden;
}
.jumlah-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--atom-warning); }
.jumlah-bar > span.is-capai { background: var(--atom-success); }
.jumlah-bar > span.is-rendah { background: var(--atom-danger); }
.jumlah-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  font-size: 11px;
  font-weight: 600;
}
.jumlah-status.is-capai  { color: var(--atom-success); }
.jumlah-status.is-belum  { color: var(--atom-warning); }
.jumlah-status.is-kosong { color: var(--atom-text-muted); }

/* Baris kosong (kakitangan tiada rekod) */
.emp-kosong {
  color: var(--atom-text-muted);
  font-style: italic;
  font-size: var(--atom-fs-sm);
}

/* Petunjuk bahawa jadual boleh diskrol mendatar */
.scroll-hint {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-primary-light);
  font-size: var(--atom-fs-xs);
  color: var(--atom-primary);
  font-weight: 500;
}

/* Sel tindakan kekal sempit */
.table-latihan .col-action { width: 48px; min-width: 48px; padding-inline: .5rem; }

/* --- Jadual pengesahan rekod (baris gilir urus setia) --- */
/* --atom-freeze-right MESTI sama dengan lebar lajur TINDAKAN, jika tidak
   sel tindakan yang dibekukan akan duduk di atas lajur STATUS. */
.table-pengesahan { min-width: 1100px; --atom-freeze-right: 84px; }
.table-pengesahan .col-check { width: 42px; padding-inline: .75rem .25rem; }
.table-pengesahan .col-num { width: 52px; }
.table-pengesahan .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-pengesahan .cell-latihan { min-width: 20rem; }
.table-pengesahan tbody td { vertical-align: top; padding-top: .75rem; }
/* Lajur status dibekukan — lebar tetap supaya lencana tidak terpotong */
.table-pengesahan .col-freeze-r2 { width: 196px; min-width: 196px; }
.table-pengesahan .col-freeze-r2 .badge-atom { white-space: nowrap; }

/* Penanda lampiran — isyarat paling penting bagi urus setia */
.sumber-tag.is-ada-sijil   { color: var(--atom-success); }
.sumber-tag.is-tiada-sijil { color: var(--atom-warning); }

/* Kiraan pilihan pada butang tindakan pukal */
.btn-kiraan:not(:empty) { margin-left: .125rem; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  /* 4 item -> grid 2x2 yang kemas, bukan 3 + 1 yatim */
  .ringkasan-bar { grid-template-columns: repeat(2, 1fr); }
  .ringkasan-item:nth-child(odd) { border-right: 1px solid var(--atom-border); }
  .ringkasan-item:nth-child(even) { border-right: 0; }
  .ringkasan-item:nth-child(-n+2) { border-bottom: 1px solid var(--atom-border); }
  .table-latihan .cell-emp,
  .table-latihan .cell-jumlah { background: var(--atom-surface-alt); }
}

/* --------------------------------------------------------------------------
   3b. Profil Kepakaran (BF-EA-SPSM-PKP)
   -------------------------------------------------------------------------- */

/* --- Jadual senarai kakitangan --- */
.table-kepakaran { min-width: 1100px; }
.table-kepakaran .cell-status { min-width: 12.5rem; }
.status-baris + .status-baris { margin-top: .4375rem; }
.status-baris-label {
  display: block;
  margin-bottom: .1875rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.status-baris-tarikh { display: block; margin-top: .1875rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.table-kepakaran .col-num { width: 52px; }
.table-kepakaran .col-action { width: 128px; min-width: 128px; padding-inline: .75rem; }
.table-kepakaran .col-action .btn { white-space: nowrap; }
.table-kepakaran tbody td { vertical-align: top; padding-top: .875rem; padding-bottom: .875rem; }
.table-kepakaran tbody td.col-action { vertical-align: middle; }

.tag-list { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 12.5rem; }
.tag-list.is-luas { max-width: none; }

/* Sel skor + tahap kompetensi */
.skor-sel { min-width: 9.5rem; }
.skor-nilai {
  font-size: var(--atom-fs-lg);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.skor-unit { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); margin-left: .125rem; }
.skor-bar {
  height: 5px;
  margin: .375rem 0 .5rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.skor-bar > span { display: block; height: 100%; border-radius: var(--atom-radius-pill); }
.skor-bar > span.is-asas      { background: var(--atom-danger); }
.skor-bar > span.is-sederhana { background: var(--atom-warning); }
.skor-bar > span.is-mahir     { background: var(--atom-info); }
.skor-bar > span.is-pakar     { background: var(--atom-success); }

/* Sel jurang kompetensi */
.jurang-sifar {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-success);
}
.jurang-sel { line-height: 1.35; }
.jurang-bil {
  display: block;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  color: var(--atom-warning);
}
.jurang-bil.is-kritikal { color: var(--atom-danger); }
.jurang-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Amaran sijil mandatori — BRS menghendaki penanda merah yang ketara.
   Denyutan dibuat halus sahaja dan dimatikan bagi prefers-reduced-motion. */
.amaran-sijil {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  margin-top: .375rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  color: var(--atom-danger);
  cursor: help;
}
.amaran-sijil .bi { animation: atom-denyut 1.8s ease-in-out infinite; }
.alert-atom.is-berdenyut .alert-icon { animation: atom-denyut 1.8s ease-in-out infinite; }
@keyframes atom-denyut {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .amaran-sijil .bi,
  .alert-atom.is-berdenyut .alert-icon { animation: none; }
}

/* --- Panel profil --- */
.profil-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.profil-metrik {
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  text-align: center;
}
.profil-metrik-nilai {
  display: block;
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.profil-metrik-nilai small { font-size: var(--atom-fs-xs); font-weight: 600; margin-left: .125rem; }
.profil-metrik-nilai .badge-atom { font-size: var(--atom-fs-xs); vertical-align: middle; }
.profil-metrik-label {
  display: block;
  margin-top: .25rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

.profil-tajuk {
  margin: 1.75rem 0 .5rem;
  font-size: var(--atom-fs-md);
  font-weight: 600;
  color: var(--atom-text);
}
.profil-tajuk:first-child { margin-top: 0; }
.profil-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin-bottom: .75rem; }

/* Baris kompetensi: aras diperlukan lawan aras dinilai */
.komp-petunjuk {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: -.375rem 0 .75rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.komp-petunjuk-garis {
  display: inline-block;
  width: 2px;
  height: .75rem;
  background: var(--atom-text-muted);
}
.komp-senarai { display: grid; gap: .625rem; }
.komp-baris {
  padding: .75rem .875rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt);
}
.komp-baris.is-cukup    { border-left-color: var(--atom-success); }
.komp-baris.is-jurang   { border-left-color: var(--atom-warning); }
.komp-baris.is-kritikal { border-left-color: var(--atom-danger); }

.komp-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}
.komp-nama { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.komp-kod {
  font-size: var(--atom-fs-xs);
  font-weight: 500;
  color: var(--atom-text-muted);
  margin-left: .25rem;
}
.komp-aras {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.komp-aras-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--atom-text-muted);
}

/* Bar berlapis: jalur pucat = aras diperlukan, jalur pekat = aras dinilai */
.komp-bar {
  position: relative;
  height: 8px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
}
.komp-perlu,
.komp-nilai {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--atom-radius-pill);
}
/* Aras diperlukan ditanda sebagai garis, bukan jalur — jika ia jalur di
   bawah, aras yang melebihi keperluan akan menyembunyikannya sepenuhnya. */
.komp-perlu { background: transparent; z-index: 1; }
.komp-perlu::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--atom-text);
}
.komp-nilai { z-index: 0; }
.komp-baris.is-cukup    .komp-nilai { background: var(--atom-success); }
.komp-baris.is-jurang   .komp-nilai { background: var(--atom-warning); }
.komp-baris.is-kritikal .komp-nilai { background: var(--atom-danger); }

/* Senarai ringkas (latihan dalam profil) */
.list-ringkas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list-ringkas li {
  padding: .5rem .75rem;
  border: 1px solid var(--atom-border-subtle);
  border-radius: var(--atom-radius-sm);
}
.list-ringkas-tajuk { display: block; font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-text); }
.list-ringkas-meta { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.text-danger-atom { color: var(--atom-danger); }

/* --- Taburan kepakaran (papan pemantauan bidang) --- */
.chart-h-380 { height: 380px; }
.chart-h-420 { height: 420px; }
.chart-h-480 { height: 480px; }

/* Bar tahap ialah satu jalur nipis, bukan plot — tingginya cukup untuk
   bar 30px berserta sedikit ruang lega. */
.chart-h-56 { height: 56px; }

/* Bar 100% bertindan di atas, senarai (legenda + label terus) di bawah.
   Kad ini lebih pendek daripada kad lollipop di sebelahnya, jadi
   kandungannya ditengahkan menegak — ruang lega di bawah nampak
   disengajakan, bukan kad yang tergantung di atas. */
.tahap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 1.25rem;
  height: 100%;
}
.tahap-layout .tahap-item { padding-block: .5rem; }

.tahap-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tahap-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2rem 2.75rem;
  align-items: center;
  gap: .625rem;
  padding: .375rem 0;
  font-size: var(--atom-fs-sm);
}
.tahap-item + .tahap-item { border-top: 1px solid var(--atom-border-subtle); }
.tahap-titik { width: .625rem; height: .625rem; border-radius: 50%; }
.tahap-nama { color: var(--atom-text-secondary); min-width: 0; }
.tahap-bil {
  text-align: right;
  font-weight: 700;
  color: var(--atom-text);
  font-variant-numeric: tabular-nums;
}
.tahap-peratus {
  text-align: right;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  font-variant-numeric: tabular-nums;
}

.table-taburan { min-width: 980px; }
.table-taburan .col-num { width: 52px; }
.table-taburan .col-action { width: 1%; white-space: nowrap; }
.table-taburan tbody td { vertical-align: middle; padding-top: .875rem; padding-bottom: .875rem; }
.table-taburan .skor-sel { max-width: 9rem; }
.taburan-pakar {
  display: block;
  margin-top: .1875rem;
  font-size: var(--atom-fs-xs);
  font-weight: 400;
  color: var(--atom-text-muted);
}
/* Kiraan mahir / belum mahir dalam jadual — boleh diklik ke senarai */
.btn-kira {
  min-width: 2.25rem;
  padding: .1875rem .5rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text-secondary);
  transition: border-color var(--atom-transition), background-color var(--atom-transition);
}
.btn-kira:hover { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.btn-kira:focus-visible { box-shadow: var(--atom-shadow-focus); }
.btn-kira.is-mahir { color: #1E5E96; border-color: #C7DCEC; background: #F2F7FB; }
.btn-kira.is-mahir:hover { border-color: #1E5E96; }

.taburan-jam { font-weight: 600; font-variant-numeric: tabular-nums; }
.taburan-jam-bar {
  display: block;
  height: 4px;
  max-width: 5rem;
  margin: .375rem auto 0;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.taburan-jam-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-chart-1);
}

/* --- Senarai kitaran penilaian kendiri --- */
.aliran-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
}
.aliran-label {
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.aliran-langkah {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .5rem;
  margin: 0;
  padding: 0;
}
.aliran-langkah li { display: inline-flex; align-items: center; gap: .5rem; }
.aliran-langkah li:not(:last-child)::after {
  content: "\2192";
  color: var(--atom-text-muted);
  font-size: var(--atom-fs-sm);
}
.aliran-cabang {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
@media (min-width: 992px) { .aliran-cabang { margin-left: auto; } }

.table-kitaran { min-width: 760px; }
.table-kitaran .col-num { width: 52px; }
.table-kitaran .col-action { width: 1%; white-space: nowrap; }
.table-kitaran tbody tr.is-terkini { background: var(--atom-primary-light); }
.table-kitaran tbody tr.is-terkini:hover { background: var(--atom-primary-soft); }
.table-kitaran tbody td { vertical-align: middle; padding-top: 1rem; padding-bottom: 1rem; }

.cell-kitaran { min-width: 15rem; }
.kitaran-tajuk { display: block; font-weight: 600; color: var(--atom-text); }
.kitaran-rujukan {
  display: block;
  margin-top: .0625rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  font-variant-numeric: tabular-nums;
}
.kitaran-tanda { margin-left: .5rem; vertical-align: middle; }
.kitaran-progres { display: block; margin-top: .625rem; max-width: 12rem; }
.kitaran-progres-bar {
  display: block;
  height: 4px;
  margin-bottom: .3125rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.kitaran-progres-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-primary);
}
.kitaran-progres-teks { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

.cell-status-kitaran { min-width: 13rem; }
.table-kitaran .skor-sel { max-width: 11rem; }
.kitaran-jejak {
  display: block;
  margin-top: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.kitaran-catatan {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  margin-top: .25rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-warning);
  cursor: help;
}

/* --- Semakan Penilaian (urus setia) ---------------------------------------
   Susunan lajur mengikut Pengesahan Rekod Latihan: Status dan Tindakan
   dibekukan di kanan supaya keputusan sentiasa dalam jangkauan walaupun
   jadual diskrol mendatar. */
.table-semakan { min-width: 1080px; --atom-freeze-right: 84px; }
.table-semakan .col-check { width: 42px; padding-inline: .75rem .25rem; }
.table-semakan .col-num { width: 52px; }
.table-semakan .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-semakan .col-freeze-r2 { width: 196px; min-width: 196px; }
.table-semakan .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-semakan tbody td { vertical-align: top; padding-top: .75rem; }
.table-semakan .skor-sel { max-width: 11rem; }
.table-semakan .cell-kitaran { min-width: 13rem; }

/* --- Master List PPK (Pelan Pembangunan Kompetensi) --- */
.table-masterlist { min-width: 900px; --atom-freeze-right: 84px; }
.table-masterlist .col-check { width: 42px; padding-inline: .75rem .25rem; }
.table-masterlist .col-num { width: 52px; }
.table-masterlist .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-masterlist .col-freeze-r2 { width: 196px; min-width: 196px; }
.table-masterlist .col-freeze-r2 .badge-atom { white-space: nowrap; }
.table-masterlist tbody td { vertical-align: top; padding-top: .75rem; }
.table-masterlist .cell-kitaran { min-width: 16rem; }

/* Tajuk kompetensi dalam modal semakan mesti boleh dipotong; tanpa ini
   nama panjang menolak blok aras di sebelah kanan keluar dari baris. */
.komp-kepala > div:first-child { min-width: 0; }

/* --- Set Soalan (Tetapan Penilaian) --------------------------------------- */
.table-set { min-width: 1080px; }
.table-set .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-set tbody td { vertical-align: top; padding-top: .75rem; }
.table-set tbody tr { cursor: pointer; }

/* Cip sasaran dalam senarai. Dibiarkan membalut: satu set boleh menyekat
   keempat-empat dimensi, dan memotongnya kepada satu baris menyembunyikan
   dimensi terakhir yang justeru paling spesifik. */
.sasaran-cip { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 20rem; }

/* Pemilih kumpulan sasaran dalam modal set. Empat kotak bersebelahan supaya
   keempat-empat dimensi kelihatan serentak — sasaran ialah gabungan, dan
   membacanya satu per satu di belakang tab menyembunyikan gabungan itu. */
.sasaran-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
}
.sasaran-kotak {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  background: var(--atom-card);
  overflow: hidden;
}
.sasaran-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .625rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-sunken);
}
.sasaran-tajuk {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  color: var(--atom-text);
}
.sasaran-tajuk .bi { color: var(--atom-primary); font-size: .875rem; }
.sasaran-kira {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  white-space: nowrap;
}
/* Dimensi yang benar-benar disekat perlu kelihatan berbeza daripada
   "Semua" sepintas lalu — itulah satu-satunya perbezaan yang menentukan
   siapa menerima set ini. */
.sasaran-kira.is-sekat { color: var(--atom-primary); font-weight: 600; }

.sasaran-senarai { max-height: 11rem; overflow-y: auto; padding: .375rem; }
.sasaran-pilih {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .375rem;
  border-radius: var(--atom-radius-sm);
  font-size: var(--atom-fs-sm);
  line-height: 1.3;
  color: var(--atom-text-secondary);
  cursor: pointer;
}
.sasaran-pilih:hover { background: var(--atom-surface-sunken); }
.sasaran-pilih.is-pilih { color: var(--atom-text); font-weight: 500; }
.sasaran-pilih input { flex: 0 0 auto; margin: 0; }
.sasaran-pilih input:disabled { cursor: not-allowed; }
.sasaran-pilih:has(input:disabled) { cursor: not-allowed; opacity: .65; }
.sasaran-nama { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Bilangan pegawai yang tinggal jika pilihan ini ditanda. Kod seperti
   "BKP" atau "C9" tidak memberitahu sesiapa sama ada ia menjaring dua
   belas orang atau tiada seorang pun — nombor ini yang menjawabnya. */
.sasaran-bil {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0 .3125rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--atom-text-secondary);
}
.sasaran-pilih.is-pilih .sasaran-bil {
  background: var(--atom-primary-light);
  color: var(--atom-primary);
}
/* Pilihan yang tidak menjaring sesiapa kekal boleh ditanda — ia mungkin
   disengajakan bagi pengambilan akan datang — tetapi mesti kelihatan
   berbeza, kerana menandanya akan mengosongkan sasaran. */
.sasaran-pilih.is-kosong { color: var(--atom-text-muted); }
.sasaran-pilih.is-kosong .sasaran-bil { opacity: .55; }

/* Kesan sasaran: siapa yang sebenarnya akan menerima set ini. */
.sasaran-kesan {
  padding: .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  background: var(--atom-surface-sunken);
}
.sasaran-kesan-kepala {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.sasaran-kesan-kepala .bi { color: var(--atom-primary); }
.sasaran-kesan-senarai { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.sasaran-lagi {
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  color: var(--atom-text-muted);
  padding-inline: .25rem;
}

/* Pemilih soalan dalam modal set */
.table-set-soalan { min-width: 720px; }
.table-set-soalan .col-check { width: 64px; }
.table-set-soalan .col-num { width: 48px; }
.table-set-soalan tbody td { vertical-align: top; padding-top: .625rem; }
/* Soalan bank yang TIDAK termasuk dalam set ini — kekal dipapar supaya
   pengguna nampak apa yang ada untuk ditambah, tetapi dilembutkan supaya
   kandungan sebenar set mudah dibaca. */
.table-set-soalan tbody tr.is-luar { color: var(--atom-text-muted); }
.table-set-soalan tbody tr.is-luar .cell-strong { color: var(--atom-text-muted); }

/* Pemberat dalam modal set */
.table-set-pemberat { min-width: 760px; }
.table-set-pemberat .col-num { width: 48px; }
.table-set-pemberat tbody td { vertical-align: middle; }
.table-set-pemberat .cell-pilih { width: 13rem; }

/* Sumbangan satu soalan kepada jumlah skor. Pemberat "x3" sendiri tidak
   memberitahu sesiapa berapa banyak ia menentukan skor; peratus ini yang
   menjawabnya. */
.sumbang-sel { display: flex; align-items: center; gap: .625rem; min-width: 9rem; }
.sumbang-nilai {
  flex: 0 0 auto;
  min-width: 3rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.sumbang-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.sumbang-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--atom-primary);
}

/* --- Skala Permarkahan: pustaka versi ------------------------------------- */
.table-versi { min-width: 780px; }
.table-versi .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-versi tbody td { vertical-align: top; padding-top: .75rem; }
.table-versi tbody tr { cursor: pointer; }
/* Baris versi yang sedang dipapar di bahagian aras bawah */
.table-versi tbody tr.is-pilih { background: var(--atom-primary-light); }
.table-versi tbody tr.is-pilih:hover { background: var(--atom-primary-soft); }
.table-versi .cell-julat {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.versi-nota {
  display: block;
  margin-top: .1875rem;
  font-size: var(--atom-fs-xs);
  font-weight: 400;
  color: var(--atom-text-muted);
  line-height: 1.4;
}

/* --- Skala Permarkahan (Tetapan Penilaian) -------------------------------- */
.table-skala { min-width: 900px; }
.table-skala .col-num { width: 72px; }
.table-skala .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-skala tbody td { vertical-align: top; padding-top: .75rem; }
.table-skala .cell-huraian {
  min-width: 20rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
  line-height: 1.5;
}

/* Nombor aras sebagai bulatan — sama isyarat visual dengan butang skala
   pada borang, supaya baris jadual dan pratonton terbaca sebagai benda
   yang sama. */
.aras-bulat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--atom-primary-light);
  color: var(--atom-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Pratonton skala: markup sama dengan borang pegawai, tetapi bukan kawalan
   sebenar — jadi tiada isyarat boleh klik. */
.skala.is-pratonton .skala-pilihan { cursor: default; }
.skala.is-pratonton .skala-pilihan:hover {
  border-color: var(--atom-border);
  background: var(--atom-card);
}
.skala.is-pratonton .skala-pilihan.is-mahir:hover { border-color: var(--atom-success); }
.skala-pilihan.is-mahir { border-color: var(--atom-success); }
.skala-pilihan.is-mahir .skala-nilai { color: var(--atom-success); }

/* --- Bank Soalan (Tetapan Penilaian) ------------------------------------- */
.table-bank { min-width: 1120px; --atom-freeze-right: 0px; }
.table-bank .col-num { width: 52px; }
.table-bank .col-action { width: 84px; min-width: 84px; padding-inline: .5rem; }
.table-bank tbody td { vertical-align: top; padding-top: .75rem; }
.table-bank .cell-bank { min-width: 22rem; }

.bank-kompetensi { display: block; font-weight: 600; color: var(--atom-text); }
.bank-soalan-teks {
  display: block;
  margin-top: .1875rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
  line-height: 1.5;
}
/* Penanda sama ada soalan sudah terikat kepada jawapan tersimpan. Kunci
   tertutup = tidak boleh dibuang; kunci terbuka = masih bebas. */
.bank-meta {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  margin-top: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.bank-meta.is-baharu { color: var(--atom-success); }

/* Aras KKF dua kumpulan perkhidmatan dalam satu sel */
.aras-sel { display: grid; gap: .1875rem; min-width: 7.5rem; }
.aras-baris { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.aras-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.aras-nilai {
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}

/* --- Penilaian kendiri --- */
.status-penilaian {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.status-penilaian-utama { flex: 1 1 20rem; min-width: 0; }
.status-penilaian-label {
  display: block;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atom-text-muted);
  margin-bottom: .375rem;
}
.status-penilaian-nota {
  margin: .5rem 0 0;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.badge-atom.badge-besar { font-size: var(--atom-fs-sm); padding: .3125rem .75rem; }

.status-penilaian-skor {
  flex: 0 0 auto;
  text-align: right;
  min-width: 8rem;
}
.status-skor-nilai {
  display: block;
  font-size: var(--atom-fs-3xl);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.status-skor-nilai small { font-size: var(--atom-fs-md); font-weight: 600; color: var(--atom-text-muted); }
.status-skor-label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

.progres-penilaian { margin-top: 1.25rem; }
.progres-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.progres-bar {
  height: 6px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.progres-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-primary);
  transition: width var(--atom-transition-slow);
}
.progres-bar > span.is-penuh { background: var(--atom-success); }

/* Kad soalan */
.soalan-kad {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.soalan-kad + .soalan-kad { margin-top: .875rem; }
.soalan-kad.is-tanda {
  border-color: var(--atom-primary);
  box-shadow: var(--atom-shadow-focus);
}

.soalan-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: .875rem;
}
.soalan-teks { flex: 1 1 auto; min-width: 0; }
.soalan-kod {
  display: inline-block;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--atom-primary);
}
.soalan-tajuk {
  margin: .125rem 0 .25rem;
  font-size: var(--atom-fs-md);
  font-weight: 600;
  color: var(--atom-text);
}
.soalan-huraian {
  margin: 0 0 .5rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
  line-height: 1.55;
}
.soalan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

/* Skala 1-5 */
/* Bilangan lajur mengikut bilangan aras sebenar, bukan lima yang ditulis
   tetap — skala boleh disunting kepada 1-4 atau 1-10. */
.skala {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .5rem;
}
.skala-pilihan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .625rem .375rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-card);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--atom-transition), background-color var(--atom-transition);
}
.skala-pilihan input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.skala-pilihan:hover { border-color: var(--atom-border-strong); background: var(--atom-surface-alt); }
.skala-pilihan.is-pilih {
  border-color: var(--atom-primary);
  background: var(--atom-primary-light);
}
.skala-pilihan:focus-within { box-shadow: var(--atom-shadow-focus); }
.skala-pilihan.is-kunci { cursor: not-allowed; opacity: .72; }
.skala-nilai {
  font-size: var(--atom-fs-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--atom-text-muted);
}
.skala-pilihan.is-pilih .skala-nilai { color: var(--atom-primary); }
.skala-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); line-height: 1.25; }
.skala-pilihan.is-pilih .skala-label { color: var(--atom-primary-900); font-weight: 500; }

/* Nota bawah skala. Hanya memantulkan pilihan pegawai — tiada isyarat
   cukup/kurang, kerana aras keperluan jawatan dirahsiakan daripada
   pegawai yang sedang menilai diri. */
.soalan-nota {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: .75rem 0 0;
  font-size: var(--atom-fs-xs);
  font-weight: 500;
  color: var(--atom-text-muted);
}
.soalan-nota.is-isi { color: var(--atom-text-secondary); }

@media (max-width: 767.98px) {
  .soalan-kepala { flex-direction: column; gap: .75rem; }
  .skala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-penilaian-skor { text-align: left; }
  .tag-list { max-width: none; }
}

/* --------------------------------------------------------------------------
   3c. Halaman Profil Kompetensi (kepakaran/profil-kepakaran.html)
   -------------------------------------------------------------------------- */
.profil-layout { display: grid; gap: 1rem; }
.profil-utama { min-width: 0; display: grid; gap: 1rem; }

/* --- Kad identiti --- */
.profil-id {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}
.profil-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--atom-radius-md);
  background: var(--atom-primary);
  color: #fff;
  font-size: var(--atom-fs-2xl);
  font-weight: 700;
  letter-spacing: .02em;
}
.profil-id-teks { flex: 1 1 22rem; min-width: 0; }
.profil-nama {
  margin: 0;
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  color: var(--atom-text);
}
.profil-jawatan {
  margin: .125rem 0 0;
  font-size: var(--atom-fs-md);
  font-weight: 600;
  color: var(--atom-primary);
}
.profil-bahagian {
  margin: .125rem 0 .625rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.profil-cip { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.profil-hubungi {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.25rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.profil-hubungi span { display: inline-flex; align-items: center; gap: .375rem; }
/* Status pegawai — menggantikan petikan hiasan supaya maklumat sebenar
   berada di tempat yang paling mudah dilihat. */
.profil-status {
  flex: 1 1 18rem;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .625rem 1.25rem;
  align-content: start;
  padding-left: 1.25rem;
  border-left: 1px solid var(--atom-border);
}
.profil-status-item { min-width: 0; }
.profil-status-item.is-penuh { grid-column: 1 / -1; }
.profil-status-label {
  display: block;
  margin-bottom: .1875rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.profil-status-nilai { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.profil-status-aktif {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  color: var(--atom-success);
}
.status-titik { width: .5rem; height: .5rem; border-radius: 50%; background: var(--atom-success); }
@media (max-width: 991.98px) {
  .profil-status { padding-left: 0; border-left: 0; border-top: 1px solid var(--atom-border); padding-top: 1rem; }
}

.profil-tab-kad .card-header {
  display: block;
  border-bottom: 0;
}
/* Tab dijajarkan dengan padding .card-body (1.25rem) — .nav-link membawa
   .75rem sendiri, jadi jalur perlu .5rem lagi. */
.profil-tab-kad .nav-tabs-atom { padding-inline: .5rem; }
.profil-tab-kad .nav-tabs-atom .nav-link { padding-inline: .75rem; }
/* Tujuh tab tidak muat satu baris — biar ia melimpah ke baris kedua supaya
   semuanya kelihatan, bukan tersembunyi di sebalik skrol mendatar. */
@media (min-width: 768px) {
  .profil-tab-kad .nav-tabs-atom { flex-wrap: wrap; overflow: visible; }
}

/* --- Blok kandungan tab --- */
/* Tiga blok. Pada lebar sederhana hanya dua lajur muat — blok ketiga
   dijadikan penuh-lebar supaya tiada sel kosong di sebelahnya. */
.ringkasan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .ringkasan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Peta kompetensi menduduki baris atas selebar penuh; dua blok teks
     berkongsi baris di bawahnya, separuh lebar setiap satu. Blok ini mesti
     kekal sebagai anak pertama — melebarkan anak tengah akan meninggalkan
     sel kosong di sebelah blok sebelumnya. */
  .ringkasan-grid > .blok-peta { grid-column: 1 / -1; }
}
/* Analisis jurang dan pakar rujuk sentiasa bertindan menegak sekarang,
   kerana bloknya tidak pernah lagi melebihi separuh lebar. */
.ringkasan-jurang-kol + .ringkasan-jurang-kol { margin-top: 1.5rem; }

/* Peta kompetensi (radar). Radar Chart.js melukis bulatan sebesar dimensi
   TERKECIL kanvasnya; pada baris selebar penuh, lebar tidak lagi menjadi
   kekangan, jadi TINGGI kanvas inilah yang menetapkan saiz sarang labah-
   labah itu. Lebihan ruang mendatar tidak terbuang — Chart.js memusatkan
   bulatan dan memberi label titik tempat bernafas. */
.chart-peta { height: 420px; }
@media (min-width: 768px)  { .chart-peta { height: 520px; } }
@media (min-width: 1400px) { .chart-peta { height: 600px; } }
.pelan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: start;
}
.blok { min-width: 0; }
/* Blok bersebelahan dalam satu kad tab: beri setiap satu sempadan dan
   padding sendiri supaya teks satu lajur tidak kelihatan bersambung dengan
   lajur sebelahnya. Dipakai oleh tab Ringkasan, Pelan Pembangunan dan
   Pencapaian. */
.ringkasan-grid > .blok,
.pelan-grid > .blok,
.blok-penuh {
  padding: 1.25rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
/* Seksyen selebar penuh dalam tab yang sama juga menjadi panel supaya
   setiap tab terdiri daripada blok yang konsisten. */
.blok-penuh { margin-top: 1rem; }
.blok-penuh:first-child { margin-top: 0; }
.blok-penuh > .blok-tajuk:first-child,
.ringkasan-grid > .blok > .blok-tajuk:first-child,
.pelan-grid > .blok > .blok-tajuk:first-child { margin-top: 0; }
.blok-tajuk {
  display: flex;
  align-items: center;
  gap: .4375rem;
  margin: 0 0 .625rem;
  font-size: var(--atom-fs-md);
  font-weight: 600;
  color: var(--atom-text);
}
.blok-tajuk .bi { color: var(--atom-primary); }
.blok-pautan { margin-left: auto; font-size: var(--atom-fs-xs); font-weight: 500; }
.blok-subtajuk {
  display: flex;
  align-items: center;
  gap: .4375rem;
  margin: 1.25rem 0 .5rem;
  font-size: var(--atom-fs-base);
  font-weight: 600;
  color: var(--atom-text);
}
.blok-subtajuk .bi { color: var(--atom-primary); }
.blok-teks {
  margin: 0;
  font-size: var(--atom-fs-sm);
  line-height: 1.7;
  color: var(--atom-text-secondary);
}
.blok-nota { margin: 0 0 .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Senarai bidang + bar tahap */
.bidang-senarai { list-style: none; margin: 0; padding: 0; }
.bidang-kepala,
.bidang-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 4.5rem) 2.75rem;
  align-items: center;
  gap: .625rem;
  padding: .5625rem 0;
}
/* Panel menjadi sempit apabila dua lajur pada skrin sederhana — kecilkan
   bar supaya nama bidang tidak terpaksa membalut tiga baris. */
@media (max-width: 1199.98px) {
  .bidang-kepala,
  .bidang-baris { grid-template-columns: minmax(0, 1fr) 3rem 2.5rem; }
}
.bidang-kepala {
  border-bottom: 1px solid var(--atom-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.bidang-kepala > span:last-child,
.bidang-baris .bidang-aras { text-align: right; }
.bidang-kepala > span { white-space: nowrap; }
.bidang-baris + .bidang-baris { border-top: 1px solid var(--atom-border-subtle); }
.bidang-nama { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); min-width: 0; }
.bidang-bar {
  height: 6px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.bidang-bar > span { display: block; height: 100%; border-radius: var(--atom-radius-pill); }
.bidang-bar > span.is-capai  { background: var(--atom-success); }
.bidang-bar > span.is-hampir { background: var(--atom-warning); }
.bidang-bar > span.is-tinggi { background: var(--atom-danger); }
.bidang-aras {
  white-space: nowrap;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}

/* Petunjuk skala */
.skala-petunjuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--atom-border);
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.skala-petunjuk-tajuk { font-weight: 600; color: var(--atom-text-secondary); }
.skala-petunjuk-item { display: inline-flex; align-items: center; gap: .3125rem; }
.skala-petunjuk-bulat {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--atom-surface-sunken);
  color: var(--atom-text-secondary);
  font-size: 10px;
  font-weight: 700;
}

/* Jurang tiga teratas */
.jurang-teratas { list-style: none; margin: 0 0 1.125rem; padding: 0; display: grid; gap: 1rem; }
.jurang-item { display: flex; align-items: flex-start; gap: .625rem; }
.jurang-nombor {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--atom-surface-sunken);
  color: var(--atom-text-secondary);
  font-size: var(--atom-fs-xs);
  font-weight: 700;
}
.jurang-isi { flex: 1 1 auto; min-width: 0; }
.jurang-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3125rem;
}
.jurang-nama { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.jurang-bar {
  display: block;
  height: 5px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.jurang-bar > span { display: block; height: 100%; border-radius: var(--atom-radius-pill); }
.jurang-bar > span.is-capai  { background: var(--atom-success); }
.jurang-bar > span.is-hampir { background: var(--atom-warning); }
.jurang-bar > span.is-tinggi { background: var(--atom-danger); }
.jurang-meta {
  display: block;
  margin-top: .3125rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.jurang-petunjuk {
  display: grid;
  gap: .375rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--atom-border);
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.jurang-petunjuk-item { display: flex; align-items: center; gap: .4375rem; }
.jurang-petunjuk-item strong { color: var(--atom-text-secondary); margin-right: .25rem; }
.jurang-petunjuk-titik { width: .5rem; height: .5rem; border-radius: 50%; }
.jurang-petunjuk-titik.is-capai  { background: var(--atom-success); }
.jurang-petunjuk-titik.is-hampir { background: var(--atom-warning); }
.jurang-petunjuk-titik.is-tinggi { background: var(--atom-danger); }

/* --- Tab Kompetensi Saya --- */
.komp-kepala-blok {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.komp-skor-kad {
  flex: 0 0 auto;
  text-align: right;
}
.komp-skor-nilai {
  display: block;
  font-size: var(--atom-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.komp-skor-nilai small {
  font-size: var(--atom-fs-sm);
  font-weight: 500;
  color: var(--atom-text-muted);
  margin-left: .25rem;
}

.blok-penuh + .accordion-atom { margin-top: 1rem; }
.accordion-atom .accordion-item {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius) !important;
  background: var(--atom-card);
  margin-bottom: .625rem;
  overflow: hidden;
}
.accordion-atom .accordion-button {
  padding: .875rem 1rem;
  background: var(--atom-card);
  box-shadow: none;
  color: var(--atom-text);
}
.accordion-atom .accordion-button:not(.collapsed) {
  background: var(--atom-primary-light);
  color: var(--atom-primary-900);
}
.accordion-atom .accordion-button:focus { box-shadow: var(--atom-shadow-focus); }
.accordion-atom .accordion-button::after { margin-left: .75rem; }
.accordion-atom .accordion-body { padding: 1rem; border-top: 1px solid var(--atom-border-subtle); }

.komp-butang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 6rem;
  align-items: center;
  gap: .75rem;
  width: 100%;
}
.komp-butang-nama { display: block; font-size: var(--atom-fs-sm); font-weight: 600; }
.komp-butang-sub { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.komp-butang-aras {
  text-align: right;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.komp-butang-bar {
  height: 6px;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-sunken);
  overflow: hidden;
}
.komp-butang-bar > span { display: block; height: 100%; border-radius: var(--atom-radius-pill); }
.komp-butang-bar > span.is-capai  { background: var(--atom-success); }
.komp-butang-bar > span.is-hampir { background: var(--atom-warning); }
.komp-butang-bar > span.is-tinggi { background: var(--atom-danger); }
@media (max-width: 575.98px) {
  .komp-butang { grid-template-columns: minmax(0, 1fr) 3rem; }
  .komp-butang-bar { display: none; }
}

.sub-senarai { list-style: none; margin: 0; padding: 0; }
.sub-kepala,
.sub-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.75rem;
  align-items: center;
  gap: .75rem;
  padding: .4375rem 0;
}
.sub-kepala {
  border-bottom: 1px solid var(--atom-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.sub-kepala > span:last-child { text-align: right; }
.sub-baris + .sub-baris { border-top: 1px solid var(--atom-border-subtle); }
.sub-nama { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.sub-titik-set { display: inline-flex; gap: .25rem; }
.sub-titik {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--atom-surface-sunken);
  border: 1px solid var(--atom-border-strong);
}
.sub-titik.is-isi { background: var(--atom-primary); border-color: var(--atom-primary); }
.sub-aras {
  text-align: right;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sub-nota {
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px dashed var(--atom-border);
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

/* --- Tab Rekod Latihan --- */
.latihan-tapis {
  display: grid;
  grid-template-columns: auto 10rem auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.latihan-tapis .form-label { margin: 0; font-size: var(--atom-fs-xs); }
@media (max-width: 767.98px) {
  .latihan-tapis { grid-template-columns: minmax(0, 1fr); }
}
.table-latihan-profil { min-width: 820px; }
.table-latihan-profil .col-num { width: 48px; }
.sijil-ada { color: var(--atom-success); font-size: 1.0625rem; }
.sijil-tiada { color: var(--atom-text-muted); }

.pemetaan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.pemetaan-sumber {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--atom-fs-sm);
}
.pemetaan-sumber .bi { color: var(--atom-primary); font-size: 1.125rem; }
.pemetaan-meta { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.pemetaan-anak { color: var(--atom-text-muted); }
.pemetaan-sasaran { flex: 1 1 16rem; min-width: 0; }
.pemetaan-label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

/* --- Tab Penilaian Kendiri --- */
.kendiri-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}
.kendiri-skor {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  text-align: center;
  min-width: 12rem;
}
.kendiri-skor-nilai {
  display: block;
  font-size: var(--atom-fs-3xl);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.kendiri-skor-nilai small {
  font-size: var(--atom-fs-md);
  font-weight: 500;
  color: var(--atom-text-muted);
  margin-left: .25rem;
}
.kendiri-skor-label {
  display: block;
  margin: .25rem 0 .5rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.kendiri-butiran {
  flex: 1 1 20rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.table-kendiri { min-width: 760px; }
.kendiri-skala-label {
  display: block;
  font-size: 10px;
  color: var(--atom-text-muted);
}

/* --- Tab Analisis Jurang --- */
.chart-h-340 { height: 340px; }
.table-jurang { min-width: 900px; }
.table-jurang .cell-jurang { color: var(--atom-danger); font-weight: 700; }
.cell-cadangan { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); min-width: 16rem; }

/* --- Tab Pelan Pembangunan --- */
.keutamaan { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.keutamaan-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.keutamaan-nombor {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: #fff;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  background: var(--atom-neutral);
}
.keutamaan-nombor.is-1 { background: var(--atom-danger); }
.keutamaan-nombor.is-2 { background: var(--atom-warning); }
.keutamaan-nombor.is-3 { background: var(--atom-chart-2); }
.keutamaan-isi { min-width: 0; }
.keutamaan-nama { display: block; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.keutamaan-meta { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

.intervensi { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.intervensi-item { display: flex; align-items: flex-start; gap: .75rem; }
.intervensi-ikon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--atom-radius-sm);
  background: var(--atom-primary-light);
  color: var(--atom-primary);
}
.intervensi-teks { min-width: 0; }
.intervensi-tajuk { display: block; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.intervensi-nota { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.table-cadangan { min-width: 780px; }
/* Cadangan Latihan — tajuk program bagi setiap hebahan, klik untuk butiran */
.cadangan-program { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; min-width: 220px; }
.cadangan-program-item { display: flex; align-items: flex-start; gap: .375rem; }
.cadangan-program-item > .bi { flex: 0 0 auto; margin-top: .125rem; font-size: var(--atom-fs-xs); }
.cadangan-program-pautan {
  padding: 0; border: 0; background: none; text-align: left;
  font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-primary); line-height: 1.4;
}
.cadangan-program-pautan:hover, .cadangan-program-pautan:focus-visible { text-decoration: underline; }
.cadangan-program-pautan .taburan-pakar { margin-top: .0625rem; }
.cadangan-mini { width: 100%; min-width: 360px; border-collapse: collapse; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.cadangan-mini th { padding: .375rem .625rem; font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--atom-text-muted); background: var(--atom-bg-subtle, #f6f7f9); border-bottom: 1px solid var(--atom-border); text-align: left; }
.cadangan-mini td { padding: .5rem .625rem; vertical-align: middle; border-top: 1px solid var(--atom-border); }
.cadangan-mini td:last-child, .cadangan-mini th:last-child { width: 1%; white-space: nowrap; }
.cadangan-program-lagi { padding: 0; border: 0; background: none; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); text-align: left; }
.cadangan-program-lagi:hover { color: var(--atom-primary); text-decoration: underline; }

/* --- Tab Pencapaian --- */
.pencapaian-metrik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.pencapaian-metrik-item {
  padding: 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  text-align: center;
}
.pencapaian-metrik-ikon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto .5rem;
  border-radius: var(--atom-radius-sm);
  background: var(--atom-primary-light);
  color: var(--atom-primary);
  font-size: 1.0625rem;
}
.pencapaian-metrik-nilai {
  display: block;
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text);
}
.pencapaian-metrik-label {
  display: block;
  margin-top: .1875rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

.senarai-tanda { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.senarai-tanda li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.senarai-tanda .bi { color: var(--atom-primary); margin-top: .125rem; }
.senarai-meta {
  display: block;
  margin-top: .0625rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.senarai-tanda .badge-atom { margin-top: .25rem; }

/* --- Profil Kepakaran: tambahan (kemaskini, keahlian, dokumen, resume) - */
.profil-avatar.is-gambar { padding: 0; overflow: hidden; background: var(--atom-surface-sunken); }
.profil-avatar.is-gambar img { width: 100%; height: 100%; object-fit: cover; }
.amaran-sijil-pautan {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  color: var(--atom-danger);
  text-decoration: underline;
}
.profil-status-nota { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.profil-notis { display: grid; gap: .75rem; }
.profil-notis > .alert-atom { margin: 0; }
.alert-atom .alert-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.sijil-wajib { color: var(--atom-danger); animation: atom-denyut 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sijil-wajib { animation: none; } }

/* Bidang dijana: sumber di bawah nama bidang */
.bidang-dijana .bidang-baris { grid-template-columns: minmax(0, 1fr) minmax(4rem, 10rem) 3.5rem; }
.bidang-sumber {
  display: block;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}

/* Keahlian: ahli rujuk / PIC / jawatankuasa / saksi pakar */
.keahlian-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.keahlian-item { display: flex; align-items: flex-start; gap: .625rem; }
.keahlian-item.is-tamat { opacity: .7; }
.keahlian-ikon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--atom-radius-sm);
  background: var(--atom-primary-light);
  color: var(--atom-primary);
}
.keahlian-isi { display: grid; gap: .1875rem; min-width: 0; }
.keahlian-kepala { display: flex; flex-wrap: wrap; gap: .25rem; }
.keahlian-nama { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.keahlian-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Kemaskini profil */
.km-tab { flex-wrap: nowrap; overflow-x: auto; }
.km-gambar { display: flex; align-items: center; gap: .75rem; }
.km-gambar .profil-avatar { width: 72px; height: 72px; font-size: var(--atom-fs-xl); }
.table-kemaskini td { min-width: 8rem; vertical-align: top; }
.table-kemaskini .km-tahun { max-width: 6rem; }
.km-beza { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: var(--atom-fs-sm); }
.km-beza li { display: flex; gap: .375rem; align-items: flex-start; color: var(--atom-text-secondary); }
.km-beza li.is-tambah { color: var(--atom-success); font-weight: 500; }
.km-beza li.is-buang { color: var(--atom-danger); text-decoration: line-through; }

/* Resume (pratonton) */
.resume {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.resume-kepala {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--atom-primary);
}
.resume-gambar { width: 72px; height: 72px; border-radius: var(--atom-radius-sm); object-fit: cover; font-size: var(--atom-fs-xl); }
.resume-nama { margin: 0; font-size: var(--atom-fs-xl); font-weight: 700; color: var(--atom-text); }
.resume-sub { margin: .125rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.resume-seksyen { margin-top: 1.125rem; }
.resume-tajuk {
  margin: 0 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--atom-border);
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-primary);
}
.resume-nota, .resume-kosong { margin: 0 0 .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.resume-kosong { font-style: italic; }
.resume-detail { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .25rem .75rem; margin: 0; font-size: var(--atom-fs-sm); }
.resume-detail dt { font-weight: 600; color: var(--atom-text-secondary); }
.resume-detail dd { margin: 0; color: var(--atom-text); }
.resume-jadual { width: 100%; border-collapse: collapse; font-size: var(--atom-fs-sm); }
.resume-jadual th, .resume-jadual td { padding: .3125rem .5rem; border: 1px solid var(--atom-border); vertical-align: top; text-align: left; }
.resume-jadual th { background: var(--atom-surface-sunken); font-size: var(--atom-fs-xs); font-weight: 600; }
.resume-senarai { margin: 0; padding-left: 1.125rem; font-size: var(--atom-fs-sm); color: var(--atom-text); }
.resume-kaki { margin: 1.25rem 0 0; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); text-align: center; }

/* Dashboard: donat tag bidang + drill-down */
.tag-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (min-width: 992px) { .tag-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.tag-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.tag-legenda-item {
  display: grid;
  grid-template-columns: .625rem minmax(0, 1fr) 3rem 3rem;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .4375rem .625rem;
  border: 0;
  border-radius: var(--atom-radius-sm);
  background: transparent;
  font-size: var(--atom-fs-sm);
  text-align: left;
}
.tag-legenda-item:hover, .tag-legenda-item.is-aktif { background: var(--atom-surface-sunken); }
.tag-legenda-nama { color: var(--atom-text-secondary); min-width: 0; }
.tag-legenda-bil { text-align: right; font-weight: 700; color: var(--atom-text); font-variant-numeric: tabular-nums; }
.tag-legenda-peratus { text-align: right; color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }
.drill-tag { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--atom-border); }
.drill-kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.drill-skrol { max-height: 22rem; overflow-y: auto; }
.tag-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .375rem 1rem; }

/* --------------------------------------------------------------------------
   3b. Iklan Latihan (BF-EA-SPSM-PLN)
   -------------------------------------------------------------------------- */

/* --- Penapis boleh kuncup --------------------------------------------- */
/* 14 medan penapis menjadikan halaman terlalu panjang jika sentiasa terbuka,
   jadi bar penapis diberi kepala yang boleh ditogol. */
.filter-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
}
.filter-kepala-tajuk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--atom-fs-base);
  font-weight: 600;
  color: var(--atom-text);
  margin: 0;
}
.filter-kepala-tajuk .bi { color: var(--atom-primary); }
.filter-kepala-kira {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.filter-kepala-butang { margin-left: auto; display: flex; gap: .5rem; }
@media (max-width: 575.98px) {
  .filter-kepala-butang { margin-left: 0; width: 100%; }
  .filter-kepala-butang .btn { flex: 1 1 auto; }
}
/* Togol kuncup — anak panah berputar mengikut keadaan */
.filter-togol .bi-chevron-down { transition: transform var(--atom-transition); }
.filter-togol[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Carian utama — satu-satunya medan teks bebas, jadi ia berdiri sendiri di
   atas penapis dropdown dan bukan salah satu petak grid. */
/* Medan carian duduk dalam grid yang sama seperti penapis kategori supaya
   tepinya berbaris tepat dengan lajur di bawahnya. */
.filter-cari { grid-column: 1 / -1; }
@media (min-width: 992px) { .filter-cari { grid-column: span 2; } }
.filter-cari-nota {
  margin: .375rem 0 0;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.filter-cari-nota strong { font-weight: 600; color: var(--atom-text-secondary); }

/* Pembahagi berlabel antara kumpulan penapis */
.filter-seksyen {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.125rem 0 .75rem;
}
.filter-seksyen-label {
  flex: 0 0 auto;
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.filter-seksyen::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--atom-border);
}

/* Grid penapis kategori: 9 medan = tepat 3 baris penuh pada desktop, jadi
   tiada sel tergantung di hujung. 2 lajur tablet, 1 lajur mobil. */
.filter-grid-iklan { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 576px) { .filter-grid-iklan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .filter-grid-iklan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Julat tarikh — dua pasangan "dari / hingga" bersebelahan */
.filter-julat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  align-items: start;
}
@media (min-width: 768px) {
  .filter-julat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pada desktop ia mengikut grid 3 lajur di atasnya — dua julat mengisi dua
   lajur pertama dan berbaris tepat dengan penapis kategori. */
@media (min-width: 992px) {
  .filter-julat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.filter-julat { display: flex; align-items: center; gap: .5rem; }
.filter-julat .form-control { min-width: 0; flex: 1 1 0; }
.filter-julat-pisah {
  flex: 0 0 auto;
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-muted);
}

/* Baris butang Cari / Reset diasingkan daripada grid medan */
.filter-hujung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.125rem;
  padding-top: .875rem;
  border-top: 1px solid var(--atom-border);
}
.filter-hujung .filter-actions { margin-left: auto; }
@media (max-width: 575.98px) {
  .filter-hujung .filter-actions { margin-left: 0; width: 100%; }
}

/* Chip penapis aktif apabila ia duduk di luar bekas .filter-bar */
.filter-aktif-luar {
  margin-top: 0;
  padding: .75rem 1.25rem;
  border-top: 0;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
}

/* --- Jadual iklan ------------------------------------------------------ */
.table-iklan {
  min-width: 2060px;
  --atom-freeze-offset: 56px;
  --atom-freeze-right: 48px;
}
.table-iklan .col-num { width: 56px; min-width: 56px; }
.table-iklan thead th { white-space: nowrap; }
.table-iklan td { padding-inline: .75rem; }

.cell-iklan-tajuk { min-width: 20rem; max-width: 26rem; }
.iklan-tajuk {
  font-weight: 600;
  color: var(--atom-text);
  line-height: 1.45;
}
.iklan-rujukan {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .1875rem;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text-muted);
}
.cell-iklan-jenis    { min-width: 10.5rem; color: var(--atom-text-secondary); }
.cell-iklan-bidang   { min-width: 13rem;   color: var(--atom-text-secondary); }

/* Tag bidang iklan — bentuk label tag: hujung kiri tirus dengan lubang.
   clip-path memotong border biasa, jadi border dilukis sebagai lapisan luar
   (latar elemen) dan isi tag sebagai ::before yang 1px lebih kecil. */
.tag-bidang {
  --tag-bd: color-mix(in srgb, var(--tag-fg, var(--atom-primary-700)) 35%, var(--tag-bg, var(--atom-primary-light)));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: .1875rem .5625rem .1875rem 1.125rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--tag-fg, var(--atom-primary-700));
  background: radial-gradient(circle at .6875rem 50%, transparent .15625rem, var(--tag-bd) .1875rem);
  border-radius: 0 var(--atom-radius-sm) var(--atom-radius-sm) 0;
  clip-path: polygon(.625rem 0, 100% 0, 100% 100%, .625rem 100%, 0 50%);
}
.tag-bidang::before {
  content: '';
  position: absolute;
  inset: 1px 1px 1px 1.3px;
  z-index: -1;
  background: radial-gradient(circle at calc(.6875rem - 1.3px) 50%, transparent calc(.15625rem + 1px), var(--tag-bg, var(--atom-primary-light)) calc(.1875rem + 1px));
  border-radius: 0 calc(var(--atom-radius-sm) - 1px) calc(var(--atom-radius-sm) - 1px) 0;
  /* Bucu serong dianjak supaya border sisi serong sama tebal (~1px) */
  clip-path: polygon(calc(.625rem - .85px) 0, 100% 0, 100% 100%, calc(.625rem - .85px) 100%, 0 50%);
}
/* Warna tetap bagi setiap bidang (indeks dalam Senarai Bidang, mod 10).
   Tiada merah / oren / merah jambu — tenggelam dalam warna hover baris
   jadual (--atom-primary-light). */
.tag-bidang.is-w0 { --tag-bg: #ECF5D6; --tag-fg: #4D7C0F; }
.tag-bidang.is-w1 { --tag-bg: #FAF3CF; --tag-fg: #7A5D00; }
.tag-bidang.is-w2 { --tag-bg: #E3F5E9; --tag-fg: #15803D; }
.tag-bidang.is-w3 { --tag-bg: #DDF3F0; --tag-fg: #0F766E; }
.tag-bidang.is-w4 { --tag-bg: #DDF3F8; --tag-fg: #0E7490; }
.tag-bidang.is-w5 { --tag-bg: #E1F0FA; --tag-fg: #0369A1; }
.tag-bidang.is-w6 { --tag-bg: #E5ECFC; --tag-fg: #1D4ED8; }
.tag-bidang.is-w7 { --tag-bg: #E8E9FB; --tag-fg: #4338CA; }
.tag-bidang.is-w8 { --tag-bg: #EEE8FC; --tag-fg: #6D28D9; }
.tag-bidang.is-w9 { --tag-bg: #E8ECF1; --tag-fg: #334155; }
.cell-iklan-tempat   { min-width: 12rem;   color: var(--atom-text-secondary); }
.cell-iklan-harga    { min-width: 9rem;    white-space: nowrap; color: var(--atom-text-secondary); font-variant-numeric: tabular-nums; }
.cell-iklan-penganjur{ min-width: 11rem;   color: var(--atom-text-secondary); }
.cell-iklan-tarikh   { min-width: 9.5rem;  white-space: nowrap; color: var(--atom-text-secondary); font-variant-numeric: tabular-nums; }
.cell-iklan-mpl      { min-width: 6.5rem; }
.cell-iklan-status   { min-width: 7.5rem; }
.cell-iklan-hebah    { min-width: 13rem; }

/* Tarikh tutup yang sudah / hampir tamat ditandakan supaya urus setia nampak
   iklan yang perlu ditutup tanpa perlu membaca setiap tarikh satu per satu. */
.tutup-nota {
  display: block;
  margin-top: .125rem;
  font-size: 11px;
  font-weight: 600;
}
.tutup-nota.is-tamat  { color: var(--atom-danger); }
.tutup-nota.is-hampir { color: var(--atom-warning); }

/* Hebahan Pengarah — teks kecil, bukan checkbox (listing bukan borang) */
.hebah-tanda {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.hebah-tanda.is-ya    { color: var(--atom-success); }
.hebah-tanda.is-tidak { color: var(--atom-text-muted); font-weight: 500; }
.hebah-tanda .bi { font-size: .875rem; }

.harga-percuma { color: var(--atom-success); font-weight: 600; }

/* --- Borang iklan ------------------------------------------------------ */
.iklan-form-kad { margin-bottom: 1.25rem; }
.iklan-form-kad .card-body { padding-top: 1.125rem; }

/* Kaki tindakan melekat — borang ini panjang (19 medan / 5 seksyen) */
.form-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem calc(var(--atom-gutter) * -1) calc(var(--atom-gutter) * -1);
  padding: .875rem var(--atom-gutter);
  border-top: 1px solid var(--atom-border);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgba(74, 22, 12, .06);
}
.form-sticky-footer .form-sticky-nota {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  margin: 0;
}
.form-sticky-butang { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) {
  .form-sticky-footer { margin-inline: -1rem; padding-inline: 1rem; }
  .form-sticky-butang { margin-left: 0; width: 100%; }
  .form-sticky-butang .btn { flex: 1 1 auto; }
}

/* Prefix RM pada medan harga */
.input-group .input-group-text.is-prefix { font-weight: 600; min-width: 3.125rem; justify-content: center; }

/* --- Muat naik brosur -------------------------------------------------- */
.brosur-zon { position: relative; }
.brosur-zon input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.form-dropzone.is-dragover {
  border-color: var(--atom-primary);
  background: var(--atom-primary-light);
}
.brosur-kad {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.brosur-pratonton {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--atom-radius-sm);
  border: 1px solid var(--atom-border);
  background: var(--atom-card);
  color: var(--atom-primary);
  font-size: 1.5rem;
}
.brosur-pratonton img { width: 100%; height: 100%; object-fit: cover; }
.brosur-butiran { flex: 1 1 auto; min-width: 0; }
.brosur-nama {
  display: block;
  font-size: var(--atom-fs-base);
  font-weight: 600;
  color: var(--atom-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.brosur-nama { text-decoration: none; }
a.brosur-nama:hover, a.brosur-nama:focus-visible { color: var(--atom-primary); text-decoration: underline; }
.brosur-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin-top: .25rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
}
.brosur-meta .badge-atom { font-size: 10px; }

/* Pratonton brosur (modal) — PDF dalam iframe, imej dimuatkan penuh */
.brosur-paparan {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--atom-surface-sunken);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  overflow: hidden;
}
.brosur-paparan.is-pdf { height: 68vh; }
.brosur-paparan iframe { width: 100%; height: 100%; border: 0; }
.brosur-paparan img { max-width: 100%; max-height: 68vh; object-fit: contain; }
.modal.is-atas { z-index: 1065; }
.modal-backdrop.is-atas { z-index: 1060; }

/* --- Paparan "Lihat" --------------------------------------------------- */
.iklan-lihat-seksyen { margin-bottom: 1.5rem; }
.iklan-lihat-seksyen:last-child { margin-bottom: 0; }
.iklan-lihat-tajuk {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .625rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--atom-border);
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.iklan-lihat-tajuk .bi { color: var(--atom-primary); font-size: .9375rem; }
/* Nilai panjang (objektif, sasaran) perlu kekal boleh dibaca dalam modal */
.detail-value.is-perenggan { white-space: pre-line; font-weight: 400; line-height: 1.6; }
.iklan-lihat-kepala {
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-primary);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.iklan-lihat-kepala h4 {
  font-size: var(--atom-fs-md);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 .375rem;
}
.iklan-lihat-tanda { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }

/* --- Sejarah ----------------------------------------------------------- */
.sejarah-masa {
  display: block;
  font-size: var(--atom-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--atom-text-muted);
  margin-bottom: .125rem;
}
.offcanvas-sejarah .offcanvas-header { border-bottom: 1px solid var(--atom-border); }
.offcanvas-sejarah .offcanvas-title { font-size: var(--atom-fs-lg); font-weight: 600; }
.offcanvas-sejarah .offcanvas-body { padding: 1.25rem; }

/* --------------------------------------------------------------------------
   3c. Select2 & Flatpickr — diselaraskan dengan token eATOM
   -------------------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection {
  min-height: 38px;
  padding: .4375rem .75rem;
  font-size: var(--atom-fs-base);
  color: var(--atom-text);
  background-color: var(--atom-card);
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius);
  box-shadow: none;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--atom-primary);
  box-shadow: var(--atom-shadow-focus);
}
/* <select> asal disembunyikan oleh Select2, jadi penanda ralat mesti
   dipikul oleh bekas yang menggantikannya. */
.select2-container.is-invalid .select2-selection {
  border-color: var(--atom-danger);
}
.is-invalid + .select2-container .select2-selection {
  border-color: var(--atom-danger);
}
.is-invalid ~ .invalid-feedback { display: block; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.45;
  color: var(--atom-text);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--atom-text-muted);
}
/* Select2 multi-pilih — kekalkan saiz sebaris dengan input standard,
   bukan padding besar lalai tema (punca ia "jadi besar gila"). */
.select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: 38px;
  padding: .25rem .5rem;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: 0;
  margin: 0;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: .125rem .5rem !important;
  font-size: var(--atom-fs-sm) !important;
  line-height: 1.4;
  color: var(--atom-primary) !important;
  background-color: var(--atom-primary-light) !important;
  border: 1px solid var(--atom-primary-light) !important;
  border-radius: var(--atom-radius-pill) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  margin-right: .375rem !important;
  color: var(--atom-primary);
  border: 0;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  color: var(--atom-danger);
  background: transparent;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  min-height: 1.5rem;
  margin: 0;
  padding: .125rem 0;
  font-size: var(--atom-fs-base) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-md);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
  font-size: var(--atom-fs-base) !important;
  padding: .4375rem .875rem !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--atom-primary-light);
  color: var(--atom-primary);
}
.select2-container--bootstrap-5 .select2-results__option--selected {
  background: var(--atom-primary);
  color: #fff;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  border-color: var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  font-size: var(--atom-fs-base);
}
/* Saiz kecil untuk bar penapis */
.select2-container--bootstrap-5 .select2-sm .select2-selection {
  min-height: 32px;
  padding: .25rem .625rem;
  font-size: var(--atom-fs-sm);
}
/* Select asal tersembunyi, jadi sempadan merah mesti dipindahkan ke kotak
   Select2 secara manual apabila pengesahan gagal. */
.form-select.is-invalid + .select2-container--bootstrap-5 .select2-selection,
.was-validated .form-select:invalid + .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--atom-danger);
}
.form-select.is-invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.was-validated .form-select:invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .14);
}
/* Select2 dalam modal Bootstrap */
.select2-container { z-index: 1090; }

/* Flatpickr */
.flatpickr-calendar {
  font-family: var(--atom-font);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-md);
}
.flatpickr-months .flatpickr-month { color: var(--atom-text); fill: var(--atom-text); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-weekday { color: var(--atom-text-muted) !important; font-size: var(--atom-fs-xs); font-weight: 600; }
.flatpickr-day { border-radius: var(--atom-radius-sm); color: var(--atom-text); }
.flatpickr-day:hover { background: var(--atom-primary-light); border-color: var(--atom-primary-light); }
.flatpickr-day.today { border-color: var(--atom-primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--atom-primary);
  border-color: var(--atom-primary);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--atom-text-muted); opacity: .55; }
/* altInput mewarisi .form-control, tetapi kelas pengesahan ditetapkan oleh JS */
/* Dengan altInput, flatpickr menyembunyikan medan asal (.flatpickr-input)
   dan memaparkan medan BAHARU yang readonly TANPA kelas itu — jadi medan
   yang pengguna nampak terkena gaya kelabu .form-control[readonly].
   Pemilih adik-beradik meliputi medan paparan tersebut. */
.flatpickr-input.form-control[readonly],
.flatpickr-input + .form-control[readonly] { background-color: var(--atom-card); color: var(--atom-text); cursor: pointer; }
.flatpickr-input.form-control[readonly]:disabled,
.flatpickr-input + .form-control[readonly]:disabled { background-color: var(--atom-surface-sunken); }

/* --------------------------------------------------------------------------
   3d. Borang penilaian kendiri dalam modal
   -------------------------------------------------------------------------- */
/* Kad status dahulunya satu .card berasingan; dalam modal ia menjadi blok
   ringkas di kepala badan supaya tiada kad bersarang dalam kad. */
.pb-status {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.pb-status .status-penilaian { margin-bottom: .875rem; }

.pb-panduan { margin-bottom: .5rem; }
.pb-skala-senarai {
  margin-top: .625rem;
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.pb-skala-senarai .detail-row { padding: .5rem 0; }
.pb-skala-senarai .detail-label { flex-basis: 12rem; font-weight: 600; color: var(--atom-text); }

/* --- Borang Cadangan Latihan (Pelan Pembangunan Kompetensi) --- */
.cadangan-jumlah {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.cadangan-jumlah-label { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.cadangan-jumlah-nilai {
  font-size: var(--atom-fs-xl);
  font-weight: 700;
  color: var(--atom-primary);
  font-variant-numeric: tabular-nums;
}
.agenda-baris {
  padding: .75rem .875rem .25rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}

/* --------------------------------------------------------------------------
   3e. Utama — Tugasan Saya (ipakar/dashboard.html)
   Hero ringkasan, tile penapis, grid kad tugasan dan panel sisi.
   -------------------------------------------------------------------------- */
.tg-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
  border-radius: var(--atom-radius-lg);
  background: linear-gradient(120deg, var(--atom-primary-800) 0%, var(--atom-primary) 55%, var(--atom-primary-600) 100%);
  color: #fff;
  box-shadow: var(--atom-shadow-md);
}
.tg-hero::before,
.tg-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.tg-hero::before { width: 320px; height: 320px; right: -80px; top: -160px; }
.tg-hero::after  { width: 200px; height: 200px; right: 180px; bottom: -130px; }
.tg-hero > * { position: relative; z-index: 1; }
.tg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.tg-hero-title { font-size: var(--atom-fs-2xl); font-weight: 700; margin: .375rem 0 .25rem; color: #fff; }
.tg-hero-text  { margin: 0; color: rgba(255, 255, 255, .86); font-size: var(--atom-fs-md); }
.tg-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tg-hero-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3125rem .75rem;
  border-radius: var(--atom-radius-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--atom-fs-sm); font-weight: 500;
}
.tg-hero-chip .tg-dot { width: 7px; height: 7px; border-radius: 50%; background: #FCA5A5; }
.tg-hero-chip.is-hampir .tg-dot { background: #FCD34D; }
.tg-hero-aside { display: flex; align-items: center; gap: 1.25rem; }
.tg-ring {
  --tg-pct: 0;
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--tg-pct) * 1%), rgba(255, 255, 255, .18) 0);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.tg-ring::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--atom-primary-700);
}
.tg-ring-inner { position: relative; text-align: center; line-height: 1.1; }
.tg-ring-nilai { display: block; font-size: 1.75rem; font-weight: 700; }
.tg-ring-label { font-size: var(--atom-fs-xs); color: rgba(255, 255, 255, .78); }
.tg-hero-actions { display: flex; flex-direction: column; gap: .5rem; }

/* Tile ringkasan — juga butang penapis */
.tg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.tg-tile {
  display: flex; align-items: center; gap: .875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  text-align: left;
  background: var(--atom-card);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-xs);
  color: var(--atom-text);
  cursor: pointer;
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition), transform var(--atom-transition);
}
.tg-tile:hover { border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-md); transform: translateY(-1px); }
.tg-tile:focus-visible { outline: 0; box-shadow: var(--atom-shadow-focus); }
.tg-tile[aria-pressed="true"] { border-color: var(--atom-primary); box-shadow: 0 0 0 1px var(--atom-primary), var(--atom-shadow-sm); }
.tg-tile-ikon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--atom-radius);
  display: grid; place-items: center; font-size: 1.125rem;
}
.tg-tile-nilai { display: block; font-size: var(--atom-fs-2xl); font-weight: 700; line-height: 1.1; }
.tg-tile-label { display: block; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

/* Nada warna dikongsi tile, kad & modul */
.tg-tone-primary { background: var(--atom-primary-light); color: var(--atom-primary); }
.tg-tone-danger  { background: var(--atom-danger-light);  color: var(--atom-danger); }
.tg-tone-warning { background: var(--atom-warning-light); color: var(--atom-warning); }
.tg-tone-success { background: var(--atom-success-light); color: var(--atom-success); }
.tg-tone-info    { background: var(--atom-info-light);    color: var(--atom-info); }
.tg-tone-accent  { background: var(--atom-accent-light);  color: var(--atom-accent); }

/* Susun atur utama */
.tg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.tg-section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .875rem;
}
.tg-section-title { font-size: var(--atom-fs-lg); font-weight: 600; margin: 0; }
.tg-section-sub { font-size: var(--atom-fs-sm); color: var(--atom-text-muted); margin: .125rem 0 0; }
.tg-sort { width: auto; }

/* Kad tugasan */
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tg-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.125rem 1.125rem 1rem;
  background: var(--atom-card);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-xs);
  color: var(--atom-text);
  text-decoration: none;
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition), transform var(--atom-transition);
}
.tg-card:hover { color: var(--atom-text); border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-md); transform: translateY(-2px); }
.tg-card:focus-visible { outline: 0; box-shadow: var(--atom-shadow-focus); }
.tg-card::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0; background: transparent;
}
.tg-card.is-lewat::before  { background: var(--atom-danger); }
.tg-card.is-segera::before { background: var(--atom-danger); }
.tg-card.is-hampir::before { background: var(--atom-warning); }
.tg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.tg-card-ikon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--atom-radius);
  display: grid; place-items: center; font-size: 1.0625rem;
}
.tg-modul {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.tg-card-title { font-size: var(--atom-fs-md); font-weight: 600; margin: 0 0 .25rem; line-height: 1.35; }
.tg-card-text { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); margin: 0 0 1rem; flex: 1 1 auto; }
.tg-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .75rem; border-top: 1px dashed var(--atom-border);
}
.tg-due {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5625rem; border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 600;
  background: var(--atom-neutral-light); color: var(--atom-neutral);
}
.tg-due.is-lewat, .tg-due.is-segera { background: var(--atom-danger-light); color: var(--atom-danger); }
.tg-due.is-hampir { background: var(--atom-warning-light); color: var(--atom-warning); }
.tg-go {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-primary);
}
.tg-go .bi { transition: transform var(--atom-transition); }
.tg-card:hover .tg-go .bi { transform: translateX(3px); }
.tg-kosong {
  grid-column: 1 / -1;
  background: var(--atom-card); border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius-md);
}

/* Panel sisi */
.tg-panel {
  background: var(--atom-card);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-xs);
  padding: 1.125rem;
  margin-bottom: 1.25rem;
}
.tg-panel-title { font-size: var(--atom-fs-md); font-weight: 600; margin: 0 0 .875rem; display: flex; align-items: center; gap: .5rem; }
.tg-timeline { list-style: none; margin: 0; padding: 0; }
.tg-timeline li { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.tg-timeline li:last-child { padding-bottom: 0; }
.tg-timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px;
  width: 1px; background: var(--atom-border);
}
.tg-date {
  flex: 0 0 auto; width: 44px; padding: .3125rem 0;
  border-radius: var(--atom-radius); text-align: center; line-height: 1.1;
}
.tg-date-hari { display: block; font-size: var(--atom-fs-lg); font-weight: 700; }
.tg-date-bulan { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; }
.tg-timeline-title { font-size: var(--atom-fs-sm); font-weight: 600; margin: .125rem 0; }
.tg-timeline-text { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin: 0; }
.tg-modul-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.tg-modul-row { display: flex; justify-content: space-between; font-size: var(--atom-fs-sm); margin-bottom: .375rem; }
.tg-modul-row strong { font-weight: 600; }
.tg-bar { height: 6px; border-radius: var(--atom-radius-pill); background: var(--atom-surface-sunken); overflow: hidden; }
.tg-bar > span { display: block; height: 100%; border-radius: inherit; background: currentColor; }

/* eAdmin Utama (eadmin/dashboard.html) — akses pantas & jadual Permohonan Saya */
.ea-pantas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ea-pantas-item {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .5rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-text); text-decoration: none;
  transition: border-color var(--atom-transition), background var(--atom-transition);
}
.ea-pantas-item:hover { color: var(--atom-text); border-color: var(--atom-primary); background: var(--atom-primary-light); }
.ea-pantas-item:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.ea-pantas-item .tg-card-ikon { width: 30px; height: 30px; font-size: .9375rem; flex: 0 0 auto; }
.ea-pantas-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-gilir { cursor: default; }
.ea-gilir:hover { transform: none; }
.ea-gilir-senarai { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .25rem; }
.ea-gilir-senarai a {
  display: flex; align-items: center; gap: .5rem;
  padding: .4375rem .5rem; margin: 0 -.5rem; border-radius: var(--atom-radius);
  font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); text-decoration: none;
}
.ea-gilir-senarai a:hover { background: var(--atom-primary-light); color: var(--atom-primary); }
.ea-gilir-senarai a:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.ea-gilir-label { flex: 1 1 auto; min-width: 0; }
.ea-gilir-bil {
  flex: 0 0 auto; min-width: 1.5rem; padding: 0 .4375rem; text-align: center;
  border-radius: var(--atom-radius-pill); background: var(--atom-primary); color: #fff;
  font-size: var(--atom-fs-xs); font-weight: 600; line-height: 1.375rem;
}
.ea-gilir-pergi { font-size: .75rem; color: var(--atom-text-muted); }
.ea-timeline .tg-timeline-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ea-modul { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* eDOC Utama (edoc/dashboard.html) — tile pautan, dokumen terkini & surat terkini */
.ed-tile { text-decoration: none; }
.ed-tile:hover { color: var(--atom-text); }
.ed-tile-teks { min-width: 0; }
.ed-tile-meta { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ed-bil { font-size: var(--atom-fs-2xl); font-weight: 700; line-height: 1; color: var(--atom-text); }
.ed-min0 { min-width: 0; }
.ed-lajur-utama, .tg-layout > aside { min-width: 0; }
.ed-surat-item > .ed-min0 { display: block; flex: 1 1 auto; }
.ed-dok-rujukan .badge-atom { margin-left: .375rem; }
.ed-pautan { display: block; color: var(--atom-text); text-decoration: none; }
.ed-pautan:hover { color: var(--atom-primary); }
.ed-dok-tajuk { font-weight: 600; color: var(--atom-text); text-decoration: none; }
.ed-dok-tajuk:hover { color: var(--atom-primary); text-decoration: underline; }
.ed-dok-rujukan { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin-top: .125rem; }
.ed-repo { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); }
.ed-repo small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ed-repo-ikon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--atom-radius);
  display: grid; place-items: center; font-size: .875rem;
}
.ed-surat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.ed-surat-item {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .5rem; margin: 0 -.5rem; border-radius: var(--atom-radius);
  color: var(--atom-text); text-decoration: none;
}
.ed-surat-item:hover { background: var(--atom-primary-light); color: var(--atom-text); }
.ed-surat-item:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.ed-surat-tajuk {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.35;
}
.ed-surat-meta {
  display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ea-perkara { min-width: 12rem; }
.ea-perkara a { color: var(--atom-text); font-weight: 500; }
.ea-perkara a:hover { color: var(--atom-primary); }

@media (max-width: 1199.98px) {
  .tg-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .tg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .tg-hero { padding: 1.25rem; }
  .tg-hero-aside { width: 100%; justify-content: space-between; }
  .tg-tiles { gap: .625rem; }
  .tg-tile { padding: .75rem; gap: .625rem; }
  .tg-tile-ikon { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   3h. Pengurusan Ceramah — Kalendar Penceramah (ceramah/kalendar-penceramah.html)
   --------------------------------------------------------------------------
   Warna jenis: dalaman = info, agensi luar = accent, komitmen lain = neutral
   berjalur warning (slot tidak tersedia).
   -------------------------------------------------------------------------- */
.kal-nilai-dalaman  { color: var(--atom-info); }
.kal-nilai-luar     { color: var(--atom-accent); }
.kal-nilai-komitmen { color: var(--atom-warning); }

/* Bar alat */
.kal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
}
.kal-nav-bulan { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kal-tajuk-bulan {
  margin: 0 .25rem;
  min-width: 9.5rem;
  text-align: center;
  font-size: var(--atom-fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
}
.kal-segmen {
  display: inline-flex;
  padding: .1875rem;
  border-radius: var(--atom-radius);
  background: var(--atom-surface-sunken);
}
.kal-segmen-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border: 0;
  border-radius: var(--atom-radius-sm);
  background: transparent;
  color: var(--atom-text-secondary);
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  transition: background-color var(--atom-transition), color var(--atom-transition);
}
.kal-segmen-btn:hover { color: var(--atom-text); }
.kal-segmen-btn.is-aktif { background: var(--atom-card); color: var(--atom-primary); box-shadow: var(--atom-shadow-xs); }
.kal-segmen-btn:focus-visible { outline: 0; box-shadow: var(--atom-shadow-focus); }

/* Penapis + cip jenis (turut berfungsi sebagai petunjuk warna) */
.kal-filter-grid { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(0, 2fr); }
@media (max-width: 991.98px) {
  .kal-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kal-filter-jenis { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) { .kal-filter-grid { grid-template-columns: minmax(0, 1fr); } }
.kal-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.kal-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .3125rem .6875rem;
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius-pill);
  background: var(--atom-card);
  font-size: var(--atom-fs-sm);
  font-weight: 500;
  color: var(--atom-text);
  cursor: pointer;
  user-select: none;
  transition: opacity var(--atom-transition), border-color var(--atom-transition);
}
.kal-chip:hover { border-color: var(--atom-text-muted); }
.kal-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kal-chip:focus-within { box-shadow: var(--atom-shadow-focus); }
.kal-chip.is-mati { opacity: .5; background: var(--atom-surface-alt); }
.kal-chip.is-mati .kal-swatch { background: transparent; }
.kal-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
}
.kal-chip.is-dalaman .kal-swatch  { color: var(--atom-info);   background: var(--atom-info); }
.kal-chip.is-luar .kal-swatch     { color: var(--atom-accent); background: var(--atom-accent); }
.kal-chip.is-komitmen .kal-swatch {
  color: var(--atom-warning);
  background: repeating-linear-gradient(135deg, var(--atom-warning) 0 2px, var(--atom-warning-light) 2px 4px);
}

/* Susun atur: grid + panel hari */
.kal-susun {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}
.kal-susun[hidden] { display: none; }
.kal-grid-wrap { padding: 1rem 1.25rem 1.25rem; min-width: 0; border-right: 1px solid var(--atom-border); }
@media (max-width: 1199.98px) { .kal-susun { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 991.98px) {
  .kal-susun { grid-template-columns: minmax(0, 1fr); }
  .kal-grid-wrap { border-right: 0; border-bottom: 1px solid var(--atom-border); }
}

.kal-grid {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  overflow: hidden;
}
.kal-kepala, .kal-badan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-kepala { background: var(--atom-surface-alt); border-bottom: 1px solid var(--atom-border); }
.kal-kepala-hari {
  padding: .5rem .5rem;
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atom-text-muted);
}
.kal-kepala-hari.is-hujung { color: var(--atom-text-secondary); }

.kal-hari {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  min-width: 0;
  min-height: 108px;
  padding: .375rem;
  border: 0;
  border-right: 1px solid var(--atom-border-subtle);
  border-bottom: 1px solid var(--atom-border-subtle);
  background: var(--atom-card);
  color: var(--atom-text);
  text-align: left;
  font: inherit;
  transition: background-color var(--atom-transition);
}
.kal-hari:nth-child(7n) { border-right: 0; }
.kal-badan .kal-hari:nth-last-child(-n+7) { border-bottom: 0; }
.kal-hari:hover { background: var(--atom-surface-alt); }
.kal-hari:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: -2px; position: relative; z-index: 1; }
.kal-hari.is-hujung { background: var(--atom-surface-alt); }
.kal-hari.is-hujung:hover { background: var(--atom-surface-sunken); }
.kal-hari.is-luar-bulan { background: var(--atom-body); }
.kal-hari.is-luar-bulan .kal-nombor,
.kal-hari.is-luar-bulan .kal-pil-senarai,
.kal-hari.is-luar-bulan .kal-titik-senarai { opacity: .45; }
.kal-hari.is-dipilih { box-shadow: inset 0 0 0 2px var(--atom-primary); background: var(--atom-primary-light); }

.kal-nombor {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  min-width: 1.625rem;
  height: 1.625rem;
  padding-inline: .25rem;
  border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--atom-text-secondary);
}
.kal-hari.is-hari-ini .kal-nombor { background: var(--atom-primary); color: var(--atom-text-inverse); }

.kal-pil-senarai { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.kal-pil {
  display: block;
  min-width: 0;
  padding: .0625rem .375rem;
  border-left: 3px solid currentColor;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kal-pil.is-dalaman { background: var(--atom-info-light); color: var(--atom-info); }
.kal-pil.is-luar    { background: var(--atom-accent-light); color: var(--atom-accent); }
.kal-pil.is-komitmen {
  color: var(--atom-warning);
  background: repeating-linear-gradient(135deg, var(--atom-warning-light) 0 5px, var(--atom-neutral-light) 5px 10px);
}
.kal-lagi { font-size: 11px; font-weight: 600; color: var(--atom-text-muted); padding-left: .375rem; }

/* Titik (skrin kecil sahaja) */
.kal-titik-senarai { display: none; gap: 3px; flex-wrap: wrap; }
.kal-titik { width: 7px; height: 7px; border-radius: 50%; }
.kal-titik.is-dalaman { background: var(--atom-info); }
.kal-titik.is-luar    { background: var(--atom-accent); }
.kal-titik.is-komitmen { background: var(--atom-warning); }

/* Panel hari */
.kal-panel { min-width: 0; position: sticky; top: calc(var(--atom-navbar-height) + .5rem); }
@media (max-width: 991.98px) { .kal-panel { position: static; } }
.kal-panel-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--atom-border);
}
.kal-panel-kepala-teks { min-width: 0; }
.kal-panel-label {
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atom-text-muted);
}
.kal-panel-tajuk { margin: .125rem 0 0; font-size: var(--atom-fs-md); font-weight: 700; }
.kal-panel-seksyen { padding: 1rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.kal-panel-seksyen:last-child { border-bottom: 0; }
.kal-panel-kosong {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-muted);
}
.kal-panel-kosong.is-awal { margin: 1.25rem; }
.kal-panel-kosong .bi { font-size: 1rem; line-height: 1.3; }

.kal-kumpulan + .kal-kumpulan { margin-top: .875rem; }
.kal-kumpulan-kepala { display: flex; flex-direction: column; margin-bottom: .375rem; }
.kal-kumpulan-nama { font-size: var(--atom-fs-sm); font-weight: 600; }
.kal-kumpulan-nama .badge-atom { padding-block: 0; margin-left: .25rem; }
.kal-kumpulan-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kal-item {
  display: flex;
  gap: .625rem;
  padding: .5rem .625rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-info);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-card);
}
.kal-item + .kal-item { margin-top: .375rem; }
.kal-item.is-luar     { border-left-color: var(--atom-accent); }
.kal-item.is-komitmen {
  border-left-color: var(--atom-warning);
  background: repeating-linear-gradient(135deg, var(--atom-card) 0 8px, var(--atom-surface-alt) 8px 16px);
}
.kal-item-masa {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  font-size: var(--atom-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.kal-item-masa span { font-weight: 400; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.kal-item-isi { min-width: 0; }
.kal-item-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.35; }
.kal-item-sub { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); margin-top: .125rem; }
.kal-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .375rem; }
.kal-rujukan { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }

.kal-badge.is-dalaman  { background: var(--atom-info-light);   color: var(--atom-info);    border-color: var(--atom-info-light); }
.kal-badge.is-luar     { background: var(--atom-accent-light); color: var(--atom-accent);  border-color: var(--atom-accent-light); }
.kal-badge.is-komitmen { background: var(--atom-warning-light); color: var(--atom-warning); border-color: var(--atom-warning-light); }
/* Peranan staf dalam slot kursus dalaman (Penceramah | Fasilitator) */
.kal-peranan.is-fasilitator { color: var(--atom-primary); border-color: var(--atom-primary); }

/* Ketersediaan */
.kal-seksyen-tajuk {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: 0 0 .25rem;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
}
.kal-bantuan { margin: 0 0 .625rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kal-slot { display: flex; align-items: flex-end; gap: .5rem; margin-bottom: .75rem; }
.kal-slot > div { flex: 1 1 0; min-width: 0; }
.kal-slot .form-label { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); margin-bottom: .25rem; }
.kal-slot-sempang { padding-bottom: .375rem; color: var(--atom-text-muted); }
.kal-ketersediaan-ringkas { margin: 0 0 .5rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.kal-ketersediaan {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 26rem;
  overflow-y: auto;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
}
.kal-calon {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .625rem;
  border-bottom: 1px solid var(--atom-border-subtle);
}
.kal-calon:last-child { border-bottom: 0; }
.kal-calon.is-bertindih { background: var(--atom-surface-alt); }
.kal-calon-isi { display: flex; flex-direction: column; min-width: 0; }
.kal-calon-nama { font-size: var(--atom-fs-sm); font-weight: 600; }
.kal-calon-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kal-calon-tindih { font-size: var(--atom-fs-xs); color: var(--atom-danger); margin-top: .125rem; }
.kal-calon .badge-atom { flex: 0 0 auto; }
.kal-ralat { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-danger); }

/* Paparan senarai */
.kal-sel-hari, .kal-sel-sub { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kal-sel-tajuk { display: block; font-weight: 600; }
.kal-baris-hari-ini td { background: var(--atom-primary-light); }

/* Skrin kecil: titik menggantikan pil */
@media (max-width: 575.98px) {
  .kal-toolbar { padding: .75rem 1rem; }
  .kal-nav-bulan { flex-wrap: wrap; }
  .kal-tajuk-bulan { min-width: 0; font-size: var(--atom-fs-md); }
  .kal-grid-wrap { padding: .75rem; }
  .kal-kepala-hari { padding: .375rem 0; text-align: center; letter-spacing: 0; }
  .kal-hari { min-height: 52px; align-items: center; padding: .25rem .125rem; gap: .1875rem; }
  .kal-nombor { align-self: center; min-width: 1.5rem; height: 1.5rem; font-size: var(--atom-fs-xs); }
  .kal-pil-senarai { display: none; }
  .kal-titik-senarai { display: flex; justify-content: center; }
  .kal-panel-kepala, .kal-panel-seksyen { padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   3g. Pengurusan Ceramah — Permohonan Agensi Luar (BF-EA-SPSM-CER-02)
       ceramah/permohonan-agensi-luar.html & ceramah/borang-agensi-luar.html
   -------------------------------------------------------------------------- */
.ringkasan-nilai.cal-nilai-bahaya { color: var(--atom-danger); }
.cal-tabs { padding-inline: .75rem; }
.cal-baris-tanda { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .25rem; }
.table-atom tr.cal-baris-tertunggak > td:first-child { box-shadow: inset 3px 0 0 var(--atom-danger); }

/* Ringkasan permohonan dalam modal */
.cal-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem 1.25rem;
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--atom-surface-alt);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
}
.cal-ringkas-item { min-width: 0; }
.cal-ringkas-label { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin-bottom: .125rem; }
.cal-ringkas-nilai { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-weight: 500; color: var(--atom-text); }

/* Pemilihan calon penceramah */
.cal-calon-alat { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .75rem; }
.cal-calon-alat .form-select { width: auto; min-width: 12rem; }
.cal-calon-wrap { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); max-height: 26rem; overflow: auto; }
.cal-calon-wrap .table-atom thead th { position: sticky; top: 0; z-index: 1; }
.cal-calon-pilih { width: 2.75rem; text-align: center; }
.table-atom tr.cal-calon { cursor: pointer; }
.table-atom tr.cal-calon.is-dipilih > td { background: var(--atom-primary-light); }
.cal-calon .tag-list { max-width: 18rem; }
.cal-tindih { max-width: 16rem; margin-top: .25rem; }

/* Kiraan yuran sebenar */
.cal-kira {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  padding: .75rem 1rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius);
}
.cal-kira strong { font-size: var(--atom-fs-lg); color: var(--atom-text); margin-left: auto; }
.cal-kira .fs-xs { flex-basis: 100%; text-align: right; }

/* Dokumen sebut harga / invois */
.cal-dok { color: var(--atom-text); font-size: var(--atom-fs-sm); }
.cal-dok-kepala { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--atom-primary); }
.cal-dok-jenama { display: flex; gap: .75rem; align-items: flex-start; }
.cal-dok-jenama .brand-mark { flex: 0 0 auto; }
.cal-dok-jenama strong, .cal-dok-pihak strong { display: block; font-size: var(--atom-fs-md); }
.cal-dok-jenama span, .cal-dok-pihak span, .cal-dok-tajuk span { display: block; color: var(--atom-text-secondary); }
.cal-dok-tajuk { text-align: right; }
.cal-dok-tajuk h3 { margin: 0 0 .375rem; font-size: var(--atom-fs-xl); letter-spacing: .06em; color: var(--atom-primary); }
.cal-dok-pihak { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1rem 0; }
.cal-dok-label { font-size: var(--atom-fs-xs) !important; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--atom-text-muted) !important; margin-bottom: .25rem; }
.cal-dok-jadual { width: 100%; border-collapse: collapse; }
.cal-dok-jadual th, .cal-dok-jadual td { padding: .625rem .75rem; border-bottom: 1px solid var(--atom-border); vertical-align: top; }
.cal-dok-jadual thead th { white-space: nowrap; background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-secondary); }
.cal-dok-jadual tfoot td { font-weight: 700; border-bottom: 2px solid var(--atom-text); font-size: var(--atom-fs-md); }
.cal-dok-nota { margin-top: 1rem; }
.cal-dok-nota p { margin-bottom: .5rem; }
.cal-dok-lunas, .cal-dok-tunggak { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--atom-radius-sm); font-weight: 700; letter-spacing: .04em; }
.cal-dok-lunas { color: var(--atom-success); background: var(--atom-success-light); }
.cal-dok-tunggak { color: var(--atom-danger); background: var(--atom-danger-light); }

@media (max-width: 575.98px) {
  .cal-dok-kepala { flex-direction: column; }
  .cal-dok-tajuk { text-align: left; }
  .cal-dok-pihak { grid-template-columns: 1fr; }
}

/* Cetak dokumen dalam modal sahaja */
@media print {
  body.cal-cetak .app-shell, body.cal-cetak .modal-backdrop,
  body.cal-cetak .modal-header, body.cal-cetak .modal-footer { display: none !important; }
  body.cal-cetak .modal { position: static; display: block !important; overflow: visible; }
  body.cal-cetak .modal-dialog { max-width: none; margin: 0; transform: none !important; }
  body.cal-cetak .modal-content { border: 0; box-shadow: none; }
  body.cal-cetak .modal-body { overflow: visible !important; }
}

/* Borang awam agensi luar (tanpa sidebar) */
.cal-borang-body { max-width: 70rem; margin-inline: auto; padding: 2rem var(--atom-gutter) 3rem; }
.cal-borang-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.cal-borang-aside { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.cal-yuran-jumlah { font-size: var(--atom-fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--atom-primary); font-variant-numeric: tabular-nums; }
.cal-yuran-rumus { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); margin: .375rem 0 0; }
.cal-yuran-baris { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--atom-fs-sm); padding: .375rem 0; border-bottom: 1px solid var(--atom-border-subtle, var(--atom-border)); }
.cal-yuran-baris:last-child { border-bottom: 0; }
.cal-yuran-baris span:first-child { color: var(--atom-text-muted); }
.cal-yuran-baris span:last-child { font-weight: 600; text-align: right; }
.cal-berjaya { max-width: 36rem; margin: 1rem auto 0; text-align: center; padding: 2.5rem 1.5rem; }
.cal-berjaya-ikon { width: 64px; height: 64px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-success-light); color: var(--atom-success); font-size: 2rem; }
.cal-berjaya-rujukan { display: inline-block; margin: .5rem 0 1rem; padding: .5rem 1rem; border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary); font-size: var(--atom-fs-lg); font-weight: 700; letter-spacing: .03em; }

@media (max-width: 991.98px) {
  .cal-borang-grid { grid-template-columns: minmax(0, 1fr); }
  .cal-borang-aside { position: static; order: -1; }
}

/* --------------------------------------------------------------------------
   3f. Pengurusan Ceramah — Permohonan Penceramah
   Masa jam:minit dalam slot ceramah — ikon pengesahan Bootstrap
   memakan ruang <select> sempit sehingga kumpulan input terbalut ke
   baris baharu; sembunyikan ikon (warna sempadan masih menunjukkan ralat).
   -------------------------------------------------------------------------- */
.cpd-masa { flex-wrap: nowrap; }
.cpd-masa .form-select { min-width: 0; }
.was-validated .cpd-masa .form-select:is(:valid, :invalid):not([multiple]):not([size]) {
  --bs-form-select-bg-icon: none;
  padding-right: 2rem;
}

/* Tugaskan Penceramah — pilihan berbilang orang bagi setiap slot */
.cpd-orang-senarai { display: flex; flex-direction: column; gap: .375rem; }
.cpd-orang {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5rem .625rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-card);
}
.cpd-orang.is-tindih { border-color: var(--atom-danger); background: var(--atom-danger-light); }
.cpd-orang-ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--atom-info-light);
  color: var(--atom-info);
}
.cpd-orang-ikon.is-luar { background: var(--atom-accent-light); color: var(--atom-accent); }
.cpd-orang-teks { flex: 1 1 auto; min-width: 0; }
.cpd-orang-nama { font-weight: 600; overflow-wrap: anywhere; }
.cpd-orang-status { display: flex; gap: .375rem; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.cpd-orang-status.is-ok { color: var(--atom-success); }
.cpd-orang-status.is-tindih { color: var(--atom-danger); }
.cpd-orang-kosong {
  padding: .5rem .625rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-muted);
}
.tg-slot.is-kosong .cpd-orang-kosong { border-color: var(--atom-danger); color: var(--atom-danger); }
.cpd-luar-baru {
  padding: .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt);
}
.cpd-sel-orang + .cpd-sel-orang { margin-top: .375rem; }

/* --------------------------------------------------------------------------
   3i. Pengurusan Ceramah — Penceramah Luar (ceramah/penceramah-luar.html)
   -------------------------------------------------------------------------- */
.table-atom tr.cpl-baris-mati > td:not(.col-action) { opacity: .6; }
.cpl-emel { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.cpl-jadual-modal { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }

/* Pilihan bidang — checkbox berbentuk chip */
.cpl-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.cpl-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3125rem .75rem;
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius-pill);
  background: var(--atom-card);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
  cursor: pointer;
  user-select: none;
}
.cpl-chip:hover { border-color: var(--atom-text-muted); }
.cpl-chip .bi { display: none; }
.cpl-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cpl-chip:focus-within { box-shadow: var(--atom-shadow-focus); }
.cpl-chip.is-pilih { background: var(--atom-primary-light); border-color: var(--atom-primary); color: var(--atom-primary); font-weight: 500; }
.cpl-chip.is-pilih .bi { display: inline; }

/* Kotak akuan pengesahan e-mel (kawalan wajib) */
.cpl-akuan {
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-warning);
  border-radius: var(--atom-radius);
  background: var(--atom-warning-light);
}
.cpl-emel-sasar { display: flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-md); font-weight: 600; color: var(--atom-text); word-break: break-all; }

/* Senarai surat tawaran dalam butiran */
.cpl-surat-senarai { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.cpl-surat-senarai li { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; }
.cpl-surat-senarai li + li { border-top: 1px solid var(--atom-border); }
.cpl-surat-ikon { font-size: 1.25rem; color: var(--atom-primary); }

/* Dokumen surat tawaran — kepala & jadual dikongsi dengan .cal-dok */
.cpl-surat { line-height: 1.65; }
.cpl-surat p { margin-bottom: .75rem; }
.cpl-surat-penerima { padding: 1.25rem 0 1rem; }
.cpl-surat-penerima strong { display: block; }
.cpl-surat-penerima span { display: block; }
.cpl-surat-alamat { max-width: 22rem; white-space: pre-line; }
.cpl-surat-perkara { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cpl-surat-perenggan { padding-left: 1.25rem; margin-bottom: 1rem; }
.cpl-surat-perenggan > li { margin-bottom: .75rem; padding-left: .25rem; text-align: justify; }
.cpl-surat-jadual { margin: .75rem 0 .25rem; max-width: 34rem; }
.cpl-surat-jadual th { width: 9rem; font-weight: 600; color: var(--atom-text-secondary); white-space: nowrap; }
.cpl-surat-slogan { font-weight: 700; letter-spacing: .04em; }
.cpl-surat-tandatangan { margin: 2.5rem 0 1.25rem; }
.cpl-surat-tandatangan strong, .cpl-surat-tandatangan span { display: block; }
.cpl-surat-sk { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }

/* --------------------------------------------------------------------------
   3l. Pengurusan Fellowship — Fellowship Luar (fellowship/fellowship-luar.html)
   -------------------------------------------------------------------------- */
.ffl-tabs { padding-inline: .75rem; }
/* Lebar minimum lajur teks panjang supaya tidak terhimpit (jadual boleh skrol mendatar) */
.ffl-table td:nth-child(2),
.ffl-table td:nth-child(3) { min-width: 10rem; }
.ffl-table td:nth-child(4) { min-width: 12rem; }
/* Baris meta kecil dalam sel gabungan (fi, kiraan lampiran) */
.ffl-meta { display: block; margin-top: .3125rem; font-size: var(--atom-fs-sm); }
.ffl-no-id { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }

/* Cip "Sedang berjalan" dalam lajur tempoh */
.ffl-chip-berjalan {
  display: inline-flex; align-items: center; gap: .3125rem;
  margin-top: .25rem;
  padding: .125rem .5rem;
  border-radius: var(--atom-radius-pill);
  background: var(--atom-success-light);
  color: var(--atom-success);
  font-size: var(--atom-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.ffl-chip-titik { width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }

/* Kiraan lampiran dalam jadual */
.ffl-lampiran-kira { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; color: var(--atom-text-secondary); font-variant-numeric: tabular-nums; }
.ffl-lampiran-kira.is-kosong { color: var(--atom-warning); }

/* Senarai lampiran (butiran & borang) */
.ffl-lampiran-senarai { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ffl-lampiran-senarai li { display: flex; align-items: center; gap: .75rem; padding: .5rem .875rem; }
.ffl-lampiran-senarai li + li { border-top: 1px solid var(--atom-border); }
.ffl-lampiran-ikon { font-size: 1.25rem; color: var(--atom-primary); }
.ffl-lampiran-butiran { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ffl-lampiran-nama { font-weight: 500; color: var(--atom-text); overflow-wrap: anywhere; }
.ffl-lampiran-senarai .is-danger { color: var(--atom-danger); }
.form-dropzone.ffl-dropzone-ralat { border-color: var(--atom-danger); }

/* Baris modul berulang — gaya asas dikongsi dengan .agenda-baris */
.ffl-modul-baris + .ffl-modul-baris { margin-top: .5rem; }
.ffl-modul-baris .is-danger { color: var(--atom-danger); }
.ffl-modul-senarai { margin: 0; padding-left: 1.125rem; }
.ffl-modul-senarai li + li { margin-top: .375rem; }

/* --------------------------------------------------------------------------
   3k. Pengurusan Fellowship — Sokongan & Kelulusan
       fellowship/permohonan-fellowship.html (BF-EA-SPSM-FEL-01)
   -------------------------------------------------------------------------- */
/* Pemilih "Paparan sebagai" — segmen dikongsi dengan .kal-segmen */
.fsk-peranan { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; min-width: 0; }
.fsk-peranan-label { font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--atom-text-muted); }
.fsk-segmen { flex-wrap: wrap; max-width: 100%; }
/* Bar "Paparan sebagai" berasingan di bawah kepala halaman */
.fsk-peranan-bar { flex-direction: row; align-items: center; justify-content: flex-start; gap: .75rem; margin: 0 0 1rem; flex-wrap: wrap; }
.fsk-peranan-nota {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .625rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-primary-light);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.fsk-peranan-nota .bi { color: var(--atom-primary); line-height: 1.5; }
.fsk-peranan-nota strong { color: var(--atom-text); }

.fsk-sel-tawaran { min-width: 15rem; max-width: 22rem; }
.fsk-tajuk { line-height: 1.35; }

/* Stepper mendatar ringkas: sokongan → Urus Setia → KP */
.fsk-langkah { list-style: none; display: flex; margin: 0; padding: 0; }
.fsk-langkah-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  min-width: 3.5rem;
}
.fsk-langkah-item + .fsk-langkah-item::before {
  content: "";
  position: absolute; top: .6875rem; right: 50%;
  width: 100%; height: 2px;
  background: var(--atom-border-strong);
}
.fsk-langkah-item.is-selesai + .fsk-langkah-item::before,
.fsk-langkah-item.is-selesai + .fsk-langkah-item.is-gagal::before { background: var(--atom-success); }
.fsk-langkah-titik {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--atom-border-strong);
  background: var(--atom-card);
  font-size: .6875rem; font-weight: 700;
  color: var(--atom-text-muted);
}
.fsk-langkah-titik .bi { font-size: .75rem; line-height: 1; }
.fsk-langkah-label { font-size: .6875rem; line-height: 1.2; color: var(--atom-text-muted); white-space: nowrap; }
.fsk-langkah-item.is-selesai .fsk-langkah-titik { background: var(--atom-success); border-color: var(--atom-success); color: #fff; }
.fsk-langkah-item.is-gagal .fsk-langkah-titik { background: var(--atom-danger); border-color: var(--atom-danger); color: #fff; }
.fsk-langkah-item.is-semasa .fsk-langkah-titik { border-color: var(--atom-warning); background: var(--atom-warning-light); color: var(--atom-warning); box-shadow: 0 0 0 3px var(--atom-warning-light); }
.fsk-langkah-item.is-semasa .fsk-langkah-label { color: var(--atom-text); font-weight: 600; }
.fsk-langkah-item.is-gagal .fsk-langkah-label { color: var(--atom-danger); font-weight: 600; }
.fsk-di { display: block; margin-top: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.fsk-di strong { color: var(--atom-text); font-weight: 600; }
.fsk-di.is-gagal { color: var(--atom-danger); }

/* Tindakan dikunci untuk peranan lain */
.dropdown-item.fsk-item-kunci { display: flex; align-items: flex-start; }
.fsk-item-kunci small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.btn.fsk-btn-kunci { pointer-events: none; opacity: .75; }

/* Senarai menegak peringkat sokongan & keputusan dalam modal */
.fsk-sub-tajuk { margin: 0 0 .5rem; font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--atom-text-muted); }
.fsk-peringkat-senarai { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.fsk-peringkat { padding: .75rem 1rem .75rem 1.125rem; box-shadow: inset 3px 0 0 var(--atom-border-strong); }
.fsk-peringkat + .fsk-peringkat { border-top: 1px solid var(--atom-border); }
.fsk-peringkat.is-selesai { box-shadow: inset 3px 0 0 var(--atom-success); }
.fsk-peringkat.is-gagal { box-shadow: inset 3px 0 0 var(--atom-danger); }
.fsk-peringkat.is-semasa { box-shadow: inset 3px 0 0 var(--atom-warning); background: var(--atom-warning-light); }
.fsk-peringkat.is-belum .fsk-peringkat-tajuk { color: var(--atom-text-muted); }
.fsk-peringkat-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem .75rem; }
.fsk-peringkat-tajuk { font-weight: 600; color: var(--atom-text); }
.fsk-peringkat-ulasan { margin: .375rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); white-space: pre-line; }
.fsk-peringkat-meta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Semakan pantas urus setia */
.fsk-semak { padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.fsk-semak legend { float: none; width: auto; margin-bottom: .375rem; }
.fsk-semak .form-check:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .fsk-peranan { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .fsk-peranan, .fsk-segmen { width: 100%; }
  .fsk-segmen .kal-segmen-btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   3j. Pengurusan Fellowship — Tawaran & Fellowship Saya
       fellowship/tawaran-fellowship.html & fellowship/fellowship-saya.html
   -------------------------------------------------------------------------- */
/* Jadual tawaran — kiraan & pecahan permohonan */
.fts-sel-tawaran { min-width: 16rem; }
.fts-kiraan { display: inline-block; font-weight: 600; white-space: nowrap; }
.fts-pecahan-baris { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); white-space: nowrap; }
.fts-pecahan.is-proses { color: var(--atom-info); }
.fts-pecahan.is-lulus { color: var(--atom-success); }
.fts-pecahan.is-gagal { color: var(--atom-danger); }

/* Syarat kelayakan & perenggan dalam modal */
.fts-syarat {
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-primary);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text);
  white-space: pre-line;
}
.fts-perenggan { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); line-height: 1.65; white-space: pre-line; }

/* Seksyen halaman Fellowship Saya */
.fts-seksyen { margin-bottom: 1.75rem; }
.fts-seksyen .tg-section-title { display: flex; align-items: center; gap: .5rem; }
.fts-seksyen .tg-section-title .badge-count { background: var(--atom-primary-light); color: var(--atom-primary); }
.fts-amaran { align-items: center; margin-bottom: 1rem; }
.fts-amaran > .btn { flex: 0 0 auto; }

/* Kad tawaran terbuka */
.fts-kad {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.125rem 1.125rem 1rem;
  background: var(--atom-card);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  box-shadow: var(--atom-shadow-xs);
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition), transform var(--atom-transition);
}
.fts-kad:hover { border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-md); transform: translateY(-2px); }
.fts-kad::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--atom-primary);
}
.fts-kad.is-hampir::before { background: var(--atom-warning); }
.fts-kad.is-segera::before { background: var(--atom-danger); }
.fts-kad-atas { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .875rem; }
.fts-kad-atas .tg-due { margin-left: auto; flex: 0 0 auto; }
.fts-kad-ikon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--atom-radius);
  display: grid; place-items: center; font-size: 1.0625rem;
}
.fts-kad-lokasi { min-width: 0; line-height: 1.25; }
.fts-kad-lokasi strong { display: block; font-size: var(--atom-fs-sm); }
.fts-kad-lokasi span { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.fts-kad-tajuk { font-size: var(--atom-fs-md); font-weight: 600; line-height: 1.35; margin: 0 0 .25rem; }
.fts-kad-org { display: flex; gap: .375rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); margin: 0 0 .875rem; }
.fts-kad-meta { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .375rem; flex: 1 1 auto; align-content: start; }
.fts-kad-meta li { display: flex; gap: .5rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.fts-kad-meta .bi { flex: 0 0 auto; color: var(--atom-text-muted); }
.fts-kad-status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.fts-kad-kaki {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .75rem; border-top: 1px dashed var(--atom-border);
}
.fts-kad-butang { display: flex; flex-wrap: wrap; gap: .375rem; }

/* Senarai permohonan saya */
.fts-mohon { list-style: none; margin: 0; padding: 0; }
.fts-mohon-item { position: relative; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.fts-mohon-item:last-child { border-bottom: 0; }
.fts-mohon-item.is-tertunggak { box-shadow: inset 3px 0 0 var(--atom-danger); }
.fts-mohon-kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.fts-mohon-teks { min-width: 0; flex: 1 1 20rem; }
.fts-mohon-status { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; text-align: right; }
.fts-mohon-nota { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.fts-mohon-nota.is-bahaya { color: var(--atom-danger); font-weight: 600; }
.fts-mohon-nota.is-amaran { color: var(--atom-warning); font-weight: 600; }
.fts-mohon-nota.is-ok { color: var(--atom-success); }
.fts-mohon-tindakan { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }

/* Stepper laluan permohonan */
.fts-langkah { list-style: none; display: flex; margin: 1rem 0 0; padding: 0; overflow-x: auto; }
.fts-langkah-item {
  position: relative;
  flex: 1 1 0;
  min-width: 6.5rem;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 .25rem;
  text-align: center;
}
.fts-langkah-item::before {
  content: ""; position: absolute; top: 11px; right: 50%; left: -50%;
  height: 2px; background: var(--atom-border);
}
.fts-langkah-item:first-child::before { display: none; }
.fts-langkah-item.is-selesai::before,
.fts-langkah-item.is-semasa::before,
.fts-langkah-item.is-lewat::before,
.fts-langkah-item.is-gagal::before { background: var(--atom-success); }
.fts-langkah-titik {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem;
  background: var(--atom-card);
  border: 2px solid var(--atom-border-strong);
  color: var(--atom-text-muted);
}
.fts-langkah-item.is-selesai .fts-langkah-titik { background: var(--atom-success); border-color: var(--atom-success); color: #fff; }
.fts-langkah-item.is-semasa .fts-langkah-titik { background: var(--atom-primary-light); border-color: var(--atom-primary); color: var(--atom-primary); box-shadow: 0 0 0 4px var(--atom-primary-light); }
.fts-langkah-item.is-lewat .fts-langkah-titik { background: var(--atom-danger-light); border-color: var(--atom-danger); color: var(--atom-danger); box-shadow: 0 0 0 4px var(--atom-danger-light); }
.fts-langkah-item.is-gagal .fts-langkah-titik { background: var(--atom-danger); border-color: var(--atom-danger); color: #fff; }
.fts-langkah-item.is-batal .fts-langkah-titik { border-style: dashed; }
.fts-langkah-label { margin-top: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; line-height: 1.3; color: var(--atom-text-secondary); }
.fts-langkah-item.is-semasa .fts-langkah-label { color: var(--atom-primary); }
.fts-langkah-item.is-lewat .fts-langkah-label,
.fts-langkah-item.is-gagal .fts-langkah-label { color: var(--atom-danger); }
.fts-langkah-item.is-batal .fts-langkah-label,
.fts-langkah-item.is-menunggu .fts-langkah-label { color: var(--atom-text-muted); font-weight: 500; }
.fts-langkah-item.is-batal .fts-langkah-label { text-decoration: line-through; }
.fts-langkah-sub { font-size: .6875rem; color: var(--atom-text-muted); line-height: 1.3; margin-top: .125rem; }

/* Pratonton laluan sokongan dalam borang permohonan */
.fts-laluan { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; }
.fts-laluan-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3125rem .75rem;
  border: 1px solid var(--atom-primary-soft);
  border-radius: var(--atom-radius-pill);
  background: var(--atom-primary-light);
  color: var(--atom-primary);
  font-size: var(--atom-fs-sm); font-weight: 500;
}
.fts-laluan-anak { color: var(--atom-text-muted); }

/* Pautan dalam toast */
.fts-toast-pautan { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: var(--atom-fs-sm); font-weight: 600; }

@media (max-width: 575.98px) {
  .fts-mohon-item { padding: 1rem; }
  .fts-mohon-status { align-items: flex-start; text-align: left; }
  .fts-amaran { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   3m. Latihan Industri — Borang Awam & Pengesahan Tawaran
       latihan-industri/borang-permohonan.html & pengesahan-tawaran.html
   -------------------------------------------------------------------------- */
/* Bidang pengajian — had 3 chip; chip lain dimatikan */
.cpl-chip.lib-chip-mati { opacity: .5; cursor: not-allowed; }
.cpl-chips.lib-chips-ralat .cpl-chip:not(.is-pilih) { border-color: var(--atom-danger); }
.lib-kiraan { display: inline-block; margin-left: .25rem; font-weight: 600; color: var(--atom-text-secondary); }

/* Tempoh latihan dikira */
.lib-tempoh {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius);
  color: var(--atom-text-muted);
  font-size: var(--atom-fs-sm);
}
.lib-tempoh.is-ada { border-style: solid; border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-text); }
.lib-tempoh strong { color: var(--atom-primary); }
.lib-tempoh span { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Dokumen sokongan — tiga medan fail */
.lib-dok-senarai { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.lib-dok { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.lib-dok .form-control { background-color: var(--atom-card); }
.lib-dok-nama { overflow-wrap: anywhere; }
.lib-dok-nama.is-ada { color: var(--atom-success); font-weight: 500; }

/* Panel sisi — langkah proses & hubungi */
.lib-langkah { list-style: none; counter-reset: lib; margin: 0; padding: 0; }
.lib-langkah li { position: relative; counter-increment: lib; padding: 0 0 .875rem 2.25rem; font-size: var(--atom-fs-sm); }
.lib-langkah li:last-child { padding-bottom: 0; }
.lib-langkah li::before {
  content: counter(lib);
  position: absolute; left: 0; top: 0;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--atom-primary-light); color: var(--atom-primary);
  font-size: var(--atom-fs-xs); font-weight: 700;
}
.lib-langkah li:not(:last-child)::after {
  content: ''; position: absolute; left: .75rem; top: 1.625rem; bottom: .25rem;
  width: 1px; background: var(--atom-border);
}
.lib-langkah strong { display: block; color: var(--atom-text); }
.lib-langkah span { display: block; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.lib-hubungi { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; font-size: var(--atom-fs-sm); }
.lib-hubungi li { display: flex; gap: .625rem; align-items: flex-start; overflow-wrap: anywhere; }
.lib-hubungi .bi { color: var(--atom-primary); margin-top: .125rem; }

/* Pengesahan tawaran */
.lib-sah { max-width: 50rem; }
.lib-tahniah { display: flex; gap: .875rem; align-items: flex-start; margin: 1rem 0 1.25rem; padding: 1rem 1.125rem; border-radius: var(--atom-radius); background: var(--atom-success-light); }
.lib-tahniah > .bi { font-size: 1.75rem; line-height: 1; color: var(--atom-success); }
.lib-ringkas .cal-ringkas-nilai { overflow-wrap: anywhere; }
.lib-pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.lib-pilihan-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  padding: 1.125rem 1.25rem;
  border: 2px solid var(--atom-border);
  border-radius: var(--atom-radius-lg, var(--atom-radius));
  background: var(--atom-card);
  color: var(--atom-text);
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.lib-pilihan-btn .bi { font-size: 1.75rem; line-height: 1; margin-bottom: .25rem; }
.lib-pilihan-btn strong { font-size: var(--atom-fs-lg); }
.lib-pilihan-btn span { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.lib-pilihan-btn:focus-visible { outline: 0; box-shadow: var(--atom-shadow-focus); }
.lib-pilihan-btn.is-setuju .bi { color: var(--atom-success); }
.lib-pilihan-btn.is-setuju:hover { border-color: var(--atom-success); background: var(--atom-success-light); }
.lib-pilihan-btn.is-tidak .bi { color: var(--atom-danger); }
.lib-pilihan-btn.is-tidak:hover, .lib-pilihan-btn.is-tidak.is-aktif { border-color: var(--atom-danger); background: var(--atom-danger-light); }
.lib-sebab { margin-top: 1rem; padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.cal-berjaya-ikon.lib-ikon-neutral { background: var(--atom-primary-light); color: var(--atom-primary); }
.cal-berjaya-ikon.lib-ikon-amaran { background: var(--atom-warning-light); color: var(--atom-warning); }

@media (max-width: 575.98px) {
  .lib-pilihan { grid-template-columns: 1fr; }
  .lib-tahniah { flex-direction: column; gap: .5rem; }
}

/* Cetak surat tawaran — halaman awam tiada .app-shell */
@media print {
  body.cal-cetak .portal-page, body.cal-cetak .skip-link { display: none !important; }
}

/* --------------------------------------------------------------------------
   3n. Latihan Industri — Permohonan Pelajar
       latihan-industri/permohonan-li.html (BF-EA-SPSM-LI-01)
   -------------------------------------------------------------------------- */
/* Jadual 7 lajur mesti muat 1440px dengan sidebar terbuka — teks panjang
   dibalut, bukan skrol mendatar. */
.lip-jadual td { overflow-wrap: break-word; }
.lip-tabs { gap: 0; }
.lip-tabs .nav-link { padding-inline: .5rem; gap: .375rem; }
.lip-sel-pelajar { min-width: 11rem; }
.lip-sel-pelajar .emp-nama { min-width: 0; }
.lip-sel-pengajian { min-width: 12rem; max-width: 19rem; }
.lip-sel-pengajian .tag-list { max-width: none; margin-top: .25rem; }
.lip-sel-tempoh { min-width: 7.5rem; }
.lip-julat > span { white-space: nowrap; }
.lip-sel-penempatan { min-width: 9rem; max-width: 13rem; }
.lip-sel-status { min-width: 9.5rem; max-width: 12.5rem; }
.lip-sel-status .badge-atom, .lip-sel-pengajian .badge-atom { white-space: normal; text-align: left; }
.lip-institusi, .lip-julat, .lip-bahagian { display: block; font-weight: 500; color: var(--atom-text); line-height: 1.35; }
.lip-emel { overflow-wrap: anywhere; }
.lip-kp { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.lip-kp-togol { margin-left: .25rem; padding: .125rem .5rem; }
.lip-nota { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); margin-top: .1875rem; }
.lip-nota.is-amaran { color: var(--atom-warning); font-weight: 500; }
.lip-sel-penempatan > .lip-nota:first-child { margin-top: 0; font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-text); }
.kitaran-rujukan.lip-lepas { color: var(--atom-danger); font-weight: 500; }

/* Aliran 8 peringkat dalam butiran (stepper dikongsi .fsk-langkah) */
.lip-aliran { overflow-x: auto; margin: -.25rem 0 1.25rem; padding-bottom: .25rem; }
.lip-aliran .fsk-langkah-item { flex: 1 1 0; min-width: 4.25rem; }

/* Dokumen, pegawai sasaran & semakan */
.lip-dok-jenis { display: block; font-weight: 500; color: var(--atom-text); }
.lip-sasaran { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.lip-sasaran li { display: flex; align-items: baseline; gap: .375rem; font-size: var(--atom-fs-sm); }
.lip-sasaran .bi { color: var(--atom-primary); }
.lip-semak { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lip-semak-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  background: var(--atom-card);
}
.lip-semak-item.is-tiada { border-color: var(--atom-danger); background: var(--atom-danger-light); }
.lip-ralat { margin: .5rem 0 0; font-size: var(--atom-fs-xs); color: var(--atom-danger); }
.lip-keputusan { display: flex; flex-wrap: wrap; align-items: center; min-height: calc(1.5em + .75rem + 2px); }

/* Endorsan — alat pilih pantas satu bahagian */
.lip-endors-alat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.lip-endors-alat .form-select { width: auto; min-width: 16rem; }
.lip-endors-kira { margin-left: auto; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.select2-container.is-invalid .select2-selection { border-color: var(--atom-danger); }

.lip-pautan .form-control { font-size: var(--atom-fs-xs); }

/* Sijil tamat latihan industri — bingkai landskap */
.lip-sijil { page: lip-sijil; }
.lip-sijil-bingkai {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  aspect-ratio: 1.414 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem 3.5rem;
  text-align: center;
  color: var(--atom-text);
  background: linear-gradient(180deg, #fff, var(--atom-primary-light));
  border: 3px double var(--atom-primary);
  outline: 1px solid var(--atom-primary);
  outline-offset: -12px;
  border-radius: var(--atom-radius);
}
.lip-sijil-kepala { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.lip-sijil-kepala strong { font-size: var(--atom-fs-lg); letter-spacing: .08em; }
.lip-sijil-kepala span { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.brand-mark.lip-sijil-lambang { width: 56px; height: 56px; flex-basis: 56px; border-radius: 50%; }
.brand-mark.lip-sijil-lambang svg { width: 36px; height: 36px; }
.lip-sijil-tajuk { margin: 1.25rem 0 .75rem; font-size: 1.75rem; font-weight: 700; letter-spacing: .12em; color: var(--atom-primary); }
.lip-sijil-teks { margin: 0 0 .5rem; font-size: var(--atom-fs-md); line-height: 1.7; }
.lip-sijil-nama { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--atom-border-strong); padding: 0 1.5rem .25rem; }
.lip-sijil-kp { margin: .25rem 0 .75rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); font-variant-numeric: tabular-nums; }
.lip-sijil-program { margin: 0; font-size: var(--atom-fs-sm); font-style: italic; color: var(--atom-text-secondary); }
.lip-sijil-tandatangan { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; width: 100%; max-width: 40rem; margin-top: 2rem; }
.lip-sijil-tandatangan > div { display: flex; flex-direction: column; align-items: center; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.lip-sijil-tandatangan strong { font-size: var(--atom-fs-sm); color: var(--atom-text); }
.lip-sijil-garis { display: block; width: 100%; height: 2.5rem; border-bottom: 1px solid var(--atom-text); margin-bottom: .375rem; }
.lip-sijil-kaki { display: flex; justify-content: space-between; width: 100%; margin-top: 1.5rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

@media (max-width: 767.98px) {
  .lip-sijil-bingkai { aspect-ratio: auto; padding: 2rem 1.25rem; }
  .lip-sijil-tandatangan { grid-template-columns: 1fr; gap: 1.5rem; }
  .lip-sijil-kaki { flex-direction: column; gap: .25rem; }
  .lip-endors-alat .form-select { min-width: 0; flex: 1 1 100%; }
}

@page lip-sijil { size: A4 landscape; margin: 10mm; }
@media print {
  .lip-sijil-bingkai { max-width: none; background: #fff; }
}

/* --------------------------------------------------------------------------
   3o. Latihan Industri — Pemilihan Calon & Pemantauan Elaun
       latihan-industri/pemilihan-calon.html & pemantauan-elaun.html
       (BF-EA-SPSM-LI-01)
   -------------------------------------------------------------------------- */
/* Pemilih identiti simulasi (pegawai / bahagian) */
.lie-simulasi {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
}
.lie-simulasi-medan { min-width: 16rem; }
.lie-simulasi-medan .form-label { font-size: var(--atom-fs-xs); font-weight: 600; margin-bottom: .25rem; }
.lie-simulasi-nota {
  flex: 1 1 18rem; display: flex; gap: .375rem; margin: 0;
  font-size: var(--atom-fs-xs); color: var(--atom-text-muted);
}
.lie-simulasi-nota .bi { color: var(--atom-warning); }

/* Grid kad calon — kad asas dikongsi dengan .fts-kad */
.lie-grid-wrap { padding: 1.25rem; }
.lie-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lie-kad { overflow: hidden; }
.lie-kad-isi { display: flex; flex-direction: column; flex: 1 1 auto; }
.lie-kad .fts-kad-meta { flex: 0 0 auto; margin-bottom: .875rem; }
.lie-kad.is-dikunci { background: var(--atom-surface-alt); box-shadow: none; }
.lie-kad.is-dikunci:hover { transform: none; box-shadow: none; }
.lie-kad.is-dikunci::before { background: var(--atom-border-strong); }
.lie-kad.is-dipilih-saya::before { background: var(--atom-success); }
.lie-kad.is-dikunci .lie-kad-isi { opacity: .62; filter: grayscale(.6); }
.lie-reben {
  display: flex; align-items: center; gap: .375rem;
  margin: -1.125rem -1.125rem .875rem;
  padding: .4375rem 1.125rem;
  background: var(--atom-neutral-light);
  border-bottom: 1px solid var(--atom-border);
  font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--atom-text-secondary);
}
.lie-reben.is-saya { background: var(--atom-success-light); color: var(--atom-success); }
.lie-reben.is-tamat { color: var(--atom-text-muted); }
.lie-bidang { max-width: none; margin-bottom: .875rem; }
.lie-dok-senarai { display: flex; flex-wrap: wrap; gap: .375rem .875rem; margin: -.25rem 0 1rem; }
.lie-dok { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--atom-fs-xs); font-weight: 500; }
.lie-dok .bi { color: var(--atom-danger); }

/* Maklumat pemilihan — kekal jelas walaupun kad dikunci */
.lie-pilihan {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .875rem;
  margin: 0 0 .875rem; padding: .625rem .75rem;
  background: var(--atom-card);
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  font-size: var(--atom-fs-xs);
}
.lie-pilihan.is-saya { border-color: #CDEBD8; }
.lie-pilihan dt { font-weight: 500; color: var(--atom-text-muted); }
.lie-pilihan dd { margin: .0625rem 0 0; font-weight: 600; color: var(--atom-text); }
.lie-pilihan .badge-atom { white-space: normal; }

/* Paparan Pengarah Bahagian */
.lie-seksyen + .lie-seksyen { border-top: 1px solid var(--atom-border); }
.lie-seksyen > .lie-seksyen-tajuk { padding: 1rem 1.25rem .25rem; }
.lie-seksyen-tajuk {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: var(--atom-fs-md); font-weight: 600;
}
.lie-seksyen-tajuk > .bi { color: var(--atom-primary); }
.lie-butang-baris { display: inline-flex; gap: .375rem; }

/* Tetapan elaun (baca sahaja) */
.lie-tetapan-kad { margin-bottom: 1.25rem; }
.lie-tetapan-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.lie-tetapan { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.lie-tetapan-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.lie-tetapan-item strong { display: block; font-variant-numeric: tabular-nums; }
.lie-tetapan-ikon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--atom-radius); display: grid; place-items: center; }
.lie-kaedah { display: flex; gap: .5rem; margin: .875rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.lie-kaedah > .bi { color: var(--atom-primary); }
.lie-cuti { margin-top: .875rem; padding-top: .75rem; border-top: 1px dashed var(--atom-border); }
.lie-cuti-togol { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; padding-inline: .375rem; }
.lie-cuti-togol .bi { transition: transform var(--atom-transition); }
.lie-cuti-togol:not(.collapsed) .bi-chevron-right { transform: rotate(90deg); }
.lie-cuti-panel { padding-top: .75rem; }
.lie-cuti-alat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.lie-cuti-alat .form-select { width: auto; min-width: 16rem; }
.lie-cuti-hm { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.lie-cuti-jadual { max-height: 18rem; overflow: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.lie-cuti-jadual thead th { position: sticky; top: 0; z-index: 1; }
.table-atom tr.lie-cuti-lepas td { color: var(--atom-text-muted); }

/* Jadual pemantauan elaun */
.lie-jadual tbody td { vertical-align: top; }
.lie-jadual .lie-sel-pelajar { min-width: 11rem; max-width: 14rem; }
.lie-jadual .lie-sel-pelajar .emp-nama { min-width: 0; }
.lie-jadual .lie-sel-tempoh { min-width: 8.5rem; }
.lie-jadual .badge-atom { white-space: normal; max-width: 8.5rem; }
.lie-jadual tbody td.col-action { vertical-align: middle; }
.lie-sel-utama { display: block; font-weight: 500; color: var(--atom-text); font-variant-numeric: tabular-nums; }
.lie-sel-utama.is-baki { color: var(--atom-warning); font-weight: 600; }
.lie-elaun-sel { min-width: 9rem; max-width: 10.5rem; }
.lie-jadual .lie-sel-baki { max-width: 7.5rem; }
.lie-elaun-sel .progress-label { flex-wrap: wrap; gap: 0 .375rem; }
.lie-elaun-sel .progress-label { margin-bottom: .25rem; }
.lie-elaun-sel .progress { margin-bottom: .1875rem; }

/* Modal Laporan 7 */
.lie-tab-modal { margin-bottom: 1rem; }
.lie-jadual-bulan { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); overflow-x: auto; }
.lie-jadual-bulan .table-atom { min-width: 56rem; }
.lie-jadual-bulan .table-atom thead th,
.lie-jadual-bulan .table-atom tbody td,
.lie-jadual-bulan .table-atom tfoot th { padding-inline: .4375rem; }
.lie-jadual-bulan .table-atom thead th { white-space: nowrap; }
.lie-jadual-bulan .lie-sel-bulan { max-width: 9.5rem; }
.lie-jadual-bulan .lie-sel-bulan .kitaran-rujukan { white-space: normal; }
.lie-jadual-bulan .table-atom thead th:first-child,
.lie-jadual-bulan .table-atom tbody td:first-child,
.lie-jadual-bulan .table-atom tfoot th:first-child { padding-left: .875rem; }
.lie-jadual-bulan .table-atom tbody td { font-size: var(--atom-fs-sm); }
.lie-jadual-bulan .kitaran-rujukan { white-space: nowrap; }
.lie-jadual-bulan thead th { vertical-align: bottom; line-height: 1.3; }
.lie-jadual-bulan tbody td { vertical-align: top; }
.lie-jadual-bulan tbody td.col-action { vertical-align: middle; }
.lie-jadual-bulan tfoot th {
  padding: .625rem .75rem;
  background: var(--atom-surface-alt);
  border-top: 2px solid var(--atom-border-strong);
  font-weight: 700; color: var(--atom-text);
  font-variant-numeric: tabular-nums;
}
.lie-th-sub { font-size: .6875rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--atom-text-muted); }
.table-atom tr.lie-baris-luar > td { background: var(--atom-surface-alt); color: var(--atom-text-muted); }
.lie-bulan-nota { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.lie-bulan-nota .badge-atom { font-size: .6875rem; }
.lie-nota-jadual { display: flex; gap: .375rem; margin: .625rem 0 0; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Borang rekod bayaran & ketidakhadiran dalam modal */
.lie-bayar {
  margin-bottom: 1rem; padding: .875rem 1rem;
  border: 1px solid var(--atom-primary-soft);
  border-left: 3px solid var(--atom-primary);
  border-radius: var(--atom-radius);
  background: var(--atom-primary-light);
}
.lie-bayar-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem 1rem; margin-bottom: .75rem; }
.lie-bayar-butang { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .875rem; }
.lie-hadir-borang {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.lie-hadir-medan { flex: 1 1 13rem; min-width: 0; }
.lie-hadir-medan .form-label { font-size: var(--atom-fs-xs); font-weight: 600; margin-bottom: .25rem; }
.lie-hadir-hantar { margin-top: 1.4375rem; }
.lie-hadir-borang + .lie-nota-jadual { margin: .5rem 0 1rem; }

@media (max-width: 575.98px) {
  .lie-simulasi-medan { min-width: 0; width: 100%; }
  .lie-pilihan { grid-template-columns: minmax(0, 1fr); }
  .lie-cuti-alat .form-select { min-width: 0; width: 100%; }
  .lie-hadir-hantar { margin-top: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   3r. Jalinan Kerjasama (JK)
       jalinan-kerjasama/mou.html, projek-saya.html, pengesahan-minit.html,
       penganjuran-program-antarabangsa/*.html (BF-EA-SPSM-JK-01 & JK-02 /
       BDHL-SHL-PA)
   -------------------------------------------------------------------------- */
.jk-nilai-bahaya { color: var(--atom-danger); }
.jk-teks-bahaya { color: var(--atom-danger); }
.jk-teks-amaran { color: var(--atom-warning); font-weight: 500; }

/* Nota "perlu pengesahan" (peringatan tarikh luput MOU/MOA) */
.jk-nota-sah {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
}
.jk-nota-sah > .bi { color: var(--atom-warning); font-size: 1rem; margin-top: .0625rem; }

/* Jadual — lajur teks panjang tidak terhimpit */
.table-atom.jk-table tbody td { vertical-align: top; }
.jk-table td:nth-child(2) { min-width: 14rem; }
.jk-table td:nth-child(3) { min-width: 11rem; }
.jk-table .jk-sel-dok { min-width: 8.5rem; }
.jk-pihak { display: block; }
.jk-pihak + .jk-pihak { margin-top: .375rem; }
.jk-sel-kemajuan { min-width: 11rem; }
.jk-tindakan { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }

/* Cip status projek */
.jk-chip {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .125rem .5625rem;
  border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 600; white-space: nowrap;
  background: var(--atom-neutral-light); color: var(--atom-neutral);
}
.jk-chip-titik { width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.jk-chip.is-bergerak { background: var(--atom-success-light); color: var(--atom-success); }
.jk-chip.is-tindakan { background: var(--atom-warning-light); color: var(--atom-warning); }
.jk-chip.is-tiada    { background: var(--atom-danger-light);  color: var(--atom-danger); }
.jk-chip.is-selesai  { background: var(--atom-info-light);    color: var(--atom-info); }
.jk-chip.is-lewat    { background: var(--atom-danger);        color: #fff; }
.jk-chip .bi { font-size: .75rem; }

/* Bar kemajuan dengan nilai peratus */
.jk-kemajuan { display: flex; align-items: center; gap: .5rem; }
.jk-kemajuan .progress { flex: 1 1 auto; min-width: 4rem; }
.jk-kemajuan-nilai { font-size: var(--atom-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.jk-kemajuan.is-kecil .progress { height: 6px; }
.jk-kemajuan.is-kecil + .fs-xs { margin-top: .25rem; }

/* Baris berulang (pihak, cadangan, agenda, pakar, peserta) */
.jk-baris-ulang + .jk-baris-ulang { margin-top: .5rem; }
.jk-baris-ulang .is-danger { color: var(--atom-danger); }

/* Fail digital — tab & panel */
.jk-tab { margin: 0 -1.5rem 1.25rem; padding-inline: 1rem; border-bottom: 1px solid var(--atom-border); }
.jk-tab .badge-count.jk-kira-bahaya,
.jk-tab .nav-link.active .badge-count.jk-kira-bahaya { background: var(--atom-danger); color: #fff; }
.jk-panel { min-height: 16rem; }
.jk-panel-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.jk-panel-kepala > p { flex: 1 1 22rem; }

/* Kotak ringkasan kecil */
.jk-ringkas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.jk-ringkas-kotak { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.jk-ringkas-nilai { font-size: var(--atom-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.jk-ringkas-nilai.is-capai { color: var(--atom-success); }
.jk-ringkas-nilai.is-belum { color: var(--atom-warning); }
.jk-ringkas-nilai.is-bahaya { color: var(--atom-danger); }
.jk-ringkas-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Kad projek / minit */
.jk-projek-senarai, .jk-minit-senarai { display: flex; flex-direction: column; gap: .75rem; }
.jk-projek-kad, .jk-minit-kad {
  padding: 1rem 1.125rem;
  border: 1px solid var(--atom-border);
  border-left: 3px solid var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.jk-projek-kad.is-lewat { border-left-color: var(--atom-danger); }
.jk-minit-kad.is-menunggu { border-left-color: var(--atom-warning); }
.jk-minit-kad.is-disahkan { border-left-color: var(--atom-success); }
.jk-minit-kad.is-semakan { border-left-color: var(--atom-danger); }
.jk-projek-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.jk-projek-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .375rem; }
.jk-projek-pic { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.jk-pic {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 500; color: var(--atom-text-secondary);
}
.jk-pic.is-saya { border-color: var(--atom-primary-soft); background: var(--atom-primary-light); color: var(--atom-primary); }
.jk-projek-bawah { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.25rem; }
.jk-projek-kemajuan { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .25rem; max-width: 34rem; }
.jk-projek-butang { display: flex; flex-wrap: wrap; gap: .375rem; }
.jk-projek-log { margin-top: .875rem; padding-top: .875rem; border-top: 1px dashed var(--atom-border); }

.jk-minit-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; margin: .25rem 0 .75rem; font-size: var(--atom-fs-sm); }
.jk-minit-meta dt { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.jk-minit-meta dd { margin: 0; }
.jk-minit-meta .is-penuh { grid-column: 1 / -1; }
.jk-keputusan { display: flex; gap: .625rem; margin-top: .75rem; padding: .625rem .875rem; border-radius: var(--atom-radius); font-size: var(--atom-fs-sm); }
.jk-keputusan > .bi { font-size: 1.0625rem; }
.jk-keputusan.is-disahkan { background: var(--atom-success-light); color: var(--atom-success); }
.jk-keputusan.is-semakan { background: var(--atom-danger-light); color: var(--atom-danger); }
.jk-keputusan p { color: var(--atom-text); }

/* Borang sebaris dalam tab (tiada modal bersarang) */
.jk-borang-sebaris {
  margin-bottom: 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--atom-primary-soft);
  border-radius: var(--atom-radius);
  background: var(--atom-primary-light);
}
.jk-borang-sebaris .form-control, .jk-borang-sebaris .form-select { background-color: var(--atom-card); }
.jk-borang-tajuk { display: flex; align-items: center; gap: .5rem; margin-bottom: .875rem; font-size: var(--atom-fs-base); font-weight: 600; color: var(--atom-primary); }
.jk-borang-butang { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Dokumen dikumpul mengikut projek */
.jk-kumpulan-dok + .jk-kumpulan-dok { margin-top: 1.125rem; }
.jk-kumpulan-tajuk { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: var(--atom-fs-sm); font-weight: 600; }
.jk-kumpulan-tajuk > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.jk-kumpulan-tajuk .bi { color: var(--atom-primary); }

/* Pemantauan */
.jk-pantau-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.jk-pantau-kira { display: flex; flex-wrap: wrap; gap: .375rem; }
.jk-pantau-tempoh { display: flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); }
.jk-pantau-tempoh .form-select { width: auto; }
.jk-pantau-jadual { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.jk-susulan-saluran { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .625rem; }

/* Pemilih kakitangan (senarai kotak semak) */
.jk-pilih-staf { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.jk-pilih-staf-alat { display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem; border-bottom: 1px solid var(--atom-border); }
.jk-pilih-kira { white-space: nowrap; font-variant-numeric: tabular-nums; }
.jk-pilih-staf-senarai { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); max-height: 13.5rem; overflow-y: auto; padding: .25rem; }
.jk-pilih-staf-item {
  display: grid; grid-template-columns: auto 1fr; column-gap: .5rem;
  padding: .375rem .5rem; border-radius: var(--atom-radius-sm); cursor: pointer;
}
.jk-pilih-staf-item:hover { background: var(--atom-surface-alt); }
.jk-pilih-staf-item[hidden] { display: none; }
.jk-pilih-staf-item .form-check-input { grid-row: span 2; margin-top: .1875rem; }
.jk-pilih-staf-nama { font-size: var(--atom-fs-sm); font-weight: 500; }
.jk-pilih-staf-bhg { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Projek Saya (PIC) — makluman tindakan susulan */
.jk-susulan-banner { margin: 1rem 1.25rem 0; }
.jk-susulan-item { padding: .5rem 0; }
.jk-susulan-item + .jk-susulan-item { border-top: 1px solid rgba(0, 0, 0, .06); }
.jk-susulan-item p { margin: .125rem 0 0; }

/* Julat peratus kemajuan */
.jk-peratus { display: flex; align-items: center; gap: .75rem; }
.jk-peratus .form-range { flex: 1 1 auto; accent-color: var(--atom-primary); }
.jk-peratus .input-group { flex: 0 0 7.5rem; width: 7.5rem; }

/* Program antarabangsa — senarai semak dokumen */
.jk-semak { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.jk-semak > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .875rem; padding: .625rem .875rem; }
.jk-semak > li + li { border-top: 1px solid var(--atom-border); }
.jk-semak-ikon { font-size: 1.125rem; }
.jk-semak-ikon.is-ada { color: var(--atom-success); }
.jk-semak-ikon.is-tiada { color: var(--atom-warning); }
.jk-semak-ikon.is-pilihan { color: var(--atom-text-muted); }
.jk-semak-label { font-weight: 600; font-size: var(--atom-fs-sm); }
.jk-semak-versi { grid-column: 2 / -1; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.jk-semak-versi ul { margin: .25rem 0 0; padding-left: 1rem; }
.jk-semak-aksi { display: flex; align-items: center; gap: .375rem; }
.jk-semak-aksi .brosur-zon { display: inline-block; }
.jk-semak-aksi .brosur-zon input[type="file"] { cursor: pointer; }
.jk-dok-kira { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.jk-dok-kira.is-kurang { color: var(--atom-warning); }
.jk-dok-kira.is-lengkap { color: var(--atom-success); }

/* Jadual kecil dalam modal / dokumen */
.jk-jadual-kecil { width: 100%; font-size: var(--atom-fs-sm); border-collapse: collapse; }
.jk-jadual-kecil th, .jk-jadual-kecil td { padding: .4375rem .625rem; border-bottom: 1px solid var(--atom-border); vertical-align: top; text-align: left; }
.jk-jadual-kecil thead th { font-size: var(--atom-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-secondary); background: var(--atom-surface-alt); white-space: nowrap; }
.jk-dok-seksyen { margin-top: 1.25rem; }
.jk-dok-seksyen h5 { font-size: var(--atom-fs-base); font-weight: 700; color: var(--atom-primary); margin-bottom: .5rem; }

/* Pengesahan minit — pilihan keputusan */
.jk-pilihan-keputusan { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }

/* Butang set semula penapis — sejajar dengan medan */
.jk-filter-reset { display: flex; align-items: flex-end; }

@media (max-width: 767.98px) {
  .jk-tab { margin-inline: -1rem; }
  .jk-minit-meta { grid-template-columns: minmax(0, 1fr); }
  .jk-projek-atas { flex-direction: column; }
  .jk-projek-status { justify-content: flex-start; }
  .jk-semak > li { grid-template-columns: auto minmax(0, 1fr); }
  .jk-semak-aksi { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   3q. Latihan Luar Negara (PLN-02)
       latihan/ln-program.html, ln-pencalonan-bahagian.html & ln-program-saya.html
       (BF-EA-SPSM-PLN-02)
   -------------------------------------------------------------------------- */
.ln-sel-program { min-width: 15rem; max-width: 22rem; }
.ln-tajuk { white-space: normal; }
.ln-sel-teks { min-width: 12rem; max-width: 20rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); white-space: normal; }
.ln-tarikh-baris { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--atom-fs-sm); }
.ln-tarikh-baris > span { color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.ln-tindakan-label { display: inline-flex; align-items: flex-start; gap: .5rem; font-weight: 600; }
.ln-tindakan-label .bi { color: var(--atom-primary); margin-top: .125rem; }

/* Fail */
.ln-fail { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .375rem; font-size: var(--atom-fs-sm); line-height: 1.35; }
.ln-fail + .ln-fail { margin-top: .25rem; }
.ln-fail .bi { color: var(--atom-primary); }
.ln-fail small { color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
/* Maklumat program daripada iklan (baca sahaja) dalam borang program LN */
.ln-iklan-info { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); overflow: hidden; background: var(--atom-card); }
.ln-iklan-kosong { margin: 0; padding: .75rem 1rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); background: var(--atom-surface-alt); }
.ln-info-jadual { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--atom-fs-sm); }
.ln-info-jadual th, .ln-info-jadual td { padding: .625rem .875rem; border-bottom: 1px solid var(--atom-border); vertical-align: top; text-align: left; }
.ln-info-jadual tr:last-child th, .ln-info-jadual tr:last-child td { border-bottom: 0; }
.ln-info-jadual th { width: 11rem; font-weight: 500; color: var(--atom-text-muted); background: var(--atom-surface-alt); }
.ln-info-jadual td { color: var(--atom-text); font-weight: 500; overflow-wrap: anywhere; }
.ln-info-jadual td + th { border-left: 1px solid var(--atom-border); }
.ln-info-jadual th + td { border-left: 1px solid var(--atom-border); }
.ln-info-jadual tr.ln-info-seksyen th {
  width: auto;
  padding: .5rem .875rem;
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atom-primary);
  background: var(--atom-primary-light);
}
.ln-info-jadual tr.ln-info-seksyen th .bi { margin-right: .375rem; }
@media (max-width: 767.98px) {
  .ln-info-jadual, .ln-info-jadual tbody, .ln-info-jadual tr, .ln-info-jadual th, .ln-info-jadual td { display: block; width: auto; border-left: 0 !important; }
  .ln-info-jadual th { padding-bottom: .25rem; border-bottom: 0; }
  .ln-info-jadual tr:last-child th { border-bottom: 0; }
}
.ln-iklan-info .detail-list { margin: 0; }
.ln-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem 1.5rem; }
.ln-grid.ln-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-grid .detail-row { display: block; padding: 0; border: 0; min-width: 0; }
.ln-grid .detail-label { font-size: var(--atom-fs-xs); margin-bottom: .125rem; }
.ln-grid .detail-value { font-size: var(--atom-fs-sm); overflow-wrap: anywhere; }
.ln-grid .is-lebar { grid-column: span 2; }
.ln-grid .is-penuh { grid-column: 1 / -1; }
.ln-iklan-info .brosur-kad { max-width: 32rem; padding: .5rem .75rem; }
.ln-iklan-info .brosur-pratonton { flex-basis: 40px; width: 40px; height: 40px; font-size: 1.125rem; }
.ln-iklan-info .brosur-nama { font-size: var(--atom-fs-sm); }
@media (max-width: 767.98px) {
  .ln-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ln-grid, .ln-grid.ln-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ln-grid .is-lebar { grid-column: 1 / -1; }
}
.ln-fail-sedia { margin-top: .5rem; padding: .5rem .75rem; background: var(--atom-surface-alt); border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ln-ok { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-success); }
.ln-tiada { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--atom-fs-sm); color: var(--atom-warning); font-weight: 600; }

/* Mesej ralat bertogol (atribut hidden dihormati) */
.ln-ralat { display: block; width: 100%; margin-top: .25rem; font-size: var(--atom-fs-sm); color: var(--atom-danger); }
.ln-ralat[hidden] { display: none; }

/* Pemilih berbilang (checkbox + carian) */
.ln-pilih { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.ln-pilih-cari { position: relative; padding: .5rem; border-bottom: 1px solid var(--atom-border); }
.ln-pilih-cari .bi { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--atom-text-muted); font-size: .8125rem; }
.ln-pilih-cari .form-control { padding-left: 2rem; }
.ln-pilih-senarai { max-height: 12.5rem; overflow-y: auto; padding: .25rem; }
.ln-pilih-senarai.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem; max-height: 16rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.ln-pilih-item { display: flex; align-items: flex-start; gap: .5rem; padding: .4375rem .625rem; border-radius: var(--atom-radius-sm, 6px); cursor: pointer; font-size: var(--atom-fs-sm); margin: 0; }
.ln-pilih-item:hover { background: var(--atom-surface-alt); }
.ln-pilih-item.is-dipilih { background: var(--atom-primary-light); }
.ln-pilih-item .form-check-input { margin-top: .1875rem; flex: 0 0 auto; }
.ln-pilih-item small { color: var(--atom-text-muted); }
/* Calon bertindih tarikh dengan latihan lain yang aktif — tidak boleh dipilih */
.ln-pilih-item.is-tindih { cursor: not-allowed; background: var(--atom-danger-light); }
.ln-pilih-item.is-tindih small.text-danger { color: var(--atom-danger); }
.ln-pilih-tambah { display: flex; gap: .5rem; padding: .5rem; border-top: 1px solid var(--atom-border); }
.ln-pilih-ringkas { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
/* Penapis calon: Bahagian › Seksyen › Gred + carian */
.ln-penapis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .5rem; border-bottom: 1px solid var(--atom-border); background: var(--atom-surface-alt); }
.ln-penapis .ln-pilih-cari { padding: 0; border: 0; }
.ln-penapis .ln-pilih-cari .bi { left: .625rem; }
.ln-pilih-alat { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; padding: .375rem .75rem; border-bottom: 1px solid var(--atom-border); font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ln-pilih-alat .btn-link { font-size: var(--atom-fs-xs); text-decoration: none; }
.ln-pilih-kosong { margin: 0; padding: 1rem; text-align: center; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.ln-tiada-seksyen { color: var(--atom-warning); font-style: italic; }
@media (max-width: 767.98px) { .ln-penapis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ln-penapis { grid-template-columns: minmax(0, 1fr); } }

/* Aliran pencalonan */
.ln-aliran { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; }
.ln-aliran-pilihan { display: flex; gap: .625rem; padding: .75rem .875rem; margin: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); cursor: pointer; }
.ln-aliran-pilihan:has(input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.ln-aliran-pilihan:has(input:disabled) { cursor: not-allowed; opacity: .8; }
.ln-aliran-pilihan .form-check-input { margin-top: .1875rem; flex: 0 0 auto; }
.ln-aliran-pilihan strong { display: block; font-size: var(--atom-fs-sm); }
.ln-aliran-pilihan small { display: block; color: var(--atom-text-secondary); font-size: var(--atom-fs-xs); line-height: 1.45; }

/* Ruang kerja program (modal) */
.ln-rk-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.ln-rk-tarikh { display: inline-flex; align-items: center; gap: .3125rem; margin-left: auto; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ln-rk-tabs { margin: 0 -1.5rem 1.25rem; padding-inline: 1rem; border-bottom: 1px solid var(--atom-border); }
.ln-rk-panel { min-height: 14rem; }
.ln-kronologi .timeline-text { white-space: pre-line; }
.ln-jadual-calon .col-check { width: 42px; padding-inline: .75rem .25rem; }
.ln-subtajuk { font-size: var(--atom-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-secondary); margin: 0 0 .625rem; }
.ln-subtajuk-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 1rem 0 .625rem; }
.ln-jadual-kecil .table-atom td, .ln-jadual-kecil .table-atom th { padding-block: .5rem; }
.ln-syarat { margin: .25rem 0 0; padding-left: 1.125rem; font-size: var(--atom-fs-sm); }
.ln-bar-tindakan { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ln-radio-kep { display: flex; flex-direction: column; gap: .25rem; font-size: var(--atom-fs-sm); }
.ln-radio-kep label { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
.ln-radio-kep .form-check-input { margin: 0; }
.ln-jadual-keputusan input.form-control { min-width: 14rem; }

/* Borang sebaris dalam panel (elak modal bersarang) */
.ln-inline { padding: .875rem 1rem; margin-bottom: 1rem; background: var(--atom-surface-alt); border: 1px solid var(--atom-border); border-left: 3px solid var(--atom-primary); border-radius: var(--atom-radius); }
.ln-inline-kepala { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.ln-inline-kaki { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.ln-dok-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem 1rem; padding: .625rem .75rem; background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }

/* Cip kelengkapan dokumen */
.ln-dok-cip { display: flex; flex-wrap: wrap; gap: .25rem; }
.ln-cip { display: inline-flex; align-items: center; gap: .1875rem; padding: .0625rem .4375rem; border-radius: var(--atom-radius-pill); font-size: var(--atom-fs-xs); font-weight: 600;
  background: var(--atom-neutral-light); color: var(--atom-text-muted); white-space: nowrap; }
.ln-cip.is-ok { background: var(--atom-success-light); color: var(--atom-success); }

/* Baris jadual */
.table-atom tr.ln-baris-diterima > td { background: var(--atom-success-light); }
.table-atom tr.ln-baris-diterima > td:first-child { box-shadow: inset 3px 0 0 var(--atom-success); }
.table-atom tr.ln-baris-perhatian > td:first-child { box-shadow: inset 3px 0 0 var(--atom-warning); }
.table-atom tr.ln-baris-gugur > td { opacity: .6; }

/* Pemantauan laporan */
.ln-laporan-alat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.ln-susun { min-width: 12rem; }
.ln-susun .form-label { font-size: var(--atom-fs-xs); font-weight: 600; margin-bottom: .25rem; }
.ln-peringatan-senarai { display: flex; flex-direction: column; gap: .1875rem; }
.ln-peringatan { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); white-space: nowrap; }
.ln-peringatan.is-dihantar { color: var(--atom-danger); font-weight: 600; }

/* Pencalonan Bahagian — kad program */
.ln-grid-wrap { padding: 1.25rem; }
.ln-kad-serahan { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ln-kad-nota { margin: 0 0 .75rem; padding: .5rem .625rem; font-size: var(--atom-fs-xs); color: #8A4108; background: var(--atom-warning-light); border-radius: var(--atom-radius); }
.ln-calon-senarai { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ln-calon-item { padding: .625rem .875rem; }
.ln-calon-item + .ln-calon-item { border-top: 1px solid var(--atom-border); }
.ln-calon-item.is-dipilih { background: var(--atom-primary-light); }
.ln-calon-item > label { display: flex; align-items: flex-start; gap: .625rem; margin: 0; cursor: pointer; }
.ln-calon-item .form-check-input { margin-top: .1875rem; flex: 0 0 auto; }
.ln-calon-item textarea { margin: .5rem 0 0 1.625rem; width: calc(100% - 1.625rem); }
.ln-calon-nama { display: block; font-weight: 600; font-size: var(--atom-fs-sm); }
.ln-calon-meta { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ln-calon-kumpulan { padding: .375rem .875rem; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-secondary); background: var(--atom-surface-alt); border-top: 1px solid var(--atom-border); }
.ln-calon-kumpulan:first-child { border-top: 0; border-radius: var(--atom-radius) var(--atom-radius) 0 0; }
.ln-calon-kumpulan .ln-tiada-seksyen { text-transform: none; }
.ln-calon-kumpulan + .ln-calon-item { border-top: 1px solid var(--atom-border); }
.ln-penapis.ln-penapis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-penapis.ln-penapis-bingkai { margin-bottom: .5rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
/* Calon dipilih + justifikasi (pilihan) — borang pencalonan urus setia & Pengarah Bahagian */
.ln-calon-dipilih { list-style: none; margin: .75rem 0 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.ln-calon-dipilih-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--atom-border);
  background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.ln-calon-dipilih-kepala span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--atom-text-muted); }
.ln-calon-dipilih-item { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .75rem; align-items: start; padding: .625rem .75rem; border-bottom: 1px solid var(--atom-border); }
.ln-calon-dipilih-item:last-child { border-bottom: 0; }
.ln-calon-dipilih-nama { font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.35; }
.ln-calon-dipilih-nama small { display: block; font-weight: 400; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.ln-calon-dipilih-item textarea { min-height: 3.25rem; resize: vertical; }
.ln-calon-dipilih-kosong { padding: .75rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
@media (max-width: 575.98px) { .ln-calon-dipilih-item { grid-template-columns: minmax(0, 1fr); gap: .375rem; } }
@media (max-width: 575.98px) { .ln-penapis.ln-penapis-3 { grid-template-columns: minmax(0, 1fr); } }

/* Program Saya */
.ln-mohon-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .375rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ln-mohon-meta .bi { color: var(--atom-text-muted); margin-right: .25rem; }
.ln-mohon-nota { margin: .75rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ln-peringatan-kotak { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin-top: .75rem; padding: .5rem .75rem;
  font-size: var(--atom-fs-xs); background: var(--atom-surface-alt); border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius); }
.ln-peringatan-kotak .bi { color: var(--atom-warning); }
.ln-dok-senarai { list-style: none; margin: 0; padding: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ln-dok-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; padding: .75rem .875rem; }
.ln-dok-item + .ln-dok-item { border-top: 1px solid var(--atom-border); }
.ln-dok-status { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--atom-neutral-light); color: var(--atom-text-muted); }
.ln-dok-item.is-lengkap .ln-dok-status { background: var(--atom-success-light); color: var(--atom-success); }
.ln-dok-tajuk { font-weight: 600; font-size: var(--atom-fs-sm); }
.ln-dok-isi { grid-column: 2; }
.ln-kemajuan { height: .375rem; border-radius: var(--atom-radius-pill); background: var(--atom-neutral-light); overflow: hidden; margin: .375rem 0 1rem; }
.ln-kemajuan > span { display: block; height: 100%; background: var(--atom-success); transition: width .2s ease; }

@media (max-width: 767.98px) {
  .ln-rk-tabs { margin-inline: -1rem; }
  .ln-rk-tarikh { margin-left: 0; }
  .ln-sel-program, .ln-sel-teks { max-width: none; }
}

/* --------------------------------------------------------------------------
   3p. Latihan Dalam Negara (PLN-01)
       latihan/dn-permohonan.html, dn-permohonan-saya.html, dn-pencalonan.html, dn-kelulusan.html
       (BF-EA-SPSM-PLN-01) — kad, stepper & modal dikongsi .fts-/.fsk-/.cal-
   -------------------------------------------------------------------------- */
/* Sel jadual — muat 1440px dengan sidebar terbuka */
.dn-sel-pemohon { min-width: 11rem; max-width: 15rem; }
.dn-sel-latihan { min-width: 13rem; max-width: 19rem; }
.dn-sel-kuota { min-width: 8.5rem; }
.dn-sel-hadir { min-width: 9rem; max-width: 15rem; }
.dn-tajuk { line-height: 1.35; }
.dn-sebab { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.dn-langkah { margin-top: .5rem; }
.dn-langkah .fsk-langkah-item { min-width: 3.75rem; }
.dn-langkah .fsk-langkah-label { font-size: .65rem; }
/* Gabung cadangan (Saringan) — cadangan yang dikesan sistem sebagai serupa */
/* Cadangan yang telah digabungkan — kekal dalam senarai saringan, dimalapkan */
.table-atom tr.is-digabung > td:not(.col-action) { opacity: .5; }
.table-atom tr.is-digabung { background: var(--atom-surface-alt); }

/* Rekod gabungan — tag + program lain yang digabungkan */
.ppk-gabungan { margin: .375rem 0 .25rem; }
.ppk-gabungan-label { display: block; margin-top: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); }
.ppk-gabungan-senarai { margin: .125rem 0 0; padding-left: 1.125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ppk-gabungan-senarai li + li { margin-top: .125rem; }
.ppk-digabung-ke { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ppk-digabung-ke .bi { color: var(--atom-primary); }
.form-check-card.is-serupa { border-color: var(--atom-warning); background: var(--atom-warning-light); }
.form-check-card .check-desc.fst-italic { margin-top: .125rem; }
/* Kemajuan dalam modal Butiran Cadangan PPK — stepper selebar 100% */
.ppk-kemajuan .fsk-langkah { width: 100%; }
.ppk-kemajuan .fsk-langkah-item { flex: 1 1 0; min-width: 0; }
.ppk-kemajuan .fsk-langkah-label { font-size: var(--atom-fs-xs); white-space: normal; text-align: center; }
.dn-sel-peringkat { min-width: 21rem; }

/* Kuota */
.dn-kuota { display: inline-flex; flex-direction: column; gap: .25rem; min-width: 7.5rem; }
.dn-kuota-teks { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); white-space: nowrap; }
.dn-kuota-teks strong { color: var(--atom-text); }
.dn-kuota-bar { display: block; height: 6px; border-radius: var(--atom-radius-pill); background: var(--atom-neutral-light); overflow: hidden; }
.dn-kuota-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--atom-success); }
.dn-kuota.is-hampir .dn-kuota-bar > span { background: var(--atom-warning); }
.dn-kuota.is-penuh .dn-kuota-bar > span { background: var(--atom-danger); }
.dn-kuota.is-penuh .dn-kuota-teks { color: var(--atom-danger); font-weight: 600; }

/* Kad latihan dibuka */
.dn-kad-baris { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .875rem; }
.dn-kad-penuh::before { background: var(--atom-danger); }

/* Pilihan laluan (kad radio) */
.dn-laluan { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.dn-laluan-pilihan {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem .875rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  cursor: pointer;
}
.dn-laluan-pilihan:hover { border-color: var(--atom-border-strong); }
.dn-laluan-pilihan:has(input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.dn-laluan-pilihan:has(input:disabled) { cursor: default; opacity: .7; }
.dn-laluan-pilihan .form-check-input { flex: 0 0 auto; margin-top: .2rem; }
.dn-laluan-pilihan strong { display: block; font-size: var(--atom-fs-sm); color: var(--atom-text); }
.dn-laluan-pilihan small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); line-height: 1.4; }
.dn-ppk-info {
  display: flex; gap: .5rem; padding: .625rem .875rem;
  border: 1px dashed var(--atom-primary-soft); border-radius: var(--atom-radius);
  background: var(--atom-surface-alt); font-size: var(--atom-fs-sm);
}
.dn-ppk-info > .bi { color: var(--atom-primary); }
.dn-ppk-info strong, .dn-ppk-info span { display: block; }
.dn-ppk-info span { color: var(--atom-text-secondary); font-size: var(--atom-fs-xs); }
.dn-pilih-kos { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* Pecahan kos — borang & jadual */
.dn-kos-borang { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.dn-kos-medan .form-label { font-size: var(--atom-fs-xs); margin-bottom: .25rem; }
.dn-kos-jumlah {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .625rem .875rem;
  border-radius: var(--atom-radius);
  background: var(--atom-primary-light);
  font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
}
.dn-kos-jumlah strong { font-size: var(--atom-fs-md); color: var(--atom-primary); }
.dn-kos-jadual { width: 100%; max-width: 30rem; border-collapse: collapse; font-size: var(--atom-fs-sm); }
.dn-kos-jadual th, .dn-kos-jadual td { padding: .375rem .5rem; border-bottom: 1px solid var(--atom-border); }
.dn-kos-jadual th { font-weight: 500; color: var(--atom-text-secondary); text-align: left; }
.dn-kos-jadual td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dn-kos-jadual tr.is-kosong { color: var(--atom-text-muted); }
.dn-kos-jadual tfoot th, .dn-kos-jadual tfoot td { border-bottom: 0; border-top: 2px solid var(--atom-border-strong); font-weight: 700; color: var(--atom-text); }

/* Semakan kewangan */
.dn-kew-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem .875rem; margin: .5rem 0 0; font-size: var(--atom-fs-xs); }
.dn-kew-ringkas dt { font-weight: 500; color: var(--atom-text-muted); }
.dn-kew-ringkas dd { margin: .0625rem 0 0; font-weight: 600; color: var(--atom-text); }
.dn-baki { margin-bottom: 1rem; }
.dn-baki .dn-kew-ringkas { padding: .625rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.dn-baki-amaran { display: flex; gap: .375rem; margin: .5rem 0 0; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-danger); }
.dn-lalui { padding: .625rem .875rem .625rem 2.25rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }

/* Log overwrite / peserta (jadual kecil dalam modal) */
.dn-log-wrap { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.dn-log { font-size: var(--atom-fs-sm); }

/* Pemilih staf */
.dn-pilih-staf { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); padding: .75rem; }
.dn-pilih-senarai { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.dn-pilih-senarai li + li { border-top: 1px solid var(--atom-border); }
.dn-pilih-senarai .form-check { display: flex; gap: .5rem; margin: 0; padding: .5rem .25rem .5rem 1.875rem; cursor: pointer; }
.dn-pilih-senarai .form-check:hover { background: var(--atom-surface-alt); }
.dn-pilih-senarai .form-check.is-dikunci { cursor: default; opacity: .6; }
.dn-pilih-senarai .form-check-label strong { display: block; font-size: var(--atom-fs-sm); font-weight: 600; }
.dn-pilih-senarai .form-check-label small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.dn-pilih-kaki { margin-top: .5rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

@media (max-width: 575.98px) {
  .dn-kos-borang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-kad-baris { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   3s. Pentadbir Dalaman (PD)
       pentadbiran/instrumen-penilaian, data-rujukan, selenggara-latihan,
       kalendar-waktu, kadar-bajet, capaian-pengguna, jejak-audit
       (BF-EA-SPSM-PD-01)
   -------------------------------------------------------------------------- */
.pd-tabs { padding-inline: .75rem; }
.pd-pane { display: grid; gap: 1.25rem; padding: 1.25rem; }
.pd-pane-kepala { padding: 1rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.pd-senarai .card-header { align-items: flex-start; }
.pd-senarai-ikon {
  flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary);
}
.pd-kod { font-family: var(--bs-font-monospace); font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.table-atom tr.pd-baris-tidak-aktif td,
.table-atom tr.pd-baris-lepas td { color: var(--atom-text-muted); }
.table-atom tr.pd-baris-tidak-aktif .cell-strong { text-decoration: line-through; text-decoration-color: var(--atom-border-strong); }
.table-atom tr.pd-baris-sejarah { background: var(--atom-surface-alt); }
.pd-jadual-tinggi { max-height: 34rem; overflow: auto; }
.pd-jadual-tinggi thead th { position: sticky; top: 0; z-index: 1; }
.pd-jadual-tinggi.is-pendek { max-height: 22rem; }
.pd-teks-capai { color: var(--atom-success); font-weight: 600; }
.pd-teks-bahaya { color: var(--atom-danger); font-weight: 600; }
.pd-teks-2baris {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; max-width: 26rem;
}

/* Cip */
.pd-chip-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.pd-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); white-space: nowrap;
}
.pd-chip.is-utama { background: var(--atom-success-light); border-color: #CDEBD8; color: var(--atom-success); }
.pd-chip.is-lagi { background: var(--atom-card); font-weight: 600; }
.pd-chip-peranan.is-ps  { background: var(--atom-danger-light);  border-color: #F7D4D4; color: var(--atom-danger); }
.pd-chip-peranan.is-uss,
.pd-chip-peranan.is-usb { background: var(--atom-primary-light); border-color: transparent; color: var(--atom-primary); }
.pd-chip-peranan.is-kp,
.pd-chip-peranan.is-tkp,
.pd-chip-peranan.is-pb,
.pd-chip-peranan.is-kc  { background: #EEF2FF; border-color: #DDE3FE; color: #4338CA; }
.pd-chip-peranan.is-bk  { background: var(--atom-warning-light); border-color: #F5E0C3; color: var(--atom-warning); }

/* Hab instrumen */
.pd-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pd-hub-kad {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md);
  background: var(--atom-card); box-shadow: var(--atom-shadow-xs); color: inherit; text-decoration: none;
  transition: box-shadow var(--atom-transition), border-color var(--atom-transition);
}
.pd-hub-kad:hover, .pd-hub-kad:focus-visible { border-color: var(--atom-primary); box-shadow: var(--atom-shadow-md); color: inherit; }
.pd-hub-ikon {
  flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--atom-radius); font-size: 1.375rem; background: var(--atom-primary-light); color: var(--atom-primary);
}
.pd-hub-ikon.is-accent  { background: var(--atom-accent-light);  color: var(--atom-accent); }
.pd-hub-ikon.is-success { background: var(--atom-success-light); color: var(--atom-success); }
.pd-hub-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.pd-hub-label { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.pd-hub-kiraan { font-size: var(--atom-fs-2xl); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pd-hub-kiraan small { font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-text-muted); }
.pd-hub-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.pd-hub-anak { color: var(--atom-text-muted); }
.pd-hub-kad:hover .pd-hub-anak { color: var(--atom-primary); }

/* Pusat Pentadbir (pentadbiran/pentadbir.html) — gaya katalog */
.pd-pusat-carian {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-bottom: 1.25rem;
}
.pd-pusat-carian-medan { flex: 1 1 22rem; max-width: 34rem; }
.pd-pusat-carian-medan > .form-control { height: 2.75rem; padding-right: 2.5rem; background: var(--atom-card); }
.pd-pusat-kbd {
  position: absolute; top: 50%; right: .75rem; transform: translateY(-50%);
  min-width: 1.375rem; padding: .0625rem .375rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt); color: var(--atom-text-muted);
  font-family: var(--atom-font); font-size: var(--atom-fs-xs); text-align: center; box-shadow: none; pointer-events: none;
}
.pd-pusat-carian-medan:focus-within .pd-pusat-kbd { display: none; }
@media (hover: none), (max-width: 575.98px) { .pd-pusat-kbd { display: none; } }
.pd-pusat-kira { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }

/* Katalog: nav kategori melekit di kiri, jubin fungsi seragam di kanan.
   Tablet/mobile: nav menjadi cip mendatar boleh-tatal di atas. */
.pd-kat { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pd-kat-isi { min-width: 0; display: grid; gap: 1.5rem; }

.pd-kat-nav { position: sticky; top: calc(var(--atom-navbar-height) + 1rem); }
.pd-kat-nav-tajuk {
  margin: 0 0 .5rem; padding-inline: .75rem; font-size: var(--atom-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-muted);
}
.pd-kat-nav-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.pd-kat-nav-item {
  display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .75rem;
  border: 0; border-radius: var(--atom-radius); background: transparent; text-align: left;
  font-size: var(--atom-fs-base); color: var(--atom-text-secondary);
  transition: background-color var(--atom-transition), color var(--atom-transition);
}
.pd-kat-nav-item .bi { flex: 0 0 auto; font-size: 1rem; color: var(--atom-text-muted); }
.pd-kat-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-kat-nav-kira { flex: 0 0 auto; font-size: var(--atom-fs-xs); font-variant-numeric: tabular-nums; color: var(--atom-text-muted); }
.pd-kat-nav-item:hover:not(:disabled) { background: var(--atom-surface-sunken); color: var(--atom-text); }
.pd-kat-nav-item:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.pd-kat-nav-item.is-aktif { background: var(--atom-primary-light); color: var(--atom-primary); font-weight: 600; }
.pd-kat-nav-item.is-aktif .bi,
.pd-kat-nav-item.is-aktif .pd-kat-nav-kira { color: var(--atom-primary); }
.pd-kat-nav-item:disabled { opacity: .45; cursor: default; }

.pd-kat-kumpulan + .pd-kat-kumpulan { margin-top: 2rem; }
.pd-kat-kepala { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; margin-bottom: .75rem; }
.pd-kat-tajuk { margin: 0; font-size: var(--atom-fs-lg); font-weight: 600; color: var(--atom-text); }
.pd-kat-ket { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }

.pd-kat-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .875rem;
}
.pd-kat-grid > li { display: flex; min-width: 0; }
.pd-kat-jubin {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md);
  background: var(--atom-card); box-shadow: var(--atom-shadow-xs); color: var(--atom-text); text-decoration: none;
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition), transform var(--atom-transition);
}
.pd-kat-jubin:hover { border-color: var(--atom-primary-soft); box-shadow: var(--atom-shadow-md); transform: translateY(-1px); color: var(--atom-text); }
.pd-kat-jubin:focus-visible { outline: none; border-color: var(--atom-primary); box-shadow: var(--atom-shadow-focus); }
.pd-kat-jubin-ikon {
  width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: .375rem;
  border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary); font-size: 1.125rem;
  transition: background-color var(--atom-transition), color var(--atom-transition);
}
.pd-kat-jubin:hover .pd-kat-jubin-ikon { background: var(--atom-primary); color: #fff; }
.pd-kat-jubin-nama {
  font-size: var(--atom-fs-md); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; /* ruang dua baris tetap → semua jubin sama tinggi */
}
.pd-kat-jubin-ket {
  font-size: var(--atom-fs-sm); line-height: 1.4; color: var(--atom-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.pd-kat-jubin-alias { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.pd-kat-jubin-anak {
  position: absolute; top: 1.125rem; right: 1rem; font-size: .9375rem; color: var(--atom-primary);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--atom-transition), transform var(--atom-transition);
}
.pd-kat-jubin:hover .pd-kat-jubin-anak,
.pd-kat-jubin:focus-visible .pd-kat-jubin-anak { opacity: 1; transform: none; }

/* Label sudut kanan atas: fungsi modul lain / belum tersedia */
.pd-kat-jubin-label {
  position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .25rem;
  padding: .0625rem .5rem; border-radius: var(--atom-radius-pill);
  font-size: .6875rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--atom-neutral-light); color: var(--atom-text-muted);
}
.pd-kat-jubin-label.is-modul { background: var(--atom-accent-light); color: var(--atom-accent); }
.pd-kat-jubin-label .bi { font-size: .625rem; }
.pd-kat-jubin.is-belum {
  border-style: dashed; background: var(--atom-surface-alt); box-shadow: none; cursor: default;
}
.pd-kat-jubin.is-belum:hover { border-color: var(--atom-border); box-shadow: none; transform: none; }
.pd-kat-jubin.is-belum .pd-kat-jubin-ikon,
.pd-kat-jubin.is-belum:hover .pd-kat-jubin-ikon { background: var(--atom-surface-sunken); color: var(--atom-text-muted); }
.pd-kat-jubin.is-belum .pd-kat-jubin-nama { color: var(--atom-text-secondary); font-weight: 500; }

@media (max-width: 991.98px) {
  .pd-kat { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pd-kat-nav { position: static; margin-inline: calc(var(--atom-gutter) * -1); }
  .pd-kat-nav-tajuk { display: none; }
  .pd-kat-nav-senarai {
    display: flex; gap: .5rem; overflow-x: auto; padding: .125rem var(--atom-gutter) .375rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pd-kat-nav-senarai::-webkit-scrollbar { display: none; }
  .pd-kat-nav-item {
    width: auto; white-space: nowrap; padding: .375rem .75rem;
    border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill); background: var(--atom-card);
    font-size: var(--atom-fs-sm);
  }
  .pd-kat-nav-item.is-aktif { border-color: var(--atom-primary); }
  .pd-kat-nav-label { overflow: visible; }
}
@media (max-width: 575.98px) {
  .pd-kat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .pd-kat-jubin { padding: .875rem; }
  .pd-kat-jubin-ikon { width: 34px; height: 34px; font-size: 1rem; margin-bottom: .25rem; }
  .pd-kat-jubin-nama { font-size: var(--atom-fs-base); }
  .pd-kat-jubin-ket { font-size: var(--atom-fs-xs); }
  .pd-kat-jubin-label { top: .75rem; right: .75rem; }
  .pd-kat-jubin-label.is-modul { padding: .25rem; }
  .pd-kat-jubin-label.is-modul .pd-kat-jubin-label-teks { display: none; }
}
.pd-kat-isi mark { padding: 0 .0625rem; border-radius: 2px; background: var(--atom-warning-light); color: inherit; }

/* Senarai data rujukan yang dituju dari Pusat Pentadbir (?senarai=) */
.pd-senarai.is-dituju { box-shadow: 0 0 0 2px var(--atom-primary-soft); transition: box-shadow var(--atom-transition-slow); }

/* Jubin tetapan */
.pd-tetapan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.pd-tetapan-item {
  display: flex; flex-direction: column; gap: .125rem; padding: .875rem 1rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt);
}
.pd-tetapan-item.is-keras { border-color: #F7D4D4; background: var(--atom-danger-light); }
.pd-tetapan-item.is-keras .pd-tetapan-label .bi { color: var(--atom-danger); }
.pd-tetapan-label { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.pd-tetapan-nilai { font-size: var(--atom-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--atom-text); }
.pd-tetapan-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Kalendar tahunan */
.pd-kal-kepala {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem .75rem; border-top: 1px solid var(--atom-border);
}
.pd-kal-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.pd-kal-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.pd-kal-kotak { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--atom-border); }
.pd-kal-kotak.is-hm   { background: var(--atom-surface-sunken); }
.pd-kal-kotak.is-cuti { background: var(--atom-danger-light); border-color: var(--atom-danger); }
.pd-kal-kotak.is-kini { background: var(--atom-card); border: 2px solid var(--atom-primary); }
.pd-kal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; padding: 0 1.25rem 1.25rem; }
.pd-kal-bulan { padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.pd-kal-tajuk { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; font-weight: 600; font-size: var(--atom-fs-sm); }
.pd-kal-kira { font-size: var(--atom-fs-xs); font-weight: 500; color: var(--atom-text-muted); }
.pd-kal-hari { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.pd-kal-kh { font-size: .6875rem; font-weight: 600; color: var(--atom-text-muted); padding-bottom: 2px; }
.pd-kal-kh.is-hm { color: var(--atom-danger); }
.pd-kal-sel {
  font-size: .75rem; line-height: 1.75rem; border-radius: 4px; color: var(--atom-text); font-variant-numeric: tabular-nums;
}
.pd-kal-sel.is-kosong { visibility: hidden; }
.pd-kal-sel.is-hm { background: var(--atom-surface-sunken); color: var(--atom-text-muted); }
.pd-kal-sel.is-cuti { background: var(--atom-danger-light); color: var(--atom-danger); font-weight: 700; cursor: help; }
.pd-kal-sel.is-kini { box-shadow: inset 0 0 0 2px var(--atom-primary); font-weight: 700; }

/* Pemilih negeri / hari */
.pd-negeri-pilih {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .25rem .75rem;
  padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt);
}
.pd-hari-pilih { display: flex; flex-wrap: wrap; gap: .375rem; }

/* Bar penggunaan bajet */
.pd-col-bar { width: 22%; min-width: 11rem; }
.pd-bar { height: 8px; border-radius: var(--atom-radius-pill); background: var(--atom-surface-sunken); overflow: hidden; }
.pd-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--atom-primary); }
.pd-bar.is-amaran > span { background: var(--atom-warning); }
.pd-bar.is-lebih > span { background: var(--atom-danger); }
.pd-bar-teks { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }

/* Capaian pengguna */
.pd-matriks-susun { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.pd-peranan-senarai {
  display: flex; flex-direction: column; gap: .125rem; padding: .75rem;
  border-right: 1px solid var(--atom-border); background: var(--atom-surface-alt);
}
.pd-peranan-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem;
  border: 0; border-radius: var(--atom-radius); background: transparent; text-align: left;
  font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
}
.pd-peranan-item:hover { background: var(--atom-card); color: var(--atom-text); }
.pd-peranan-item.is-aktif { background: var(--atom-primary-light); color: var(--atom-primary); font-weight: 600; }
.pd-peranan-nama { flex: 1 1 auto; min-width: 0; }
.pd-matriks-kepala {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--atom-border);
}
.pd-matriks td.text-center .pd-suis { display: inline-flex; justify-content: center; margin: 0; min-height: 0; }
.pd-peranan-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; }
.pd-peranan-pilihan {
  display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); cursor: pointer;
}
.pd-peranan-pilihan:has(input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.pd-peranan-pilihan .form-check-input { flex: 0 0 auto; margin-top: .1875rem; }
.pd-peranan-pilihan-nama { display: block; font-weight: 600; font-size: var(--atom-fs-sm); }
.pd-peranan-pilihan-teks { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Jejak audit */
.pd-col-rekod { max-width: 16rem; }
.pd-col-nilai { min-width: 16rem; max-width: 24rem; }
.pd-audit-nilai { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; font-size: var(--atom-fs-sm); }
.pd-audit-nilai .bi { color: var(--atom-text-muted); }
.pd-audit-asal { color: var(--atom-danger); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.pd-audit-baharu { color: var(--atom-success); font-weight: 500; }
.pd-audit-sebab { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

@media (max-width: 991.98px) {
  .pd-matriks-susun { grid-template-columns: minmax(0, 1fr); }
  .pd-peranan-senarai { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--atom-border); }
  .pd-peranan-item { width: auto; }
}
@media (max-width: 575.98px) {
  .pd-kal-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-col-bar { min-width: 8rem; }
}

/* --------------------------------------------------------------------------
   3t. Laporan & Statistik (LS)
       laporan/laporan.html — katalog laporan BRS, penapis, KPI, carta,
       jadual berjumlah dan cetakan PDF (BF-EA-SPSM-LS-01)
   -------------------------------------------------------------------------- */
.ls-grid { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ls-grid > * { min-width: 0; }
.ls-kandungan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.ls-kandungan > .row { margin-top: 0; }
.ls-kandungan .min-w-0 { min-width: 0; }

/* Katalog */
.ls-katalog { position: sticky; top: calc(var(--atom-navbar-height) + 1rem); }
.ls-katalog-senarai { display: flex; flex-direction: column; padding: .5rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.ls-katalog-kumpulan {
  display: flex; align-items: center; gap: .375rem; margin: .875rem .5rem .25rem;
  font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--atom-text-muted);
}
.ls-katalog-item {
  display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .625rem; border-radius: var(--atom-radius);
  font-size: var(--atom-fs-sm); line-height: 1.35; color: var(--atom-text-secondary); text-decoration: none;
  transition: background-color var(--atom-transition), color var(--atom-transition);
}
.ls-katalog-item:hover, .ls-katalog-item:focus-visible { background: var(--atom-surface-alt); color: var(--atom-text); }
.ls-katalog-item.is-active { background: var(--atom-primary-light); color: var(--atom-primary); font-weight: 600; }
.ls-katalog-item > .bi { margin-top: .0625rem; }
.ls-katalog-no {
  flex: 0 0 auto; min-width: 1.875rem; padding: .0625rem .3125rem; border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); font-weight: 700; text-align: center;
  color: var(--atom-text-secondary); font-variant-numeric: tabular-nums;
}
.ls-katalog-item.is-active .ls-katalog-no { background: var(--atom-card); color: var(--atom-primary); }
.ls-pilih-mudah { display: none; width: 100%; max-width: 100%; text-overflow: ellipsis; }

/* Kepala laporan & penapis */
.ls-kepala-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ls-kepala-no { margin: 0 0 .25rem; font-size: var(--atom-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--atom-primary); }
.ls-kepala-tajuk { margin: 0 0 .375rem; font-size: var(--atom-fs-lg); font-weight: 700; color: var(--atom-text); }
.ls-kepala-ringkas { margin: 0 0 .625rem; max-width: 52rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ls-sumber { display: flex; flex-wrap: wrap; gap: .375rem; }
.ls-sumber-cip {
  display: inline-flex; align-items: center; gap: .3125rem; padding: .125rem .5rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary);
}
.ls-aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; flex: 0 0 auto; }
.ls-penapis { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--atom-border-subtle); }
.ls-penapis:empty { display: none; }
.ls-penapis-medan { display: flex; flex-direction: column; min-width: 10rem; flex: 0 1 12rem; }
.ls-penapis-medan .form-label { margin-bottom: .25rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); }
.ls-penapis-medan.is-aksi { min-width: 0; flex: 0 0 auto; }
.ls-penapis-kosong { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.ls-cetak-meta { display: none; }

/* KPI */
.ls-kpi .stat-value { font-size: 1.25rem; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-kpi .stat-label { white-space: normal; }
@media (max-width: 1599.98px) { .ls-kpi .stat-icon { display: none; } }
.ls-kpi .stat-card-top > div { min-width: 0; }

/* Jadual */
.ls-jadual-senarai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.ls-jadual-senarai:empty { display: none; }
.ls-jadual-wrap.is-panjang { max-height: 38rem; overflow: auto; }
.ls-jadual { font-size: var(--atom-fs-sm); }
.ls-jadual thead th { position: sticky; top: 0; z-index: 1; padding: .5625rem .625rem; white-space: normal; vertical-align: bottom; min-width: 4.5rem; line-height: 1.3; }
.ls-jadual thead th:first-child { min-width: 7rem; }
.ls-jadual tbody td { padding: .5625rem .625rem; }
.ls-jadual tbody td.cell-num { white-space: nowrap; }
.ls-jadual tfoot th {
  position: sticky; bottom: 0; padding: .5625rem .625rem; background: var(--atom-surface-alt);
  border-top: 2px solid var(--atom-border-strong); font-weight: 700; color: var(--atom-text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ls-sel-utama { display: block; }
.ls-sel-sub { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ls-jadual td.ls-tiada { color: var(--atom-text-muted); }
.ls-jadual td.ls-negatif { color: var(--atom-danger); }

/* Carta */
.ls-kad-carta .chart-wrap { position: relative; height: 300px; }

/* Nota */
.ls-nota { background: var(--atom-surface-alt); box-shadow: none; }
.ls-nota-tajuk { display: flex; align-items: center; gap: .375rem; margin: 0 0 .5rem; font-size: var(--atom-fs-sm); font-weight: 700; color: var(--atom-text); }
.ls-nota ul { margin: 0; padding-left: 1.125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ls-nota li + li { margin-top: .25rem; }

/* Ringkasan eksekutif */
.ls-ringkasan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.ls-ringkas-tajuk { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font-size: var(--atom-fs-md); font-weight: 700; color: var(--atom-text); }
.ls-ringkas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .875rem; }
.ls-ringkas-kad {
  display: flex; flex-direction: column; gap: .375rem; padding: 1rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); background: var(--atom-card);
  box-shadow: var(--atom-shadow-xs); color: inherit; text-decoration: none;
  transition: box-shadow var(--atom-transition), border-color var(--atom-transition);
}
.ls-ringkas-kad:hover, .ls-ringkas-kad:focus-visible { border-color: var(--atom-primary); box-shadow: var(--atom-shadow-md); color: inherit; }
.ls-ringkas-no { font-size: var(--atom-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--atom-primary); }
.ls-ringkas-nama { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); line-height: 1.35; }
.ls-ringkas-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .25rem; }
.ls-ringkas-kpi span { min-width: 0; }
.ls-ringkas-kpi strong { display: block; font-size: var(--atom-fs-md); color: var(--atom-text); font-variant-numeric: tabular-nums; word-break: break-word; }
.ls-ringkas-kpi small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); line-height: 1.3; }
.ls-ringkas-buka { margin-top: auto; padding-top: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-primary); }

@media (max-width: 1199.98px) {
  .ls-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ls-katalog { display: none; }
  .ls-pilih-mudah { display: block; }
}
@media (max-width: 767.98px) {
  .ls-kepala-atas { flex-direction: column; }
  .ls-aksi { justify-content: flex-start; }
  .ls-penapis-medan { flex: 1 1 100%; }
}

/* Eksport PDF — sembunyikan katalog, penapis & butang; laporan lebar penuh */
@media print {
  body.ls-cetak .ls-katalog, body.ls-cetak .ls-pilih-mudah, body.ls-cetak .ls-aksi,
  body.ls-cetak .ls-penapis, body.ls-cetak .page-header, body.ls-cetak .skip-link,
  body.ls-cetak .toast-container-atom { display: none !important; }
  body.ls-cetak .ls-grid { display: block; }
  body.ls-cetak .ls-kandungan { gap: .75rem; }
  body.ls-cetak .ls-cetak-meta { display: block; margin: .5rem 0 0; font-size: 10px; color: #555; }
  body.ls-cetak .ls-jadual-wrap { max-height: none; overflow: visible; }
  body.ls-cetak .ls-jadual thead th, body.ls-cetak .ls-jadual tfoot th { position: static; }
  body.ls-cetak .ls-kad-jadual { break-inside: auto; }
  body.ls-cetak .ls-jadual tr { break-inside: avoid; }
  body.ls-cetak .ls-kpi-grid > div { flex: 0 0 25%; max-width: 25%; }
}

/* --------------------------------------------------------------------------
   4. Manual pengguna / halaman ringkas
   -------------------------------------------------------------------------- */
.prose-atom { max-width: 46rem; font-size: var(--atom-fs-md); color: var(--atom-text-secondary); }
.prose-atom h2 { font-size: var(--atom-fs-lg); margin: 1.75rem 0 .625rem; color: var(--atom-text); }
.prose-atom h2:first-child { margin-top: 0; }
.prose-atom p { margin-bottom: .875rem; line-height: 1.7; }
.prose-atom ul, .prose-atom ol { margin-bottom: .875rem; padding-left: 1.25rem; }
.prose-atom li { margin-bottom: .375rem; }

/* --------------------------------------------------------------------------
   5. Print
   -------------------------------------------------------------------------- */
@media print {
  .app-sidebar, .app-navbar, .app-footer, .sidebar-backdrop,
  .page-header-actions, .toast-container-atom, .page-loader { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #D4DCE6; break-inside: avoid; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   eDOC — Jadual Maklumat Dokumen
   --------------------------------------------------------------------------
   Nama bahagian ialah nama penuh ("Bahagian Penilaian dan Perlesenan"), jadi
   tanpa lebar yang ditetapkan lajur BAHAGIAN mengecil dan membalut tiga baris
   sedangkan TARIKH dan KLASIFIKASI mengambil ruang yang tidak diperlukan.
   Peratusan, bukan piksel, supaya jadual kekal padan tanpa skrol mendatar.
   -------------------------------------------------------------------------- */
.table-dokumen .col-num       { width: 48px; min-width: 48px; }
.table-dokumen th:nth-child(2) { width: 26%; }   /* TAJUK DOKUMEN */
.table-dokumen th:nth-child(3) { width: 14%; }   /* NO. SIRI */
.table-dokumen th:nth-child(4) { width: 104px; } /* TARIKH — sel ber-nowrap */
.table-dokumen th:nth-child(5) { width: 22%; }   /* BAHAGIAN */
.table-dokumen th:nth-child(6) { width: 104px; } /* KLASIFIKASI */
.table-dokumen th:nth-child(7) { width: 88px; }  /* LAMPIRAN */
.table-dokumen .col-action    { width: 48px; min-width: 48px; }

/* --------------------------------------------------------------------------
   Baris borang berulang (generik)
   --------------------------------------------------------------------------
   Digunakan oleh mana-mana borang yang membenarkan pengguna menambah baris
   mengikut keperluan — cth. Bahagian II Permohonan HBH (lokasi + tarikh).
   Gaya sama seperti .agenda-baris dalam Cadangan Latihan PPK; dinamakan
   secara generik supaya borang seterusnya tidak perlu meminjam nama
   "agenda" yang tiada kaitan.
   -------------------------------------------------------------------------- */
.baris-ulang {
  padding: .75rem .875rem .5rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}

/* --------------------------------------------------------------------------
   eAdmin — Jadual Permohonan HBH
   --------------------------------------------------------------------------
   LOKASI HBH ialah satu-satunya lajur teks bebas, jadi ia diberi baki ruang;
   selebihnya bersaiz tetap supaya no. rujukan dan tarikh tidak membalut.
   -------------------------------------------------------------------------- */
/* Susun atur AUTO, bukan fixed. Dengan fixed, jumlah lebar tetap lajur
   lain (~730px) meninggalkan hampir tiada ruang untuk LOKASI pada skrin
   biasa — alamat jadi "Perpu…" dan TINDAKAN terpotong di kanan. Kini
   lajur lain tidak membalut (lebar ikut kandungan), LOKASI mengambil
   baki ruang dengan lebar minimum, dan .table-wrap menatal mendatar
   pada skrin sempit dan bukan memotong. */
.table-hbh { width: 100%; }
.table-hbh td { vertical-align: top; }
.table-hbh th, .table-hbh td:not(.hbh-sel-lokasi) { white-space: nowrap; }
.table-hbh .hbh-sel-lokasi { width: 100%; min-width: 10.5rem; }
/* Padding sel dipadatkan seperti .ks-jadual — tujuh lajur tidak
   membalut tidak muat dalam kad pada skrin 1366px dengan padding lalai. */
.table-hbh thead th, .table-hbh tbody td { padding-left: .625rem; padding-right: .625rem; }
@media (max-width: 991.98px) {
  .table-hbh thead th, .table-hbh tbody td { padding-left: .5rem; padding-right: .5rem; }
}

/* Alamat dipotong kepada DUA baris — cukup untuk mengenal pasti lokasi
   (nama tempat + bandar), tanpa baris setinggi enam baris. Alamat penuh
   ada dalam tooltip dan modal butiran. */
.table-hbh .hbh-alamat {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  color: var(--atom-text);
}
.table-hbh .hbh-sel-meta {
  display: block;
  margin-top: .125rem;
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-muted);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   eAdmin — Jana Memo
   -------------------------------------------------------------------------- */
.table-memo { table-layout: fixed; width: 100%; }
.table-memo .col-num        { width: 48px; min-width: 48px; }
.table-memo th:nth-child(2) { width: 184px; }  /* NO. RUJUKAN — dibalut, bukan dipotong */
.table-memo th:nth-child(3) { width: 32%; }    /* PERKARA */
.table-memo th:nth-child(4) { width: 22%; }    /* KEPADA */
.table-memo th:nth-child(5) { width: 104px; }  /* TARIKH */
.table-memo th:nth-child(6) { width: 96px; }   /* STATUS */
.table-memo .col-action     { width: 128px; min-width: 128px; }

/* Perkara dan penerima dipotong dengan elipsis, bukan membalut tiga baris —
   teks penuh ada dalam memo yang dipaparkan. */
.table-memo td:nth-child(3),
.table-memo td:nth-child(4) { max-width: 0; }
.table-memo .memo-perkara,
.table-memo .memo-kepada {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--atom-text);
}

/* Kiraan pilihan pada label medan berbilang (cth. Kepada / s.k. memo).
   Medan select2 `multiple` yang kosong tidak dapat dibezakan daripada kotak
   teks biasa — tiada anak panah, tiada tag — jadi kiraan inilah yang
   memberitahu pengguna medan itu menerima lebih daripada satu nilai,
   SEBELUM mereka memilih apa-apa. */
.label-kira {
  font-size: var(--atom-fs-xs);
  font-weight: 500;
  color: var(--atom-text-muted);
  background: var(--atom-surface-alt);
  border: 1px solid var(--atom-border);
  border-radius: 999px;
  padding: .0625rem .5rem;
  text-transform: none;
  letter-spacing: 0;
}
.label-kira.is-ada {
  color: var(--atom-primary);
  background: var(--atom-primary-light);
  border-color: var(--atom-primary-soft);
}

/* Borang memo — Perkara sentiasa HURUF BESAR (nilai turut ditukar dalam JS). */
.memo-perkara-input { text-transform: uppercase; }

/* Status kelulusan memo di atas paparan memo (pencipta) dan sejarah memo
   (Tindakan Saya). */
.memo-status-panel {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.memo-status-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.memo-sejarah-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.memo-sejarah { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--atom-border); }
.memo-sejarah li { position: relative; padding: 0 0 .5rem .25rem; font-size: var(--atom-fs-sm); }
.memo-sejarah li::before {
  content: ''; position: absolute; left: calc(-1rem - 5px); top: .4rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--atom-primary);
}
.memo-sejarah li:last-child { padding-bottom: 0; }
.memo-sejarah-tindakan { display: block; font-weight: 600; color: var(--atom-text); }
.memo-sejarah-meta { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.memo-sejarah-catatan {
  display: block; margin-top: .25rem; padding: .375rem .5rem;
  border-radius: var(--atom-radius-sm); background: var(--atom-card);
  border: 1px solid var(--atom-border); color: var(--atom-text-secondary);
}

/* Memo Diterima — baris belum dibaca ditebalkan */
.table-memo-diterima tr.is-belum-dibaca td { background: var(--atom-primary-light); }

/* Ikon ⓘ di sebelah label — menggantikan teks bantuan yang sentiasa
   terpapar bagi penerangan yang hanya diperlukan sekali-sekala. */
.label-info { margin-left: .25rem; color: var(--atom-text-muted); cursor: help; font-size: .8125rem; }
.label-info:hover, .label-info:focus-visible { color: var(--atom-primary); outline: none; }

/* --------------------------------------------------------------------------
   Dokumen memo yang dijana — mengikut template rasmi JTA
   -------------------------------------------------------------------------- */
.memo-dokumen {
  position: relative;
  background: var(--atom-card);
  color: var(--atom-text);
  font-size: var(--atom-fs-base);
  line-height: 1.65;
}
.memo-dokumen + .memo-dokumen { margin-top: 2rem; }

/* --- Kepala berpusat --- */
.memo-kepala { text-align: center; margin-bottom: 1rem; }

/* Ruang simpanan untuk Jata Negara. Lambang rasmi TIDAK dilukis semula di
   sini — fail imej sebenar mesti dibekalkan jabatan dan dipasang di sini. */
.memo-jata {
  width: 64px;
  height: 64px;
  margin: 0 auto .5rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  color: var(--atom-text-muted);
  font-size: .5rem;
  letter-spacing: .06em;
  text-align: center;
}
.memo-kepala-teks { display: flex; flex-direction: column; gap: .0625rem; }
.memo-kepala-memo     { font-weight: 700; letter-spacing: .08em; }
.memo-kepala-bahagian { font-weight: 700; }
.memo-kepala-jabatan  { font-weight: 700; }

/* --- Rujukan & tarikh --- */
.memo-rujukan {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  margin-bottom: .5rem;
  font-size: var(--atom-fs-sm);
}

/* --- Jadual KEPADA / DARIPADA / PERKARA --- */
.memo-jadual {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: var(--atom-fs-sm);
}
.memo-jadual th,
.memo-jadual td {
  border: 1px solid var(--atom-text);
  padding: .375rem .5rem;
  vertical-align: top;
  text-align: left;
}
.memo-jadual th { font-weight: 700; white-space: nowrap; width: 1%; }
.memo-jadual .memo-sk { width: 1%; }
.memo-edaran { font-weight: 700; }
.memo-perkara-sel { font-weight: 700; text-align: justify; }

/* --- Badan surat --- */
.memo-badan { margin-bottom: 1.5rem; }
.memo-salam    { margin-bottom: 1rem; }
.memo-gelaran  { margin-bottom: 1rem; }
.memo-sekian   { margin: 1rem 0 0; }
.memo-perenggan {
  margin-bottom: .875rem;
  text-align: justify;
  /* Nombor perenggan menggantung di tepi kiri, seperti surat rasmi */
  padding-left: 2rem;
  text-indent: -2rem;
}
.memo-perenggan-1,
.memo-penutup { padding-left: 0; text-indent: 0; }
/* Sambungan perenggan (cth. blok Tarikh / Masa / Tempat) — sejajar dengan
   teks perenggan bernombor di atasnya, tanpa nombor sendiri. */
.memo-sambungan { text-indent: 0; text-align: left; margin-top: -.375rem; }
/* text-indent negatif pada perenggan DIWARISI ke dalam inline-block ini
   dan menolak digit keluar dari kotaknya, jadi ia mesti disetkan semula. */
.memo-nombor { display: inline-block; width: 2rem; text-indent: 0; font-weight: 400; }

/* Sub-perenggan (a), (b), (c) — huruf sejajar dengan teks perenggan,
   teks item menggantung selepasnya. Digunakan juga oleh editor supaya
   pegawai nampak bentuk yang sama semasa menaip. */
.memo-sub,
.editor-atom-kanvas ol,
.editor-atom-kanvas ul {
  list-style: none;
  counter-reset: memo-sub;
  margin: .375rem 0 0;
  padding-left: 0;
  text-indent: 0;
}
.editor-atom-kanvas ol,
.editor-atom-kanvas ul { margin: .25rem 0 .75rem 2rem; }
.memo-sub > li,
.editor-atom-kanvas ol > li,
.editor-atom-kanvas ul > li {
  counter-increment: memo-sub;
  position: relative;
  padding-left: 2rem;
  margin-bottom: .25rem;
}
.memo-sub > li::before,
.editor-atom-kanvas ol > li::before,
.editor-atom-kanvas ul > li::before {
  content: "(" counter(memo-sub, lower-alpha) ")";
  position: absolute;
  left: 0;
}

/* --- Slogan + tandatangan --- */
.memo-slogan { font-weight: 700; margin-bottom: 1.25rem; }
.memo-amanah { margin-bottom: 0; }
.memo-ttd-elektronik { margin: 1rem 0 0; font-size: .75em; font-style: italic; }
.memo-ttd-blok { line-height: 1.5; }
.memo-ttd-blok .memo-nama { font-weight: 700; }

/* --- LAMPIRAN --- */
.memo-lampiran { border-top: 1px dashed var(--atom-border-strong); padding-top: 2rem; }
.memo-lampiran-tanda { text-align: right; font-weight: 700; margin-bottom: 1.5rem; }
.memo-lampiran-tajuk {
  text-align: center;
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.memo-jadual-edaran th { text-align: center; white-space: normal; width: auto; }
.memo-jadual-edaran .memo-bil { width: 3rem; text-align: center; }
.memo-jadual-edaran td { vertical-align: middle; }

/* Tanda air DRAF — supaya pratonton draf tidak disalah anggap sebagai memo
   yang telah dikeluarkan jika seseorang menangkap skrin. */
.memo-tanda-draf {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: .3em;
  color: var(--atom-danger);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

/* Bekas cetakan tersembunyi pada skrin; hanya ia yang dicetak. */
#memoCetak { display: none; }

@media print {
  body.is-cetak-memo .app-shell { display: none !important; }
  body.is-cetak-memo #memoCetak { display: block !important; padding: 0; }
  body.is-cetak-memo .memo-tanda-draf { display: none; }
  /* LAMPIRAN sentiasa bermula pada halaman baharu, seperti template. */
  body.is-cetak-memo .memo-lampiran {
    break-before: page;
    border-top: 0;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Penanda medan pilihan
   --------------------------------------------------------------------------
   Pasangan kepada <span class="required">*</span>. Tanpa penanda eksplisit,
   pengguna menganggap SETIAP medan tanpa bintang itu terlepas pandang —
   menamakan medan pilihan menghilangkan keraguan itu.
   -------------------------------------------------------------------------- */
.label-pilihan {
  font-size: var(--atom-fs-xs);
  font-weight: 400;
  color: var(--atom-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Editor teks ringkas (Perenggan Memo)
   --------------------------------------------------------------------------
   Tebal / condong / garis bawah sahaja. Memo rasmi tidak memerlukan lebih,
   dan bar alat penuh butang hanya menggoda pegawai memformat memo sehingga
   lari daripada template jabatan.
   -------------------------------------------------------------------------- */
.editor-atom {
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  overflow: hidden;
}
.editor-atom:focus-within {
  border-color: var(--atom-primary);
  box-shadow: var(--atom-shadow-focus);
}
.editor-atom-bar {
  display: flex;
  gap: .125rem;
  padding: .25rem .375rem;
  background: var(--atom-surface-alt);
  border-bottom: 1px solid var(--atom-border);
}
.editor-atom-btn {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 0;
  border-radius: var(--atom-radius-sm);
  background: transparent;
  color: var(--atom-text-secondary);
  cursor: pointer;
}
.editor-atom-btn:hover { background: var(--atom-card); color: var(--atom-primary); }
.editor-atom-sep {
  width: 1px;
  margin: .375rem .25rem;
  background: var(--atom-border);
}
.editor-atom-kanvas {
  min-height: 11rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: .625rem .75rem;
  font-size: var(--atom-fs-base);
  line-height: 1.7;
  color: var(--atom-text);
  outline: 0;
}
.editor-atom-kanvas p { margin-bottom: .75rem; }
.editor-atom-kanvas p:last-child { margin-bottom: 0; }
/* Petunjuk semasa kosong — contenteditable tiada atribut placeholder. */
.editor-atom-kanvas:empty::before {
  content: attr(data-petunjuk);
  color: var(--atom-text-muted);
}
.editor-atom.is-invalid,
.form-control.is-invalid ~ .editor-atom { border-color: var(--atom-danger); }

/* --------------------------------------------------------------------------
   Senarai lampiran fail pada memo yang dijana
   -------------------------------------------------------------------------- */
.memo-lampiran-fail { margin-top: 1.25rem; font-size: var(--atom-fs-sm); }
.memo-lampiran-fail-tajuk { font-weight: 700; }
.memo-lampiran-fail-senarai { margin: .25rem 0 0; padding-left: 1.5rem; }
.memo-lampiran-fail-senarai li { margin-bottom: .125rem; }

/* --------------------------------------------------------------------------
   eAdmin — Permohonan Waran (WPUA)
   -------------------------------------------------------------------------- */
.table-waran { table-layout: fixed; width: 100%; }
.table-waran .col-num        { width: 48px; min-width: 48px; }
.table-waran th:nth-child(2) { width: 192px; }  /* NO. RUJUKAN — ATOM/WPUA/2026/0001 */
.table-waran th:nth-child(3) { width: 21%; }    /* TUJUAN */
.table-waran th:nth-child(4) { width: 15%; }    /* LALUAN */
.table-waran th:nth-child(5) { width: 104px; }  /* BERTOLAK */
.table-waran th:nth-child(6) { width: 180px; }  /* STATUS — dua baris, bukan tiga */

/* Lencana status dibenarkan membalut dua baris supaya lajur STATUS tidak
   perlu 228px untuk 'Menunggu Kelulusan Ketua Jabatan'. */
.table-waran .badge-atom { white-space: normal; }
.table-waran .col-action     { width: 128px; min-width: 128px; }  /* hingga 3 butang ikon */

.table-waran td:nth-child(3),
.table-waran td:nth-child(4) { max-width: 0; }
.table-waran .waran-tujuan,
.table-waran .waran-laluan {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--atom-text);
}

/* Amaran tempoh notis pada borang (5 / 10 hari sebelum penerbangan) */
.form-text.is-amaran { color: var(--atom-warning); font-weight: 500; }

/* --- Borang WPUA cetakan ----------------------------------------------- */
.wpua-dokumen {
  position: relative;
  background: var(--atom-card);
  color: var(--atom-text);
  font-size: var(--atom-fs-sm);
  line-height: 1.55;
}
.wpua-kemaskini { text-align: right; font-weight: 700; font-size: var(--atom-fs-xs); }
.wpua-kepala { text-align: center; margin-bottom: 1rem; }
/* Jata Negara ialah lambang rasmi — fail imej sebenar mesti dibekalkan
   jabatan dan dipasang di sini; ia tidak dilukis semula. */
.wpua-jata {
  width: 56px; height: 56px; margin: 0 auto .5rem;
  display: grid; place-items: center;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  color: var(--atom-text-muted);
  font-size: .45rem; letter-spacing: .06em; text-align: center;
}
.wpua-tajuk { font-size: var(--atom-fs-base); font-weight: 700; margin: 0; }

.wpua-bahagian {
  font-size: var(--atom-fs-sm);
  font-weight: 700;
  text-decoration: underline;
  margin: 1.25rem 0 .5rem;
}
.wpua-sub { font-size: var(--atom-fs-sm); font-weight: 700; margin: .875rem 0 .375rem; }
.wpua-nota { margin-bottom: .5rem; }
.wpua-kaki { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); margin: .25rem 0; }
.wpua-tujuan { border-bottom: 1px solid var(--atom-border-strong); padding-bottom: .25rem; }
.wpua-catatan { margin: .25rem 0 .5rem; font-style: italic; }

.wpua-jadual, .wpua-jadual-butir {
  width: 100%; border-collapse: collapse; margin-bottom: .75rem;
}
.wpua-jadual th, .wpua-jadual td,
.wpua-jadual-butir th, .wpua-jadual-butir td {
  border: 1px solid var(--atom-text);
  padding: .3125rem .5rem;
  vertical-align: top;
  text-align: left;
}
.wpua-jadual thead th { text-align: center; font-weight: 700; }
.wpua-jadual-butir th { font-weight: 600; white-space: nowrap; width: 1%; }
.wpua-jadual .wpua-kod  { width: 2.5rem; text-align: center; }
.wpua-jadual .wpua-tanda { width: 2.5rem; text-align: center; }
.wpua-jadual .wpua-rm   { width: 8rem; font-weight: 600; }

/* Kotak tanda — kosong bermakna ruang untuk ditulis tangan */
.wpua-kotak {
  display: inline-block;
  width: 1.125rem; height: 1.125rem;
  border: 1px solid var(--atom-text);
  text-align: center; line-height: 1;
  margin-right: .5rem;
  flex: 0 0 auto;
}
.wpua-senarai-dok, .wpua-akuan { list-style: none; margin: 0 0 .75rem; padding: 0; }
.wpua-senarai-dok li, .wpua-akuan li {
  display: flex; align-items: flex-start; gap: .25rem; margin-bottom: .375rem;
}
.wpua-akuan { margin-top: 1rem; }

/* Pilihan "disokong / tidak disokong" — yang dipilih digariskan tebal */
.wpua-keputusan { margin: .5rem 0; }
.wpua-pilih.is-pilih { font-weight: 700; text-decoration: underline; }

.wpua-garis {
  display: inline-block;
  min-width: 7rem;
  border-bottom: 1px solid var(--atom-text);
}
.wpua-garis.is-panjang { min-width: 12rem; }

.wpua-ttd {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem 2rem; margin: 2rem 0 1rem;
}
.wpua-ttd-garis { border-top: 1px dotted var(--atom-text); padding-top: .25rem; min-width: 14rem; }
.wpua-ttd-label { display: block; font-size: var(--atom-fs-xs); }
.wpua-ttd-nama  { display: block; font-size: var(--atom-fs-xs); font-weight: 600; }
.wpua-ttd-tarikh { align-self: flex-end; }

.wpua-elektronik { margin: 1.5rem 0 1rem; }
.wpua-elektronik-nota { margin: .5rem 0 0; font-size: .75em; font-style: italic; }
.wpua-elektronik-medan { margin: 0 0 .15rem; }
.wpua-elektronik-medan span { display: inline-block; min-width: 5rem; }

.wpua-kewangan {
  text-align: center; font-weight: 700;
  border-top: 2px solid var(--atom-text);
  border-bottom: 1px solid var(--atom-text);
  padding: .375rem 0; margin-top: 1.5rem;
}

.wpua-tanda-draf {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 3.5rem; font-weight: 800; letter-spacing: .15em;
  color: var(--atom-danger); opacity: .07;
  pointer-events: none; user-select: none;
}

#waranCetak { display: none; }

@media print {
  body.is-cetak-waran .app-shell { display: none !important; }
  body.is-cetak-waran #waranCetak { display: block !important; padding: 0; }
  body.is-cetak-waran .wpua-tanda-draf { display: none; }
  /* Bahagian Kewangan bermula pada halaman baharu, seperti borang asal. */
  body.is-cetak-waran .wpua-kewangan { break-before: page; margin-top: 0; }
}

/* No. rujukan sistem pada borang WPUA. Borang rasmi tiada medan ini, jadi ia
   ditanda dengan jelas sebagai rujukan sistem dan bukan sebahagian borang. */
.wpua-rujukan {
  font-size: var(--atom-fs-xs);
  color: var(--atom-text-secondary);
  margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   eAdmin — Tindakan Saya (baris gilir kelulusan)
   -------------------------------------------------------------------------- */
.table-tindakan { table-layout: fixed; width: 100%; }
.table-tindakan .col-num        { width: 48px; min-width: 48px; }
.table-tindakan th:nth-child(2) { width: 192px; }  /* NO. RUJUKAN */
.table-tindakan th:nth-child(3) { width: auto; }   /* PERKARA */
.table-tindakan th:nth-child(4) { width: 200px; }  /* PEMOHON */
.table-tindakan th:nth-child(5) { width: 300px; }  /* STATUS */
.table-tindakan th:nth-child(6) { width: 112px; }  /* DIHANTAR */
.table-tindakan .col-action     { width: 96px; min-width: 96px; }

/* Lalai (Waran / Kad) — PERKARA dibalut supaya tajuk penuh kelihatan. */
.table-tindakan:not(.is-hbh):not(.is-memo) td:nth-child(3) .tindakan-tajuk { white-space: normal; }
/* Lajur lain lebar tetap (~870px) — tanpa lebar minimum, PERKARA dihimpit
   hingga satu huruf sebaris pada skrin sempit. .table-wrap menatal. */
.table-tindakan:not(.is-hbh):not(.is-memo) { min-width: 1220px; }
/* Status panjang (cth. "Menunggu Pengesyoran Pemegang Kad") dibalut dalam
   lajurnya, bukan melimpah ke lajur DIHANTAR. */
.table-tindakan:not(.is-hbh):not(.is-memo) td:nth-child(5) .badge-atom { white-space: normal; text-align: left; }

/* HBH (lajur modul) — susun atur auto seperti .table-diproses: lajur lain
   selebar kandungan, ALAMAT mengisi baki dan berbalut. Pada skrin terlalu
   sempit .table-wrap menatal. */
.table-tindakan.is-hbh { table-layout: auto; }
.table-tindakan.is-hbh th, .table-tindakan.is-hbh td { width: auto; white-space: nowrap; }
.table-tindakan.is-hbh td:nth-child(3) { min-width: 9rem; white-space: normal; }  /* PEMOHON */
.table-tindakan.is-hbh td:nth-child(4) { width: 100%; min-width: 9rem; max-width: none; white-space: normal; }  /* ALAMAT */
.table-tindakan.is-hbh .col-action { min-width: 0; }
.table-tindakan.is-hbh thead th, .table-tindakan.is-hbh tbody td { padding-left: .625rem; padding-right: .625rem; }
/* Memo (lajurMenunggu) — tanpa lajur MODUL */
.table-tindakan.is-memo th:nth-child(3) { width: auto; }   /* PERKARA */
.table-tindakan.is-memo th:nth-child(4) { width: 200px; }  /* PEMOHON */
.table-tindakan.is-memo th:nth-child(5) { width: 104px; }  /* DIHANTAR */
.table-tindakan.is-memo td:nth-child(3) { max-width: 0; }
.table-tindakan.is-memo td:nth-child(4) { max-width: none; }
.table-tindakan .tindakan-tajuk {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--atom-text);
}

/* Panel keputusan di hujung borang yang disemak — dibezakan daripada
   dokumen di atasnya supaya jelas mana bacaan dan mana tindakan. */
.keputusan-panel {
  border: 1px solid var(--atom-primary-soft);
  border-radius: var(--atom-radius);
  background: var(--atom-primary-light);
  padding: 1rem 1.125rem;
  margin-top: 1.5rem;
}
.keputusan-panel .modal-seksyen-tajuk { margin-top: 0; }

/* Penunjuk peranan aktif dalam navbar. Ia menggantikan jawatan apabila
   profil mempunyai lebih daripada satu peranan — tanpa penunjuk ini,
   menukar peranan tidak mengubah apa-apa yang kelihatan dan pengguna tidak
   tahu mereka sedang melihat sebagai siapa. Jawatan berpindah ke kepala
   dropdown, yang mana ia tidak hilang. */
.navbar-user-role.is-peranan {
  display: inline-block;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--atom-primary-light);
  color: var(--atom-primary);
  font-weight: 600;
}

/* Butang dalam spanduk amaran (cth. "Buka Tindakan Saya" pada halaman
   Permohonan Waran apabila dilihat sebagai pelulus). */
.alert-atom .alert-tindakan { margin-top: .625rem; }

/* Medan Bahagian III dalam panel keputusan Kewangan. Dipisahkan daripada
   pilihan mencukupi/tidak di atasnya supaya jelas ia hanya terpakai apabila
   permohonan diteruskan. */
.kewangan-medan {
  margin: .875rem 0;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}

/* Langkah bernombor dalam panel Kewangan (semak baki → butiran →
   tindakan) — tertib kerja dijadikan kelihatan. */
.keputusan-langkah {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  margin: .25rem 0 .625rem;
}
.keputusan-langkah span {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--atom-primary);
  color: #fff;
  font-size: var(--atom-fs-xs);
}
.kewangan-jumlah { font-size: var(--atom-fs-sm); }
.kewangan-kemajuan { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); padding-top: .5rem; border-top: 1px dashed var(--atom-border); }
#kwSemakan legend { float: none; width: auto; font-size: inherit; }

/* Pilihan tindakan (Sokong / Kuiri / Batal ...) — butang radio. Warna
   mengikut akibat: hijau diteruskan, jingga kembali, merah dihentikan. */
.tindakan-pilihan { display: flex; flex-wrap: wrap; gap: .5rem; }
.tindakan-pilih { position: relative; }
.tindakan-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.tindakan-pilih label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tindakan-pilih label:hover { border-color: var(--atom-primary); }
.tindakan-pilih input:focus-visible + label { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.tindakan-pilih input:checked + label.is-teruskan {
  background: var(--atom-success-light); border-color: var(--atom-success); color: var(--atom-success);
}
.tindakan-pilih input:checked + label.is-kuiri {
  background: var(--atom-warning-light); border-color: var(--atom-warning); color: var(--atom-warning);
}
.tindakan-pilih input:checked + label.is-henti {
  background: var(--atom-danger-light); border-color: var(--atom-danger); color: var(--atom-danger);
}

/* Jejak permohonan dalam paparan pemohon */
.waran-jejak { margin-bottom: 1.25rem; }
.waran-jejak-catatan { font-style: italic; margin-top: .125rem; }

/* ==========================================================================
   Semakan permohonan (Tindakan Saya) — seksyen bernombor
   Maklumat → Jawapan Kuiri → Lampiran → Tindakan. Setiap seksyen kad
   sendiri supaya penyemak nampak sempadan antara bacaan dan tindakan.
   ========================================================================== */
.semak-kad {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
}
.semak-kad-tajuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: var(--atom-fs-base);
  font-weight: 700;
  margin: 0 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--atom-border);
}
.semak-kad-tajuk > i { color: var(--atom-primary); }
.semak-kad-tajuk .badge-atom { margin-left: auto; font-weight: 500; }
.semak-kad .wpua-dokumen { margin: 0; }
.semak-kad.keputusan-panel { margin-top: 0; }
.semak-kad:last-child { margin-bottom: 0; }

/* Ringkasan semakan Kad Kredit. Borang penuh = mod bacaan berasingan
   (tiada panel tindakan) yang dibuka dengan .kkr-btn-borang. */
.semak-kad-tajuk .kkr-btn-borang { margin-left: auto; font-weight: 600; }
.kkr-mod-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 0 1rem; padding: .625rem .875rem;
  background: var(--atom-card);
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
}

.kkr-kepala {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem;
  padding: .875rem 1rem;
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  margin-bottom: 1rem;
}
.kkr-kepala-kiri, .kkr-kepala-kanan { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.kkr-kepala-kiri { flex: 1 1 0; }
.kkr-kepala-kanan { flex: 0 0 auto; max-width: 45%; text-align: right; }
.kkr-label { font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--atom-text-muted); }
.kkr-perkara { font-size: var(--atom-fs-md, 1rem); font-weight: 700; color: var(--atom-text); }
.kkr-jumlah { font-size: 1.375rem; font-weight: 700; color: var(--atom-text); line-height: 1.2; }
.kkr-pemohon { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

.kkr-blok + .kkr-blok { margin-top: 1rem; }
.kkr-blok-tajuk { font-size: var(--atom-fs-sm); font-weight: 700; margin: 0 0 .5rem; color: var(--atom-text); }

.kkr-tujuan { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.kkr-tujuan + .kkr-tujuan { margin-top: .625rem; }
.kkr-tujuan-kepala {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border-bottom: 1px solid var(--atom-border);
  font-weight: 600; font-size: var(--atom-fs-sm);
}
.kkr-tujuan-kepala .bi { color: var(--atom-primary); margin-right: .5rem; }
.kkr-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .625rem .875rem; }
.kkr-item + .kkr-item { border-top: 1px dashed var(--atom-border); }
.kkr-item-utama { display: block; font-weight: 600; }
.kkr-item-sub { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kkr-item-kos { font-weight: 600; white-space: nowrap; }
.kkr-nota { margin: 0; padding: .5rem .875rem; border-top: 1px solid var(--atom-border); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }

.kkr-dok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.kkr-dok li { display: flex; gap: .5rem; align-items: baseline; font-size: var(--atom-fs-sm); }
.kkr-dok .bi { color: var(--atom-success); }
.kkr-dok.is-tiada { margin-top: .375rem; }
.kkr-dok.is-tiada li { color: var(--atom-danger); }
.kkr-dok.is-tiada .bi { color: var(--atom-danger); }

.kkr .detail-row { padding: .5rem 0; }
.kkr .detail-label { flex-basis: 11rem; }

.kkr-lipat { margin-top: 1rem; border-top: 1px solid var(--atom-border); padding-top: .75rem; }
.kkr-lipat summary { cursor: pointer; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-primary); }
.kkr-lipat[open] summary { margin-bottom: .25rem; }

@media (max-width: 575.98px) {
  .kkr-kepala-kiri { flex-basis: 100%; }
  .kkr-kepala-kanan { max-width: none; text-align: left; }
  .semak-kad-tajuk .kkr-btn-borang { margin-left: 0; }
}

/* Pusingan kuiri → jawapan */
.kuiri-pusingan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  margin-bottom: .625rem;
}
.kuiri-pusingan:last-child { margin-bottom: 0; }
.kuiri-pusingan.is-terkini { border-color: var(--atom-warning); }
.kuiri-soalan  { background: var(--atom-warning-light); border-radius: var(--atom-radius); padding: .625rem .75rem; }
.kuiri-jawapan { background: var(--atom-info-light);    border-radius: var(--atom-radius); padding: .625rem .75rem; }
.kuiri-label { display: block; font-size: var(--atom-fs-xs); font-weight: 700; text-transform: uppercase;
               letter-spacing: .02em; margin-bottom: .25rem; color: var(--atom-text-secondary); }
@media (max-width: 575.98px) { .kuiri-pusingan { grid-template-columns: 1fr; } }

/* Senarai lampiran pemohon */
.lampiran-senarai { list-style: none; margin: 0; padding: 0; }
.lampiran-baris {
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  padding: .75rem;
  margin-bottom: .5rem;
}
.lampiran-baris:last-child { margin-bottom: 0; }
.lampiran-utama { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lampiran-ikon {
  flex: 0 0 2.5rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--atom-radius);
  background: var(--atom-neutral-light);
  color: var(--atom-neutral);
  font-size: 1.25rem;
}
.lampiran-ikon.is-pdf { background: var(--atom-danger-light); color: var(--atom-danger); }
.lampiran-ikon.is-jpg, .lampiran-ikon.is-jpeg, .lampiran-ikon.is-png { background: var(--atom-info-light); color: var(--atom-info); }
.lampiran-ikon.is-doc, .lampiran-ikon.is-docx { background: var(--atom-primary-light); color: var(--atom-primary); }
.lampiran-ikon.is-xls, .lampiran-ikon.is-xlsx { background: var(--atom-success-light); color: var(--atom-success); }
.lampiran-butiran { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.lampiran-jenis { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); }
.lampiran-nama { font-weight: 600; overflow-wrap: anywhere; }
.lampiran-meta { display: flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.lampiran-butang { display: flex; gap: .375rem; flex-wrap: wrap; }
.lampiran-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); margin: .5rem 0 0; }
.lampiran-nota.is-amaran { color: var(--atom-warning); }
.lampiran-pratonton { margin-top: .75rem; border-top: 1px solid var(--atom-border); padding-top: .75rem; }
.lampiran-pratonton iframe { width: 100%; height: 520px; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: #fff; }
.lampiran-pratonton img { display: block; max-width: 100%; max-height: 520px; margin: 0 auto; border-radius: var(--atom-radius); border: 1px solid var(--atom-border); }
.lampiran-pratonton-kaki { text-align: right; font-size: var(--atom-fs-sm); margin-top: .375rem; }
.lampiran-pratonton-kaki a { color: var(--atom-primary); }

/* --------------------------------------------------------------------------
   eAdmin — Permohonan Kad Kredit Korporat
   -------------------------------------------------------------------------- */
.table-kad { table-layout: fixed; width: 100%; }
.table-kad .col-num        { width: 48px; min-width: 48px; }
.table-kad th:nth-child(2) { width: 176px; }  /* NO. RUJUKAN — ATOM/KK/2026/0001 */
.table-kad th:nth-child(4) { width: 104px; }  /* DIHANTAR */
.table-kad th:nth-child(5) { width: 190px; }  /* STATUS */
.table-kad .col-action     { width: 128px; min-width: 128px; }  /* hingga 3 butang ikon */
.table-kad .badge-atom     { white-space: normal; }
.table-kad td:nth-child(3) { max-width: 0; }
.kk-perkara {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--atom-text);
}
.kk-cip-baris { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .125rem; }
.kk-cip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Kedudukan dalam aliran — paparan pemohon */
.kk-aliran {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.kk-aliran li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.kk-aliran li::before {
  content: ""; position: absolute; top: .4375rem; left: -50%; width: 100%; height: 2px;
  background: var(--atom-border);
}
.kk-aliran li:first-child::before { display: none; }
.kk-aliran-titik {
  position: relative; z-index: 1;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--atom-border-strong); background: var(--atom-card);
}
.kk-aliran-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); line-height: 1.25; }
.kk-aliran li.is-selesai::before,
.kk-aliran li.is-semasa::before,
.kk-aliran li.is-kuiri::before,
.kk-aliran li.is-batal::before { background: var(--atom-success); }
.kk-aliran li.is-selesai .kk-aliran-titik { background: var(--atom-success); border-color: var(--atom-success); }
.kk-aliran li.is-semasa .kk-aliran-titik  { border-color: var(--atom-primary); box-shadow: 0 0 0 3px var(--atom-primary-light); }
.kk-aliran li.is-kuiri .kk-aliran-titik   { background: var(--atom-warning); border-color: var(--atom-warning); }
.kk-aliran li.is-batal .kk-aliran-titik   { background: var(--atom-danger); border-color: var(--atom-danger); }
.kk-aliran li.is-selesai .kk-aliran-label,
.kk-aliran li.is-semasa .kk-aliran-label,
.kk-aliran li.is-kuiri .kk-aliran-label,
.kk-aliran li.is-batal .kk-aliran-label { color: var(--atom-text); font-weight: 600; }

/* Borang (modal) */
.kk-tujuan-pilihan { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.kk-tujuan-kad {
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  padding: .625rem .75rem .625rem 2.25rem; margin: 0;
}
.kk-tujuan-kad:has(input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.kk-tujuan-kad .form-check-label { font-weight: 500; }
.kk-radio-baris { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.kk-radio-baris .kk-lain { max-width: 12rem; }
.kk-dok-wajib { margin-left: .25rem; vertical-align: middle; }
#kkKewangan legend { float: none; width: auto; font-size: inherit; }

/* Dokumen Lampiran B — asas .wpua-dokumen */
.kk-kepala-baris { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; font-size: var(--atom-fs-xs); }
.kk-tajuk { text-align: center; margin: .75rem 0 .25rem; }
.kk-kementerian { font-weight: 700; font-size: var(--atom-fs-xs); margin: .25rem 0 .75rem; }
.kk-butir th { width: 30%; }
.kk-tujuan-label { width: 22%; text-align: center !important; vertical-align: middle !important; font-weight: 600; }
.kk-tujuan-label span { font-weight: 400; }
.kk-tujuan-pilih { width: 30%; }
.kk-tujuan-pilih > div { display: flex; align-items: center; margin-bottom: .625rem; gap: .25rem; }
.kk-tujuan-dok .wpua-senarai-dok { margin: .375rem 0 0; font-size: var(--atom-fs-xs); }
.kk-seksyen-b { display: flex; align-items: center; gap: .25rem; font-weight: 600; margin: 1rem 0 .25rem; }
.kk-jadual-wrap { overflow-x: auto; }
.kk-jadual { min-width: 520px; font-size: var(--atom-fs-xs); }
.kk-jadual .kk-rm { text-align: right; white-space: nowrap; }
.kk-jadual .kk-jumlah td { font-weight: 700; }
.kk-jadual .kk-jumlah td:first-child { text-align: right; }
.kk-pilihan-baris { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.25rem; margin-bottom: .375rem; }
.kk-pilihan-baris > span { display: inline-flex; align-items: center; }
.kk-pilihan-label { min-width: 9rem; }
.kk-medan { margin: 0 0 .375rem; }
.kk-ttd-digital { margin-left: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kk-sistem { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.kk-kotak { border: 1px solid var(--atom-text); margin: 0 0 1rem; }
.kk-kotak-tajuk {
  margin: 0; padding: .3125rem .5rem;
  border-bottom: 1px solid var(--atom-text);
  text-align: center; text-decoration: underline;
  font-size: var(--atom-fs-sm); font-weight: 700;
}
.kk-kotak-isi { padding: .625rem .75rem; }
.kk-dua-lajur { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; }
.kk-peruntukan { max-width: 26rem; }
.kk-kewangan-ttd { margin-left: auto; max-width: 20rem; }
@media (max-width: 575.98px) {
  .kk-dua-lajur { grid-template-columns: 1fr; }
  .kk-aliran-label { font-size: .625rem; }
}

#kadCetak { display: none; }
@media print {
  body.is-cetak-kad .app-shell { display: none !important; }
  body.is-cetak-kad #kadCetak { display: block !important; padding: 0; }
  body.is-cetak-kad .wpua-tanda-draf { display: none; }
  body.is-cetak-kad .kk-jadual-wrap { overflow: visible; }
}

/* Templat cetakan HBH — Lembaran SR.4.1.3(A), asas .wpua-dokumen */
.hbh-cetak-lembaran { text-align: right; font-weight: 700; }
.hbh-cetak-nota { margin: 0 0 1rem; padding-left: 1.5rem; list-style: lower-roman; }
.hbh-cetak-nota li { margin-bottom: .125rem; }
.hbh-cetak-bahagian {
  margin: 1rem 0 .5rem; padding: .25rem .5rem;
  border: 1px solid var(--atom-text);
  background: #d9d9d9;
  font-size: var(--atom-fs-sm); font-weight: 700;
}
.hbh-cetak-isi { padding: 0 .25rem; }
.hbh-cetak-medan { margin: 0 0 .25rem; }
.hbh-cetak-medan > span { font-weight: 600; }
.hbh-cetak-pilihan { display: flex; flex-wrap: wrap; gap: .25rem 2.5rem; margin-bottom: .5rem; }
.hbh-cetak-pilihan > span { display: inline-flex; align-items: center; }
.hbh-cetak-lokasi th:nth-child(3), .hbh-cetak-lokasi th:nth-child(4) { width: 22%; }
.hbh-cetak-elektronik { margin: .5rem 0 0; font-size: .75em; font-style: italic; }

#hbhCetak { display: none; }
@media print {
  body.is-cetak-hbh .app-shell { display: none !important; }
  body.is-cetak-hbh #hbhCetak { display: block !important; padding: 0; }
  body.is-cetak-hbh .hbh-cetak-bahagian { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Bahagian III bermula pada halaman kedua, seperti borang asal. */
  body.is-cetak-hbh .hbh-cetak-halaman { break-before: page; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   eAdmin — Tempahan Kenderaan Jabatan
   -------------------------------------------------------------------------- */
/* min-width: tanpanya lajur TEMPAT DITUJU (satu-satunya lajur tanpa lebar)
   mengecut hingga 0 pada skrin sempit. Di bawah had ini .table-wrap menatal. */
.table-tk { table-layout: fixed; width: 100%; min-width: 1100px; }
.table-tk .col-num        { width: 48px; min-width: 48px; }
.table-tk th:nth-child(2) { width: 128px; }  /* NO. RUJUKAN */
.table-tk th:nth-child(3) { width: 18%; }    /* PEMOHON */
.table-tk th:nth-child(5) { width: 150px; }  /* BERTOLAK */
.table-tk th:nth-child(6) { width: 104px; }  /* DIHANTAR */
.table-tk th:nth-child(7) { width: 180px; }  /* STATUS */
.table-tk .col-action     { width: 128px; min-width: 128px; }  /* hingga 3 butang ikon */
.table-tk td:nth-child(3),
.table-tk td:nth-child(4) { max-width: 0; }
.tk-pemohon { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-tempat,
.tk-tempat-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Penunjuk langkah borang */
.tk-langkah {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.tk-langkah-btn {
  width: 100%; display: flex; align-items: center; gap: .625rem;
  padding: .625rem .75rem; text-align: left;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  background: var(--atom-card); color: var(--atom-text-muted);
  font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.25;
  transition: border-color .15s, background-color .15s;
}
.tk-langkah-btn:hover { border-color: var(--atom-primary); }
.tk-langkah-btn:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.tk-langkah-no {
  flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--atom-border-strong); font-size: var(--atom-fs-xs);
}
.tk-langkah-teks { display: flex; flex-direction: column; min-width: 0; }
.tk-langkah-kecil { font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.tk-langkah li.is-semasa .tk-langkah-btn {
  border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-text);
}
.tk-langkah li.is-semasa .tk-langkah-no { border-color: var(--atom-primary); background: var(--atom-primary); color: #fff; }
.tk-langkah li.is-selesai .tk-langkah-btn { color: var(--atom-text); }
.tk-langkah li.is-selesai .tk-langkah-no {
  border-color: var(--atom-success); background: var(--atom-success); color: transparent; position: relative;
}
.tk-langkah li.is-selesai .tk-langkah-no::after {
  content: "\F26E"; font-family: "bootstrap-icons"; color: #fff; position: absolute; font-size: .875rem;
}
@media (max-width: 767.98px) {
  .tk-langkah-kecil { display: none; }
  .tk-langkah-btn { flex-direction: column; text-align: center; gap: .25rem; padding: .5rem .25rem; font-size: var(--atom-fs-xs); }
}

/* Penumpang */
/* Kiraan dalam tajuk seksyen — bilangan dikira daripada baris, bukan diisi */
.tk-bil-penumpang { margin-left: .375rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--atom-text-secondary); }
.tk-penumpang-senarai { display: flex; flex-direction: column; gap: .5rem; }
.tk-penumpang-baris {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
}
.tk-penumpang-no {
  flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; margin-top: 1.625rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--atom-primary-light); color: var(--atom-primary);
  font-size: var(--atom-fs-xs); font-weight: 700;
}
.tk-penumpang-baris .pnp-buang { margin-top: 1.5rem; }
.tk-penumpang-baris .form-label { font-size: var(--atom-fs-xs); margin-bottom: .25rem; }

/* Penggunaan kenderaan — kad radio */
.tk-guna-pilihan { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.tk-guna-kad {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem; margin: 0; cursor: pointer;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  background: var(--atom-card);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tk-guna-kad:hover { border-color: var(--atom-primary); }
.tk-guna-kad .form-check-input { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.tk-guna-kad:has(input:focus-visible) { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.tk-guna-kad.is-dipilih {
  border-color: var(--atom-primary); background: var(--atom-primary-light);
  box-shadow: 0 0 0 1px var(--atom-primary);
}
.tk-guna-ikon {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: var(--atom-radius); background: var(--atom-primary-light);
  color: var(--atom-primary); font-size: 1.25rem;
}
.tk-guna-kad.is-dipilih .tk-guna-ikon { background: var(--atom-primary); color: #fff; }
.tk-guna-teks { display: flex; flex-direction: column; gap: .125rem; }
.tk-guna-tajuk { font-weight: 600; color: var(--atom-text); padding-right: 1.5rem; }
.tk-guna-ringkas { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.tk-guna-dok { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem;
               font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-warning); }
.tk-dokumen { margin-top: 1rem; }
.tk-fail-kad .brosur-butiran { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767.98px) { .tk-guna-pilihan { grid-template-columns: 1fr; } }

/* Ringkasan */
.tk-ringkas-tajuk .btn { font-weight: 500; }
.tk-jadual-penumpang .col-num { width: 56px; }
.tk-penetapan {
  padding: .75rem .875rem; border-radius: var(--atom-radius);
  border: 1px solid #CDEBD8; background: var(--atom-success-light);
}
.tk-penetapan-tajuk { display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem;
                      font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-success); }

/* Penjejak aliran — tujuh peringkat */
.tk-aliran { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 575.98px) {
  .tk-aliran { grid-template-columns: 1fr; gap: .5rem; }
  .tk-aliran li { flex-direction: row; text-align: left; }
  .tk-aliran li::before { display: none; }
  .tk-aliran .kk-aliran-label { font-size: var(--atom-fs-sm); }
}

/* Paparan berjaya dihantar */
.tk-berjaya { text-align: center; padding: .5rem 0 1.5rem; }
.tk-berjaya-ikon {
  width: 4rem; height: 4rem; margin: 0 auto .875rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--atom-success-light); color: var(--atom-success); font-size: 2rem;
}
.tk-berjaya-tajuk { font-size: var(--atom-fs-xl, 1.25rem); font-weight: 700; margin: 0 0 .25rem; }
.tk-berjaya-teks { color: var(--atom-text-secondary); margin: 0 auto 1.25rem; max-width: 32rem; }
.tk-berjaya-info {
  display: inline-grid; grid-template-columns: repeat(3, auto); gap: .5rem 2rem;
  margin: 0; padding: .875rem 1.5rem; text-align: left;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt);
}
.tk-berjaya-info dt { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase;
                      letter-spacing: .03em; color: var(--atom-text-muted); margin-bottom: .25rem; }
.tk-berjaya-info dd { margin: 0; }
.tk-berjaya-ruj { font-size: var(--atom-fs-lg); font-weight: 700; color: var(--atom-primary);
                  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 575.98px) { .tk-berjaya-info { grid-template-columns: 1fr; } }

/* --- Urus Tempahan Kenderaan (Kerani Pemandu BKP) --- */
.tk-tab-wrap { padding: 0 1.25rem; border-bottom: 1px solid var(--atom-border); }
.tk-tab-wrap .nav-tabs-atom { border-bottom: 0; }
.table-tk-bkp { table-layout: fixed; width: 100%; min-width: 820px; }
.table-tk-bkp .col-num        { width: 48px; }
.table-tk-bkp th:nth-child(2) { width: 140px; }
.table-tk-bkp th:nth-child(3) { width: 20%; }
.table-tk-bkp th:nth-child(5) { width: 22%; }
.table-tk-bkp .col-action     { width: 112px; }
.table-tk-bkp.is-diproses th:nth-child(6) { width: 170px; }
.table-tk-bkp.is-diproses .col-action     { width: 72px; }
.table-tk-bkp td:nth-child(3),
.table-tk-bkp td:nth-child(4) { max-width: 0; }

.tk-armada { padding: 1rem 1.25rem 1.25rem; }
.tk-armada-tajuk {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--atom-fs-base); font-weight: 700; margin: .5rem 0 .75rem;
}
.tk-armada-tajuk > i { color: var(--atom-primary); }
.tk-armada .table-wrap + .tk-armada-tajuk { margin-top: 1.5rem; }

/* Modal semakan — permohonan di kiri, penetapan di kanan */
.tk-bkp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.tk-bkp-kanan {
  padding-left: 1.5rem; border-left: 1px solid var(--atom-border);
}
@media (max-width: 991.98px) {
  .tk-bkp-grid { grid-template-columns: 1fr; }
  .tk-bkp-kanan { padding-left: 0; border-left: 0; }
}

.tk-sumber-kira { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); margin: 0 0 .5rem; }
.tk-sumber-senarai { display: flex; flex-direction: column; gap: .5rem; }
.tk-sumber {
  display: flex; align-items: center; gap: .75rem; margin: 0;
  padding: .625rem .75rem; cursor: pointer;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  background: var(--atom-card);
  transition: border-color .15s, background-color .15s;
}
.tk-sumber .form-check-input { flex: 0 0 auto; margin: 0; }
.tk-sumber:hover { border-color: var(--atom-primary); }
.tk-sumber:has(input:focus-visible) { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.tk-sumber.is-dipilih { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.tk-sumber.is-tidak { cursor: not-allowed; background: var(--atom-surface-alt); }
.tk-sumber.is-tidak:hover { border-color: var(--atom-border); }
.tk-sumber.is-tidak .tk-sumber-tajuk,
.tk-sumber.is-tidak .tk-sumber-ikon { opacity: .6; }
.tk-sumber-ikon {
  flex: 0 0 2rem; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary);
}
.tk-sumber-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tk-sumber-tajuk { font-weight: 600; }
.tk-sumber-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.tk-sumber-sebab { font-size: var(--atom-fs-xs); color: var(--atom-danger); margin-top: .125rem; }
.tk-sumber .badge-atom { flex: 0 0 auto; }

.btn.tk-btn-tolak { color: var(--atom-danger); }

/* Slip cetak — "Borang Tempahan Kenderaan Rasmi Jabatan" (ikut slip sistem
   lama). Bekas tersembunyi pada skrin; hanya ia yang dicetak. */
#tkSlipCetak, #tfSlipCetak { display: none; }
.tk-slip { color: #000; font-size: 11pt; line-height: 1.45; }
.tk-slip-kepala { text-align: center; margin-bottom: 1rem; }
.tk-slip-jabatan { margin: 0; font-size: 10pt; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tk-slip-tajuk { margin: .25rem 0; font-size: 14pt; font-weight: 700; text-transform: uppercase; color: inherit; }
.tk-slip-bahagian, .tk-slip-jadual th { color: inherit; }
.tk-slip-ruj { margin: 0; font-size: 10pt; }
.tk-slip-bahagian {
  margin: 1.25rem 0 .5rem; padding: .375rem .5rem;
  font-size: 11pt; font-weight: 700; text-transform: uppercase;
  border: 1px solid #000; background: #eee;
}
.tk-slip-jadual { width: 100%; border-collapse: collapse; }
.tk-slip-jadual th, .tk-slip-jadual td { border: 1px solid #000; padding: .3125rem .5rem; vertical-align: top; text-align: left; }
.tk-slip-jadual th { width: 32%; font-weight: 600; }
.tk-slip-kaki { margin: 1rem 0 0; font-size: 9pt; color: #444; }

@media print {
  body.is-cetak-tk .app-shell,
  body.is-cetak-tk .modal,
  body.is-cetak-tk .modal-backdrop,
  body.is-cetak-tk .toast-container-atom,
  body.is-cetak-tf .app-shell,
  body.is-cetak-tf .modal,
  body.is-cetak-tf .modal-backdrop,
  body.is-cetak-tf .toast-container-atom { display: none !important; }
  body.is-cetak-tk #tkSlipCetak,
  body.is-cetak-tf #tfSlipCetak { display: block !important; }
  body.is-cetak-tk .tk-slip-bahagian,
  body.is-cetak-tf .tk-slip-bahagian { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.is-cetak-tk .tk-slip-jadual tr,
  body.is-cetak-tf .tk-slip-jadual tr { break-inside: avoid; }
}
.btn.tk-btn-tolak:hover { color: var(--atom-danger); border-color: var(--atom-danger); background: var(--atom-danger-light); }

/* --- Kalendar tempahan kenderaan (BKP & pemohon) --- */
.tk-kal { padding: 1rem 1.25rem 1.25rem; }
.tk-kal-nota { margin: 1rem 1.25rem 0; }
.tk-kal-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem;
}
.tk-kal-nav { display: flex; align-items: center; gap: .375rem; }
.tk-kal-tajuk { font-size: var(--atom-fs-lg); font-weight: 700; margin: 0 0 0 .5rem; }
.tk-kal-pilih { display: flex; flex-wrap: wrap; gap: .5rem; }
.tk-kal-segmen .btn.active {
  background: var(--atom-primary); border-color: var(--atom-primary); color: #fff;
}

.tk-kal-petunjuk {
  list-style: none; margin: 0 0 .75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .375rem 1.25rem;
  font-size: var(--atom-fs-xs); color: var(--atom-text-secondary);
}
.tk-kal-petunjuk li { display: inline-flex; align-items: center; gap: .375rem; }
.tk-kal-titik { width: .75rem; height: .75rem; border-radius: 3px; border: 1px solid transparent; }
.tk-kal-titik.is-kelulusan   { background: var(--atom-info-light);    border-color: var(--atom-info); }
.tk-kal-titik.is-diluluskan  { background: var(--atom-success-light); border-color: var(--atom-success); }
.tk-kal-titik.is-luar        { background: repeating-linear-gradient(45deg, var(--atom-surface-sunken, #eef0f3) 0 4px, var(--atom-surface-alt) 4px 8px); border-color: var(--atom-border-strong); }
.tk-kal-titik.is-saya        { background: var(--atom-primary-light); border-color: var(--atom-primary); }
.tk-kal-titik.is-lain        { background: var(--atom-neutral-light); border-color: var(--atom-border-strong); }

.tk-kal-wrap { overflow-x: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }

/* Minggu */
.tk-kal-minggu { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; }
.tk-kal-minggu th, .tk-kal-minggu td { border: 1px solid var(--atom-border); vertical-align: top; }
.tk-kal-minggu tr:first-child th { border-top: 0; }
.tk-kal-minggu tr > :first-child { border-left: 0; }
.tk-kal-minggu tr > :last-child { border-right: 0; }
.tk-kal-minggu tbody tr:last-child > * { border-bottom: 0; }
.tk-kal-sumber-kepala, .tk-kal-minggu tbody th {
  width: 170px; padding: .5rem .75rem; text-align: left; background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm); font-weight: 600;
}
.tk-kal-sumber-kepala { font-size: var(--atom-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-muted); vertical-align: middle !important; }
.tk-kal-sumber-nama { display: block; }
.tk-kal-sumber-meta { display: block; font-size: var(--atom-fs-xs); font-weight: 400; color: var(--atom-text-muted); }
.tk-kal-hari { padding: .375rem .5rem; text-align: center; background: var(--atom-surface-alt); }
.tk-kal-hari-nama { display: block; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; color: var(--atom-text-muted); }
.tk-kal-hari-no { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; }
.tk-kal-hari.is-kini .tk-kal-hari-no { background: var(--atom-primary); color: #fff; }
.tk-kal-sel { padding: .25rem; height: 3.5rem; }
.tk-kal-sel.is-hujung, .tk-kal-hari.is-hujung { background-color: var(--atom-surface-alt); }
.tk-kal-sel.is-kini { background-color: var(--atom-primary-light); }
.tk-kal-baris-tunggu th, .tk-kal-ringkas th { background: var(--atom-warning-light) !important; }
.tk-kal-ringkas th { background: var(--atom-surface-alt) !important; font-size: var(--atom-fs-xs) !important; }
.tk-kal-ringkas td { text-align: center; vertical-align: middle !important; height: auto; }
.tk-kal-kosong { font-size: var(--atom-fs-sm); font-weight: 700; color: var(--atom-success); }
.tk-kal-kosong.is-penuh { color: var(--atom-danger); }

.tk-kal-blok {
  display: flex; flex-direction: column; width: 100%; margin: 0 0 .25rem; padding: .25rem .375rem;
  border: 1px solid var(--atom-border-strong); border-left-width: 3px; border-radius: var(--atom-radius-sm, 4px);
  background: var(--atom-neutral-light); color: var(--atom-text);
  font-size: var(--atom-fs-xs); line-height: 1.3; text-align: left;
}
.tk-kal-blok:last-child { margin-bottom: 0; }
button.tk-kal-blok:hover { filter: brightness(.97); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
button.tk-kal-blok:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: 1px; }
.tk-kal-masa { font-weight: 700; }
.tk-kal-ruj { font-weight: 600; }
.tk-kal-kecil { color: var(--atom-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-kal-luar {
  margin-bottom: .25rem; padding: .25rem .375rem; border-radius: var(--atom-radius-sm, 4px);
  font-size: var(--atom-fs-xs); color: var(--atom-text-muted); text-align: center;
  background: repeating-linear-gradient(45deg, var(--atom-surface-sunken, #eef0f3) 0 6px, var(--atom-surface-alt) 6px 12px);
}

/* Warna ikut status — BKP */
.tk-kal.is-pelulus .is-kelulusan   { background: var(--atom-info-light);    border-color: var(--atom-info); }
.tk-kal.is-pelulus .is-diluluskan  { background: var(--atom-success-light); border-color: var(--atom-success); }
/* Pemohon — hanya tempahan sendiri berwarna */
.tk-kal.is-pemohon .is-saya    { background: var(--atom-primary-light); border-color: var(--atom-primary); }

/* Bulan */
.tk-kal-bulan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 700px; }
.tk-kal-bulan-kepala {
  padding: .375rem; text-align: center; background: var(--atom-surface-alt);
  font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; color: var(--atom-text-muted);
  border-bottom: 1px solid var(--atom-border);
}
.tk-kal-bulan-sel {
  min-height: 6.5rem; padding: .25rem; display: flex; flex-direction: column; gap: .1875rem;
  border-right: 1px solid var(--atom-border); border-bottom: 1px solid var(--atom-border);
}
.tk-kal-bulan-sel:nth-child(7n + 7) { border-right: 0; }
.tk-kal-bulan-sel.is-hujung { background: var(--atom-surface-alt); }
.tk-kal-bulan-sel.is-luar { opacity: .45; }
.tk-kal-bulan-sel.is-kini { background: var(--atom-primary-light); }
.tk-kal-bulan-no {
  align-self: flex-end; width: 1.625rem; height: 1.625rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text);
}
.tk-kal-bulan-no:hover { background: var(--atom-primary-light); color: var(--atom-primary); }
.tk-kal-bulan-sel.is-kini .tk-kal-bulan-no { background: var(--atom-primary); color: #fff; }
.tk-kal-cip {
  display: block; width: 100%; padding: .0625rem .375rem; text-align: left;
  border: 1px solid var(--atom-border-strong); border-left-width: 3px; border-radius: 3px;
  background: var(--atom-neutral-light); font-size: .6875rem; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--atom-text);
}
.tk-kal-lagi {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font-size: .6875rem; font-weight: 600; color: var(--atom-primary);
}
@media (max-width: 575.98px) {
  .tk-kal { padding: .75rem; }
  .tk-kal-tajuk { font-size: var(--atom-fs-base); }
}

/* Kalendar dalam borang (langkah Perjalanan) & serlahan tarikh perjalanan */
.tk-kal-borang { margin-top: .75rem; padding: .875rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.tk-kal-borang .tk-kal { padding: 0; }
.tk-kal-borang .tk-kal-wrap { background: var(--atom-card); }
.tk-kal .tk-kal-sel.is-sorot,
.tk-kal .tk-kal-bulan-sel.is-sorot { background-color: var(--atom-primary-light); }
.tk-kal .tk-kal-hari.is-sorot { background-color: var(--atom-primary-light); box-shadow: inset 0 -3px 0 var(--atom-primary); }
.tk-kal .tk-kal-hari.is-sorot .tk-kal-hari-nama { color: var(--atom-primary); }
.tk-kal-titik.is-sorot { background: var(--atom-primary-light); border: 2px solid var(--atom-primary); }

/* --------------------------------------------------------------------------
   eAdmin — Tempahan Fasiliti & Sajian
   Berkongsi penunjuk langkah (.tk-langkah), kad pilihan (.tk-guna-kad),
   paparan berjaya (.tk-berjaya) dan grid bulan (.tk-kal-bulan) dengan
   Tempahan Kenderaan; hanya perbezaan di bawah.
   -------------------------------------------------------------------------- */
.table-tf { table-layout: fixed; width: 100%; min-width: 1240px; }  /* Tajuk kekal sekurang-kurangnya ~180px; skrin lebih kecil skrol mendatar */
.table-tf .col-num        { width: 48px; min-width: 48px; }
.table-tf th:nth-child(2) { width: 124px; }  /* NO. TEMPAHAN */
.table-tf th:nth-child(3) { width: 15%; }    /* TEMPAT — beri ruang lebih kepada Tajuk */
.table-tf th:nth-child(5) { width: 150px; }  /* TARIKH & MASA */
.table-tf th:nth-child(6) { width: 128px; }  /* JENIS — muat "Perbincangan" tanpa dipecah */
.table-tf th:nth-child(7) { width: 132px; }  /* SAJIAN — muat "Belum Diproses" */
.table-tf th:nth-child(8) { width: 116px; }  /* STATUS BILIK — "Dibatalkan" */
/* Tajuk lajur boleh turun ke baris kedua, bukan dipotong */
.table-tf thead th { white-space: normal; vertical-align: bottom; line-height: 1.35; }
.table-tf thead th.col-num { white-space: nowrap; }   /* "BIL." jangan dipecah */
/* Tindakan: ikon sahaja, maksimum empat sebaris (lihat / cetak / sajian /
   batal). Ikon utama di kiri supaya sebaris dari atas ke bawah.
   176px = empat ikon 30px + jarak + padding sel. */
.table-tf .col-action     { width: 176px; min-width: 176px; text-align: left; }
.table-tf td.col-action .d-inline-flex { flex-wrap: nowrap; }
.table-tf td:nth-child(3),
.table-tf td:nth-child(4) { max-width: 0; }
.table-tf .badge-atom { white-space: nowrap; }
.tf-sel-potong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-sajian-ya { color: var(--atom-primary); font-weight: 600; white-space: nowrap; }
.tf-bintang-kecil { color: var(--atom-warning); font-size: .6875rem; }
.tf-bintang-kecil.bi-star { color: var(--atom-border-strong); }
.tf-bintang-papar .tf-bintang-kecil { font-size: .875rem; }

.tf-peringatan { align-items: center; margin-bottom: 1rem; }
.tf-peringatan .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .tf-peringatan { flex-wrap: wrap; }
  .tf-peringatan .btn { width: 100%; }
}

/* Kalendar bilik */
.tf-kal .is-saya { background: var(--atom-primary-light); border-color: var(--atom-primary); }
.tf-kal-bilik { display: flex; align-items: center; gap: .5rem; }
.tf-kal-bilik .form-select { min-width: 240px; }
.tf-kal .tk-kal-bulan-sel { cursor: pointer; }
.tf-kal .tk-kal-bulan-sel:hover { box-shadow: inset 0 0 0 1px var(--atom-primary-soft); }
.tf-kal .tk-kal-bulan-sel.is-pilih { box-shadow: inset 0 0 0 2px var(--atom-primary); }
.tf-kal-hari {
  margin-top: .875rem; padding: .875rem 1rem; border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius); background: var(--atom-card);
}
.tf-kal-hari-tajuk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  margin: 0 0 .5rem; font-size: var(--atom-fs-base); font-weight: 700;
}
.tf-kal-hari-tajuk > .bi { color: var(--atom-primary); }
.tf-kal-hari-kira { margin-left: auto; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); }
.tf-kal-hari-kosong { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-success); }
.tf-kal-hari-senarai { list-style: none; margin: 0; padding: 0; }
.tf-kal-hari-senarai li {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem;
  border-left: 3px solid var(--atom-border-strong); border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt);
}
.tf-kal-hari-senarai li + li { margin-top: .375rem; }
.tf-kal-hari-senarai li.is-saya { border-left-color: var(--atom-primary); background: var(--atom-primary-light); }
.tf-kal-hari-masa { flex: 0 0 110px; font-size: var(--atom-fs-sm); font-weight: 700; }
.tf-kal-hari-isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tf-kal-hari-bilik { font-weight: 600; }
.tf-kal-hari-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
@media (max-width: 575.98px) {
  .tf-kal-bilik { width: 100%; }
  .tf-kal-bilik .form-select { min-width: 0; flex: 1; }
  .tf-kal-hari-senarai li { flex-wrap: wrap; }
  .tf-kal-hari-masa { flex-basis: 100%; }
}

/* Borang — ketersediaan */
/* Borang — jadual penggunaan bilik (satu baris setiap hari) */
.tf-hari-senarai { display: flex; flex-direction: column; gap: .5rem; }
.tf-hari-baris {
  display: grid; grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
  align-items: start; gap: .75rem; padding: .625rem .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt);
}
.tf-hari-no { padding-top: 1.875rem; font-size: var(--atom-fs-sm); font-weight: 700; color: var(--atom-text-secondary); }
.tf-hari-buang { padding-top: 1.625rem; }
.tf-hari-baris .form-label { font-size: var(--atom-fs-xs); margin-bottom: .25rem; }
@media (max-width: 767.98px) {
  .tf-hari-baris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .tf-hari-no { grid-column: 1 / 3; padding-top: 0; }
  .tf-hari-buang { grid-column: 3; grid-row: 1; padding-top: 0; }
  .tf-hari-tarikh { grid-column: 1 / -1; }
}

.tf-sedia-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tf-sedia:not(:empty) { margin-top: .75rem; }
.tf-sedia .alert-atom { margin-bottom: 0; }
.tf-tembung { margin: .25rem 0 .5rem; padding-left: 1.125rem; font-size: var(--atom-fs-sm); }
.tf-tembung li + li { margin-top: .125rem; }
.tf-alternatif { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .625rem; }
.tf-kal-borang { margin-top: 1rem; }
/* Tarikh flatpickr yang sudah ada tempahan pada bilik dipilih */
.flatpickr-day.tf-fp-ada { position: relative; }
.flatpickr-day.tf-fp-ada::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--atom-warning);
}
.flatpickr-day.tf-fp-ada.selected::after { background: #fff; }

/* Borang — mesyuarat */
.tf-jenis-dok { display: flex; flex-wrap: wrap; gap: .25rem 0; }
.tf-lampiran-senarai { display: flex; flex-direction: column; gap: .5rem; }
.tf-lampiran-senarai:not(:empty) { margin-top: .5rem; }

/* Borang — sajian */
.tf-soalan { margin: 0 0 .625rem; font-weight: 600; }
.tf-sajian-pilihan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .tf-sajian-pilihan { grid-template-columns: 1fr; } }
.tf-rujukan { padding: .25rem .875rem; border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
/* Sajian — satu kad bagi setiap hidangan; butiran dibuka apabila ditanda */
.tf-hidangan-senarai { display: flex; flex-direction: column; gap: .625rem; }
.tf-hidangan-kad {
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card);
  transition: border-color var(--atom-transition);
}
.tf-hidangan-kad.is-dipilih { border-color: var(--atom-primary); }
.tf-hidangan-kepala { display: flex; align-items: center; gap: .625rem; min-height: 0; margin: 0; padding: .75rem 1rem; }
.tf-hidangan-kepala .form-check-input { float: none; flex: 0 0 auto; margin: 0; }
.tf-hidangan-kepala .form-check-label { flex: 1 1 auto; font-weight: 600; cursor: pointer; }
.tf-hidangan-kad.is-dipilih .tf-hidangan-kepala {
  background: var(--atom-primary-light); border-radius: var(--atom-radius) var(--atom-radius) 0 0;
}
.tf-hidangan-butiran {
  display: flex; flex-direction: column; gap: .875rem; padding: .875rem 1rem 1rem;
  border-top: 1px solid var(--atom-border);
}
.tf-hidangan-butiran[hidden] { display: none; }

/* Pilihan sajian — kotak semak / radio berbingkai */
.tf-pilih-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.tf-pilih-kad {
  display: flex; align-items: center; gap: .5rem; min-height: 0; margin: 0; padding: .625rem .875rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-card);
  transition: border-color var(--atom-transition), background var(--atom-transition);
}
.tf-pilih-kad .form-check-input { float: none; flex: 0 0 auto; margin: 0; }
.tf-pilih-kad .form-check-label { flex: 1 1 auto; font-weight: 500; cursor: pointer; }
.tf-pilih-kad:hover { border-color: var(--atom-border-strong); }
.tf-pilih-kad:has(.form-check-input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); }

/* Semua Tempahan (Urusetia Kemudahan) */
.table-tf-semua { table-layout: fixed; width: 100%; min-width: 1100px; }
.table-tf-semua .col-num        { width: 48px; }
.table-tf-semua th:nth-child(2) { width: 140px; }
.table-tf-semua th:nth-child(3) { width: 20%; }
.table-tf-semua th:nth-child(5) { width: 150px; }
.table-tf-semua th:nth-child(6) { width: 140px; }
.table-tf-semua th:nth-child(7) { width: 116px; }
.table-tf-semua .col-action     { width: 140px; }
.table-tf-semua td:nth-child(3),
.table-tf-semua td:nth-child(4) { max-width: 0; }
.table-tf-semua .badge-atom { white-space: nowrap; }

/* Penilaian Sajian (Semua Tempahan) */
.tf-nilai-sel { display: inline-flex; align-items: center; gap: .125rem; white-space: nowrap; }
.tf-nilai-angka { min-width: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tf-nilai-komen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--atom-fs-sm); }
.table-tf-nilai { table-layout: fixed; width: 100%; min-width: 1100px; }
.table-tf-nilai .col-num        { width: 48px; }
.table-tf-nilai th:nth-child(2) { width: 140px; }
.table-tf-nilai th:nth-child(4),
.table-tf-nilai th:nth-child(5),
.table-tf-nilai th:nth-child(6),
.table-tf-nilai th:nth-child(7) { width: 132px; }
.table-tf-nilai .col-action     { width: 72px; }
.table-tf-nilai td:nth-child(3) { max-width: 0; }
.table-tf-nilai-menu { min-width: 900px; }
.table-tf-nilai-menu .col-num { width: 48px; }
#pane-nilai .filter-kepala { margin-top: .5rem; }

/* Data Induk Fasiliti — item Tidak Aktif dimalapkan */
.table-induk { width: 100%; }
.table-induk .col-num    { width: 48px; }
.table-induk .col-action { width: 72px; }
.table-induk tr.is-tidak-aktif td:not(.col-action) { color: var(--atom-text-muted); }

/* Kelulusan Sajian */
.table-tf-lulus { table-layout: fixed; width: 100%; min-width: 860px; }
.table-tf-lulus .col-num        { width: 48px; }
.table-tf-lulus th:nth-child(2) { width: 150px; }
.table-tf-lulus th:nth-child(3) { width: 22%; }
.table-tf-lulus th:nth-child(5) { width: 160px; }
.table-tf-lulus .col-action     { width: 88px; }
.table-tf-lulus.is-diproses th:nth-child(6) { width: 170px; }
.table-tf-lulus.is-diproses .col-action     { width: 72px; }
.table-tf-lulus td:nth-child(3),
.table-tf-lulus td:nth-child(4) { max-width: 0; }

/* Penilaian sajian */
.tf-nilai { display: flex; flex-direction: column; gap: .375rem; }
.tf-nilai-baris {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm);
}
.tf-nilai-baris.is-utama { background: var(--atom-surface-alt); }
.tf-nilai-baris.is-invalid { border-color: var(--atom-danger); background: var(--atom-danger-light); }
.tf-nilai-label { flex: 1 1 200px; font-weight: 600; }
.tf-bintang-kumpulan { display: inline-flex; gap: .125rem; }
.tf-bintang { margin: 0; padding: .125rem; font-size: 1.375rem; line-height: 1; color: var(--atom-border-strong); cursor: pointer; }
.tf-bintang.is-aktif, .tf-bintang.is-hover { color: var(--atom-warning); }
.tf-bintang-kumpulan:hover .tf-bintang.is-aktif:not(.is-hover) { color: var(--atom-border-strong); }
.tf-bintang-kumpulan input:focus-visible + .tf-bintang { outline: 2px solid var(--atom-primary); outline-offset: 1px; border-radius: 4px; }
.tf-nilai-teks { flex: 0 0 140px; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
@media (max-width: 575.98px) { .tf-nilai-teks { flex-basis: 100%; } }

/* ==========================================================================
   Pentadbiran Sistem (Super Admin) — pentadbiran-sistem/
   ========================================================================== */
.sa-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 600; line-height: 1.5;
  background: var(--atom-primary-light); color: var(--atom-primary); white-space: nowrap;
}
.sa-chip .bi { font-size: .75rem; }
.sa-chip.is-accent  { background: var(--atom-accent-light);  color: var(--atom-accent); }
.sa-chip.is-success { background: var(--atom-success-light); color: var(--atom-success); }
.sa-chip.is-warning { background: var(--atom-warning-light); color: var(--atom-warning); }
.sa-chip.is-info    { background: var(--atom-info-light);    color: var(--atom-info); }
.sa-chip.is-danger  { background: var(--atom-danger-light);  color: var(--atom-danger); }
.sa-chip.is-neutral { background: var(--atom-neutral-light); color: var(--atom-neutral); }

.sa-sistem-ikon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--atom-radius);
  background: var(--atom-primary-light); color: var(--atom-primary); font-size: 1.0625rem;
}
.sa-sistem-ikon.is-accent  { background: var(--atom-accent-light);  color: var(--atom-accent); }
.sa-sistem-ikon.is-success { background: var(--atom-success-light); color: var(--atom-success); }
.sa-sistem-ikon.is-warning { background: var(--atom-warning-light); color: var(--atom-warning); }
.sa-sistem-ikon.is-info    { background: var(--atom-info-light);    color: var(--atom-info); }
.sa-sistem-ikon.is-danger  { background: var(--atom-danger-light);  color: var(--atom-danger); }
.sa-sistem-ikon.is-neutral { background: var(--atom-neutral-light); color: var(--atom-neutral); }
.sa-sistem-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sa-sistem-nama { font-weight: 600; font-size: var(--atom-fs-sm); }
.sa-sistem-penuh { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sa-sistem-senarai { list-style: none; margin: 0; padding: 0; }
.sa-sistem-baris {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem 1.25rem; border-top: 1px solid var(--atom-border);
}
.sa-sistem-senarai .sa-sistem-baris:first-child { border-top: 0; }
.sa-sistem-bar { flex: 0 0 22%; height: .375rem; border-radius: var(--atom-radius-pill); background: var(--atom-surface-sunken); overflow: hidden; }
.sa-sistem-bar > span { display: block; height: 100%; background: var(--atom-primary); border-radius: inherit; }
.sa-sistem-bil { flex: 0 0 6.5rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.sa-sistem-bil strong { color: var(--atom-text); }

.sa-aktiviti-senarai { list-style: none; margin: 0; padding: 0; }
.sa-aktiviti {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: start;
  padding: .75rem 1.25rem; border-top: 1px solid var(--atom-border); font-size: var(--atom-fs-sm);
}
.sa-aktiviti-senarai .sa-aktiviti:first-child { border-top: 0; }
.sa-aktiviti-kat { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); text-transform: uppercase; letter-spacing: .02em; padding-top: .125rem; }
.sa-aktiviti-masa { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); text-align: right; white-space: nowrap; }

.sa-capaian-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; align-items: start; }
.sa-capaian-kad {
  margin: 0; padding: .875rem 1rem; min-width: 0;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg); background: var(--atom-card);
}
.sa-capaian-kad.is-hidup { border-color: var(--atom-primary); box-shadow: 0 0 0 1px var(--atom-primary-soft); }
.sa-capaian-kepala { display: flex; align-items: center; gap: .75rem; }
.sa-capaian-peranan { display: grid; gap: .375rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--atom-border); }
.sa-capaian-pilihan {
  display: flex; gap: .5rem; align-items: flex-start; padding: .375rem .5rem;
  border-radius: var(--atom-radius); font-size: var(--atom-fs-sm); cursor: pointer;
}
.sa-capaian-pilihan:hover { background: var(--atom-surface-sunken); }
.sa-capaian-pilihan .form-check-input { flex: 0 0 auto; margin-top: .1875rem; }
.sa-capaian-semua-global {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .75rem; padding: .5rem .75rem; border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-lg); background: var(--atom-surface-sunken);
}
.sa-capaian-semua-global .sa-capaian-pilihan:hover { background: transparent; }
.sa-capaian-semua { padding-bottom: .5rem; margin-bottom: .125rem; border-bottom: 1px solid var(--atom-border); border-radius: var(--atom-radius) var(--atom-radius) 0 0; }
.sa-pilihan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .25rem .75rem; }

.sa-baris-pudar td { color: var(--atom-text-muted); }
.sa-pudar { opacity: .55; }

@media (max-width: 767.98px) {
  .sa-sistem-bar { display: none; }
  .sa-aktiviti { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .sa-aktiviti-masa { text-align: left; }
  .sa-capaian-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pentadbiran Sistem — Pengurusan Modul & Menu Portal */
.sa-menu-senarai { list-style: none; margin: 0; padding: 0; }
.sa-menu-baris {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; border-top: 1px solid var(--atom-border); background: var(--atom-card);
}
.sa-menu-senarai .sa-menu-baris:first-child { border-top: 0; }
.sa-menu-baris.is-sembunyi .sa-sistem-ikon,
.sa-menu-baris.is-sembunyi .sa-sistem-teks { opacity: .5; }
.sa-menu-baris.is-seret { opacity: .4; }
.sa-menu-baris.is-sasaran { box-shadow: inset 0 2px 0 var(--atom-primary); }
.sa-menu-pemegang { color: var(--atom-text-muted); cursor: grab; }
.sa-menu-no { flex: 0 0 1.5rem; text-align: center; font-weight: 700; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); font-variant-numeric: tabular-nums; }
.sa-menu-aksi { display: flex; align-items: center; gap: .125rem; flex: 0 0 auto; }

.sa-pratonton-portal { background: var(--atom-surface-sunken); }
.sa-pratonton-portal .portal-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sa-pratonton-portal .portal-tile,
.sa-pratonton-jubin .portal-tile { pointer-events: none; }
.sa-jubin-sa { opacity: .6; border-style: dashed; }
.sa-pratonton-lekat { position: sticky; top: 0; }
.sa-pratonton-jubin { padding: 1rem; border-radius: var(--atom-radius-lg); background: var(--atom-surface-sunken); }

/* Pentadbiran Sistem — Pengurusan Menu */
.sa-ms-tab { padding-inline: .75rem; background: var(--atom-surface-alt); }
.sa-ms-tab .nav-link { font-size: var(--atom-fs-sm); padding-inline: .75rem; }
.sa-ms-tab-ubah { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--atom-warning); }
.sa-ms-badan { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; padding: 1rem 1.25rem; align-items: start; }
.sa-ms-senarai { list-style: none; margin: 0; padding: 0; }
.sa-ms-baris {
  display: flex; align-items: center; gap: .625rem;
  padding: .4375rem .5rem .4375rem calc(.5rem + (var(--aras, 0) - 1) * 1.5rem);
  border-bottom: 1px solid var(--atom-border);
}
.sa-ms-baris.is-seksyen { padding-left: .5rem; margin-top: .75rem; background: var(--atom-surface-sunken); border-radius: var(--atom-radius) var(--atom-radius) 0 0; }
.sa-ms-senarai > .sa-ms-baris.is-seksyen:first-child { margin-top: 0; }
.sa-ms-baris.is-sembunyi .sa-ms-ikon,
.sa-ms-baris.is-sembunyi .sa-ms-medan { opacity: .45; }
.sa-ms-baris.is-sembunyi .sa-ms-medan .form-control { text-decoration: line-through; }
.sa-ms-ikon { flex: 0 0 1.75rem; text-align: center; color: var(--atom-text-secondary); }
.sa-ms-medan { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.sa-ms-tetap { font-weight: 600; font-size: var(--atom-fs-sm); padding: .25rem 0; }
.sa-ms-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ms-ikon-medan { flex: 0 0 9rem; }
.sa-ms-kosong { padding: .5rem .5rem .5rem calc(2.75rem + (var(--aras, 1) - 1) * 1.5rem); font-size: var(--atom-fs-xs); color: var(--atom-text-muted); border-bottom: 1px solid var(--atom-border); }
.sa-ms-baris .sa-menu-aksi .btn-icon { width: 1.875rem; height: 1.875rem; }
/* Peranan Sistem — pokok menu bertick dalam borang peranan */
.sa-pr-pokok { max-height: 60vh; overflow: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.sa-pr-pokok .sa-ms-baris.is-seksyen { margin-top: 0; border-radius: 0; }
.sa-pr-pokok .sa-ms-baris label.sa-ms-medan { cursor: pointer; }
.sa-pr-pokok .form-check-input:indeterminate { background-color: var(--atom-primary); border-color: var(--atom-primary); }
.sa-tab-halaman { border-bottom: 1px solid var(--atom-border); }
.sa-ms-pratonton { position: sticky; top: calc(var(--atom-navbar-height, 64px) + 1rem); }
.sa-sb-pratonton.app-sidebar {
  position: static; width: auto; height: auto; max-height: 70vh; overflow: auto;
  transform: none; border-radius: var(--atom-radius-lg); padding-bottom: .75rem; pointer-events: none;
}
.sa-sb-jenama { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 1199.98px) {
  .sa-ms-badan { grid-template-columns: minmax(0, 1fr); }
  .sa-ms-pratonton { position: static; }
  .sa-ms-ikon-medan { display: none; }
}

/* Borang iklan — zon brosur sebaris (lebih rendah) */
.form-dropzone.is-ringkas { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: .25rem .625rem; padding: .875rem 1rem; }
.form-dropzone.is-ringkas .bi { font-size: 1.25rem; }
.form-dropzone.is-ringkas .dz-title { font-size: var(--atom-fs-sm); }
#ibFormIklan textarea.form-control { min-height: 0; }

/* Iklan Latihan — serlah baris yang baru disimpan */
#tableIklan tbody tr.is-baharu > td { background: var(--atom-primary-light); transition: background-color .6s ease; }

/* Pentadbiran Sistem › capaian — kad Super Admin merentang penuh di atas modul */
.sa-capaian-kad.is-super { grid-column: 1 / -1; }
.sa-capaian-kad.is-super.is-hidup { border-color: var(--atom-danger); box-shadow: 0 0 0 1px var(--atom-danger-light, var(--atom-danger)); }

/* Log masuk sebagai (impersonate) — pil terapung "Kembali ke akaun asal" */
.samar-pil {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1080;
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 2rem); padding: .5rem .5rem .5rem 1rem;
  background: var(--atom-warning); color: #fff; border-radius: 999px;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); font-size: var(--atom-fs-sm);
}
.samar-pil > .bi { font-size: 1.125rem; }
.samar-pil-id { opacity: .85; }
.samar-pil-btn { background: #fff; color: var(--atom-warning); border-radius: 999px; font-weight: 600; }
.samar-pil-btn:hover, .samar-pil-btn:focus-visible { background: var(--atom-warning-light); color: var(--atom-warning); }
@media (max-width: 575.98px) { .samar-pil { border-radius: var(--atom-radius, .75rem); } }

/* Semakan Pencalonan LN — Masterlist Calon (tab Selesai) */
.ln-masterlist-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.ln-masterlist-jadual tbody tr.is-dipilih > td { background: var(--atom-primary-light); }
.ln-masterlist-jadual tbody tr.is-dipilih > td:first-child { box-shadow: inset 3px 0 0 var(--atom-primary); }

/* Kemajuan Calon LN (ln-kemajuan.html) */
.ln-kemajuan.ln-kemajuan-mini { width: 8rem; max-width: 100%; margin: .375rem 0 .125rem; }
.ln-fail .ln-fail-nama { padding: 0; border: 0; background: none; color: var(--atom-primary); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cpl-surat-senarai .ln-fail-nama { padding: 0; border: 0; background: none; color: var(--atom-primary); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ln-fail .ln-fail-aksi { display: inline-flex; gap: .25rem; margin-left: auto; }
.ln-fail .ln-fail-aksi .btn { padding: .125rem .5rem; font-size: var(--atom-fs-xs); gap: .25rem; }
.ln-fail .ln-fail-aksi .bi { color: inherit; }
.ln-info-jadual.ln-dok-calon { table-layout: auto; }
.ln-info-jadual.ln-dok-calon th[scope="row"] { width: 16rem; }

   eAdmin — Aduan Kerosakan Aset Alih (aa-)
   ========================================================================== */
.table-aduan-aset thead th { white-space: normal; vertical-align: bottom; }
.table-aduan-aset .aa-sel-aset { min-width: 120px; }
.table-aduan-aset .aa-sel-lokasi { min-width: 100px; max-width: 150px; }
.aa-ringkas {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 170px; font-size: var(--atom-fs-sm);
}

/* Carian aset */
.aa-cari-aset { position: relative; }
.aa-hasil-aset {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto;
  background: var(--atom-card); border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius); box-shadow: var(--atom-shadow-md);
  padding: .25rem;
}
.aa-hasil-item {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%;
  padding: .625rem .75rem; border: 0; background: transparent; text-align: left;
  border-radius: var(--atom-radius-sm); color: var(--atom-text);
}
.aa-hasil-item:hover, .aa-hasil-item:focus { background: var(--atom-primary-light); outline: none; }
.aa-hasil-ikon {
  flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); color: var(--atom-primary);
}
.aa-hasil-teks { min-width: 0; display: flex; flex-direction: column; }
.aa-hasil-nama { font-weight: 600; }
.aa-hasil-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.aa-hasil-kosong { padding: .875rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }

.aa-aset-kad {
  border: 1px solid var(--atom-primary-soft); background: var(--atom-primary-light);
  border-radius: var(--atom-radius); padding: 1rem;
}
.aa-aset-kad .detail-list { background: var(--atom-card); border-radius: var(--atom-radius-sm); padding: .25rem .875rem; }
.aa-aset-kepala { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.aa-aset-ikon {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--atom-radius); background: var(--atom-card); color: var(--atom-primary); font-size: 1.125rem;
}
.aa-aset-nama { font-weight: 700; }

/* Galeri gambar */
.aa-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.aa-gambar {
  position: relative; margin: 0; border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius); overflow: hidden; background: var(--atom-card);
}
.aa-gambar img, .aa-gambar-ganti { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aa-gambar-ganti {
  display: grid; place-items: center; background: var(--atom-surface-alt);
  color: var(--atom-text-muted); font-size: 1.75rem;
}
.aa-gambar figcaption {
  padding: .375rem .5rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aa-gambar-buang {
  position: absolute; top: .375rem; right: .375rem; width: 26px; height: 26px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .65); color: #fff; font-size: .75rem;
}
.aa-gambar-buang:hover { background: var(--atom-danger); }
.aa-gambar-klik { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.aa-gambar.is-lihat:hover { border-color: var(--atom-primary); }
.aa-gambar-penuh { display: block; max-width: 100%; margin: 0 auto; border-radius: var(--atom-radius); }
.aa-gambar-penuh.is-ganti {
  padding: 3rem 1rem; text-align: center; background: var(--atom-surface-alt);
  color: var(--atom-text-muted); font-size: 2.5rem;
}
.aa-gambar-penuh.is-ganti p { font-size: var(--atom-fs-sm); }
.aa-senarai-fail { display: flex; flex-direction: column; gap: .5rem; }

/* Berjaya dihantar */
.aa-berjaya { text-align: center; padding: .5rem 0 .25rem; }
.aa-berjaya-ikon {
  width: 64px; height: 64px; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--atom-success-light); color: var(--atom-success); font-size: 2rem;
}
.aa-berjaya-no {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; color: var(--atom-text); margin-bottom: .5rem;
}
.aa-berjaya-teks { margin: 1rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

/* Butiran */
.aa-lekat { position: sticky; top: 1rem; }
@media (max-width: 991.98px) { .aa-lekat { position: static; } }
.aa-sub-tajuk {
  font-size: var(--atom-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--atom-text-muted); margin: 0 0 .625rem;
}
.aa-dok-label { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); margin-bottom: .25rem; }
.aa-keterangan { white-space: pre-line; font-weight: 400; }
.aa-langkah.is-akan .timeline-title { color: var(--atom-text-muted); font-weight: 500; }
.aa-ulasan {
  display: flex; gap: .5rem; margin-top: .5rem; padding: .5rem .75rem;
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); color: var(--atom-text);
}
.aa-ulasan .bi { color: var(--atom-primary); flex: 0 0 auto; margin-top: .125rem; }
.aa-ulasan.is-danger { background: var(--atom-danger-light); border-color: #F7D4D4; }
.aa-ulasan.is-danger .bi { color: var(--atom-danger); }
.badge-aa-tindakan { background: #ECFEFF; color: #0E7490; border-color: #CFFAFE; }
/* Aset Tak Alih: tiada Menunggu Kelulusan — Dalam Tindakan guna oren */
body[data-aa-modul="tak-alih"] .badge-aa-tindakan { background: var(--atom-warning-light); color: var(--atom-warning); border-color: #F5E0C3; }

/* --- Aduan Aset Alih: skrin Pegawai Aset & Ketua Seksyen / Unit --------- */
.aa-filter-reset { align-self: end; }

/* Baris jadual dibezakan ikut siapa yang perlu bertindak */
.table-aduan-aset tr > td:first-child { border-left: 3px solid transparent; }
.table-aduan-aset tr.aa-baris-tindakan > td:first-child  { border-left-color: var(--atom-warning); }
.table-aduan-aset tr.aa-baris-kelulusan > td:first-child { border-left-color: var(--atom-info); }
.table-aduan-aset tr.aa-baris-pelaksanaan > td:first-child { border-left-color: var(--atom-info); }
.table-aduan-aset tr.aa-baris-ditutup td { color: var(--atom-text-secondary); }
.aa-langkah-seterusnya {
  display: flex; align-items: center; gap: .25rem; margin-top: .375rem;
  font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-warning); max-width: 150px;
}
.aa-titik-baharu {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--atom-danger); vertical-align: middle; margin-left: .25rem;
}

/* Rekod pemprosesan */
.aa-rekod-oleh { margin: .875rem 0 0; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.aa-kos-besar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .875rem 1rem; margin-bottom: 1rem; border-radius: var(--atom-radius);
  background: var(--atom-warning-light); border: 1px solid #F5E0C3;
}
.aa-kos-besar span { font-size: var(--atom-fs-sm); font-weight: 600; color: #8A4108; }
.aa-kos-besar strong { font-size: 1.375rem; color: var(--atom-text); }
.aa-keputusan {
  display: flex; gap: .75rem; padding: .875rem 1rem; border-radius: var(--atom-radius); border: 1px solid;
}
.aa-keputusan .bi { font-size: 1.25rem; flex: 0 0 auto; }
.aa-keputusan.is-lulus { background: var(--atom-success-light); border-color: #CDEBD8; }
.aa-keputusan.is-lulus .bi { color: var(--atom-success); }
.aa-keputusan.is-tolak { background: var(--atom-danger-light); border-color: #F7D4D4; }
.aa-keputusan.is-tolak .bi { color: var(--atom-danger); }

/* Panel tindakan */
.aa-panel-tindakan { border: 2px solid var(--atom-primary-soft); box-shadow: var(--atom-shadow-md); scroll-margin-top: 1rem; }
.aa-panel-tindakan > .card-header { background: var(--atom-primary-light); }
.aa-sub-borang { padding-top: 1rem; border-top: 1px dashed var(--atom-border); }

/* Pilihan keputusan (kad radio) */
.aa-pilihan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.aa-pilihan {
  display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; margin: 0;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); cursor: pointer;
  background: var(--atom-card); transition: border-color var(--atom-transition), background-color var(--atom-transition);
}
.aa-pilihan:hover { border-color: var(--atom-border-strong); }
.aa-pilihan .form-check-input { margin-top: .25rem; flex: 0 0 auto; }
.aa-pilihan-ikon {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); color: var(--atom-primary); font-size: 1.125rem;
}
.aa-pilihan-tajuk { display: block; font-weight: 600; }
.aa-pilihan-teks { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.aa-pilihan.is-dipilih { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.aa-pilihan.is-lulus.is-dipilih { border-color: var(--atom-success); background: var(--atom-success-light); }
.aa-pilihan.is-lulus .aa-pilihan-ikon { color: var(--atom-success); }
.aa-pilihan.is-tidak-lulus.is-dipilih { border-color: var(--atom-danger); background: var(--atom-danger-light); }
.aa-pilihan.is-tidak-lulus .aa-pilihan-ikon { color: var(--atom-danger); }

/* --- Aduan Aset Tak Alih ------------------------------------------------ */
/* Kategori kemudahan — grid kad ikon yang boleh dipilih */
.aa-kategori-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.aa-kategori {
  display: flex; align-items: center; gap: .5rem; margin: 0; padding: .625rem .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card);
  font-size: var(--atom-fs-sm); font-weight: 500; cursor: pointer; line-height: 1.3;
  transition: border-color var(--atom-transition), background-color var(--atom-transition);
}
.aa-kategori .bi { font-size: 1.125rem; color: var(--atom-primary); flex: 0 0 auto; }
.aa-kategori:hover { border-color: var(--atom-border-strong); }
.aa-kategori.is-dipilih { border-color: var(--atom-primary); background: var(--atom-primary-light); font-weight: 600; }
.aa-kategori:has(input:focus-visible) { outline: 2px solid var(--atom-primary); outline-offset: 1px; }

/* Kad bangunan terpilih — versi ringkas kad aset */
.aa-aset-kad.is-ringkas { padding: .75rem 1rem; }



/* ==========================================================================
   eAdmin — Pengurusan Media Kreatif (UKK)
   Pemohon · Pentadbir UKK · Jurufoto / Pereka Bentuk
   Komponen asas (kad, garis masa, galeri, zon muat naik) dipinjam
   daripada modul Aduan Aset (.aa-*); di bawah hanya tambahan modul ini.
   ========================================================================== */

/* --- Lencana & jenis ---------------------------------------------------- */
.badge-mk-tugas { background: #F5F3FF; color: #6D28D9; border-color: #EDE9FE; }

.mk-jenis { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); font-weight: 500; }
.mk-jenis-ikon {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: var(--atom-radius-sm); font-size: .875rem;
  background: var(--atom-primary-light); color: var(--atom-primary);
}
.mk-jenis-ikon.is-besar { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; border-radius: var(--atom-radius); }
.mk-jenis-ikon.is-jurufoto     { background: #EFF6FF; color: #1D4ED8; }
.mk-jenis-ikon.is-media-sosial { background: #FDF2F8; color: #BE185D; }
.mk-jenis-ikon.is-hebahan      { background: #FFF7ED; color: #C2410C; }
.mk-jenis-ikon.is-cenderamata  { background: #FEFCE8; color: #A16207; }
.mk-jenis-ikon.is-grafik       { background: #F5F3FF; color: #6D28D9; }
.mk-jenis-ikon.is-isbn         { background: #F0FDFA; color: #0F766E; }
.mk-jenis-ikon.is-siaran       { background: #F1F5F9; color: #334155; }

.mk-sel-acara { min-width: 10rem; max-width: 20rem; }
.table-mk .col-action { position: sticky; right: 0; background: var(--atom-card); box-shadow: -1px 0 0 var(--atom-border-subtle); }

/* Baris yang memerlukan tindakan peranan semasa */
.table-mk tr > td:first-child { border-left: 3px solid transparent; }
.table-mk tr.is-perlu > td:first-child { border-left-color: var(--atom-warning); }
.table-mk tr.is-perlu > td,
.table-mk tr.is-perlu > td.col-action { background: #FFFBEB; }

/* --- Dashboard Pentadbir UKK ------------------------------------------- */
.mk-stat {
  display: block; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; transition: border-color var(--atom-transition), box-shadow var(--atom-transition);
}
.mk-stat:hover { border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-sm); }
.mk-stat:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.mk-stat.is-aktif { border-color: var(--atom-primary); box-shadow: 0 0 0 1px var(--atom-primary); }
.mk-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .mk-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .mk-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }


.mk-pegawai { display: inline-flex; align-items: center; gap: .625rem; min-width: 0; }
.mk-pegawai > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-pegawai-nama { font-weight: 600; color: var(--atom-text); }
.mk-pegawai-peranan { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* --- Borang dinamik ----------------------------------------------------- */
.mk-baca {
  min-height: 2.375rem; padding: .5rem .75rem; border-radius: var(--atom-radius);
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border-subtle);
  font-weight: 500; color: var(--atom-text);
}
.mk-jenis-info {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem;
  border-radius: var(--atom-radius); background: var(--atom-primary-light); border: 1px solid var(--atom-primary-soft);
}

.mk-masuk .mk-seksyen { animation: mkMasuk .32s ease both; }
.mk-masuk .mk-seksyen:nth-child(2) { animation-delay: .05s; }
.mk-masuk .mk-seksyen:nth-child(3) { animation-delay: .1s; }
@keyframes mkMasuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-masuk .mk-seksyen { animation: none; } }

.mk-tanda { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.mk-tanda-item { padding-top: .625rem; padding-bottom: .625rem; margin: 0; cursor: pointer; }

.mk-kad-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .625rem; }
.mk-kad-pilihan { position: relative; margin: 0; cursor: pointer; }
.mk-kad-pilihan input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mk-kad-pilihan-isi {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .5rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card);
  font-size: var(--atom-fs-sm); font-weight: 600; text-align: center; color: var(--atom-text);
  transition: border-color var(--atom-transition), background var(--atom-transition);
}
.mk-kad-pilihan-isi .bi { font-size: 1.5rem; color: var(--atom-text-muted); }
.mk-kad-pilihan:hover .mk-kad-pilihan-isi { border-color: var(--atom-border-strong); background: var(--atom-surface-alt); }
.mk-kad-pilihan input:checked + .mk-kad-pilihan-isi { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: 0 0 0 1px var(--atom-primary); }
.mk-kad-pilihan input:checked + .mk-kad-pilihan-isi .bi { color: var(--atom-primary); }
.mk-kad-pilihan input:focus-visible + .mk-kad-pilihan-isi { box-shadow: var(--atom-shadow-focus); }

.mk-seksyen-5w1h .form-label { font-weight: 600; }

.mk-borang-kaki .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.mk-borang-butang { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) { .mk-borang-butang { width: 100%; flex-direction: column-reverse; } .mk-borang-butang .btn { width: 100%; } }

.mk-klik { padding: 0; cursor: zoom-in; }

/* --- Kalendar jurufoto -------------------------------------------------- */
.mk-kal-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mk-kal-bulan { font-weight: 600; font-size: var(--atom-fs-md); }
.mk-kal-hari, .mk-kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.mk-kal-hari span { text-align: center; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); padding: .25rem 0; }
.mk-kal-sel {
  position: relative; aspect-ratio: 1 / 1; min-height: 2.25rem; display: grid; place-items: center;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-card);
  font: inherit; font-size: var(--atom-fs-sm); color: var(--atom-text); padding: 0;
  transition: border-color var(--atom-transition), background var(--atom-transition);
}
.mk-kal-sel.is-kosong { border: 0; background: transparent; }
.mk-kal-sel.is-tersedia { cursor: pointer; background: var(--atom-success-light); border-color: #CDEBD8; }
.mk-kal-sel.is-tersedia:hover { border-color: var(--atom-success); }
.mk-kal-sel.is-ditempah { background: var(--atom-danger-light); border-color: #F7D4D4; color: var(--atom-danger); cursor: not-allowed; }
.mk-kal-sel.is-lepas { background: var(--atom-surface-alt); color: var(--atom-text-muted); cursor: not-allowed; opacity: .7; }
.mk-kal-sel.is-hari-ini .mk-kal-no { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.mk-kal-sel.is-dipilih { background: var(--atom-info); border-color: var(--atom-info); color: #fff; font-weight: 700; }
.mk-kal-sel:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.mk-kal-tanda { position: absolute; top: 2px; right: 4px; font-size: .625rem; }

.mk-kal-petunjuk { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.mk-kal-petunjuk span { display: inline-flex; align-items: center; gap: .375rem; }
.mk-kal-titik { width: .75rem; height: .75rem; border-radius: 3px; border: 1px solid; display: inline-block; }
.mk-kal-titik.is-tersedia { background: var(--atom-success-light); border-color: var(--atom-success); }
.mk-kal-titik.is-ditempah { background: var(--atom-danger-light); border-color: var(--atom-danger); }
.mk-kal-titik.is-dipilih { background: var(--atom-info); border-color: var(--atom-info); }
.mk-kal-titik.is-lepas { background: var(--atom-surface-alt); border-color: var(--atom-border-strong); }

.mk-kal-pilihan {
  display: flex; align-items: center; gap: .5rem; padding: .75rem .875rem; border-radius: var(--atom-radius);
  border: 1px dashed var(--atom-border-strong); font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
}
.mk-kal-pilihan.is-dipilih { border-style: solid; border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-text); }
.mk-kal-pilihan.is-dipilih .bi { color: var(--atom-primary); }

.mk-kal-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 16rem; overflow-y: auto; }
.mk-kal-senarai li { display: flex; gap: .625rem; padding: .5rem .625rem; border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); }
.mk-kal-senarai-tarikh { flex: 0 0 3.75rem; font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-danger); }
.mk-kal-senarai-teks { display: flex; flex-direction: column; min-width: 0; font-size: var(--atom-fs-sm); line-height: 1.3; }
.mk-kal-senarai-teks span { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* --- Butiran: 5W1H ------------------------------------------------------ */
.mk-5w1h { display: grid; gap: .75rem; }
@media (min-width: 768px) { .mk-5w1h { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-5w1h-item { display: flex; gap: .75rem; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.mk-5w1h-huruf {
  flex: 0 0 auto; min-width: 3.5rem; height: 1.75rem; display: grid; place-items: center; padding: 0 .5rem;
  border-radius: var(--atom-radius-pill); background: var(--atom-primary); color: #fff; font-size: var(--atom-fs-xs); font-weight: 700;
}
.mk-5w1h-label { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.mk-5w1h-nilai { font-size: var(--atom-fs-sm); color: var(--atom-text); }

/* --- Panel tindakan (Pentadbir & pegawai) ------------------------------- */
.mk-kad-tindakan { border: 2px solid var(--atom-primary-soft); box-shadow: var(--atom-shadow-md); scroll-margin-top: 5rem; }
.mk-kad-tindakan > .card-header { background: var(--atom-primary-light); }
.mk-panel-butang { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-kad-hasil { border-color: #CDEBD8; }

.mk-pilih-pegawai { display: grid; gap: .5rem; }
@media (min-width: 768px) { .mk-pilih-pegawai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-pegawai-pilihan { position: relative; margin: 0; cursor: pointer; }
.mk-pegawai-pilihan input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mk-pegawai-pilihan-isi {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card);
}
.mk-pegawai-pilihan:hover .mk-pegawai-pilihan-isi { border-color: var(--atom-border-strong); }
.mk-pegawai-pilihan input:checked + .mk-pegawai-pilihan-isi { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: 0 0 0 1px var(--atom-primary); }
.mk-pegawai-pilihan input:focus-visible + .mk-pegawai-pilihan-isi { box-shadow: var(--atom-shadow-focus); }
.mk-pegawai-pilihan.is-sibuk { cursor: not-allowed; }
.mk-pegawai-pilihan.is-sibuk .mk-pegawai-pilihan-isi { opacity: .6; background: var(--atom-surface-alt); }
.mk-pegawai-status { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }

/* --- Tugasan Saya ------------------------------------------------------- */
.mk-sebagai { display: flex; align-items: center; gap: .5rem; }
.mk-sebagai .form-label { white-space: nowrap; font-size: var(--atom-fs-sm); }
.mk-sebagai .form-select { min-width: 15rem; }
.mk-profil-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mk-boleh { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.mk-boleh li {
  display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .625rem;
  border-radius: var(--atom-radius-pill); background: var(--atom-surface-alt); border: 1px solid var(--atom-border-subtle);
  font-size: var(--atom-fs-xs); color: var(--atom-text-secondary);
}
.mk-boleh .bi { color: var(--atom-success); }
@media (max-width: 575.98px) {
  .mk-sebagai { flex-direction: column; align-items: stretch; width: 100%; }
  .mk-sebagai .form-select { min-width: 0; }
}


/* ==========================================================================
   eAdmin — Galeri Gambar (repositori gambar UKK)
   ========================================================================== */
.gl-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: .75rem 1.25rem; border-top: 1px solid var(--atom-border-subtle);
}
.gl-toolbar .form-select { width: auto; min-width: 10rem; }
.gl-toolbar [data-papar].active { background: var(--atom-primary-light); border-color: var(--atom-primary); color: var(--atom-primary); }

.gl-ganti { display: grid; place-items: center; width: 100%; height: 100%; background: var(--atom-surface-alt); color: var(--atom-text-muted); font-size: 1.5rem; }

/* --- Kad album ---------------------------------------------------------- */
.gl-grid-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.gl-album {
  display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg);
  box-shadow: var(--atom-shadow-xs); transition: box-shadow var(--atom-transition), transform var(--atom-transition), border-color var(--atom-transition);
}
.gl-album:hover { box-shadow: var(--atom-shadow-md); transform: translateY(-2px); border-color: var(--atom-border-strong); color: inherit; }
.gl-album:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
@media (prefers-reduced-motion: reduce) { .gl-album:hover { transform: none; } }
.gl-album-kulit { position: relative; }
.gl-mozek { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 10; background: var(--atom-border-subtle); }
.gl-mozek img, .gl-mozek .gl-ganti { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-mozek .is-besar { grid-row: span 2; }
.gl-mozek.is-satu { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.gl-mozek.is-satu .is-besar { grid-row: auto; }
.gl-album-kira {
  position: absolute; right: .625rem; bottom: .625rem; display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: var(--atom-radius-pill); background: rgba(15, 23, 42, .72); color: #fff;
  font-size: var(--atom-fs-xs); font-weight: 600;
}
.gl-album-kulit .gl-akses { position: absolute; left: .625rem; top: .625rem; }
.gl-album-isi { padding: .875rem 1rem 1rem; display: flex; flex-direction: column; gap: .375rem; flex: 1 1 auto; }
.gl-album-tajuk { font-size: var(--atom-fs-md); font-weight: 600; margin: 0; line-height: 1.35; color: var(--atom-text); }
.gl-album-meta { display: flex; align-items: center; gap: .375rem; margin: 0; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); min-width: 0; }
.gl-titik { margin: 0 .125rem; }
.gl-album-kaki { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: .375rem; }

.gl-akses {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .5rem; border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 600; border: 1px solid;
}
.gl-akses.is-umum { background: var(--atom-success-light); color: var(--atom-success); border-color: #CDEBD8; }
.gl-akses.is-dalaman { background: var(--atom-warning-light); color: #92400E; border-color: #FDE7B0; }

/* --- Grid gambar -------------------------------------------------------- */
.gl-grid-bungkus { padding: 1.25rem; border-top: 1px solid var(--atom-border-subtle); }
.gl-grid-gambar { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.gl-jubin {
  position: relative; margin: 0; border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  overflow: hidden; background: var(--atom-card); transition: border-color var(--atom-transition), box-shadow var(--atom-transition);
}
.gl-jubin:hover { box-shadow: var(--atom-shadow-sm); }
.gl-jubin.is-dipilih { border-color: var(--atom-primary); box-shadow: 0 0 0 2px var(--atom-primary); }
.gl-jubin-lihat { display: block; width: 100%; padding: 0; border: 0; background: var(--atom-surface-alt); cursor: zoom-in; }
.gl-jubin-lihat img, .gl-jubin-lihat .gl-ganti { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gl-jubin-lihat:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--atom-primary); }
.gl-jubin-pilih {
  position: absolute; top: .5rem; left: .5rem; width: 1.625rem; height: 1.625rem; margin: 0;
  display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--atom-border-strong); color: transparent;
  opacity: 0; transition: opacity var(--atom-transition);
}
.gl-jubin-pilih input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.gl-jubin:hover .gl-jubin-pilih, .gl-jubin-pilih:focus-within, .gl-jubin.is-dipilih .gl-jubin-pilih { opacity: 1; }
.gl-jubin-pilih:focus-within { box-shadow: var(--atom-shadow-focus); }
.gl-jubin.is-dipilih .gl-jubin-pilih { background: var(--atom-primary); border-color: var(--atom-primary); color: #fff; }
@media (hover: none) { .gl-jubin-pilih { opacity: 1; } }
.gl-jubin figcaption { padding: .5rem .625rem; display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.gl-jubin-nama { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-jubin-album { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-jubin-album:hover { color: var(--atom-primary); }

/* --- Bar pilihan (lekat di bawah skrin) -------------------------------- */
.gl-bar-pilih {
  position: sticky; bottom: 1rem; z-index: 20; margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-radius: var(--atom-radius-lg);
  background: var(--atom-card); border: 1px solid var(--atom-primary); box-shadow: var(--atom-shadow-lg);
}

/* --- Halaman album ------------------------------------------------------ */
.gl-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .375rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.gl-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.gl-meta .bi { color: var(--atom-text-muted); }
.gl-album-info { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.gl-album-info-teks { flex: 1 1 22rem; min-width: 0; }
.gl-album-info-sumber { flex: 1 1 20rem; }
.gl-tag {
  display: inline-block; padding: .125rem .5rem; border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border-subtle);
  font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); text-decoration: none;
}
.gl-tag:hover { border-color: var(--atom-primary); color: var(--atom-primary); }

/* --- Lightbox ----------------------------------------------------------- */
.gl-lb { display: grid; gap: 1rem; }
@media (min-width: 992px) { .gl-lb { grid-template-columns: minmax(0, 1fr) 18rem; } }
.gl-lb-pentas {
  position: relative; display: grid; place-items: center; min-height: 20rem; border-radius: var(--atom-radius);
  background: #0F172A; overflow: hidden;
}
.gl-lb-pentas img { width: 100%; height: 100%; max-height: 68vh; object-fit: contain; display: block; }
.gl-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .9); color: var(--atom-text);
  box-shadow: var(--atom-shadow-md); font-size: 1.125rem;
}
.gl-lb-nav.is-kiri { left: .75rem; }
.gl-lb-nav.is-kanan { right: .75rem; }
.gl-lb-nav:disabled { opacity: .35; cursor: default; }
.gl-lb-nav:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.gl-lb-meta .detail-row { padding: .5rem 0; }
.gl-lb-meta .detail-label { flex: 0 0 100%; }
.gl-mod-pilih { display: grid; gap: .5rem; }
@media (min-width: 576px) { .gl-mod-pilih { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   Media Kreatif — Permohonan Jurufoto (aliran ketersediaan & hantaran)
   ========================================================================== */
/* Jurufoto Tidak Tersedia — amaran, BUKAN penolakan */
.badge-mk-sendiri { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }

/* Kalendar: tarikh terhad / tidak tersedia masih boleh dipilih */
.mk-kal-sel.is-terhad { cursor: pointer; background: var(--atom-warning-light); border-color: #FDE7B0; color: #92400E; }
.mk-kal-sel.is-terhad:hover { border-color: var(--atom-warning); }
.mk-kal-sel.is-ditempah { cursor: pointer; }
.mk-kal-sel.is-ditempah:hover { border-color: var(--atom-danger); }
.mk-kal-sel.is-dipilih { background: var(--atom-info); border-color: var(--atom-info); color: #fff; }
.mk-kal-titik.is-terhad { background: var(--atom-warning-light); border-color: var(--atom-warning); }
.mk-kal-amaran { display: inline-flex; gap: .375rem; margin-top: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-danger); }
.mk-kal-amaran.is-terhad { color: #92400E; }
.mk-kal-pilihan { align-items: flex-start; }

/* Ketersediaan jurufoto (Pentadbir UKK) */
.mk-jf-acara { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: .875rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.mk-jf-acara span { display: inline-flex; align-items: center; gap: .375rem; }
.mk-jf-acara .bi { color: var(--atom-primary); }
.mk-jf-pilihan { flex-direction: column; align-items: stretch; }
.mk-jf-info { display: flex; gap: .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.mk-pegawai-pilihan.is-sibuk .mk-jf-info { color: var(--atom-danger); }

/* Tab jenis Semakan Permohonan — lencana = perlu tindakan Pentadbir.
   8 tab: jarak dirapatkan supaya muat satu baris pada desktop lebar;
   skrin lebih kecil membalut ke baris kedua (bukan tatal tersembunyi). */
.mk-tab-jenis { gap: 0; flex-wrap: wrap; }
.mk-tab-jenis .nav-link { padding-inline: .625rem; font-size: var(--atom-fs-sm); }
.mk-tab-jenis .nav-link .badge-count.mk-tab-perlu,
.mk-tab-jenis .nav-link.active .badge-count.mk-tab-perlu { background: var(--atom-danger-light); color: var(--atom-danger); }

/* Kalendar tugasan jurufoto (Pelaksanaan Tugasan) */
.mk-kalt { padding: 1rem 1.25rem 1.25rem; }
.mk-kalt-kepala { display: flex; align-items: center; gap: .25rem; margin-bottom: .75rem; }
.mk-kalt-bulan { min-width: 10rem; text-align: center; font-weight: 600; font-size: var(--atom-fs-lg); color: var(--atom-text); }
.mk-kalt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--atom-border);
                border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); overflow: hidden; }
.mk-kalt-hari { background: var(--atom-surface-sunken); padding: .375rem .5rem; font-size: var(--atom-fs-xs); font-weight: 600;
                text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.mk-kalt-sel { background: var(--atom-card); min-height: 6.5rem; padding: .375rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mk-kalt-sel.is-kosong { background: var(--atom-surface-sunken); }
.mk-kalt-sel.is-lepas .mk-kalt-no { color: var(--atom-text-muted); }
.mk-kalt-no { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); }
.mk-kalt-sel.is-hari-ini .mk-kalt-no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                                        background: var(--atom-primary); color: #fff; }
.mk-kalt-acara { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
                 padding: .125rem .375rem; border-radius: .25rem; border: 1px solid transparent; font-size: var(--atom-fs-xs);
                 font-weight: 500; line-height: 1.35; text-decoration: none; }
a.mk-kalt-acara:hover { filter: brightness(.96); text-decoration: underline; }
.mk-kalt-acara.is-dalaman { background: var(--atom-info-light); color: var(--atom-info); border-color: var(--atom-info-light); }
.mk-kalt-acara.is-lain { background: transparent; color: var(--atom-text-muted); border: 1px dashed var(--atom-border-strong); }
.mk-kalt-masa { font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-kalt-agenda { display: none; }
.mk-kalt-agenda-hari { padding: .625rem 0; border-bottom: 1px solid var(--atom-border); display: grid; gap: .25rem; }
.mk-kalt-agenda-tarikh { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.mk-kalt-petunjuk { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.mk-kalt-petunjuk span { display: inline-flex; align-items: center; gap: .375rem; }
.mk-kalt-titik { width: .75rem; height: .75rem; border-radius: .1875rem; border: 1px solid currentColor; display: inline-block; }
.mk-kalt-titik.is-dalaman { background: var(--atom-info-light); border-color: var(--atom-info); }
.mk-kalt-titik.is-lain { border: 1px dashed var(--atom-border-strong); }
@media (max-width: 767.98px) {
  .mk-kalt { padding-inline: 1rem; }
  .mk-kalt-grid { display: none; }
  .mk-kalt-agenda { display: block; }
  .mk-kalt-acara { white-space: normal; }
}

/* Ketersediaan jurufoto ikut masa & jana caption (borang pemohon) */
.mk-jf-semak { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .25rem; }
.mk-jf-semak li { display: flex; align-items: flex-start; gap: .5rem; }
.mk-jf-semak li.is-tersedia .bi { color: var(--atom-success); }
.mk-jf-semak li.is-sibuk .bi { color: var(--atom-danger); }
.mk-jf-semak .bi { margin-top: .2rem; }

/* Langkah semakan gambar */
.mk-langkah { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mk-langkah li { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-muted); }
.mk-langkah li span {
  width: 1.625rem; height: 1.625rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--atom-border-strong); font-size: var(--atom-fs-xs);
}
.mk-langkah li.is-aktif { color: var(--atom-text); }
.mk-langkah li.is-aktif span { background: var(--atom-primary); border-color: var(--atom-primary); color: #fff; }
.mk-langkah li.is-lepas span { background: var(--atom-success-light); border-color: var(--atom-success); color: var(--atom-success); }

.mk-pilih-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem;
  padding: .5rem .75rem; border-radius: var(--atom-radius); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm);
}
.mk-grid-pilih { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mk-jubin .gl-jubin-lihat { position: relative; }
.mk-jubin-zum {
  position: absolute; right: .375rem; bottom: .375rem; width: 1.625rem; height: 1.625rem; display: grid; place-items: center;
  border-radius: 6px; background: rgba(15, 23, 42, .65); color: #fff; font-size: .75rem; opacity: 0; transition: opacity var(--atom-transition);
}
.mk-jubin:hover .mk-jubin-zum { opacity: 1; }
.mk-jubin .gl-jubin-pilih { opacity: 1; }

.mk-caption {
  display: flex; gap: .625rem; padding: .875rem 1rem; border-radius: var(--atom-radius);
  background: var(--atom-primary-light); border: 1px solid var(--atom-primary-soft);
  font-size: var(--atom-fs-sm); color: var(--atom-text); white-space: pre-line;
}
.mk-caption .bi { color: var(--atom-primary); font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }

.mk-dipilih-jalur { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-dipilih-item {
  width: 5.5rem; aspect-ratio: 4 / 3; padding: 0; border: 2px solid var(--atom-primary); border-radius: var(--atom-radius-sm);
  overflow: hidden; background: var(--atom-surface-alt); cursor: zoom-in;
}
.mk-dipilih-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-dipilih-video { display: grid; place-items: center; background: var(--atom-surface-alt); color: var(--atom-text-muted); font-size: 1.5rem; }

/* Hantaran media sosial (selesai) */
.mk-hantaran-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mk-platform {
  display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border); font-size: var(--atom-fs-xs); font-weight: 600;
}
.mk-pautan { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); overflow-wrap: anywhere; }

/* --- Jadual Media Kreatif: muat tanpa skrol mendatar ---------------------
   Tajuk lajur boleh balut dua baris dan lencana status boleh balut, supaya
   jadual muat pada skrin komputer riba (1280px) tanpa lajur tersorok di
   belakang lajur Tindakan yang melekat. */
.table-mk thead th { white-space: normal; padding: .6875rem .625rem; line-height: 1.3; vertical-align: bottom; }
.table-mk tbody td { padding: .75rem .625rem; }
.table-mk tr > :first-child { padding-left: 1rem; }
.table-mk tr > .col-action { padding-right: 1rem; }
.table-mk .mk-sel-status { min-width: 7rem; }
.table-mk .mk-sel-status .badge-atom { white-space: normal; text-align: left; }
.table-mk .mk-sel-lokasi { min-width: 6rem; }
.table-mk .mk-jenis { white-space: normal; min-width: 6rem; }
.table-mk .mk-sel-acara { min-width: 8rem; }
.table-mk .mk-sel-masa { min-width: 4.5rem; }
.table-mk .mk-sel-jenis { display: block; margin-bottom: .25rem; }

/* Butang muat turun pada gambar galeri (Media Kreatif) */
.aa-gambar { position: relative; }
.mk-gambar-muat-turun {
  position: absolute; top: .375rem; right: .375rem; width: 1.875rem; height: 1.875rem;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, .92); color: var(--atom-text); box-shadow: var(--atom-shadow-sm);
  opacity: 0; transition: opacity var(--atom-transition);
}
.aa-gambar:hover .mk-gambar-muat-turun, .mk-gambar-muat-turun:focus-visible { opacity: 1; }
.mk-gambar-muat-turun:hover { color: var(--atom-primary); }
.mk-gambar-muat-turun:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
@media (hover: none) { .mk-gambar-muat-turun { opacity: 1; } }

/* Rekod hantaran media sosial (manual) */
.mk-rekod-bahagian { padding: 1rem; margin-top: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.mk-rekod-tajuk { display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; font-size: var(--atom-fs-md); font-weight: 600; }
.mk-rekod-tajuk span {
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--atom-primary-light); color: var(--atom-primary); font-size: var(--atom-fs-xs); font-weight: 700;
}
.mk-pautan-senarai { display: grid; gap: .5rem; }
.mk-pautan-baris { display: flex; align-items: flex-start; gap: .625rem; }
.mk-pautan-baris .mk-platform { flex: 0 0 7.5rem; justify-content: flex-start; margin-top: .25rem; }
.mk-pautan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mk-pautan-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ==========================================================================
   eAdmin — Data Kesedaran Sinaran (Outreach)
   Warna jenis sama dengan AtomKSPapar.warna (carta), ikut kumpulan:
   Lawatan biru, Pameran jingga, Taklimat biru muda, Kunjungan Hormat
   (in/out) hijau, SLU ungu, Kursus kuning tua.
   ========================================================================== */
.ks-jenis { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); line-height: 1.3; }
.ks-jenis-ikon {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: var(--atom-radius-sm); font-size: .875rem;
  background: rgba(42, 111, 176, .12); color: #2A6FB0;
}
.ks-jenis-ikon.is-besar { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; border-radius: var(--atom-radius); }
.ks-jenis-ikon.is-pameran { background: rgba(194, 65, 12, .12); color: #C2410C; }
.ks-jenis-ikon.is-taklimat { background: rgba(63, 161, 214, .14); color: #2C86B8; }
.ks-jenis-ikon.is-kh-in, .ks-jenis-ikon.is-kh-out { background: rgba(31, 138, 112, .12); color: #1F8A70; }
.ks-jenis-ikon.is-slu { background: rgba(124, 92, 191, .12); color: #7C5CBF; }
.ks-jenis-ikon.is-kursus { background: rgba(176, 125, 18, .14); color: #946A0F; }
.ks-jenis-ikon.is-lain { background: rgba(100, 116, 139, .14); color: #64748B; }

/* Kad statistik — satu baris pada skrin lebar, membalut secara automatik */
.ks-stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.ks-stat { display: block; color: inherit; text-decoration: none; }
.ks-stat.is-klik:hover { color: inherit; border-color: var(--atom-primary); }
.ks-stat.is-klik:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.ks-stat .stat-meta span { overflow: hidden; text-overflow: ellipsis; }
.ks-stat-ikon.is-lawatan   { background: rgba(42, 111, 176, .12); color: #2A6FB0; }
.ks-stat-ikon.is-pameran   { background: rgba(194, 65, 12, .12); color: #C2410C; }
.ks-stat-ikon.is-kunjungan { background: rgba(31, 138, 112, .12); color: #1F8A70; }

/* Senarai legenda donut */
.ks-legend-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ks-legend-senarai li { display: flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); }
.ks-legend-nama { flex: 1 1 auto; color: var(--atom-text-secondary); }
.ks-legend-nilai { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--atom-text); }
.chart-legend-swatch.is-garis { height: 3px; width: 16px; border-radius: 2px; }

/* Jadual senarai */
.ks-jadual td { vertical-align: top; }
.ks-jadual thead th { white-space: normal; }
.ks-jadual thead th, .ks-jadual tbody td { padding-left: .625rem; padding-right: .625rem; }
.ks-jadual .badge-atom i { display: none; }
.ks-jadual td:nth-child(7) .ks-sel-sub { max-width: 6rem; }
.ks-sel-sub { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); font-weight: 400;
              max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-sel-tajuk { min-width: 10.5rem; }
.ks-pautan-tajuk { font-weight: 600; color: var(--atom-text); }
.ks-pautan-tajuk:hover { color: var(--atom-primary); }
.ks-sel-objektif { display: -webkit-box; max-width: 22rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                   margin-top: .25rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ks-sel-lokasi { min-width: 7rem; max-width: 11rem; font-size: var(--atom-fs-sm); }
.ks-jadual .ks-jenis { min-width: 6rem; }
.ks-aksi { display: flex; gap: .375rem; justify-content: flex-end; flex-wrap: nowrap; }
.ks-jadual tr.is-tidak-aktif td { background: var(--atom-surface-alt); }
.ks-jadual tr.is-tidak-aktif .ks-pautan-tajuk { color: var(--atom-text-secondary); }
mark.ks-serlah { padding: 0 .125rem; border-radius: 3px; background: var(--atom-warning-light); color: inherit; }

/* Borang */
.ks-pemisah { margin: .25rem 0; border-color: var(--atom-border); opacity: 1; }
.ks-jenis-pratonton { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.ks-jenis-pratonton strong { display: block; font-size: var(--atom-fs-sm); }
.ks-jenis-pratonton-label { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ks-status-pilih { display: grid; gap: .5rem; }
.ks-borang-kaki .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.ks-borang-butang { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) { .ks-borang-butang { width: 100%; flex-direction: column-reverse; } .ks-borang-butang .btn { width: 100%; } }

/* Butiran */
.ks-fail .ks-fail-aksi { display: flex; gap: .375rem; flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .ks-fail { flex-wrap: wrap; }
  .ks-fail .ks-fail-aksi { width: 100%; }
  .ks-fail .ks-fail-aksi .btn { flex: 1 1 0; }
}
.ks-ringkas .card-body { display: grid; gap: .875rem; }
.ks-ringkas-item { display: flex; align-items: flex-start; gap: .75rem; }
.ks-ringkas-item > i { width: 1.25rem; margin-top: .125rem; color: var(--atom-text-muted); }
.ks-ringkas-label { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ks-ringkas-nilai { display: block; font-weight: 600; }
.ks-jejak { display: inline-flex; align-items: center; gap: .5rem; }
.ks-jejak-nama { font-weight: 500; }
.ks-detail-tindan .detail-row, .ks-pratonton-meta .detail-row { gap: .125rem; padding: .625rem 0; }
.ks-detail-tindan .detail-label, .ks-pratonton-meta .detail-label { flex: 0 0 100%; }

/* Pratonton dokumen (mockup) */
.ks-pratonton { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 767.98px) { .ks-pratonton { grid-template-columns: 1fr; } }
.ks-pratonton-kertas {
  position: relative; aspect-ratio: 1 / 1.3; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .625rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: #fff; box-shadow: var(--atom-shadow-sm);
}
.ks-pratonton-kop { display: flex; align-items: center; gap: .625rem; padding-bottom: .625rem; border-bottom: 2px solid var(--atom-primary); }
.ks-pratonton-kop i { font-size: 1.5rem; color: var(--atom-primary); }
.ks-pratonton-kop strong { display: block; font-size: .75rem; letter-spacing: .04em; color: #172033; }
.ks-pratonton-kop span { display: block; font-size: .625rem; color: #7A879B; }
.ks-pratonton-tajuk { margin: .5rem 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-align: center; color: #172033; }
.ks-pratonton-garis { display: block; height: 6px; border-radius: 3px; background: #E7ECF2; }
.ks-pratonton-tanda {
  position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: 999px; background: #F1F4F8; font-size: .6875rem; color: #7A879B;
}

/* Statistik */
.ks-bar-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ks-bar-senarai li.is-redup { opacity: .4; }
.ks-bar-kepala { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; font-size: var(--atom-fs-sm); }
.ks-bar-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--atom-text-secondary); }
.ks-bar-nilai { font-weight: 700; font-variant-numeric: tabular-nums; }
.ks-bar-trek { height: 10px; border-radius: 999px; background: var(--atom-surface-sunken); overflow: hidden; }
.ks-bar-isi { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.ks-bar-sub { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ks-jadual-ringkas td, .ks-jadual-ringkas th { font-variant-numeric: tabular-nums; }
.ks-jadual-ringkas tr.is-serlah td { background: var(--atom-primary-light); font-weight: 600; }
.ks-jadual-ringkas tfoot th { border-top: 2px solid var(--atom-border-strong); font-weight: 700; color: var(--atom-text); }
.ks-laporan-skop {
  display: flex; gap: .75rem; padding: .75rem 1rem; border-radius: var(--atom-radius);
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border);
}
.ks-laporan-skop > i { color: var(--atom-primary); margin-top: .125rem; }
.ks-laporan-skop strong { display: block; font-size: var(--atom-fs-sm); }
.ks-laporan-skop span { display: block; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

/* --- Data Kesedaran Sinaran: medan baharu (PIC, status, negeri) --- */
.ks-sel-meta { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ks-sel-meta i { margin-right: .125rem; }
.ks-jadual tr.is-redup td { background: var(--atom-surface-alt); }
.ks-jadual tr.is-redup .ks-pautan-tajuk { color: var(--atom-text-secondary); }

.ks-jejak-jalur {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding: .625rem 1rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
}
.ks-jejak-jalur > i { color: var(--atom-text-muted); }

/* Butiran: status & PIC */
.ks-status-label { display: block; margin-bottom: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.ks-pic { display: flex; align-items: center; gap: 1rem; }
.ks-pic-isi { min-width: 0; }
.ks-pic-isi .ks-status-label { margin-bottom: .125rem; }
.ks-pic-nama { display: block; font-size: var(--atom-fs-md); }
.ks-pic-tel { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: var(--atom-fs-sm); }

/* ==========================================================================
   Kepuasan Pelanggan (Star Rating + Survey Form)
   Skala kepuasan divergen — sama dengan AtomKPPapar.SKALA_WARNA:
   #A8361A · #E8875C · #C8C8C3 (neutral) · #4F8BCB · #1F4F86.
   Bintang paparan ambar #E8A33D (bukan warna data carta).
   ========================================================================== */
.kp-bintang { display: inline-flex; gap: .125rem; color: #E8A33D; font-size: .875rem; line-height: 1; white-space: nowrap; }
.kp-bintang.is-besar { font-size: 1.25rem; gap: .25rem; }
.kp-bintang .is-kosong { color: var(--atom-border-strong); }

.kp-skala-cip { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--atom-fs-sm); }
.kp-skala-titik { flex: 0 0 auto; width: .625rem; height: .625rem; border-radius: 50%; }

.kp-jenis {
  display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border-radius: var(--atom-radius-pill);
  font-size: var(--atom-fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.kp-jenis.is-rating { background: #FDF6E9; color: #8A5A0B; border-color: #F3DFB8; }
.kp-jenis.is-survey { background: var(--atom-accent-light); color: var(--atom-accent); border-color: #D3E1F1; }
.kp-jenis.is-kuiz { background: var(--atom-info-light); color: var(--atom-info); border-color: var(--atom-info-light); }

/* --- Popup Star Rating --- */
.atom-modal .modal-md { max-width: 32rem; }
.kp-rating { display: grid; gap: 1rem; }
.kp-rating-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: .75rem .875rem;
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt);
}
.kp-rating-info dt { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); margin-bottom: .125rem; }
.kp-rating-info dd { margin: 0; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); line-height: 1.35; }
.kp-rating-info dd > i { margin-right: .375rem; color: var(--atom-primary); }
.kp-rating-ruj { display: block; font-size: var(--atom-fs-xs); font-weight: 400; color: var(--atom-text-muted); }
@media (max-width: 575.98px) { .kp-rating-info { grid-template-columns: minmax(0, 1fr); } }
.kp-rating-nota {
  display: flex; gap: .5rem; padding: .625rem .75rem; border-radius: var(--atom-radius);
  background: var(--atom-info-light); color: #12507F; font-size: var(--atom-fs-sm);
}
.kp-rating-nota i { margin-top: .0625rem; }
.kp-rating-soalan { margin: .25rem 0 0; text-align: center; font-size: var(--atom-fs-lg); font-weight: 600; color: var(--atom-text); }
.kp-bintang-input { display: flex; justify-content: center; gap: .375rem; }
.kp-bintang-btn {
  width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--atom-border-strong); font-size: 2.125rem; line-height: 1; cursor: pointer;
  transition: transform var(--atom-transition), color var(--atom-transition);
}
.kp-bintang-btn:hover { transform: scale(1.12); }
.kp-bintang-btn:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.kp-bintang-btn.is-aktif { color: #E8A33D; }
.kp-bintang-label { margin: -.375rem 0 0; min-height: 1.25rem; text-align: center; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.kp-bintang-label.is-pilih { color: var(--atom-text); }
.kp-rating-komen .form-text { margin-top: .25rem; }
.kp-rating-terima { padding: 1rem 0 .5rem; text-align: center; }
.kp-rating-terima-ikon {
  width: 64px; height: 64px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--atom-success-light); color: var(--atom-success); font-size: 2rem;
}
.kp-rating-terima-tajuk { margin: 0 0 .75rem; font-size: var(--atom-fs-xl); font-weight: 700; }
.kp-rating-terima-bintang { margin-bottom: .75rem; }
.kp-rating-terima-teks { max-width: 24rem; margin: 0 auto; color: var(--atom-text-secondary); font-size: var(--atom-fs-sm); }

/* --- Purata hero & pecahan bintang --- */
.kp-purata { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.kp-purata-nombor { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--atom-text); font-variant-numeric: tabular-nums; }
.kp-purata-nombor small { font-size: var(--atom-fs-xl); font-weight: 600; color: var(--atom-text-muted); letter-spacing: 0; }
.kp-purata-sub { display: block; margin-top: .375rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.kp-pecahan { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.kp-pecahan li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 4.75rem; align-items: center; gap: .75rem; font-size: var(--atom-fs-sm); }
.kp-pecahan-label { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--atom-text); white-space: nowrap; }
.kp-pecahan-label .bi { color: #E8A33D; font-size: .75rem; }
.kp-pecahan-nama { margin-left: .375rem; font-weight: 400; color: var(--atom-text-secondary); }
.kp-pecahan-trek { height: 10px; border-radius: 999px; background: var(--atom-surface-sunken); overflow: hidden; }
.kp-pecahan-isi { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.kp-pecahan-nilai { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.kp-pecahan-n { display: inline-block; min-width: 2.25rem; margin-left: .375rem; font-weight: 400; color: var(--atom-text-muted); }
@media (max-width: 575.98px) { .kp-pecahan li { grid-template-columns: 3rem minmax(0, 1fr) 4.5rem; } .kp-pecahan-nama { display: none; } }

/* --- Jalur bertindan 100% (skala / keperluan) --- */
.kp-jalur { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--atom-surface-sunken); }
.kp-jalur.is-kosong { opacity: .6; }
.kp-jalur-seg {
  display: grid; place-items: center; min-width: 0; color: #fff; font-size: .6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; border-right: 2px solid var(--atom-card); overflow: hidden; white-space: nowrap;
}
.kp-jalur-seg:last-child { border-right: 0; }
.kp-jalur-seg.is-cerah { color: #172033; }
.kp-legend-skala { margin-bottom: .75rem; }

.kp-soalan-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; }
.kp-soalan-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .375rem; }
.kp-soalan-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.kp-soalan-tajuk span { margin-right: .375rem; color: var(--atom-text-muted); font-weight: 500; }
.kp-soalan-purata { flex: 0 0 auto; font-size: var(--atom-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.kp-soalan-purata small { font-weight: 400; color: var(--atom-text-muted); }
.kp-soalan-sub { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Purata mengikut modul / fasiliti — bar mendatar satu hue */
.kp-bar-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.kp-bar-senarai li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3.25rem; align-items: center; gap: .75rem; font-size: var(--atom-fs-sm); }
.kp-bar-senarai li.is-redup { opacity: .4; }
.kp-bar-label { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--atom-text-secondary); }
.kp-bar-label > i { flex: 0 0 auto; color: var(--atom-text-muted); }
.kp-bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-bar-label small { flex: 0 0 auto; color: var(--atom-text-muted); }
.kp-bar-trek { position: relative; height: 10px; border-radius: 999px; background: var(--atom-surface-sunken); overflow: hidden; }
.kp-bar-isi { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.kp-bar-nilai { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .kp-bar-senarai li { grid-template-columns: minmax(0, 1fr) 3rem; } .kp-bar-trek { grid-column: 1 / -1; grid-row: 2; } }

/* --- Dashboard: aliran data --- */
.kp-aliran { display: grid; gap: 1rem; }
.kp-aliran-lorong { display: grid; gap: .5rem; }
.kp-aliran-tajuk { display: flex; align-items: center; gap: .5rem; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.kp-aliran-langkah { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.kp-aliran-langkah li {
  display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem; border-radius: var(--atom-radius-pill);
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary);
}
.kp-aliran-langkah li.is-akhir { background: var(--atom-primary-light); border-color: var(--atom-primary-soft); color: var(--atom-primary); font-weight: 600; }
.kp-aliran-langkah li + li::before { content: "\F138"; font-family: "bootstrap-icons"; margin-left: -.25rem; margin-right: .125rem; color: var(--atom-text-muted); font-size: .625rem; }
.kp-terkini .list-atom-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kp-terkini-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; }
@media (max-width: 575.98px) { .kp-terkini .list-atom-aside { display: none; } }

/* --- Senarai --- */
.kp-jadual td { vertical-align: top; }
.kp-jadual thead th { white-space: normal; }
.kp-sel-sub { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-sel-komen { min-width: 12rem; max-width: 22rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-sel-sasaran { min-width: 10rem; }
.kp-skor { display: block; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }
.kp-baharu { margin-left: .375rem; }
mark.kp-serlah { padding: 0 .125rem; border-radius: 3px; background: var(--atom-warning-light); color: inherit; }

/* --- Butiran --- */
.kp-jawapan { list-style: none; margin: 0; padding: 0; }
.kp-jawapan li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid var(--atom-border-subtle); }
.kp-jawapan li:last-child { border-bottom: 0; }
.kp-jawapan-bil { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-surface-sunken); font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-text-secondary); }
.kp-jawapan-soalan { font-size: var(--atom-fs-sm); color: var(--atom-text); }
.kp-jawapan-nilai { text-align: right; font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) { .kp-jawapan li { grid-template-columns: 1.75rem minmax(0, 1fr); } .kp-jawapan-nilai { grid-column: 2; text-align: left; } }
.kp-komen-blok {
  margin: 0; padding: .875rem 1rem; border-left: 3px solid var(--atom-border-strong); border-radius: 0 var(--atom-radius) var(--atom-radius) 0;
  background: var(--atom-surface-alt); color: var(--atom-text); font-size: var(--atom-fs-md); white-space: pre-line;
}
.kp-nilai-hero { display: flex; align-items: center; gap: 1rem; }
.kp-nilai-hero-nombor { font-size: var(--atom-fs-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kp-nilai-hero-label { display: block; margin-top: .25rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

/* --- Simulasi perkhidmatan --- */
.kp-sim-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kp-sim-kad { display: flex; flex-direction: column; gap: .75rem; height: 100%; }
.kp-sim-kepala { display: flex; align-items: center; gap: .75rem; }
.kp-sim-ikon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary); font-size: 1.125rem; }
.kp-sim-nama { display: block; font-weight: 600; line-height: 1.3; }
.kp-sim-sistem { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-sim-kad .btn { margin-top: auto; }

/* --- Laporan (pratonton dokumen) --- */
.kp-laporan-kertas { max-width: 60rem; margin-inline: auto; }
.kp-laporan-kop { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 3px solid var(--atom-primary); }
.kp-laporan-kop img { height: 52px; }
.kp-laporan-kop-teks strong { display: block; font-size: var(--atom-fs-lg); letter-spacing: .02em; }
.kp-laporan-kop-teks span { display: block; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.kp-laporan-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1.5rem; margin-bottom: 1.5rem; font-size: var(--atom-fs-sm); }
.kp-laporan-meta dt { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.kp-laporan-meta dd { margin: 0; font-weight: 600; }
.kp-laporan-seksyen { margin-bottom: 1.75rem; }
.kp-laporan-seksyen:last-child { margin-bottom: 0; }
.kp-laporan-seksyen > h4 { 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: 700; }
.kp-laporan-seksyen > h4 span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--atom-primary); color: #fff; font-size: var(--atom-fs-xs); }
.kp-laporan-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.kp-laporan-ringkas div { padding: .75rem .875rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.kp-laporan-ringkas span { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-laporan-ringkas strong { display: block; margin-top: .125rem; font-size: var(--atom-fs-xl); font-variant-numeric: tabular-nums; }
.kp-laporan-jadual td, .kp-laporan-jadual th { font-variant-numeric: tabular-nums; }
.kp-format-pilih { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.kp-laporan-kosong { padding: 3rem 1rem; }

/* --- Laporan umum eAdmin (kad ringkasan, carta, pecahan) --- */
.kp-laporan-kertas.lap-kertas { max-width: none; }
.lap-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.lap-stat { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.lap-stat-ikon { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.125rem; color: var(--st);
                 background: color-mix(in srgb, var(--st) 12%, transparent); }
.lap-stat-isi { min-width: 0; }
.lap-stat-label { display: block; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.lap-stat-nilai { display: block; font-size: var(--atom-fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--atom-text); }
.lap-stat-sub { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.lap-carta-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; }
.lap-panel { padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.lap-panel-tajuk { margin: 0 0 .75rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.lap-carta { position: relative; height: 260px; }
.lap-nota { margin: .625rem 0 0; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.lap-pecahan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.lap-pecahan-tajuk { margin: 0 0 .5rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.lap-pecahan .table-wrap { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
/* Lebar lajur tetap supaya Bil. dan % segaris merentas semua jadual pecahan */
.lap-pecahan .table-atom { table-layout: fixed; width: 100%; }
.lap-pecahan .table-atom th:nth-child(n+2) { width: 5rem; }
.lap-pecahan .table-atom th:nth-child(3) { width: 7.5rem; }
.lap-pecahan .table-atom th:nth-child(4) { width: 8.5rem; }
/* Tajuk lajur kos yang panjang (cth. "Anggaran Kos Diluluskan (RM)") dilipat, bukan melimpah */
.lap-pecahan .table-atom thead th { white-space: normal; line-height: 1.25; }
.lap-pecahan .table-atom.lap-kos th:nth-child(4) { width: 10rem; }
/* Jadual Tujuan: 3 lajur (Tujuan, Bil. Permohonan, Kos) — tanpa lajur % */
.lap-pecahan .table-atom.lap-tujuan th:nth-child(2) { width: 8rem; }
.lap-pecahan .table-atom.lap-tujuan th:nth-child(3) { width: 10rem; }
.lap-pecahan .table-atom th, .lap-pecahan .table-atom td { padding: .5625rem .75rem; vertical-align: middle; }
.lap-pecahan .table-atom td:first-child { overflow-wrap: anywhere; }
.lap-pecahan tfoot th { border-top: 1px solid var(--atom-border-strong); background: var(--atom-surface-alt); font-weight: 700; font-size: var(--atom-fs-base); color: var(--atom-text); }
.lap-status { display: inline-flex; align-items: center; gap: .4375rem; white-space: nowrap; font-size: inherit; line-height: inherit; }
.lap-status i { flex: 0 0 auto; width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--st); }
@media (max-width: 767.98px) { .lap-carta-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { body.kp-cetak .lap-stat-ikon, body.kp-cetak .lap-status i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.kp-cetak .lap-panel, body.kp-cetak .lap-pecahan { break-inside: avoid; } }

/* --- Portal ATOM: Borang Kaji Selidik (awam) --- */
.kp-awam-body { max-width: 64rem; margin-inline: auto; padding: 2rem var(--atom-gutter) 3rem; }
.kp-awam-jalur { height: 4px; background: linear-gradient(90deg, var(--atom-primary) 0 60%, var(--atom-sidebar-accent) 60% 80%, var(--atom-accent) 80%); }
.kp-awam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; }
.kp-awam-aside { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
@media (max-width: 991.98px) { .kp-awam-grid { grid-template-columns: minmax(0, 1fr); } .kp-awam-aside { position: static; } }
.kp-awam-kemajuan-nombor { font-size: var(--atom-fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.kp-awam-kemajuan-trek { height: 8px; margin: .5rem 0 .375rem; border-radius: 999px; background: var(--atom-surface-sunken); overflow: hidden; }
.kp-awam-kemajuan-isi { display: block; height: 100%; width: 0; background: var(--atom-primary); transition: width .25s ease; }
.kp-awam-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--atom-fs-sm); }
.kp-awam-langkah li { display: flex; align-items: center; gap: .5rem; color: var(--atom-text-secondary); }
.kp-awam-langkah li i { color: var(--atom-border-strong); }
.kp-awam-langkah li.is-siap i { color: var(--atom-success); }
.kp-auto { display: flex; align-items: center; gap: .5rem; min-height: 2.375rem; padding: .5rem .75rem; border-radius: var(--atom-radius);
           background: var(--atom-surface-sunken); color: var(--atom-text-secondary); font-size: var(--atom-fs-sm); }
.kp-soalan { padding: 1.125rem 0; border-top: 1px solid var(--atom-border-subtle); }
.kp-soalan:first-of-type { border-top: 0; padding-top: .25rem; }
.kp-soalan-teks { display: flex; gap: .625rem; margin: 0 0 .875rem; font-size: var(--atom-fs-md); font-weight: 600; color: var(--atom-text); }
.kp-soalan-no { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%;
                background: var(--atom-primary-light); color: var(--atom-primary); font-size: var(--atom-fs-xs); font-weight: 700; }
.kp-soalan.is-ralat .kp-soalan-no { background: var(--atom-danger); color: #fff; }
.kp-soalan-ralat { display: none; margin-top: .5rem; font-size: var(--atom-fs-sm); color: var(--atom-danger); }
.kp-soalan.is-ralat .kp-soalan-ralat { display: block; }
.kp-likert { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; border: 0; }
.kp-likert.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; }
.kp-likert-pilih { position: relative; margin: 0; }
.kp-likert-pilih input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kp-likert-kad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; height: 100%; min-height: 4.75rem;
  padding: .625rem .375rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card);
  text-align: center; font-size: var(--atom-fs-sm); line-height: 1.25; color: var(--atom-text-secondary);
  transition: border-color var(--atom-transition), background var(--atom-transition), box-shadow var(--atom-transition);
}
.kp-likert-bulat { width: 1.125rem; height: 1.125rem; border: 2px solid var(--atom-border-strong); border-radius: 50%; background: var(--atom-card); transition: inherit; }
.kp-likert-pilih:hover .kp-likert-kad { border-color: var(--atom-border-strong); background: var(--atom-surface-alt); }
.kp-likert-pilih input:focus-visible + .kp-likert-kad { box-shadow: var(--atom-shadow-focus); border-color: var(--atom-primary); }
.kp-likert-pilih input:checked + .kp-likert-kad { border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-text); font-weight: 600; }
.kp-likert-pilih input:checked + .kp-likert-kad .kp-likert-bulat { border-color: var(--atom-primary); border-width: 5px; }
@media (max-width: 575.98px) {
  .kp-likert, .kp-likert.is-3 { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .kp-likert-kad { flex-direction: row; justify-content: flex-start; min-height: 0; padding: .625rem .75rem; text-align: left; }
}
.kp-privasi { display: flex; gap: .625rem; padding: .75rem .875rem; border-radius: var(--atom-radius); background: var(--atom-surface-alt); border: 1px solid var(--atom-border); font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.kp-privasi i { color: var(--atom-accent); margin-top: .0625rem; }
.kp-awam-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
@media (max-width: 575.98px) { .kp-awam-kaki .btn { width: 100%; } }
.kp-awam-berjaya { max-width: 36rem; margin: 1rem auto 0; padding: 2.5rem 1.5rem; text-align: center; }
.kp-awam-berjaya-ikon { width: 72px; height: 72px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-success-light); color: var(--atom-success); font-size: 2.25rem; }
.kp-awam-berjaya-ruj { display: inline-block; margin: .75rem 0 1.25rem; padding: .5rem 1rem; border-radius: var(--atom-radius); background: var(--atom-primary-light); color: var(--atom-primary); font-weight: 700; letter-spacing: .03em; }
.chart-h-240 { height: 240px; }
.chart-h-280 { height: 280px; }

/* Cetak laporan (Muat Turun PDF) — hanya kertas laporan */
@media print {
  body.kp-cetak .app-sidebar, body.kp-cetak .app-navbar, body.kp-cetak #appSidebarRoot, body.kp-cetak #appNavbarRoot,
  body.kp-cetak .app-footer, body.kp-cetak .page-header, body.kp-cetak .skip-link, body.kp-cetak .toast-container-atom,
  body.kp-cetak .app-content > .card:not(#kadLaporan), body.kp-cetak #kadLaporan > .card-header { display: none !important; }
  body.kp-cetak, body.kp-cetak .app-shell, body.kp-cetak .app-main, body.kp-cetak .app-content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.kp-cetak .app-main { margin-left: 0 !important; }
  body.kp-cetak #kadLaporan { border: 0; box-shadow: none; }
  body.kp-cetak #kadLaporan > .card-body { padding: 0; }
  body.kp-cetak .kp-laporan-seksyen { break-inside: avoid; }
  body.kp-cetak .table-wrap { overflow: visible; }
}
legend.kp-soalan-teks { float: none; width: 100%; padding: 0; line-height: 1.4; }
fieldset.kp-soalan { min-width: 0; }
/* <legend> diletak pada sempadan atas fieldset — garisan pemisah dilukis
   dengan ::before supaya jarak atas setiap soalan sama */
fieldset.kp-soalan { position: relative; border-top: 0; padding-top: 0; margin-top: 2.25rem; padding-bottom: 0; }
fieldset.kp-soalan:first-of-type { margin-top: .25rem; }
fieldset.kp-soalan:not(:first-of-type)::before { content: ""; position: absolute; left: 0; right: 0; top: -1.125rem; border-top: 1px solid var(--atom-border-subtle); }
#sSoalan + .kp-soalan { margin-top: 1.125rem; }

/* --- Pemapar soalan dinamik (kp-soalan-papar.js) --- */
.kp-likert { grid-template-columns: repeat(var(--kp-kol, 5), minmax(0, 1fr)); }
.kp-likert-bulat.is-kotak { border-radius: 4px; }
.kp-likert-pilih input:checked + .kp-likert-kad .kp-likert-bulat.is-kotak { border-width: 2px; background: var(--atom-primary); box-shadow: inset 0 0 0 2px var(--atom-card); }
.kp-likert-bintang { display: inline-flex; align-items: center; gap: .1875rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); }
.kp-likert-bintang .bi { color: #E8A33D; }
.kp-soalan-nota { display: block; margin: -.5rem 0 .625rem 2.375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-seksyen-soalan { margin-top: 1.75rem; }
.kp-seksyen-soalan:first-child { margin-top: 0; }
.is-ralat > .kp-soalan-ralat { display: block; }
.kp-soalan-ralat { display: none; }

/* Popup Star Rating: soalan tambahan padat */
.kp-r-soalan { display: grid; gap: .375rem; }
.kp-r-soalan.is-utama { gap: .75rem; }
.kp-r-soalan > .form-label { margin-bottom: 0; }
.kp-r-soalan.is-ralat > .form-label, .kp-r-soalan.is-ralat > .kp-rating-soalan { color: var(--atom-danger); }
.kp-r-soalan .kp-soalan-nota { margin: 0; }
.kp-bintang-input.is-kecil { justify-content: flex-start; gap: .125rem; }
.kp-bintang-input.is-kecil .kp-bintang-btn { width: 2.25rem; height: 2.25rem; font-size: 1.5rem; }
.kp-bintang-input.is-kecil ~ .kp-bintang-label { text-align: left; margin-top: -.25rem; }
.kp-bintang-input.is-kecil ~ .kp-bintang-skala { display: none; }
.kp-bintang-skala { display: flex; justify-content: space-between; max-width: 17rem; margin: -.5rem auto 0; font-size: .6875rem; color: var(--atom-text-muted); }
.kp-pil-kumpulan { display: flex; flex-wrap: wrap; gap: .375rem; }
.kp-pil { position: relative; }
.kp-pil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kp-pil label {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border: 1px solid var(--atom-border-strong);
  border-radius: var(--atom-radius-pill); background: var(--atom-card); font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); cursor: pointer;
  transition: border-color var(--atom-transition), background var(--atom-transition);
}
.kp-pil label .bi { display: none; }
.kp-pil:hover label { background: var(--atom-surface-alt); }
.kp-pil input:focus-visible + label { box-shadow: var(--atom-shadow-focus); }
.kp-pil input:checked + label { border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-primary); font-weight: 600; }
.kp-pil input:checked + label .bi { display: inline; }

/* --- Pengurusan Soalan Penilaian --- */
.kp-jadual-soalan tr.is-redup td { background: var(--atom-surface-alt); }
.kp-jadual-soalan tr.is-redup .kp-pautan-soalan { color: var(--atom-text-secondary); }
.kp-sel-soalan { min-width: 16rem; max-width: 28rem; }
.kp-pautan-soalan { font-weight: 600; color: var(--atom-text); line-height: 1.4; }
.kp-jenis-jawapan { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: var(--atom-fs-sm); white-space: nowrap; }
.kp-jenis-jawapan > i { margin-top: .125rem; color: var(--atom-primary); }
.kp-susunan { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border-radius: var(--atom-radius-sm);
              background: var(--atom-surface-sunken); font-size: var(--atom-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.btn.is-togol-mati { color: var(--atom-text-muted); }
.kp-jadual-soalan [data-aksi="togol"] .bi-toggle-on { color: var(--atom-success); }
button.stat-card { width: 100%; text-align: left; font: inherit; }
.kp-lihat-soalan { margin: 0 0 1rem; padding: .875rem 1rem; border-left: 3px solid var(--atom-primary); border-radius: 0 var(--atom-radius) var(--atom-radius) 0;
                   background: var(--atom-primary-light); font-size: var(--atom-fs-md); font-weight: 600; }
.kp-lihat-pilihan { margin: 0; padding-left: 1.25rem; display: grid; gap: .125rem; }

/* Borang soalan */
.kp-borang-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.kp-borang-aside { position: sticky; top: calc(var(--atom-navbar-height) + 1rem); display: grid; gap: 1rem; }
@media (max-width: 1199.98px) { .kp-borang-grid { grid-template-columns: minmax(0, 1fr); } .kp-borang-aside { position: static; } }
.kp-pilih-kad { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .kp-pilih-kad { grid-template-columns: minmax(0, 1fr); } }
.kp-segmen { display: inline-flex; padding: .1875rem; gap: .1875rem; border-radius: var(--atom-radius); background: var(--atom-surface-sunken); }
.kp-segmen-penuh { display: flex; }
.kp-segmen-penuh .kp-segmen-btn { flex: 1 1 0; justify-content: center; }
.kp-segmen-btn {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border: 0; border-radius: var(--atom-radius-sm);
  background: transparent; color: var(--atom-text-secondary); font-size: var(--atom-fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.kp-segmen-btn:hover { color: var(--atom-text); }
.kp-segmen-btn.is-aktif, .btn-check:checked + .kp-segmen-btn { background: var(--atom-card); color: var(--atom-text); font-weight: 600; box-shadow: var(--atom-shadow-xs); }
.btn-check:focus-visible + .kp-segmen-btn, .kp-segmen-btn:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.kp-jenis-info { display: flex; gap: .75rem; padding: .875rem 1rem; border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }
.kp-jenis-info > i { color: var(--atom-primary); font-size: 1.125rem; }
.kp-jenis-info strong { display: block; }
.kp-jenis-info span { display: block; color: var(--atom-text-secondary); }
.kp-skala-auto { list-style: none; margin: .625rem 0 0; padding: 0; display: grid; gap: .25rem; }
.kp-skala-auto li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; color: var(--atom-text); }
.kp-skala-auto .kp-bintang { font-size: .75rem; }
.kp-pilihan-kotak { padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.kp-pilihan-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.kp-pilihan-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kp-pilihan-baris { display: flex; align-items: center; gap: .5rem; }
.kp-pilihan-no { flex: 0 0 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-card); border: 1px solid var(--atom-border); font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-text-secondary); }
.kp-pilihan-baris .form-control { flex: 1 1 auto; background: var(--atom-card); }
.kp-pilihan-aksi { display: flex; gap: .125rem; flex: 0 0 auto; }

/* Preview langsung & bingkai preview */
.kp-lv-bingkai { padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.kp-lv-bingkai.is-survey { background: var(--atom-surface-alt); }
.kp-lv-bingkai .kp-soalan:first-of-type, .kp-lv-bingkai fieldset.kp-soalan:first-of-type { margin-top: 0; }
.kp-lv-bingkai .kp-likert { --kp-kol: 1 !important; }
.kp-lv-bingkai .kp-likert-kad { flex-direction: row; justify-content: flex-start; min-height: 0; padding: .5rem .75rem; text-align: left; }
.kp-susun-pratonton .kp-lv-bingkai .kp-likert, .modal .kp-lv-bingkai .kp-likert { --kp-kol: 1 !important; }
.kp-pv-alat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.kp-pratonton-popup { max-width: 32rem; margin-inline: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg); background: var(--atom-card); box-shadow: var(--atom-shadow-lg); overflow: hidden; }
.kp-pratonton-popup-kepala { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--atom-border); }
.kp-pratonton-popup-kepala strong { display: block; font-size: var(--atom-fs-md); }
.kp-pratonton-popup-kepala span:not(.modal-icon) { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-pratonton-popup-badan { padding: 1.125rem; }
.kp-pratonton-popup-kaki { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.125rem; border-top: 1px solid var(--atom-border); background: var(--atom-surface-alt); }
.kp-pratonton-borang { border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg); background: var(--atom-surface-sunken); overflow: hidden; }
.kp-pratonton-borang-kepala { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.125rem; background: var(--atom-card); border-bottom: 3px solid var(--atom-primary); }
.kp-pratonton-borang-kepala img { height: 32px; }
.kp-pratonton-borang-kepala strong { display: block; font-size: var(--atom-fs-md); }
.kp-pratonton-borang-kepala span { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-pratonton-borang-badan { margin: 1rem; padding: 1.25rem; border-radius: var(--atom-radius); background: var(--atom-card); border: 1px solid var(--atom-border); }
.is-pratonton-serlah { outline: 2px dashed var(--atom-primary); outline-offset: 6px; border-radius: 4px; }
.kp-r-soalan.is-pratonton-serlah { background: var(--atom-primary-light); }

/* Susun soalan */
.kp-susun-kepala { flex-wrap: wrap; gap: .75rem; }
.kp-susun-senarai { list-style: none; margin: 0; padding: .5rem; display: grid; gap: .375rem; }
.kp-susun-item {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
  background: var(--atom-card); transition: box-shadow var(--atom-transition);
}
.kp-susun-item:hover { box-shadow: var(--atom-shadow-sm); }
.kp-susun-item.is-redup { background: var(--atom-surface-alt); }
.kp-susun-item.is-redup .kp-susun-teks { color: var(--atom-text-secondary); }
.kp-susun-item.is-hantu { opacity: .45; background: var(--atom-primary-light); border-style: dashed; border-color: var(--atom-primary); }
.kp-susun-item.is-dipilih { box-shadow: var(--atom-shadow-md); }
.kp-susun-pemegang { flex: 0 0 auto; color: var(--atom-text-muted); cursor: grab; font-size: 1.125rem; touch-action: none; }
.kp-susun-pemegang:active { cursor: grabbing; }
.kp-susun-no { flex: 0 0 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-primary-light); color: var(--atom-primary); font-size: var(--atom-fs-xs); font-weight: 700; }
.kp-susun-item.is-redup .kp-susun-no { background: var(--atom-surface-sunken); color: var(--atom-text-muted); }
.kp-susun-isi { flex: 1 1 auto; min-width: 0; }
.kp-susun-teks { display: block; font-weight: 600; font-size: var(--atom-fs-sm); line-height: 1.35; }
.kp-susun-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.kp-susun-meta .text-accent { color: var(--atom-accent); font-weight: 600; }
.kp-susun-aksi { display: flex; gap: .125rem; flex: 0 0 auto; }
.kp-susun-pratonton { position: sticky; top: calc(var(--atom-navbar-height) + 1rem); }

/* Analisis: bar pilihan */
.kp-bar-senarai.is-pilihan { gap: .5rem; margin-top: .25rem; }
.kp-bar-senarai.is-pilihan li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3rem; }
.kp-jadual-soalan thead th, .kp-jadual-soalan tbody td { padding-left: .5rem; padding-right: .5rem; }
.kp-jadual-soalan .kp-sel-soalan { min-width: 13rem; max-width: 22rem; }
.kp-jadual-soalan td:nth-child(4) { min-width: 6.5rem; }
.kp-jadual-soalan .badge-atom i { display: none; }
.kp-jadual-soalan .ks-aksi { gap: .25rem; }
.kp-bintang-skala { gap: 1rem; max-width: 21rem; }
.kp-bintang-skala span { white-space: nowrap; }
.ks-stat.is-pilih { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: inset 0 0 0 1px var(--atom-primary); }
.kp-aliran.is-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 991.98px) { .kp-aliran.is-dua { grid-template-columns: minmax(0, 1fr); } }
/* Soalan teks (div) selepas soalan pilihan (fieldset) — bukan blok pertama */
fieldset.kp-soalan ~ div.kp-soalan { border-top: 1px solid var(--atom-border-subtle); padding-top: 1.125rem; margin-top: 1.125rem; }

/* --------------------------------------------------------------------------
   eAdmin — HBH: paparan Pengakuan Pegawai (butiran, baca sahaja)
   Ikon, bukan kotak semak lumpuh — lihat eadmin-hbh-dokumen.js.
   -------------------------------------------------------------------------- */
.hbh-akuan-papar { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hbh-akuan-papar li { display: flex; gap: .625rem; align-items: flex-start;
                      font-size: var(--atom-fs-base); color: var(--atom-text); }
.hbh-akuan-papar li > .bi { flex: none; font-size: 1.0625rem; line-height: 1.35; }
.hbh-akuan-papar li.is-ditanda > .bi { color: var(--atom-success); }
.hbh-akuan-papar li.is-kosong { color: var(--atom-text-muted); }
.hbh-akuan-papar li.is-kosong > .bi { color: var(--atom-text-muted); }

/* --------------------------------------------------------------------------
   eAdmin — Tindakan Saya: tab "Telah Diproses"
   Susun atur AUTO (bukan lebar tetap .table-tindakan, yang ditala untuk
   lajur jadual Menunggu). Lencana dan tarikh tidak membalut; PERKARA
   mengambil baki ruang.
   -------------------------------------------------------------------------- */
.table-diproses { width: 100%; }
.table-diproses td { vertical-align: top; }
.table-diproses th, .table-diproses td:not(:nth-child(3)) { white-space: nowrap; }
.table-diproses td:nth-child(3) { width: 100%; min-width: 12rem; }
/* HBH — lajur 3 ialah PEMOHON; ALAMAT (lajur 4) yang mengisi baki lebar. */
.table-diproses.is-hbh td:nth-child(3) { width: auto; min-width: 0; white-space: nowrap; }
.table-diproses.is-hbh td:nth-child(4) { width: 100%; min-width: 12rem; white-space: normal; }
.table-diproses thead th, .table-diproses tbody td { padding-left: .625rem; padding-right: .625rem; }

/* ==========================================================================
   eDOC — Pengurusan Perancangan Strategik Jabatan (ps-)
   Pelan Strategik → KPI → Pelan Tindakan → Tugasan PIC → Pelaporan →
   Pemantauan → Laporan. Tiada Lulus / Tidak Lulus — lihat
   data-perancangan-strategik.js. Peratus sentiasa bertulis di sebelah bar;
   warna status bukan satu-satunya pembawa makna.
   ========================================================================== */
.ps-jenis { display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5rem; border-radius: var(--atom-radius-sm);
            font-size: var(--atom-fs-xs); font-weight: 600; white-space: nowrap; background: var(--atom-accent-light); color: var(--atom-accent); }
.ps-jenis.is-obb { background: var(--atom-warning-light); color: var(--atom-warning); }

.ps-progress { display: flex; align-items: center; gap: .625rem; min-width: 8.5rem; }
.ps-progress .progress { flex: 1 1 auto; height: 8px; margin: 0; }
.ps-progress.is-besar .progress { height: 12px; }
.ps-progress-nilai { flex: 0 0 2.75rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--atom-fs-sm); }
.ps-progress.is-besar .ps-progress-nilai { font-size: var(--atom-fs-lg); flex-basis: 3.5rem; }

.ps-tarikh-chip { display: block; width: max-content; margin-top: .1875rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ps-tarikh-chip.is-hampir { color: var(--atom-warning); font-weight: 600; }
.ps-tarikh-chip.is-lewat { color: var(--atom-danger); font-weight: 600; }

.ps-sub { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin-top: .125rem; }
.ps-kpi-nama { font-weight: 600; color: var(--atom-text); }
.ps-kpi-kod { display: inline-block; font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-accent); background: var(--atom-accent-light);
              border-radius: var(--atom-radius-sm); padding: .0625rem .375rem; margin-right: .25rem; white-space: nowrap; }
.ps-jadual td { vertical-align: middle; }
.ps-jadual .col-kpi { min-width: 16rem; max-width: 26rem; }

/* Kad statistik berprogress */
.ps-stat .stat-value small { font-size: var(--atom-fs-md); font-weight: 600; color: var(--atom-text-muted); margin-left: .125rem; }
.ps-stat .stat-progress { margin-top: .625rem; }

/* Aliran kerja (dashboard) */
.ps-aliran { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; counter-reset: ps-langkah; }
.ps-aliran li { position: relative; }
.ps-aliran a { position: relative; display: flex; flex-direction: column; gap: .375rem; height: 100%; padding: .75rem .75rem .6875rem; border: 1px solid var(--atom-border);
               border-radius: var(--atom-radius); background: var(--atom-surface-alt); color: var(--atom-text); text-decoration: none;
               font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.3; transition: border-color var(--atom-transition), background-color var(--atom-transition); }
.ps-aliran a:hover { border-color: var(--atom-primary); background: var(--atom-primary-light); color: var(--atom-text); }
.ps-aliran a .bi { font-size: 1.125rem; color: var(--atom-primary); }
.ps-aliran a small { font-weight: 400; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.ps-aliran a::before { counter-increment: ps-langkah; content: counter(ps-langkah); position: absolute; top: .5rem; right: .625rem;
                       font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-text-muted); }
.ps-aliran .is-pic a { background: var(--atom-accent-light); }
.ps-aliran .is-pic a .bi { color: var(--atom-accent); }
@media (max-width: 1199.98px) { .ps-aliran { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ps-aliran { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Status tugasan — jalur bersegmen + legenda */
.ps-segmen { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--atom-surface-sunken); margin-bottom: 1rem; }
.ps-segmen span { display: block; height: 100%; min-width: 0; transition: width .3s ease; }
.ps-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ps-legenda li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto 3rem; align-items: center; gap: .625rem; padding: .4375rem .25rem;
                 border-bottom: 1px solid var(--atom-border-subtle); font-size: var(--atom-fs-sm); }
.ps-legenda li:last-child { border-bottom: 0; }
.ps-legenda .ps-swatch { width: .75rem; height: .75rem; border-radius: 3px; }
.ps-legenda strong { font-variant-numeric: tabular-nums; }
.ps-legenda .ps-pct { text-align: right; color: var(--atom-text-muted); font-variant-numeric: tabular-nums; }
.ps-warna-belum { background: #94A3B8; }
.ps-warna-tindakan { background: #D97706; }
.ps-warna-dihantar { background: #2A6FB0; }
.ps-warna-selesai { background: #15803D; }

.ps-bar-klik { cursor: pointer; border-radius: var(--atom-radius-sm); }
.ps-bar-klik:hover .kp-bar-label span { color: var(--atom-primary); text-decoration: underline; }

/* OBB ringkasan bahagian */
.ps-hero-nilai { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.ps-hero-nilai strong { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ps-hero-nilai span { color: var(--atom-text-muted); font-size: var(--atom-fs-sm); }
.ps-obb-senarai { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ps-obb-senarai li { display: grid; grid-template-columns: minmax(0, 1fr) 8rem auto; gap: .75rem; align-items: center; font-size: var(--atom-fs-sm); }
.ps-obb-senarai .ps-obb-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--atom-text-secondary); }
@media (max-width: 575.98px) { .ps-obb-senarai li { grid-template-columns: minmax(0, 1fr) auto; } .ps-obb-senarai li .ps-progress { display: none; } }

/* Notifikasi */
.ps-notis { list-style: none; margin: 0; padding: 0; }
.ps-notis-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--atom-border-subtle); }
.ps-notis-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ps-notis-item:first-child { padding-top: 0; }
.ps-notis-item .notif-icon { flex: 0 0 auto; }
.ps-notis-badan { min-width: 0; flex: 1 1 auto; }
.ps-notis-teks { margin: 0 0 .25rem; font-size: var(--atom-fs-sm); color: var(--atom-text); }
.ps-notis-item.is-baharu .ps-notis-teks { font-weight: 600; }
.ps-notis-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ps-saluran { display: inline-flex; align-items: center; gap: .25rem; padding: .0625rem .4375rem; border: 1px solid var(--atom-border);
              border-radius: var(--atom-radius-pill); background: var(--atom-card); color: var(--atom-text-secondary); font-size: var(--atom-fs-xs); line-height: 1.5; }
button.ps-saluran { cursor: pointer; }
.ps-saluran.is-emel { color: var(--atom-info); border-color: #CCE0F2; background: var(--atom-info-light); }
button.ps-saluran:hover { border-color: var(--atom-info); }

/* Pratonton e-mel */
.ps-emel { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); overflow: hidden; }
.ps-emel-kepala { padding: .875rem 1rem; background: var(--atom-surface-alt); border-bottom: 1px solid var(--atom-border); display: grid; gap: .25rem; font-size: var(--atom-fs-sm); }
.ps-emel-kepala span { display: inline-block; width: 4.5rem; color: var(--atom-text-muted); }
.ps-emel-badan { padding: 1.125rem 1rem; font-size: var(--atom-fs-base); }
.ps-emel-jadual { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: var(--atom-fs-sm); }
.ps-emel-jadual th, .ps-emel-jadual td { padding: .4375rem .625rem; border: 1px solid var(--atom-border); text-align: left; vertical-align: top; }
.ps-emel-jadual th { width: 11rem; background: var(--atom-surface-alt); font-weight: 600; }

/* Dokumen pembuktian */
.ps-fail-senarai { list-style: none; margin: .625rem 0 0; padding: 0; display: grid; gap: .375rem; }
.ps-fail-senarai.is-baca { margin: 0; }
.ps-fail-senarai li { display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm);
                      background: var(--atom-card); font-size: var(--atom-fs-sm); }
.ps-fail-senarai li > .bi { color: var(--atom-primary); }
.ps-fail-nama { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-fail-saiz { color: var(--atom-text-muted); font-size: var(--atom-fs-xs); white-space: nowrap; }
.form-dropzone.is-dragover { border-color: var(--atom-primary); background: var(--atom-primary-light); }
.form-dropzone.ps-dz-kecil { flex-direction: row; justify-content: center; padding: .4375rem .625rem; gap: .375rem; }
.form-dropzone.ps-dz-kecil .bi { font-size: 1rem; }
.form-dropzone.ps-dz-kecil .dz-title { font-size: var(--atom-fs-sm); }

/* OBB */
.ps-obb-jadual td, .ps-obb-jadual th { vertical-align: middle; }
.ps-obb-jadual tfoot th { background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }
.ps-obb-jumlah { font-size: var(--atom-fs-md) !important; }
.ps-obb-jumlah.is-tepat { color: var(--atom-success); }
.ps-obb-jumlah.is-kurang { color: var(--atom-warning); }
.ps-obb-jumlah.is-lebih { color: var(--atom-danger); }
.ps-obb-borang .form-select, .ps-obb-borang .form-control { min-width: 7rem; }
.ps-obb-borang td.col-catatan { min-width: 12rem; }
.ps-obb-borang td.col-dokumen { min-width: 10rem; }
.ps-obb-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem;
                border-top: 1px solid var(--atom-border); background: var(--atom-surface-alt); }
.ps-obb-meter .progress { height: 12px; margin: 0; }
.ps-obb-meter strong { font-size: var(--atom-fs-xl); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .ps-obb-meter { grid-template-columns: minmax(0, 1fr) auto; } .ps-obb-meter .progress { grid-column: 1 / -1; grid-row: 2; } }

/* Matriks status OBB bulanan */
.ps-matriks { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--atom-fs-xs); }
.ps-matriks th { font-weight: 600; color: var(--atom-text-muted); text-align: center; padding: .25rem; white-space: nowrap; }
.ps-matriks th.is-bahagian { text-align: left; color: var(--atom-text-secondary); font-size: var(--atom-fs-sm); padding-right: .75rem; }
.ps-matriks td { text-align: center; height: 2rem; min-width: 2.25rem; border-radius: 4px; background: var(--atom-surface-sunken); color: var(--atom-text-muted); }
.ps-matriks td.is-selesai { background: var(--atom-success-light); color: var(--atom-success); }
.ps-matriks td.is-dihantar { background: var(--atom-info-light); color: var(--atom-info); }
.ps-matriks td.is-tindakan { background: var(--atom-warning-light); color: var(--atom-warning); }
.ps-matriks td.is-belum { background: var(--atom-neutral-light); color: var(--atom-neutral); }
.ps-matriks td.is-pilih { box-shadow: inset 0 0 0 2px var(--atom-primary); }
.ps-matriks td[data-bulan] { cursor: pointer; }
.ps-matriks-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); margin-top: .75rem; }
.ps-matriks-legenda span { display: inline-flex; align-items: center; gap: .375rem; }

/* Penukar PIC (mockup) */
.ps-pic-tukar { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .3125rem .3125rem .3125rem .75rem; border: 1px dashed var(--atom-border-strong);
                border-radius: var(--atom-radius); background: var(--atom-surface-alt); font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ps-pic-tukar span { white-space: nowrap; font-weight: 600; }
.ps-pic-tukar .form-select { width: auto; max-width: 16rem; }
.ps-identiti { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--atom-border);
               border-radius: var(--atom-radius-md); background: linear-gradient(90deg, var(--atom-accent-light), var(--atom-card) 70%); }
.ps-identiti h3 { margin: 0; font-size: var(--atom-fs-lg); font-weight: 700; }
.ps-identiti p { margin: .125rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }

/* Kad tugasan (PIC) */
.ps-kad-tugasan { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ps-kad-tugasan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .875rem 1rem;
                     border: 1px solid var(--atom-border); border-left: 3px solid var(--atom-border-strong); border-radius: var(--atom-radius); background: var(--atom-card); }
.ps-kad-tugasan li.is-tindakan { border-left-color: var(--atom-warning); }
.ps-kad-tugasan li.is-belum { border-left-color: var(--atom-neutral); }
.ps-kad-tugasan li.is-lewat { border-left-color: var(--atom-danger); }
.ps-kad-tugasan h4 { margin: .25rem 0 .25rem; font-size: var(--atom-fs-base); font-weight: 600; }
.ps-kad-tugasan .ps-kad-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ps-kad-tugasan .ps-kad-meta .ps-tarikh-chip { display: inline; margin: 0 0 0 .25rem; }
@media (max-width: 575.98px) { .ps-kad-tugasan li { grid-template-columns: minmax(0, 1fr); } }

/* Borang kemas kini pencapaian — maklumat baca sahaja */
.ps-baca { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; padding: 1.125rem 1.25rem; margin: 0;
           background: var(--atom-surface-alt); border-bottom: 1px solid var(--atom-border); }
.ps-baca dt { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.ps-baca dd { margin: 0; font-size: var(--atom-fs-base); color: var(--atom-text); }
.ps-baca .is-penuh { grid-column: 1 / -1; }
.ps-kunci { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); font-weight: 400; }
.ps-pilih-peratus { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
@media (max-width: 575.98px) { .ps-pilih-peratus { grid-template-columns: minmax(0, 1fr); } }
.ps-sebelum { display: flex; flex-wrap: wrap; gap: .5rem; }
.ps-sebelum span { padding: .25rem .625rem; border-radius: var(--atom-radius-sm); background: var(--atom-surface-sunken); font-size: var(--atom-fs-xs); font-variant-numeric: tabular-nums; }
.ps-sebelum strong { margin-left: .25rem; }
.ps-butang-kaki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--atom-border); }
.ps-butang-kaki .ps-kaki-nota { margin-right: auto; align-self: center; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Borang modal — baris berulang (objektif / KPI) */
.ps-ulang { display: grid; gap: .625rem; }
.ps-ulang-baris { display: grid; gap: .5rem; align-items: start; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.ps-ulang-baris.is-objektif { grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; }
.ps-ulang-baris.is-kpi { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ps-ulang-baris.is-kpi > .c-objektif { grid-column: span 3; }
.ps-ulang-baris.is-kpi > .c-nama { grid-column: span 8; }
.ps-ulang-baris.is-kpi > .c-buang { grid-column: span 1; justify-self: end; align-self: end; }
.ps-ulang-baris.is-kpi > .c-unit, .ps-ulang-baris.is-kpi > .c-sasaran { grid-column: span 2; }
.ps-ulang-baris.is-kpi > .c-bahagian, .ps-ulang-baris.is-kpi > .c-pic { grid-column: span 4; }
.ps-ulang-baris .form-label { font-size: var(--atom-fs-xs); margin-bottom: .1875rem; }
.ps-ulang-kod { font-weight: 700; color: var(--atom-accent); text-align: center; }
@media (max-width: 767.98px) { .ps-ulang-baris.is-kpi > * { grid-column: 1 / -1 !important; justify-self: stretch !important; } }

.ps-pilih-kpi { max-height: 16rem; overflow: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ps-pilih-kpi label { display: flex; gap: .625rem; align-items: flex-start; padding: .5625rem .75rem; border-bottom: 1px solid var(--atom-border-subtle); cursor: pointer; margin: 0; font-size: var(--atom-fs-sm); }
.ps-pilih-kpi label:last-child { border-bottom: 0; }
.ps-pilih-kpi label:hover { background: var(--atom-surface-alt); }
.ps-pilih-kpi label.is-wujud { color: var(--atom-text-muted); cursor: not-allowed; }
.ps-pilih-kpi .form-check-input { margin-top: .1875rem; flex: 0 0 auto; }
.card-flush .card-body.ps-pic-borang { padding: 1.25rem; }
.ps-ps-borang td { vertical-align: top; font-size: var(--atom-fs-sm); }
.ps-ps-borang .ps-c-rangka { max-width: 18rem; }
.ps-ps-borang .ps-c-rangka .ps-sub { margin-top: .25rem; }

.ps-jenis-pilih { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ps-jenis-pilih label, .ps-laporan-jenis label { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; margin: 0; border: 1px solid var(--atom-border);
                         border-radius: var(--atom-radius); cursor: pointer; background: var(--atom-card); transition: border-color var(--atom-transition), background-color var(--atom-transition); }
.ps-jenis-pilih label:hover, .ps-laporan-jenis label:hover { border-color: var(--atom-border-strong); }
.ps-jenis-pilih label:has(input:checked), .ps-laporan-jenis label:has(input:checked) { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: inset 0 0 0 1px var(--atom-primary); }
.ps-jenis-pilih label:has(input:focus-visible), .ps-laporan-jenis label:has(input:focus-visible) { box-shadow: var(--atom-shadow-focus); }
.ps-jenis-pilih input, .ps-laporan-jenis input { position: absolute; opacity: 0; pointer-events: none; }
.ps-jenis-pilih .bi, .ps-laporan-jenis .bi { font-size: 1.25rem; color: var(--atom-primary); }
.ps-jenis-pilih strong, .ps-laporan-jenis strong { display: block; font-size: var(--atom-fs-base); }
.ps-jenis-pilih small, .ps-laporan-jenis small { display: block; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); font-weight: 400; }
@media (max-width: 575.98px) { .ps-jenis-pilih { grid-template-columns: minmax(0, 1fr); } }
.ps-laporan-jenis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1199.98px) { .ps-laporan-jenis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ps-laporan-jenis { grid-template-columns: minmax(0, 1fr); } }

/* Pelan Tindakan */
.ps-jana-status { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ps-jadual-kumpul td { vertical-align: top; }
.ps-jadual-kumpul tr.is-kumpulan-mula > td { border-top: 2px solid var(--atom-border); }
.ps-tambah-aktiviti { font-size: var(--atom-fs-xs); padding: 0; margin-top: .375rem; }

/* Laporan — kertas pratonton */
.ps-kertas { padding: 1.75rem; }
.ps-kertas-kepala { display: flex; gap: 1rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--atom-primary); }
.ps-kertas-logo { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--atom-primary); color: #fff; font-size: 1.375rem; }
.ps-kertas-kepala h3 { margin: 0; font-size: var(--atom-fs-lg); font-weight: 700; }
.ps-kertas-kepala p { margin: .125rem 0 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ps-kertas-tapis { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.ps-kertas-tapis span { padding: .1875rem .5625rem; border-radius: var(--atom-radius-pill); background: var(--atom-surface-sunken); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ps-kertas-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.ps-kertas-ringkas div { padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ps-kertas-ringkas small { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.ps-kertas-ringkas strong { font-size: var(--atom-fs-xl); font-variant-numeric: tabular-nums; }
.ps-kertas-kaki { margin-top: 1.25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.ps-kertas .table-atom th.ps-kumpulan { background: var(--atom-surface-sunken); text-transform: none; font-size: var(--atom-fs-sm); color: var(--atom-text); }

@media print {
  body.ps-cetak #appSidebarRoot, body.ps-cetak #appNavbarRoot, body.ps-cetak .app-sidebar, body.ps-cetak .app-navbar,
  body.ps-cetak .app-footer, body.ps-cetak .ps-cetak-sembunyi, body.ps-cetak .page-header, body.ps-cetak .skip-link { display: none !important; }
  body.ps-cetak .app-main { margin: 0 !important; padding: 0 !important; }
  body.ps-cetak .app-content { padding: 0 !important; }
  body.ps-cetak #psKertas { border: 0 !important; box-shadow: none !important; }
  body.ps-cetak .progress, body.ps-cetak .badge-atom { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (min-width: 1200px) { .ps-stat-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Dashboard Pelan Strategik — 3 kad ringkasan */
@media (min-width: 576px) { .ps-stat-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ps-jadual-padat .col-kpi { min-width: 11rem; }
.ps-jadual-padat .ps-progress { min-width: 6.5rem; }
.ps-obb-borang .col-indikator { min-width: 15rem; }
.ps-obb-borang .form-select { min-width: 6.5rem; }
.ps-obb-borang td.col-catatan { min-width: 10rem; }
.ps-jadual-kumpul .col-kpi { min-width: 12rem; max-width: 17rem; }
.ps-jadual-kumpul .col-aktiviti { min-width: 13rem; }
.ps-jadual-kumpul .ps-progress { min-width: 6.5rem; }
.ps-jadual-kumpul td, .ps-jadual-kumpul th { padding-left: .625rem; padding-right: .625rem; }
.ps-jadual-kumpul thead th { white-space: normal; }
.ps-jadual-kumpul .badge-atom { white-space: normal; text-align: left; }
.ps-jadual-kumpul .col-kpi { min-width: 11rem; }
.ps-jadual-kumpul .col-aktiviti { min-width: 11rem; }
.ps-jadual-kumpul td, .ps-jadual-kumpul th { padding-left: .5rem; padding-right: .5rem; }
.ps-jadual-kumpul .col-kpi { max-width: 15rem; }
/* Jadual ps — padat supaya muat 1280px tanpa skrol mendatar */
.table-atom.ps-jadual tbody td, .table-atom.ps-jadual thead th { padding-left: .625rem; padding-right: .625rem; }
.table-atom.ps-jadual thead th { white-space: normal; }
.table-atom.ps-jadual .col-kpi { min-width: 12rem; }
.ps-jadual .badge-atom, .ps-jadual .ps-jenis { white-space: normal; }
.ps-jadual .ps-progress { min-width: 7rem; }
.table-atom.ps-jadual .col-kpi { min-width: 11rem; }
.ps-ulang-baris.is-kpi > .c-strategi, .ps-ulang-baris.is-kpi > .c-inisiatif { grid-column: span 6; }
.ps-ulang-baris.is-kpi > .c-buang { grid-row: 1; grid-column: 12 / 13; }
@media (max-width: 767.98px) { .ps-ulang-baris.is-kpi > .c-buang { grid-row: auto; } }

/* Senarai Pelan Strategik — matriks Teras · Strategi · Inisiatif · Output */
.ps-info { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: .875rem; border-top: 1px solid var(--atom-border-subtle);
           font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.ps-info-item { display: inline-flex; align-items: center; gap: .375rem; }
.ps-info-capai { margin-left: auto; min-width: 16rem; }
.ps-info-capai .ps-progress { flex: 1 1 auto; }
.ps-jadual-alat { flex-wrap: wrap; gap: .5rem .75rem; }
.ps-saiz { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); white-space: nowrap; }
.ps-saiz .form-select { width: auto; }
.ps-jadual-alat .input-icon-wrap { min-width: 14rem; }
.ps-matriks-pelan td { vertical-align: top; font-size: var(--atom-fs-sm); }
.ps-matriks-pelan .ps-c-teras { min-width: 9rem; }
.ps-matriks-pelan .ps-c-strategi { min-width: 10rem; }
.ps-matriks-pelan .ps-c-inisiatif { min-width: 10rem; }
.ps-matriks-pelan .ps-c-output { min-width: 11rem; }
.ps-matriks-pelan .ps-c-peneraju { min-width: 12rem; }
.ps-matriks-pelan thead th { vertical-align: middle; }
.ps-matriks-pelan th.ps-kumpulan-tahun { border-left: 1px solid var(--atom-border); border-bottom: 1px solid var(--atom-border); }
.ps-matriks-pelan th.ps-th-tahun, .ps-matriks-pelan td.ps-td-tahun { min-width: 4.75rem; }
.ps-matriks-pelan thead tr:last-child th.ps-th-tahun:nth-child(1), .ps-matriks-pelan thead tr:last-child th.ps-th-tahun:nth-child(4) { border-left: 1px solid var(--atom-border); }
.ps-matriks-pelan td.ps-td-tahun { vertical-align: middle; }
.ps-peneraju strong { display: block; font-size: var(--atom-fs-xs); letter-spacing: .02em; color: var(--atom-text); }

/* Senarai & Butiran Pelan Strategik */
.ps-c-capai { min-width: 10rem; }
.ps-kembali { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .375rem; font-size: var(--atom-fs-sm); font-weight: 500; color: var(--atom-text-secondary); text-decoration: none; }
.ps-kembali:hover { color: var(--atom-primary); }
.ps-info.is-tanpa-garis { padding-top: 0; border-top: 0; }
.ps-tab-wrap { padding: .25rem 1.25rem 0; }
.ps-tab-wrap .nav-tabs-atom { border-bottom: 0; }
.ps-teras-header { border-top: 1px solid var(--atom-border); align-items: flex-start; }
.ps-teras-header > div:first-child { flex: 1 1 20rem; min-width: 0; }
.ps-teras-capai { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; max-width: 22rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); white-space: nowrap; }
.ps-teras-capai .ps-progress { flex: 1 1 auto; }
.ps-alat-jadual { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.ps-alat-jadual .form-select { width: auto; max-width: 15rem; }
.ps-alat-kanan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-left: auto; }
.ps-alat-kanan .input-icon-wrap { min-width: 14rem; }
.ps-matriks-pelan tr.ps-baris-teras td { padding-top: .625rem; padding-bottom: .625rem; background: var(--atom-surface-sunken); font-size: var(--atom-fs-sm); color: var(--atom-text); }
.ps-matriks-pelan td[rowspan] { border-right: 1px solid var(--atom-border-subtle); }
@media (max-width: 575.98px) { .ps-alat-kanan { margin-left: 0; width: 100%; } .ps-alat-kanan .input-icon-wrap { flex: 1 1 auto; min-width: 0; } }
.ps-info-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.ps-info-tapis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.ps-info-tapis .form-select { width: auto; max-width: 15rem; }

/* Pelan Tindakan — format blok Teras / Strategi / Inisiatif / Bahagian */
.pt-tab { padding: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--atom-border); }
.pt-senarai-blok { display: grid; gap: 1rem; }
.pt-blok { overflow: hidden; }
.pt-blok-kepala { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; background: var(--atom-surface-alt); border-bottom: 1px solid var(--atom-border); }
.pt-blok-dl { flex: 1 1 auto; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .375rem 1rem; margin: 0; font-size: var(--atom-fs-sm); }
.pt-blok-dl dt { font-weight: 600; font-size: var(--atom-fs-xs); letter-spacing: .03em; text-transform: uppercase; color: var(--atom-text-muted); padding-top: .125rem; }
.pt-blok-dl dd { margin: 0; color: var(--atom-text); }
.pt-blok-dl dd:first-of-type { font-weight: 600; }
.pt-blok-capai { padding: .5rem 1.25rem; font-size: var(--atom-fs-xs); font-weight: 600; letter-spacing: .03em; color: var(--atom-warning); background: var(--atom-warning-light); border-bottom: 1px solid var(--atom-border); }
.pt-jadual td { vertical-align: top; font-size: var(--atom-fs-sm); }
.pt-jadual th, .pt-jadual td { padding-left: .625rem; padding-right: .625rem; }
.pt-jadual thead th { vertical-align: middle; white-space: normal; }
.pt-jadual { table-layout: fixed; width: 100%; min-width: 56rem; }
.pt-jadual .col-num { width: 3.5rem; }
.pt-jadual .pt-c-kpi { width: 20%; }
.pt-jadual .pt-c-sasaran { width: 9%; }
.pt-jadual .pt-c-program { width: 24%; }
.pt-jadual .pt-c-capai { width: 11%; }
.pt-jadual .pt-c-pihak { width: 16%; }
.pt-jadual .pt-c-catatan { width: 12%; }
.pt-jadual .col-action { width: 3.5rem; }
.pt-senarai { margin: 0; padding-left: 1rem; }
.pt-senarai li + li { margin-top: .25rem; }
.pt-ringkas { padding: .75rem 1rem; border-radius: var(--atom-radius-md, .5rem); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }
@media (max-width: 767.98px) { .pt-blok-dl { grid-template-columns: minmax(0, 1fr); gap: .125rem; } .pt-blok-dl dd { margin-bottom: .375rem; } }
@media print {
  .app-sidebar, .app-navbar, #appSidebarRoot, #appNavbarRoot, .app-footer, .skip-link,
  .ps-kembali, .page-header-actions, .pt-ringkasan, #psAmaran, .pt-tab, .pt-blok-aksi, .pt-jadual .col-action { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  .app-content { padding: 0 !important; }
  .pt-blok { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .pt-blok-kepala, .pt-blok-capai { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.ps-peneraju ul { margin: .125rem 0 .5rem; padding-left: 1rem; }
.ps-peneraju ul:last-child { margin-bottom: 0; }
.ps-peneraju li { margin-bottom: .125rem; }
.ps-pil { font-variant-numeric: tabular-nums; white-space: nowrap !important; }
/* Matriks pelan — padat supaya 3 tahun sasaran + pencapaian muat tanpa skrol */
.table-atom.ps-matriks-pelan tbody td, .table-atom.ps-matriks-pelan thead th { padding: .625rem .4375rem; }
.ps-matriks-pelan td { font-size: var(--atom-fs-xs); line-height: 1.45; }
.ps-matriks-pelan .ps-c-teras { min-width: 6.5rem; }
.ps-matriks-pelan .ps-c-strategi, .ps-matriks-pelan .ps-c-inisiatif { min-width: 7rem; }
.ps-matriks-pelan .ps-c-output { min-width: 8rem; }
.ps-matriks-pelan .ps-c-peneraju { min-width: 8.5rem; }
.ps-matriks-pelan th.ps-th-tahun, .ps-matriks-pelan td.ps-td-tahun { min-width: 0; width: 3.75rem; }
.ps-matriks-pelan .ps-pil { padding: .125rem .3125rem; font-size: .6875rem; }
.ps-matriks-pelan .ps-kpi-kod { font-size: .6875rem; }
.ps-matriks-pelan .col-action { padding-left: .25rem !important; padding-right: .5rem !important; }
.ps-matriks-pelan .ps-c-output, .ps-matriks-pelan .ps-c-peneraju { min-width: 7.5rem; }
.ps-matriks-pelan .ps-c-teras { min-width: 6rem; }

/* OBB — Kerangka Keberhasilan (format rasmi: tajuk berjalur + dua jadual) */
.ps-kerangka-kepala { padding: 1rem 1.25rem; border-bottom: 1px solid var(--atom-border); }
.ps-kerangka-kepala h3 { margin: 0; font-size: var(--atom-fs-md); font-weight: 600; letter-spacing: -.01em; color: var(--atom-text); }
.ps-kerangka-kepala p { margin: .1875rem 0 .625rem; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.ps-kerangka-kira { display: flex; flex-wrap: wrap; gap: .375rem .5rem; }
.ps-kira { display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .625rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill);
           background: var(--atom-card); font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.ps-kira strong { color: var(--atom-primary); font-variant-numeric: tabular-nums; }
.table-atom.ps-kerangka { margin: 0; }
.table-atom.ps-kerangka thead th { white-space: normal; }
.table-atom.ps-kerangka tbody td { vertical-align: middle; font-size: var(--atom-fs-sm); padding-left: .75rem; padding-right: .75rem; }
.ps-kerangka + .ps-kerangka, .table-wrap + .table-wrap .ps-kerangka { border-top: 6px solid var(--atom-surface-sunken); }
.ps-kerangka .ps-k-induk { width: 26%; min-width: 12rem; background: var(--atom-surface-alt); }
.table-atom.ps-kerangka thead th.ps-k-induk { background: var(--atom-surface-alt); }
.ps-kerangka .ps-k-ind { min-width: 16rem; }
.ps-kerangka tr.is-kumpulan-mula > td { border-top: 1px solid var(--atom-border); }
.ps-lapis { display: inline-block; padding: .0625rem .4375rem; border-radius: var(--atom-radius-sm); font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.ps-lapis.is-outcome { background: var(--atom-primary-light); color: var(--atom-primary); }
.ps-lapis.is-output { background: var(--atom-accent-light); color: var(--atom-accent); }
.ps-nilai { min-width: 7.5rem; }
.ps-obb-borang .col-indikator { min-width: 16rem; }
.ps-obb-borang td[data-capai] { min-width: 6rem; }
.ps-k-urus { display: flex; gap: .125rem; margin-top: .5rem; }
.ps-k-urus .btn-icon { width: 1.75rem; height: 1.75rem; }
.ps-kerangka td.col-action { white-space: nowrap; }
.ps-obb-borang.ps-ps-borang .col-indikator { min-width: 9.5rem; }
.ps-obb-borang.ps-ps-borang .ps-nilai { flex-wrap: nowrap; width: 8rem; }
.ps-obb-borang.ps-ps-borang .ps-nilai .form-control { min-width: 0; }
.ps-obb-borang.ps-ps-borang td[data-capai] { min-width: 5rem; }
.ps-obb-borang.ps-ps-borang td.col-catatan { min-width: 7rem; }
.ps-obb-borang.ps-ps-borang td.col-dokumen { min-width: 7rem; }
.ps-obb-borang.ps-ps-borang .ps-c-rangka { min-width: 9.5rem; }
.ps-obb-borang.ps-ps-borang thead th { white-space: normal; vertical-align: middle; }

/* ==========================================================================
   PPK-02 — Penganjuran Latihan PPK (ppk-penganjuran.js, ppk-peserta.js, ppk-bp1.js)
   ========================================================================== */
.ppk-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.ppk-qr-kad { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); text-align: center; }
.ppk-qr-kad.is-hari-ini { border-color: var(--atom-primary); box-shadow: 0 0 0 2px var(--atom-primary-soft, rgba(139, 26, 26, .12)); }
.ppk-qr { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.ppk-qr svg { width: 100%; height: 100%; }
.ppk-hadir th, .ppk-hadir td { white-space: nowrap; }
.ppk-likert td:first-child { min-width: 260px; white-space: normal; }
.ppk-likert th:not(:first-child), .ppk-likert td:not(:first-child) { width: 56px; }
.ppk-pindaan { padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.ppk-pindaan + .ppk-pindaan { margin-top: .5rem; }
.ppk-imbas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 200px; padding: 1rem;
  border: 2px dashed var(--atom-border-strong, var(--atom-border)); border-radius: var(--atom-radius); text-align: center; }
.ppk-imbas > .bi { font-size: 2.5rem; color: var(--atom-primary); }
.bpk-soalan { padding: .625rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }

/* ==========================================================================
   LAT-01 — Rekod Latihan Saya & pindaan rekod (rekod-latihan-saya.js,
   rekod-latihan-bersama.js)
   ========================================================================== */
.text-success-atom { color: var(--atom-success); }
.saya-bar { height: 8px; }
.table-latihan-saya .cell-latihan { min-width: 18rem; }
.table-latihan-saya tr.is-bakal > td { background: #FFFBEB; }
.table-latihan-saya tr.is-perlu-sijil > td:first-child { box-shadow: inset 3px 0 0 var(--atom-danger); }
.pinda-beza td, .pinda-beza th { vertical-align: top; }
.pinda-beza .pinda-asal, .pinda-asal { color: var(--atom-text-muted); text-decoration: line-through; }
.pinda-beza .pinda-baharu { font-weight: 600; color: var(--atom-text); }

/* =========================================================================
   AtomPdf — kanvas luar skrin untuk menjana PDF daripada HTML (atom-pdf.js)
   ========================================================================= */
/* Bekas 0×0 menyembunyikan kanvas tanpa mengalih koordinatnya (jsPDF.html
   melukis mengikut kedudukan elemen — left negatif = halaman kosong) */
.atom-pdf-bekas { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.atom-pdf-kanvas { background: #fff; color: #1d2433; padding: 0; margin: 0; }
/* jsPDF menulis teks dengan metrik Helvetica — susun atur mesti guna fon
   yang sama supaya jarak perkataan tidak lari. Ikon fon (bi) tiada glif. */
.atom-pdf-kanvas, .atom-pdf-kanvas * { font-family: Helvetica, Arial, sans-serif !important; letter-spacing: 0 !important; }
.atom-pdf-kanvas .bi { display: none !important; }
body.atom-pdf-menjana, body.atom-pdf-menjana * { cursor: progress !important; }

/* Slip kehadiran & sijil penyertaan PPK (ppk-peserta.js) */
.ppk-dok { font-family: Inter, Arial, sans-serif; color: #1d2433; padding: 28px 32px; }
.ppk-dok h1 { font-size: 22px; margin: 0 0 4px; }
.ppk-dok h2 { font-size: 15px; color: #555; font-weight: 500; margin: 0 0 24px; }
.ppk-dok table { border-collapse: collapse; width: 100%; margin-top: 16px; }
.ppk-dok th, .ppk-dok td { border: 1px solid #ccd; padding: 8px; text-align: left; font-size: 13px; }
.ppk-dok .sijil { border: 6px double #8b1a1a; padding: 48px; text-align: center; }
.ppk-dok .sijil h1 { font-size: 30px; color: #8b1a1a; }
.ppk-dok .sijil .nama { font-size: 24px; font-weight: 700; margin: 20px 0; }
.ppk-dok .kaki { margin-top: 32px; font-size: 12px; color: #666; }
/* Kod QR kehadiran (poster), jam sebenar kehadiran, kemajuan status PPK */
.ppk-qr-poster { text-align: center; }
.ppk-qr-poster-jabatan { font-size: 12px; letter-spacing: .08em; color: #8b1a1a; margin-bottom: 12px; }
.ppk-qr-poster-kod { width: 360px; height: 360px; margin: 16px auto; }
.ppk-qr-poster-kod svg { width: 100%; height: 100%; }
.ppk-jam { width: 8.5rem; }
.ppk-kemajuan-garis .fsk-langkah { margin-bottom: .25rem; }
/* ==========================================================================
   eRAD — Rekod Perubatan Kakitangan
   ========================================================================== */

/* Bar peranan demo (kawalan mockup sahaja) */
.demo-peranan-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm);
}
.demo-peranan-label { font-weight: 600; color: var(--atom-text-secondary); white-space: nowrap; }
.demo-peranan-bar .form-select { width: auto; max-width: 100%; min-width: 0; }
.demo-peranan-nota { flex: 1 1 12rem; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.demo-peranan-bar .btn { margin-left: auto; }
@media (max-width: 575.98px) {
  .demo-peranan-bar .form-select { width: 100%; }
  .demo-peranan-bar .btn { margin-left: 0; }
}

/* Keputusan dua nilai tetap: kelayakan + gangguan */
.rp-keputusan { display: inline-flex; flex-direction: column; gap: .125rem; line-height: 1.35; }
.rp-nilai { font-size: var(--atom-fs-sm); font-weight: 600; white-space: nowrap; }
.rp-nilai::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .375rem; background: currentColor; }
.rp-nilai.is-baik { color: var(--atom-success); }
.rp-nilai.is-buruk { color: var(--atom-danger); }

/* Kepala ringkas rekod dalam dialog */
.rp-swal-kepala {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .625rem .75rem;
  margin-bottom: 1rem;
  border-radius: var(--atom-radius);
  background: var(--atom-surface-alt);
  font-size: var(--atom-fs-sm);
  color: var(--atom-text-secondary);
}
.rp-swal-kepala strong { color: var(--atom-text); font-size: var(--atom-fs-base); }

/* Penanda SULIT pada kepala halaman */
.rp-sulit { vertical-align: middle; margin-left: .5rem; font-size: var(--atom-fs-xs); }

/* Lajur kotak pilihan (tindakan pukal) */
.col-check { width: 44px; }
.rp-swal-kepala[hidden] { display: none; }

/* Tempoh menunggu pengesahan & tanda lewat / tertunggak */
.rp-menunggu { margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); white-space: nowrap; }
.rp-menunggu.is-lewat { color: var(--atom-danger); font-weight: 600; }
.rp-tertunggak { margin-top: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-danger); }
.table-atom tbody tr.rp-baris-lewat > td:first-child { box-shadow: inset 3px 0 0 var(--atom-danger); }

/* Senarai & jadual dalam dialog pukal */
.rp-swal-senarai {
  max-height: 180px;
  overflow-y: auto;
  margin: 0 0 1rem;
  padding: .5rem .75rem .5rem 1.75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  font-size: var(--atom-fs-sm);
}
.rp-swal-senarai li + li { margin-top: .25rem; }
.rp-swal-jadual { max-height: 320px; overflow-y: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }

/* Garis masa pemeriksaan — satu baris bagi setiap kitaran */
.rp-kitaran + .rp-kitaran { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--atom-border-subtle); }
.rp-kitaran-kepala { margin-bottom: .625rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text); }
.rp-garis { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.rp-nod {
  display: flex;
  gap: .625rem;
  flex: 0 1 220px;
  min-width: 0;
  padding: .625rem .75rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.rp-nod-ikon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .875rem;
  background: var(--atom-neutral-light);
  color: var(--atom-neutral);
}
.rp-nod.is-success .rp-nod-ikon { background: var(--atom-success-light); color: var(--atom-success); }
.rp-nod.is-warning .rp-nod-ikon { background: var(--atom-warning-light); color: var(--atom-warning); }
.rp-nod.is-danger  .rp-nod-ikon { background: var(--atom-danger-light);  color: var(--atom-danger); }
.rp-nod.is-info    .rp-nod-ikon { background: var(--atom-info-light);    color: var(--atom-info); }
.rp-nod-isi { min-width: 0; }
.rp-nod-tajuk { font-size: var(--atom-fs-sm); font-weight: 600; line-height: 1.35; }
.rp-nod-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); line-height: 1.4; }
.rp-nod-penutup { flex-basis: 180px; border-style: dashed; background: var(--atom-surface-alt); }
.rp-nod-penutup.is-success { border-color: var(--atom-success); border-style: solid; background: var(--atom-success-light); }
.rp-nod-jangka { border-style: dashed; }
.rp-panah { display: flex; align-items: center; color: var(--atom-text-muted); font-size: 1rem; }
@media (max-width: 575.98px) {
  .rp-garis { flex-direction: column; }
  .rp-nod { flex-basis: auto; }
  .rp-panah { justify-content: center; }
  .rp-panah .bi { transform: rotate(90deg); }
}

/* Laporan */
.rp-laporan-tapis-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; }
.rp-laporan-tapis-grid .filter-field { flex: 0 1 260px; }
.rp-baris-jumlah th, .rp-baris-jumlah td { font-weight: 700; background: var(--atom-surface-alt); }
.rp-tahap { font-weight: 600; white-space: nowrap; }
.rp-tahap.is-danger { color: var(--atom-danger); }
.rp-tahap.is-warning { color: var(--atom-warning); }

/* Slip keputusan */
.rp-slip {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-md);
  background: var(--atom-card);
  box-shadow: var(--atom-shadow-sm, none);
}
.rp-slip-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--atom-primary); }
.rp-slip-jabatan { display: flex; align-items: center; gap: .75rem; }
.rp-slip-jabatan strong { display: block; font-size: var(--atom-fs-md, 1rem); }
.rp-slip-jabatan div > span { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.rp-slip-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--atom-primary); color: #fff; font-size: 1.375rem; }
.rp-slip-tajuk { margin: 1.25rem 0 .375rem; font-size: 1.125rem; font-weight: 700; text-align: center; }
.rp-slip-rujukan { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.rp-slip-keputusan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 1.25rem 0;
  padding: .875rem 1rem;
  border: 1px solid var(--atom-success);
  border-radius: var(--atom-radius);
  background: var(--atom-success-light);
  color: var(--atom-success);
}
.rp-slip-keputusan > .bi { font-size: 2rem; }
.rp-slip-keputusan span { display: block; font-size: var(--atom-fs-sm); font-weight: 600; }
.rp-slip-keputusan .rp-slip-status { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; line-height: 1.1; }
.rp-slip-bahagian { margin-top: 1.25rem; }
.rp-slip-bahagian h4 {
  margin: 0 0 .5rem;
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
}
.rp-slip-baris { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: .75rem; padding: .375rem 0; border-bottom: 1px solid var(--atom-border-subtle); font-size: var(--atom-fs-sm); }
.rp-slip-label { color: var(--atom-text-secondary); }
.rp-slip-nilai { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rp-slip-kaki { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--atom-border-strong); font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.rp-slip-kaki p { margin: .5rem 0 0; }
.rp-slip-kod { margin-left: .5rem; font-size: var(--atom-fs-sm); font-weight: 700; color: var(--atom-text); letter-spacing: .05em; }
@media (max-width: 575.98px) {
  .rp-slip { padding: 1.25rem 1rem; }
  .rp-slip-baris { grid-template-columns: 1fr; gap: .125rem; }
}

@media print {
  .demo-peranan-bar, .rp-tanpa-cetak, .rp-laporan-tapis { display: none !important; }
  .rp-slip { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .rp-slip-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-slip-keputusan { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.rp-nod-penutup { align-self: center; }

/* ==========================================================================
   eRAD — Pemonitoran & Persampelan
   ========================================================================== */

/* Langkah aliran persampelan (carta 05) */
.ps-langkah { display: flex; flex-wrap: wrap; gap: .75rem 0; list-style: none; margin: 0; padding: 0; }
.ps-langkah-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  flex: 1 1 0;
  min-width: 120px;
  padding-right: .75rem;
  color: var(--atom-text-muted);
}
.ps-langkah-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 36px;
  right: 8px;
  height: 2px;
  background: var(--atom-border);
}
.ps-langkah-item.is-selesai:not(:last-child)::after { background: var(--atom-success); }
.ps-langkah-no {
  position: relative;
  z-index: 1;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--atom-border-strong);
  background: var(--atom-card);
  font-size: var(--atom-fs-xs);
  font-weight: 700;
}
.ps-langkah-item.is-selesai .ps-langkah-no { border-color: var(--atom-success); background: var(--atom-success); color: #fff; }
.ps-langkah-item.is-semasa .ps-langkah-no { border-color: var(--atom-primary); color: var(--atom-primary); box-shadow: 0 0 0 3px var(--atom-primary-light); }
.ps-langkah-teks { display: flex; flex-direction: column; min-width: 0; }
.ps-langkah-label { font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); line-height: 1.3; }
.ps-langkah-item.is-selesai .ps-langkah-label, .ps-langkah-item.is-semasa .ps-langkah-label { color: var(--atom-text); }
.ps-langkah-item.is-semasa .ps-langkah-label { color: var(--atom-primary); }
.ps-langkah-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
@media (max-width: 767.98px) {
  .ps-langkah { flex-direction: column; gap: .75rem; }
  .ps-langkah-item { flex: none; min-width: 0; flex-direction: row; align-items: center; gap: .625rem; }
  .ps-langkah-item::after { display: none; }
}

/* Borang permohonan */
.ps-borang .form-label { margin-bottom: .25rem; }
.ps-pilih-jenis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .25rem .75rem; }

/* Titik persampelan mengikut parameter (borang permohonan & pelan) */
.ps-titik-bekas { display: grid; gap: .5rem; }
.ps-titik-kad { padding: .625rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.ps-titik-kepala { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.ps-titik-kepala .ps-bil-titik { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-muted); }
.ps-titik-kepala .ps-bil-titik input { width: 5rem; }
.ps-sampel-jadual { max-height: 360px; }
.ps-sampel-jadual tr.is-edit td { background: var(--atom-primary-light); }
.ps-titik-blok + .ps-titik-blok { margin-top: .5rem; }
.ps-titik-senarai { margin: .125rem 0 0; padding-left: 1.25rem; font-size: var(--atom-fs-sm); }
.ps-pecahan { list-style: none; margin: 0; padding: 0; }
.ps-pecahan li + li { margin-top: .375rem; }

/* Dropdown radionuklid (pelan persampelan) */
.ps-rn-menu { min-width: 100%; max-height: 260px; overflow-y: auto; padding: .5rem .75rem; }
.ps-rn-menu .form-check { margin-bottom: .25rem; }

/* Keputusan — ketakpastian & teknik analisis */
.ps-ketakpastian-wrap { max-width: 130px; }
.ps-teknik { min-width: 170px; }

/* Keputusan makmal — kumpulan syarikat / lokasi / batch */
.table-atom tbody tr.km-kumpulan > td { padding: 0; background: var(--atom-surface-alt); }
.km-kumpulan-btn {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.km-kumpulan-btn:hover { background: var(--atom-primary-light); }
.km-kumpulan-baris { display: flex; align-items: center; gap: .5rem; padding-right: 1rem; }
.km-kumpulan-aksi { flex: none; }

/* Keputusan mengikut batch */
.kb-ringkasan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; }
.kb-sel { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.kb-label { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--atom-text-muted); }
.kb-nilai .badge-atom { margin-left: .25rem; vertical-align: middle; }
.table-atom tbody tr.kb-param > td { background: var(--atom-surface-alt); font-weight: 600; }
.table-atom tbody td.kb-titik { vertical-align: top; min-width: 200px; border-right: 1px solid var(--atom-border-subtle); }
.kb-jadual td { vertical-align: middle; }
.kb-jadual .input-group { min-width: 120px; }
.kb-catatan { max-width: 200px; white-space: normal; }
.ps-pelan-jadual { max-height: 420px; }
.ps-pelan-jadual .ps-pelan-aras { min-width: 80px; }
.km-kumpulan-btn:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: -2px; }
.km-chevron { margin-top: .2rem; transition: transform var(--atom-transition); }
.km-kumpulan.is-buka .km-chevron { transform: rotate(90deg); }
.km-kumpulan-teks { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; }
.km-kumpulan-nama { font-weight: 600; }
.km-kumpulan-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.km-kumpulan-status { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .25rem; }
.table-atom tbody tr.km-subkepala > td { padding-left: 2.25rem; font-size: var(--atom-fs-sm); font-weight: 600; color: var(--atom-text-secondary); }
.table-atom tbody tr.km-anak > td.km-anak-kod { padding-left: 2.25rem; }

/* Laporan persampelan — blok tandatangan */
.ps-tt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--atom-border); }
.ps-tt-kotak { display: flex; flex-direction: column; gap: .125rem; }
.ps-tt-tajuk { margin-bottom: 1.75rem; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--atom-text-muted); }
.ps-tt-nama { padding-top: .375rem; border-top: 1px solid var(--atom-border-strong); font-weight: 600; }
.ps-tt-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
@media (max-width: 575.98px) { .ps-tt { grid-template-columns: 1fr; } }

/* Tetapan parameter — senarai parameter */
.ps-tetapan-senarai { display: flex; flex-direction: column; max-height: 600px; overflow-y: auto; }
.ps-tetapan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .625rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--atom-border-subtle);
  background: transparent;
  color: inherit;
  text-align: left;
}
.ps-tetapan-item:hover { background: var(--atom-surface-alt); }
.ps-tetapan-item:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: -2px; }
.ps-tetapan-item.is-aktif { background: var(--atom-primary-light); box-shadow: inset 3px 0 0 var(--atom-primary); }

/* Keputusan parameter */
.ps-penilaian { font-size: var(--atom-fs-sm); font-weight: 600; white-space: nowrap; }
.ps-nilai { max-width: 160px; }
.ps-kaki-borang { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }

/* Laporan bulanan — satu blok setiap syarikat / lokasi */
.ps-laporan-blok + .ps-laporan-blok { border-top: 1px solid var(--atom-border); }
.ps-laporan-kepala {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .875rem 1.25rem;
  background: var(--atom-surface-alt);
  border-bottom: 1px solid var(--atom-border-subtle);
}
.ps-laporan-kepala .badge-atom { margin-left: .375rem; vertical-align: middle; }
@media print {
  .ps-laporan-blok { break-inside: avoid; }
}

/* Halaman utama eRAD — kad sub-modul */
.erad-modul.is-terhad { opacity: .7; background: var(--atom-surface-alt); }
.erad-modul-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--atom-border-subtle); border-bottom: 1px solid var(--atom-border-subtle); }
.erad-modul-nilai { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.erad-modul-label { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Rekod pemonitoran — borang key-in */
.pm-pilihan { padding: .375rem .5rem; border: 1px solid transparent; border-radius: var(--atom-radius); }
.pm-medium { display: flex; flex-wrap: wrap; gap: .375rem; padding: .25rem; border: 1px solid transparent; border-radius: var(--atom-radius); }
.pm-pilihan.is-invalid, .pm-medium.is-invalid { border-color: var(--atom-danger); }
.pm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .25rem .75rem;
  border: 1px solid var(--atom-border-strong);
  border-radius: 999px;
  background: var(--atom-card);
  font-size: var(--atom-fs-sm);
  cursor: pointer;
  user-select: none;
}
.pm-chip:hover { border-color: var(--atom-primary); }
.btn-check:checked + .pm-chip { background: var(--atom-primary); border-color: var(--atom-primary); color: #fff; font-weight: 600; }
.btn-check:focus-visible + .pm-chip { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.btn-check:disabled + .pm-chip { cursor: default; opacity: .75; }
.pm-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.ps-laporan-seksyen {
  margin: 0;
  padding: .625rem 1.25rem;
  font-size: var(--atom-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--atom-text-muted);
  border-bottom: 1px solid var(--atom-border);
}
.ps-laporan-blok + .ps-laporan-seksyen { border-top: 1px solid var(--atom-border); }

/* ==========================================================================
   eDOSE — Laporan & Statistik
   ========================================================================== */
.ls-tajuk-laporan { margin: 0 0 .75rem; font-size: var(--atom-fs-md, 1rem); font-weight: 700; }
.ls-swatch { display: inline-block; width: .625rem; height: .625rem; margin-right: .5rem; border-radius: 2px; vertical-align: middle; }
.chart-h-360 { height: 360px; }

/* eDOSE — Muat Naik Pukal (BF-EA-MDPS-MNP-01) */
.mnp-no {
  display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-right: .375rem;
  border-radius: 50%; background: var(--atom-primary-light); color: var(--atom-primary); font-size: var(--atom-fs-xs); font-weight: 700; vertical-align: 1px;
}
.mnp-demo { padding: .75rem 1rem; border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.mnp-demo-label { display: block; margin-bottom: .375rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-secondary); }
.mnp-demo .form-check { font-size: var(--atom-fs-sm); }
.mnp-jadual-wrap { max-height: 34rem; overflow: auto; }
.mnp-jadual-wrap thead th { position: sticky; top: 0; z-index: 1; }
.mnp-sel-ralat { background: var(--atom-danger-light); color: var(--atom-danger); font-weight: 600; box-shadow: inset 0 -2px 0 var(--atom-danger); }
.mnp-ringkasan { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--atom-fs-sm); }
.mnp-ringkasan li { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .75rem; border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); }

/* eDOSE — Kemasukan Jadual (kemasukan berkelompok tanpa Excel) */
.kj-filter-grid { grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(200px, 1.2fr) minmax(160px, 1fr) minmax(150px, .8fr); }
@media (max-width: 1199.98px) { .kj-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .kj-filter-grid { grid-template-columns: minmax(0, 1fr); } }
.kj-jadual thead th { vertical-align: bottom; }
.kj-jadual .kj-input { width: 8.5rem; min-width: 7rem; }
.kj-jadual .kj-input .form-control { font-variant-numeric: tabular-nums; }
.kj-jadual tr.kj-diisi > td { background: var(--atom-primary-light); }
.kj-jadual tr.kj-sudah > td { background: var(--atom-surface-alt); }
.kj-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }

/* eDOSE — Kepatuhan Had Dos 5 Tahun (BF-EA-MDPS-KHD-01) */
.khd-had { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); background: var(--atom-card); }
.khd-had-item { display: flex; gap: .625rem; align-items: flex-start; }
.khd-had-item > .bi { margin-top: .125rem; color: var(--atom-primary); font-size: 1.125rem; }
.khd-had-item > div { display: flex; flex-direction: column; line-height: 1.3; }
.khd-had-label { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.khd-had-item strong { font-size: var(--atom-fs-base); color: var(--atom-text); }
.khd-had-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.khd-had-sumber { margin-left: auto; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
@media print { #tabKhd { display: none; } #panelKes, #panelMajikan, #panelJawatan, #panelMatriks { display: block !important; opacity: 1 !important; margin-bottom: 1rem; } }

/* ==========================================================================
   eRAD — Inventori Peralatan
   ========================================================================== */
.inv-pilih-aset { display: grid; gap: .375rem; max-height: 260px; overflow-y: auto; padding: .25rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.inv-aset-pilih { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem .625rem; border-radius: var(--atom-radius-sm); cursor: pointer; font-size: var(--atom-fs-sm); }
.inv-aset-pilih:hover { background: var(--atom-surface-alt); }
.inv-aset-pilih .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.inv-aset-pilih.is-tidak { opacity: .65; cursor: not-allowed; }
.inv-aset-pilih.is-tidak .form-check-input { pointer-events: none; }
.inv-kos-baris { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: var(--atom-fs-sm); border-bottom: 1px solid var(--atom-border-subtle); }
.inv-kos-baris.is-jumlah { font-weight: 700; border-bottom: 0; padding-top: .5rem; }

/* Borang KEW.PA-9 (cetakan) */
.kewpa { max-width: 860px; margin: 0 auto; padding: 2rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); background: var(--atom-card); font-size: var(--atom-fs-sm); }
.kewpa-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--atom-text); }
.kewpa-kepala h3 { margin: 0; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; }
.kewpa-kod { font-weight: 700; font-size: 1rem; }
.kewpa table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.kewpa th, .kewpa td { border: 1px solid var(--atom-border-strong); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.kewpa th { background: var(--atom-surface-alt); font-weight: 600; }
.kewpa-bahagian { margin-top: 1.25rem; font-weight: 700; text-transform: uppercase; font-size: var(--atom-fs-xs); letter-spacing: .05em; }
.kewpa-tt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.kewpa-tt > div { border: 1px solid var(--atom-border-strong); padding: .5rem; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.kewpa-tt .garis { border-top: 1px dotted var(--atom-text-muted); padding-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
@media (max-width: 767.98px) { .kewpa { padding: 1rem; } .kewpa-tt { grid-template-columns: 1fr; } }
@media print { .kewpa { border: 0; padding: 0; max-width: none; } .kewpa th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* eInventori — borang rasmi KEW.PA (1, 9, 10, 15, 16): kod di kanan atas,
   tajuk di tengah, medan berlabel, jadual bernombor lajur & ruang tandatangan */
.kewpa-rasmi .kewpa-kod-kanan { text-align: right; font-weight: 700; font-size: 1rem; }
.kewpa-rasmi .kewpa-tajuk { margin: .25rem 0 1rem; text-align: center; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; }
.kewpa-rasmi .kewpa-tajuk span { text-transform: none; font-size: var(--atom-fs-sm); }
.kewpa-rujukan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .5rem; margin-bottom: .75rem; border-bottom: 2px solid var(--atom-text); font-size: var(--atom-fs-sm); }
.kewpa-medan { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: .375rem 1rem; margin: 0; }
.kewpa-medan dt { font-weight: 600; }
.kewpa-medan dt::after { content: " :"; }
.kewpa-medan dd { margin: 0; border-bottom: 1px dotted var(--atom-border-strong); padding-bottom: .125rem; min-height: 1.4em; }
.kewpa-jadual tr.kewpa-bil-lajur th { padding: .125rem .25rem; text-align: center; font-weight: 400; font-size: var(--atom-fs-xs); }
.kewpa-jadual thead th { text-align: center; vertical-align: middle; }
.kewpa-jadual tr.kewpa-baris-kosong td { height: 1.9rem; }
.kewpa-tt.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kewpa-tt > .kewpa-tanda { justify-content: flex-start; gap: .25rem; min-height: 0; }
.kewpa-tt > div:empty { border: 0; }
.kewpa-tanda-garis { margin-top: 2.5rem; padding-top: .25rem; border-top: 1px dotted var(--atom-text-muted); font-size: var(--atom-fs-xs); font-weight: 600; }
.kewpa-tanda-baris { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; font-size: var(--atom-fs-xs); }
.kewpa-tanda-baris span:first-child::after { content: " :"; }
@media (max-width: 767.98px) { .kewpa-medan { grid-template-columns: 1fr; } .kewpa-medan dt::after { content: ""; } .kewpa-tt.is-2 { grid-template-columns: 1fr; } .kewpa-tt > div:empty { display: none; } }

/* eInventori — templat rasmi Pekeliling Perbendaharaan Malaysia (AM 2.2 – 2.5):
   baris pekeliling, kod & no. rujukan di kanan, jadual berkotak dengan
   pengepala kelabu, ruang tandatangan berkotak dan nota kaki */
.kewpa.is-lebar { max-width: 1120px; }
.kewpa-pekeliling { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.kewpa-kepala-rasmi { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kewpa-kepala-rasmi .kewpa-wajib { font-weight: 700; }
.kewpa-kepala-rasmi .kewpa-kod-blok { margin-left: auto; text-align: right; }
.kewpa-kepala-rasmi .kewpa-kod-blok > strong { display: block; font-size: 1rem; }
.kewpa-kepala-rasmi .kewpa-kod-blok > span { display: block; font-size: var(--atom-fs-sm); }
.kewpa-rasmi .kewpa-tajuk.is-rapat { margin-bottom: .5rem; }
.kewpa-subtajuk { margin: .75rem 0 .25rem; text-align: center; font-weight: 700; text-transform: uppercase; font-size: var(--atom-fs-sm); }
.kewpa-agensi { display: grid; grid-template-columns: max-content 1fr; gap: .125rem .5rem; margin-bottom: .25rem; }
.kewpa-agensi dt { font-weight: 400; }
.kewpa-agensi dt::after { content: " :"; }
.kewpa-agensi dd { margin: 0; }
.kewpa-agensi.is-tebal dt { font-weight: 700; }
.kewpa table.kewpa-grid { margin-top: .25rem; }
.kewpa table.kewpa-grid th { width: 22%; background: transparent; font-weight: 400; }
.kewpa table.kewpa-grid td { min-width: 0; }
.kewpa table.kewpa-grid td.is-tt { text-align: left; vertical-align: bottom; }
.kewpa .kewpa-seksyen th, .kewpa thead th { background: var(--atom-surface-alt); }
.kewpa .kewpa-seksyen th { text-align: center; font-weight: 700; text-transform: uppercase; background: var(--atom-border); }
.kewpa table.kewpa-mendatar { table-layout: fixed; }
.kewpa table.kewpa-mendatar th:first-child { width: 17%; }
.kewpa table.kewpa-mendatar tbody th { background: transparent; font-weight: 400; }
.kewpa table.kewpa-mendatar td { font-size: var(--atom-fs-xs); }
.kewpa table.kewpa-tt-kotak td { width: 50%; vertical-align: top; padding: .5rem .75rem; }
.kewpa table.kewpa-tt-kotak thead th { text-align: left; }
.kewpa-titik { display: block; margin-top: 2.25rem; letter-spacing: .1em; color: var(--atom-text-muted); }
.kewpa-titik.is-rapat { margin-top: .75rem; }
.kewpa-titik.is-isi { letter-spacing: normal; color: var(--atom-text); }
.kewpa-label-tt { font-size: var(--atom-fs-xs); }
.kewpa-baris-tt { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .5rem; font-size: var(--atom-fs-xs); }
.kewpa-baris-tt span:first-child { font-weight: 700; }
.kewpa-baris-tt span:first-child::after { content: " :"; }
.kewpa-tt-tunggal { max-width: 320px; }
.kewpa-semak { list-style: none; margin: .5rem 0 0; padding: 0; }
.kewpa-semak li::before { content: "\2610\00a0"; }
.kewpa-semak li.is-tanda::before { content: "\2611\00a0"; }
.kewpa-nota-kaki { margin: .5rem 0 0; font-size: var(--atom-fs-xs); }
.kewpa-nota-kotak { border: 3px double var(--atom-text); padding: .5rem .75rem; font-size: var(--atom-fs-xs); }
.kewpa-nota-kotak ol { margin: .25rem 0; padding-left: 1.5rem; }
.kewpa-nota-senarai { display: grid; grid-template-columns: max-content 1fr; gap: .125rem 1rem; margin: .75rem 0 0; font-size: var(--atom-fs-xs); }
.kewpa-nota-senarai dt { font-weight: 700; }
.kewpa-nota-senarai dd { margin: 0; }
.kewpa-periksa-bawah { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1rem; margin-top: 1rem; align-items: start; }
.kewpa-periksa-bawah .kewpa-titik { margin-top: 1.5rem; }
.kewpa-periksa-bawah .kewpa-titik + div { font-size: var(--atom-fs-xs); }
.kewpa .kewpa-tanda-tick { text-align: center; font-weight: 700; }
.kewpa input.kewpa-input { width: 100%; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); padding: .125rem .25rem; font-size: var(--atom-fs-xs); background: var(--atom-card); color: var(--atom-text); }
.kewpa .kewpa-radio { display: block; margin: 0 auto; }
.kewpa-pecah { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--atom-border-strong); }
@media (max-width: 767.98px) { .kewpa-periksa-bawah { grid-template-columns: 1fr; } .kewpa-kepala-rasmi { flex-direction: column; } }
@media print {
  .kewpa .kewpa-seksyen th, .kewpa thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kewpa-pecah { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .kewpa table { break-inside: auto; }
  .kewpa tr { break-inside: avoid; }
}

/* eInventori — Lapor Kerosakan: langkah, kad kategori & senarai pilihan peralatan */
.inv-langkah { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: langkah; font-size: var(--atom-fs-xs); }
.inv-langkah li { flex: 1; display: flex; align-items: center; gap: .375rem; padding-bottom: .375rem; border-bottom: 3px solid var(--atom-border); color: var(--atom-text-muted); counter-increment: langkah; }
.inv-langkah li::before { content: counter(langkah); display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--atom-surface-alt); font-weight: 700; }
.inv-langkah li.is-aktif { border-color: var(--atom-primary); color: var(--atom-text); font-weight: 600; }
.inv-langkah li.is-aktif::before { background: var(--atom-primary); color: #fff; }
.inv-langkah li.is-selesai { border-color: var(--atom-primary); }
.inv-pilih-kategori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.inv-kategori-kad { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); text-align: center; cursor: pointer; }
.inv-kategori-kad input { position: absolute; opacity: 0; pointer-events: none; }
.inv-kategori-kad .bi { font-size: 1.75rem; color: var(--atom-text-secondary); }
.inv-kategori-kad:has(input:checked) { border-color: var(--atom-primary); box-shadow: 0 0 0 2px var(--atom-primary); }
.inv-kategori-kad:has(input:checked) .bi { color: var(--atom-primary); }
.inv-kategori-kad:has(input:focus-visible) { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.inv-kategori-kad:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.inv-pilih-aset { max-height: 340px; overflow-y: auto; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); }
.inv-pilih-aset-baris { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem .75rem; border-bottom: 1px solid var(--atom-border); cursor: pointer; font-size: var(--atom-fs-sm); }
.inv-pilih-aset-baris:last-child { border-bottom: 0; }
.inv-pilih-aset-baris:hover { background: var(--atom-surface-alt); }
.inv-pilih-aset-baris .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.inv-pilih-aset-baris.is-tutup { cursor: not-allowed; opacity: .65; }
.inv-pilih-aset-baris[hidden] { display: none; }
.inv-perihal-baris + .inv-perihal-baris { margin-top: .5rem; }
@media (max-width: 575.98px) { .inv-pilih-kategori { grid-template-columns: 1fr; } .inv-langkah li { font-size: 0; } .inv-langkah li::before { font-size: var(--atom-fs-xs); } }

/* eInventori — Aduan Kerosakan: borang berseksyen, kesan, jejak aduan */
.inv-borang-seksyen { padding: .875rem 0; border-bottom: 1px solid var(--atom-border); }
.inv-borang-seksyen:first-of-type { padding-top: 0; }
.inv-borang-tajuk { display: flex; align-items: center; gap: .375rem; margin: 0 0 .625rem; font-size: var(--atom-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--atom-text-secondary); }
.inv-profil { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; font-size: var(--atom-fs-sm); }
.inv-profil dt { font-weight: 400; color: var(--atom-text-muted); }
.inv-profil dd { margin: 0; font-weight: 600; }
.inv-perihal-item { margin-top: .75rem; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); }
.inv-perihal-kepala { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: .5rem; font-size: var(--atom-fs-sm); }
.inv-perihal-bil { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--atom-primary); color: #fff; font-size: var(--atom-fs-xs); font-weight: 700; }
.inv-kiraan { text-align: right; margin-top: .125rem; }
.inv-kesan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.inv-kesan-pilih { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); cursor: pointer; }
.inv-kesan-pilih:has(input:checked) { border-color: var(--atom-primary); box-shadow: 0 0 0 1px var(--atom-primary); }
.inv-kesan-pilih.is-bahaya:has(input:checked) { border-color: var(--atom-danger); box-shadow: 0 0 0 1px var(--atom-danger); background: var(--atom-danger-light); }
.table-atom th.inv-lajur-rosak { min-width: 14rem; }
.inv-ringkas-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table-atom tr.inv-baris-bahaya > td { background: var(--atom-danger-light); }
.table-atom tr.inv-baris-bahaya > td:first-child { box-shadow: inset 3px 0 0 var(--atom-danger); }
.inv-jejak { list-style: none; margin: 0; padding: 0; }
.inv-jejak li { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.inv-jejak li:last-child { padding-bottom: 0; }
.inv-jejak li:not(:last-child)::before { content: ""; position: absolute; left: .875rem; top: 1.875rem; bottom: .125rem; width: 2px; background: var(--atom-border); }
.inv-jejak-ikon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--atom-primary); color: #fff; font-size: .8rem; }
.inv-jejak li.is-tamat .inv-jejak-ikon { background: var(--atom-text-secondary); }
.inv-jejak li.is-akan .inv-jejak-ikon { background: var(--atom-surface-alt); color: var(--atom-text-muted); border: 1px dashed var(--atom-border-strong); }
.inv-jejak li.is-akan { color: var(--atom-text-muted); }
.inv-jejak-kad { max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) { .inv-kesan { grid-template-columns: 1fr; } }

/* Lampiran gambar berkapsyen */
.inv-gambar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.inv-gambar-grid:empty { display: none; }
.inv-gambar-item { position: relative; margin: 0; display: flex; flex-direction: column; gap: .375rem; }
.inv-gambar-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); color: var(--atom-text-muted); font-size: 1.75rem; }
.inv-gambar-img img { width: 100%; height: 100%; object-fit: cover; }
.inv-gambar-item figcaption { font-size: var(--atom-fs-xs); color: var(--atom-text-secondary); }
.inv-gambar-buang { position: absolute; top: .25rem; right: .25rem; background: var(--atom-card); }
.inv-kewpa10-blok { margin-top: .5rem; padding: .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.inv-kewpa10-ringkas { display: grid; gap: .25rem; margin-bottom: .5rem; padding: .625rem .75rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); }
.inv-kewpa10-ringkas > div { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem; }
.inv-kewpa10-ringkas span { color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
@media print { .inv-gambar-grid { grid-template-columns: repeat(3, 1fr); } .inv-gambar-buang { display: none; } }

/* Daftar Peralatan — empat kategori utama */
.inv-kategori-utama { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.inv-kategori-btn { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-md); background: var(--atom-card); color: var(--atom-text); text-align: left; cursor: pointer; }
.inv-kategori-btn > .bi { font-size: 1.35rem; color: var(--atom-text-muted); }
.inv-kategori-btn:hover { border-color: var(--atom-primary); }
.inv-kategori-btn.is-aktif { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: inset 0 0 0 1px var(--atom-primary); }
.inv-kategori-btn.is-aktif > .bi { color: var(--atom-primary); }
.inv-kategori-label { display: block; font-weight: 600; font-size: var(--atom-fs-sm); }
.inv-kategori-bil { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
@media (max-width: 991.98px) { .inv-kategori-utama { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .inv-kategori-utama { grid-template-columns: 1fr; } }
.inv-jenis-daftar { padding-top: .375rem; font-size: var(--atom-fs-sm); }

/* Kalibrasi — hantar berbilang */
#tableKal .col-check { width: 42px; padding-inline: .75rem .25rem; }
.inv-pukal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .625rem 1rem; border-bottom: 1px solid var(--atom-border); background: var(--atom-primary-light); font-size: var(--atom-fs-sm); }
.rp-baris-perhatian > td { background: var(--atom-warning-light); }
.ps-langkah-item.is-gagal .ps-langkah-no { border-color: var(--atom-danger); background: var(--atom-danger); color: #fff; }
.ps-langkah-item.is-gagal .ps-langkah-label { color: var(--atom-danger); }

/* Penyelenggaraan stesen GDRMS / GSWMS */
.st-memo, .st-laporan { max-width: none; }
.st-laporan .badge-atom { white-space: nowrap; }
/* Borang ERMS (Lampiran 1, A–D) */
.st-lulus { min-width: 112px; }
.inv-emel { margin: 0; padding: .75rem 1rem; white-space: pre-wrap; font-family: inherit; font-size: var(--atom-fs-sm); background: var(--atom-surface-alt); border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); }
#tabTugasan { flex-wrap: wrap; }
.table-atom tr.st-baris-kumpulan > td { border-top: 2px solid var(--atom-border); }
#tabTugasan .badge-count .bi { font-size: .85rem; }
@media print {
  .st-tanpa-cetak { display: none !important; }
  #panelLaporan { display: block !important; opacity: 1 !important; }
  .st-laporan { border: 0; padding: 0; }
}
#tabTugasan .badge-count:empty { display: none; }

/* Menu eRAD boleh runtuh — jumlah lencana pada kepala kumpulan, disorok apabila dibuka */
.sidebar-group > .sidebar-link[aria-expanded="true"] .sidebar-badge-kumpulan { display: none; }
.sidebar-group > .sidebar-link .sidebar-badge-kumpulan + .sidebar-caret { margin-left: .5rem; }

/* Rekod LCM — jenis pengesan, status semasa, ringkasan kerosakan */
.inv-pengesan-senarai { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.inv-pengesan { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); white-space: nowrap; }
.inv-pengesan.is-ada { color: var(--atom-text); font-weight: 600; }
.inv-pengesan.is-ada .bi { color: var(--atom-success); }
.inv-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1.5rem; }
.inv-status-sel { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.inv-status-label { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.inv-status-nilai { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.inv-status-nilai.is-ya { color: var(--atom-text); font-weight: 600; }
.inv-status-nilai.is-ya .bi { color: var(--atom-primary); }
@media (max-width: 991.98px) { .inv-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inv-pecahan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--atom-border-subtle); }
.inv-pecahan > div { padding: .5rem 1rem; display: flex; flex-direction: column; }
.inv-pecahan > div + div { border-left: 1px solid var(--atom-border-subtle); }
.inv-pecahan span { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.inv-pecahan strong { font-size: var(--atom-fs-sm); }
.lcm-pengesan { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ==========================================================================
   MPS — Dashboard iExam mengikut peranan (BF-EA-EXM-01)
   Sama seperti dashboard eSPP (espp.css: .meter-espp, .peranan-huraian,
   .senarai-status) — disalin di sini kerana MPS tidak memuat espp.css.
   ========================================================================== */
.mps-stat { display: block; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mps-stat:hover { border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-sm, 0 1px 3px rgba(15, 23, 42, .08)); }
.mps-stat:focus-visible { outline: 2px solid var(--atom-primary); outline-offset: 2px; }
.mps-peranan-huraian { margin: 0 0 1rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.mps-meter .pencapaian-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.mps-meter .pencapaian-donut { max-width: 190px; margin-inline: auto; }
.mps-meter .pencapaian-tiles { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.mps-meter .pencapaian-tile:hover { background: var(--atom-surface-alt); border-color: var(--atom-border); box-shadow: none; }
.mps-senarai-status li strong { margin-left: auto; padding-left: .75rem; color: var(--atom-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   eAdmin — Daftar Aset Tunggal ATOM (da-)
   Senarai Aset · Daftar Aset · Butiran · Pergerakan Kew.PA-10 · Audit Trail
   ========================================================================== */
.da-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.min-w-0 { min-width: 0; }

/* Jalur konsep sumber tunggal */
.da-sumber {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding: .875rem 1.125rem; margin-bottom: 1rem;
  background: var(--atom-primary-light); border: 1px solid var(--atom-primary-soft); border-radius: var(--atom-radius-lg);
}
.da-sumber-induk { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.da-sumber-ikon {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--atom-radius); background: var(--atom-primary); color: #fff; font-size: 1.125rem;
}
.da-sumber-tajuk { font-weight: 600; color: var(--atom-text); }
.da-sumber-teks { font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.da-sumber-modul { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.da-sumber-modul li {
  display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem;
  font-size: var(--atom-fs-xs); font-weight: 500; color: var(--atom-text-secondary);
  background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius-pill);
}
.da-sumber-modul .bi { color: var(--atom-primary); }

/* Kad ringkasan boleh klik (tapis ikut status / jenis) */
.da-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.da-stat-kad {
  position: relative; display: flex; flex-direction: column; gap: .125rem; text-align: left;
  padding: .875rem 1rem .875rem 1.125rem; background: var(--atom-card); color: var(--atom-text);
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg); box-shadow: var(--atom-shadow-xs);
  transition: border-color var(--atom-transition), box-shadow var(--atom-transition);
  overflow: hidden;
}
.da-stat-kad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--da-warna, var(--atom-primary)); }
.da-stat-kad:hover { border-color: var(--atom-border-strong); box-shadow: var(--atom-shadow-sm); }
.da-stat-kad:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.da-stat-kad.is-aktif { border-color: var(--da-warna, var(--atom-primary)); box-shadow: 0 0 0 1px var(--da-warna, var(--atom-primary)); }
.da-stat-kad.is-jumlah { --da-warna: var(--atom-primary-800); }
.da-stat-kad.is-success { --da-warna: var(--atom-success); }
.da-stat-kad.is-primary { --da-warna: var(--atom-primary); }
.da-stat-kad.is-warning { --da-warna: var(--atom-warning); }
.da-stat-kad.is-info { --da-warna: var(--atom-info); }
.da-stat-kad.is-neutral { --da-warna: var(--atom-neutral); }
.da-stat-kad.is-danger { --da-warna: var(--atom-danger); }
.da-stat-kad.is-audit-pendaftaran { --da-warna: var(--atom-primary); }
.da-stat-kad.is-audit-kemaskini { --da-warna: var(--atom-info); }
.da-stat-kad.is-audit-pergerakan { --da-warna: var(--atom-warning); }
.da-stat-label { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); }
.da-stat-label .bi { color: var(--da-warna); }
.da-stat-nilai { font-size: var(--atom-fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.da-stat-meta { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.da-stat-meta.is-bahaya { color: var(--atom-danger); font-weight: 600; }

/* Jadual — padat supaya 9 lajur muat pada desktop tanpa skrol */
.da-jadual tbody td { vertical-align: top; }
.da-jadual thead th, .da-jadual tbody td { padding-left: .5rem; padding-right: .5rem; }
.da-jadual thead th:first-child, .da-jadual tbody td:first-child { padding-left: .875rem; }
.da-jadual .badge-atom > .bi, .da-jadual .da-jenis > .bi { display: none; }
.da-jadual tbody td { font-size: var(--atom-fs-sm); }
.da-jadual thead th { white-space: normal; vertical-align: bottom; }
.da-jadual .da-sel-nama { min-width: 140px; }
.da-jadual .da-sel-pegawai { min-width: 125px; max-width: 150px; }
.da-jadual .da-sel-kategori { max-width: 130px; }
.da-jadual .da-sel-aktiviti { max-width: 150px; }
.da-jadual .da-sel-aktiviti .btn-link { font-size: var(--atom-fs-xs); text-align: left; }
.da-no-aset { color: var(--atom-primary); text-decoration: none; white-space: nowrap; font-size: var(--atom-fs-sm); font-variant-numeric: tabular-nums; }
.da-no-aset:hover { text-decoration: underline; }
.da-sel-lokasi { min-width: 130px; max-width: 190px; }
.da-sel-catatan { min-width: 180px; max-width: 280px; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.da-baris-lupus td { background: var(--atom-surface-alt); color: var(--atom-text-muted); }
.da-baris-lupus .da-no-aset { color: var(--atom-text-secondary); }
.da-nota-status { display: block; margin-top: .25rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.da-nota-status.is-lewat { color: var(--atom-danger); font-weight: 600; }
.da-tanda {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; padding: .0625rem .5rem;
  font-size: var(--atom-fs-xs); font-weight: 600; border-radius: var(--atom-radius-pill);
}
.da-tanda.is-bahaya { background: var(--atom-danger-light); color: var(--atom-danger); }
.da-lokasi-dari { display: block; color: var(--atom-text-muted); font-size: var(--atom-fs-sm); }
.da-lokasi-ke { display: block; }

/* Lencana jenis pergerakan */
.da-jenis {
  display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; white-space: nowrap;
  font-size: var(--atom-fs-xs); font-weight: 600; border-radius: var(--atom-radius-sm);
  background: var(--atom-surface-alt); color: var(--atom-text-secondary); border: 1px solid var(--atom-border);
}
.da-jenis.is-warning { background: var(--atom-warning-light); color: var(--atom-warning); border-color: #F5E0C3; }
.da-jenis.is-success { background: var(--atom-success-light); color: var(--atom-success); border-color: #CDEBD8; }
.da-jenis.is-primary { background: var(--atom-primary-light); color: var(--atom-primary); border-color: var(--atom-primary-soft); }
.da-jenis.is-info { background: var(--atom-info-light); color: var(--atom-info); border-color: #CCE0F2; }
.da-jenis.is-danger { background: var(--atom-danger-light); color: var(--atom-danger); border-color: #F7D4D4; }

/* Garis masa sejarah */
.timeline-marker.is-info { background: var(--atom-info-light); color: var(--atom-info); }
.timeline-marker.is-primary { background: var(--atom-primary-light); color: var(--atom-primary); }
.da-timeline .timeline-item { padding-bottom: 1.375rem; }
.da-tl-kepala { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.da-tl-ruj { font-size: var(--atom-fs-xs); text-decoration: none; }
.da-tl-status { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .25rem 0 .375rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.da-timeline .timeline-text { margin-bottom: .125rem; }
.da-timeline .timeline-text .bi { color: var(--atom-text-muted); }
.da-tl-catatan { padding: .375rem .625rem; margin-top: .375rem !important; background: var(--atom-surface-alt); border-radius: var(--atom-radius-sm); font-style: italic; }
.da-offcanvas { width: min(460px, 100vw) !important; }
.da-oc-semasa {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem; margin-bottom: 1.25rem;
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
}

/* Kesan pergerakan kepada rekod aset */
.da-kesan { border: 1px solid var(--atom-border); border-radius: var(--atom-radius); overflow: hidden; margin-bottom: 1.25rem; }
.da-kesan.is-ramalan { border-color: var(--atom-primary-soft); margin: 1.25rem 0 0; }
.da-kesan-kepala {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem;
  font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: var(--atom-surface-alt); color: var(--atom-text-secondary); border-bottom: 1px solid var(--atom-border);
}
.da-kesan.is-ramalan .da-kesan-kepala { background: var(--atom-primary-light); color: var(--atom-primary); border-color: var(--atom-primary-soft); }
.da-kesan-grid { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; }
.da-kesan-label, .da-kesan-nilai { padding: .5rem .875rem; border-bottom: 1px solid var(--atom-border-subtle); font-size: var(--atom-fs-sm); }
.da-kesan-grid > :nth-last-child(-n+2) { border-bottom: 0; }
.da-kesan-label { color: var(--atom-text-muted); font-weight: 500; }
.da-kesan-nilai { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; min-width: 0; }
.da-kesan-nilai > .bi { color: var(--atom-primary); }
.da-kesan-dari { color: var(--atom-text-muted); }
.da-kesan-dari .badge-atom { opacity: .7; }
.da-kesan-ke { font-weight: 600; }
.da-kesan-tetap { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.da-kesan-nota { margin: 0; padding: .5rem .875rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); border-top: 1px solid var(--atom-border-subtle); }
@media (max-width: 575.98px) {
  .da-kesan-grid { grid-template-columns: 1fr; }
  .da-kesan-label { padding-bottom: 0; border-bottom: 0; }
}

/* Modal rekod pergerakan */
.da-modal-aset {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem;
  background: var(--atom-surface-alt); border: 1px solid var(--atom-border); border-radius: var(--atom-radius);
}
.da-modal-aset-ikon {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius); color: var(--atom-primary);
}
.da-jenis-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.da-jenis-kad.is-disekat { opacity: .55; cursor: not-allowed; background: var(--atom-surface-alt); }
.da-jenis-kad.is-disekat:hover { border-color: var(--atom-border); }
.da-jenis-ikon.is-warning { color: var(--atom-warning); }
.da-jenis-ikon.is-success { color: var(--atom-success); }
.da-jenis-ikon.is-primary { color: var(--atom-primary); }
.da-jenis-ikon.is-info { color: var(--atom-info); }
.da-jenis-ikon.is-danger { color: var(--atom-danger); }

/* Borang daftar */
@media (min-width: 1200px) { .da-sisi:first-child { position: sticky; top: calc(var(--atom-navbar-height) + 1rem); } }
.da-status-awal { min-height: 1.75rem; display: flex; align-items: center; }
.da-status-awal .badge-atom { font-size: var(--atom-fs-sm); padding: .375rem .75rem; }
.da-peraturan { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.da-peraturan li { display: flex; gap: .625rem; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.da-peraturan .bi { flex: 0 0 auto; color: var(--atom-primary); margin-top: .125rem; }

/* Butiran aset */
.da-subtajuk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.da-subtajuk .da-mono { font-weight: 600; color: var(--atom-text-secondary); }
.da-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.da-ringkas-kad {
  display: flex; gap: .75rem; padding: .875rem 1rem; background: var(--atom-card);
  border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg); box-shadow: var(--atom-shadow-xs);
}
.da-ringkas-ikon {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--atom-primary-light); color: var(--atom-primary); border-radius: var(--atom-radius);
}
.da-ringkas-label { font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-text-muted); margin-bottom: .125rem; }
.da-ringkas-nilai { font-weight: 600; color: var(--atom-text); overflow-wrap: anywhere; }
.da-ringkas-sub { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); margin-top: .125rem; }
.da-sub-tajuk {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  font-size: var(--atom-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--atom-text-secondary); margin: 0 0 .5rem;
}
.da-sub-nota { font-size: var(--atom-fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--atom-text-muted); }
.da-rujukan { padding: 1rem 1.125rem; background: var(--atom-surface-alt); border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius-lg); }
.da-rujukan-kepala { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .25rem; }
.da-rujukan-kepala .bi { color: var(--atom-primary); }
.da-rujukan-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.da-rujukan-senarai li { padding: .625rem .75rem; background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius); font-size: var(--atom-fs-sm); }
.da-rujukan-senarai a { text-decoration: none; }
.da-tab-alat {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--atom-border);
}

/* Audit — baris dikumpul ikut entri */
.da-jadual-audit .da-audit-sambung td { border-top-color: var(--atom-border-subtle); }
.da-jadual-audit .da-audit-mula td { border-top: 1px solid var(--atom-border); }
.da-nilai-sebelum { color: var(--atom-text-muted); min-width: 110px; max-width: 160px; }
.da-nilai-selepas { font-weight: 500; min-width: 110px; max-width: 150px; }

/* Aliran halaman pergerakan */
.da-aliran {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; margin-bottom: 1rem;
  background: var(--atom-card); border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg);
}
.da-aliran-langkah { display: flex; align-items: center; gap: .625rem; flex: 1 1 200px; }
.da-aliran-langkah strong { display: block; font-size: var(--atom-fs-sm); }
.da-aliran-langkah span:not(.da-aliran-no) { display: block; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.da-aliran-no {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--atom-primary); color: #fff; font-size: var(--atom-fs-xs); font-weight: 700;
}
.da-aliran-anak { color: var(--atom-text-muted); }
@media (max-width: 767.98px) { .da-aliran-anak { display: none; } }

/* Media Kreatif — Draf Siaran Media (gaya templat rasmi, kertas A4; kekal
   putih dalam mod gelap kerana ia dokumen untuk dicetak) */
.mk-sm-dokumen { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; background: var(--atom-surface-alt); border-radius: var(--atom-radius); overflow-x: auto; }
.mk-sm-halaman {
  width: 210mm; max-width: 100%; min-height: 297mm; box-sizing: border-box; padding: 18mm 22mm;
  background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.75;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.mk-sm-kepala { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.mk-sm-kepala img { height: 64px; width: auto; }
.mk-sm-kementerian { font-size: 7.5pt; font-weight: 700; line-height: 1.3; text-align: center; border-right: 1px solid #999; padding-right: 2rem; }
.mk-sm-jenis { font-size: 12pt; font-weight: 700; text-align: center; margin: 0 0 1rem; color: #111; }
.mk-sm-agensi { font-weight: 700; text-align: center; line-height: 1.35; margin: 0; }
.mk-sm-garis { border: 0; border-top: 1.5px solid #111; opacity: 1; margin: .5rem 0; }
.mk-sm-tajuk { font-size: 12pt; font-weight: 700; text-align: center; line-height: 1.4; margin: .75rem 0; color: #111; }
.mk-sm-perenggan { text-align: justify; margin: 0 0 .9rem; }
.mk-sm-tamat { font-weight: 700; text-align: center; margin: 2rem 0 .5rem; }
.mk-sm-oleh { margin: 0 0 1rem; }
.mk-sm-unit { font-weight: 700; line-height: 1.4; margin: 0; }
.mk-sm-subtajuk { font-size: 11pt; font-weight: 700; margin: 1rem 0 .25rem; color: #111; }
.mk-sm-senarai { text-align: justify; padding-left: 1.5rem; }
.mk-sm-senarai li { margin-bottom: .25rem; }
.mk-sm-halaman [contenteditable="true"] { border-radius: 2px; outline: 1px dashed transparent; transition: outline-color .15s; }
.mk-sm-halaman [contenteditable="true"]:hover { outline-color: #9ca3af; }
.mk-sm-halaman [contenteditable="true"]:focus { outline: 2px solid var(--atom-primary); background: #fffbea; }
.mk-sm-kepala.is-tengah img { height: 56px; }
/* Draf Siaran Media — mod suntingan & kad ringkasan */
.mk-sm-blok { position: relative; }
.mk-sm-buang {
  position: absolute; top: 0; right: -2.25rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border: 1px solid #e5e7eb; border-radius: 50%; background: #fff; color: #b91c1c; font-size: .8rem; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.mk-sm-blok:hover .mk-sm-buang, .mk-sm-buang:focus-visible { opacity: 1; }
.mk-sm-tambah {
  display: block; width: 100%; margin: .25rem 0 .5rem; padding: .4rem; border: 1px dashed #9ca3af; border-radius: 4px;
  background: transparent; color: #4b5563; font: inherit; font-size: 9.5pt; cursor: pointer;
}
.mk-sm-tambah:hover { border-color: var(--atom-primary); color: var(--atom-primary); }
.mk-sm-halaman [data-sm="teks"]:empty::before { content: 'Tulis perenggan baharu…'; color: #9ca3af; }
.mk-sm-halaman [data-sm="teks"] { display: inline; }
.mk-sm-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mk-sm-versi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--atom-fs-sm); }
.mk-sm-versi .form-select { width: auto; max-width: 100%; }
/* Perenggan berubah berbanding versi sebelumnya (jejak perubahan) */
.mk-sm-petunjuk { display: inline-flex; align-items: center; gap: .375rem; color: var(--atom-text-muted); font-size: var(--atom-fs-xs); }
.mk-sm-petunjuk-warna { width: .875rem; height: .875rem; border-radius: 2px; background: #fef9c3; border-left: 3px solid #ca8a04; }
.mk-sm-blok.is-berubah { background: #fef9c3; box-shadow: -6px 0 0 #fef9c3, 6px 0 0 #fef9c3; border-left: 3px solid #ca8a04; margin-left: -9px; padding-left: 6px; }
.mk-sm-ringkas { padding: .875rem 1rem; border: 1px solid var(--atom-border); border-left: 3px solid var(--atom-primary); border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); }
.mk-sm-ringkas-tajuk { font-weight: 700; text-transform: uppercase; margin-bottom: .35rem; }
@media (max-width: 991.98px) { .mk-sm-buang { right: .25rem; top: -.5rem; opacity: 1; } }
.mk-sm-terbit { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }
.mk-sm-terbit > .bi { font-size: 1.25rem; color: var(--atom-primary); }
.mk-sm-terbit .mk-pautan { word-break: break-all; }
/* Status pergerakan kelulusan KP (Siaran Media) */
.mk-gerak-ringkas { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .625rem .875rem; margin-bottom: 1rem; border-radius: var(--atom-radius-sm); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); }
.mk-gerak-senarai { list-style: none; margin: 0; padding: 0; }
.mk-gerak { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.mk-gerak:not(:last-child)::before { content: ''; position: absolute; left: .9375rem; top: 2rem; bottom: 0; width: 2px; background: var(--atom-border); }
.mk-gerak-ikon { flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--atom-surface-alt); color: var(--atom-text-muted); }
.mk-gerak.is-info .mk-gerak-ikon { background: var(--atom-info-light); color: var(--atom-info); }
.mk-gerak.is-bahaya .mk-gerak-ikon { background: var(--atom-danger-light); color: var(--atom-danger); }
.mk-gerak.is-lulus .mk-gerak-ikon { background: var(--atom-success-light); color: var(--atom-success); }
.mk-gerak-isi { flex: 1; min-width: 0; font-size: var(--atom-fs-sm); }
.mk-gerak-catatan { margin-top: .35rem; padding: .4rem .625rem; border-left: 3px solid var(--atom-border); background: var(--atom-surface-alt); border-radius: 0 var(--atom-radius-sm) var(--atom-radius-sm) 0; }
.mk-gerak.is-bahaya .mk-gerak-catatan { border-left-color: var(--atom-danger); }
/* Kelulusan Siaran Media (KP) — ulasan sebelum ini vs pembetulan pegawai */
.mk-kp-banding { display: grid; gap: .75rem; }
@media (min-width: 768px) { .mk-kp-banding { grid-template-columns: 1fr 1fr; } }
.mk-kp-banding-item { padding: .75rem 1rem; border: 1px solid var(--atom-border); border-left-width: 3px; border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); }
.mk-kp-banding-item.is-tolak { border-left-color: var(--atom-danger); background: var(--atom-danger-light); }
.mk-kp-banding-item.is-semula { border-left-color: var(--atom-info); background: var(--atom-info-light); }
.mk-kp-banding-label { display: block; font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); margin-bottom: .25rem; }

/* ==========================================================================
   eDOC — Pengurusan Pengetahuan: Laporan Kehadiran Luar Negara
   (BF-EA-SPD-PP-01) — Chatbot AI dan pilihan saluran muat naik
   ========================================================================== */
.pp-chat { display: flex; flex-direction: column; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); overflow: hidden; background: var(--atom-card); }
.pp-chat-log { display: flex; flex-direction: column; gap: .75rem; min-height: 260px; max-height: 460px; overflow-y: auto; padding: 1rem; background: var(--atom-surface-alt); }
.pp-chat-mesej { max-width: 85%; padding: .625rem .875rem; border-radius: var(--atom-radius-sm); font-size: var(--atom-fs-sm); line-height: 1.5; }
.pp-chat-mesej p { margin-bottom: .5rem; }
.pp-chat-mesej p:last-child { margin-bottom: 0; }
.pp-chat-mesej.is-pengguna { align-self: flex-end; background: var(--atom-primary); color: #fff; }
.pp-chat-mesej.is-bot { align-self: flex-start; background: var(--atom-card); border: 1px solid var(--atom-border); }
.pp-chat-nama { display: block; margin-bottom: .25rem; font-size: var(--atom-fs-xs); font-weight: 600; color: var(--atom-primary); }
.pp-chat-sumber { display: flex; flex-direction: column; gap: .375rem; margin-bottom: .5rem; }
.pp-chat-sumber a { display: block; padding: .375rem .625rem; border: 1px solid var(--atom-border); border-left: 3px solid var(--atom-primary); border-radius: var(--atom-radius-sm); text-decoration: none; }
.pp-chat-sumber a:hover { background: var(--atom-primary-light); }
.pp-chat-nota { font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.pp-chat-cadangan { display: flex; flex-wrap: wrap; gap: .375rem; padding: .75rem 1rem 0; }
.pp-chat-input { display: flex; gap: .5rem; padding: .75rem 1rem; }
.pp-chat-menaip { display: inline-flex; gap: .25rem; }
.pp-chat-menaip span { width: .375rem; height: .375rem; border-radius: 50%; background: var(--atom-text-muted); animation: pp-menaip 1s infinite ease-in-out; }
.pp-chat-menaip span:nth-child(2) { animation-delay: .15s; }
.pp-chat-menaip span:nth-child(3) { animation-delay: .3s; }
@keyframes pp-menaip { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-chat-menaip span { animation: none; } }

.pp-saluran { display: grid; gap: .75rem; }
@media (min-width: 768px) { .pp-saluran { grid-template-columns: 1fr 1fr; } }
.pp-saluran-pilihan { display: flex; gap: .75rem; align-items: flex-start; height: 100%; padding: .875rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-sm); cursor: pointer; }
.pp-saluran-pilihan > .bi { font-size: 1.375rem; color: var(--atom-text-muted); }
.pp-saluran-pilihan strong { display: block; }
.pp-saluran-pilihan small { display: block; color: var(--atom-text-secondary); font-size: var(--atom-fs-xs); }
.btn-check:checked + .pp-saluran-pilihan { border-color: var(--atom-primary); background: var(--atom-primary-light); box-shadow: inset 0 0 0 1px var(--atom-primary); }
.btn-check:checked + .pp-saluran-pilihan > .bi { color: var(--atom-primary); }
.btn-check:focus-visible + .pp-saluran-pilihan { outline: 2px solid var(--atom-primary); outline-offset: 2px; }

/* ==========================================================================
   Kuiz dan Penilaian — Pengurusan Kuiz (pembina, butiran, Kod QR)
   ========================================================================== */
.kp-jadual-soalan a.kp-pautan-soalan { text-decoration: none; }
.kp-jadual-soalan a.kp-pautan-soalan:hover { color: var(--atom-primary); }
.kz-pilih-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .kz-pilih-2 { grid-template-columns: minmax(0, 1fr); } }
.kz-kod-input { font-family: var(--atom-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 600; letter-spacing: .06em; }

/* Bahagian & soalan */
.kz-kosong { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1rem; border: 1px dashed var(--atom-border-strong); border-radius: var(--atom-radius); background: var(--atom-surface-alt); color: var(--atom-text-secondary); text-align: center; font-size: var(--atom-fs-sm); }
.kz-kosong > i { font-size: 1.5rem; color: var(--atom-text-muted); }

/* Tab bahagian (gaya Sago): pembina & butiran */
.kz-tab-bahagian { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kz-tab-bahagian[hidden] { display: none; }
.kz-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .4375rem .875rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); color: var(--atom-text-secondary); font-size: var(--atom-fs-sm); font-weight: 500; cursor: pointer; }
.kz-tab:hover { border-color: var(--atom-primary); color: var(--atom-primary); }
.kz-tab:focus-visible { outline: none; box-shadow: var(--atom-shadow-focus); }
.kz-tab.is-aktif { background: var(--atom-primary); border-color: var(--atom-primary); color: #fff; }
.kz-tab-kira { min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--atom-surface-sunken); color: var(--atom-text-secondary); font-size: var(--atom-fs-xs); font-weight: 600; text-align: center; }
.kz-tab.is-aktif .kz-tab-kira { background: rgba(255, 255, 255, .22); color: #fff; }
.kz-tab.ada-ralat { border-color: var(--atom-danger); }
.kz-tab-ralat { color: var(--atom-danger); }
.kz-tab.is-aktif .kz-tab-ralat { color: #fff; }
.kz-tab-tambah { border-style: dashed; }
.kz-bahagian-kepala { display: flex; align-items: flex-start; gap: .5rem; }
.kz-bahagian-kepala .form-control { background: var(--atom-card); font-weight: 600; }

/* Kad soalan dalam pembina */
.kz-soalan-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kz-soalan-jenis { width: auto; min-width: 10rem; }
.kz-soalan-markah { width: 8.5rem; }
.kz-pilihan-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem; margin-top: .25rem; }

/* Butiran Kuiz */
.kz-info-grid { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.kz-info-grid.is-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .kz-info-grid.is-dua { grid-template-columns: minmax(0, 1fr); } }
.kz-info { display: grid; gap: .25rem; align-content: start; }
.kz-info-label { font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.kz-info-nilai { color: var(--atom-text); line-height: 1.45; }
.kz-pautan { display: flex; gap: .5rem; align-items: center; margin-top: .375rem; }
.kz-pautan-url { flex: 1 1 auto; background: var(--atom-surface-alt); font-family: var(--atom-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--atom-fs-sm); }
.kz-baca-senarai { display: grid; gap: .75rem; }
.kz-baca { display: grid; gap: .5rem; padding: .875rem 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); }
.kz-baca-kepala { display: flex; gap: .625rem; align-items: flex-start; }
.kz-baca-lencana { display: flex; flex-wrap: wrap; gap: .375rem; }
.kz-baca-pilihan { margin: 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.kz-baca-pilihan li.is-betul { color: var(--atom-success); font-weight: 600; }
.kz-baca-penjelasan { margin: 0; padding: .5rem .75rem; border-radius: var(--atom-radius); background: var(--atom-surface-alt); font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.kz-soalan-teks { margin: 0; font-weight: 600; color: var(--atom-text); line-height: 1.45; }
.kz-bahagian { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.kz-soalan-senarai { display: grid; gap: .75rem; }
.kz-soalan { display: grid; gap: .5rem; padding: .875rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius); background: var(--atom-card); }
.kz-soalan-no { font-size: var(--atom-fs-xs); font-weight: 700; color: var(--atom-primary); padding: .125rem .5rem; border-radius: 999px; background: var(--atom-primary-light); }
.kz-soalan-aksi { display: flex; gap: .125rem; margin-left: auto; }

.kz-pilihan-baris .kz-betul { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: 0; cursor: pointer; }
.kz-pilihan-baris.is-betul .form-control { border-color: var(--atom-success); background: var(--atom-success-light); }
.kz-pilihan-baris .kz-betul:checked { background-color: var(--atom-success); border-color: var(--atom-success); }

/* Kod QR */
.kz-qr { display: grid; justify-items: center; text-align: center; }
.kz-qr-kotak { width: 11rem; height: 11rem; display: grid; place-items: center; margin-bottom: 1rem; border: 1px solid var(--atom-border); border-radius: var(--atom-radius-lg, .75rem); background: #fff; color: #111; font-size: 8rem; line-height: 1; }
.kz-qr-nama { margin: 0 0 .25rem; font-weight: 600; color: var(--atom-text); }
.kz-qr-kod { display: inline-block; padding: .375rem 1rem; border-radius: var(--atom-radius); background: var(--atom-surface-sunken); font-family: var(--atom-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; color: var(--atom-text); }
.kz-qr-kod.is-kecil { padding: .125rem .5rem; font-size: var(--atom-fs-sm); letter-spacing: .06em; }


/* Keputusan Kuiz — jawapan peserta & analisis soalan */
.kz-jawapan-ringkas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: .875rem 1rem; margin-bottom: 1rem; border-radius: var(--atom-radius); background: var(--atom-surface-alt); }
.kz-jawapan-ringkas strong { display: block; color: var(--atom-text); }
.kz-jawapan-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.kz-jawapan-senarai li { display: grid; gap: .25rem; padding: .75rem .875rem; border: 1px solid var(--atom-border); border-left: 3px solid var(--atom-success); border-radius: var(--atom-radius); }
.kz-jawapan-senarai li.is-salah { border-left-color: var(--atom-danger); }
.kz-jawapan-kepala { display: flex; align-items: center; gap: .5rem; }
.kz-jawapan-pilih { margin: 0; font-size: var(--atom-fs-sm); color: var(--atom-text-secondary); }
.kz-analisis { display: grid; gap: .75rem; }
.kz-analisis-bahagian { margin: .5rem 0 0; font-size: var(--atom-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--atom-text-muted); }
.kz-analisis-kad { margin: 0; }
.kz-analisis-kepala { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; margin-bottom: .75rem; }
.kz-analisis-peratus { min-width: 4.5rem; padding: .375rem .625rem; border-radius: var(--atom-radius); text-align: center; line-height: 1.1; }
.kz-analisis-peratus strong { display: block; font-size: 1.25rem; }
.kz-analisis-peratus span { font-size: var(--atom-fs-xs); }
.kz-analisis-peratus.is-baik { background: var(--atom-success-light); color: var(--atom-success); }
.kz-analisis-peratus.is-sederhana { background: var(--atom-warning-light); color: var(--atom-warning); }
.kz-analisis-peratus.is-lemah { background: var(--atom-danger-light); color: var(--atom-danger); }
.kz-analisis-pilihan { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.kz-analisis-pilihan li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 6.5rem; align-items: center; gap: .75rem; font-size: var(--atom-fs-sm); }
.kz-analisis-label { display: inline-flex; align-items: center; gap: .375rem; color: var(--atom-text-secondary); }
.kz-analisis-pilihan li.is-betul .kz-analisis-label { color: var(--atom-success); font-weight: 600; }
.kz-analisis-bar { height: .5rem; border-radius: 999px; background: var(--atom-surface-sunken); overflow: hidden; }
.kz-analisis-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--atom-border-strong); }
.kz-analisis-pilihan li.is-betul .kz-analisis-bar > span { background: var(--atom-success); }
.kz-analisis-nilai { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  .kz-analisis-pilihan li { grid-template-columns: minmax(0, 1fr) auto; }
  .kz-analisis-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   eDOC — Dokumen Panduan: laporan kajian analisis (> 5 tahun)
   Format "Status Dokumen Panduan ATOM Malaysia" — dikumpul mengikut siri
   ========================================================================== */
.dpn-laporan-tajuk { margin: 0 0 .75rem; text-align: center; font-weight: 700; text-decoration: underline; font-size: var(--atom-fs-sm); }
.dpn-laporan { width: 100%; border-collapse: collapse; font-size: var(--atom-fs-sm); }
.dpn-laporan th, .dpn-laporan td { border: 1px solid var(--atom-border-strong); padding: .375rem .5rem; vertical-align: top; }
.dpn-laporan thead th { background: var(--atom-warning-light); text-align: center; font-weight: 700; font-size: var(--atom-fs-xs); }
.dpn-laporan-siri td { background: var(--atom-success-light); font-weight: 700; text-align: center; }
.dpn-laporan tr.is-lebih td { background: var(--atom-danger-light); }

/* ==========================================================================
   eDOC — Pengurusan Dokumen ISO (BF-EA-SPD-ISO-01)
   ========================================================================== */
/* Senarai Induk & Manual (seperti Laman Web Warga ATOM) */
.iso-induk {
  border-left: 4px solid var(--atom-primary);
  background: var(--atom-surface-alt);
  border-radius: var(--atom-radius-sm);
  padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.iso-induk-tajuk { font-weight: 600; text-decoration: underline; }

/* Senarai prosedur dalam setiap kumpulan */
.iso-prosedur { list-style: none; margin: 0; padding: 0; }
.iso-prosedur li { padding: .375rem 0; border-bottom: 1px dashed var(--atom-border); }
.iso-prosedur li:last-child { border-bottom: 0; }

/* Cop digital (digital stamp) */
.iso-cop {
  display: inline-flex; flex-direction: column; align-items: center; gap: .125rem;
  border: 2px solid var(--atom-primary);
  border-radius: var(--atom-radius);
  background: var(--atom-primary-soft);
  color: var(--atom-primary);
  padding: .5rem 1rem;
  font-size: var(--atom-fs-xs); line-height: 1.35; text-align: center;
  transform: rotate(-1.5deg);
}
.iso-cop-tajuk { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--atom-fs-sm); }
.iso-cop-jabatan { font-weight: 600; }
.iso-cop-no { font-family: var(--bs-font-monospace); font-weight: 600; }
.iso-cop.is-pratonton { border-style: dashed; opacity: .85; }
.iso-cop.is-obsolete { border-color: var(--atom-neutral); background: var(--atom-neutral-light); color: var(--atom-neutral); }

/* ==========================================================================
   eDOC — Pengurusan Mesyuarat (BF-EA-SPD-MSY-01)
   ========================================================================== */
.msy-keahlian {
  border-left: 4px solid var(--atom-primary);
  background: var(--atom-surface-alt);
  border-radius: var(--atom-radius-sm);
  padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .375rem;
  font-size: var(--atom-fs-sm);
}
.msy-keahlian-baris { display: flex; gap: .75rem; align-items: baseline; }
.msy-keahlian-label { flex: 0 0 6rem; font-weight: 600; color: var(--atom-text-secondary); }
.msy-keahlian-chip { display: flex; flex-wrap: wrap; gap: .375rem; }
@media (max-width: 575.98px) {
  .msy-keahlian-baris { flex-direction: column; gap: .125rem; }
  .msy-keahlian-label { flex-basis: auto; }
}

/* QR Code kehadiran (rangka; QR sebenar dijana oleh pelayan) */
.msy-qr {
  display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .75rem 1rem;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
}
.msy-qr .bi { font-size: 8.5rem; line-height: 1; color: var(--atom-text); }
.msy-qr-kod { font-family: var(--bs-font-monospace); font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }

/* Senarai kehadiran / jemputan dalam borang */
.msy-hadir, .msy-jemputan, .msy-hadir-ringkas {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius-sm);
  max-height: 18rem; overflow-y: auto;
}
.msy-hadir-item, .msy-hadir-ringkas li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--atom-border-subtle);
  font-size: var(--atom-fs-sm);
}
.msy-hadir-item:last-child, .msy-hadir-ringkas li:last-child { border-bottom: 0; }
.msy-jemputan-kira { padding: .375rem .75rem; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); background: var(--atom-surface-alt); }
.msy-tambah {
  border: 1px dashed var(--atom-border-strong);
  border-radius: var(--atom-radius-sm);
  padding: .75rem;
}

/* Minit dijana berdasarkan templat */
.msy-minit {
  position: relative;
  border: 1px solid var(--atom-border);
  border-radius: var(--atom-radius);
  background: var(--atom-card);
  padding: 1.25rem 1.5rem;
  font-size: var(--atom-fs-sm);
}
.msy-minit.is-draf { border-style: dashed; }
.msy-minit-tanda {
  position: absolute; top: .75rem; right: .75rem;
  font-size: var(--atom-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--atom-warning); background: var(--atom-warning-light);
  border-radius: var(--atom-radius-pill); padding: .125rem .5rem;
}
.msy-minit-kepala { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .125rem; margin-bottom: 1rem; }
.msy-minit-kepala span { font-size: var(--atom-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--atom-text-muted); }
.msy-minit-kepala strong { text-transform: uppercase; }
.msy-minit-meta { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .75rem; margin: 0 0 1rem; }
.msy-minit-meta dt { font-weight: 600; color: var(--atom-text-secondary); }
.msy-minit-meta dd { margin: 0; }
.msy-minit h6 {
  font-size: var(--atom-fs-sm); font-weight: 700; text-transform: uppercase;
  margin: 1rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--atom-border);
}
.msy-minit ol { padding-left: 1.25rem; margin-bottom: .5rem; }
.msy-pre { white-space: pre-line; margin-bottom: .5rem; }
.msy-minit-kaki { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--atom-border); }
.msy-minit-kaki div { display: flex; flex-direction: column; font-size: var(--atom-fs-xs); color: var(--atom-text-muted); }
.msy-minit-kaki span { text-transform: uppercase; letter-spacing: .06em; }
.msy-minit-kaki strong { font-size: var(--atom-fs-sm); color: var(--atom-text); }
@media (max-width: 575.98px) {
  .msy-minit { padding: 1rem; }
  .msy-minit-kaki { grid-template-columns: 1fr; }
}