/* ============================================================
   Sistem e-Perjawatan — Gaya
   Tema cerah (lalai) + tema gelap melalui [data-tema="gelap"]
   ============================================================ */

:root {
  --bg:         #FAFAF7;
  --surface:    #FFFFFF;
  --surface-2:  #EFF1EC;
  --teks:       #14342B;
  --teks-lembut:#5E6F66;
  --garis:      #E2E3DC;
  --brand:      #14342B;
  --brand-2:    #1E4A3D;
  --paut:       #1E4A3D;
  --emas:       #C9A227;
  --merah:      #A4382E;
  --merah-bg:   #F9ECEA;
  --hijau:      #2E7D52;
  --hijau-bg:   #EAF4EE;
  --kuning-bg:  #FDF3DC;
  --kuning-teks:#8A6D1B;
}

[data-tema="gelap"] {
  --bg:         #0F1518;
  --surface:    #192226;
  --surface-2:  #222D32;
  --teks:       #E7ECEA;
  --teks-lembut:#9DAAA4;
  --garis:      #2B373D;
  --brand:      #16382E;
  --brand-2:    #21513F;
  --paut:       #7FC9A6;
  --emas:       #D9B748;
  --merah:      #E58A80;
  --merah-bg:   #36211F;
  --hijau:      #5FB88A;
  --hijau-bg:   #18291F;
  --kuning-bg:  #2F2914;
  --kuning-teks:#D9C07A;
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--teks);
  background: var(--bg);
  line-height: 1.55;
  transition: background .15s, color .15s;
}

a { color: var(--paut); }

/* ---------- Bar atas ---------- */
/* ── Bar atas MELEKAT ──
   Kekal di skrin semasa menatal supaya pengguna boleh bertukar menu
   tanpa menatal semula ke atas. Halaman ini banyak jadual panjang —
   menatal balik ke atas berulang kali memenatkan mata dan memecah
   tumpuan. */
:root { --tinggi-nav: 56px; }

.topbar {
  background: var(--brand);
  color: #fff;
  border-bottom: 3px solid var(--emas);
  position: sticky;
  top: 0;
  z-index: 200;          /* mesti melebihi kepala jadual melekat (z-index 3) */
}
.topbar-dalam {
  /* 1180px: cukup luas untuk 5 kumpulan tanpa berbalut, tetapi tidak
     terlalu luas sehingga meninggalkan ruang kosong besar di tengah. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 26px;              /* jarak jenama <-> menu */
  min-height: 56px;
}
.jenama {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.jenama span { color: var(--emas); }
/* ── Menu berkumpulan ──
   14 pautan dalam satu baris terlalu lebar. Dikumpulkan kepada lima
   kumpulan dengan menu jatuh. */
/* nowrap: menu MESTI kekal satu baris. Berbalut ke baris kedua
   menyebabkan susunan yang kelihatan rosak dan mengubah ketinggian bar.

   SUSUNAN: jenama dan menu duduk BERSEBELAHAN di kiri; kawalan
   pengguna ditolak ke kanan dengan margin-left:auto.

   Cubaan meletakkan menu di tengah (justify-content: center) telah
   dibatalkan — ia meninggalkan jenama tersadai sendirian di hujung
   kiri dengan ruang kosong besar di antaranya. Jenama dan menu ialah
   satu kumpulan navigasi; ia patut dibaca bersama. Ruang kosong yang
   tinggal jatuh di antara menu dan kawalan pengguna, yang memang
   dijangka kerana kawalan itu zon berasingan di sebelah kanan. */
.nav {
  display: flex;
  gap: 2px;
  flex: 0 1 auto;        /* jangan mengembang — hugging jenama */
  flex-wrap: nowrap;
  align-items: center;
}

.nav-pautan {
  color: #D7E0DB;
  text-decoration: none;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  /* Tinggi TETAP, bukan padding. <a> dan <button> mewarisi line-height
     yang berbeza daripada pelayar, jadi padding sahaja menghasilkan
     ketinggian yang tidak sama — "Utama" kelihatan tersasar sedikit
     berbanding butang kumpulan di sebelahnya. */
  height: 34px;
  line-height: 1;
  box-sizing: border-box;
  margin: 0;
}
.nav-pautan:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-pautan.aktif { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }

.nav-butang {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: inherit;      /* butang tidak mewarisi warna secara automatik */
}
.nav-anak-panah { font-size: 10px; opacity: .75; margin-left: 1px; }

/* Jenama tidak sepatutnya mengembang dan menolak menu keluar dari tengah */
.jenama { flex-shrink: 0; }

.nav-kumpulan { position: relative; }

/* Titi tidak kelihatan merentasi jurang antara butang dan menu.
   Tanpa ini, kursor yang bergerak ke bawah melintasi ruang kosong,
   :hover terputus, dan menu hilang sebelum sempat diklik. */
.nav-kumpulan::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
}

.nav-jatuh {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 6px;
  display: none;
  z-index: 210;
}
/* Kumpulan terakhir dibuka ke kiri supaya tidak terpotong di tepi skrin */
.nav-kumpulan:last-child .nav-jatuh { left: auto; right: 0; }
/* Buka pada tetikus, papan kekunci (focus-within) dan sentuhan (kelas .buka) */
.nav-kumpulan:hover .nav-jatuh,
.nav-kumpulan:focus-within .nav-jatuh,
.nav-kumpulan.buka .nav-jatuh { display: block; }

.nav-jatuh a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;      /* sasaran klik longgar — lebih mudah dituju */
  border-radius: 7px;
  color: var(--teks);
  text-decoration: none;
  font-size: 14.5px;       /* lebih besar daripada bar atas: lebih mudah dibaca */
  line-height: 1.35;
}
.nav-jatuh a:hover { background: var(--surface-2); }
.nav-jatuh a.aktif { background: var(--surface-2); font-weight: 700; }
/* Penanda kiri supaya halaman semasa dikenali tanpa bergantung pada warna */
.nav-jatuh a.aktif::before {
  content: '';
  width: 3px; height: 17px;
  background: var(--emas);
  border-radius: 2px;
  margin-right: -5px;
}

/* ⚠ PERATURAN INI DIBATALKAN (6 Ogos 2026)
   Dahulunya: .jadual thead th { top: var(--tinggi-nav) !important; }

   Ia MEMECAHKAN setiap jadual. Sebabnya halus:

   `.jadual-bekas` mempunyai `overflow-x: auto`. Mengikut spesifikasi
   CSS, apabila satu paksi bukan `visible`, paksi satu lagi dikira
   sebagai `auto` — jadi bekas itu menjadi bekas TATAL bagi kedua-dua
   paksi.

   `position: sticky` merujuk bekas tatal terdekat, bukan tetingkap.
   Jadi `top: 56px` menolak baris kepala 56px KE BAWAH dari atas bekas
   — masuk ke kawasan baris data. Itulah sebab tajuk "Tindakan"
   kelihatan berada dalam baris pertama, bukan di kepala jadual.

   Kepala jadual melekat pada bekasnya sendiri dan bukan pada
   tetingkap, jadi ia tidak pernah bertembung dengan bar atas.
   `top: 0` yang sedia ada pada setiap halaman memang sudah betul. */
.jadual thead th { top: 0; }

/* Skrin sempit: kumpulan menjadi penuh lebar dan menu jatuh mengalir
   ke bawah, bukan terapung — mengelak ia terpotong di tepi skrin. */
@media (max-width: 860px) {
  .topbar-dalam { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav { order: 3; width: 100%; }
  .nav-jatuh {
    position: static;
    box-shadow: none;
    min-width: 0;
    margin: 4px 0 8px;
  }
  .topbar { position: static; }
}
.lencana-nav {
  display: inline-block;
  background: var(--emas);
  color: #14342B;
  font-size: 11px;
  font-weight: 700;
  min-width: 17px;
  text-align: center;
  padding: 0 5px;
  border-radius: 999px;
  margin-left: 2px;
}
.pengguna {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #D7E0DB;
  flex-shrink: 0;       /* jangan picit kawalan; menu yang mengecil dahulu */
  white-space: nowrap;
  margin-left: auto;    /* tolak ke kanan; ruang kosong jatuh di sini */
}
/* Nama pengguna disembunyikan dahulu apabila ruang sempit — ia maklumat
   paling kurang penting dalam bar. Log keluar dan kawalan saiz kekal. */
@media (max-width: 1180px) {
  .pengguna > span { display: none; }
}
.pengguna a { color: var(--emas); text-decoration: none; font-weight: 600; }
.pengguna a:hover { text-decoration: underline; }
.tema-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
}
.tema-btn:hover { background: rgba(255,255,255,.20); }

/* Kawalan saiz tulisan */
.skala-grup { display: flex; align-items: center; gap: 3px; }
.skala-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  font-family: inherit;
}
.skala-btn:hover { background: rgba(255,255,255,.20); }
.skala-btn.kecil { font-size: 11px; }
.skala-btn.besar { font-size: 16px; }
.fs-kawalan { display: inline-flex; gap: 3px; }
.fs-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 7px;
  font-weight: 700;
}
.fs-btn:hover { background: rgba(255,255,255,.20); }

/* ---------- Kandungan ---------- */
.bekas { max-width: 1100px; margin: 0 auto; padding: 26px 20px 60px; zoom: var(--zum, 1); }
.tajuk-halaman { margin: 0 0 4px; font-size: 22px; }
.subtajuk { margin: 0 0 22px; color: var(--teks-lembut); font-size: 13.5px; }
h3 { font-size: 15.5px; }

/* ---------- Kad ---------- */
.kad {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 18px 20px;
}
.grid-kad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kad-stat .label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--teks-lembut);
  margin-bottom: 6px;
}
.kad-stat .nilai { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kad-stat .nota { font-size: 12px; color: var(--teks-lembut); margin-top: 4px; }

/* ---------- Butang ---------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 7px;
  text-decoration: none;
  font-family: inherit;
}
.btn-utama { background: var(--brand); color: #fff; }
.btn-utama:hover { background: var(--brand-2); }
.btn-pinggir { background: var(--surface); color: var(--teks); border: 1px solid var(--garis); }
.btn-pinggir:hover { border-color: var(--teks-lembut); }
.btn-bahaya { background: var(--merah-bg); color: var(--merah); }
.btn-bahaya:hover { filter: brightness(.96); }
.btn-kecil { padding: 5px 11px; font-size: 12.5px; }

/* ---------- Jadual ---------- */
.jadual-bekas { overflow-x: auto; }
table.jadual {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
}
.jadual th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--teks-lembut);
  background: var(--surface-2);
  padding: 10px 13px;
  border-bottom: 1px solid var(--garis);
}
.jadual td { padding: 10px 13px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.jadual tr:last-child td { border-bottom: none; }
.jadual tbody tr:hover td { background: var(--surface-2); }
.jadual td.angka { text-align: right; font-variant-numeric: tabular-nums; }
.jadual th.angka { text-align: right; }

/* Kolum tindakan melekat di kanan supaya butang Padam sentiasa kelihatan */
.jadual th.tindakan, .jadual td.tindakan {
  position: sticky;
  right: 0;
  white-space: nowrap;
  background: var(--surface);
  box-shadow: -7px 0 9px -7px rgba(0,0,0,.22);
  z-index: 2;
}
.jadual th.tindakan { background: var(--surface-2); z-index: 3; }
.jadual td.lajur-jawatan, .jadual th.lajur-jawatan { min-width: 160px; max-width: 240px; }
.jadual tbody tr:hover td.tindakan { background: var(--surface-2); }

/* ---------- Lencana ---------- */
.lencana { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.lencana-aktif { background: var(--hijau-bg); color: var(--hijau); }
.lencana-pindah { background: var(--kuning-bg); color: var(--kuning-teks); }
.lencana-bersara { background: var(--surface-2); color: var(--teks-lembut); }
.teks-merah { color: var(--merah); font-weight: 600; }
.teks-hijau { color: var(--hijau); font-weight: 600; }

/* ---------- Borang ---------- */
.borang-baris { margin-bottom: 14px; }
.borang-baris label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.borang-baris input[type=text],
.borang-baris input[type=password],
.borang-baris input[type=date],
.borang-baris select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--garis);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--teks);
}
.borang-baris input:focus, .borang-baris select:focus {
  outline: 2px solid var(--emas);
  outline-offset: 1px;
  border-color: var(--emas);
}
.borang-sempit { max-width: 560px; }

/* ---------- Bar carian ---------- */
.bar-carian { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.bar-carian input[type=text] {
  flex: 1; min-width: 200px; padding: 8px 11px;
  border: 1px solid var(--garis); border-radius: 7px;
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--teks);
}
.bar-carian select {
  padding: 8px 11px; border: 1px solid var(--garis); border-radius: 7px;
  font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--teks);
}

/* ---------- Mesej ---------- */
.mesej { padding: 11px 15px; border-radius: 8px; margin-bottom: 18px; font-size: 13.5px; }
.mesej-ok { background: var(--hijau-bg); color: var(--hijau); }
.mesej-ralat { background: var(--merah-bg); color: var(--merah); }

/* ---------- Log masuk ---------- */
.login-badan {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--brand);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201,162,39,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.05), transparent 45%);
  padding: 20px;
}
.login-kad {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 12px; padding: 32px 30px 28px; border-top: 4px solid var(--emas);
}
.login-kad h1 { margin: 0 0 4px; font-size: 20px; }
.login-kad .subtajuk { margin-bottom: 20px; }

/* ---------- Bar statistik ---------- */
.bar-stat { margin-bottom: 12px; }
.bar-stat .nama { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.bar-stat .nama b { font-variant-numeric: tabular-nums; }
.bar-stat .trek { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-stat .isi { height: 100%; background: var(--brand-2); border-radius: 999px; }
[data-tema="gelap"] .bar-stat .isi { background: var(--paut); }

.footer {
  text-align: center; color: var(--teks-lembut); font-size: 12px;
  padding: 18px; border-top: 1px solid var(--garis); margin-top: 40px;
}

@media (max-width: 720px) {
  .topbar-dalam { flex-wrap: wrap; padding: 10px 14px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
}