/* ==========================================================================
   SPKK — Sistem Permit Kebenaran Berada di Kampus
   Kampus Kejuruteraan, Universiti Sains Malaysia

   Perkhidmatan awam, bukan tapak pemasaran. Keutamaan: kejelasan, kelajuan,
   aksesibiliti. CSS tulen, tiada build step, tiada pustaka, tiada fon web.

   Susunan fail:
     1  Token warna dan ukuran
     2  Asas dan tipografi
     3  Landmark: pautan langkau, pengepala, navigasi, kaki
     4  Kad dan susun atur
     5  Borang
     6  Butang
     7  Jadual (jadual pada desktop, kad bertindan pada telefon)
     8  Status: warna + ikon + teks
     9  Mesej sekilas dan nota
    10  Garis masa permohonan pelajar
    11  Papan pemuka dan carta
    12  Halaman pengesahan QR
    13  Notifikasi, tab, penomboran
    14  Cetakan
    15  Gerakan dikurangkan
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  TOKEN
   Semua warna ditakrifkan di sini sahaja. Apabila manual jenama USM rasmi
   diperoleh, tukar nilai dalam blok ini dan tiada tempat lain.

   Nisbah kontras setiap pasangan disahkan dengan ujian/ujian_kontras.php.
   -------------------------------------------------------------------------- */

:root {
  /* Ungu gelap USM — pengepala, butang utama, pautan */
  --warna-utama: #4a1a6e;
  --warna-utama-gelap: #33124d;
  --warna-utama-lembut: #f4f0f8;
  --warna-atas-utama: #ffffff;

  /* Oren USM — SEDIKIT sahaja: tindakan penting dan penanda, tidak pernah
     untuk kawasan besar */
  --warna-aksen: #a8390b;
  --warna-aksen-teks: #8f3009;
  --warna-atas-aksen: #ffffff;
  /* Oren terang: HANYA di atas ungu gelap, di mana --warna-aksen terlalu
     gelap untuk kelihatan (1.96:1). Jangan gunakan pada latar putih. */
  --warna-aksen-terang: #f59e0b;

  /* Neutral — 90% antara muka */
  --warna-latar: #f6f6f8;
  --warna-permukaan: #ffffff;
  --warna-teks: #1b1b1f;
  --warna-teks-lembut: #55535c;
  --warna-sempadan: #d5d3da;
  --warna-sempadan-lembut: #e8e7eb;

  /* Cincin fokus. Dua nilai kerana satu warna tidak boleh mencapai 3:1
     terhadap kedua-dua putih DAN ungu gelap pada masa yang sama:
     gelap untuk permukaan terang, terang untuk pengepala ungu. */
  --warna-fokus: #b45309;
  --warna-fokus-terang: #ffb703;

  /* Status: pasangan teks + latar lembut untuk lencana */
  --warna-jaya-teks: #14532d;
  --warna-jaya-lembut: #dcfce7;
  --warna-jaya-pekat: #166534;

  --warna-gagal-teks: #7f1d1d;
  --warna-gagal-lembut: #fee2e2;
  --warna-gagal-pekat: #991b1b;

  --warna-amaran-teks: #713f12;
  --warna-amaran-lembut: #fef3c7;

  --warna-maklum-teks: #1e3a8a;
  --warna-maklum-lembut: #dbeafe;

  --warna-neutral-teks: #374151;
  --warna-neutral-lembut: #f1f2f4;

  /* Ukuran */
  --jejari: 6px;
  --jidar: 1rem;
  --lebar-maks: 72rem;
  --lebar-teks: 70ch;   /* bacaan panjang */
  --sasaran-sentuh: 44px;

  --bayang: 0 1px 2px rgba(27, 27, 31, 0.08);
}

/* --------------------------------------------------------------------------
   2  ASAS DAN TIPOGRAFI
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Tiada tatal automatik yang licin: sesetengah pengguna mabuk gerakan */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Fon sistem sahaja. Tiada Google Fonts: WiFi kampus perlahan dan
     kebergantungan CDN sudah dibuang pada Kelompok E. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  /* 16px: di bawah ini Safari iOS mengezum masuk secara automatik apabila
     medan difokus, dan susun atur terpesong. */
  font-size: 16px;
  line-height: 1.6;

  color: var(--warna-teks);
  background: var(--warna-latar);

  /* Jalur pengesahan QR menggunakan width:100vw untuk keluar daripada
     bekas berjidar. 100vw termasuk lebar bar tatal menegak, jadi tanpa
     baris ini halaman itu memperoleh bar tatal mendatar palsu. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  font-weight: 600;
  color: var(--warna-teks);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4, h5, h6 { font-size: 1rem; }

p {
  margin: 0 0 0.85em;
  max-width: var(--lebar-teks);
}

a {
  color: var(--warna-utama);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--warna-utama-gelap);
}

code, .hash, .kod-blok {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono",
    Menlo, monospace;
  font-size: 0.92em;
}

.hash {
  word-break: break-all;
}

/* Cincin fokus yang jelas pada SETIAP elemen boleh fokus.
   :focus-visible supaya klik tetikus tidak menghasilkan cincin yang
   mengganggu, tetapi navigasi papan kekunci sentiasa menghasilkannya. */
:focus-visible {
  outline: 3px solid var(--warna-fokus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Pelayar lama tanpa :focus-visible masih perlu sesuatu */
:focus {
  outline: 3px solid var(--warna-fokus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Teks untuk pembaca skrin sahaja */
.sr-sahaja {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3  LANDMARK
   -------------------------------------------------------------------------- */

/* Pautan langkau: elemen boleh fokus pertama pada setiap halaman */
.langkau {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--warna-utama);
  color: var(--warna-atas-utama);
  font-weight: 600;
  text-decoration: none;
}

.langkau:focus {
  left: 0;
}

.tajuk-laman {
  background: var(--warna-utama);
  color: var(--warna-atas-utama);
  border-bottom: 4px solid var(--warna-aksen-terang);
}

.tajuk-laman__dalam,
.bekas,
.kaki-laman__dalam {
  width: 100%;
  max-width: var(--lebar-maks);
  margin: 0 auto;
  padding: 0 var(--jidar);
}

.tajuk-laman__dalam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.jenama {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--warna-atas-utama);
  text-decoration: none;
}

.jenama:hover {
  color: var(--warna-atas-utama);
  text-decoration: underline;
}

/* Lambang USM dan APEX berwarna ungu gelap dan oren. Diletak terus atas
   pengepala ungu ia hampir hilang, jadi ia duduk atas kepingan putih. */
.jenama__logo {
  display: block;
  height: 40px;
  width: auto;
  padding: 4px 8px;
  border-radius: var(--jejari);
  background: #ffffff;
}

.jenama__teks {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.jenama__akronim {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.jenama__nama {
  font-size: 0.78rem;
  opacity: 0.92;
}

.navigasi {
  flex: 1 1 auto;
}

/* Kandungan navigasi: item peranan di kiri, alat utiliti di kanan. */
.navigasi__kandungan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.navigasi__senarai,
.navigasi__alat,
.navigasi__pengguna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigasi__alat {
  justify-content: flex-end;
  font-size: 0.88rem;
}

.navigasi__pengguna {
  justify-content: flex-end;
}

/* Kumpulan "Tetapan" superadmin. <details> supaya ia berfungsi tanpa
   JavaScript dan boleh dibuka dengan papan kekunci. */
.menu {
  position: relative;
}

.menu__tajuk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0.7rem;
  border-radius: var(--jejari);
  color: var(--warna-atas-utama);
  font-size: 0.94rem;
  cursor: pointer;
  list-style: none;
}

.menu__tajuk::-webkit-details-marker {
  display: none;
}

.menu__tajuk::after {
  content: "\25BE";        /* segi tiga ke bawah */
  font-size: 0.8em;
}

.menu__tajuk:hover {
  background: rgba(255, 255, 255, 0.16);
  text-decoration: underline;
}

.menu__senarai {
  position: absolute;
  right: 0;
  z-index: 50;
  min-width: 15rem;
  margin: 0.25rem 0 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--warna-sempadan);
  border-radius: var(--jejari);
  background: var(--warna-permukaan);
  box-shadow: 0 6px 18px rgba(27, 27, 31, 0.18);
}

.menu__senarai a {
  display: block;
  min-height: var(--sasaran-sentuh);
  padding: 0.6rem 0.7rem;
  border-radius: var(--jejari);
  color: var(--warna-utama);
  text-decoration: none;
}

.menu__senarai a:hover {
  background: var(--warna-utama-lembut);
  text-decoration: underline;
}

/* Pautan navigasi HANYA. .pautan-butang pernah dikumpulkan di sini dan
   mewarisi color:putih — yang betul dalam pengepala ungu, tetapi
   menjadikannya putih-atas-putih pada setiap kad. Kumpulan ini kini
   hanya mengandungi elemen yang benar-benar berada dalam pengepala. */
/* ANAK LANGSUNG sahaja (> li > a). Pemilih keturunan di sini akan turut
   menangkap pautan dalam .menu__senarai — yang duduk atas kad PUTIH — dan
   mewarnakannya putih. Itu tepat jenis pepijat putih-atas-putih yang sudah
   pernah berlaku dengan .pautan-butang. */
.navigasi__senarai > li > a,
.navigasi__alat > li > a,
.navigasi__pengguna > li > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0.7rem;
  border-radius: var(--jejari);
  color: var(--warna-atas-utama);
  text-decoration: none;
  font-size: 0.94rem;
}

.navigasi__senarai > li > a:hover,
.navigasi__alat > li > a:hover,
.navigasi__pengguna > li > a:hover,
.tajuk-laman .pautan-butang:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--warna-atas-utama);
  text-decoration: underline;
}

/* Cincin fokus di dalam pengepala ungu.
   --warna-fokus (oren gelap) hanya mencapai 2.51:1 terhadap ungu, jadi
   pengepala menggunakan oren terang: 7.23:1. */
.tajuk-laman :focus-visible,
.tajuk-laman :focus {
  outline-color: var(--warna-fokus-terang);
}

.loceng {
  position: relative;
}

/* Ikon SVG mewarisi saiz fon jika tiada had, dan pada bar navigasi itu
   menjadikannya jauh lebih besar daripada teks di sebelahnya. */
.loceng svg {
  width: 1.25rem;
  height: 1.25rem;
}

.loceng__kiraan {
  display: inline-block;
  min-width: 1.35em;
  margin-left: 0.35rem;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--warna-aksen-terang);
  color: var(--warna-teks);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.kandungan {
  flex: 1 0 auto;
  padding: 1.25rem 0 2.5rem;
}

.kaki-laman {
  background: var(--warna-utama-gelap);
  color: var(--warna-atas-utama);
  padding: 1.25rem 0;
  font-size: 0.88rem;
}

.kaki-laman a {
  color: var(--warna-atas-utama);
}

.kaki-laman__baris {
  margin: 0 0 0.35rem;
  max-width: none;
}

.kaki-laman__baris--kecil {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4  KAD DAN SUSUN ATUR
   -------------------------------------------------------------------------- */

.kad {
  max-width: var(--lebar-maks);
  margin: 0 auto 1.25rem;
  padding: 1.25rem;
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-sempadan-lembut);
  border-radius: var(--jejari);
  box-shadow: var(--bayang);
}

.kad--sempit {
  max-width: 42rem;
}

.kad__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.kad__kepala > :first-child {
  margin-bottom: 0;
}

.kepala-blok {
  margin-bottom: 1rem;
}

.teraju {
  color: var(--warna-teks-lembut);
  margin-top: -0.35rem;
}

.grid-dua,
.grid-tiga {
  display: grid;
  gap: 1rem;
}

.grid-dua { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-tiga { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.tindakan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.senarai-butiran {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

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

.senarai-butiran dt {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--warna-teks-lembut);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.senarai-butiran dd {
  margin: 0.1rem 0 0;
  word-break: break-word;
}

.senarai-langkah {
  max-width: var(--lebar-teks);
  padding-left: 1.2rem;
}

.senarai-langkah li {
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   5  BORANG
   Satu lajur, label DI ATAS medan, tidak pernah di sebelah. Pelajar
   mengisi borang ini sekali setahun; setiap kekaburan menjadi panggilan
   telefon kepada urusetia.
   -------------------------------------------------------------------------- */

.borang {
  max-width: 40rem;
}

.borang--tapis {
  max-width: none;
}

/* Kumpulan medan berkaitan dengan tajuk kecil */
.borang fieldset,
.kumpulan-medan {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--warna-sempadan-lembut);
  padding-top: 1rem;
}

.borang fieldset:first-of-type,
.kumpulan-medan:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.borang legend,
.kumpulan-medan__tajuk {
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--warna-utama);
}

.medan {
  margin-bottom: 1.1rem;
}

.medan label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

/* Medan WAJIB ditanda. Kita menanda yang wajib, bukan yang pilihan:
   majoriti medan wajib, jadi menanda yang pilihan menyembunyikan isyarat. */
.wajib {
  color: var(--warna-aksen-teks);
  font-weight: 700;
  margin-left: 0.15rem;
}

.medan__petunjuk {
  display: block;
  margin: -0.15rem 0 0.35rem;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--warna-teks-lembut);
}

.medan input[type="text"],
.medan input[type="email"],
.medan input[type="password"],
.medan input[type="date"],
.medan input[type="number"],
.medan input[type="tel"],
.medan input[type="search"],
.medan input[type="file"],
.medan select,
.medan textarea,
.kawasan-teks {
  display: block;
  width: 100%;
  max-width: 32rem;
  min-height: var(--sasaran-sentuh);
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--warna-sempadan);
  border-radius: var(--jejari);
  font: inherit;
  background: var(--warna-permukaan);
  color: var(--warna-teks);
}

.medan textarea,
.kawasan-teks {
  min-height: 7rem;
  resize: vertical;
}

/* Teks placeholder.

   Tanpa peraturan ini setiap pelayar memilih warnanya sendiri: Chrome
   #757575 (4.61:1, nyaris), Firefox mengenakan opacity 0.54 (3.41:1),
   Safari #a9a9a9 (2.35:1). opacity:1 diperlukan untuk membatalkan
   lalai Firefox itu.

   Placeholder BUKAN pengganti label — setiap medan mempunyai <label>
   dan .medan__petunjuk sendiri. Ia hanya contoh format. */
::placeholder {
  color: var(--warna-teks-lembut);   /* 7.56:1 atas putih */
  opacity: 1;
}

.medan input:hover,
.medan select:hover,
.medan textarea:hover {
  border-color: var(--warna-teks-lembut);
}

/* Medan yang gagal pengesahan: sempadan tebal + warna, bukan warna sahaja */
.medan--ralat input,
.medan--ralat select,
.medan--ralat textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 2px solid var(--warna-gagal-pekat);
  background: var(--warna-gagal-lembut);
}

/* Mesej ralat DI SEBELAH medan yang salah, bukan hanya di atas halaman */
.medan__ralat {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  max-width: 32rem;
  padding: 0.4rem 0.55rem;
  border-left: 4px solid var(--warna-gagal-pekat);
  background: var(--warna-gagal-lembut);
  color: var(--warna-gagal-teks);
  font-size: 0.9rem;
  font-weight: 500;
}

.medan__ralat svg {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.medan--semak label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0;
}

.medan--semak input[type="checkbox"],
.medan--semak input[type="radio"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
}

.borang__tindakan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--warna-sempadan-lembut);
}

.borang-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.borang-baris select {
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--warna-sempadan);
  border-radius: var(--jejari);
  font: inherit;
}

.huruf-besar {
  text-transform: uppercase;
}

.notis-pdpa {
  max-width: var(--lebar-teks);
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--warna-utama-lembut);
  border-left: 4px solid var(--warna-utama);
  border-radius: 0 var(--jejari) var(--jejari) 0;
  font-size: 0.92rem;
}

.notis-pdpa p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6  BUTANG
   Sasaran sentuh minimum 44x44px pada semua butang dan pautan bertindak.
   -------------------------------------------------------------------------- */

.butang,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--sasaran-sentuh);
  min-width: var(--sasaran-sentuh);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--warna-utama);
  border-radius: var(--jejari);
  background: var(--warna-utama);
  color: var(--warna-atas-utama);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.butang:hover,
button:hover {
  background: var(--warna-utama-gelap);
  border-color: var(--warna-utama-gelap);
  color: var(--warna-atas-utama);
  text-decoration: none;
}

/* Tindakan sekunder: sama saiz, penekanan lebih rendah */
.butang--sunyi,
button.butang--sunyi {
  background: var(--warna-permukaan);
  color: var(--warna-utama);
  border-color: var(--warna-sempadan);
}

.butang--sunyi:hover,
button.butang--sunyi:hover {
  background: var(--warna-utama-lembut);
  color: var(--warna-utama-gelap);
  border-color: var(--warna-utama);
}

/* Oren hanya di sini: tindakan penting tunggal pada satu halaman */
.butang--penting,
button.butang--penting {
  background: var(--warna-aksen);
  border-color: var(--warna-aksen);
  color: var(--warna-atas-aksen);
}

.butang--penting:hover,
button.butang--penting:hover {
  background: var(--warna-aksen-teks);
  border-color: var(--warna-aksen-teks);
  color: var(--warna-atas-aksen);
}

.butang--bahaya,
button.butang--bahaya {
  background: var(--warna-gagal-pekat);
  border-color: var(--warna-gagal-pekat);
  color: var(--warna-atas-utama);
}

.butang--bahaya:hover,
button.butang--bahaya:hover {
  background: var(--warna-gagal-teks);
  border-color: var(--warna-gagal-teks);
}

/* Keadaan "sedang menghantar": butang dinyahaktif dan teksnya bertukar,
   supaya pelajar tahu klik mereka diterima dan tidak menekan dua kali.

   Warna ditetapkan secara eksplisit, BUKAN opacity. opacity mengkomposit
   teks dan latar ke arah halaman di belakangnya, jadi butang oren pada
   0.65 jatuh kepada 3.20:1 dan butang merah kepada 3.83:1 — kedua-duanya
   gagal AA. Satu pasangan tetap juga menjadikan keadaan nyahaktif
   kelihatan sama pada semua butang, iaitu isyarat yang lebih jelas
   daripada sekadar pudar. */
.butang[disabled],
button[disabled],
.butang[aria-disabled="true"],
button[aria-disabled="true"] {
  background: var(--warna-sempadan);        /* #d5d3da */
  border-color: var(--warna-sempadan);
  color: var(--warna-teks-lembut);          /* 5.02:1 */
  cursor: progress;
  pointer-events: none;
}

/* Butang yang kelihatan seperti pautan.

   Ia mesti membawa warnanya SENDIRI, bukan mewarisi daripada konteks:
   background:none bermakna ia tidak pernah melukis latar, jadi warna
   teksnya mesti sah terhadap permukaan putih — permukaan lalai sistem
   ini. Dalam pengepala ungu, peraturan berskop di bawah menggantikannya. */
.pautan-butang {
  display: inline-flex;
  align-items: center;
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--jejari);
  background: none;
  color: var(--warna-utama);        /* 12.62:1 atas putih */
  font: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  text-decoration: underline;
}

.pautan-butang:hover {
  color: var(--warna-utama-gelap);
}

/* Satu-satunya tempat teks putih betul: di dalam pengepala ungu. */
.tajuk-laman .pautan-butang {
  color: var(--warna-atas-utama);   /* 12.62:1 atas ungu */
}

/* Tindakan memusnah sebagai pautan: merah gelap atas putih, bukan
   latar merah — kerana background:none di atas membuang latar itu. */
.pautan-butang--bahaya {
  color: var(--warna-gagal-pekat);  /* 8.31:1 atas putih */
}

.pautan-butang--bahaya:hover {
  color: var(--warna-gagal-teks);
}

/* --------------------------------------------------------------------------
   7  JADUAL
   Jadual pada desktop. Di bawah 768px setiap baris menjadi kad bertindan
   dengan label medan pada setiap nilai — jadual yang mengalir keluar skrin
   tidak boleh digunakan di kaunter atau di pintu pagar.
   -------------------------------------------------------------------------- */

.jadual-bekas {
  overflow-x: auto;
}

.jadual {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.jadual th,
.jadual td {
  padding: 0.6rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.jadual thead th {
  background: var(--warna-utama-lembut);
  color: var(--warna-utama);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--warna-utama);
  white-space: nowrap;
}

.jadual tbody tr:hover {
  background: var(--warna-utama-lembut);
}

.jadual--padat th,
.jadual--padat td {
  padding: 0.4rem 0.5rem;
}

.baris--mati td {
  color: var(--warna-teks-lembut);
}

/* Baris tergendala: garis oren di tepi, bukan latar oren penuh */
.baris--tergendala td:first-child {
  box-shadow: inset 3px 0 0 var(--warna-aksen);
}

@media (max-width: 767px) {
  .jadual-bekas {
    overflow-x: visible;
  }

  .jadual--kad,
  .jadual--kad thead,
  .jadual--kad tbody,
  .jadual--kad tr,
  .jadual--kad th,
  .jadual--kad td {
    display: block;
  }

  /* Pengepala disembunyikan secara visual; labelnya kini pada setiap sel */
  .jadual--kad thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .jadual--kad tr {
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.15rem;
    border: 1px solid var(--warna-sempadan);
    border-radius: var(--jejari);
    background: var(--warna-permukaan);
  }

  .jadual--kad tbody tr:hover {
    background: var(--warna-permukaan);
  }

  .jadual--kad td {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--warna-sempadan-lembut);
  }

  .jadual--kad td:last-child {
    border-bottom: 0;
  }

  .jadual--kad td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--warna-teks-lembut);
  }

  /* Sel tanpa label (kotak semak, butang) menggunakan lebar penuh */
  .jadual--kad td[data-label=""] {
    grid-template-columns: 1fr;
  }

  .baris--tergendala td:first-child {
    box-shadow: none;
  }

  .jadual--kad tr.baris--tergendala {
    border-left: 4px solid var(--warna-aksen);
  }
}

/* --------------------------------------------------------------------------
   8  STATUS
   Lebih 8% lelaki mengalami buta warna keturunan. Setiap penanda status
   membawa TIGA isyarat: warna, ikon, dan teks. Buang mana-mana satu dan
   maklumat itu masih sampai.
   -------------------------------------------------------------------------- */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lencana svg {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* Lencana tanpa pengubah: cip neutral (kod sesi, no. rujukan, peranan).
   Bukan penanda status, jadi tiada ikon diperlukan. */
.lencana {
  color: var(--warna-neutral-teks);
  background: var(--warna-neutral-lembut);
}

/* Kumpulan JAYA: diluluskan, disahkan, sah, aktif */
.lencana--diluluskan,
.lencana--disahkan,
.lencana--sah,
.lencana--aktif {
  color: var(--warna-jaya-teks);
  background: var(--warna-jaya-lembut);
}

/* Kumpulan GAGAL: tidak diluluskan, ditarik balik, dibatal, mati */
.lencana--tidak_diluluskan,
.lencana--ditarik_balik,
.lencana--dibatal,
.lencana--mati {
  color: var(--warna-gagal-teks);
  background: var(--warna-gagal-lembut);
}

/* Kumpulan AMARAN: dikembalikan, tergendala */
.lencana--dikembalikan,
.lencana--tergendala {
  color: var(--warna-amaran-teks);
  background: var(--warna-amaran-lembut);
}

/* Kumpulan MAKLUM: dihantar, sedang disemak */
.lencana--dihantar,
.lencana--sedang_disemak {
  color: var(--warna-maklum-teks);
  background: var(--warna-maklum-lembut);
}

/* Kumpulan NEUTRAL: draf, arkib */
.lencana--draf,
.lencana--arkib {
  color: var(--warna-neutral-teks);
  background: var(--warna-neutral-lembut);
}

/* --------------------------------------------------------------------------
   9  MESEJ SEKILAS DAN NOTA
   -------------------------------------------------------------------------- */

.sekilas {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: var(--lebar-maks);
  margin: 0 auto 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--jejari);
  border-left: 5px solid currentColor;
}

.sekilas svg {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.1em;
}

.sekilas > div {
  min-width: 0;
}

.sekilas p:last-child {
  margin-bottom: 0;
}

.sekilas--jaya {
  color: var(--warna-jaya-teks);
  background: var(--warna-jaya-lembut);
}

.sekilas--ralat {
  color: var(--warna-gagal-teks);
  background: var(--warna-gagal-lembut);
}

.sekilas--amaran {
  color: var(--warna-amaran-teks);
  background: var(--warna-amaran-lembut);
}

.sekilas ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.nota {
  color: var(--warna-teks-lembut);
  max-width: var(--lebar-teks);
}

.nota--kecil {
  font-size: 0.86rem;
}

.pengesahan {
  padding: 0.9rem 1rem;
  background: var(--warna-amaran-lembut);
  border-left: 5px solid var(--warna-amaran-teks);
  border-radius: 0 var(--jejari) var(--jejari) 0;
  color: var(--warna-amaran-teks);
}

.kiraan-detik {
  font-weight: 700;
}

.kotak-kata-laluan {
  max-width: 32rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--warna-jaya-lembut);
  border: 2px solid var(--warna-jaya-pekat);
  border-radius: var(--jejari);
  color: var(--warna-jaya-teks);
}

.kotak-kata-laluan__tajuk {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: inherit;
}

.kotak-kata-laluan__nilai {
  margin: 0.25rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--warna-permukaan);
  border: 1px dashed var(--warna-jaya-pekat);
  border-radius: var(--jejari);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--warna-teks);
  user-select: all;
}

.kotak-kata-laluan__nota {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}

.salin-penanda {
  font-size: 0.86rem;
  font-weight: 600;
}

.pratonton-hebahan {
  padding: 1.25rem;
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-sempadan);
  border-radius: var(--jejari);
}

.pilihan {
  font-size: 0.88rem;
  color: var(--warna-teks-lembut);
}

/* --------------------------------------------------------------------------
   10  GARIS MASA PERMOHONAN
   Pelajar tidak menerima emel. Skrin ini satu-satunya sumber maklumat
   mereka, jadi status mesti perkara paling menonjol pada halaman.
   -------------------------------------------------------------------------- */

.status-utama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--jejari);
  border-left: 6px solid currentColor;
}

.status-utama--jaya    { color: var(--warna-jaya-teks);    background: var(--warna-jaya-lembut); }
.status-utama--gagal   { color: var(--warna-gagal-teks);   background: var(--warna-gagal-lembut); }
.status-utama--amaran  { color: var(--warna-amaran-teks);  background: var(--warna-amaran-lembut); }
.status-utama--maklum  { color: var(--warna-maklum-teks);  background: var(--warna-maklum-lembut); }
.status-utama--neutral { color: var(--warna-neutral-teks); background: var(--warna-neutral-lembut); }

.status-utama__ikon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.status-utama__teks {
  min-width: 0;
}

.status-utama__tajuk {
  display: block;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.status-utama__huraian {
  display: block;
  margin: 0.2rem 0 0;
  color: inherit;
  font-size: 0.95rem;
}

.garis-masa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.garis-masa__langkah {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
}

/* Garis menegak yang menyambung setiap titik */
.garis-masa__langkah::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2rem;
  bottom: -0.15rem;
  width: 2px;
  background: var(--warna-sempadan);
}

.garis-masa__langkah:last-child {
  padding-bottom: 0;
}

.garis-masa__langkah:last-child::before {
  display: none;
}

.garis-masa__titik {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--warna-sempadan);
  background: var(--warna-permukaan);
  color: var(--warna-teks-lembut);
  font-weight: 700;
}

.garis-masa__titik svg {
  width: 1.15rem;
  height: 1.15rem;
}

.garis-masa__label {
  align-self: center;
  font-weight: 600;
  color: var(--warna-teks-lembut);
}

.garis-masa__nota {
  grid-column: 2;
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  color: var(--warna-teks-lembut);
}

/* Langkah selesai: titik ungu penuh dengan tanda semak */
.garis-masa__langkah--selesai .garis-masa__titik {
  background: var(--warna-utama);
  border-color: var(--warna-utama);
  color: var(--warna-atas-utama);
}

.garis-masa__langkah--selesai .garis-masa__label {
  color: var(--warna-teks);
}

.garis-masa__langkah--selesai::before {
  background: var(--warna-utama);
}

/* Langkah semasa: cincin oren tebal — satu-satunya oren pada halaman ini */
.garis-masa__langkah--semasa .garis-masa__titik {
  background: var(--warna-permukaan);
  border: 3px solid var(--warna-aksen);
  color: var(--warna-aksen-teks);
}

.garis-masa__langkah--semasa .garis-masa__label {
  color: var(--warna-teks);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11  PAPAN PEMUKA DAN CARTA
   -------------------------------------------------------------------------- */

.kad-kiraan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.kad-kiraan__item {
  padding: 0.85rem 1rem;
  background: var(--warna-utama-lembut);
  border: 1px solid var(--warna-sempadan-lembut);
  border-left: 4px solid var(--warna-utama);
  border-radius: var(--jejari);
}

.kad-kiraan__item--amaran {
  background: var(--warna-amaran-lembut);
  border-left-color: var(--warna-aksen);
}

.kad-kiraan__nombor {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--warna-utama);
}

.kad-kiraan__item--amaran .kad-kiraan__nombor {
  color: var(--warna-amaran-teks);
}

.kad-kiraan__label {
  display: block;
  font-size: 0.86rem;
  color: var(--warna-teks-lembut);
}

/* Kad ringkasan papan pemuka.
   Lima kad, saiz SAMA, jarak seragam, setiap satu satu pautan. Grid
   auto-fit dengan minmax memberi lajur yang sama lebar pada setiap
   titik putus tanpa media query. */
.kad-ringkasan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.85rem;
}

.kad-ringkasan__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 6.5rem;
  padding: 1rem;
  border: 1px solid var(--warna-sempadan);
  border-top: 4px solid var(--warna-utama);
  border-radius: var(--jejari);
  background: var(--warna-permukaan);
  color: var(--warna-teks);
  text-decoration: none;
}

.kad-ringkasan__item:hover {
  background: var(--warna-utama-lembut);
  color: var(--warna-teks);
  text-decoration: none;
  border-top-color: var(--warna-aksen);
}

.kad-ringkasan__item:hover .kad-ringkasan__label {
  text-decoration: underline;
}

.kad-ringkasan__nombor {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--warna-utama);
}

.kad-ringkasan__label {
  display: block;
  font-size: 0.9rem;
  color: var(--warna-teks-lembut);
}

.carta-kotak {
  position: relative;
  height: 18rem;
}

/* --------------------------------------------------------------------------
   12  HALAMAN PENGESAHAN QR
   Keadaan penggunaan: pengawal keselamatan berdiri di pintu pagar,
   memegang telefon, mungkin di bawah cahaya matahari. Keputusan mesti
   boleh dibaca dari jarak lengan tanpa menatal.
   -------------------------------------------------------------------------- */

.sah {
  max-width: 40rem;
  margin: 0 auto;
}

/* Jalur menyeluruh lebar skrin, keluar daripada kekangan .bekas */
.sah__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  /* Lebar penuh viewport walaupun berada dalam bekas berjidar */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.25rem;   /* rapat ke pengepala */
  margin-bottom: 1.25rem;

  min-height: 120px;
  padding: 1.5rem 1rem;

  font-size: 2.5rem;      /* 40px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.sah__status svg {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
}

/* Kontras maksimum, bukan sekadar mencukupi */
.sah__status--sah {
  background: var(--warna-jaya-pekat);
  color: var(--warna-atas-utama);
}

.sah__status--tidak {
  background: var(--warna-gagal-pekat);
  color: var(--warna-atas-utama);
}

/* Lebih daripada satu padanan: BUKAN keputusan, tetapi arahan untuk memilih
   dahulu. Teks gelap pada kuning supaya ia tidak disalah anggap sebagai
   "dibenarkan" (hijau) atau "tidak dibenarkan" (merah). */
.sah__status--amaran {
  background: var(--warna-amaran-lembut);
  color: var(--warna-amaran-teks);
}

.senarai-padanan {
  max-width: none;
  margin: 0;
  padding-left: 1.4rem;
}

.senarai-padanan li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.sah__sebab {
  max-width: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 5px solid var(--warna-gagal-pekat);
  background: var(--warna-gagal-lembut);
  color: var(--warna-gagal-teks);
  font-size: 1.15rem;
  font-weight: 600;
}

/* Maklumat pelajar: besar dan senang diimbas */
.sah__butiran {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.sah__butiran > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.5rem 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.sah__butiran dt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--warna-teks-lembut);
}

.sah__butiran dd {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  word-break: break-word;
}

@media (max-width: 480px) {
  .sah__status {
    font-size: 2rem;   /* 32px — had minimum */
    gap: 0.5rem;
  }

  .sah__status svg {
    width: 2.25rem;
    height: 2.25rem;
  }

  .sah__butiran > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

/* --------------------------------------------------------------------------
   13  NOTIFIKASI, TAB, PENOMBORAN
   -------------------------------------------------------------------------- */

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

.notifikasi {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.notifikasi--baharu {
  border-left: 4px solid var(--warna-aksen);
  padding-left: 0.75rem;
  background: var(--warna-utama-lembut);
}

.notifikasi__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.notifikasi__masa {
  font-size: 0.84rem;
  color: var(--warna-teks-lembut);
}

.notifikasi__mesej {
  margin: 0.3rem 0 0;
}

.tab {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--warna-sempadan);
}

.tab__pautan {
  display: inline-flex;
  align-items: center;
  min-height: var(--sasaran-sentuh);
  padding: 0.5rem 0.9rem;
  border-radius: var(--jejari) var(--jejari) 0 0;
  color: var(--warna-teks-lembut);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
}

.tab__pautan:hover {
  background: var(--warna-utama-lembut);
  color: var(--warna-utama);
}

/* Tab aktif ditanda dengan warna DAN garis tebal DAN aria-current */
.tab__pautan--aktif {
  color: var(--warna-utama);
  border-bottom-color: var(--warna-aksen);
  background: var(--warna-utama-lembut);
}

/* Kiraan pada tab: berapa rekod di sebalik setiap tab, dengan penapis
   semasa dikenakan. */
.tab__kiraan {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 0.45rem;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--warna-neutral-lembut);
  color: var(--warna-neutral-teks);
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
}

.tab__pautan--aktif .tab__kiraan {
  background: var(--warna-utama);
  color: var(--warna-atas-utama);
}

/* Catatan dalam senarai keputusan: satu baris setiap penulis. */
.catatan-baris {
  display: block;
  font-size: 0.88rem;
}

.penomboran {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--warna-sempadan-lembut);
  font-size: 0.92rem;
}

.penomboran a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sasaran-sentuh);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--warna-sempadan);
  border-radius: var(--jejari);
  text-decoration: none;
}

.penomboran a:hover {
  background: var(--warna-utama-lembut);
}

/* --------------------------------------------------------------------------
   14  CETAKAN
   Senarai penghuni ialah dokumen yang urusetia cetak dan serahkan kepada
   Jabatan Keselamatan. Buang navigasi, warna latar dan butang.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --warna-latar: #ffffff;
    --warna-permukaan: #ffffff;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .tajuk-laman,
  .kaki-laman,
  .navigasi,
  .navigasi__senarai,
  .navigasi__pengguna,
  .langkau,
  .borang,
  .borang--tapis,
  .tindakan,
  .penomboran,
  .tab,
  .sembunyi-cetak,
  .butang,
  button {
    display: none !important;
  }

  .kandungan {
    padding: 0;
  }

  .kad {
    margin: 0 0 0.5cm;
    padding: 0;
    border: 0;
    box-shadow: none;
    max-width: none;
  }

  .kad__kepala {
    border-bottom: 1pt solid #000000;
    margin-bottom: 0.3cm;
  }

  .jadual-bekas {
    overflow: visible;
  }

  .jadual {
    font-size: 10pt;
  }

  .jadual thead th {
    background: #ffffff;
    color: #000000;
    border-bottom: 1pt solid #000000;
  }

  .jadual th,
  .jadual td {
    padding: 2pt 4pt;
    border-bottom: 0.5pt solid #999999;
  }

  /* Ulang pengepala pada setiap halaman bercetak */
  .jadual thead {
    display: table-header-group;
  }

  .jadual tr {
    page-break-inside: avoid;
  }

  .lencana {
    border: 0.5pt solid #000000;
    background: #ffffff !important;
    color: #000000 !important;
  }

  a {
    color: #000000;
    text-decoration: none;
  }

  .cetak-sahaja {
    display: block !important;
  }
}

.cetak-sahaja {
  display: none;
}

/* --------------------------------------------------------------------------
   15  GERAKAN DIKURANGKAN
   Hormati tetapan sistem pengguna. Tiada peralihan langsung apabila
   diminta — bukan sekadar dipendekkan.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Suaian skrin kecil am
   -------------------------------------------------------------------------- */

/* Butang menu HANYA wujud pada skrin kecil. Peraturan asas MESTI didahulukan:
   kekhususan yang sama, jadi yang terakhir dalam fail menang. */
.navigasi__butang {
  display: none;
}

@media (max-width: 640px) {
  /* --jidar KEKAL 1rem. Ia pernah dikecilkan kepada 0.75rem di sini, dan
     kesannya teks hampir mencecah tepi skrin telefon. 16px ialah jidar
     minimum yang selesa dibaca. */

  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }

  .tajuk-laman__dalam {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  /* Navigasi runtuh menjadi satu butang menu. Senarai penuh mempunyai
     belasan pautan bagi superadmin dan memenuhi seluruh skrin telefon
     sebelum kandungan halaman bermula. */
  .navigasi__butang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--sasaran-sentuh);
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--warna-atas-utama);
    border-radius: var(--jejari);
    background: transparent;
    color: var(--warna-atas-utama);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .navigasi__butang:focus-visible {
    outline-color: var(--warna-fokus-terang);
  }

  .navigasi {
    width: 100%;
  }

  .navigasi__senarai {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .navigasi__senarai > li > a,
  .navigasi__senarai > li > form > button {
    display: block;
    width: 100%;
    min-height: var(--sasaran-sentuh);
    padding: 0.6rem 0;
  }

  .navigasi__pengguna {
    justify-content: flex-start;
  }

  .kad {
    padding: 1rem 0.85rem;
  }

  .kad__kepala {
    flex-direction: column;
    align-items: flex-start;
  }

  .senarai-butiran {
    grid-template-columns: 1fr;
  }

  .borang__tindakan .butang,
  .borang__tindakan button {
    flex: 1 1 12rem;
  }

  .carta-kotak {
    height: 14rem;
  }
}

/* Kotak pengesahan kenaikan taraf peranan (skrin A-06). Kecil, tetapi
   ia satu-satunya halangan sebelum seseorang boleh meluluskan permit. */
.semak-naik-taraf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--warna-teks-lembut);
  white-space: nowrap;
}

/* Baris kerja: satu ayat di kepala setiap skrin kerja yang menjawab
   "berapa yang menunggu saya". Menggantikan barisan kad statistik yang
   perlu ditafsir sebelum ia berguna. */
.baris-kerja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--warna-sempadan-lembut);
  border-left: 4px solid var(--warna-utama);
  border-radius: var(--jejari);
  background: var(--warna-utama-lembut);
  font-size: 1.05rem;
}

.baris-kerja svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}

/* --------------------------------------------------------------------------
   16  HALAMAN AWAM
   Pelawat mahu tahu satu perkara: bolehkah saya memohon sekarang, dan
   butang mana. Semuanya berpusat, satu lajur, tiada hiasan.
   -------------------------------------------------------------------------- */

.kad--awam {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.awam__logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.awam__logo img {
  height: 52px;
  width: auto;
}

.awam__logo img + img {
  height: 40px;
}

.awam__tajuk {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  color: var(--warna-utama);
}

.awam__tajuk-kecil {
  margin: 0 0 1rem;
  color: var(--warna-utama);
}

.awam__subtajuk {
  max-width: none;
  margin: 0 0 1.5rem;
  color: var(--warna-teks-lembut);
}

.awam__tarikh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.awam__tarikh-kotak {
  padding: 0.85rem 1rem;
  border: 1px solid var(--warna-sempadan);
  border-left: 4px solid var(--warna-utama);
  border-radius: var(--jejari);
}

.awam__tarikh-label {
  display: block;
  font-size: 0.85rem;
  color: var(--warna-teks-lembut);
}

.awam__tarikh-nilai {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--warna-teks);
}

/* Status: warna + ikon + teks. */
.awam__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
  margin: 0 0 1.25rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
}

.awam__status svg {
  width: 1.4rem;
  height: 1.4rem;
}

.awam__status--buka {
  background: var(--warna-jaya-lembut);
  color: var(--warna-jaya-teks);
}

.awam__status--tunggu {
  background: var(--warna-maklum-lembut);
  color: var(--warna-maklum-teks);
}

.awam__status--tutup {
  background: var(--warna-gagal-lembut);
  color: var(--warna-gagal-teks);
}

.awam__tindakan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.butang--besar {
  min-height: 3.25rem;
  padding: 0.85rem 2rem;
  font-size: 1.1rem;
}

.awam__hebahan {
  max-width: none;
  margin: 1.25rem 0 0;
}

.awam__hebahan a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.awam__hebahan svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Empat langkah proses. */
.langkah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.langkah__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--warna-sempadan-lembut);
  border-radius: var(--jejari);
  background: var(--warna-utama-lembut);
}

.langkah__ikon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--warna-permukaan);
  color: var(--warna-utama);
}

.langkah__ikon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.langkah__tajuk {
  display: block;
  color: var(--warna-teks);
}

.langkah__huraian {
  display: block;
  font-size: 0.9rem;
  color: var(--warna-teks-lembut);
}

/* --------------------------------------------------------------------------
   17  PERMIT: KAD DIGITAL PELAJAR DAN SKRIN CETAKAN URUSETIA
   Pelajar tidak memuat turun PDF. Mereka melihat kad ini dan datang
   mengambil helai bercetak di Pejabat Desasiswa JLU.
   -------------------------------------------------------------------------- */

.permit-kad {
  padding: 1rem 1.1rem;
  border: 2px solid var(--warna-utama);
  border-radius: var(--jejari);
  background: var(--warna-utama-lembut);
}

.permit-kad .senarai-butiran {
  margin: 0;
}

/* Status penyediaan: warna + ikon + teks. */
.permit-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: none;
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--jejari);
  border-left: 4px solid var(--warna-sempadan);
  background: var(--warna-neutral-lembut);
  color: var(--warna-neutral-teks);
}

.permit-status svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}

.permit-status--sedia-dibuat {
  background: var(--warna-maklum-lembut);
  color: var(--warna-maklum-teks);
  border-left-color: var(--warna-maklum-teks);
}

.permit-status--sedia,
.permit-status--diambil {
  background: var(--warna-jaya-lembut);
  color: var(--warna-jaya-teks);
  border-left-color: var(--warna-jaya-pekat);
}

.permit-status--batal {
  background: var(--warna-gagal-lembut);
  color: var(--warna-gagal-teks);
  border-left-color: var(--warna-gagal-pekat);
}

/* Skrin cetakan urusetia */
.lajur-pilih {
  width: 2.5rem;
  text-align: center;
}

.lajur-pilih input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
}

/* Butang cetak kekal kelihatan semasa menatal senarai panjang. */
.borang__tindakan--lekat {
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  background: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-sempadan-lembut);
}

.penanda {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.penanda svg {
  width: 1rem;
  height: 1rem;
}

.penanda--ya {
  color: var(--warna-jaya-teks);
}

.penanda--tidak {
  color: var(--warna-teks-lembut);
}

.senarai-ambil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.senarai-ambil form {
  margin: 0;
}

/* Kemajuan cetakan kelompok permit. */
.kemajuan-teks {
  font-weight: 600;
  color: var(--warna-utama);
}

/* Butang penjanaan fail dalam jadual kelompok: kelihatan seperti pautan
   tetapi menghantar POST, kerana ia mengubah keadaan. */
.pautan-fail {
  padding: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono",
    Menlo, monospace;
  font-size: 0.92em;
  text-align: left;
}

.senarai-ambil form,
#jadual-kelompok form {
  margin: 0;
}