/* ============================================================
   SPD APP — Lapisan kompatibilitas tema iOS
   Memetakan kelas Bootstrap 5 dan kelas lama aplikasi
   (.form-section, .navbar-custom, .minimalist-table, .neon-input, dll)
   ke palet gelap di theme-ios.css.

   WAJIB dimuat PALING AKHIR di <head>, sesudah Bootstrap
   dan sesudah blok <style> bawaan halaman — kalau tidak,
   gaya lama yang menang.
   ============================================================ */

/* ---------------- DASAR ---------------- */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
a { color: var(--emerald-ink); }
a:hover { color: var(--emerald-ink); filter:brightness(1.15); }
hr { border-color: var(--border-color); opacity: 1; }

/* ---------------- NAVBAR LAMA ---------------- */
.navbar-custom {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: none !important;
}
.navbar-custom, .navbar-custom a, .navbar-custom span { color: var(--text-primary); }

/* ---------------- KARTU / SEKSI ---------------- */
.form-section, .card {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary);
}
.section-title {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.card-header, .card-footer {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary);
}

/* ---------------- FORM ---------------- */
.form-label, .form-minimal label, label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.form-control, .form-select,
.form-minimal .form-control, .form-minimal .form-select,
.neon-input {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background-color .2s !important;
}
.form-control:focus, .form-select:focus,
.form-minimal .form-control:focus, .form-minimal .form-select:focus,
.neon-input:focus {
  background-color: var(--bg-hover) !important;
  border-color: var(--emerald) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
  color: var(--text-primary) !important;
}
.form-control::placeholder, .neon-input::placeholder { color: var(--text-muted) !important; }
.form-select option { background-color: var(--bg-secondary); color: var(--text-primary); }
.form-text { color: var(--text-muted) !important; font-size: 11px !important; }

/* Penanda wajib-isi / terisi / hanya-baca (versi gelap dari gaya lama) */
input[required]:not(:focus):not(.filled),
.form-minimal input[required]:not(:focus):not(.filled) {
  background-color: var(--bg-primary) !important;
  border-color: rgba(245,158,11,.32) !important;
}
input[required].filled,
.form-minimal input[required].filled {
  background-color: rgba(16,185,129,.10) !important;
  border-color: rgba(16,185,129,.45) !important;
}
input[readonly], select[readonly],
.form-minimal input[readonly], .form-minimal select[readonly] {
  background-color: rgba(148,163,184,.06) !important;
  color: var(--text-secondary) !important;
}
input[readonly].filled {
  background-color: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: var(--text-primary) !important;
}
input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }

/* ---------------- TOMBOL ---------------- */
.btn {
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all .2s !important;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--emerald), #059669) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary, .btn-light, .btn-outline-light, .btn-outline-secondary {
  background-color: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover, .btn-light:hover,
.btn-outline-light:hover, .btn-outline-secondary:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.btn-success { background: linear-gradient(180deg, var(--emerald), #059669) !important; border: none !important; color: #fff !important; }
.btn-danger  { background: linear-gradient(180deg, var(--rose), #e11d48) !important;   border: none !important; color: #fff !important; }
.btn-warning { background: linear-gradient(180deg, var(--amber), #d97706) !important;  border: none !important; color: #111 !important; }
.btn-info    { background: linear-gradient(180deg, var(--cyan), #0891b2) !important;   border: none !important; color: #fff !important; }
.btn-outline-primary { background-color: transparent !important; border: 1px solid rgba(16,185,129,.45) !important; color: var(--emerald-ink) !important; }
.btn-outline-primary:hover { background-color: rgba(16,185,129,.12) !important; }
.btn-outline-danger  { background-color: transparent !important; border: 1px solid rgba(244,63,94,.45) !important; color: var(--rose-ink) !important; }
.btn-outline-danger:hover { background-color: rgba(244,63,94,.12) !important; }

/* ---------------- TABEL ---------------- */
.table, table, .minimalist-table {
  color: var(--text-primary) !important;
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-striped-bg: rgba(148,163,184,.04);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
}
/* .tbl-spd (tabel surat SPD) DIKECUALIKAN dari aturan umum ini.
   Aturan di bawah memakai --border-color yang sangat tipis (alpha .12)
   dan ber-!important, sehingga menimpa garis bawah tabel surat —
   garis kanan tetap terlihat, garis bawah hilang, hasilnya "ompong"
   saat dicetak. Tabel surat punya aturan bordernya sendiri. */
.table > :not(caption) > * > *,
table:not(.tbl-spd) td, table:not(.tbl-spd) th,
.minimalist-table th, .minimalist-table td {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: inherit;
}
.table thead th, table thead th, .minimalist-table th,
.table-light, .table-light th {
  background-color: transparent !important;
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border-color) !important;
}
.table tbody tr:hover, .minimalist-table tr:hover {
  background-color: var(--bg-hover) !important;
}
.amount-cell {
  font-variant-numeric: tabular-nums;
  font-family: inherit !important;
  color: var(--text-primary) !important;
}
/* Wadah tabel lebar: geser mendatar, dan sudut membulat TIDAK boleh
   memotong kolom yang menempel (sticky) di kanan. */
.table-responsive {
  overflow-x: auto !important;
  border-radius: 12px;
}
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb {
  background-color: var(--bg-tertiary);
  border-radius: 4px;
}

/* Tombol aksi kecil di tabel lama */
.minimalist-btn { border-radius: 8px !important; font-weight: 600 !important; }
.minimalist-btn-warning {
  background-color: rgba(245,158,11,.14) !important;
  color: var(--amber-ink) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}
.minimalist-btn-warning:hover { background-color: rgba(245,158,11,.24) !important; }
.minimalist-btn-danger {
  background-color: rgba(244,63,94,.14) !important;
  color: var(--rose-ink) !important;
  border: 1px solid rgba(244,63,94,.35) !important;
}
.minimalist-btn-danger:hover { background-color: rgba(244,63,94,.24) !important; }

/* ---------------- ALERT & BADGE ---------------- */
.alert { border-radius: 12px !important; border: 1px solid !important; font-size: 13px; }
.alert-success { background-color: rgba(16,185,129,.10) !important; border-color: rgba(16,185,129,.3) !important; color: var(--emerald-ink) !important; }
.alert-info    { background-color: rgba(6,182,212,.10)  !important; border-color: rgba(6,182,212,.3)  !important; color: var(--cyan-ink) !important; }
.alert-warning { background-color: rgba(245,158,11,.10) !important; border-color: rgba(245,158,11,.3) !important; color: var(--amber-ink) !important; }
.alert-danger  { background-color: rgba(244,63,94,.10)  !important; border-color: rgba(244,63,94,.3)  !important; color: var(--rose-ink) !important; }
.badge { border-radius: 999px !important; font-weight: 600 !important; }
.bg-secondary-subtle { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; }

/* ---------------- NAV TABS ---------------- */
.nav-tabs { border-bottom: 1px solid var(--border-color) !important; }
.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: 9px 9px 0 0 !important;
  font-size: 13px !important;
}
.nav-tabs .nav-link:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
.nav-tabs .nav-link.active {
  background-color: var(--bg-secondary) !important;
  color: var(--emerald-ink) !important;
  border-bottom: 2px solid var(--emerald) !important;
}

/* ---------------- FOOTER ---------------- */
footer, .ios-footer {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-color);
  padding: 10px 20px !important;
  font-size: 11.5px;
}

/* Footer mengambang — selalu tampil di bawah layar.
   Latar dibuat semi-transparan + blur supaya konten yang lewat di
   belakangnya terasa "menyatu", khas iOS. */
.ios-footer {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  /* Dulu rgba(...,.82) dipatok langsung di sini dan diulang lagi untuk tema
     terang. Sekarang memakai --glass-panel dari theme-ios.css — nilai yang
     sama persis dipakai .ios-header, jadi header dan footer tidak bisa
     berbeda tingkat keburamannya. Tema terang ikut otomatis lewat variabel,
     tidak perlu aturan [data-theme="light"] terpisah lagi. */
  background-color: var(--glass-panel) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 -1px 0 var(--border-color);
}
/* Ruang di bawah konten supaya baris terakhir tabel tidak tertutup footer */
body:has(.ios-footer) { padding-bottom: 58px; }
.ios-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ios-footer-meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.ios-footer-sep { opacity: .45; }

/* Titik status "online" di header */
.ios-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  display: inline-block; flex-shrink: 0;
}

/* ---------------- SENTUHAN iOS ---------------- */
/* Kartu lebih lapang, sudut lebih bulat, judul dengan aksen */
.form-section {
  padding: 20px 22px !important;
  margin-bottom: 18px !important;
  border-radius: 16px !important;
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
.section-title i, .section-title .bi { color: var(--emerald-ink); font-size: 15px; }

/* Jarak antar-kolom form sedikit dilonggarkan */
.form-minimal .row > [class^="col-"], .form-minimal .row > [class*=" col-"] { margin-bottom: 4px; }
.form-minimal label { margin-bottom: 6px !important; }

/* Input: gaya "inset" ala iOS — lembut, tanpa garis keras */
.form-control, .form-select, .neon-input,
.form-minimal .form-control, .form-minimal .form-select {
  border-color: transparent !important;
  background-color: rgba(148,163,184,.09) !important;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] .neon-input,
[data-theme="light"] .form-minimal .form-control,
[data-theme="light"] .form-minimal .form-select {
  background-color: rgba(15,23,42,.045) !important;
}
.form-control:focus, .form-select:focus, .neon-input:focus,
.form-minimal .form-control:focus, .form-minimal .form-select:focus {
  border-color: var(--emerald) !important;
  background-color: var(--bg-primary) !important;
}
/* Penanda wajib-isi cukup lewat garis tipis kiri, bukan latar mencolok */
input[required]:not(:focus):not(.filled),
.form-minimal input[required]:not(:focus):not(.filled) {
  background-color: rgba(148,163,184,.09) !important;
  border-color: transparent !important;
  box-shadow: inset 2px 0 0 rgba(245,158,11,.55) !important;
}
input[required].filled,
.form-minimal input[required].filled {
  border-color: transparent !important;
  box-shadow: inset 2px 0 0 var(--emerald) !important;
}

/* Tombol: bentuk pil, khas iOS */
.btn, .ios-btn { border-radius: 10px !important; padding: 8px 14px !important; }
.btn-sm { padding: 5px 11px !important; }

/* Tombol ikon HARUS mengecualikan padding di atas — kalau tidak, ikon
   32px terdesak jadi ~2px dan tombol tampak kosong. */
.ios-btn-icon, .btn.ios-btn-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.ios-btn-icon svg { width: 16px !important; height: 16px !important; }

/* ---------------- MODAL DETAIL ---------------- */
body.modal-terbuka { overflow: hidden; }

.ios-modal { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.ios-modal[hidden] { display: none; }
.ios-modal-latar {
  position: absolute; inset: 0;
  background-color: rgba(2, 6, 23, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ios-modal-kotak {
  position: relative;
  width: min(1100px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  overflow: hidden;
  animation: iosModalMasuk .26s var(--ios-spring);
}
@keyframes iosModalMasuk {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.ios-modal-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.ios-modal-kepala h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ios-modal-kepala p  { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
.ios-modal-isi { padding: 18px 20px 22px; overflow-y: auto; }

/* Rincian satu SPD */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-baris {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0; border-bottom: 1px solid var(--border-color);
  font-size: 12.5px;
}
.detail-baris:last-child { border-bottom: none; }
.detail-label { color: var(--text-muted); flex-shrink: 0; }
.detail-nilai { color: var(--text-primary); text-align: right; word-break: break-word; }
.detail-nilai a { color: var(--emerald-ink); text-decoration: none; border-bottom: 1px dashed currentColor; }

/* ---------------- BLOK UMD + SAKELAR ALA iOS ---------------- */
.umd-blok {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background-color: rgba(148,163,184,.07);
  border: 1px solid var(--border-color);
  transition: background-color .25s, border-color .25s;
}
.umd-blok.aktif {
  background-color: rgba(16,185,129,.07);
  border-color: rgba(16,185,129,.30);
}
.umd-sakelar {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; margin: 0; user-select: none;
}
.umd-sakelar input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Track + thumb — meluncur dengan easing pegas, khas iOS */
.umd-track {
  position: relative; flex-shrink: 0;
  width: 46px; height: 27px; border-radius: 999px;
  background-color: rgba(120,120,128,.32);
  transition: background-color .28s ease;
}
.umd-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .32s var(--ios-spring);
}
.umd-sakelar input:checked + .umd-track {
  background: linear-gradient(180deg, var(--emerald), #059669);
}
.umd-sakelar input:checked + .umd-track .umd-thumb { transform: translateX(19px); }
.umd-sakelar input:focus-visible + .umd-track {
  box-shadow: 0 0 0 3px rgba(16,185,129,.28);
}
.umd-teks { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.umd-teks b {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary); text-transform: none; letter-spacing: 0;
}
.umd-teks small { font-size: 11px; color: var(--text-muted); }

.umd-isi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  animation: iosFade .28s ease;
}
@media (max-width: 900px) { .umd-isi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .umd-isi { grid-template-columns: 1fr; } }

#grand_total_tampil, #umd_tarif_tampil {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#grand_total_tampil { color: var(--emerald-ink) !important; }

/* ---------------- WARNA TENANG UNTUK TOMBOL NAVBAR ---------------- */
.ios-btn-tenang-cyan {
  background-color: rgba(6,182,212,.12) !important;
  border: 1px solid rgba(6,182,212,.28) !important;
  color: var(--cyan-ink) !important;
}
.ios-btn-tenang-cyan:hover {
  background-color: rgba(6,182,212,.2) !important;
  border-color: rgba(6,182,212,.42) !important;
  color: var(--cyan-ink) !important;
}
.ios-btn-tenang-rose {
  background-color: rgba(244,63,94,.10) !important;
  border: 1px solid rgba(244,63,94,.26) !important;
  color: var(--rose-ink) !important;
}
.ios-btn-tenang-rose:hover {
  background-color: rgba(244,63,94,.18) !important;
  border-color: rgba(244,63,94,.4) !important;
  color: var(--rose-ink) !important;
}
.ios-btn-tenang-netral {
  background-color: rgba(148,163,184,.12) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.ios-btn-tenang-netral:hover {
  background-color: rgba(148,163,184,.2) !important;
  color: var(--text-primary) !important;
}

/* ---------------- TOMBOL AKSI DI TABEL ----------------
   Sebelumnya kotak pekat kuning/merah — terlalu ramai untuk
   elemen yang berulang di tiap baris. */
.minimalist-btn {
  width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  margin-right: 5px !important;
  vertical-align: middle;
  transition: background-color .18s, border-color .18s, transform .12s !important;
}
.minimalist-btn:active { transform: scale(.92); }
.minimalist-btn-warning {
  background: rgba(245,158,11,.12) !important;
  background-color: rgba(245,158,11,.12) !important;
  color: var(--amber-ink) !important;
  border: 1px solid rgba(245,158,11,.28) !important;
}
.minimalist-btn-warning:hover {
  background-color: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.45) !important;
}
.minimalist-btn-danger {
  background: rgba(244,63,94,.10) !important;
  background-color: rgba(244,63,94,.10) !important;
  color: var(--rose-ink) !important;
  border: 1px solid rgba(244,63,94,.26) !important;
}
.minimalist-btn-danger:hover {
  background-color: rgba(244,63,94,.2) !important;
  border-color: rgba(244,63,94,.42) !important;
}

/* ---------------- AUTOCOMPLETE (jQuery UI) ---------------- */
.ui-autocomplete, .cyber-autocomplete {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  padding: 4px !important;
  z-index: 9999 !important;
}
.ui-autocomplete .ui-menu-item, .cyber-autocomplete .ui-menu-item {
  color: var(--text-primary) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  border-left: none !important;
}
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-focus,
.cyber-autocomplete .ui-menu-item:hover,
.cyber-autocomplete .ui-menu-item.ui-state-focus {
  background-color: rgba(16,185,129,.14) !important;
  color: var(--emerald) !important;
  text-shadow: none !important;
  border-left: none !important;
}
.ui-menu .ui-menu-item-wrapper.ui-state-active {
  background-color: rgba(16,185,129,.14) !important;
  border: none !important;
  color: var(--emerald) !important;
}

/* ---------------- SWEETALERT2 ---------------- */
.swal2-popup {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.swal2-title { color: var(--text-primary) !important; font-size: 18px !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-styled.swal2-confirm { border-radius: 9px !important; font-weight: 600 !important; }
.swal2-styled.swal2-cancel  { border-radius: 9px !important; font-weight: 600 !important; background-color: var(--bg-tertiary) !important; }
.swal2-toast { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }

/* ---------------- AREA SURAT (print_spd.php) ----------------
   Surat tampil sebagai "lembar kertas" putih di atas latar gelap.
   Tanpa blok ini teks surat ikut jadi terang -> putih di atas putih. */
#printArea {
  background: #fff !important;
  color: #1d2636 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.45) !important;
}
/* Sengaja TIDAK memaksa border-color di sini.
   Sebelumnya blok ini memaksa #c9d2e0 ke seluruh isi #printArea, termasuk
   tabel surat — warnanya terlalu muda sehingga garis hairline hilang timbul
   ("ompong") saat dicetak. Tabel surat mengatur bordernya sendiri di
   print_spd.php; elemen lain di dalam surat memang tidak berborder. */
#printArea *,
#printArea table, #printArea td, #printArea th,
#printArea thead th, #printArea .table > :not(caption) > * > * {
  color: #1d2636 !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

/* Tautan gaya "link" perlu warna aksen, bukan biru bawaan Bootstrap */
.btn-link, a.btn-link {
  color: var(--emerald-ink) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
.btn-link:hover, a.btn-link:hover { color: var(--emerald-ink) !important; text-decoration: underline !important; }

/* ---------------- CETAK ----------------
   Surat SPD harus tetap hitam-di-atas-putih. Tanpa blok ini,
   print_spd.php akan tercetak gelap dan boros tinta. */
@media print {
  /* #printArea WAJIB ikut di sini. Bayangan tebalnya (untuk tampilan layar)
     memaksa browser merasterisasi satu lapisan sebesar halaman penuh saat
     cetak — berkas membengkak dan bisa muncul halo abu-abu di tepi kertas. */
  html, body, #printArea, .form-section, .card, table, .table, th, td {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
  }
  th, td, .table > :not(caption) > * > * {
    border-color: #999 !important;
    color: #000 !important;
  }
  /* #themeBtnFloat & #btnExport disebut eksplisit — keduanya elemen yang
     disisipkan/di-styling lewat id, jadi tidak tertangkap selektor class. */
  .ios-header, .ios-header-accent, .navbar, .navbar-custom,
  .btn, .ios-btn, footer, .no-print,
  #themeBtnFloat, #btnExport, .ios-modal { display: none !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* Kode inline — warna bawaan Bootstrap (pink) terlalu redup di latar gelap */
code, kbd, samp {
  color: var(--cyan-ink) !important;
  background-color: rgba(6,182,212,.10) !important;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
}
pre code { background-color: transparent !important; padding: 0; }

/* ---------------- TEKS BANTU ---------------- */
.text-muted { color: var(--text-muted) !important; }
.text-dark  { color: var(--text-primary) !important; }
.bg-light   { background-color: var(--bg-primary) !important; }
.bg-white   { background-color: var(--bg-secondary) !important; }

/* Dekorasi "hujan biner" hanya cocok di latar gelap — sembunyikan di tema terang */
[data-theme="light"] .binary-rain, [data-theme="light"] .binary-digit { display:none !important; }
