/* =================================================================
   FILE: ASSETS/CSS/theme.css
   FUNGSI: SATU-SATUNYA tempat warna X-DOC-LOCK didefinisikan.

   Diambil dari acuan tema https://x-doc-site.vercel.app (keputusan
   pemilik 9 Okt 2026): hitam pekat, panel abu gelap, aksen merah-bata
   & crimson.

   Format nilainya adalah KANAL RGB "R G B", bukan hex. Itu disengaja:
   Tailwind menyusun warnanya sebagai rgb(var(--c-x) / <alpha-value>),
   sehingga pengubah kepekatan tetap hidup (bg-accent/10, border-glow/50).
   Kalau token diisi hex, setiap kelas berkepekatan diam-diam tidak
   berlaku - tidak ada galat, hanya warna yang salah.

   BERKAS INI DIMUAT SESUDAH tailwind.css di setiap halaman (lihat
   ENGINE/INUX-HEAD.asp) supaya nilainya menang.

   Berbeda dari acuan, di sini TIDAK ada saklar tema APi/CUBEX. Acuan
   memakainya untuk membandingkan dua merek; X-DOC-LOCK punya satu
   merek, dan saklar yang tidak dipakai hanya menambah keadaan yang
   harus diuji. Menambahkannya kembali kelak cukup menyalin blok
   html[data-tema="..."] dari acuan.
   ================================================================= */
:root {
  --c-page:          0   0   0;  /* latar halaman (hitam)              */
  --c-surface:      32  35  37;  /* panel / kartu  (#202325)           */
  --c-surface-2:    22  24  26;  /* panel sekunder                     */
  --c-field:        42  45  48;  /* latar input                        */
  --c-nav:          31  34  36;  /* bilah navigasi (#1F2224)           */
  --c-ink:         240 240 241;  /* teks utama                         */
  --c-muted:       178 180 184;  /* teks sekunder                      */
  --c-subtle:      122 125 130;  /* teks tersier                       */
  --c-ph:          100 105 112;  /* teks contoh di isian kosong        */
  --c-line:         52  55  58;  /* garis tepi                         */
  --c-line-strong:  84  88  92;  /* garis input                        */

  --c-accent:      160  74  60;  /* tombol utama, merah-bata (#A04A3C) */
  --c-accent-hover:184  88  70;
  --c-accent-text: 232 131 107;  /* tautan aktif / ikon, salem         */
  --c-accent-ink:  255 255 255;
  --c-glow:        184  40  74;  /* crimson, untuk dekorasi            */

  --c-foot:         74  74  77;  /* bilah hak cipta (#4A4A4D)          */

  --c-success:      74 196 128;
  --c-warning:     232 168  76;
  --c-danger:      240 100 100;

  --radius-card: 0.875rem;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; color-scheme: dark; }
body { background: rgb(var(--c-page)); color: rgb(var(--c-ink)); }

/* Kartu bergaya acuan: gradasi merah gelap + bingkai crimson tipis. */
.kartu-merah {
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--c-glow) / .10), transparent 60%),
              linear-gradient(180deg, rgb(28 18 19), rgb(12 10 11));
  border: 1px solid rgb(var(--c-glow) / .22);
}

/* Ikon "kaca" merah seperti ikon produk di acuan. */
.ikon-merah {
  background: radial-gradient(circle at 35% 30%, rgb(230 90 110), rgb(140 20 45) 55%, rgb(60 10 20));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 18px -4px rgb(var(--c-glow) / .55);
  color: #fff;
}

/* ---------------------------------------------------------------
   Isian formulir. Dikumpulkan di sini, bukan ditempel sebagai deretan
   kelas Tailwind di setiap <input>: formulir pendaftaran punya belasan
   isian, dan satu saja yang kelasnya tertinggal akan tampak berbeda
   warna di tengah formulir yang sama.
   --------------------------------------------------------------- */
.isian {
  width: 100%;
  border-radius: .5rem;
  border: 1px solid rgb(var(--c-line-strong));
  background: rgb(var(--c-field));
  padding: .625rem .875rem;
  font-size: .875rem;
  color: rgb(var(--c-ink));
}
.isian::placeholder { color: rgb(var(--c-ph)); opacity: 1; }
.isian:focus {
  outline: none;
  border-color: rgb(var(--c-accent-text));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / .25);
}
.isian:disabled { opacity: .55; }
.label-isian {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgb(var(--c-muted));
}
.bantuan-isian { margin-top: .375rem; font-size: .6875rem; color: rgb(var(--c-subtle)); }

/* ---------------------------------------------------------------
   PLACEHOLDER SELALU ABU-ABU BUREM (keputusan pemilik 10 Nov 2026)
   ---------------------------------------------------------------
   Contoh isian harus kelihatan sebagai CONTOH, bukan sebagai isi
   yang sudah diketik: sekali lihat orang harus tahu ruas mana yang
   sudah diisi dan mana yang belum. Yang diketik memakai --c-ink
   (hampir putih); contohnya memakai --c-ph, abu-abu redup.

   --c-ph PUNYA TOKEN SENDIRI, dan itu bukan kelebihan. Dulu aturan
   ini memakai --c-subtle, dan warnanya tidak pernah jadi seredup yang
   disetel di sini: "subtle" termasuk 22 token yang DITIMPA TEMA AKTIF
   (lihat XD_TEMA_TOKEN di ENGINE/XDOC-TEMA.asp). Tema MERAHBATA
   menjadikannya rgb(128,131,137) - terang, dan di layar terbaca
   seperti teks sungguhan. "ph" sengaja TIDAK ada di daftar token itu,
   jadi tema tidak bisa menerangkannya lagi. Jangan menambahkannya ke
   XD_TEMA_TOKEN. Pasangannya di layar konsol lama adalah --cx-ph di
   theme-dark.css, yang ada karena alasan yang sama persis.

   Pemilihnya SELURUH input dan textarea, bukan hanya .isian: layar
   lama memakai kelas sendiri-sendiri (.cx-inp, .inp, .fxl-inp, .fld)
   yang ditulis di dalam <style> tiap halaman, dan tidak satu pun
   mengatur warna placeholder. Dengan satu aturan global di sini semua
   layar ikut - termasuk layar yang dibuat nanti.

   opacity:1 wajib: Firefox meredupkan placeholder sendiri, sehingga
   abu-abunya jadi jauh lebih pudar daripada yang disetel di sini.
   --------------------------------------------------------------- */
input::placeholder,
textarea::placeholder {
  color: rgb(var(--c-ph));
  opacity: 1;
}

/* Pilihan yang BELUM dipilih ikut aturan yang sama. <select> tidak punya
   placeholder; pilihan pertamanya ("- pilih -") adalah <option> biasa dan
   tampil seterang isi yang sungguh dipilih - persis keadaan yang membuat
   orang mengira ruasnya sudah diisi. :has() membaca pilihan yang sedang
   aktif: selama yang terpilih masih option bernilai kosong, teksnya redup.
   Daftar pilihannya sendiri dikembalikan ke warna teks, supaya yang redup
   hanya tulisan di kotaknya. */
select:has(option[value=""]:checked) { color: rgb(var(--c-ph)); }
select option { color: rgb(var(--c-ink)); }

/* Pita status: satu bentuk, warna mengikuti arti. */
.pita { display: inline-block; border-radius: 999px; padding: .125rem .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .04em; }
.pita-tunggu  { background: rgb(var(--c-warning) / .12); color: rgb(var(--c-warning)); }
.pita-aktif   { background: rgb(var(--c-success) / .12); color: rgb(var(--c-success)); }
.pita-tolak   { background: rgb(var(--c-danger) / .12);  color: rgb(var(--c-danger)); }
.pita-netral  { background: rgb(255 255 255 / .05);      color: rgb(var(--c-muted)); }

/* Inter disajikan server sendiri, bukan Google Fonts, supaya pihak ketiga
   tidak mengetahui siapa yang membuka halaman pelanggan. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../FONTS/inter-latin-wght-normal.woff2) format("woff2"); }

/* ===============================================================
   SWEETALERT2 - DIPINDAHKAN KE SINI DARI admin.css (10 Nov 2026)
   ---------------------------------------------------------------
   admin.css hanya dimuat layar BERLOGIN (lewat XDOC-BINGKAI1).
   Laman publik - DAFTAR, BAYAR, CEK-STATUS - memuat theme.css saja,
   jadi dialognya jatuh ke tema TERANG bawaan SweetAlert sementara
   isinya ditulis dengan kelas untuk latar gelap: teks putih di atas
   putih. Dilaporkan pemilik pada simulasi pembayaran tagihan.

   theme.css dimuat KEDUA keluarga halaman, jadi di sinilah
   tempatnya. Menyalinnya ke dua berkas berarti dua salinan yang
   cepat atau lambat berbeda - dan yang tertinggal akan salah warna
   tanpa ada yang menyadarinya.
   ---------------------------------------------------------------
   DI BARIS INI DULU ADA PENUTUP KOMENTAR - DAN ITULAH BUG-NYA.
   Saat blok ini dipindahkan dari admin.css, komentarnya tertutup di
   sini sedangkan keterangan di bawahnya ikut terbawa sebagai TEKS
   BIASA, lalu ditutup sekali lagi di ujung bawah. Teks di luar
   komentar membuat pengurai CSS membuang satu aturan berikutnya
   untuk memulihkan diri - dan aturan itu kebetulan .swal2-popup,
   yaitu LATAR dialognya. Jadi dialog tetap putih walau berkasnya
   terbaca benar oleh mata manusia, dan aturan di bawahnya (judul,
   teks, tombol) tetap bekerja sehingga gejalanya makin
   membingungkan: tulisan terang di atas putih.
   Dilaporkan pemilik 10 Nov 2026 di layar Aktivasi.
   ---------------------------------------------------------------
   SWEETALERT2 (dialog & konfirmasi)

   Pustakanya ditulis untuk latar TERANG: popupnya putih dengan teks
   abu gelap. Layar berlogin di sini berlatar GELAP, dan isi dialognya
   kita tulis memakai kelas tema sendiri (text-subtle, bg-surface-2,
   text-warning) yang memang dirancang untuk latar gelap. Hasilnya
   teks terang di atas putih - terbaca samar sampai hampir hilang.
   Dilaporkan pemilik 14 Okt 2026 pada dialog "Pelanggan aktif".

   DITARUH DI CSS, BUKAN DI TIAP PEMANGGIL. Ada tiga Swal.fire di
   ASSETS/JS/xdoclock.js dan belasan lagi tersebar di layar; menambal
   satu per satu berarti yang berikutnya lahir salah lagi. Ini memang
   persoalan tema - tempatnya di sini, sebaris dengan komponen lain.

   WARNA TOMBOL SENGAJA TANPA !important. SweetAlert2 memasang
   confirmButtonColor sebagai gaya inline, dan beberapa pemanggil
   memakainya dengan sengaja - merah untuk tindakan merusak. Tanpa
   !important, yang menyebutnya tetap menang dan yang tidak menyebut
   mewarisi aksen kita.
   ----------------------------------------------------------------- */
.swal2-popup {
  background: rgb(var(--c-surface)) !important;
  color: rgb(var(--c-ink)) !important;
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--radius-card);
}
.swal2-title             { color: rgb(var(--c-ink)) !important; }
.swal2-html-container    { color: rgb(var(--c-muted)) !important; }
.swal2-html-container b,
.swal2-html-container strong { color: rgb(var(--c-ink)); }
.swal2-html-container code   { color: rgb(var(--c-accent-text)); }
.swal2-html-container a      { color: rgb(var(--c-accent-text)); }
.swal2-close             { color: rgb(var(--c-subtle)) !important; }
.swal2-close:hover       { color: rgb(var(--c-ink)) !important; }

/* Isian di dalam dialog - dipakai kotak "Alasan penolakan". */
.swal2-input, .swal2-textarea, .swal2-select {
  background: rgb(var(--c-field)) !important;
  border-color: rgb(var(--c-line-strong)) !important;
  color: rgb(var(--c-ink)) !important;
}
.swal2-input::placeholder, .swal2-textarea::placeholder { color: rgb(var(--c-ph)); opacity: 1; }
.swal2-validation-message {
  background: rgb(var(--c-danger) / .12) !important;
  color: rgb(var(--c-danger)) !important;
}

.swal2-styled.swal2-confirm { background: rgb(var(--c-accent)); color: rgb(var(--c-accent-ink)); }
.swal2-styled.swal2-cancel  { background: rgb(var(--c-line-strong)); color: rgb(var(--c-ink)); }
.swal2-timer-progress-bar   { background: rgb(var(--c-accent) / .5) !important; }

/* Lingkaran ikon bawaan swal berwarna pastel untuk latar terang;
   dipekatkan sedikit supaya tidak menyilaukan di atas panel gelap. */
.swal2-icon.swal2-success { border-color: rgb(var(--c-success) / .5); color: rgb(var(--c-success)); }
.swal2-icon.swal2-warning { border-color: rgb(var(--c-warning) / .5); color: rgb(var(--c-warning)); }
.swal2-icon.swal2-error   { border-color: rgb(var(--c-danger) / .5);  color: rgb(var(--c-danger)); }
.swal2-icon.swal2-question{ border-color: rgb(var(--c-accent) / .5);  color: rgb(var(--c-accent-text)); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: rgb(var(--c-success)) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgb(var(--c-success) / .35) !important; }