/* ============================================================================
   COMPONENTS — lapisan MIGRASI. Dimuat SESUDAH assets/style.css.
   ----------------------------------------------------------------------------
   Bedanya dengan theme.css:
     theme.css      dimuat SEBELUM style.css -> jadi DASAR, sengaja kalah,
                    tugasnya cuma menyediakan token + komponen bernama baru.
     components.css dimuat SESUDAH style.css -> sengaja MENANG, tugasnya
                    memindahkan komponen LAMA ke sistem token, satu jenis
                    komponen per rilis supaya bisa diuji sepotong-sepotong.

   TAHAP 1 (berkas ini): TOMBOL. Dipilih duluan karena paling sering muncul —
   610 pemakaian .btn di seluruh aplikasi.

   YANG SENGAJA TIDAK DIUBAH: ukuran, padding, radius, dan tebal huruf tombol
   dipertahankan persis seperti sebelumnya. Kalau geometri ikut berubah,
   tata letak 610 titik bisa bergeser sekaligus dan tidak ada yang bisa
   menelusuri penyebabnya. Yang berubah cuma WARNA dan KEADAAN (hover, fokus,
   nonaktif). Perubahan yang bisa dilihat, bukan yang bisa merusak.

   WARNA: sudah PINDAH KE BIRU BRAND. Di rilis sebelumnya di sini tertulis
   "hijau tetap dipakai untuk sekarang, kalau mau pindah ganti dua baris ini".
   Owner memutuskan pindah, dan dua baris itu yang diganti. Nilainya bukan
   karangan sendiri — diambil dari var(--blue-600) di assets/theme.css, yang
   isinya disalin persis dari designsystemperumahanbaruv2.html.
   ============================================================================ */

:root{
  --komponen-versi:"2026-08-31a";   /* lihat catatan di assets/tokens.css */

  /* Warna aksi aplikasi. Satu-satunya tempat warna tombol ditentukan. */
  --aksi:        var(--blue-600);   /* #1E71A3 */
  --aksi-gelap:  var(--blue-700);   /* #185C85 */
  --aksi-lembut: var(--blue-050);   /* #EAF2F8 */
  --aksi-tua:    var(--ink-700);    /* tombol sekunder gelap netral */

  /* Bayangan tombol ikut warna tombolnya. Ditaruh sebagai token supaya
     angka rgb-nya cuma ditulis sekali; kalau --aksi berubah lagi, yang perlu
     diedit tetap satu tempat. */
  --aksi-rgb: 30,113,163;
}

/* ===== TOMBOL ==============================================================
   Selector .btn dan button DIPERTAHANKAN apa adanya supaya tidak ada satu pun
   markup yang perlu diubah. */
/* a.btn dan button.btn ditulis TERPISAH, bukan cuma .btn.
   Alasannya spesifisitas, bukan gaya penulisan: ".btn" bernilai (0,1,0), dan
   itu kalah dari aturan tautan seperti ".content a" (0,1,1) yang ada di
   style.css. Dengan menyebut elemennya, nilainya jadi (0,1,1) juga — dan
   karena berkas ini dimuat paling belakang, ia yang menang.
   Tanpa ini, tombol berupa <a> memakai warna teks tautan di atas latar
   tombol, dan hasilnya biru tua di atas biru. */
.btn,
a.btn,
button.btn,
button{
  background: var(--aksi);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;              /* sama seperti sebelumnya */
  padding: 10px 14px;               /* sama seperti sebelumnya */
  font-weight: 800;                 /* sama seperti sebelumnya */
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  line-height: 1.2;
  /* Bayangan mengikuti warna tombolnya sendiri, bukan angka lepas. */
  box-shadow: 0 6px 16px rgba(var(--aksi-rgb),.22);
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}

.btn:hover,
button:hover{ background: var(--aksi-gelap); box-shadow: 0 8px 20px rgba(var(--aksi-rgb),.28); }
.btn:active,
button:active{ transform: translateY(1px); box-shadow: 0 3px 10px rgba(var(--aksi-rgb),.22); }

/* Cincin fokus untuk pengguna keyboard. Sebelumnya tidak ada sama sekali —
   pemakai yang menekan Tab tidak tahu sedang berada di tombol yang mana. */
.btn:focus-visible,
button:focus-visible{
  outline: 3px solid rgba(var(--aksi-rgb),.40);
  outline-offset: 2px;
}

/* Keadaan nonaktif. Sebelumnya tombol disabled tetap tampak bisa diklik. */
.btn:disabled, button:disabled,
.btn[disabled], button[disabled],
.btn.is-disabled{
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}

/* ----- varian yang sudah dipakai aplikasi (nama dipertahankan) ----- */
.btn.secondary,
button.secondary{ background: var(--aksi-tua); box-shadow: 0 6px 16px rgba(60,71,86,.22); }
.btn.secondary:hover, button.secondary:hover{ background: var(--ink-900); }

/* .green di aplikasi ini artinya "tombol aksi utama" (simpan, proses),
   BUKAN penanda status berhasil. Karena itu ia ikut warna aksi, bukan hijau
   semantik. Nama kelasnya sengaja tidak diubah supaya tidak perlu menyentuh
   ratusan halaman; yang berubah cuma warnanya. */
.btn.green, button.green{ background: var(--aksi); }
.btn.green:hover, button.green:hover{ background: var(--aksi-gelap); }

.btn.red, button.red,
.btn.danger, button.danger{ background: var(--danger); box-shadow: 0 6px 16px rgba(220,38,38,.22); }
.btn.red:hover, button.red:hover,
.btn.danger:hover, button.danger:hover{ background: #B91C1C; }
.btn.red:focus-visible, button.red:focus-visible{ outline-color: rgba(220,38,38,.40); }

/* .gray dipakai di halaman status berkas untuk tombol "← Dashboard" */
.btn.gray, button.gray{
  background: #fff; color: var(--ink-700); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn.gray:hover, button.gray:hover{ background: var(--bg); }

/* .light dipakai di halaman cetak/berkas */
.btn.btn-light, .btn-light{
  background: #fff; color: var(--ink-700); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn.btn-light:hover, .btn-light:hover{ background: var(--bg); }

.btn.small, button.small{ padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }

/* WhatsApp punya warna resmi sendiri — jangan diseragamkan. */
.btn.whatsapp, button.whatsapp,
.btn.api-wa, button.api-wa{ background: #25D366; color: #0B2E1C;
  box-shadow: 0 6px 16px rgba(37,211,102,.28); }
.btn.whatsapp:hover, button.whatsapp:hover,
.btn.api-wa:hover, button.api-wa:hover{ background: #1EBE5B; }

/* ===== YANG SENGAJA DIKECUALIKAN ===========================================
   Selector `button` di atas kena SEMUA elemen <button>, termasuk milik pihak
   ketiga. Tombol paginasi DataTables dan tombol close bawaan browser tidak
   boleh ikut jadi hijau tebal — di bawah ini dikembalikan. */
.dataTables_wrapper .dataTables_paginate button,
.dataTables_wrapper .paginate_button,
.dt-buttons button,
button.lg-toast-x,
button.toggle-pass,
.status-page .dataTables_wrapper button{
  background: none; color: inherit; border: 0; border-radius: 0;
  padding: initial; font-weight: inherit; box-shadow: none; transform: none;
}

/* ===== CETAK: tombol tidak ikut tercetak =================================== */
@media print{
  .btn, button{ display: none !important; }
}


/* ============================================================================
   TAHAP 2 — BADGE
   ----------------------------------------------------------------------------
   Kenapa badge yang berikutnya: badge dipakai untuk menyampaikan STATUS, dan
   status adalah hal yang paling sering dibaca sekilas di aplikasi ini. Kalau
   warnanya tidak konsisten antar halaman, orang berhenti mempercayai warnanya
   dan mulai membaca tulisannya satu per satu — yang justru membuat badge tidak
   ada gunanya.

   Sebelum ini badge punya tiga sistem warna yang berbeda:
     assets/style.css              .badge.ok / .warn / .bad
     assets/style_status_berkas.css .badge-green / -blue / -purple / -red / ...
     gaya <style> di dalam halaman  .module-badge.ok / .bad
   Ketiganya dipertahankan (halaman lama tidak boleh rusak), tapi sekarang
   warnanya diambil dari token yang sama, jadi hijau di satu halaman persis
   sama dengan hijau di halaman lain.

   GEOMETRI TIDAK DIUBAH — sama seperti waktu migrasi tombol. Ukuran, padding,
   dan radius dibiarkan apa adanya supaya tidak ada tata letak yang bergeser.
   ============================================================================ */

:root{
  /* Empat arti, empat warna. Lebih dari ini dan orang berhenti bisa
     membedakannya sekilas. */
  --st-baik-bg:var(--success-bg);  --st-baik-tx:var(--success-text);
  --st-tunggu-bg:var(--warning-bg); --st-tunggu-tx:#92400E;
  --st-buruk-bg:var(--danger-bg);  --st-buruk-tx:var(--danger);
  --st-netral-bg:#F1F1EF; --st-netral-tx:var(--ink-500);
  --st-info-bg:var(--blue-050);   --st-info-tx:var(--blue-700);
}

/* Bentuk dasar — dipakai semua keluarga badge. */
.badge, .module-badge,
.badge-green, .badge-blue, .badge-purple, .badge-red, .badge-yellow, .badge-gray{
  display:inline-block; border-radius:999px; font-weight:700;
  line-height:1.25; white-space:nowrap;
}

/* --- keluarga style.css --- */
.badge{            background:var(--st-baik-bg);   color:var(--st-baik-tx); }
.badge.ok{         background:var(--st-baik-bg);   color:var(--st-baik-tx); }
.badge.warn{       background:var(--st-tunggu-bg); color:var(--st-tunggu-tx); }
.badge.bad{        background:var(--st-buruk-bg);  color:var(--st-buruk-tx); }

/* --- keluarga halaman status berkas --- */
.badge-green{  background:var(--st-baik-bg);   color:var(--st-baik-tx); }
.badge-blue{   background:var(--st-info-bg);   color:var(--st-info-tx); }
.badge-purple{ background:var(--st-info-bg);   color:var(--st-info-tx); }
.badge-yellow{ background:var(--st-tunggu-bg); color:var(--st-tunggu-tx); }
.badge-red{    background:var(--st-buruk-bg);  color:var(--st-buruk-tx); }
.badge-gray{   background:var(--st-netral-bg); color:var(--st-netral-tx); }

/* --- keluarga modul material/truk --- */
.module-badge.ok{  background:var(--st-baik-bg);  color:var(--st-baik-tx); }
.module-badge.bad{ background:var(--st-buruk-bg); color:var(--st-buruk-tx); }

/* Ungu dipertahankan HANYA untuk SP3K. Di aplikasi ini ungu sudah terlanjur
   berarti "sedang di bank, menunggu putusan" dan staf sudah terbiasa. Menukar
   arti warna yang sudah dihafal orang bukan perbaikan, itu memindahkan
   kebingungan. */
.badge-purple{ background:#EDE7F8; color:#5B3FA0; }


/* ============================================================================
   TAHAP 3 — TABEL
   ----------------------------------------------------------------------------
   Yang diperbaiki cuma dua hal, dan dua-duanya soal KETERBACAAN, bukan selera:

   1. Baris bergaris tipis. Tabel di sini sering 15 kolom dan 500 baris; tanpa
      pembeda baris, mata gampang lompat baris waktu menyusuri ke kanan — dan
      di tabel berkas, lompat satu baris berarti membaca nama orang lain.

   2. Kepala tabel yang tetap terlihat waktu digulir. Sama alasannya: kolom
      ke-12 tidak ada artinya kalau judul kolomnya sudah hilang di atas layar.

   Warna, ukuran huruf, dan padding TIDAK diubah.
   ============================================================================ */

table tbody tr:nth-child(even) > td{ background:rgba(15,23,42,.022); }
table tbody tr:hover > td{ background:var(--blue-050); }

/* Kepala tabel menempel. Hanya di dalam pembungkus yang memang digulir —
   kalau dipasang ke semua tabel, tabel di dalam kartu pendek ikut "melayang"
   dan malah terlihat rusak. */
.table-wrap table thead th,
.module-table-wrap table thead th,
.rb-table-wrap table thead th{
  position:sticky; top:0; z-index:2;
}

/* Angka rata kanan supaya digitnya sejajar dan selisih besaran kelihatan
   tanpa harus membaca angkanya. */
td.money-plus, td.money-minus, td.angka, th.angka{ text-align:right; font-variant-numeric:tabular-nums; }

@media print{
  table tbody tr:nth-child(even) > td{ background:transparent; }
  .table-wrap table thead th, .module-table-wrap table thead th{ position:static; }
}

/* =============================================================================
   31 AGUSTUS 2026 — TIGA KELUHAN BRO, SATU LAPISAN
   =============================================================================
   1. "Kesulitan centang kolom di rekap spp"
   2. "ksi juga akordion" (Rekap SPP) dan "Analisa pengadaan pake akordion"
   3. "buat shortcut lsg ke tabelnya" (kartu angka Analisa Pengadaan)

   Semuanya ditulis di lapisan komponen — berkas milik sesi refactor — bukan di
   assets/style.css. Bukan karena style.css terlarang (larangan itu dicabut 30
   Agustus), melainkan karena ketiganya aturan komponen yang dipakai banyak
   halaman, dan di sinilah tempatnya.
   ========================================================================== */

/* --- 1. SASARAN SENTUH KOTAK CENTANG DI TABEL ------------------------------
   Kotak centang bawaan peramban tingginya sekitar 13px. Di sel tabel yang
   padding-nya 8px, sasaran yang bisa ditekan jari cuma sekitar 13x13 — jauh di
   bawah ambang 44px yang dipakai Apple maupun Google, dan itu sebabnya bro
   kesulitan mencentangnya.

   Yang diperbesar BUKAN kotaknya saja: <label> dibentang memenuhi selnya, jadi
   seluruh lebar sel jadi bisa ditekan. Mengandalkan kotaknya saja berarti
   sasaran tetap kecil betapa pun besarnya sel. */
.cek-sel{ padding:0 !important; }
.cek-sel label{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:40px; margin:0; cursor:pointer;
}
.cek-sel input[type="checkbox"]{
  width:18px; height:18px; cursor:pointer; accent-color:#1E71A3;
}
.cek-sel label:hover{ background:var(--blue-050, #EAF2F8); }
@media screen and (max-width:900px){
  .cek-sel label{ min-height:44px; }
  .cek-sel input[type="checkbox"]{ width:20px; height:20px; }
}

/* --- 2. AKORDION -----------------------------------------------------------
   Dipasang di atas <details>/<summary> BAWAAN HTML, bukan JavaScript sendiri.
   Alasannya tiga, dan ketiganya bukan selera:

     . tetap bisa dibuka-tutup walau JavaScript-nya gagal dimuat;
     . papan ketik dan pembaca layar sudah mengerti tanpa diajari (aria-expanded
       diurus peramban, bukan ditiru tangan);
     . tidak bertabrakan dengan akordion milik sesi tampilan di
       assets/akordion_tabel.js — dua mesin yang mengurus satu elemen akan
       berebut, dan yang kalah tidak berbunyi.

   Nama kelasnya berawalan mg- (Maharani) supaya wilayahnya jelas milik siapa. */
.mg-akordion{
  border:1px solid var(--eg-line, #E7E1D8); border-radius:14px;
  background:#fff; margin:12px 0; overflow:hidden;
}
.mg-akordion > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; min-height:44px;
  font-weight:800; color:#185C85; background:#EAF2F8;
}
.mg-akordion > summary::-webkit-details-marker{ display:none; }
.mg-akordion > summary::before{
  content:'▸'; display:inline-block; font-size:13px; line-height:1;
  transition:transform .16s ease; flex:0 0 auto;
}
.mg-akordion[open] > summary::before{ transform:rotate(90deg); }
.mg-akordion > summary:hover{ filter:brightness(.98); }
.mg-akordion > summary:focus-visible{ outline:2px solid #1E71A3; outline-offset:-2px; }
.mg-akordion > .mg-akordion-isi{ padding:14px 16px; }
.mg-akordion .mg-akordion-hitung{
  margin-left:auto; font-weight:700; font-size:12px; color:#5A6B7B;
}
@media print{
  /* Yang tertutup di layar tetap harus ikut tercetak — kertas tidak punya
     tombol untuk membukanya. */
  .mg-akordion > .mg-akordion-isi{ display:block !important; }
  .mg-akordion > summary{ background:transparent; }
}

/* --- 3. KARTU ANGKA YANG JADI PINTASAN -------------------------------------
   Kartunya kini <a>. Tanpa aturan ini ia mewarisi rupa tautan biasa: biru,
   bergaris bawah, dan angka besarnya ikut biru — kartu yang tiba-tiba berubah
   rupa cuma karena bisa diklik. */
.ap-stat-tautan{
  display:block; text-decoration:none !important; color:inherit !important;
  transition:box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.ap-stat-tautan:hover{
  border-color:#CBE0EE !important;
  box-shadow:0 10px 24px rgba(10,30,60,.10);
  transform:translateY(-1px);
}
.ap-stat-tautan:focus-visible{ outline:2px solid #1E71A3; outline-offset:2px; }
.ap-stat-tautan .sub{ color:#185C85 !important; font-weight:700; }