/* CoreNet Remote Platform — tema teal, selaras remote.corenet.web.id.
   Sebelum 8 Agustus 2026 palet ini indigo (#4353c4) dengan sidebar navy. Diubah
   agar portal dan landing tidak berganti warna saat pelanggan menekan "Masuk".
   Hijau "ok" ikut digeser ke hijau sejati (#16a34a) karena #22b07d yang lama
   condong ke teal dan akan berbaur dengan warna merek. Lihat juga blok
   "GAYA LEMBUT & LAPANG" di ujung berkas. */
:root{
  --crp-primary:#0f766e; --crp-primary-d:#0b5852; --crp-accent:#14b8a6;
  --crp-sidebar:#0d3b39; --crp-sidebar-2:#0a2e2c; --crp-sidebar-ink:#b7dedb; --crp-sidebar-ink-mut:#7fb3af;
  --crp-bg:#f1faf8; --crp-card:#ffffff; --crp-ok:#16a34a; --crp-warn:#e0a63b; --crp-bad:#dc5b57;
  --crp-radius:18px; --crp-side-w:250px;
}
[data-bs-theme="dark"]{
  --crp-bg:#0b1a1e; --crp-card:#12262a; --crp-sidebar:#0a1f1e; --crp-sidebar-2:#081a19;
  --bs-body-bg:#0b1a1e; --bs-body-color:#d3e7e4;
}
body{background:var(--crp-bg);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;}
.btn-primary{--bs-btn-bg:var(--crp-primary);--bs-btn-border-color:var(--crp-primary);--bs-btn-hover-bg:var(--crp-primary-d);--bs-btn-hover-border-color:var(--crp-primary-d);--bs-btn-active-bg:var(--crp-primary-d);}
.text-primary{color:var(--crp-primary)!important;}
a{color:var(--crp-primary);text-decoration:none;}
a:hover{color:var(--crp-primary-d);}

/* shell */
.crp-shell{display:flex;min-height:100vh;}
.crp-side{width:var(--crp-side-w);background:var(--crp-sidebar);color:var(--crp-sidebar-ink);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .2s;}
.crp-side__brand{display:flex;align-items:center;gap:.6rem;padding:1.15rem 1.25rem;color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.2px;}
.crp-side__brand .bi{color:var(--crp-accent);font-size:1.4rem;}
.crp-side__brand small{font-weight:400;opacity:.6;font-size:.6rem;}
.crp-side__nav{overflow-y:auto;padding:.5rem .75rem 1.5rem;flex:1;}
.crp-side__label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--crp-sidebar-ink-mut);padding:1rem .75rem .4rem;}
.crp-side__link{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:10px;color:var(--crp-sidebar-ink);font-size:.92rem;font-weight:500;}
.crp-side__link .bi{font-size:1.1rem;width:1.3rem;text-align:center;opacity:.85;}
.crp-side__link:hover{background:var(--crp-sidebar-2);color:#fff;}
.crp-side__link.active{background:var(--crp-primary);color:#fff;box-shadow:0 4px 14px rgba(15,118,110,.4);}
.crp-side__link.active .bi{opacity:1;}
.crp-main{flex:1;margin-left:var(--crp-side-w);display:flex;flex-direction:column;min-width:0;}
.crp-top{height:64px;background:var(--crp-card);border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:flex-end;gap:.35rem;padding:0 1.25rem;position:sticky;top:0;z-index:1030;}
[data-bs-theme="dark"] .crp-top{border-color:rgba(255,255,255,.06);}
.crp-top__btn{border:0;background:transparent;color:inherit;width:40px;height:40px;border-radius:10px;font-size:1.15rem;position:relative;}
.crp-top__btn:hover{background:rgba(0,0,0,.05);}
[data-bs-theme="dark"] .crp-top__btn:hover{background:rgba(255,255,255,.06);}
.crp-top__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--crp-bad);color:#fff;font-size:.62rem;line-height:16px;font-weight:700;}
.crp-top__user{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;border-radius:10px;}
.crp-top__user img,.crp-top__ava{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--crp-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;}
.crp-content{padding:1.5rem;flex:1;}
.crp-page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem;}
.crp-page-head h1{font-size:1.5rem;font-weight:700;margin:0;}

/* cards / stats */
.crp-card{background:var(--crp-card);border:1px solid rgba(0,0,0,.05);border-radius:var(--crp-radius);}
[data-bs-theme="dark"] .crp-card{border-color:rgba(255,255,255,.06);}
.crp-stat{padding:1.25rem 1.35rem;border-radius:var(--crp-radius);color:#fff;position:relative;overflow:hidden;}
.crp-stat .bi{position:absolute;right:-6px;bottom:-10px;font-size:4.5rem;opacity:.18;}
.crp-stat__n{font-size:2rem;font-weight:700;line-height:1;}
.crp-stat__l{opacity:.9;font-size:.9rem;margin-top:.35rem;}
/* Angka besar itu untuk ANGKA. Nilai berupa kata ("Router Online") atau rupiah
   ("Rp 1.250.000") melimpah keluar kartu pada 2rem, dan pada layar sempit
   memotong dirinya sendiri. Dua varian di bawah dipakai alih-alih menambal
   style inline satu per satu — tambalan inline tidak pernah ikut terbawa saat
   kartunya disalin ke halaman berikutnya. */
.crp-stat__n--teks{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;}
.crp-stat__n--uang{font-size:1.4rem;line-height:1.2;letter-spacing:-.02em;}
@media (max-width:1400px){
  .crp-stat__n--uang{font-size:1.2rem;}
}
.crp-stat--primary{background:linear-gradient(135deg,#0f766e,#14b8a6);}
.crp-stat--teal{background:linear-gradient(135deg,#0e7490,#22d3ee);}
.crp-stat--slate{background:linear-gradient(135deg,#4a5568,#2d3748);}
.crp-stat--rose{background:linear-gradient(135deg,#e05b57,#d6455f);}
.crp-badge-ok{color:var(--crp-ok);} .crp-badge-warn{color:var(--crp-warn);} .crp-badge-bad{color:var(--crp-bad);}

@media (max-width:991px){
  .crp-side{transform:translateX(-100%);}
  .crp-side.show{transform:none;}
  .crp-main{margin-left:0;}
  .crp-top{justify-content:space-between;}
}
.crp-side__backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035;}
.crp-side__backdrop.show{display:block;}

/* Panduan — konten artikel dari Markdown. */
.crp-artikel h2{font-size:1.15rem;font-weight:700;margin-top:0}
.crp-artikel h3{font-size:1rem;font-weight:700;color:var(--crp-primary);margin-top:1.5rem}
.crp-artikel h4{font-size:.95rem;font-weight:600;margin-top:1.1rem}
.crp-artikel p{line-height:1.75}
.crp-artikel li{line-height:1.7}
.crp-artikel pre{white-space:pre-wrap;word-break:break-word}
.crp-artikel code{font-size:.86em}
.crp-artikel table{margin:.75rem 0}
.crp-artikel img{max-width:100%}
.crp-artikel hr{opacity:.12;margin:1.6rem 0}

/* ============================================================================
   Modul perangkat pelanggan — Hotspot, PPPoE, Backup.

   Keadaan "menunggu" butuh warnanya sendiri. Perintah ke router pelanggan
   melewati antrean CHR, sehingga ada jeda beberapa detik saat sebuah baris
   bukan berhasil dan bukan gagal — melainkan belum dijemput. Memakai warna
   peringatan untuk itu keliru: tidak ada yang salah, hanya belum selesai.
   ========================================================================== */
:root{ --crp-wait:#7d9491; }
[data-bs-theme="dark"]{ --crp-wait:#9fb8b5; }

.crp-stat--amber{background:linear-gradient(135deg,#c78c2b,#e0a63b);}

/* Lencana keadaan. Titik di depan memberi isyarat kedua selain warna,
   supaya tetap terbaca oleh mata yang sulit membedakan merah dan hijau. */
.crp-pill{display:inline-flex;align-items:center;gap:.34rem;font-size:.75rem;font-weight:600;
  padding:.2rem .6rem;border-radius:20px;white-space:nowrap;line-height:1.4;}
.crp-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.crp-pill--ok{background:rgba(22,163,74,.12);color:#15803d;}
.crp-pill--warn{background:rgba(224,166,59,.14);color:#a97b1f;}
.crp-pill--bad{background:rgba(220,91,87,.12);color:var(--crp-bad);}
.crp-pill--wait{background:rgba(125,148,145,.14);color:var(--crp-wait);}
[data-bs-theme="dark"] .crp-pill--ok{background:rgba(22,163,74,.18);color:#4ade80;}
[data-bs-theme="dark"] .crp-pill--warn{background:rgba(224,166,59,.18);color:var(--crp-warn);}
[data-bs-theme="dark"] .crp-pill--bad{background:rgba(220,91,87,.18);color:#f08480;}
[data-bs-theme="dark"] .crp-pill--wait{background:rgba(159,184,181,.18);}
.crp-pill--wait::before{animation:crpBlip 1.4s ease-in-out infinite;}
@keyframes crpBlip{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){ .crp-pill--wait::before{animation:none;} }

/* Penanda ringkas untuk profil, paket, transport. */
.crp-chip{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.15rem .5rem;border-radius:6px;background:rgba(15,118,110,.1);color:var(--crp-primary);}
[data-bs-theme="dark"] .crp-chip{background:rgba(20,184,166,.18);color:var(--crp-accent);}
.crp-chip--mut{background:rgba(125,148,145,.14);color:var(--crp-wait);}

/* Tabel data. Angka disejajarkan supaya kolom dapat dibandingkan sekilas. */
/* min-width membuat .table-responsive benar-benar menggulir di layar sempit.
   Tanpa itu tabel hanya memampat: kolom saling berdesakan dan angka terpotong
   ke baris berikutnya — terlihat "muat" padahal tidak terbaca. */
.crp-t{width:100%;min-width:720px;font-size:.88rem;margin:0;}
.crp-t th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--crp-sidebar-ink-mut);font-weight:700;padding:.7rem 1rem;white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,.07);}
[data-bs-theme="dark"] .crp-t th{border-color:rgba(255,255,255,.08);color:#8aa8a5;}
.crp-t td{padding:.7rem 1rem;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:middle;}
[data-bs-theme="dark"] .crp-t td{border-color:rgba(255,255,255,.06);}
.crp-t tbody tr:last-child td{border-bottom:0;}
.crp-t tbody tr:hover{background:rgba(15,118,110,.04);}
[data-bs-theme="dark"] .crp-t tbody tr:hover{background:rgba(20,184,166,.08);}
.crp-t .num{font-variant-numeric:tabular-nums;}
.crp-t .sub{display:block;color:var(--crp-sidebar-ink-mut);font-size:.76rem;margin-top:1px;}
[data-bs-theme="dark"] .crp-t .sub{color:#8aa8a5;}
.crp-t tr.is-wait td{background:rgba(125,148,145,.09);}
.crp-t tr.is-wait td:first-child{box-shadow:inset 3px 0 0 var(--crp-wait);}
.crp-t tr.is-down td:first-child{box-shadow:inset 3px 0 0 var(--crp-bad);}

/* Catatan kaki kartu — menerangkan kenapa, bukan sekadar apa. */
.crp-note{font-size:.79rem;color:var(--crp-sidebar-ink-mut);padding:.75rem 1rem;
  border-top:1px solid rgba(0,0,0,.06);background:var(--crp-bg);
  border-radius:0 0 var(--crp-radius) var(--crp-radius);}
[data-bs-theme="dark"] .crp-note{border-color:rgba(255,255,255,.06);color:#8aa8a5;}

.crp-voucher{border:1px dashed rgba(0,0,0,.14);border-radius:11px;padding:.8rem .6rem;
  background:var(--crp-bg);text-align:center;}
[data-bs-theme="dark"] .crp-voucher{border-color:rgba(255,255,255,.14);}
.crp-voucher__k{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;}
.crp-voucher__c{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:1.05rem;
  font-weight:700;letter-spacing:.06em;margin:.2rem 0;}
.crp-voucher__m{font-size:.7rem;opacity:.65;}

/* Kartu ringkasan yang menuju rinciannya. Dibungkus <button> agar dapat
   dicapai keyboard; tanpa itu ia hanya terlihat interaktif bagi pengguna mouse. */
.crp-stat-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;
  border-radius:var(--crp-radius);}
.crp-stat-btn:focus-visible{outline:2px solid var(--crp-accent);outline-offset:2px;}
.crp-stat--tautan{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.crp-stat-btn:hover .crp-stat--tautan{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,35,33,.16);}
@media (prefers-reduced-motion:reduce){
  .crp-stat--tautan{transition:none;}
  .crp-stat-btn:hover .crp-stat--tautan{transform:none;}
}

/* Kartu yang sedang dipakai menyaring tabel. Ditandai cincin, bukan perubahan
   warna — warna kartu sudah bermakna (hijau/kuning/merah) dan tidak boleh
   dipinjam untuk arti kedua. */
.crp-stat-btn.is-aktif .crp-stat{box-shadow:0 0 0 3px var(--crp-card),0 0 0 5px var(--crp-accent);}

/* Kotak pencarian tabel. */
.crp-cari{position:relative;max-width:250px;flex:1 1 170px;}
.crp-cari .form-control{font-size:.85rem;padding-left:2rem;}
.crp-cari > .bi{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);
  opacity:.45;font-size:.9rem;pointer-events:none;z-index:4;}
.crp-kosong{padding:2.25rem 1rem;text-align:center;color:var(--crp-sidebar-ink-mut);font-size:.88rem;}

/* Menu bertingkat di sidebar (Hotspot / PPPoE punya halaman turunan).
   Anak menu memakai tanda titik, bukan ikon: ikon kedua pada tingkat kedua
   membuat mata sulit menemukan induknya. */
.crp-side__link--induk{justify-content:space-between;}
.crp-side__link--induk .crp-side__panah{margin-left:auto;font-size:.75rem;transition:transform .15s ease;}
.crp-side__link--induk[aria-expanded="true"] .crp-side__panah{transform:rotate(180deg);}
.crp-side__sub{margin:.15rem 0 .35rem 1.55rem;padding-left:.7rem;
  border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.1rem;}
.crp-side__sublink{display:flex;align-items:center;gap:.55rem;padding:.42rem .6rem;border-radius:8px;
  color:var(--crp-sidebar-ink-mut);font-size:.85rem;font-weight:500;}
.crp-side__sublink::before{content:'';width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:0 0 auto;opacity:.7;}
.crp-side__sublink:hover{color:#fff;background:var(--crp-sidebar-2);}
.crp-side__sublink.active{color:#fff;background:var(--crp-sidebar-2);font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .crp-side__link--induk .crp-side__panah{transition:none;}
}

/* ===========================================================================
   PONSEL — KARTU SERAGAM, TABEL TANPA GESER, DAN PEWARNAAN YANG LEBIH TENANG
   ===========================================================================
   Ditulis sebagai satu blok di akhir berkas, bukan disebar ke aturan di atas.
   Alasannya praktis: seluruhnya dapat ditinjau sekaligus, dan dapat dibatalkan
   dengan menghapus satu blok bila ternyata bukan yang diinginkan.
   ------------------------------------------------------------------------- */

/* --- 1. KARTU SETINGGI SAUDARANYA ---------------------------------------
   Bootstrap menyamakan tinggi KOLOM, bukan isinya. Tanpa height:100% kartu
   mengikuti panjang teksnya sendiri, sehingga kartu yang labelnya dua baris
   berdiri lebih tinggi daripada tetangganya — persis yang terlihat pada
   "Router Online" di sebelah "Belum Sinkron". */
.crp-stat{height:100%;display:flex;flex-direction:column;justify-content:center;}
.crp-stat-btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;text-align:left;}

/* --- 2. PEWARNAAN: KARTU TERANG DENGAN AKSEN ------------------------------
   Mengikuti contoh yang diberikan: latar terang, angka berwarna, ikon sebagai
   aksen samar. Blok warna pekat memang menarik perhatian, tetapi pada layar
   ponsel empat blok pekat berdampingan membuat angkanya justru sulit dibaca —
   dan teks putih di atasnya tidak punya cadangan kontras sama sekali.

   Tiap varian hanya menetapkan satu warna aksen; sisanya diturunkan. */
.crp-stat{
  background:var(--crp-card);
  color:var(--bs-body-color);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
[data-bs-theme="dark"] .crp-stat{border-color:rgba(255,255,255,.07);box-shadow:none;}
.crp-stat::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--crp-c,var(--crp-primary));opacity:.9;}
.crp-stat .bi{color:var(--crp-c,var(--crp-primary));opacity:.13;}
.crp-stat__n{color:var(--crp-c,var(--crp-primary));}
.crp-stat__l{opacity:1;color:var(--bs-body-color);font-weight:600;}
.crp-stat .small{color:var(--crp-sidebar-ink-mut);}
[data-bs-theme="dark"] .crp-stat .small{color:#8aa8a5;}

.crp-stat--primary{--crp-c:#0f766e;background:linear-gradient(180deg,rgba(15,118,110,.07),var(--crp-card));}
.crp-stat--teal   {--crp-c:#12a89e;background:linear-gradient(180deg,rgba(18,168,158,.08),var(--crp-card));}
.crp-stat--amber  {--crp-c:#c2820f;background:linear-gradient(180deg,rgba(224,166,59,.10),var(--crp-card));}
.crp-stat--rose   {--crp-c:#d6455f;background:linear-gradient(180deg,rgba(214,69,95,.08),var(--crp-card));}
.crp-stat--slate  {--crp-c:#5a6f6c;background:linear-gradient(180deg,rgba(90,115,112,.09),var(--crp-card));}
[data-bs-theme="dark"] .crp-stat--primary{--crp-c:#5eead4;}
[data-bs-theme="dark"] .crp-stat--teal   {--crp-c:#3fd6c9;}
[data-bs-theme="dark"] .crp-stat--amber  {--crp-c:#f0b955;}
[data-bs-theme="dark"] .crp-stat--rose   {--crp-c:#ff7d90;}
[data-bs-theme="dark"] .crp-stat--slate  {--crp-c:#9bb3b0;}

/* Kartu yang dapat diklik perlu isyarat sentuh, bukan sekadar tulisan kecil. */
.crp-stat--tautan{transition:transform .12s,box-shadow .12s;}
.crp-stat-btn:hover .crp-stat--tautan{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,24,40,.10);}
.crp-stat-btn:focus-visible{outline:2px solid var(--crp-primary);outline-offset:2px;border-radius:var(--crp-radius);}

/* --- 3. UKURAN HURUF DI LAYAR SEMPIT -------------------------------------
   2rem dirancang untuk kartu selebar seperempat layar desktop. Pada 380px
   kartunya separuh layar, dan angka yang sama menjadi sesak. */
@media (max-width:575.98px){
  .crp-stat{padding:.9rem 1rem;}
  .crp-stat .bi{font-size:3rem;right:-8px;bottom:-12px;}
  .crp-stat__n{font-size:1.5rem;}
  .crp-stat__n--teks{font-size:.92rem;line-height:1.25;}
  .crp-stat__n--uang{font-size:1.02rem;}
  .crp-stat__l{font-size:.76rem;margin-top:.2rem;}
  .crp-stat .small{font-size:.66rem!important;}

  .crp-page-head h1{font-size:1.35rem;}
  .crp-page-head p{font-size:.82rem;}
  .crp-page-head{gap:.6rem;}
}

/* --- 4. TABEL YANG TIDAK PERLU DIGESER -----------------------------------
   `min-width:720px` memang membuat tabel terbaca di desktop, tetapi di ponsel
   ia memaksa geser mendatar pada SETIAP tabel — dan kolom terpenting justru
   yang paling kanan (Aksi, Status), sehingga yang tidak terlihat adalah yang
   paling dibutuhkan.

   Di bawah 768px tabel berhenti menjadi tabel: satu baris menjadi satu kartu,
   tiap sel satu baris "Label — nilai". Nama kolomnya disalin dari <thead> oleh
   crpLabeliTabel() saat halaman dimuat, jadi tidak ada view yang perlu diubah. */
@media (max-width:767.98px){
  .table-responsive{overflow-x:visible;}
  .crp-t,.table-responsive>table{min-width:0;font-size:.9rem;}
  .crp-t thead,.table-responsive>table thead{display:none;}
  .crp-t,.crp-t tbody,.crp-t tr,.crp-t td,
  .table-responsive>table,.table-responsive>table tbody,
  .table-responsive>table tr,.table-responsive>table td{display:block;width:100%;}

  .crp-t tbody tr,.table-responsive>table tbody tr{
    border:1px solid rgba(0,0,0,.09);border-radius:12px;
    margin:.6rem .75rem;padding:.25rem .35rem;background:var(--crp-card);
  }
  [data-bs-theme="dark"] .crp-t tbody tr,
  [data-bs-theme="dark"] .table-responsive>table tbody tr{border-color:rgba(255,255,255,.09);}
  .crp-t tbody tr:hover,.table-responsive>table tbody tr:hover{background:var(--crp-card);}

  /* NILAI YANG TERLALU PANJANG HARUS TURUN, BUKAN MELUAP.
     `flex-wrap:wrap` membuat nilai yang tidak muat di samping labelnya pindah
     ke baris berikutnya; tanpa itu ia meluber keluar kartu dan terpotong di
     tepi kanan. `overflow-wrap:anywhere` menangani sisanya — alamat surel dan
     nama host adalah satu kata utuh tanpa spasi, jadi tanpa izin memutus di
     mana saja ia tetap menolak menyempit berapa pun ruangnya. */
  .crp-t td,.table-responsive>table td{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:.15rem .75rem;overflow-wrap:anywhere;min-width:0;
    padding:.42rem .6rem;border-bottom:1px dashed rgba(0,0,0,.07);text-align:right;
  }
  .crp-t td>*,.table-responsive>table td>*{min-width:0;}
  [data-bs-theme="dark"] .crp-t td,
  [data-bs-theme="dark"] .table-responsive>table td{border-bottom-color:rgba(255,255,255,.07);}
  .crp-t tbody tr td:last-child,.table-responsive>table tbody tr td:last-child{border-bottom:0;}

  .crp-t td::before,.table-responsive>table td::before{
    content:attr(data-l);flex:0 1 auto;max-width:48%;text-align:left;
    font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
    color:var(--crp-sidebar-ink-mut);padding-top:.15rem;
  }
  /* Sel tanpa nama kolom (mis. kolom aksi) tidak perlu label kosong yang
     menyisakan lekukan di kiri. */
  .crp-t td[data-l=""]::before,.crp-t td:not([data-l])::before,
  .table-responsive>table td[data-l=""]::before,
  .table-responsive>table td:not([data-l])::before{display:none;}
  .crp-t td[data-l=""],.crp-t td:not([data-l]),
  .table-responsive>table td[data-l=""],
  .table-responsive>table td:not([data-l]){justify-content:flex-end;}

  /* Penanda keadaan pindah ke tepi kartu, bukan tepi sel. */
  .crp-t tr.is-wait td{background:transparent;}
  .crp-t tr.is-wait{box-shadow:inset 3px 0 0 var(--crp-wait);}
  .crp-t tr.is-down{box-shadow:inset 3px 0 0 var(--crp-bad);}
  .crp-t tr.is-wait td:first-child,.crp-t tr.is-down td:first-child{box-shadow:none;}

  /* TEKS SEKUNDER TURUN KE BARISNYA SENDIRI.
     Dijadikan inline, ia menjadi item flex ketiga yang berebut ruang dengan
     label dan nilai utama — dan yang kalah tidak mengecil melainkan MELUAP
     keluar kartu. Terlihat pada "user1.corenet.web.id user1@…" di panel admin
     dan pada "Konfirmasi Bayar menyetujui pembayaran" di halaman Pengguna
     Admin: teksnya terpotong di tepi kanan tanpa jejak bahwa ada yang hilang. */
  /* Menyasar `div` anak langsung, bukan hanya `.sub`.
     Teks sekunder ditulis dua cara di aplikasi ini: `.sub` pada tabel `.crp-t`,
     dan `<div class="text-muted small">` pada tabel Bootstrap. Menyasar `.sub`
     saja membuat separuhnya tetap salah — dan salahnya halus: barisnya turun,
     tetapi menempel ke kiri karena `space-between` menaruh item tunggal di awal
     baris, sehingga terbaca seolah milik kolom label. */
  .crp-t td>div,.table-responsive>table td>div,
  .crp-t td>.sub,.table-responsive>table td>.sub{
    flex:0 0 100%;text-align:right;margin:.1rem 0 0;
  }

  /* Tombol aksi per baris: turun ke bawah dan melebar, bukan berdesakan. */
  .crp-t td .btn,.crp-t td .dropdown{width:auto;}
  .crp-t td .btn-group,.crp-t td .dropdown{margin-left:auto;}
}

/* --- 5. KEPALA HALAMAN DAN TOMBOL DI PONSEL ------------------------------ */
@media (max-width:575.98px){
  .crp-page-head{flex-direction:column;align-items:stretch;}
  .crp-page-head .d-flex{flex-wrap:wrap;}
  .crp-cari{width:100%;}
  .crp-cari input{width:100%;}
}

/* ===========================================================================
   NAVIGASI TERANG — mengikuti contoh rancangan yang diberikan
   ===========================================================================
   Sidebar gelap membuat dua bahasa warna hidup berdampingan dalam satu layar:
   navigasi berlatar navy dengan teks terang, isi halaman berlatar terang
   dengan teks gelap. Keduanya bekerja sendiri-sendiri, tetapi mata harus
   menyesuaikan setiap kali berpindah — dan pada layar kecil, tempat sidebar
   menutupi seluruh layar saat dibuka, perpindahannya paling terasa.

   Warna di sini SENGAJA dijadikan variabel lokal `--s-*`, bukan mengubah
   `--crp-sidebar-*` di :root. Variabel itu ikut dipakai kepala tabel dan teks
   sekunder (`.crp-t th`, `.crp-t .sub`); mengubahnya untuk keperluan sidebar
   akan mewarnai ulang hal-hal yang sama sekali tidak berhubungan.
   ------------------------------------------------------------------------- */
.crp-side{
  --s-bg:#ffffff;
  --s-ink:#3f4756;
  --s-ink-mut:#8ba3a0;
  --s-hover:rgba(17,24,39,.05);
  --s-act-bg:rgba(15,118,110,.10);
  --s-act-ink:var(--crp-primary);
  --s-border:rgba(17,24,39,.08);

  background:var(--s-bg);
  color:var(--s-ink);
  border-right:1px solid var(--s-border);
}
[data-bs-theme="dark"] .crp-side{
  --s-bg:#0e2422;
  --s-ink:#c2d6d4;
  --s-ink-mut:#7f9a97;
  --s-hover:rgba(255,255,255,.05);
  --s-act-bg:rgba(94,234,212,.14);
  --s-act-ink:#5eead4;
  --s-border:rgba(255,255,255,.07);
}

.crp-side__brand{color:var(--s-ink);border-bottom:1px solid var(--s-border);}
.crp-side__brand .bi{color:var(--crp-primary);}
[data-bs-theme="dark"] .crp-side__brand .bi{color:#5eead4;}
.crp-side__brand small{color:var(--s-ink-mut);opacity:1;}

.crp-side__label{color:var(--s-ink-mut);font-weight:700;}

.crp-side__link{color:var(--s-ink);font-weight:500;position:relative;}
.crp-side__link .bi{color:var(--s-ink-mut);opacity:1;}
.crp-side__link:hover{background:var(--s-hover);color:var(--s-ink);}
.crp-side__link:hover .bi{color:var(--s-ink);}

/* AKTIF: ditandai warna dan aksen tipis, bukan blok pekat.
   Blok pekat berbayang menarik perhatian lebih besar daripada isi halaman yang
   sedang dibaca — padahal ia hanya menjawab "Anda di mana", pertanyaan yang
   sudah dijawab judul halaman. */
.crp-side__link.active{
  background:var(--s-act-bg);
  color:var(--s-act-ink);
  box-shadow:none;
  font-weight:600;
}
.crp-side__link.active .bi{color:var(--s-act-ink);opacity:1;}
.crp-side__link.active::before{
  content:"";position:absolute;left:-.75rem;top:.35rem;bottom:.35rem;
  width:3px;border-radius:0 3px 3px 0;background:var(--s-act-ink);
}

.crp-side__sublink{color:var(--s-ink-mut);}
.crp-side__sublink::before{background:currentColor;}
.crp-side__sublink:hover{color:var(--s-ink);background:var(--s-hover);}
.crp-side__sublink.active{color:var(--s-act-ink);background:var(--s-act-bg);font-weight:600;}

/* Kepala halaman menyatu dengan sidebar terang: garis tunggal, tanpa dua nada. */
.crp-top{border-bottom:1px solid var(--s-border,rgba(17,24,39,.08));}

/* Di ponsel sidebar menutupi layar. Latarnya kini terang, jadi tirainya perlu
   lebih gelap agar tetap terbaca sebagai "ada lapisan di atas halaman". */
@media (max-width:991px){
  .crp-side{box-shadow:0 0 40px rgba(16,24,40,.18);}
  .crp-side__backdrop{background:rgba(16,24,40,.5);}
}

/* ------------------------------------------------ KARTU KETERANGAN (crp-fakta)
   Tiga fakta pendek yang perlu dibaca sekali lalu diingat — jadwal, retensi,
   cakupan. Sebelumnya ditulis sebagai paragraf beruntun di kepala halaman, dan
   di layar ponsel itu menjadi tembok teks yang harus dilewati sebelum sampai ke
   tombol. Dipecah jadi kartu, ketiganya dapat dipindai sekilas.
   Menumpuk sendiri di layar sempit lewat grid Bootstrap, tanpa aturan tambahan. */
.crp-fakta{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem .9rem;
  border:1px solid rgba(0,0,0,.06);border-radius:var(--crp-radius);
  background:var(--crp-bg);height:100%;}
.crp-fakta .bi{font-size:1.05rem;line-height:1.35;opacity:.75;flex:0 0 auto;}
.crp-fakta__j{font-weight:600;font-size:.82rem;line-height:1.35;}
.crp-fakta__k{font-size:.76rem;line-height:1.45;color:var(--crp-sidebar-ink-mut);
  margin-top:.15rem;}
[data-bs-theme="dark"] .crp-fakta{border-color:rgba(255,255,255,.07);}
[data-bs-theme="dark"] .crp-fakta__k{color:#8aa8a5;}

/* ============================================================================
   GAYA LEMBUT & LAPANG — 8 Agustus 2026

   Mengikuti acuan yang diberikan: latar sangat terang, kartu putih bersudut
   besar, bayangan menyebar tipis alih-alih garis tegas, dan ruang kosong yang
   longgar. Ditulis sebagai blok tambahan di ujung berkas — untuk membatalkannya
   cukup hapus blok ini, tanpa menyentuh aturan mana pun di atas.

   Catatan: berkas ini dulu campuran CRLF/LF; sejak suntingan tanggal yang sama
   ia seluruhnya CRLF. Tidak berpengaruh pada tampilan.
   ========================================================================== */

/* Semburat teal sangat tipis di sudut kanan atas. Inilah yang membuat halaman
   pada acuan terasa lapang: bidang datar satu warna terlihat mati, sedangkan
   gradien selebar ini tidak pernah terbaca sebagai "warna" — hanya sebagai
   ruang yang bernapas. */
body{
  background-image:radial-gradient(1100px 620px at 100% -8%,rgba(20,184,166,.10),transparent 62%);
  background-attachment:fixed;
}
[data-bs-theme="dark"] body{
  background-image:radial-gradient(1100px 620px at 100% -8%,rgba(20,184,166,.07),transparent 62%);
}

/* Kartu: garis tegas diganti bayangan menyebar. Dua lapis — satu rapat untuk
   mendudukkan tepinya, satu lebar untuk mengangkatnya dari latar. Di mode gelap
   bayangan tidak terlihat dan hanya menambah beban, jadi dimatikan. */
.crp-card{
  border-color:rgba(15,35,33,.05);
  box-shadow:0 1px 2px rgba(15,35,33,.04), 0 10px 28px rgba(15,35,33,.05);
}
[data-bs-theme="dark"] .crp-card{box-shadow:none;}
.crp-fakta{border-radius:16px;}

/* Bilah atas dibuat sedikit tembus pandang agar konten terlihat lewat saat
   digulir. Bila peramban tidak mengenal color-mix, seluruh deklarasi ini
   diabaikan dan latar buram yang lama tetap berlaku — jadi aman. */
.crp-top{
  background:color-mix(in srgb, var(--crp-card) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
}

/* ------------------------------------------------------------------ ponsel */

/* Padding konten tidak pernah dikecilkan di layar sempit. Pada 360px, 1,5rem
   di kiri dan kanan memakan 48px — hampir sepertujuh lebar layar — dan itulah
   yang membuat tabel serta tombol terasa berdesakan.

   Tombol di kepala halaman sengaja TIDAK dipaksa selebar layar: markupnya
   berbeda-beda antar halaman (ada yang membungkus judul dalam <div>, ada yang
   memakai grup tombol), dan aturan menyeluruh akan merusak sebagian di antaranya.
   .crp-page-head sudah punya flex-wrap, jadi tombolnya memang sudah turun sendiri. */
@media (max-width:575.98px){
  .crp-content{padding:1rem .85rem;}
  .crp-top{padding:0 .85rem;}
  .crp-card{border-radius:16px;}

  /* 40px masih di bawah anjuran sasaran sentuh 44px. */
  .crp-top__btn{width:44px;height:44px;}
}

/* ============================================================================
   TEMA ATLASSIAN / JIRA — 28 September 2026

   Mengikuti acuan yang diberikan pemilik (saasui.design/application/jira):
   biru Atlassian, permukaan putih di atas latar abu sangat terang, garis tipis
   alih-alih bayangan lebar, dan sudut KECIL.

   LINGKUPNYA SENGAJA HANYA WARNA, HURUF, DAN SUDUT.
   Tidak ada satu pun aturan tata letak di sini — tidak ada perubahan lebar,
   jarak, susunan kolom, maupun titik putus responsif. Layar yang sama, warna
   yang berbeda.

   DITULIS SEBAGAI SATU BLOK DI UJUNG BERKAS, mengikuti kebiasaan berkas ini:
   untuk kembali ke tema teal, hapus blok ini sampai akhir berkas. Tidak ada
   aturan di atasnya yang disunting, jadi tidak ada yang perlu dipulihkan satu
   per satu.

   Nilai warnanya diambil dari Atlassian Design System, bukan dikira-kira dari
   tangkapan layar: #0C66E4 (biru merek), #172B4D (tinta), #626F86 (tinta
   samar), #F7F8F9 (latar cekung), #E9F2FF (latar terpilih).
   ========================================================================== */

:root{
  --crp-primary:#0c66e4; --crp-primary-d:#0055cc; --crp-accent:#579dff;

  /* Sidebar-nya sendiri sudah terang sejak blok "NAVIGASI TERANG" di atas.
     Variabel ini kini praktis hanya melayani `.crp-t th`, `.crp-t .sub`, dan
     `.crp-kosong` — tinta samar Atlassian. Lihat catatan di blok itu. */
  --crp-sidebar:#ffffff; --crp-sidebar-2:#f1f2f4;
  --crp-sidebar-ink:#44546f; --crp-sidebar-ink-mut:#626f86;

  --crp-bg:#f7f8f9; --crp-card:#ffffff;
  --crp-ok:#22a06b; --crp-warn:#e56910; --crp-bad:#c9372c;
  --crp-wait:#626f86;

  /* 18px → 8px. Sudut besar adalah tanda paling kuat dari tema lama; tanpa
     mengecilkannya, hasilnya hanya "aplikasi teal yang dibiru-kan". Ini tetap
     bukan tata letak — tidak ada satu piksel pun yang berpindah. */
  --crp-radius:8px;

  /* Kontrol Bootstrap (tombol, input, select) mengikuti Atlassian: 3px. */
  --bs-border-radius:3px;
  --bs-border-radius-sm:3px;
  --bs-border-radius-lg:6px;

  --bs-body-color:#172b4d;
}

[data-bs-theme="dark"]{
  --crp-primary:#579dff; --crp-primary-d:#85b8ff; --crp-accent:#579dff;
  --crp-sidebar:#1d2125; --crp-sidebar-2:#22272b;
  --crp-sidebar-ink:#b6c2cf; --crp-sidebar-ink-mut:#9fadbc;
  --crp-bg:#1d2125; --crp-card:#22272b;
  --crp-ok:#4bce97; --crp-warn:#f5cd47; --crp-bad:#f87168;
  --crp-wait:#9fadbc;
  --bs-body-bg:#1d2125; --bs-body-color:#b6c2cf;
}

/* ------------------------------------------------------------------- huruf */

/* Inter sudah dimuat di `partials/head.php`; ia pengganti terbuka terdekat
   untuk Atlassian Sans. Yang diubah di sini bukan jenisnya melainkan CARA ia
   dirender: perataan sub-piksel dimatikan supaya batang hurufnya setipis pada
   acuan, dan angka dibuat selebar sama supaya kolom angka berbaris rapi. */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss01' 1;
}
.crp-t,.crp-stat__n,.num{font-variant-numeric:tabular-nums;}

/* Atlassian memakai 600 untuk judul, bukan 700. Bobot 700 pada Inter terbaca
   lebih berat daripada Atlassian Sans pada ukuran yang sama. */
.crp-page-head h1{font-weight:600;letter-spacing:-.01em;}
.crp-artikel h2,.crp-artikel h3,.crp-artikel h4{font-weight:600;}
.crp-stat__n{font-weight:600;letter-spacing:-.02em;}

/* Kepala tabel Jira bukan huruf kapital renggang, melainkan teks kecil biasa
   yang tenang. Ini yang paling terasa saat dua tampilan disandingkan. */
.crp-t th{
  text-transform:none;
  letter-spacing:0;
  font-size:.75rem;
  font-weight:600;
  color:var(--crp-sidebar-ink-mut);
}

/* ------------------------------------------------------------- permukaan */

/* Latar Jira rata. Semburat teal dari tema lama dimatikan — bukan diganti
   biru: gradien apa pun akan terbaca sebagai "bukan Jira". */
body{background-image:none;}
[data-bs-theme="dark"] body{background-image:none;}

/* Kartu: garis tipis, bayangan hampir tidak ada. Tema lama memakai bayangan
   selebar 28px yang membuat kartu tampak melayang; Atlassian mendudukkannya. */
.crp-card{
  border-color:rgba(9,30,66,.14);
  box-shadow:none;
}
[data-bs-theme="dark"] .crp-card{border-color:rgba(166,197,226,.16);box-shadow:none;}
.crp-fakta{border-radius:var(--crp-radius);border-color:rgba(9,30,66,.14);}
[data-bs-theme="dark"] .crp-fakta{border-color:rgba(166,197,226,.16);}

/* Bilah atas Jira pekat, bukan tembus pandang. */
.crp-top{
  background:var(--crp-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(9,30,66,.14);
}
[data-bs-theme="dark"] .crp-top{border-bottom-color:rgba(166,197,226,.16);}

/* --------------------------------------------------------------- sidebar */

.crp-side{
  --s-bg:#ffffff;
  --s-ink:#44546f;
  --s-ink-mut:#626f86;
  --s-hover:rgba(9,30,66,.06);
  --s-act-bg:#e9f2ff;
  --s-act-ink:#0c66e4;
  --s-border:rgba(9,30,66,.14);
}
[data-bs-theme="dark"] .crp-side{
  --s-bg:#1d2125;
  --s-ink:#b6c2cf;
  --s-ink-mut:#9fadbc;
  --s-hover:rgba(166,197,226,.08);
  --s-act-bg:#1c2b41;
  --s-act-ink:#579dff;
  --s-border:rgba(166,197,226,.16);
}
/* Sudut butir menu ikut mengecil, seirama dengan kontrol lain. */
.crp-side__link{border-radius:3px;}
.crp-side__sublink{border-radius:3px;}
.crp-top__btn{border-radius:3px;}
.crp-top__user{border-radius:3px;}

/* ------------------------------------------------------------ kartu angka */

/* Aksen diambil dari palet Atlassian. Nama variannya dibiarkan apa adanya —
   mengganti nama kelas berarti menyunting view, dan itu di luar lingkup. */
.crp-stat{border-color:rgba(9,30,66,.14);box-shadow:none;}
[data-bs-theme="dark"] .crp-stat{border-color:rgba(166,197,226,.16);}
.crp-stat--primary{--crp-c:#0c66e4;background:var(--crp-card);}
.crp-stat--teal   {--crp-c:#227d9b;background:var(--crp-card);}
.crp-stat--amber  {--crp-c:#b65c02;background:var(--crp-card);}
.crp-stat--rose   {--crp-c:#c9372c;background:var(--crp-card);}
.crp-stat--slate  {--crp-c:#626f86;background:var(--crp-card);}
[data-bs-theme="dark"] .crp-stat--primary{--crp-c:#579dff;}
[data-bs-theme="dark"] .crp-stat--teal   {--crp-c:#6cc3e0;}
[data-bs-theme="dark"] .crp-stat--amber  {--crp-c:#f5cd47;}
[data-bs-theme="dark"] .crp-stat--rose   {--crp-c:#f87168;}
[data-bs-theme="dark"] .crp-stat--slate  {--crp-c:#9fadbc;}
.crp-stat-btn:hover .crp-stat--tautan{box-shadow:0 1px 3px rgba(9,30,66,.16);}

/* ------------------------------------------------------- lencana & tabel */

.crp-pill{border-radius:3px;font-weight:600;}
.crp-pill--ok  {background:#dcfff1;color:#216e4e;}
.crp-pill--warn{background:#fff7d6;color:#a54800;}
.crp-pill--bad {background:#ffecebff;color:#ae2e24;}
.crp-pill--wait{background:#f1f2f4;color:#626f86;}
[data-bs-theme="dark"] .crp-pill--ok  {background:rgba(34,160,107,.20);color:#7ee2b8;}
[data-bs-theme="dark"] .crp-pill--warn{background:rgba(229,105,16,.20);color:#f5cd47;}
[data-bs-theme="dark"] .crp-pill--bad {background:rgba(201,55,44,.20);color:#fd9891;}
[data-bs-theme="dark"] .crp-pill--wait{background:rgba(159,173,188,.16);color:#9fadbc;}

.crp-chip{background:#e9f2ff;color:#0055cc;border-radius:3px;}
[data-bs-theme="dark"] .crp-chip{background:#1c2b41;color:#579dff;}
.crp-chip--mut{background:#f1f2f4;color:#626f86;}
[data-bs-theme="dark"] .crp-chip--mut{background:rgba(159,173,188,.16);color:#9fadbc;}

.crp-t tbody tr:hover{background:rgba(9,30,66,.04);}
[data-bs-theme="dark"] .crp-t tbody tr:hover{background:rgba(166,197,226,.06);}
.crp-t th{border-bottom-color:rgba(9,30,66,.14);}
.crp-t td{border-bottom-color:rgba(9,30,66,.09);}
[data-bs-theme="dark"] .crp-t th{border-bottom-color:rgba(166,197,226,.16);}
[data-bs-theme="dark"] .crp-t td{border-bottom-color:rgba(166,197,226,.10);}

.crp-voucher{border-color:rgba(9,30,66,.2);border-radius:3px;}
[data-bs-theme="dark"] .crp-voucher{border-color:rgba(166,197,226,.2);}

/* Kartu-per-baris di ponsel ikut bersudut kecil. */
@media (max-width:767.98px){
  .crp-t tbody tr,.table-responsive>table tbody tr{border-radius:3px;border-color:rgba(9,30,66,.14);}
  [data-bs-theme="dark"] .crp-t tbody tr,
  [data-bs-theme="dark"] .table-responsive>table tbody tr{border-color:rgba(166,197,226,.16);}
}
@media (max-width:575.98px){
  .crp-card{border-radius:var(--crp-radius);}
}

/* ------------------------------------------------------- tombol & fokus */

/* Tombol utama Jira rata, tanpa gradien, dan berubah gelap saat ditekan. */
.btn-primary{
  --bs-btn-bg:var(--crp-primary);
  --bs-btn-border-color:var(--crp-primary);
  --bs-btn-hover-bg:var(--crp-primary-d);
  --bs-btn-hover-border-color:var(--crp-primary-d);
  --bs-btn-active-bg:#09326c;
  --bs-btn-active-border-color:#09326c;
  --bs-btn-disabled-bg:#091e4289;
  --bs-btn-disabled-border-color:transparent;
  font-weight:500;
}
[data-bs-theme="dark"] .btn-primary{--bs-btn-color:#1d2125;--bs-btn-hover-color:#1d2125;--bs-btn-active-bg:#85b8ff;}
.btn{font-weight:500;}

/* Cincin fokus Atlassian: satu garis biru tegas, bukan bayangan lebar. */
.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus{
  box-shadow:none;
  outline:2px solid var(--crp-primary);
  outline-offset:1px;
  border-color:var(--crp-primary);
}
.crp-stat-btn:focus-visible{outline:2px solid var(--crp-primary);outline-offset:1px;}

/* Isian formulir: latar abu sangat terang seperti pada acuan, menjadi putih
   saat disentuh — itulah yang membedakannya dari kotak berbingkai biasa. */
.form-control,.form-select{
  background-color:#f7f8f9;
  border-color:rgba(9,30,66,.14);
}
.form-control:hover,.form-select:hover{background-color:#f1f2f4;}
.form-control:focus,.form-select:focus{background-color:#ffffff;}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{
  background-color:rgba(166,197,226,.08);
  border-color:rgba(166,197,226,.16);
}
[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus{
  background-color:#22272b;
}

/* ------------------------------------------------- ikon bertint & kartu tautan

   Dipakai kartu ringkasan di Home. Warna dibawa ikon dan angka, bukan bingkai:
   tiga kartu bergaris hijau/merah/biru berdampingan terbaca sebagai peringatan,
   padahal ketiganya hanya angka biasa. Ini pula yang dilakukan acuan Jira. */
.crp-ikon{
  flex:0 0 auto;width:32px;height:32px;border-radius:3px;
  display:grid;place-items:center;font-size:1rem;
}
.crp-ikon--success{background:#dcfff1;color:#216e4e;}
.crp-ikon--danger {background:#ffecebff;color:#ae2e24;}
.crp-ikon--primary{background:#e9f2ff;color:#0055cc;}
.crp-ikon--warning{background:#fff7d6;color:#a54800;}
[data-bs-theme="dark"] .crp-ikon--success{background:rgba(34,160,107,.20);color:#7ee2b8;}
[data-bs-theme="dark"] .crp-ikon--danger {background:rgba(201,55,44,.20);color:#fd9891;}
[data-bs-theme="dark"] .crp-ikon--primary{background:#1c2b41;color:#579dff;}
[data-bs-theme="dark"] .crp-ikon--warning{background:rgba(229,105,16,.20);color:#f5cd47;}

/* Kartu yang dapat diklik: isyaratnya latar yang menggelap sedikit, bukan
   kartu yang terangkat. Jira tidak pernah mengangkat kartu saat disentuh. */
.crp-card--tautan{transition:background-color .12s ease,border-color .12s ease;}
.crp-card--tautan:hover{background:#f7f8f9;border-color:rgba(9,30,66,.22);}
[data-bs-theme="dark"] .crp-card--tautan:hover{background:#282e33;border-color:rgba(166,197,226,.24);}
@media (prefers-reduced-motion:reduce){ .crp-card--tautan{transition:none;} }
.min-w-0{min-width:0;}

/* ------------------------------------------------------- kartu beraksen

   Untuk kartu CATATAN — "Catat pembayaran", "punya tagihan terbuka lain".
   Di sini garis berwarna memang bermakna: ia menandai sesuatu yang menuntut
   perhatian, bukan sekadar angka.

   Bedanya dengan `border-start border-4 border-warning` milik Bootstrap:
   kelas itu mewarnai KEEMPAT sisi, sehingga kartunya menjadi kotak kuning utuh.
   Di sini hanya tepi kiri yang berwarna; tiga sisanya tetap netral seperti
   kartu lain. */
.crp-card--aksen{border-left:3px solid var(--crp-a,var(--crp-primary));}
.crp-card--aksen.is-warn{--crp-a:#e56910;}
.crp-card--aksen.is-bad {--crp-a:#c9372c;}
.crp-card--aksen.is-ok  {--crp-a:#22a06b;}

/* ============================================================================
   GAYA RADBOOX — 28 September 2026

   Mengikuti acuan yang diberikan pemilik (my.radboox.com/home). Ia menggeser
   arah dari blok Atlassian di atas, dan itu disengaja — keduanya tidak
   dicampur, yang ini menang karena berada di bawah.

   APA YANG SEBENARNYA MEMBUAT ACUAN ITU "ENAK DILIHAT"

   Bukan warnanya. Tiga hal, dan ketiganya soal ruang:

     1. Kartu tanpa garis tepi. Yang memisahkannya dari latar adalah bayangan
        yang sangat lembut, bukan garis. Garis membuat tiap kartu terbaca
        sebagai kotak; bayangan membuatnya terbaca sebagai bidang.
     2. Sudut lebih besar (14px). Sudut kecil terasa padat dan teknis; sudut
        besar memberi kesan lapang pada kartu yang isinya sedikit.
     3. Sidebar yang bernapas. Label kelompok bukan huruf kapital renggang,
        ada GARIS PEMISAH antar-kelompok, dan tiap butir menu punya tinggi yang
        cukup untuk disentuh tanpa ragu.

   HANYA TAMPILAN. Tidak ada satu pun aturan yang mengubah lebar kolom, jumlah
   kolom, urutan, atau titik putus responsif — hanya warna, huruf, sudut,
   bayangan, dan jarak dalam. Tidak ada berkas PHP yang perlu disentuh.

   Untuk kembali ke gaya Atlassian: hapus blok ini sampai akhir berkas.
   ========================================================================== */

:root{
  /* Sudut kartu kembali membesar. 8px milik Atlassian terasa padat pada kartu
     yang isinya hanya satu angka. */
  --crp-radius:14px;

  /* Kontrol tetap kecil tetapi tidak setajam Atlassian — 6px membuat tombol
     dan isian terasa selaras dengan kartunya, bukan dari keluarga lain. */
  --bs-border-radius:6px;
  --bs-border-radius-sm:6px;
  --bs-border-radius-lg:10px;

  /* Latar sedikit lebih dingin dan lebih terang daripada abu Atlassian. */
  --crp-bg:#f4f6fa;
}
[data-bs-theme="dark"]{
  --crp-bg:#161a1f;
  --crp-card:#1e2329;
}

/* ------------------------------------------------------------------ kartu */

/* Garis tepi dilepas, diganti bayangan dua lapis: satu rapat untuk
   mendudukkan tepinya, satu lebar dan sangat samar untuk mengangkatnya. */
.crp-card{
  border:1px solid transparent;
  border-radius:var(--crp-radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
}
[data-bs-theme="dark"] .crp-card{
  border-color:rgba(255,255,255,.06);
  box-shadow:none;
}
.crp-card--tautan:hover{
  background:var(--crp-card);
  border-color:transparent;
  box-shadow:0 2px 4px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.10);
}
[data-bs-theme="dark"] .crp-card--tautan:hover{background:#252b32;}

.crp-stat{
  border:1px solid transparent;
  border-radius:var(--crp-radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
}
[data-bs-theme="dark"] .crp-stat{border-color:rgba(255,255,255,.06);box-shadow:none;}

.crp-fakta{border-radius:var(--crp-radius);border-color:transparent;
  box-shadow:0 1px 2px rgba(16,24,40,.04);}

/* Isi kartu diberi ruang lebih. Acuan memakai padding yang terasa longgar —
   itulah yang membuat angka besarnya tidak terasa sesak. */
.crp-card > .p-3{padding:1.15rem !important;}
.crp-ikon{width:38px;height:38px;border-radius:10px;font-size:1.1rem;}

/* -------------------------------------------------------------- tipografi */

/* Angka besar dinaikkan dan dirapatkan — pada acuan, angkalah yang pertama
   terbaca, bukan labelnya. */
.crp-stat__n{font-size:1.75rem;letter-spacing:-.025em;line-height:1.15;}
.fs-4{letter-spacing:-.02em;}
.crp-page-head h1{font-size:1.4rem;letter-spacing:-.015em;}

/* Label kecil di atas angka: abu yang tenang, bukan abu pucat. */
.crp-stat__l,.crp-card .text-muted.small{letter-spacing:.005em;}

/* ---------------------------------------------------------------- sidebar */

.crp-side__nav{padding:.75rem .75rem 1.5rem;}

/* LABEL KELOMPOK: bukan huruf kapital renggang.
   Acuan menulisnya "Dashboard", "Radius", "Billing" — huruf biasa, tenang,
   dan justru karena itu tidak bersaing dengan nama menunya sendiri. */
.crp-side__label{
  font-size:.78rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  padding:1.1rem .75rem .45rem;
  color:var(--s-ink-mut);
}

/* GARIS PEMISAH ANTAR-KELOMPOK — inilah "batasan jarak dengan garis" yang
   dimaksud. Dipasang pada label, bukan sebagai elemen tersendiri, sehingga
   tidak ada satu pun berkas PHP yang perlu diubah.

   `:first-child` dikecualikan: garis di atas kelompok pertama akan tergantung
   tepat di bawah logo, dan terbaca sebagai bingkai yang tidak selesai. */
.crp-side__label:not(:first-child){
  border-top:1px solid var(--s-border);
  margin-top:.5rem;
}

/* BUTIR MENU: lebih tinggi, sudut lebih bulat. Acuan memberi tiap butir ruang
   yang cukup untuk disentuh tanpa ragu di layar sentuh. */
.crp-side__link{
  padding:.62rem .75rem;
  border-radius:9px;
  font-size:.9rem;
  margin-bottom:.1rem;
}
.crp-side__link .bi{font-size:1.05rem;}

/* AKTIF: bidang lembut selebar menu, bukan garis penanda di tepi.
   Penanda tepi menjawab "Anda di mana" dengan berbisik; bidang menjawabnya
   dengan tenang tetapi jelas — dan itu yang dilakukan acuan. */
.crp-side__link.active{
  background:var(--s-act-bg);
  color:var(--s-act-ink);
  font-weight:600;
}
.crp-side__link.active::before{display:none;}

.crp-side__sublink{padding:.45rem .7rem;border-radius:8px;font-size:.86rem;}
.crp-side__sub{margin-left:1.4rem;padding-left:.75rem;}

/* Merek di kepala sidebar diberi garis bawah yang sama tenangnya. */
.crp-side__brand{padding:1.15rem 1rem;}

/* ------------------------------------------------------------------- tabel */

/* Kepala tabel tanpa garis tebal; yang memisahkan cukup jarak dan warna. */
.crp-t th{
  padding:.85rem 1.1rem;
  font-size:.76rem;
  border-bottom:1px solid rgba(16,24,40,.07);
}
.crp-t td{padding:.85rem 1.1rem;border-bottom:1px solid rgba(16,24,40,.05);}
[data-bs-theme="dark"] .crp-t th{border-bottom-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .crp-t td{border-bottom-color:rgba(255,255,255,.05);}
.crp-t tbody tr:hover{background:rgba(16,24,40,.025);}
[data-bs-theme="dark"] .crp-t tbody tr:hover{background:rgba(255,255,255,.04);}

/* --------------------------------------------------------------- lencana */

/* Pil dibulatkan penuh lagi — pada acuan, penanda keadaan berbentuk kapsul,
   bukan kotak. Bentuk kapsul membedakannya dari tombol sekilas. */
.crp-pill{border-radius:20px;padding:.22rem .65rem;}
.crp-chip{border-radius:6px;}

/* ------------------------------------------------------------ bilah atas */

.crp-top{
  height:62px;
  border-bottom:1px solid rgba(16,24,40,.07);
}
[data-bs-theme="dark"] .crp-top{border-bottom-color:rgba(255,255,255,.07);}
.crp-top__btn{border-radius:9px;}
.crp-top__user{border-radius:9px;}

/* ------------------------------------------------------------------ isian */

/* Isian formulir mengikuti sudut kontrol yang baru, dan latarnya sedikit
   lebih terang daripada kartu supaya tetap terbaca sebagai sesuatu yang
   dapat diketik. */
.form-control,.form-select{border-radius:6px;background-color:#f7f9fc;}
.form-control:hover,.form-select:hover{background-color:#f1f4f9;}
.form-control:focus,.form-select:focus{background-color:#ffffff;}

/* -------------------------------------------------------------- ponsel */

@media (max-width:575.98px){
  .crp-card{border-radius:12px;}
  .crp-content{padding:1rem .9rem;}
}

/* ============================================================================
   KARTU BERWARNA RADBOOX — 29 September 2026

   Melanjutkan blok "GAYA RADBOOX" di atas, yang sudah membereskan sidebar,
   sudut, dan bayangan. Yang tersisa dari acuan adalah KARTUNYA, dan itu yang
   dikerjakan di sini.

   TIGA BENTUK KARTU, TIGA PERAN BERBEDA

     1. Kartu induk  — angka utama halaman. Gradasi penuh, teks putih.
                       Acuan menyebutnya Monthly Earning / Expenses / Profit.
     2. Kartu tautan — hitungan yang bisa diklik. Putih, dengan sapuan warna
                       di sudut kanan atas. Acuan: Total Unpaid / Overdue /
                       Monthly Paid / Monthly Invoice.
     3. Kartu angka  — ringkasan admin. Putih, sapuan sudut, dan ikon menjadi
                       ubin berwarna di kanan atas, bukan bayangan samar.

   Perbedaan bentuk itu penting: kalau semua kartu diberi warna pekat, tidak
   ada lagi yang menonjol dan halaman berubah menjadi dinding warna. Acuan pun
   hanya memekatkan baris pertamanya.

   SOAL KONTRAS — DAN KEBERATAN YANG SUDAH ADA DI BERKAS INI

   Blok "PEWARNAAN: KARTU TERANG DENGAN AKSEN" di atas menolak blok warna pekat
   dengan alasan yang benar: "teks putih di atasnya tidak punya cadangan
   kontras sama sekali". Keberatan itu tidak diabaikan, ia dijawab — gradasi
   di bawah berakhir di warna yang GELAP, bukan di warna cerah seperti acuan.
   Putih di atas #087f5b, #b42318, dan #1540b0 semuanya lewat 4.5:1, sehingga
   angkanya tetap terbaca di layar ponsel yang silau.

   Itu sebabnya warnanya tidak persis sama dengan tangkapan layar acuan.
   Sengaja.

   BAGAIMANA KARTU TAHU WARNANYA SENDIRI

   Lewat `:has()`, membaca kelas yang SUDAH ada di markup — `.crp-ikon--danger`
   pada kartu induk, `.text-warning` pada kartu tautan. Jadi tidak ada satu pun
   berkas PHP yang perlu disentuh, dan halaman baru yang memakai pola markup
   yang sama ikut terwarnai dengan sendirinya.

   Peramban yang belum mengenal `:has()` mengabaikan seluruh aturan berwarna
   ini dan menampilkan kartu putih seperti sebelumnya — berkurang cantiknya,
   tidak berkurang terbacanya.

   Terdampak: dasbor member (home), Buku Kas, Monitor Koin, dasbor admin.
   Semuanya memakai susunan markup yang sama persis.

   Untuk membatalkan: hapus blok ini sampai akhir berkas.
   ========================================================================== */

/* ==========================================================================
   1. KARTU INDUK — .crp-card yang memuat .crp-ikon
   ========================================================================== */

.crp-card:has(> .d-flex > .crp-ikon){
  position:relative;
  overflow:hidden;
  border-color:transparent;
  color:#fff;
}

/* Dua bulatan putih sangat samar di kanan atas. Pada acuan inilah yang membuat
   kartu pekat tidak terasa seperti kotak cat — ia memberi arah cahaya tanpa
   menambah satu elemen pun ke markup. */
.crp-card:has(> .d-flex > .crp-ikon)::before,
.crp-card:has(> .d-flex > .crp-ikon)::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.crp-card:has(> .d-flex > .crp-ikon)::before{
  right:-56px; top:-72px; width:190px; height:190px;
  background:rgba(255,255,255,.075);
}
.crp-card:has(> .d-flex > .crp-ikon)::after{
  right:-104px; top:-18px; width:190px; height:190px;
  background:rgba(255,255,255,.05);
}

/* Isi kartu harus berada DI ATAS bulatan itu. */
.crp-card:has(> .d-flex > .crp-ikon) > .d-flex{position:relative;z-index:1;}

/* Gradasi berakhir gelap — lihat catatan kontras di kepala blok. */
.crp-card:has(> .d-flex > .crp-ikon--success){
  background:linear-gradient(135deg,#12a56e,#087f5b);
  box-shadow:0 1px 2px rgba(8,127,91,.18), 0 10px 24px rgba(8,127,91,.22);
}
.crp-card:has(> .d-flex > .crp-ikon--danger){
  background:linear-gradient(135deg,#e14640,#b42318);
  box-shadow:0 1px 2px rgba(180,35,24,.18), 0 10px 24px rgba(180,35,24,.22);
}
.crp-card:has(> .d-flex > .crp-ikon--primary){
  background:linear-gradient(135deg,#2f6bea,#1540b0);
  box-shadow:0 1px 2px rgba(21,64,176,.18), 0 10px 24px rgba(21,64,176,.22);
}
.crp-card:has(> .d-flex > .crp-ikon--warning){
  background:linear-gradient(135deg,#c9821a,#96610d);
  box-shadow:0 1px 2px rgba(150,97,13,.18), 0 10px 24px rgba(150,97,13,.22);
}

/* Ubin ikon di dalam kartu pekat: putih tembus pandang, bukan warna pastelnya
   sendiri — pastel di atas gradasi gelap terbaca sebagai noda. */
.crp-card:has(> .d-flex > .crp-ikon) .crp-ikon{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  backdrop-filter:blur(2px);
}

/* Semua warna teks bawaan Bootstrap di dalamnya dinetralkan ke putih. Angka
   penuh, label dan kaki sedikit meredup supaya angkanya tetap yang pertama
   terbaca. */
.crp-card:has(> .d-flex > .crp-ikon) .fs-4,
.crp-card:has(> .d-flex > .crp-ikon) .fs-5,
.crp-card:has(> .d-flex > .crp-ikon) .fw-semibold,
.crp-card:has(> .d-flex > .crp-ikon) .text-success,
.crp-card:has(> .d-flex > .crp-ikon) .text-danger,
.crp-card:has(> .d-flex > .crp-ikon) .text-primary,
.crp-card:has(> .d-flex > .crp-ikon) .text-warning,
.crp-card:has(> .d-flex > .crp-ikon) .text-body{
  color:#fff !important;
}
.crp-card:has(> .d-flex > .crp-ikon) .text-muted,
.crp-card:has(> .d-flex > .crp-ikon) .small{
  color:rgba(255,255,255,.82) !important;
}

/* Angka utama diperbesar sedikit — pada acuan, kartu pekat memuat angka yang
   jelas lebih besar daripada kartu putih di bawahnya. Itu yang membuat
   hierarkinya terbaca sebelum teksnya dibaca. */
.crp-card:has(> .d-flex > .crp-ikon) .fs-4{
  font-size:1.65rem !important;
  letter-spacing:-.025em;
  line-height:1.2;
}

/* Mode gelap tidak perlu diubah: gradasinya sudah gelap, dan putih di atasnya
   tetap sama terbacanya. Yang dilunakkan hanya bayangannya, karena bayangan
   berwarna di atas latar gelap terlihat seperti cahaya yang bocor. */
[data-bs-theme="dark"] .crp-card:has(> .d-flex > .crp-ikon){box-shadow:none;}


/* ==========================================================================
   2. KARTU TAUTAN — sapuan warna di sudut
   ========================================================================== */

.crp-card--tautan{position:relative;overflow:hidden;}

/* Bentuknya lingkaran yang sebagian besar berada di luar kartu, jadi yang
   tampak hanya lengkungnya.

   DI SUDUT KANAN BAWAH, BUKAN ATAS seperti acuan — dan itu bukan selera.
   Kartu ini memakai `ms-auto` untuk menaruh chevron tepat di kanan atas.
   Sapuan di sana akan berada persis di bawah chevron-nya, dan chevron abu di
   atas warna pastel terbaca seperti kecelakaan, bukan rancangan. Acuan tidak
   punya masalah ini karena sudut kanan atasnya kosong.

   Di kanan bawah ia justru menyeimbangkan: nominal di kiri bawah, warna di
   kanan bawah. */
.crp-card--tautan:has(.text-warning)::after,
.crp-card--tautan:has(.text-danger)::after,
.crp-card--tautan:has(.text-success)::after,
.crp-card--tautan:has(.text-secondary)::after,
.crp-card--tautan:has(.text-primary)::after{
  content:"";
  position:absolute;
  right:-30px; bottom:-30px; top:auto;
  width:96px; height:96px;
  border-radius:50%;
  background:var(--crp-sapu);
  pointer-events:none;
  z-index:0;
}
.crp-card--tautan > *{position:relative;z-index:1;}

.crp-card--tautan:has(.text-warning)  {--crp-sapu:#fde5b0;}
.crp-card--tautan:has(.text-danger)   {--crp-sapu:#fecdca;}
.crp-card--tautan:has(.text-success)  {--crp-sapu:#b7f0d4;}
.crp-card--tautan:has(.text-primary)  {--crp-sapu:#c7dbff;}
.crp-card--tautan:has(.text-secondary){--crp-sapu:#dde4ec;}

/* MODE GELAP: SAPUANNYA DIPUDARKAN, BUKAN DITURUNKAN ALPHANYA.
 *
 * Menurunkan alpha saja tidak menolong, dan itu sudah dicoba. Yang tertangkap
 * mata di latar gelap bukan kepekatan warnanya melainkan TEPI cakramnya: satu
 * lengkung tegas di atas bidang rata terbaca sebagai benda, seberapa pun
 * samar warnanya. Di mode terang tepi itu justru yang membuatnya terlihat
 * seperti sapuan kuas pada acuan, jadi hanya mode gelap yang diubah.
 *
 * Gantinya gradasi radial yang berakhir transparan — tidak ada lagi tepi
 * untuk ditangkap, dan warnanya boleh kembali pekat karena ia memudar
 * sebelum sampai ke angka. */
[data-bs-theme="dark"] .crp-card--tautan::after,
[data-bs-theme="dark"] .crp-stat::after{
  background:radial-gradient(circle at 34% 34%, var(--crp-sapu), transparent 70%);
}
[data-bs-theme="dark"] .crp-card--tautan:has(.text-warning)  {--crp-sapu:rgba(229,160,16,.30);}
[data-bs-theme="dark"] .crp-card--tautan:has(.text-danger)   {--crp-sapu:rgba(201,55,44,.34);}
[data-bs-theme="dark"] .crp-card--tautan:has(.text-success)  {--crp-sapu:rgba(34,160,107,.34);}
[data-bs-theme="dark"] .crp-card--tautan:has(.text-primary)  {--crp-sapu:rgba(60,120,240,.34);}
[data-bs-theme="dark"] .crp-card--tautan:has(.text-secondary){--crp-sapu:rgba(160,176,196,.24);}

/* Angka pada kartu tautan dirapatkan supaya sebaris dengan kartu induk. */
.crp-card--tautan .fs-4{font-size:1.5rem !important;letter-spacing:-.02em;}

/* Sapuan ikut terangkat saat kartu disentuh — isyarat yang sama dengan
   bayangannya, jadi tidak menambah bahasa baru. */
.crp-card--tautan::after{transition:transform .16s ease;}
.crp-card--tautan:hover::after{transform:scale(1.12);}
@media (prefers-reduced-motion:reduce){
  .crp-card--tautan::after{transition:none;}
  .crp-card--tautan:hover::after{transform:none;}
}


/* ==========================================================================
   3. KARTU ANGKA ADMIN — .crp-stat
   ========================================================================== */

.crp-stat{
  overflow:hidden;
  /* Ruang di kanan untuk ubin ikon, supaya angka panjang seperti
     "Rp 14.700.000" tidak pernah berjalan ke bawahnya. */
  padding:1.15rem 4.2rem 1.15rem 1.25rem;
  background:var(--crp-card);
}

/* Garis aksen 3px di tepi kiri milik blok Atlassian dibatalkan — ia dan sapuan
   sudut menjawab pertanyaan yang sama, dan dua jawaban membuat kartunya
   terasa penuh. */
.crp-stat::after{
  inset:auto;
  right:-30px; bottom:-30px;
  width:96px; height:96px;
  border-radius:50%;
  background:var(--crp-sapu,#dde4ec);
  opacity:1;
}

/* Ikon berubah peran: dari bayangan besar yang samar menjadi ubin PEKAT
   dengan lambang putih — persis ubin ikon pada acuan. Ia menandai kategori
   kartu, bukan mengisi ruang kosong.

   Pekat, bukan pastel: ubin pastel di atas sapuan pastel yang sewarna membuat
   keduanya melebur dan kartunya tampak kotor. Sapuannya pun dipindah ke sudut
   bawah supaya keduanya tidak pernah bertemu. */
.crp-stat .bi{
  position:absolute;
  right:1.1rem; top:1.1rem; bottom:auto; left:auto;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  font-size:1.05rem;
  opacity:1;
  background:var(--crp-c,var(--crp-primary));
  color:#fff;
  z-index:1;
}

.crp-stat__n{position:relative;z-index:1;font-size:1.7rem;letter-spacing:-.025em;}
.crp-stat__l{position:relative;z-index:1;}

.crp-stat--primary{--crp-sapu:#d3efeb;--crp-ubin:#e4f5f2;background:var(--crp-card);}
.crp-stat--teal   {--crp-sapu:#cfeef4;--crp-ubin:#e2f5f9;background:var(--crp-card);}
.crp-stat--amber  {--crp-sapu:#fbe6bd;--crp-ubin:#fdf1d9;background:var(--crp-card);}
.crp-stat--rose   {--crp-sapu:#fbd5dc;--crp-ubin:#fde7eb;background:var(--crp-card);}
.crp-stat--slate  {--crp-sapu:#dfe6e5;--crp-ubin:#edf1f1;background:var(--crp-card);}

[data-bs-theme="dark"] .crp-stat--primary{--crp-sapu:rgba(20,184,166,.30);}
[data-bs-theme="dark"] .crp-stat--teal   {--crp-sapu:rgba(34,211,238,.30);}
[data-bs-theme="dark"] .crp-stat--amber  {--crp-sapu:rgba(224,166,59,.32);}
[data-bs-theme="dark"] .crp-stat--rose   {--crp-sapu:rgba(214,69,95,.32);}
[data-bs-theme="dark"] .crp-stat--slate  {--crp-sapu:rgba(155,179,176,.22);}
[data-bs-theme="dark"] .crp-stat{background:var(--crp-card);}


/* ==========================================================================
   4. PONSEL
   ========================================================================== */

@media (max-width:575.98px){
  /* Kartu induk memuat tiga baris teks; pada lebar setengah layar ia menjadi
     sempit, jadi angkanya diturunkan supaya tidak terpotong ke baris baru. */
  .crp-card:has(> .d-flex > .crp-ikon) .fs-4{font-size:1.4rem !important;}
  .crp-card--tautan .fs-4{font-size:1.3rem !important;}

  /* Sapuan sudut dikecilkan seperempat — pada kartu sempit, lingkaran 96px
     menutupi hampir separuh lebarnya. */
  .crp-card--tautan:has(.text-warning)::after,
  .crp-card--tautan:has(.text-danger)::after,
  .crp-card--tautan:has(.text-success)::after,
  .crp-card--tautan:has(.text-secondary)::after,
  .crp-card--tautan:has(.text-primary)::after,
  .crp-stat::after{width:72px;height:72px;right:-24px;bottom:-24px;top:auto;}

  .crp-stat{padding:1rem 3.5rem 1rem 1rem;}
  .crp-stat .bi{right:.8rem;top:.8rem;width:32px;height:32px;font-size:.95rem;}
  .crp-stat__n{font-size:1.4rem;}
}

/* ============================================================================
   TINTA PEKAT — 29 September 2026

   Pemilik membandingkan CRP dengan acuan berdampingan: "CRP agak abu-abu,
   Radboox hitam pekat". Benar, dan penyebabnya ADA DUA — satu di antaranya
   sama sekali bukan soal warna.

   1. `-webkit-font-smoothing:antialiased` (blok Atlassian di atas)

      Inilah penyebab utamanya. Di macOS aturan itu memperhalus; di Windows —
      tempat hampir semua Member ISP membuka portal ini — ia MEMATIKAN
      subpixel rendering milik ClearType. Goresan huruf kehilangan sepertiga
      ketebalannya dan seluruh halaman tampak pudar, meskipun nilai warnanya
      tidak berubah satu digit pun.

      Jadi yang dibaca mata sebagai "abu-abu" sebagian besar bukan warna,
      melainkan huruf yang menipis. Dikembalikan ke rendering bawaan sistem.

   2. `--bs-body-color:#172b4d`

      Navy-slate milik Atlassian. Ia memang lembut di mata, dan itu memang
      maksudnya — tetapi di samping hitam pekat acuan, ia terbaca sebagai
      biru pudar. Diturunkan ke #111827.

   Font-nya sendiri TIDAK diganti: `Inter` sudah dimuat di `head.php` dengan
   bobot 400/500/600/700, sama keluarga dengan acuan. Tidak ada yang perlu
   ditambahkan di sana.

   Tetap hanya tampilan — warna, bobot, dan cara huruf dirender. Tidak ada
   berkas PHP yang disentuh.

   Untuk membatalkan: hapus blok ini sampai akhir berkas.
   ========================================================================== */

/* ---------------------------------------------------------- perenderan */

/* Dikembalikan ke bawaan sistem. `auto` membiarkan Windows memakai ClearType
   dan macOS memakai perhalusannya sendiri — masing-masing terbaik di
   tempatnya, yang justru tidak terjadi saat keduanya dipaksa sama. */
body{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

/* --------------------------------------------------------------- tinta */

:root{
  --bs-body-color:#111827;
  /* WAJIB ikut diganti. `.text-muted` Bootstrap 5.3 diturunkan dari
     `--bs-body-color-rgb`, BUKAN dari `--bs-body-color`. Mengganti yang satu
     tanpa yang lain membuat teks utama menghitam sementara semua label kecil
     tetap memakai turunan warna lama — dan justru label kecil itulah yang
     paling terasa pudar. */
  --bs-body-color-rgb:17,24,39;
  --bs-secondary-color:#5b6576;
  --bs-emphasis-color:#030712;
  --bs-heading-color:#0b1220;
}

[data-bs-theme="dark"]{
  --bs-body-color:#e3eaf2;
  --bs-body-color-rgb:227,234,242;
  --bs-secondary-color:#9aa8ba;
  --bs-emphasis-color:#ffffff;
  --bs-heading-color:#f3f6fa;
}

/* Label kecil dinaikkan sedikit bobotnya, bukan hanya digelapkan. Pada ukuran
   .75rem, warna saja tidak cukup — huruf tipis tetap terbaca samar walau
   hitam. */
.text-muted,.crp-card .text-muted.small{color:var(--bs-secondary-color) !important;}
.crp-card .text-muted.small,.crp-stat__l{font-weight:500;}

/* ------------------------------------------------------------- sidebar */

/* #3f4756 adalah abu kebiruan; pada acuan, nama menu hampir sehitam judul.
   Yang meredup cukup ikonnya saja — itu sudah memberi hierarki tanpa
   membuat tulisannya sulit dibaca. */
/* Disasarkan ke `.crp-side`, BUKAN `:root` — di sanalah kedua token itu
   didefinisikan (blok "NAVIGASI TERANG"). Menaruhnya di `:root` tidak akan
   terlihat sama sekali: definisi pada `.crp-side` lebih dekat ke elemen yang
   memakainya dan selalu menang. */
.crp-side{
  --s-ink:#111827;
  --s-ink-mut:#6b7684;
}
[data-bs-theme="dark"] .crp-side{
  --s-ink:#e3eaf2;
  --s-ink-mut:#94a3b8;
}

/* Bobot 500 terasa tipis untuk teks segelap ini pada layar ber-DPI rendah. */
.crp-side__link{font-weight:500;color:var(--s-ink);}
.crp-side__label{color:var(--s-ink-mut);font-weight:600;}

/* --------------------------------------------------------- judul & angka */

.crp-page-head h1{color:var(--bs-heading-color);font-weight:700;}
.crp-card h2,.crp-card .h6,.crp-card h1,.crp-card h3{color:var(--bs-heading-color);}

/* Angka besar adalah hal pertama yang dicari mata di halaman ini; ia tidak
   boleh lebih pudar daripada kalimat di sekitarnya. */
.crp-stat__n{color:var(--bs-emphasis-color);}

/* `:not()` berantai itu bukan kerumitan yang dicari-cari. Tanpa pengecualian
   ini, angka yang SENGAJA berwarna ikut dihitamkan — dan warna pada angka di
   halaman ini selalu punya arti, tidak pernah hiasan. */
.crp-card .fs-4:not(.text-success):not(.text-danger):not(.text-warning):not(.text-primary):not(.text-secondary),
.crp-card .fs-5:not(.text-success):not(.text-danger):not(.text-warning):not(.text-primary):not(.text-secondary){
  color:var(--bs-emphasis-color);
}

/* Angka di dalam kartu induk bergradasi harus TETAP putih. Blok kartu di atas
   sudah menetapkannya; ditegaskan ulang karena aturan di sini datang
   belakangan dan akan menimpanya. */
.crp-card:has(> .d-flex > .crp-ikon) .fs-4,
.crp-card:has(> .d-flex > .crp-ikon) .fs-5,
.crp-card:has(> .d-flex > .crp-ikon) .fw-semibold{color:#fff !important;}

/* DUA WARNA BOOTSTRAP YANG MEMANG TIDAK LAYAK DI ATAS PUTIH.
 *
 * `.text-warning` adalah #ffc107 — kuning itu hanya mencapai rasio ~1.9:1 di
 * atas kartu putih, jauh di bawah 4.5:1. Pada tangkapan layar pemilik,
 * "Rp 4.206.000" di kartu Belum lunas memang yang paling pudar di seluruh
 * halaman, dan itu bukan perasaan. `.text-secondary` senasib.
 *
 * Keduanya digelapkan SEPERLUNYA supaya tetap terbaca sebagai kuning dan abu,
 * bukan diganti warna lain. */
.crp-card .text-warning{color:#8a5a00 !important;}
.crp-card .text-secondary{color:#525c6b !important;}
[data-bs-theme="dark"] .crp-card .text-warning{color:#f5cd47 !important;}
[data-bs-theme="dark"] .crp-card .text-secondary{color:#9aa8ba !important;}

/* ------------------------------------------------------------- tabel */

/* Kepala tabel huruf kapital renggang berukuran .68rem — ukuran itu menuntut
   warna yang lebih gelap daripada teks biasa, bukan lebih terang. */
.crp-t th{color:#4b5563;font-weight:700;}
[data-bs-theme="dark"] .crp-t th{color:#9aa8ba;}
.crp-t td{color:var(--bs-body-color);}