/* CoreNet SDM & Payroll (CSD) — tema: menu samping navy, aksen indigo. */
:root{
  --csd-primary:#4353c4; --csd-primary-d:#37459f; --csd-accent:#5b6ee0;
  --csd-sidebar:#212a5e; --csd-sidebar-2:#1a2250; --csd-sidebar-ink:#c9d0f5; --csd-sidebar-ink-mut:#8a93c9;
  --csd-bg:#f5f6fb; --csd-card:#ffffff; --csd-ok:#22b07d; --csd-warn:#e0a63b; --csd-bad:#dc5b57;
  --csd-radius:14px; --csd-side-w:250px;
}
[data-bs-theme="dark"]{
  --csd-bg:#0f1424; --csd-card:#171d33; --csd-sidebar:#10142a; --csd-sidebar-2:#0c1022;
  --bs-body-bg:#0f1424; --bs-body-color:#d6dcf2;
}
body{background:var(--csd-bg);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;}
.btn-primary{--bs-btn-bg:var(--csd-primary);--bs-btn-border-color:var(--csd-primary);--bs-btn-hover-bg:var(--csd-primary-d);--bs-btn-hover-border-color:var(--csd-primary-d);--bs-btn-active-bg:var(--csd-primary-d);}
.text-primary{color:var(--csd-primary)!important;}
a{color:var(--csd-primary);text-decoration:none;}
a:hover{color:var(--csd-primary-d);}

/* shell */
.csd-shell{display:flex;min-height:100vh;}
.csd-side{width:var(--csd-side-w);background:var(--csd-sidebar);color:var(--csd-sidebar-ink);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .2s;}
.csd-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;}
.csd-side__brand .bi{color:var(--csd-accent);font-size:1.4rem;}
.csd-side__brand small{font-weight:400;opacity:.6;font-size:.6rem;}
.csd-side__nav{overflow-y:auto;padding:.5rem .75rem 1.5rem;flex:1;}
.csd-side__label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--csd-sidebar-ink-mut);padding:1rem .75rem .4rem;}
.csd-side__link{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:10px;color:var(--csd-sidebar-ink);font-size:.92rem;font-weight:500;}
.csd-side__link .bi{font-size:1.1rem;width:1.3rem;text-align:center;opacity:.85;}
.csd-side__link:hover{background:var(--csd-sidebar-2);color:#fff;}
.csd-side__link.active{background:var(--csd-primary);color:#fff;box-shadow:0 4px 14px rgba(67,83,196,.4);}
.csd-side__link.active .bi{opacity:1;}
/* Kaki menu samping. Tanpa aturan ini `text-muted` Bootstrap memberinya abu
   gelap di atas latar biru gelap — terbaca sebagai teks yang hilang, bukan
   sebagai teks yang redup. Warnanya diambil dari tinta menu itu sendiri. */
.csd-side__foot{margin-top:auto;color:var(--csd-sidebar-ink-mut)!important;
  border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;line-height:1.5;}
.csd-side__foot .bi{opacity:.8;}
.csd-main{flex:1;margin-left:var(--csd-side-w);display:flex;flex-direction:column;min-width:0;}
.csd-top{height:64px;background:var(--csd-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"] .csd-top{border-color:rgba(255,255,255,.06);}
.csd-top__btn{border:0;background:transparent;color:inherit;width:40px;height:40px;border-radius:10px;font-size:1.15rem;position:relative;}
.csd-top__btn:hover{background:rgba(0,0,0,.05);}
[data-bs-theme="dark"] .csd-top__btn:hover{background:rgba(255,255,255,.06);}
.csd-top__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--csd-bad);color:#fff;font-size:.62rem;line-height:16px;font-weight:700;}
.csd-top__user{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;border-radius:10px;}
.csd-top__user img,.csd-top__ava{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--csd-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;}
.csd-content{padding:1.5rem;flex:1;}
.csd-page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem;}
.csd-page-head h1{font-size:1.5rem;font-weight:700;margin:0;}

/* cards / stats */
.csd-card{background:var(--csd-card);border:1px solid rgba(0,0,0,.05);border-radius:var(--csd-radius);}
[data-bs-theme="dark"] .csd-card{border-color:rgba(255,255,255,.06);}
.csd-stat{padding:1.25rem 1.35rem;border-radius:var(--csd-radius);color:#fff;position:relative;overflow:hidden;}
.csd-stat .bi{position:absolute;right:-6px;bottom:-10px;font-size:4.5rem;opacity:.18;}
.csd-stat__n{font-size:2rem;font-weight:700;line-height:1;}
.csd-stat__l{opacity:.9;font-size:.9rem;margin-top:.35rem;}
.csd-stat--primary{background:linear-gradient(135deg,#4353c4,#5b6ee0);}
.csd-stat--teal{background:linear-gradient(135deg,#1fa2a6,#28c3b8);}
.csd-stat--slate{background:linear-gradient(135deg,#4a5568,#2d3748);}
.csd-stat--rose{background:linear-gradient(135deg,#e05b57,#d6455f);}
.csd-badge-ok{color:var(--csd-ok);} .csd-badge-warn{color:var(--csd-warn);} .csd-badge-bad{color:var(--csd-bad);}

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

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

/* ---------- kelompok menu: panel melayang ke kanan ---------- */
/* Aplikasi ini punya 41 modul dan 37 entri menu. Menu vertikal yang memuat
   semuanya sepanjang tiga puluh tujuh baris — Pengaturan hanya tercapai dengan
   menggulung, dan pada layar 768px separuhnya tidak pernah terlihat sekali pun.

   Yang tampil di batang kiri sekarang delapan baris: Dashboard, enam kepala
   kelompok, dan dua tautan tunggal. Isinya muncul sebagai panel melayang di
   sebelah kanan saat kelompoknya disentuh atau diklik.

   Pola dan ukurannya diambil dari CAL (I02), yang sudah memakainya di tangan
   pembeli. */

.csd-side__grup{position:relative;}
.csd-side__grupbtn{
  display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .75rem;
  border:0;background:none;text-align:left;cursor:pointer;border-radius:10px;
  color:var(--csd-sidebar-ink);font-size:.92rem;font-weight:500;
}
.csd-side__grupbtn .bi{font-size:1.1rem;width:1.3rem;text-align:center;opacity:.85;}
.csd-side__grupbtn:hover{background:var(--csd-sidebar-2);color:#fff;}
.csd-side__grupbtn .csd-side__chev{
  margin-left:auto;width:auto;font-size:.7rem;opacity:.45;transition:transform .15s;
}
/* Kelompok yang memuat halaman terbuka ditandai — tanpa ini pemakai kehilangan
   tempatnya begitu panelnya menutup. */
.csd-side__grup.ada-aktif > .csd-side__grupbtn{background:var(--csd-sidebar-2);color:#fff;}
.csd-side__grup.ada-aktif > .csd-side__grupbtn::before{
  content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;
  border-radius:0 3px 3px 0;background:var(--csd-primary);
}
.csd-side__panel__judul{
  padding:.4rem .75rem .5rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--csd-sidebar-ink-mut);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:.25rem;
}

@media (min-width:992px){
  /* overflow WAJIB visible: panel melayang adalah anak yang diposisikan
     absolut, dan `overflow-y:auto` pada induknya akan memotongnya. Aman
     karena daftar utamanya kini hanya delapan baris. */
  .csd-side__nav{overflow:visible;}
  .csd-side__isi{
    position:absolute;left:calc(100% - .4rem);top:-.4rem;min-width:15.5rem;
    max-height:min(80vh,32rem);overflow-y:auto;display:none;
    padding:.4rem;border-radius:12px;background:var(--csd-sidebar);
    border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 44px rgba(0,0,0,.4);
    z-index:1060;
  }
  /* Dibuka oleh sentuhan tetikus MAUPUN klik: yang pertama cepat untuk
     penjelajahan, yang kedua perlu bagi papan sentuh dan papan ketik. */
  .csd-side__grup:hover > .csd-side__isi,
  .csd-side__grup.buka > .csd-side__isi{display:block;}
  .csd-side__grup:hover > .csd-side__grupbtn{background:var(--csd-sidebar-2);color:#fff;}
  .csd-side__grupbtn .csd-side__chev{transform:rotate(-90deg);}
}

@media (max-width:991.98px){
  /* Di layar sempit tidak ada ruang di sebelah kanan, jadi panelnya turun
     sebagai akordeon biasa. */
  .csd-side__isi{display:none;padding-left:.35rem;}
  .csd-side__grup.buka > .csd-side__isi{display:block;}
  .csd-side__grup.buka > .csd-side__grupbtn .csd-side__chev{transform:rotate(0);}
  .csd-side__grupbtn .csd-side__chev{transform:rotate(-90deg);}
  .csd-side__panel__judul{display:none;}
}