/* dark-theme.css — hitam + putih sahaja, universal anchor.
   Dimuat oleh theme-toggle.js pada 24 halaman (pematuhan.html dikecualikan).

   Kenapa universal selector, bukan senarai kelas:
   Percubaan berasaskan nama kelas gagal — halaman berbeza guna nama berbeza
   (.container/.kat-label vs .card/.modal-content), jadi teks jadi putih
   sementara latar kekal putih (kontras 1.00). '*' memaksa latar telus DAN
   teks putih serentak, jadi putih-atas-putih mustahil.

   Kenapa background-image:none:
   'background-color' TIDAK menimpa 'background: linear-gradient(...)' kerana
   gradient ialah background-IMAGE. 24 rule gradient merentas 10 fail.

   JANGAN guna [class*="btn"] untuk permukaan butang:
   ia turut memadan .btn-icon/.btn-label/.btn-sub — div DALAM setiap tile
   (menu.html:164) — jadi setiap satu dapat latar + sempadan sendiri dan
   tile penuh dengan kotak bersarang. Guna .grid-btn/.kat-btn/[onclick]
   yang menyasarkan elemen boleh-klik sebenar sahaja.

   JANGAN garis-bawah semua <a>: tile ialah <a class="grid-btn">, jadi
   label di dalamnya turut bergaris. Kecualikan anchor yang jadi butang.

   Elemen sticky/fixed WAJIB legap: '*' membuang latarnya, jadi kandungan
   halaman menembusi dari belakang (.header, .page-title, .tab-bar, #overlay). */

/* Palet kotak cadangan/dropdown tersuai — versi GELAP bagi pemboleh ubah
   yang sama dalam navy-theme.css. Fail ini dimuat SELEPAS navy, jadi bila
   mod gelap dihidupkan (media=all) nilai di sini menang dan setiap dropdown
   dalam app bertukar hitam serentak. */
:root {
  --dd-bg: #000000;
  --dd-teks: #ffffff;
  --dd-sub: #c7c7c7;
  --dd-garis: rgba(255,255,255,0.26);
  --dd-pilih: rgba(255,255,255,0.16);
}

/* Latar diberi kepada <html> SAHAJA — lihat nota sama dalam navy-theme.css.
   Kalau body ada latar sendiri ia menutupi watermark body::before. */
html {
  background-color: #000000 !important;
  background-image: none !important;
}

html, body {
  color: #ffffff !important;
}

/* Anchor universal — latar telus, tiada imej/gradient, teks putih */
* {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Dropdown native tidak boleh telus */
select option,
select optgroup {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Medan input */
input, select, textarea {
  background-color: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

/* Butang — HANYA elemen boleh-klik sebenar.
   .grid-btn meliputi .btn-monitor/.btn-spanco dsb (semuanya <a class="grid-btn ...">).
   [onclick]:not(button) meliputi .filter-btn/.kat-filter-btn/.btn-laporan-hub/
   .f-tersedia/.f-panel/.f-assign/.autocomplete-item. */
button,
.btn,
.grid-btn,
a.grid-btn,
.kat-btn,
[onclick]:not(button),
input[type="submit"],
input[type="button"] {
  background-color: rgba(255,255,255,0.10) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

button:hover,
.btn:hover,
.grid-btn:hover,
a.grid-btn:hover,
.kat-btn:hover,
[onclick]:not(button):hover {
  background-color: rgba(255,255,255,0.16) !important;
}

/* Elemen DALAM tile — mesti kekal telus & tiada sempadan, jika tidak
   setiap tile penuh kotak bersarang. */
.btn-icon,
.btn-label,
.btn-sub,
.tab-icon {
  background-color: transparent !important;
  border: none !important;
}

/* Kad bergradient (.anggota-card menu.html) */
.anggota-card,
.card,
.modal-content,
.user-info {
  background-color: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Sticky/fixed + panel bertindan — WAJIB legap, kerana '*' membuang latarnya.
   '.dd-cari' ialah dropdown carian anggota/senjata (pematuhan.html,
   pengurusan.html): ia terapung di atas medan lain, jadi tanpa latar legap
   teks di belakang menembusi dan senarai jadi tidak terbaca. */
/* 'body > .header' — lihat nota dalam navy-theme.css. Pada halaman log
   masuk, .header ialah blok tajuk dalam kad, bukan bar atas melekat. */
body > .header,
header,
.navbar,
.page-title,
.user-bar,
#filterSection,
.filter-grid,
.tab-bar,
.autocomplete-list,
.modal-box,
.dropdown-menu,
.dd-cari,
.ac-list,
.sheet,
.sheet-bar {
  background-color: #000000 !important;
  background-image: none !important;
}

.tab-bar,
.autocomplete-list,
.modal-box,
.dropdown-menu,
.dd-cari,
.ac-list {
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Tindanan penuh skrin — .modal-bg = latar gelap di belakang modal
   (pematuhan.html, pengurusan.html). */
.modal-overlay,
.modal-bg,
#overlay {
  background-color: rgba(0,0,0,0.85) !important;
  background-image: none !important;
}

.badge-amaran,
.reset-banner-close {
  background-color: #000000 !important;
  background-image: none !important;
  border: 1px solid #ffffff !important;
}

/* Jadual */
table, th, td {
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

th {
  background-color: rgba(255,255,255,0.08) !important;
}

/* PENGECUALIAN 1 — anak panah dropdown .sd-suffix-select (bertugas24.html).
   appearance:none, jadi background-image ini SATU-SATUNYA penunjuk. */
.sd-suffix-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-color: rgba(255,255,255,0.06) !important;
}

/* PENGECUALIAN 3 — bulatan PIN (.pin-dot) pada 7 halaman log masuk/tukar PIN.
   Satu-satunya beza antara kosong dan terisi ialah WARNA latar dan sempadan;
   rule '*' memadamkan kedua-duanya, jadi pengguna tidak dapat tahu sama ada
   digit yang ditekan sudah masuk. Nama kelas terisi berbeza antara halaman. */
.pin-dot {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.pin-dot.filled,
.pin-dot.filled-personal,
.pin-dot.filled-balai,
.pin-dot.filled-cawangan,
.pin-dot.confirm {
  /* Bukan putih: arahan pemilik "xde satu pun background putih".
     Kelabu-biru #AEBCD0 kekal jelas di atas navy dan mod gelap. */
  background-color: #AEBCD0 !important;
  border-color: #AEBCD0 !important;
}

/* PENGECUALIAN 2 — .divider ialah garis gradient tanpa ketinggian kandungan */
.divider {
  /* Kelabu-biru, bukan putih — arahan pemilik "xde satu pun background putih".
     Ia garis pemisah 1px, tetapi tetap ditukar supaya jawapannya bersih. */
  background-color: rgba(174,188,208,0.45) !important;
  background-image: none !important;
}

/* PENGECUALIAN 4 — cip kuasa (.rk-chip.on) pada panel Pengangkutan
   (pengurusan.html). Satu-satunya beza antara kuasa aktif dan tiada ialah
   WARNA latar; rule '*' memadamkannya, dan opacity sahaja terlalu senyap
   untuk sekali imbas merentas senarai besar. Sama #AEBCD0 seperti
   PENGECUALIAN 3 — satu warna "aktif" yang konsisten merentas app. */
.rk-chip.on {
  background-color: #AEBCD0 !important;
  border-color: #AEBCD0 !important;
}

/* PENGECUALIAN 5 — tab shif (.shift-tab.active) dalam pematuhan.html.
   Shif yang dipilih dikenali HANYA melalui latar biru + teks gelap + cincin
   putih; rule '*' memadam ketiga-tiganya (background-color, color, dan
   box-shadow), jadi tab dipilih dan tidak dipilih kelihatan serupa dan
   pengguna tidak tahu shif mana yang sedang dibuka.
   Ia juga tidak tertangkap oleh senarai butang di atas: klik dipasang
   melalui JS, jadi tiada atribut [onclick] dalam HTML untuk dipadan.
   Sama #AEBCD0 seperti PENGECUALIAN 3 & 4 — satu warna "aktif" yang
   konsisten merentas app. Teks mesti GELAP: putih di atas #AEBCD0 hanya
   memberi nisbah kontras 1.95. */
.shift-tab.active {
  background-color: #AEBCD0 !important;
  border: 1px solid #AEBCD0 !important;
  color: #06213F !important;
}

/* Logo PDRM di bahagian atas — SEMBUNYIKAN dalam mod gelap.
   Sama seperti pematuhan.html: tiada logo di header, sebaliknya watermark
   besar di tengah skrin. (Mod terang tidak terjejas — fail ini hanya aktif
   dalam mod gelap, jadi logo header kekal seperti asal.) */
img[src*="logo-pdrm"],
img[src*="Royal_Malaysia"],
img[src*="Police"],
img[src*="police"] {
  display: none !important;
}

/* Watermark logo di tengah — padan #logoWatermark dalam pematuhan.html
   (opacity .16 + brightness 1.8 ialah nilai mod gelap di sana).
   Guna ::before supaya tiada suntingan HTML pada 24 fail.
   '*' tidak memadan pseudo-element, jadi background-image di sini selamat.
   z-index:-1 meletakkannya di BELAKANG kandungan — pada 0 ia akan menutupi. */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(72vw, 380px);
  height: min(72vw, 380px);
  background-image: url("/logo-pdrm.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.16;
  filter: brightness(1.8);
  z-index: -1;
  pointer-events: none;
}

/* Garis-bawah HANYA untuk pautan teks biasa, bukan tile/butang */
a:not(.grid-btn):not(.btn):not([class*="btn"]):not(.kat-btn) {
  text-decoration: underline !important;
}

/* ═══════════ SEMUA TEKS PUTIH DALAM MOD GELAP ═══════════
   Arahan pemilik: dalam tema gelap, semua teks mesti PUTIH.

   navy-theme.css memberi label & tajuk warna aksen biru muda (#9DC0F5) pada
   kekhususan (0,1,0). Peraturan bintang '*{color:#fff}' dalam fail ini hanya
   (0,0,0), jadi ia KALAH — !important tidak mengubah perbandingan kekhususan
   antara dua peraturan !important. Pemilih di bawah disalin sebijik daripada
   navy-theme.css supaya kekhususannya sama; kerana fail ini dimuat SELEPAS,
   yang sama kekhususan tetapi kemudian akan menang — dan hanya dalam mod
   gelap, kerana fail ini dimatikan (media: not all) dalam mod terang. */
.menu-label,
.section-label,
.card-title,
.kat-label {
  color: #ffffff !important;
}