/* ==========================================================================
   Tema Admin JagoCS

   Seluruh warna di bawah diturunkan dari logo JagoCS (wordmark.png), bukan
   dari palet situs publik. Logonya gradasi biru rona 212 derajat, dari
   #001163 di ujung gelap sampai #e6f6ff di ujung terang, dengan median
   #007dff. Mode terang memakai ujung terangnya sebagai latar, mode gelap
   memakai ujung gelapnya.

   Satu hal yang tidak bisa diambil mentah-mentah: #007dff dengan teks putih
   di atasnya cuma 3,9:1, gagal WCAG AA. Untuk tombol dan tautan, birunya
   digelapkan ke #0d6cd9 (5,0:1) tanpa berpindah rona. Setiap pasangan warna
   di berkas ini sudah dihitung dan angkanya ditulis di komentar.

   Konsekuensi yang perlu disadari: admin sekarang berlatar biru dingin,
   sedangkan jagocs.id berlatar krem hangat (#f2f0ea). Keduanya tidak lagi
   satu latar — ini permintaan yang disengaja, bukan kelalaian.

   Berkas ini sengaja CSS biasa, bukan tema Filament yang dibangun lewat npm.
   Alasannya: seluruh repo ini tanpa langkah build, dan menambah npm hanya
   demi selusin aturan gaya berarti setiap orang yang menyentuh warna harus
   menjalankan Vite dulu. Nama kelas fi-* yang dipakai di bawah adalah
   antarmuka resmi Filament v4+, jadi cukup stabil untuk disandarkan.

   Dimuat lewat renderHook PanelsRenderHook::HEAD_END di AdminPanelProvider,
   sesudah CSS Filament, sehingga tidak perlu !important kecuali disebut.
   ========================================================================== */

:root {
  /* Terang - diturunkan dari ujung terang logo */
  --jc-paper: #f7fafd;   /* latar halaman masuk */
  --jc-tint: #eef4fb;    /* latar area konten */
  --jc-ink: #0a1a33;     /* teks utama, 16,6:1 di atas --jc-tint */
  --jc-ink-2: #16304f;   /* teks menu */
  --jc-muted: #54657d;   /* teks sekunder, 5,7:1 di atas --jc-tint */

  /* Biru logo. --jc-blue-murni hanya untuk garis dan latar tipis; jangan
     dipakai sebagai latar teks putih. */
  --jc-blue-murni: #007dff;
  --jc-blue: #0d6cd9;      /* tombol; putih di atasnya 5,0:1 */
  --jc-blue-deep: #0a4fa8; /* tautan dan menu aktif; 7,3:1 di atas putih */

  --jc-gold: #e0a106;
  --jc-gold-teks: #8a6300;
  --jc-alarm: #c4443c;
  --jc-jade: #0f8f6c;

  --jc-line: rgba(10, 26, 51, 0.14);
  --jc-line-soft: rgba(10, 26, 51, 0.08);

  /* Gelap - diturunkan dari ujung gelap logo #001163, diredam supaya tidak
     menyilaukan. Angka kontras ada di bagian mode gelap di bawah. */
  --jc-gelap-latar: #040f2e;
  --jc-gelap-panel: #0c1b3d;
  --jc-gelap-garis: rgba(140, 188, 255, 0.16);
  --jc-gelap-teks: #e6f0ff;
  --jc-gelap-muted: #9fb3d1;
  --jc-gelap-primer: #6ea8ff;

  --jc-r-sm: 8px;
  --jc-r-md: 14px;

  /* Diisi Filament dari ->serifFont('Archivo') di panel provider. */
  --jc-display: var(--serif-font-family), "Segoe UI", system-ui, sans-serif;
  --jc-mono: var(--mono-font-family), ui-monospace, Consolas, monospace;
}

/* Label kecil bergaya mono huruf besar. Dipakai berulang di sidebar, kepala
   tabel, dan label kartu, jadi ditulis sekali di sini. */
.fi-sidebar-group-label,
.fi-ta-header-cell,
.fi-wi-stats-overview-stat-label {
  font-family: var(--jc-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jc-muted);
}

/* --------------------------------------------------------------- Dasar */

.fi-body {
  background-color: var(--jc-tint);
  color: var(--jc-ink);
}

/* Judul halaman, judul bagian, dan judul modal memakai Archivo. Filament
   menyetelnya lewat kelas Tailwind dengan spesifisitas rendah, jadi cukup
   ditimpa biasa. */
.fi-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
  font-family: var(--jc-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fi-header-heading {
  font-size: 1.375rem;
}

/* Judul tabel duduk di dalam panel, jadi lebih kecil daripada judul halaman
   supaya urutan bacanya jelas: halaman dulu, baru isinya. */
.fi-ta-header-heading {
  font-size: 1.0625rem;
}

/* Semua angka yang dibandingkan antar baris — rupiah, tanggal, sisa hari.
   Kelas ini dipasang dari PHP lewat extraCellAttributes(). Tailwind punya
   utilitas bernama sama, tapi jangan bergantung padanya: kalau suatu saat
   Filament memangkas CSS-nya, definisi di sini yang menjaga. */
.tabular-nums,
.fi-wi-stats-overview-stat-value {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Sidebar */

.fi-sidebar,
.fi-topbar {
  background-color: #fff;
}

.fi-sidebar {
  border-right: 1px solid var(--jc-line);
}

.fi-topbar {
  border-bottom: 1px solid var(--jc-line);
  box-shadow: none;
}

.fi-sidebar-header {
  background-color: #fff;
  border-bottom: 1px solid var(--jc-line);
  box-shadow: none;
}

.fi-sidebar-group-label {
  margin-bottom: 0.25rem;
}

.fi-sidebar-item-btn {
  border-radius: var(--jc-r-sm);
  color: var(--jc-ink-2);
  font-weight: 500;
}

.fi-sidebar-item-btn:hover {
  background-color: var(--jc-tint);
}

.fi-sidebar-item-active .fi-sidebar-item-btn {
  color: var(--jc-blue-deep);
  background-color: rgba(0, 125, 255, 0.10);
  font-weight: 700;
}

/* Lencana "habis dalam 7 hari" di menu Lisensi. Emas mentah di atas putih
   cuma 2,3:1, jadi teksnya digelapkan — lihat tema.md. */
.fi-sidebar-item-badge-ctn .fi-badge {
  font-family: var(--jc-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Kartu ringkas */

.fi-wi-stats-overview-stat {
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-r-md);
  background-color: #fff;
  box-shadow: none;
}

.fi-wi-stats-overview-stat-value {
  font-family: var(--jc-display);
  font-size: 1.6875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--jc-ink);
}

.fi-wi-stats-overview-stat-description {
  color: var(--jc-muted);
  font-size: 0.8125rem;
}

/* Hanya kartu yang menuntut tindakan yang diberi warna. Di panel ini cuma
   "Habis dalam 7 hari" yang memakai color('warning') — lihat tema.md soal
   kenapa "lunas" dan "aktif" sengaja dibiarkan polos. */
.jc-ringkas-tindak {
  border-color: rgba(224, 161, 6, 0.5);
  background-image: linear-gradient(180deg, #fffaef, #fff 52%);
}

.jc-ringkas-tindak .fi-wi-stats-overview-stat-value {
  color: var(--jc-gold-teks);
}

/* ------------------------------------------------------ Panel dan tabel */

.fi-section,
.fi-ta-ctn {
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-r-md);
  background-color: #fff;
  box-shadow: none;
}

.fi-ta-header {
  border-bottom: 1px solid var(--jc-line);
}

.fi-ta-header-cell {
  background-color: #fff;
}

.fi-ta-row:hover .fi-ta-cell {
  background-color: #fbfcfe;
}

.fi-ta-cell {
  font-size: 0.875rem;
}

/* Kode lisensi dan status. Kode dibaca ulang orang saat menyalin ke
   WhatsApp, jadi lebar per hurufnya harus tetap. */
.fi-font-mono {
  font-family: var(--jc-mono);
}

/* Keterangan di bawah nama — nama produk, bukan tautan. Filament mewarnainya
   seperti tautan, dan di tabel ini itu menyesatkan: tidak ada yang bisa
   diklik di situ. */
.fi-ta-text-description {
  color: var(--jc-muted);
}

.dark .fi-ta-text-description {
  color: var(--jc-gelap-muted);
}

/* Keterangan di bawah judul tabel ("8 transaksi terakhir"). Filament
   mewarnainya biru seperti tautan padahal tidak bisa diklik. */
.fi-ta-header-description {
  color: var(--jc-muted);
}

.dark .fi-ta-header-description {
  color: var(--jc-gelap-muted);
}

/* "Lihat semua" memang tautan, jadi biar tegas seperti di jagocs.id. */
.fi-ta-header-ctn .fi-link {
  font-weight: 700;
}

.fi-ta-footer-cell {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Halaman masuk */

.fi-simple-layout {
  background-color: var(--jc-paper);
}

.fi-simple-main {
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-r-md);
  box-shadow: 0 1px 2px rgba(10, 22, 38, 0.05),
    0 12px 28px -14px rgba(10, 22, 38, 0.28);
}

.fi-simple-header-heading {
  font-size: 1.375rem;
}

.fi-simple-header-subheading {
  color: var(--jc-muted);
}

/* Logo di halaman masuk lebih besar daripada di sidebar — di sini dia satu-
   satunya penanda merek, bukan pendamping menu. */
.fi-simple-layout .fi-logo {
  height: 2.5rem;
}

/* Catatan penutup halaman masuk, disisipkan lewat renderHook. Mengulang apa
   yang tertulis di tema.md: panel ini tidak punya pendaftaran. */
.jc-catatan-masuk {
  margin-top: 1rem;
  color: var(--jc-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* ------------------------------------------------------------- Tombol */

/* Filament v5 memberi tombol utama latar pucat (fi-bg-color-400) dengan teks
   gelap. Di jagocs.id, tombol ajakan selalu biru pekat dengan teks putih, dan
   di halaman masuk tombol pucat itu tidak terbaca sebagai tindakan utama.
   Putih di atas #0d6cd9 = 5,0:1, lolos WCAG AA untuk teks normal. */
.fi-btn.fi-color-primary {
  background-color: var(--jc-blue);
  color: #fff;
}

.fi-btn.fi-color-primary:hover {
  background-color: var(--jc-blue-deep);
  color: #fff;
}

.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-primary .fi-icon {
  color: inherit;
}

/* --------------------------------------------------------- Mode gelap */

/* Panel ini terang secara bawaan, tapi pengguna bisa memilih gelap dari menu
   profil. Latarnya #040f2e, diredam dari ujung gelap logo #001163 supaya
   tidak menyilaukan, dengan permukaan panel #0c1b3d.

   Kontras di atas latar: teks #e6f0ff 16,4:1, teks sekunder #9fb3d1 8,8:1,
   primer #6ea8ff 7,8:1. Biru tombol #0d6cd9 cuma 2,3:1 di atas latar itu,
   jadi tidak boleh dipakai sebagai warna teks di mode gelap — hanya sebagai
   latar tombol, yang teksnya putih. */
.fi-body.fi-theme-dark,
.dark .fi-body {
  background-color: var(--jc-gelap-latar);
}

.dark .fi-sidebar,
.dark .fi-topbar,
.dark .fi-sidebar-header,
.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-header-cell {
  background-color: var(--jc-gelap-panel);
  border-color: var(--jc-gelap-garis);
}

.dark .fi-sidebar-group-label,
.dark .fi-ta-header-cell,
.dark .fi-wi-stats-overview-stat-label,
.dark .fi-wi-stats-overview-stat-description {
  color: var(--jc-gelap-muted);
}

.dark .fi-wi-stats-overview-stat-value {
  color: var(--jc-gelap-teks);
}

.dark .fi-sidebar-item-active .fi-sidebar-item-btn {
  color: var(--jc-gelap-primer);
  background-color: rgba(110, 168, 255, 0.14);
}

.dark .fi-sidebar-item-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.dark .jc-ringkas-tindak {
  border-color: rgba(255, 209, 102, 0.4);
  background-image: none;
  background-color: rgba(255, 209, 102, 0.08);
}

.dark .jc-ringkas-tindak .fi-wi-stats-overview-stat-value {
  color: #ffd166;
}

.dark .fi-simple-layout {
  background-color: var(--jc-gelap-latar);
}

.dark .fi-simple-main {
  background-color: var(--jc-gelap-panel);
  border-color: var(--jc-gelap-garis);
}

.dark .fi-ta-row:hover .fi-ta-cell {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Permukaan lain yang bawaannya abu-abu Filament. Tanpa ini, dropdown, modal,
   dan kotak isian tetap abu-abu di tengah panel biru tua, dan mode gelapnya
   terlihat seperti dua tema yang ditempel. */
.dark .fi-dropdown-list,
.dark .fi-dropdown-panel,
.dark .fi-modal-window,
.dark .fi-input-wrp,
.dark .fi-select-input-ctn,
.dark .fi-ta-header,
.dark .fi-pagination {
  background-color: var(--jc-gelap-panel);
  border-color: var(--jc-gelap-garis);
}

.dark .fi-input,
.dark .fi-select-input {
  color: var(--jc-gelap-teks);
}

.dark .fi-body {
  color: var(--jc-gelap-teks);
}

/* Garis pemisah antar baris tabel. Bawaannya putih transparan yang di atas
   biru tua terlihat keabuan. */
.dark .fi-ta-row + .fi-ta-row .fi-ta-cell {
  border-color: var(--jc-gelap-garis);
}