/* ==========================================================================
   IPITVET PTPK — lapisan jenama
   Dimuatkan SELEPAS core-ptpk.css dan theme-ptpk.css.

   Sumber warna:
   · Biru & navy   — logo IPITVET asal (tvet_logo.png)
   · Sian, merah,
     magenta       — identiti rasmi PTPK (ptpk.gov.my)
   ========================================================================== */

:root {
  /* ---- IPITVET: struktur sistem ---- */
  --ipi-blue:         #184FA2;   /* gerigi logo IPITVET */
  --ipi-blue-hover:   #14448B;
  --ipi-blue-active:  #113A76;
  --ipi-blue-light:   #1C5AB5;
  --ipi-navy:         #101C42;   /* garis litar logo IPITVET */
  --ipi-wash:         #D8E3F2;
  --ipi-tint:         #EDF2F9;

  /* ---- IPITVET: warna sekunder (untuk carta & status) ---- */
  --ipi-yellow:       #EED918;
  --ipi-coral:        #E96A77;
  --ipi-periwinkle:   #8284BF;
  --ipi-plum:         #492055;

  /* ---- PTPK: identiti agensi ---- */
  --ptpk-cyan:        #0099CC;   /* kepala portal PTPK */
  --ptpk-red:         #EC1F34;   /* lengkung logo PTPK */
  --ptpk-magenta:     #B20047;   /* bar navigasi PTPK */

  /* ---- Alias yang digunakan komponen ---- */
  --ptpk-primary:        var(--ipi-blue);
  --ptpk-primary-hover:  var(--ipi-blue-hover);
  --ptpk-primary-active: var(--ipi-blue-active);
  --ptpk-primary-light:  var(--ipi-blue-light);
  --ptpk-accent:         var(--ptpk-cyan);

  /* ---- Neutral condong biru, bukan kelabu tulen ---- */
  --ptpk-ink:         #1A2233;
  --ptpk-ink-2:       #4E5A6E;
  --ptpk-ink-3:       #7A8598;
  --ptpk-rule:        #D5DBE4;
  --ptpk-rule-soft:   #E7EBF0;
  --ptpk-ground:      #EEF1F5;
  --ptpk-surface:     #FFFFFF;

  /* ---- Bahasa bentuk: lebih tegas daripada templat asas ---- */
  --ptpk-radius:      4px;
  --ptpk-radius-sm:   3px;

  --ptpk-font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Tipografi
   -------------------------------------------------------------------------- */

body, .menu, .card, .modal, .dropdown-menu, .table,
.form-control, .form-select, .btn, .dataTables_wrapper {
  font-family: var(--ptpk-font);
}

body {
  color: var(--ptpk-ink-2);
  letter-spacing: -0.002em;
}

h1, h2, h3, h4, h5, h6, .card-title, .modal-title {
  font-family: var(--ptpk-font);
  color: var(--ptpk-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.form-label, .col-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ptpk-ink);
}

.table > thead th,
table.dataTable > thead th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ptpk-ink-3) !important;
  border-bottom: 1px solid var(--ptpk-rule) !important;
}

.table td, table.dataTable td { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Latar halaman
   -------------------------------------------------------------------------- */

body {
  background: var(--ptpk-ground) !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Bar sisi — navy IPITVET, rel aktif sian PTPK
   -------------------------------------------------------------------------- */

.layout-menu, .bg-menu-theme {
  background: var(--ipi-navy) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.layout-menu .app-brand {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.5rem;
}

.bg-menu-theme .menu-header-text {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.bg-menu-theme .menu-inner > .menu-item .menu-link {
  color: rgba(255, 255, 255, 0.74) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding-left: 1.5rem !important;
  border-left: 3px solid transparent !important;
  font-size: 0.9375rem;
  font-weight: 500;
}

.bg-menu-theme .menu-inner > .menu-item .menu-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  border-left: 3px solid var(--ptpk-cyan) !important;
  box-shadow: none !important;
  font-weight: 600;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon {
  color: var(--ptpk-cyan) !important;
}

/* --------------------------------------------------------------------------
   Bar atas
   -------------------------------------------------------------------------- */

/* Bar atas rata dan penuh lebar. Templat asas menjadikannya kad terapung
   bulat dalam .container-xxl — had lebar itu perlu dibatalkan, jika tidak
   latar putihnya terputus di tengah skrin. */
.layout-navbar,
.layout-navbar.container-xxl {
  background: var(--ptpk-surface) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ptpk-rule) !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.layout-navbar .navbar-nav .nav-link { color: var(--ptpk-ink-2) !important; }

/* --------------------------------------------------------------------------
   Kad, butang, borang, lencana
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--ptpk-rule) !important;
  border-radius: var(--ptpk-radius) !important;
  box-shadow: none !important;
  background: var(--ptpk-surface);
}

.card-header {
  border-bottom: 1px solid var(--ptpk-rule-soft);
  background: transparent;
  padding-top: 1.15rem;
  padding-bottom: 0.9rem;
}

.card-header h5, .card-header .card-title { margin-bottom: 0; font-size: 1.0625rem; }

/* Subtajuk kad: baris sendiri, bukan teks yang melekat pada tajuk.
   <small> ialah inline, jadi ia jatuh ke baris berikutnya hanya kerana <h5> di
   atasnya blok — tanpa sebarang jarak. Hasilnya 3px antara tajuk dan subtajuk,
   iaitu lebih rapat daripada jarak antara dua baris dalam perenggan biasa. */
.card-header h5 + small,
.card-header .card-title + small {
  display: block;
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Isi kad tidak boleh melekat pada garis pemisah header.

   Sneat mengecilkan padding atas badan kepada SIFAR apabila ia mengikut header
   (core-ptpk.css: `.card .card-header + .card-body { padding-top: 0 }`). Itu
   munasabah untuk header yang hanya ada tajuk — padding bawah header menjadi
   keseluruhan jarak. Tetapi header dalam sistem ini ada garis pemisah 1px, dan
   dengan padding atas sifar garis itu duduk 14.4px di BAWAH subtajuk dan 0px di
   ATAS isi kandungan.

   Carta, bar kemajuan dan tajuk jadual melekat terus pada garis itu. Dilaporkan
   pengguna 30 September 2026 pada skrin Analisis dan Laporan; ia berlaku pada
   SETIAP kad berheader dalam sistem, bukan skrin itu sahaja.

   1rem memberi 16px di bawah garis berbanding 14.4px di atasnya — garis itu
   duduk hampir di tengah, seperti pemisah yang sepatutnya. */
.card .card-header + .card-body,
.card .card-header + .card-content > .card-body:first-of-type {
  padding-top: 1rem;
}

/* Menu 'collection' DataTables kelihatan seperti dropdown biasa.

   Butang Eksport pada Program Pembelajaran, Institusi dan Pengguna Sistem
   dijana oleh DataTables, dan menunya memakai `.dt-button-collection` yang
   membawa gaya DataTables sendiri: sudut TAJAM dan bayang kelabu-hitam
   (0 6px 12px rgba(0,0,0,.175)). Setiap dropdown lain dalam sistem — menu
   akaun, menu ⋮ Tindakan, dan menu Eksport pada Analisis dan Laporan yang
   ditulis tangan — memakai sudut bulat Sneat dan bayang birunya.

   Perbezaan itu hanya kelihatan apabila dua skrin dibandingkan bersebelahan,
   iaitu apa yang pengguna buat pada 30 September 2026. Diselaraskan di sini
   dan bukan dengan menjadikan menu baharu tajam: satu menu yang ganjil lebih
   baik diperbaiki daripada disalin. */
/* Tanda yang datang daripada RALAT PENGESAHAN, bukan daripada kiraan
   kelengkapan pelayan. Rupanya sama; yang berbeza ialah bila ia hilang.

   Tanda pelayan kekal sehingga pelayan mengira semula — membuangnya apabila
   medan disentuh menyebabkan kelipan yang dilaporkan pada 30 September 2026.
   Tanda ralat pula tiada sesiapa yang akan mengira semula sehingga borang
   dihantar lagi, jadi ia dibuang sebaik medannya disunting. Tanpa itu pengisi
   membetulkan medan dan warnanya kekal merah. */
.ptpk-kurang-ralat {
  border-left: 3px solid #a81f2b;
  background: #fbe9eb;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  border-radius: var(--ptpk-radius-sm);
}

/* Item borang anugerah yang belum lengkap, ditanda ketika pengisi cuba
   meninggalkan bahagian itu.

   Menggantikan dua kotak amaran KEKAL yang dibuang pada 30 September 2026
   (keputusan pengguna). Tanda ini muncul hanya apabila "Seterusnya" ditolak,
   dan hilang sebaik item itu disentuh semula — jadi borang kekal bersih
   sehingga ada sebab untuk tidak.

   Jalur di tepi dan bukan sempadan penuh: baris item mengandungi radio, label
   dan blok lampiran, dan kotak merah di sekeliling kesemuanya kelihatan seperti
   ralat pada setiap satu. */
.ptpk-kurang {
  /* Warna yang sama seperti lencana danger sistem (#a81f2b / #fbe9eb),
     bukan merah baharu yang tiada di mana-mana lain. */
  border-left: 3px solid #a81f2b;
  background: #fbe9eb;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  border-radius: var(--ptpk-radius-sm);
}

.dt-button-collection,
div.dataTables_wrapper .dt-button-collection {
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
  /* Lut sinar dan bukan 0: .dropdown-menu Sneat membawa sempadan 1px lut sinar,
     jadi membuangnya terus menjadikan menu ini 2px lebih kecil daripada
     jirannya walaupun kedua-duanya kelihatan tiada sempadan. */
  border: 1px solid transparent;
}

.btn {
  border-radius: var(--ptpk-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--ptpk-primary) !important;
  border-color: var(--ptpk-primary) !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary.active {
  background-color: var(--ptpk-primary-hover) !important;
  border-color: var(--ptpk-primary-hover) !important;
}

.btn-outline-primary {
  color: var(--ptpk-primary) !important;
  border-color: var(--ptpk-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--ptpk-primary) !important;
  color: #FFFFFF !important;
}

.form-control, .form-select, .input-group-text {
  border-radius: var(--ptpk-radius-sm) !important;
  border-color: var(--ptpk-rule) !important;
  color: var(--ptpk-ink);
}

/* Penjuru DALAM sesuatu .input-group mesti rata.

   Peraturan di atas memaksa radius pada keempat-empat penjuru SETIAP elemen,
   termasuk yang berada di dalam kumpulan input. Kesannya paling ketara pada
   kotak kata laluan: sempadan pemisah memang sudah dibuang oleh tema
   (.input-group-merge), tetapi penjuru bulat input di sebelah kanan bertemu
   penjuru bulat ikon mata di sebelah kiri — menghasilkan cubitan yang dibaca
   mata sebagai DUA kotak berasingan, bukan satu medan.

   Dilaporkan pengguna pada 10 September 2026: "seolah ada 2 kotak input". */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--ptpk-primary) !important;
  box-shadow: 0 0 0 3px rgba(24, 79, 162, 0.14) !important;
}

a:focus-visible, .btn:focus-visible, .menu-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--ptpk-cyan);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   WORDMARK — dua identiti bersebelahan
   "IPITVET" memakai warna logo IPITVET asal.
   "PTPK" memakai warna identiti rasmi PTPK.
   -------------------------------------------------------------------------- */

.ptpk-wm {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--ptpk-font);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.ptpk-wm-ipi  { color: var(--ipi-blue); }
.ptpk-wm-ptpk { color: var(--ptpk-cyan); }

.ptpk-wm-div {
  width: 2px;
  height: 0.92em;
  background: var(--ptpk-rule);
  border-radius: 1px;
  flex: 0 0 auto;
}

.ptpk-wm-sub {
  font-family: var(--ptpk-font);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ptpk-ink-3);
  margin-top: 0.6rem;
}

.ptpk-wm-sub b { color: var(--ptpk-cyan); font-weight: 700; }

/* Versi bar sisi — latar navy */
.ptpk-brand {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.ptpk-brand .ptpk-wm      { font-size: 1.3rem; }
.ptpk-brand .ptpk-wm-ipi  { color: #FFFFFF; }
.ptpk-brand .ptpk-wm-ptpk { color: var(--ptpk-cyan); }
.ptpk-brand .ptpk-wm-div  { background: rgba(255, 255, 255, 0.28); }

.ptpk-brand .ptpk-wm-sub {
  margin-top: 0;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}

/* Lockup halaman log masuk */
.ptpk-auth-lockup {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--ptpk-rule-soft);
}

/* --------------------------------------------------------------------------
   Atribusi kementerian induk
   PTPK berada di bawah KESUMA. Ini atribusi organisasi sahaja — bukan
   peringkat kelulusan dalam sistem.
   -------------------------------------------------------------------------- */

.ptpk-parent-ministry {
  margin-top: 0.45rem;
  text-align: center;
  font-family: var(--ptpk-font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.ptpk-brand-ministry {
  font-family: var(--ptpk-font);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: -0.15rem;
}

/* --------------------------------------------------------------------------
   Halaman log masuk
   -------------------------------------------------------------------------- */

.ptpk-auth-body {
  background: var(--ipi-navy) !important;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, #1B3470 0%, transparent 62%),
    linear-gradient(160deg, var(--ipi-navy) 0%, #0A1230 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

.ptpk-auth-card {
  border: 1px solid var(--ptpk-rule) !important;
  border-radius: var(--ptpk-radius) !important;
  box-shadow: 0 18px 48px rgba(6, 14, 38, 0.42) !important;
}

/* --------------------------------------------------------------------------
   Hormati tetapan kurangkan gerakan
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Butang tunjuk/sembunyi kata laluan
   --------------------------------------------------------------------------

   Pengendali tema mengikat klik pada `.form-password-toggle i` sahaja — glif
   ikon itu sendiri. Kotak pembungkusnya pula membawa kelas `cursor-pointer`,
   jadi keseluruhannya kelihatan boleh diklik. Akibatnya klik yang mendarat
   pada pinggir kotak tidak melakukan apa-apa, dan pengguna menyangka butang
   itu rosak.

   Diperbaiki tanpa menyentuh JS tema: alihkan padding daripada kotak kepada
   ikon, supaya ikon mengisi seluruh kawasan boleh klik dan setiap klik
   memang mendarat pada elemen yang didengari.
   -------------------------------------------------------------------------- */

.form-password-toggle .input-group-text {
  padding: 0;
}

.form-password-toggle .input-group-text i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.75rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Kad statistik yang boleh diklik (Halaman Utama)

   Ditambah 9 September 2026. Kad ini dahulunya <div> biasa: penguji melaporkan
   bahawa ia "nampak boleh klik tapi tak jadi apa-apa". Kini ia <a>, jadi
   berikan maklum balas hover yang jelas.
   -------------------------------------------------------------------------- */

a.card {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.card:hover,
a.card:focus-visible {
  border-color: var(--ptpk-primary) !important;
  background: var(--ptpk-ground);
}

/* --------------------------------------------------------------------------
   LENCANA — versi lembut

   Ditulis semula 9 September 2026. Dua masalah, kedua-duanya kelihatan paling
   teruk pada lajur Maklumat dalam Borang IPITVET:

   1. Tema memaksa `text-transform: uppercase` pada setiap .badge. Rentetan
      status dalam Bahasa Melayu panjang — "Menunggu Pengesahan Pentadbir
      Sistem" menjadi sebaris huruf besar yang lebar dan sukar dibaca, dan
      memaksa lajur melebar.
   2. Isian tepu penuh (bg-dark, bg-success tepu) menjadikan lencana objek
      paling gelap pada baris, jadi mata tertarik kepada status dan bukan
      kepada nama institusi yang sepatutnya dibaca dahulu.

   Penyelesaian: warna semantik dikekalkan, tetapi sebagai latar bertona dengan
   dakwat gelap. Setiap pasangan di bawah melebihi nisbah kontras 4.5:1, jadi
   ia lebih mudah dibaca berbanding versi tepu — bukan sekadar lebih lembut.
   -------------------------------------------------------------------------- */

.badge {
  border-radius: var(--ptpk-radius-sm) !important;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.005em;
  /* Huruf besar dibuang: teks sumber sudah dalam huruf besar-kecil yang betul. */
  text-transform: none !important;
  padding: 0.3em 0.55em;
  border: 1px solid transparent;
  /* Lencana ialah satu objek — ia tidak boleh terbelah dua baris. */
  white-space: nowrap;
}

/* Latar bertona + dakwat gelap + sempadan halus, supaya lencana cerah masih
   kelihatan sebagai objek di atas kad putih. */

.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-label-secondary,
.badge.bg-label-dark {
  background-color: #eef1f5 !important;
  color: #46536a !important;
  border-color: #dce2ea !important;
}

.badge.bg-primary,
.badge.bg-label-primary {
  background-color: #e8effa !important;
  color: #14458c !important;
  border-color: #cfddf2 !important;
}

.badge.bg-info,
.badge.bg-label-info {
  background-color: #e1f3fa !important;
  color: #0a6c90 !important;
  border-color: #c7e7f3 !important;
}

.badge.bg-success,
.badge.bg-label-success {
  background-color: #e3f5ea !important;
  color: #17743e !important;
  border-color: #c7e9d4 !important;
}

.badge.bg-warning,
.badge.bg-label-warning {
  background-color: #fcf0da !important;
  color: #8a5300 !important;
  border-color: #f4dfb4 !important;
}

.badge.bg-danger,
.badge.bg-label-danger {
  background-color: #fbe9eb !important;
  color: #a81f2b !important;
  border-color: #f3cfd3 !important;
}

/* Utiliti tema `text-dark` diletakkan pada beberapa lencana amaran untuk
   membetulkan kontras versi tepu. Ia kini melawan dakwat di atas. */
.badge.text-dark {
  color: inherit !important;
}

/* Beberapa lencana peranan membawa warna jenama sebagai gaya sebaris. Warna
   itu ditakrifkan dalam RoleEnum::getColor() dan kini dipakai sebagai tona
   melalui kelas di bawah. */

.badge.ptpk-peranan-ptpk {
  background-color: #e8effa !important;
  color: #14458c !important;
  border-color: #cfddf2 !important;
}

.badge.ptpk-peranan-pentadbir {
  background-color: #e1f3fa !important;
  color: #0a6c90 !important;
  border-color: #c7e7f3 !important;
}

.badge.ptpk-peranan-pengguna {
  background-color: #fdecee !important;
  color: #a33642 !important;
  border-color: #f6d4d8 !important;
}

/* --------------------------------------------------------------------------
   KIRAAN — nombor, bukan status

   Lajur "Maklumat" pada Borang IPITVET dan Institusi memaparkan kiraan:
   berapa institusi, berapa sedang dinilai, berapa program. Sehingga
   9 September 2026 ia dipaparkan sebagai lencana — pada Borang IPITVET tiga
   lencana `bg-dark` bertindan, yang kelihatan seperti tiga bar hitam.

   Lencana ialah peranti status: ia berwarna kerana warnanya membawa makna.
   Kiraan tiada makna berwarna, jadi ia diberi bentuknya sendiri — nombor tebal
   dengan angka berjajar, label senyap di sebelahnya.
   -------------------------------------------------------------------------- */

.ptpk-kiraan-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ptpk-kiraan {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--ptpk-rule-soft);
  border-radius: var(--ptpk-radius-sm);
  background: var(--ptpk-surface);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}

.ptpk-kiraan-nilai {
  font-weight: 700;
  color: var(--ptpk-ink);
  /* Angka berjajar supaya lajur kiraan sejajar antara baris. */
  font-variant-numeric: tabular-nums;
}

.ptpk-kiraan-label {
  color: var(--ptpk-ink-3);
  font-weight: 500;
}

/* Kiraan sifar disenyapkan lagi: "0 Program" ialah ketiadaan, bukan maklumat
   yang perlu bersaing dengan baris lain untuk perhatian. */
.ptpk-kiraan-kosong {
  background: transparent;
  border-color: transparent;
}

.ptpk-kiraan-kosong .ptpk-kiraan-nilai {
  color: var(--ptpk-ink-3);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   KEMAJUAN PUSINGAN — lajur Maklumat pada Borang IPITVET

   Tiga nombor di lajur itu bukan tiga fakta berasingan: daripada N institusi,
   sekian sedang dinilai dan sekian sudah selesai. Ia satu keseluruhan, jadi ia
   dipapar sebagai kemajuan.

   Dua percubaan terdahulu memaparkannya sebagai tiga lencana bertindan, kemudian
   tiga kiraan bersebelahan. Kedua-duanya memaksa pembaca menyusun sendiri
   hubungan antara nombor itu, dan mengulang "3 Institusi" pada setiap baris —
   nilai yang sama pada setiap baris tidak membawa maklumat.
   -------------------------------------------------------------------------- */

.ptpk-kemajuan {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 8.5rem;
  max-width: 12rem;
}

.ptpk-kemajuan-kira {
  font-size: 0.8125rem;
  line-height: 1.2;
}

.ptpk-kemajuan-nilai {
  font-weight: 700;
  color: var(--ptpk-ink);
  /* Angka berjajar supaya "1 / 3" dan "10 / 12" sejajar antara baris. */
  font-variant-numeric: tabular-nums;
}

.ptpk-kemajuan-unit {
  color: var(--ptpk-ink-3);
  font-weight: 500;
}

.ptpk-kemajuan-landasan {
  height: 5px;
  border-radius: 999px;
  background: var(--ptpk-rule);
  overflow: hidden;
}

.ptpk-kemajuan-isi {
  display: block;
  height: 100%;
  border-radius: inherit;
  /* Hijau bermaksud "selesai" — makna yang sama seperti lencana berjaya. */
  background: #2f9e63;
}

.ptpk-kemajuan-nota {
  font-size: 0.75rem;
  color: var(--ptpk-ink-3);
  line-height: 1.3;
}

.ptpk-kemajuan-siap {
  color: #17743e;
  font-weight: 600;
}

.ptpk-kemajuan-kosong {
  font-size: 0.8125rem;
  color: var(--ptpk-ink-3);
  font-style: italic;
}

/* ------------------------------------------------------------------
   Tindanan "memuatkan" bagi modal yang isinya diambil dari pelayan.
   Lihat public/assets/js/modal-jauh.js — modal dibuka serta-merta dan
   tindanan ini menutupinya sehingga data tiba, supaya talian perlahan
   tidak kelihatan seperti butang yang rosak.
   ------------------------------------------------------------------ */
.modal-content {
    position: relative;
}

.ptpk-modal-memuatkan {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: inherit;
}

/* ------------------------------------------------------------------
   Modal "Maklumat Penuh" — susun atur bersama bagi pengguna, institusi
   dan program.

   Sebelum ini ketiga-tiganya menggunakan <dl class="row"> lalai Bootstrap:
   label tebal 3 lajur, nilai 9 lajur, tiada pengumpulan, dan medan kosong
   meninggalkan baris kosong tanpa penjelasan. Pada skrin lebar ia menjadi
   satu lajur teks yang panjang dengan ruang putih besar di kanan.
   ------------------------------------------------------------------ */
.ptpk-butiran {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 0;
}

.ptpk-butiran > div {
    min-width: 0;
}

/* Medan yang isinya panjang (alamat, nama penuh) mengambil kedua-dua lajur. */
.ptpk-butiran > div.ptpk-butiran-lebar {
    grid-column: 1 / -1;
}

.ptpk-butiran dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8a94a6;
    margin-bottom: 0.15rem;
}

.ptpk-butiran dd {
    margin: 0;
    font-size: 0.95rem;
    color: #384252;
    word-break: break-word;
}

/* Nilai kosong tidak boleh kelihatan seperti pemuatan yang tergantung. */
.ptpk-butiran dd:empty::after {
    content: 'Tiada maklumat';
    color: #b6bdc9;
    font-style: italic;
}

.ptpk-butiran-tajuk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ipi-blue, #184FA2);
    margin: 1.5rem 0 0.75rem;
}

.ptpk-butiran-tajuk::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e3e7ee;
}

.ptpk-butiran-tajuk:first-child {
    margin-top: 0;
}

/* Baris pengenalan di kepala modal: nama besar, penanda di bawahnya. */
.ptpk-butiran-utama {
    padding: 0.9rem 1rem;
    background: #f6f8fb;
    border: 1px solid #e3e7ee;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.ptpk-butiran-utama .ptpk-nama {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c2536;
    line-height: 1.35;
}

.ptpk-butiran-utama .ptpk-sub {
    font-size: 0.85rem;
    color: #6b7688;
}

/* Jalur audit di kaki modal maklumat penuh.
   Ia METADATA, bukan data — siapa menyentuh rekod ini dan bila. Dua percubaan
   terdahulu melayannya seperti medan biasa (mula-mula dua ayat penuh yang
   bertindan, kemudian grid berlabel besar seperti medan di atasnya), dan
   kedua-duanya bersaing dengan maklumat sebenar. Sekarang ia nota kaki: kecil,
   pudar, satu jalur, dan mata melintasinya tanpa berhenti melainkan seseorang
   memang mencarinya. */
.ptpk-butiran-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.5rem;
    margin-top: 1.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid #eef1f5;
    font-size: 0.72rem;
    line-height: 1.6;
    color: #aab2c0;
}

.ptpk-audit-label {
    color: #c2c8d3;
}

.ptpk-butiran-audit b {
    font-weight: 500;
    color: #8a94a6;
}

@media (max-width: 575.98px) {
    .ptpk-butiran {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------
   Sejarah Penghantaran Penilaian — garis masa dalam modal.

   Dahulunya blok <style> dalam partial itu sendiri, yang disuntik semula
   ke dalam dokumen setiap kali sejarah dibuka.
   ------------------------------------------------------------------ */
.ptpk-garis-masa {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
    position: relative;
}

/* Garis penyambung: satu garis untuk keseluruhan senarai, bukan satu bagi
   setiap item — supaya ia tidak terputus antara peristiwa. */
.ptpk-garis-masa::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: #e3e7ee;
}

.ptpk-garis-masa-item {
    position: relative;
    padding-bottom: 1.4rem;
}

.ptpk-garis-masa-item:last-child {
    padding-bottom: 0;
}

.ptpk-garis-masa-titik {
    position: absolute;
    left: -1.75rem;
    top: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
}

.ptpk-titik-primary   { color: #184FA2; background: #184FA2; }
.ptpk-titik-success   { color: #2F9E63; background: #2F9E63; }
.ptpk-titik-danger    { color: #E96A77; background: #E96A77; }
.ptpk-titik-warning   { color: #E0B420; background: #E0B420; }
.ptpk-titik-info      { color: #0099CC; background: #0099CC; }
.ptpk-titik-secondary { color: #8592a3; background: #8592a3; }

.ptpk-garis-masa-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.ptpk-garis-masa-status {
    font-weight: 600;
    color: #1c2536;
}

.ptpk-garis-masa-masa {
    font-size: 0.8rem;
    color: #8a94a6;
}

.ptpk-garis-masa-nota {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #f6f8fb;
    border-left: 3px solid #cfd6e2;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    color: #384252;
}

.ptpk-garis-masa-nota.ptpk-nota-tolak {
    background: #fdf2f3;
    border-left-color: #E96A77;
}

.ptpk-nota-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a94a6;
    margin-bottom: 0.15rem;
}

.ptpk-nota-oleh {
    font-size: 0.78rem;
    color: #8a94a6;
    margin-top: 0.25rem;
}


/* --------------------------------------------------------------------------
   Halaman utama PTPK
   Susun atur baharu 11 September 2026 — lihat
   resources/views/pages/dashboard/index.blade.php.
   -------------------------------------------------------------------------- */

/* ---- Baris "Perlu Tindakan Anda" ---- */
.ptpk-tindakan-kad {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ptpk-rule-soft);
    border-left: 3px solid var(--ptpk-primary);
    border-radius: var(--ptpk-radius);
    background: var(--ipi-tint);
    text-decoration: none;
    color: var(--ptpk-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ptpk-tindakan-kad:hover {
    background: var(--ipi-wash);
    border-color: var(--ptpk-primary);
    color: var(--ptpk-ink);
}

.ptpk-tindakan-angka {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ptpk-primary);
    min-width: 2ch;
}

.ptpk-tindakan-label {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.3;
}

.ptpk-tindakan-panah {
    font-size: 1.2rem;
    color: var(--ptpk-ink-3);
}

/* ---- Senarai penilaian yang menunggu ---- */
.ptpk-tindakan-senarai {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ptpk-rule-soft);
}

.ptpk-tindakan-senarai > li {
    border-bottom: 1px solid var(--ptpk-rule-soft);
}

.ptpk-tindakan-baris {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    text-decoration: none;
    color: var(--ptpk-ink);
}

.ptpk-tindakan-baris:hover {
    background: var(--ipi-tint);
    color: var(--ptpk-ink);
}

.ptpk-tindakan-institusi {
    font-weight: 600;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptpk-tindakan-borang {
    font-size: 0.83rem;
    color: var(--ptpk-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptpk-tindakan-masa {
    font-size: 0.78rem;
    color: var(--ptpk-ink-3);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ptpk-tindakan-baris {
        grid-template-columns: 1fr auto;
    }

    .ptpk-tindakan-borang {
        grid-column: 1 / -1;
    }
}

.ptpk-tindakan-lega {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: var(--ptpk-radius);
    background: #f0f8f3;
    border: 1px solid #d6eade;
}

.ptpk-tindakan-lega > i {
    font-size: 1.8rem;
    color: #2F9E63;
}

/* ---- Empat kad angka ---- */
.ptpk-kpi {
    text-decoration: none;
    color: var(--ptpk-ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ptpk-kpi:hover {
    color: var(--ptpk-ink);
    border-color: var(--ptpk-primary);
    transform: translateY(-2px);
}

.ptpk-kpi .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ptpk-kpi-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ptpk-radius);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.ptpk-kpi-biru   { background: #e8effa; color: #14458c; }
.ptpk-kpi-sian   { background: #e1f3fa; color: #0077a3; }
.ptpk-kpi-kuning { background: #fdf5dd; color: #9a7a08; }
.ptpk-kpi-hijau  { background: #e6f5ec; color: #1f7a4a; }

.ptpk-kpi-nilai {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
}

.ptpk-kpi-label {
    font-size: 0.82rem;
    color: var(--ptpk-ink-2);
    line-height: 1.25;
}

/* ---- Median ROI / ROV / Indeks ---- */
.ptpk-prestasi {
    padding: 0.9rem 1rem;
    border: 1px solid var(--ptpk-rule-soft);
    border-radius: var(--ptpk-radius);
    background: var(--ipi-tint);
    height: 100%;
}

.ptpk-prestasi-tajuk {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ptpk-ink-3);
}

.ptpk-prestasi-nilai {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ptpk-primary);
}

.ptpk-prestasi-julat {
    font-size: 0.76rem;
    color: var(--ptpk-ink-3);
}

/* ---- Kiraan pengguna di bawah carta ---- */
.ptpk-kira-pengguna {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ptpk-rule-soft);
    border-radius: var(--ptpk-radius);
    height: 100%;
}

.ptpk-kira-nilai {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.ptpk-kira-label {
    font-size: 0.74rem;
    color: var(--ptpk-ink-2);
    line-height: 1.2;
}

.ptpk-kira-biru  { color: #184FA2; }
.ptpk-kira-sian  { color: #0099CC; }
.ptpk-kira-hijau { color: #2F9E63; }

/* --------------------------------------------------------------------------
   Menu akaun pada bar atas

   Dilaporkan pengguna pada 11 September 2026: tiada apa-apa menunjukkan
   "Selamat Datang (Pentadbir Sistem)" boleh diklik. Templat asas menandainya
   `hide-arrow` — anak panah dropdown disembunyikan dengan sengaja — dan teksnya
   dialihkan dengan `margin-right:-140px`.
   -------------------------------------------------------------------------- */
.ptpk-akaun {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem !important;
    border: 1px solid transparent;
    border-radius: var(--ptpk-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ptpk-akaun:hover,
.ptpk-akaun:focus-visible,
.ptpk-akaun[aria-expanded="true"] {
    background-color: var(--ipi-tint);
    border-color: var(--ptpk-rule);
}

.ptpk-akaun:focus-visible {
    outline: 2px solid var(--ptpk-primary);
    outline-offset: 1px;
}

.ptpk-akaun-teks {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.ptpk-akaun-nama {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ptpk-ink);
    /* Nama panjang memanjangkan bar atas sehingga melimpah; potong di sini dan
       biarkan atribut title membawa nama penuh. */
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptpk-akaun-peranan {
    font-size: 0.74rem;
    color: var(--ptpk-ink-3);
}

.ptpk-akaun-anak-panah {
    font-size: 1.15rem;
    color: var(--ptpk-ink-3);
    transition: transform 0.15s ease;
}

.ptpk-akaun[aria-expanded="true"] .ptpk-akaun-anak-panah {
    transform: rotate(180deg);
}

/* Pada skrin sempit, avatar dan anak panah memadai — teks dua baris itu
   menolak bar atas melimpah. */
@media (max-width: 575.98px) {
    .ptpk-akaun-teks {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Butang "label" — tindakan bar alat

   Kelas .btn-label-primary digunakan oleh butang Eksport/Import pada halaman
   Pengguna Sistem, Institusi dan Program sejak awal, tetapi ia hanya ditakrif
   dalam assets/template/css/docs.css — fail yang TIDAK dimuatkan oleh
   layouts/app. Butang-butang itu dirender telus dengan teks kelabu:
   background-color rgba(0,0,0,0), color rgb(105,122,141), tiada sempadan.

   Ditakrif di sini pada 11 September 2026 supaya ia benar-benar kelihatan, dan
   supaya tindakan sekunder (muat turun templat, import) mempunyai berat visual
   yang lebih ringan daripada .btn-primary tanpa hilang warna jenama.
   -------------------------------------------------------------------------- */
.btn-label-primary {
    background-color: var(--ipi-tint);
    border-color: transparent;
    color: var(--ptpk-primary);
}

.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary.show {
    background-color: var(--ipi-wash);
    border-color: transparent;
    color: var(--ptpk-primary-hover);
}

.btn-label-primary:focus-visible {
    outline: 2px solid var(--ptpk-primary);
    outline-offset: 1px;
}

.btn-label-primary:disabled,
.btn-label-primary.disabled {
    background-color: var(--ptpk-ground);
    border-color: transparent;
    color: var(--ptpk-ink-3);
}

/* .btn-label-secondary dan .btn-label-danger mempunyai masalah yang SAMA, dan
   terlepas pandang pada 11 September kerana hanya butang Eksport yang diperiksa
   ketika itu: docs.css mentakrifkan secondary, tiada sesiapa mentakrifkan
   danger, dan layouts/app tidak memuatkan docs.css.

   Akibatnya butang "Kembali" pada stepper borang anugerah, setiap "Batal" dalam
   modal (termasuk modal pengesahan hapus yang dikongsi) dan "Kembalikan Borang"
   dirender TELUS — teks kelabu tanpa sempadan, tidak kelihatan sebagai butang
   langsung. 13 tempat bagi secondary, 3 bagi danger.

   Warna diambil daripada palet yang sistem ini sudah guna: kelabu daripada
   pembolehubah jenama, merah daripada lencana .bg-label-danger di atas, supaya
   butang dan lencana bercakap bahasa warna yang sama. */
.btn-label-secondary {
    background-color: var(--ptpk-ground);
    border-color: transparent;
    color: var(--ptpk-ink-2);
}

.btn-label-secondary:hover,
.btn-label-secondary:focus,
.btn-label-secondary.show {
    background-color: var(--ptpk-rule);
    border-color: transparent;
    color: var(--ptpk-ink);
}

.btn-label-secondary:focus-visible {
    outline: 2px solid var(--ptpk-ink-3);
    outline-offset: 1px;
}

.btn-label-secondary:disabled,
.btn-label-secondary.disabled {
    background-color: var(--ptpk-ground);
    border-color: transparent;
    color: var(--ptpk-ink-3);
}

.btn-label-danger {
    background-color: #fbe9eb;
    border-color: transparent;
    color: #a81f2b;
}

.btn-label-danger:hover,
.btn-label-danger:focus,
.btn-label-danger.show {
    background-color: #f3cfd3;
    border-color: transparent;
    color: #8c1a24;
}

.btn-label-danger:focus-visible {
    outline: 2px solid #a81f2b;
    outline-offset: 1px;
}

.btn-label-danger:disabled,
.btn-label-danger.disabled {
    background-color: var(--ptpk-ground);
    border-color: transparent;
    color: var(--ptpk-ink-3);
}

/* ---------------------------------------------------------------
   Penunjuk LANGSUNG
   ---------------------------------------------------------------
   Titik berdenyut di sebelah tajuk panel yang benar-benar menyegar
   sendiri. Ia mendakwa sesuatu, jadi ia mesti benar: paparan menukar
   kelas kepada .ptpk-langsung--putus apabila permintaan gagal, dan
   denyutan berhenti. Penunjuk yang terus berdenyut pada data beku
   lebih buruk daripada tiada penunjuk langsung.
   --------------------------------------------------------------- */

.ptpk-langsung {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2f7d32;
    white-space: nowrap;
}

.ptpk-langsung-titik {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #2f7d32;
    flex: 0 0 auto;
}

.ptpk-langsung-titik::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #2f7d32;
    animation: ptpk-denyut 1.8s ease-out infinite;
}

@keyframes ptpk-denyut {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }

    70% {
        transform: scale(2.6);
        opacity: 0;
    }

    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Sesetengah pengguna menetapkan sistemnya supaya mengurangkan gerakan;
   denyutan berterusan menyakitkan bagi mereka. Titik kekal, denyut berhenti. */
@media (prefers-reduced-motion: reduce) {
    .ptpk-langsung-titik::after {
        animation: none;
    }
}

.ptpk-langsung--putus {
    color: var(--ptpk-ink-3, #7a8598);
}

.ptpk-langsung--putus .ptpk-langsung-titik {
    background-color: var(--ptpk-ink-3, #7a8598);
}

.ptpk-langsung--putus .ptpk-langsung-titik::after {
    animation: none;
    background-color: transparent;
}

/* ---------------------------------------------------------------
   Penunjuk susunan DataTables
   ---------------------------------------------------------------
   Mengikut bentuk yang dipakai sistem Colab_FSK (assets/eksp.css):
   SATU anak panah, INLINE selepas teks tajuk.

       tidak diisih   ↕   10px, opacity .4
       menaik         ↑   warna jenama
       menurun        ↓   warna jenama

   Kenapa bentuk itu, dan bukan pasangan segi tiga vendor:

   1. Vendor meletakkan penunjuk `position: absolute; right: 10px`.
      Pada lajur yang lebar — 'Institusi', 'Perhubungan' — ia terapung
      jauh daripada labelnya dan kelihatan seperti milik lajur
      sebelahnya. Inline bermakna ia sentiasa rapat dengan tajuknya.
   2. Pasangan ▲▼ memaksa pembaca membandingkan dua bentuk yang hampir
      sama untuk tahu arah mana yang aktif. Satu anak panah menyatakan
      arahnya terus.
   3. Dua percubaan terdahulu tersasar pada SAIZ: glif vendor terlalu
      besar, segi tiga CSS 3×4px terlalu kecil. Anak panah tunggal pada
      11px tidak bergantung pada tekaan itu — ia sama saiz dengan teks
      tajuk kerana ia MEMANG teks pada saiz yang ditetapkan.

   `content` vendor membawa !important, jadi setiap tindihan perlu
   !important juga.
   --------------------------------------------------------------- */

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
    /* Ruang 26px vendor disimpan untuk penunjuk terapung; ia tidak
       diperlukan lagi. */
    padding-right: 0.625rem;
    cursor: pointer;
    user-select: none;
}

table.dataTable thead > tr > th.sorting:hover,
table.dataTable thead > tr > td.sorting:hover {
    color: var(--ptpk-primary, #184fa2);
}

/* Segi tiga atas vendor dibuang sepenuhnya. */
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_asc_disabled::before,
table.dataTable thead > tr > th.sorting_desc_disabled::before,
table.dataTable thead > tr > td.sorting::before,
table.dataTable thead > tr > td.sorting_asc::before,
table.dataTable thead > tr > td.sorting_desc::before {
    content: none !important;
    display: none !important;
}

table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > td.sorting::after,
table.dataTable thead > tr > td.sorting_asc::after,
table.dataTable thead > tr > td.sorting_desc::after {
    position: static;
    display: inline;
    /* 9px, bukan 6px: pada tajuk HURUF BESAR berjarak-huruf (Sneat
       menetapkan letter-spacing pada thead), 6px membuatkan anak panah
       kelihatan melekat pada huruf terakhir. */
    margin-left: 9px;
    /* 10px: sedikit di bawah teks tajuk 12px supaya ia jelas sebagai
       penunjuk dan bukan sebahagian daripada label.
       !important kerana datatables-bootstrap5.css membawa SATU LAGI rule
       — `table.dataTable thead .sorting::after { font-size: 1.2rem }` —
       selain yang .8em. Tanpa ini anak panah dirender pada 19.2px, dan
       saiz yang ditulis di sini langsung tidak berkuat kuasa. */
    font-size: 10px !important;
    line-height: 1;
    opacity: 0.4;
    color: inherit;
}

table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > td.sorting::after {
    content: '\2195' !important;
}

table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > td.sorting_asc::after {
    content: '\2191' !important;
    opacity: 1;
    color: var(--ptpk-primary, #184fa2);
}

table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > td.sorting_desc::after {
    content: '\2193' !important;
    opacity: 1;
    color: var(--ptpk-primary, #184fa2);
}

/* Lajur yang dilumpuhkan pengisihannya tidak membawa penunjuk langsung. */
table.dataTable thead > tr > th.sorting_asc_disabled::after,
table.dataTable thead > tr > th.sorting_desc_disabled::after {
    content: none !important;
}

/* ---------------------------------------------------------------
   Alert: teks gelap, bukan teks berwarna di atas latar berwarna
   ---------------------------------------------------------------

   Sneat mewarnakan teks alert dengan warna aksen varian itu sendiri, di atas
   latar tint warna yang sama. Hasilnya diukur pada pelayan pengeluaran
   (1 Oktober 2026), dan LIMA daripada enam varian gagal WCAG AA (4.5:1):

       success    1.58:1      warning    1.71:1
       info       1.83:1      secondary  2.71:1
       danger     2.84:1      primary    6.65:1  (sudah ditindih)

   Dilaporkan pengguna: "banyak saya jumpa alert info guna warna dan text susah
   nak baca... guna biru dengan background biru."

   Pembetulannya memisahkan dua tugas yang Sneat gabungkan:

     TEKS   menyampaikan ayat     -> gelap, boleh dibaca      (10:1 ke atas)
     AKSEN  menyampaikan JENIS    -> ikon dan sempadan sahaja  (5.3:1 ke atas)

   Warna teks #2f3349 ialah warna tajuk Sneat sendiri — warna yang sudah
   digunakan di seluruh aplikasi. Hitam tulen (#000) akan menonjol sebagai
   sesuatu yang asing pada halaman yang setiap tajuknya #2f3349.

   Latar tint dikekalkan: ia yang memberi alert bentuknya, dan ia tidak pernah
   menjadi masalah. Yang bermasalah ialah teks di atasnya. */

.alert {
    color: #2f3349;
}

/* Pautan dalam alert mesti kekal dapat dibezakan daripada teks biasa, jadi ia
   mengambil aksen varian — bukan warna teks. */
.alert .alert-link {
    text-decoration: underline;
}

/* Ikon membawa warna varian. Itulah yang membuatkan jenis alert dikenali
   sekilas pandang selepas teksnya menjadi gelap seragam. */
.alert > i,
.alert > .alert-icon,
.alert > div > i:first-child {
    color: inherit;
}

.alert-info {
    border-color: #086a80;
}

.alert-info > i,
.alert-info .alert-link,
.alert-info .bx:first-child {
    color: #086a80;
}

.alert-danger {
    border-color: #a81f08;
}

.alert-danger > i,
.alert-danger .alert-link,
.alert-danger .bx:first-child {
    color: #a81f08;
}

.alert-warning {
    border-color: #8a5a00;
}

.alert-warning > i,
.alert-warning .alert-link,
.alert-warning .bx:first-child {
    color: #8a5a00;
}

.alert-success {
    border-color: #2f6e13;
}

.alert-success > i,
.alert-success .alert-link,
.alert-success .bx:first-child {
    color: #2f6e13;
}

.alert-secondary {
    border-color: #4b5563;
}

.alert-secondary > i,
.alert-secondary .alert-link,
.alert-secondary .bx:first-child {
    color: #4b5563;
}

.alert-primary {
    border-color: #184fa2;
}

.alert-primary > i,
.alert-primary .alert-link,
.alert-primary .bx:first-child {
    color: #184fa2;
}

/* Butang tutup mengikut teks, bukan aksen: ia kawalan, bukan isyarat jenis. */
.alert .btn-close {
    filter: none;
    opacity: .6;
}

.alert .btn-close:hover {
    opacity: 1;
}