/* navy-theme.css — tema navy PDRM untuk MOD TERANG, padan pematuhan.html.
   Dimuat SENTIASA oleh theme-toggle.js (media=all). dark-theme.css dimuat
   selepas ini dan menimpanya bila mod gelap dihidupkan.

   Token diambil terus daripada :root pematuhan.html supaya rupa sama:
     --bg #13294B  --card-bg rgba(255,255,255,.07)  --accent #9DC0F5
     --glass-bg rgba(31,56,100,.55)  --dropdown-bg #13294B

   Seni bina sama seperti dark-theme.css, dan atas sebab yang sama:
   '*' memaksa latar telus DAN teks putih serentak, jadi mustahil teks putih
   mendarat atas latar putih walaupun nama kelas berbeza antara halaman.

   Pengecualian yang WAJIB kekal legap / dikekalkan:
   - select option        : dropdown native tidak boleh telus.
   - .sd-suffix-select    : background-image ialah anak panah dropdown.
   - .divider             : garis dibuat daripada gradient sahaja.
   - elemen sticky/fixed  : .header/.page-title/.tab-bar/#overlay/.modal-*
   - .btn-icon/.btn-label/.btn-sub : div DALAM tile, mesti telus tanpa
                            sempadan, jika tidak tile penuh kotak bersarang. */

:root {
  --bg: #13294B;
  --card-bg: rgba(255,255,255,0.07);
  --text: #ffffff;
  --text-muted: #cfd8e3;
  --text-faint: #9fb0c3;
  --border: rgba(255,255,255,0.22);
  --input-bg: rgba(255,255,255,0.06);
  --accent: #9DC0F5;
  --glass-bg: rgba(31,56,100,0.55);
  --glass-border: rgba(255,255,255,0.4);
  --dropdown-bg: #13294B;

  /* Palet kotak cadangan/dropdown tersuai. Diletak di SINI (bukan dalam
     halaman) supaya menukar tema turut menukar warna dropdown sendiri —
     dark-theme.css mentakrif semula pemboleh ubah yang sama dengan nilai
     hitam. Halaman cuma rujuk var(--dd-*). */
  --dd-bg: #13294B;
  --dd-teks: #ffffff;
  --dd-sub: #b9c9de;
  --dd-garis: rgba(255,255,255,0.18);
  --dd-pilih: rgba(255,255,255,0.12);
}

/* Latar diberi kepada <html> SAHAJA, bukan body.
   Turutan lukisan CSS: (1) latar elemen root, (2) elemen z-index negatif,
   (3) latar blok dalam aliran seperti body. Kalau body ada latar sendiri,
   ia dilukis pada langkah 3 dan MENUTUPI watermark body::before yang ada
   pada langkah 2 — sebab itu watermark tak nampak sebelum ini.
   body dibiar telus (diwarisi daripada rule '*' di bawah). */
html {
  background-color: #13294B !important;
  background-image: none !important;
}

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

/* Anchor universal */
* {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Dropdown native tidak boleh telus */
select option,
select optgroup {
  background-color: #13294B !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 kaca — HANYA elemen boleh-klik sebenar (bukan [class*="btn"],
   kerana itu turut memadan .btn-icon/.btn-label/.btn-sub di dalam tile) */
button,
.btn,
.grid-btn,
a.grid-btn,
.kat-btn,
[onclick]:not(button),
input[type="submit"],
input[type="button"] {
  background-color: rgba(31,56,100,0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}

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

/* Elemen DALAM tile — telus, tiada sempadan */
.btn-icon,
.btn-label,
.btn-sub,
.tab-icon {
  background-color: transparent !important;
  border: none !important;
}

/* Kad / panel — kaca lutsinar */
.card,
.container,
.anggota-card,
.modal-content,
.user-info,
.balai-box,
.row-header {
  background-color: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

/* Sticky / fixed — WAJIB legap kerana '*' membuang latarnya.
   #filterSection / .filter-grid ialah kad statistik yang dibekukan di bawah
   .page-title (spanco.html & kerajaan.html). Kalau ia telus, senarai
   kenderaan kelihatan menembusinya dan teks bertindih.
   .sort-bar dan .search-bar TIDAK disenaraikan — ia skrol biasa. */
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: #13294B !important;
  background-image: none !important;
}

/* .dd-cari (pematuhan.html, pengurusan.html), .ac-list (kehadiran-scan.html)
   dan .cadangan-kotak (login.html — ditangani dalam halaman itu sendiri)
   ialah senarai cadangan yang TERAPUNG di atas medan lain. Tanpa latar
   legap, teks di belakang menembusi senarai dan kelihatan BERTINDIH.
   dark-theme.css sudah menyenaraikan .dd-cari; ia tertinggal di sini, jadi
   pepijat itu hanya berlaku dalam mod terang.
   .sheet/.sheet-bar (pengurusan.html) ialah lembaran skrin penuh — kalau
   telus, senarai di belakang kelihatan menembusinya. */

/* 'body > .header' bukan '.header' sahaja:
   pada 15 halaman biasa, .header ialah bar atas melekat yang WAJIB legap.
   Tetapi pada 4 halaman log masuk (index, login, login-balai,
   login-cawangan) .header ialah blok tajuk DI DALAM kad kaca — kalau ia
   dijadikan legap, ia muncul sebagai kotak navy pekat di tengah kad yang
   lutsinar. Yang bersarang dibiar telus supaya menyatu dengan kad. */

.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 ialah nama kelas yang digunakan oleh
   pematuhan.html & pengurusan.html untuk latar gelap di belakang modal. */
.modal-overlay,
.modal-bg,
#overlay {
  background-color: rgba(10,22,40,0.85) !important;
  background-image: none !important;
}

.badge-amaran,
.reset-banner-close {
  background-color: #13294B !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.22) !important;
}

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

/* Aksen — label & tajuk guna biru muda supaya ada hierarki */
.menu-label,
.section-label,
.card-title,
.kat-label {
  color: #9DC0F5 !important;
}

/* PENGECUALIAN — 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 — bulatan PIN (.pin-dot) pada 7 halaman log masuk/tukar PIN.
   Satu-satunya beza antara bulatan kosong dan terisi ialah WARNA latar dan
   sempadan; rule '*' di atas memadamkan kedua-duanya, jadi pengguna tidak
   dapat tahu sama ada digit yang ditekan sudah masuk. (transform:scale(1.1)
   pada keadaan terisi cuma 1.8px pada bulatan 18px — tidak cukup.)
   Nama kelas terisi berbeza antara halaman: .filled, .filled-personal,
   .filled-balai, .filled-cawangan, .confirm — semuanya disenaraikan. */
.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 — .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;
}

/* Logo header disembunyikan — sama seperti pematuhan.html, yang guna
   watermark tengah dan bukan logo di bahagian atas */
img[src*="logo-pdrm"],
img[src*="Royal_Malaysia"],
img[src*="Police"],
img[src*="police"] {
  display: none !important;
}

/* Watermark tengah — padan #logoWatermark pematuhan.html mod terang
   (opacity .10, tiada brightness filter). z-index:-1 = di belakang kandungan. */
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.10;
  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;
}