/* ALLSOFT Lite — Ultra-minimal CSS framework.
   Zero animations, zero shadows, zero gradients, zero web-fonts.
   Designed for Pentium-4-era hardware (1GB RAM, integrated GPU).
   Total: ~6KB unminified. */

/* ====== RESET ====== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Kill ALL GPU-compositing & paint-heavy properties globally.
   This is the heart of "ultra-lite" — even if a page-specific stylesheet declares
   shadow/transition/animation/filter, this universal !important rule nullifies it.
   Safe because lite design doesn't rely on any of these for layout. */
*, *::before, *::after {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

html { font-size: 14px; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  color: #111;
  background: #f4f4f4;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

/* BUG-FIX HUNT-V22 #9: define CSS custom properties yang dipakai luas di templates
   tapi belum pernah didefinisi → fallback ke initial (transparent/black) → tema rusak. */
:root {
  --text:    #111;
  --text2:   #555;   /* secondary text (labels, helper) */
  --muted:   #777;   /* muted text (empty state) */
  --border:  #c8c8c8;
  --primary: #0050a0;
  --primary-dark: #003070;
  --success: #117a17;
  --danger:  #b22020;
  --warning: #a06000;
  --warn:    #a06000;
  --info:    #0050a0;
  --bg:      #f4f4f4;
  --bg-card: #ffffff;
  --bg-hover: #f0f0f0;
  --z-modal: 1000;
  --z-toast: 9999;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}

/* No fancy scrollbars (saves GPU). Default OS scroll. */

a { color: #0050a0; text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; display: block; }

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 6px; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
small, .small { font-size: 11px; }

.muted { color: #777; }
.ok    { color: #117a17; }
.warn  { color: #a06000; }
.bad   { color: #b22020; }

.center  { text-align: center; }
.right   { text-align: right; }
.num     { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap  { white-space: nowrap; }
.ellips  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ====== FORM CONTROLS ====== */
input, button, select, textarea, .btn {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #888;
  padding: 3px 6px;
  outline: none;
  border-radius: 2px;
}
input:focus, select:focus, textarea:focus {
  border-color: #0050a0;
  background: #fff;
}
/* v194 FIX [transparent button]: do NOT force a white background on focused buttons. `.btn:focus`
   (class + pseudo = specificity 0,0,2,0) outranks single-class color helpers like `.btn-primary` /
   `.btn-success` / `.btn-danger` (0,0,1,0), so forcing `background:#fff` turned a *clicked* colored
   button white while its own `color:#fff` survived → white-on-white "transparent" button (most visible
   on the Cetak button, which keeps focus through the window.open print round-trip). Keep only the focus
   border as the accessibility cue and let each button retain its own background/color. */
button:focus, .btn:focus { border-color: #0050a0; }
input[disabled], select[disabled], textarea[disabled], button[disabled] {
  background: #eee; color: #888; cursor: not-allowed;
}
input[readonly] { background: #f8f8f8; }

textarea { resize: vertical; min-height: 50px; }
select { padding: 2px 4px; }

button, .btn {
  background: #e8e8e8;
  border: 1px solid #888;
  cursor: pointer;
  padding: 3px 12px;
  display: inline-block;
  user-select: none;
}
button:hover, .btn:hover { background: #d8d8d8; }
button:active, .btn:active { background: #c8c8c8; border-color: #555; }

button.primary, .btn.primary {
  background: #0050a0; color: #fff; border-color: #003070;
}
button.primary:hover, .btn.primary:hover { background: #003070; }

button.danger, .btn.danger {
  background: #b22020; color: #fff; border-color: #801010;
}
button.danger:hover, .btn.danger:hover { background: #801010; }

button.ok, .btn.ok {
  background: #117a17; color: #fff; border-color: #0a4a0e;
}
button.ok:hover, .btn.ok:hover { background: #0a4a0e; }

button.small, .btn.small { padding: 1px 8px; font-size: 12px; }
button.big,   .btn.big   { padding: 6px 18px; font-size: 15px; }

label { display: block; font-size: 12px; color: #555; margin-bottom: 1px; }
.field { margin-bottom: 5px; }
.field > input, .field > select, .field > textarea { width: 100%; }
.field-row { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}

/* ====== TABLES ====== */
table { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fff; }
th, td { border: 1px solid #d0d0d0; padding: 3px 6px; text-align: left; vertical-align: top; }
thead th { background: #e8e8e8; font-weight: 600; position: sticky; top: 0; z-index: 1; }
tr:hover td { background: #fff8d0; }
tfoot td { background: #f0f0f0; font-weight: 600; }
table.compact th, table.compact td { padding: 1px 4px; font-size: 12px; }
table.lined { border: 1px solid #888; }

/* Virtualized table scroll viewport */
.vtable-scroll { overflow-y: auto; border: 1px solid #888; background: #fff; }
.vtable-spacer { width: 1px; }

/* ====== LAYOUT ====== */
.app { padding: 6px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.col { flex: 1; min-width: 120px; }
.spacer { flex: 1; }

.topbar {
  background: #003070;
  color: #fff;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.topbar a { color: #fff; padding: 3px 8px; display: inline-block; }
.topbar a:hover { background: #002050; text-decoration: none; }
.topbar a.active { background: #0050a0; }
.topbar .brand { font-weight: 600; margin-right: 8px; }
.topbar .user-info { margin-left: auto; font-size: 12px; }

.card {
  background: #fff;
  border: 1px solid #c0c0c0;
  padding: 6px 8px;
  margin-bottom: 6px;
}
.card-title {
  font-weight: 600;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

/* KPI tile */
.tile {
  background: #fff;
  border: 1px solid #c0c0c0;
  padding: 6px 8px;
  flex: 1; min-width: 140px;
}
.tile-label { font-size: 11px; color: #777; }
.tile-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-delta { font-size: 11px; }

/* ====== MODAL ====== */
.lite-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 6px;
  overflow-y: auto;
}
.lite-modal {
  background: #fff;
  border: 1px solid #333;
  width: 100%;
  max-width: 720px;
  padding: 10px 12px 12px;
}
.lite-modal.wide { max-width: 1200px; }
.lite-modal.narrow { max-width: 420px; }
.lite-modal-title {
  font-weight: 600; font-size: 15px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.lite-modal-close {
  margin-left: auto; cursor: pointer; padding: 0 6px;
  border: 1px solid #888; background: #eee;
}
.lite-modal-actions {
  border-top: 1px solid #ccc;
  padding-top: 6px;
  margin-top: 8px;
  display: flex; gap: 6px; justify-content: flex-end;
}

/* ====== STATUS PILLS ====== */
.pill {
  display: inline-block;
  padding: 0 6px;
  font-size: 11px;
  border: 1px solid #999;
  background: #f0f0f0;
  border-radius: 2px;
  line-height: 1.6;
}
.pill.ok    { background: #ddf0d8; border-color: #6c6; color: #117a17; }
.pill.bad   { background: #f8d8d8; border-color: #c66; color: #b22020; }
.pill.warn  { background: #fce6c0; border-color: #c80; color: #a06000; }
.pill.info  { background: #d8e8f8; border-color: #68a; color: #0050a0; }

/* ====== TOAST (v249 #9: pindah ke ATAS-TENGAH + perbesar; error menonjol) ====== */
/* Sebelumnya: pojok kanan-bawah, font 13px — kekecilan & gampang terlewat.
   Sekarang: tengah-atas layar, lebih besar, error = merah tebal & lebih besar lagi.
   Catatan: lite.js mengirim kind 'error'/'success' (bukan 'bad'/'ok') saat
   meng-override alert() — dulu TAK ada CSS-nya → error tampil abu-abu. Diperbaiki. */
.lite-toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; max-width: 92vw;
}
.lite-toast {
  background: #333; color: #fff;
  padding: 12px 22px;
  border: 1px solid #000; border-radius: 7px;
  min-width: 260px; max-width: 560px;
  font-size: 15px; line-height: 1.4; text-align: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.32);
  pointer-events: auto;
}
.lite-toast.ok,  .lite-toast.success { background: #117a17; }
.lite-toast.warn { background: #a06000; }
.lite-toast.bad, .lite-toast.error {
  background: #c11717; border-color: #7d0d0d;
  font-size: 17px; font-weight: 600;
  padding: 16px 28px; min-width: 320px;
}

/* ====== TABS ====== */
.tabs {
  display: flex; border-bottom: 1px solid #888;
  margin-bottom: 6px;
  /* v262-fix: overflow-x:auto MEMOTONG menu dropdown ".tab-dd-menu" (position:absolute di bawah baris tab)
     karena overflow-x non-visible memaksa overflow-y ikut meng-clip. Pakai overflow:visible + flex-wrap
     supaya tab MELIPAT di layar sempit (bukan scroll) DAN dropdown Laporan bisa tampil. */
  overflow: visible;
  flex-wrap: wrap;
}
.tab {
  padding: 4px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  white-space: nowrap;
}
.tab:hover { background: #e8e8e8; }
.tab.active {
  background: #fff;
  border-color: #888;
  border-bottom-color: #fff;
  margin-bottom: -1px;
  font-weight: 600;
}

/* v255 #12: tab dropdown — kelompokkan tab jenis-laporan jadi 1 menu "Laporan ▾"
   (bukan spawn sampai mentok kanan). Reusable lintas modul: bungkus tab laporan
   dalam .tab-dd, trigger .tab, menu .tab-dd-menu. JS: toggleTabDd()/ddSwitch(). */
.tab-dd { position: relative; display: inline-block; }
.tab-dd-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  background: #fff; border: 1px solid #888; min-width: 210px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.tab-dd.open .tab-dd-menu { display: block; }
.tab-dd-menu > div {
  padding: 8px 14px; cursor: pointer; font-size: 13px; white-space: nowrap;
  border-bottom: 1px solid #f0f0f0;
}
.tab-dd-menu > div:last-child { border-bottom: none; }
.tab-dd-menu > div:hover { background: #f0f6ff; }
.tab-dd-menu > div.active { background: #d8e8f8; font-weight: 600; }

/* ====== UTILITIES ====== */
.hide { display: none !important; }
.flex { display: flex; }
.inline { display: inline-block; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.m-0 { margin: 0; } .mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; }
.mb-2 { margin-bottom: 2px; } .mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; }
.p-2 { padding: 2px; } .p-4 { padding: 4px; } .p-6 { padding: 6px; } .p-8 { padding: 8px; }
.w-full { width: 100%; }
.f-100 { width: 100px; } .f-150 { width: 150px; } .f-200 { width: 200px; }
.bold { font-weight: 600; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }
/* vNOW: pengaman kelas .scroll — tanpa ini, elemen ber-max-height + class="scroll" (yg tak terdefinisi)
   me-luber terlihat menimpa kartu di bawahnya (bug layout dashboard RFID). */
.scroll { overflow: auto; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-500 { max-height: 500px; }

/* ====== a11y + responsive (v22) ======
   Bigger touch targets on mobile, focus visible, screen-reader skip-link.
*/
@media (max-width: 768px) {
  .btn { min-height: 36px; padding: 6px 12px; }
  .btn-sm { min-height: 32px; padding: 4px 10px; }
  .modal { width: 95vw !important; }
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ====== CONVENTION ENFORCEMENT ======
   Satuan / UOM HARUS uppercase di seluruh aplikasi (smt-pos convention).
   Class .uom (atau atribut data-uom) di-uppercase secara visual sehingga
   data lama "pcs"/"box" otomatis ditampilkan "PCS"/"BOX" tanpa migrasi DB. */
.uom, [data-uom], .unit-cell, td.unit, .unit-label, .unit-text {
  text-transform: uppercase !important;
}

/* Field angka dengan thousand separator — visual hint */
input.num-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* PRINT */
@media print {
  .topbar, .no-print, button, .btn { display: none !important; }
  body { background: #fff; }
  .card, table, th, td { border-color: #000 !important; }
}

/* ============================================================================
   MODE GELAP (NIGHT MODE) — aktif saat <html data-theme="dark">.
   Diterapkan lebih dulu (FOUC-free) oleh script kecil di <head> + theme.js.
   Preferensi tersimpan PER USER di server (tabel user_prefs) + localStorage.

   Strategi: satu blok override untuk SEMUA komponen bersama yang warnanya
   di-hardcode di atas. Warna spesifik-halaman (blok <style> di tiap template)
   ditambah override sendiri lewat `html[data-theme="dark"] .kelas {…}`.
   ============================================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;                /* checkbox/scrollbar/date-picker native ikut gelap */
  --text:    #e6edf6;
  --text2:   #b3c0d1;
  --muted:   #93a4bc;
  --border:  #2b3647;
  --primary: #6ea8ff;
  --primary-dark: #4c8dff;
  --success: #4ade80;
  --danger:  #f87171;
  --warning: #fbbf24;
  --warn:    #fbbf24;
  --info:    #6ea8ff;
  --bg:      #0f1620;
  --bg-card: #1a2331;
  --bg-hover: #222d3d;
}

html[data-theme="dark"] body { color: var(--text); background: var(--bg); }
html[data-theme="dark"] a { color: var(--primary); }

/* teks helper hardcoded */
html[data-theme="dark"] .muted { color: var(--muted); }
html[data-theme="dark"] .ok    { color: var(--success); }
html[data-theme="dark"] .warn  { color: var(--warning); }
html[data-theme="dark"] .bad   { color: var(--danger); }
html[data-theme="dark"] label  { color: var(--text2); }

/* form controls */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #131c28; color: var(--text); border-color: #3a4658;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6b7a90; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { background: #131c28; border-color: var(--primary); }
html[data-theme="dark"] button,
html[data-theme="dark"] .btn {
  background: #273246; color: var(--text); border-color: #3a4658;
}
html[data-theme="dark"] button:hover, html[data-theme="dark"] .btn:hover { background: #313e54; }
html[data-theme="dark"] button:active, html[data-theme="dark"] .btn:active { background: #3a4a63; border-color: #55647a; }
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] textarea[disabled],
html[data-theme="dark"] button[disabled] { background: #1c2530; color: #5f6d80; }
html[data-theme="dark"] input[readonly] { background: #171f2b; }
/* tombol berwarna kuat tetap dipakai (kontras cukup), sedikit dicerahkan */
html[data-theme="dark"] button.primary, html[data-theme="dark"] .btn.primary { background: #2563c9; border-color: #1b4fa5; color: #fff; }
html[data-theme="dark"] button.primary:hover, html[data-theme="dark"] .btn.primary:hover { background: #1b4fa5; }
html[data-theme="dark"] button.danger, html[data-theme="dark"] .btn.danger { background: #c33636; border-color: #932020; }
html[data-theme="dark"] button.ok, html[data-theme="dark"] .btn.ok { background: #1f8a2b; border-color: #146420; }

/* tables */
html[data-theme="dark"] table { background: var(--bg-card); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: #2b3647; }
html[data-theme="dark"] thead th { background: #222d3d; color: var(--text); }
html[data-theme="dark"] tr:hover td { background: #26324a; }
html[data-theme="dark"] tfoot td { background: #1e2836; }
html[data-theme="dark"] .vtable-scroll { background: var(--bg-card); border-color: #3a4658; }

/* layout & surfaces */
html[data-theme="dark"] .topbar { background: #0c1a2e; }
html[data-theme="dark"] .topbar a:hover { background: #163156; }
html[data-theme="dark"] .topbar a.active { background: #1e57a0; }
html[data-theme="dark"] .card { background: var(--bg-card); border-color: #2b3647; }
html[data-theme="dark"] .card-title { border-bottom-color: #2b3647; }
html[data-theme="dark"] .tile { background: var(--bg-card); border-color: #2b3647; }
html[data-theme="dark"] .tile-label { color: var(--muted); }

/* module cards (home) */
html[data-theme="dark"] .module-card { background: var(--bg-card); border-color: #2b3647; color: var(--text); }
html[data-theme="dark"] .module-card:hover { background: #1c2c44; border-color: var(--primary); }
html[data-theme="dark"] .module-card .d { color: var(--muted); }
html[data-theme="dark"] .module-card .f { color: #7b8aa0; }

/* modal */
html[data-theme="dark"] .lite-modal-bg { background: rgba(0,0,0,0.62); }
html[data-theme="dark"] .lite-modal { background: var(--bg-card); border-color: #3a4658; color: var(--text); }
html[data-theme="dark"] .lite-modal-title { border-bottom-color: #2b3647; }
html[data-theme="dark"] .lite-modal-close { background: #273246; border-color: #3a4658; color: var(--text); }
html[data-theme="dark"] .lite-modal-actions { border-top-color: #2b3647; }

/* pills */
html[data-theme="dark"] .pill { background: #222d3d; border-color: #3a4658; color: var(--text); }
html[data-theme="dark"] .pill.ok   { background: #13321f; border-color: #2f7d4a; color: #4ade80; }
html[data-theme="dark"] .pill.bad  { background: #3a1c1c; border-color: #a04a4a; color: #f87171; }
html[data-theme="dark"] .pill.warn { background: #33280f; border-color: #a07a2a; color: #fbbf24; }
html[data-theme="dark"] .pill.info { background: #16273e; border-color: #3a5a8a; color: #6ea8ff; }

/* tabs */
html[data-theme="dark"] .tabs { border-bottom-color: #2b3647; }
html[data-theme="dark"] .tab:hover { background: #222d3d; }
html[data-theme="dark"] .tab.active { background: var(--bg-card); border-color: #3a4658; border-bottom-color: var(--bg-card); }
html[data-theme="dark"] .tab-dd-menu { background: var(--bg-card); border-color: #3a4658; }
html[data-theme="dark"] .tab-dd-menu > div { border-bottom-color: #222d3d; }
html[data-theme="dark"] .tab-dd-menu > div:hover { background: #1c2838; }
html[data-theme="dark"] .tab-dd-menu > div.active { background: #16273e; }

/* Catch-all INLINE-STYLE (style="background:#fff") — hanya CSS attribute-selector + !important
   yang bisa mengalahkan inline style. Menyapu latar PUTIH/terang & teks HITAM yang di-hardcode
   inline di HTML/JS (mis. <th style="background:white">, tabel yang dirender JS) di SELURUH
   halaman sekaligus. Warna inline BERWARNA (biru/hijau/merah badge) TIDAK cocok pola ini → aman. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#FFF"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"] { background-color: var(--bg-card) !important; }
html[data-theme="dark"] [style*="background:#f8f8f8"],
html[data-theme="dark"] [style*="background:#f4f4f4"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background:#eee"],
html[data-theme="dark"] [style*="background: #f8f8f8"],
html[data-theme="dark"] [style*="background: #f4f4f4"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background-color:#f8f8f8"],
html[data-theme="dark"] [style*="background-color:#f4f4f4"] { background-color: var(--bg-hover) !important; }
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"] { color: var(--text) !important; }

/* Peringatan/badge KUNING (latar kuning-muda inline: banner "stok menipis", chip "menunggu barang",
   dll). Di mode gelap teks-nya jadi tak terbaca (teks warisan terang di atas kuning muda, ATAU teks
   gelap di atas latar yg keburu di-flip catch-all). Paksa amber-gelap + teks amber terang → JELAS.
   Ditaruh SETELAH catch-all putih supaya menang utk nilai #fffXcd. */
/* Bentuk HEX (inline statis) + RGB (bila JS pernah menyentuh element.style → hex dinormalkan ke rgb). */
html[data-theme="dark"] [style*="#fef3c7"],
html[data-theme="dark"] [style*="#fef3cd"],
html[data-theme="dark"] [style*="#fff3c7"],
html[data-theme="dark"] [style*="#fff3cd"],
html[data-theme="dark"] [style*="#fff8e0"],
html[data-theme="dark"] [style*="#fff8db"],
html[data-theme="dark"] [style*="#fff8d0"],
html[data-theme="dark"] [style*="#fffbeb"],
html[data-theme="dark"] [style*="#fffbe6"],
html[data-theme="dark"] [style*="#fef9e7"],
html[data-theme="dark"] [style*="#fff9e0"],
html[data-theme="dark"] [style*="rgb(254, 243, 199)"],
html[data-theme="dark"] [style*="rgb(254, 243, 205)"],
html[data-theme="dark"] [style*="rgb(255, 243, 199)"],
html[data-theme="dark"] [style*="rgb(255, 243, 205)"],
html[data-theme="dark"] [style*="rgb(255, 248, 224)"],
html[data-theme="dark"] [style*="rgb(255, 248, 219)"],
html[data-theme="dark"] [style*="rgb(255, 248, 208)"],
html[data-theme="dark"] [style*="rgb(255, 251, 235)"],
html[data-theme="dark"] [style*="rgb(255, 251, 230)"] {
  background-color: #33280f !important;
  color: #fbbf24 !important;
  border-color: #7a5f2a !important;
}
html[data-theme="dark"] [style*="#fef3c7"] *,
html[data-theme="dark"] [style*="#fef3cd"] *,
html[data-theme="dark"] [style*="#fff3cd"] *,
html[data-theme="dark"] [style*="#fff8e0"] *,
html[data-theme="dark"] [style*="#fffbeb"] *,
html[data-theme="dark"] [style*="#fffbe6"] *,
html[data-theme="dark"] [style*="rgb(254, 243, 205)"] *,
html[data-theme="dark"] [style*="rgb(254, 243, 199)"] *,
html[data-theme="dark"] [style*="rgb(255, 243, 205)"] *,
html[data-theme="dark"] [style*="rgb(255, 248, 224)"] *,
html[data-theme="dark"] [style*="rgb(255, 251, 235)"] * { color: #fbbf24 !important; }

/* tombol toggle tema yang disuntik theme.js ke topbar */
.theme-toggle-btn {
  margin-left: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: #fff; border-radius: 4px;
  padding: 2px 8px; font-size: 13px; line-height: 1.4;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * HURUF BESAR SEMUA (permintaan owner) — sisi TAMPILAN & CETAKAN.
 *
 * Pasangannya `static/huruf-besar.js` mengurus sisi ISIAN (yang diketik → tersimpan
 * kapital). Aturan CSS di sini mengurus yang sudah TERLANJUR tersimpan huruf kecil:
 * ia tampil kapital tanpa satu baris data pun diubah. Memaksa mengubah seluruh data
 * lama di database berisiko dan tak bisa dibatalkan; tampilan selalu bisa.
 *
 * PENGECUALIAN dipasang tegas, bukan "kira-kira":
 *   · sandi          — bulatan penyamar tak terpengaruh, tapi petunjuk di sebelahnya
 *                      sering memuat contoh yang peka huruf besar/kecil
 *   · email & tautan — bagian sesudah nama situs peka huruf besar/kecil
 *   · kode/monospace — kunci, hash, dan potongan perintah rusak bila dikapitalkan
 *   · .no-kapital    — jalan keluar manual untuk kasus yang tak terduga
 * ══════════════════════════════════════════════════════════════════════════════════════ */
body.huruf-besar,
body.huruf-besar input,
body.huruf-besar textarea,
body.huruf-besar select,
body.huruf-besar button,
body.huruf-besar table,
body.huruf-besar .card,
body.huruf-besar .badge { text-transform: uppercase; }

/* KOLOM SANDI TIDAK BOLEH IKUT DIKAPITALKAN — bukan soal rapi, tapi soal orang terkunci.
   Aturan di atas mengenai SEMUA `input`, termasuk `type=password`. Nilainya memang tidak
   ikut berubah (yang terkirim tetap apa adanya), TETAPI yang TERLIHAT berubah — dan sejak
   ada tombol 👁 lihat-sandi, orang MEMBACA sandinya dari layar. Ia mengetik "man1122",
   layar memperlihatkan "MAN1122", lalu ia yakin sandinya berhuruf besar. Lain kali ia
   mengetik yang ia BACA, dan ditolak — persis kejadian 10 Agu 2026 (OMANSMA, tercatat
   `bad_password_master` tiga kali berturut-turut).
   Berlaku juga untuk isian yang ditandai `data-huruf-asli`. */
body.huruf-besar input[type="password"],
body.huruf-besar input[data-huruf-asli],
body.huruf-besar input[type="email"],
body.huruf-besar input[type="url"] { text-transform: none; }

body.huruf-besar code, body.huruf-besar pre, body.huruf-besar kbd, body.huruf-besar samp,
body.huruf-besar a[href^="http"], body.huruf-besar a[href^="mailto:"],
body.huruf-besar input[type="password"], body.huruf-besar input[type="email"],
body.huruf-besar input[type="url"],
body.huruf-besar .login-box,
/* Kotak isian DI DALAM login harus disebut TERPISAH. Baris `.login-box` di atas hanya
   mengatur kotaknya sendiri; `input` di dalamnya tetap kena `body.huruf-besar input`
   di blok atas, karena aturan milik elemen SENDIRI selalu mengalahkan warisan dari
   induknya — berapa pun specificity induk itu.
   Akibatnya nyata & menyesatkan: login MEMBEDAKAN huruf besar/kecil (`WHERE username=?`
   di PostgreSQL), tetapi layar menampilkan huruf besar apa pun yang diketik. Mengetik
   `owner` dan `OWNER` terlihat SAMA PERSIS di layar, padahal hanya yang pertama bisa
   masuk — dan pesan galatnya berbunyi "Username atau password salah", yang menuntun
   orang memeriksa SANDI-nya. Dilaporkan owner 3 Agu 2026 dari layar login produksi.
   `huruf-besar.js` sudah lama TIDAK mengubah nilai di sini (penjaga `.login-box`);
   yang tertinggal cuma tampilannya, dan tampilan yang berbohong lebih buruk daripada
   tampilan yang tidak rapi. */
body.huruf-besar .login-box input,
body.huruf-besar .login-box textarea,
body.huruf-besar [data-huruf-asli],
body.huruf-besar .no-kapital,
body.huruf-besar .mono { text-transform: none; }

@media print {
  body.huruf-besar, body.huruf-besar table, body.huruf-besar td, body.huruf-besar th,
  body.huruf-besar div, body.huruf-besar span, body.huruf-besar p { text-transform: uppercase; }
  body.huruf-besar code, body.huruf-besar pre, body.huruf-besar .mono,
  body.huruf-besar .no-kapital, body.huruf-besar [data-huruf-asli] { text-transform: none; }
}