/* ============================================================================
   Kulit CSD untuk demo — HANYA yang khusus demo.
   ============================================================================

   Gaya aplikasinya sendiri tidak ditiru di sini. Halaman demo memuat
   `bootstrap.min.css` dan `csd.css` yang ASLI, disalin apa adanya dari
   `CSD-LAB/public/assets/css/`. Konsekuensinya penting: tampilan demo tidak
   dapat menyimpang dari aplikasi tanpa ada yang menyadarinya, karena keduanya
   membaca aturan yang sama persis.

   Yang tersisa di berkas ini hanya tiga hal yang memang tidak ada di aplikasi,
   dan tidak boleh ada di sana:

     1. lencana paket di tiap menu (BASIC / STANDARD / PRO / ENTERPRISE);
     2. keadaan terkunci untuk fitur di luar paket yang sedang dilihat;
     3. penyesuaian kecil karena demo hidup di dalam halaman portal, bukan
        di dalam kerangka aplikasi.
   ========================================================================= */

/* Bilah demo dikembalikan ke ukuran portal.
 *
 * Bootstrap dimuat SETELAH publik.css, dan ia menyetel ulang `body` ke 16px
 * beserta tumpukan fontnya sendiri. Untuk kerangka aplikasi itu justru benar —
 * aplikasi aslinya memang 16px. Yang tidak benar adalah bilah demo di atasnya:
 * ia milik portal, dan portal memakai 15px. Tanpa aturan ini seluruh bilah
 * ikut membesar, dan halaman terasa "ter-zoom" tanpa ada yang mengubah zoom.
 */
.demo-bar {
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

.demo-bar .btn,
.demo-bar select,
.demo-bar label { font-family: inherit; }

/* Kerangka. Aplikasi memakai `min-height:100vh`; di demo tingginya dibatasi
   bilah demo di atasnya, jadi tingginya dihitung dari sisa layar. */
.shell.kulit-csd { display: block; }
.kulit-csd .csd-side { position: fixed; top: 52px; bottom: 0; }

/* Sidebar TIDAK boleh menggunting isinya.
 *
 * Panel menu aplikasi adalah anak yang diposisikan absolut di SEBELAH KANAN
 * sidebar (`left: calc(100% - .4rem)` di csd.css). Kelas `.side` milik portal
 * menyetel `overflow-y: auto` — masuk akal untuk daftar rata yang panjang,
 * fatal di sini: panelnya terpotong menjadi sepotong tipis selebar sisa
 * sidebar, dan menu terlihat "tidak keluar".
 *
 * Gejalanya menyesatkan karena panelnya SEBENARNYA terbuka; yang hilang hanya
 * bagian yang menyembul keluar. Aplikasi sendiri menyelesaikannya dengan cara
 * yang sama — `.csd-side__nav{overflow:visible}` di ≥992px — dan bisa begitu
 * karena daftar utamanya cuma sembilan baris, muat tanpa perlu digulir.
 */
@media (min-width: 992px) {
  .kulit-csd .csd-side,
  .kulit-csd .csd-side__nav { overflow: visible; }
}
.kulit-csd .kanan { margin-left: var(--csd-side-w, 252px); min-height: calc(100vh - 52px); }
.kulit-csd .main { padding: 1.4rem; }

/* Bilah atas demo memakai kelas `.appbar` milik portal; disamakan dengan
   `.csd-top` aplikasi. */
.kulit-csd .appbar {
  height: 62px;
  background: var(--csd-card);
  border-bottom: 1px solid var(--csd-line);
  gap: .4rem;
  padding: 0 1.1rem;
  position: sticky;
  top: 52px;
  z-index: 1030;
}

.kulit-csd .appbar .cari { flex: 1; max-width: 560px; position: relative; }

.kulit-csd .appbar .cari input {
  border-radius: 10px;
  padding-left: 2.2rem;
  background: var(--csd-bg);
  border: 1px solid transparent;
  height: 38px;
  width: 100%;
}

.kulit-csd .appbar .cari input:focus { background: var(--csd-card); border-color: var(--csd-primary); outline: 0; }
.kulit-csd .appbar .cari .ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); opacity: .5; }
.kulit-csd .appbar .cari kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .65rem; opacity: .45; }

.kulit-csd .appbar .ikonbtn {
  width: 38px; height: 38px; border-radius: 10px; border: 0;
  background: transparent; font-size: 1.1rem;
}

.kulit-csd .appbar .ikonbtn:hover { background: rgba(0, 0, 0, .05); }
.kulit-csd .appbar .aku .badge { background: var(--csd-primary); color: #fff; }

/* ------------------------------------------------------- khusus demo (1) --
   Lencana paket. Satu-satunya elemen yang sengaja BERBEDA dari aplikasi:
   tanpa ini calon pembeli tidak dapat melihat batas paket sama sekali, dan
   itulah pertanyaan yang membawanya ke halaman demo.                       */
.kulit-csd .csd-side__link .kls {
  margin-left: auto;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .38rem;
  border-radius: 5px;
  color: #fff;
  opacity: .9;
  flex: none;
}

.kulit-csd .csd-side__link .kls + .csd-side__n { margin-left: .4rem; }

/* ------------------------------------------------------- khusus demo (2) --
   Fitur di luar paket. Diredupkan, BUKAN disembunyikan: yang tidak terlihat
   tidak dapat menjadi alasan naik paket.                                    */
.kulit-csd .csd-side__link.terkunci { opacity: .45; }
.kulit-csd .csd-side__link.terkunci:hover { opacity: .7; background: var(--csd-sidebar-2); }
.kulit-csd .csd-stat.terkunci { opacity: .5; }

/* ------------------------------------------------------- khusus demo (3) --
   Baris "perlu dibereskan". Aplikasi menyusunnya di Blade-nya sendiri; di
   demo ia digambar JavaScript, jadi kelasnya perlu didefinisikan di sini.  */
.csd-todo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--csd-line);
  font-size: .88rem;
}

.csd-todo:last-child { border-bottom: 0; }
.csd-todo .badge { flex: none; font-size: .68rem; }
.csd-todo__teks { flex: 1; min-width: 0; }
.csd-todo__aksi { color: var(--csd-primary); font-size: .84rem; }
.csd-todo__aksi:hover { text-decoration: underline; }

/* Kelompok sidebar TIDAK disetel di sini.
 *
 * Percobaan pertama menggantinya menjadi akordeon, dengan alasan yang terdengar
 * masuk akal: pengunjung demo sedang membandingkan paket, jadi biarkan seluruh
 * isinya terbuka sekaligus. Hasilnya justru dua aturan yang saling melawan —
 * `csd.css` memposisikan panelnya absolut di sebelah kanan, aturan tambahan
 * memaksanya tampil di bawah — dan panelnya menyembul di tepi sidebar sambil
 * memunculkan gulir mendatar.
 *
 * Yang benar adalah membiarkannya: aplikasi memakai panel melayang di layar
 * ≥992px dan akordeon di bawah itu, keduanya sudah tertulis di `csd.css`.
 * Lencana paket tetap terbaca di dalam panel melayang, jadi tidak ada yang
 * hilang — dan demo mewarisi perilaku aplikasi secara cuma-cuma, termasuk
 * perubahan yang belum dibuat hari ini.
 */

@media (max-width: 1023px) {
  .kulit-csd .csd-side { transform: translateX(-100%); transition: transform .2s; }
  .kulit-csd.side-buka .csd-side { transform: none; }
  .kulit-csd .kanan { margin-left: 0; }
}

/* ---------------------------------------------- empat layar khusus demo --
   Kelas berikut ada di aplikasi (Blade-nya sendiri) tetapi tidak ada di
   `csd.css`, karena di sana ia ditulis langsung di halamannya. Di demo semua
   digambar JavaScript, jadi definisinya perlu berdiri di sini.             */

/* Jejak audit — satu peristiwa per baris. */
.csd-log {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--csd-line);
  font-size: .86rem;
}

.csd-log:last-child { border-bottom: 0; }
.csd-log--bahaya .csd-log__ik { color: var(--csd-bad); }
.csd-log__jam { flex: none; width: 9.5rem; color: var(--csd-primary); font-size: .8rem; font-variant-numeric: tabular-nums; }
.csd-log__ik { flex: none; opacity: .6; }
.csd-log__teks { flex: 1; min-width: 0; }
.csd-log__teks--tautan { color: var(--csd-primary); }
.csd-log__aktor { flex: none; font-weight: 400; font-size: .7rem; opacity: .85; }
.csd-log__aksi {
  flex: none; width: 8.5rem; text-align: right;
  font-size: .7rem; letter-spacing: .04em; opacity: .55; font-family: ui-monospace, Consolas, monospace;
}

/* Password generator — hasilnya harus terbaca huruf per huruf. */
.csd-gen__hasil {
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--csd-primary);
  word-break: break-all;
}

@media (max-width: 767.98px) {
  .csd-log { flex-wrap: wrap; }
  .csd-log__jam { width: 100%; }
  .csd-log__aksi { width: auto; }
}

/* Identitas & Logo — pratinjau kepala menu.
   Warnanya mengambil warna sidebar aplikasi supaya yang dilihat pembeli benar-
   benar rupa akhirnya, bukan kotak abu-abu yang "kira-kira begitu". */
.csd-merek__pv {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  background: var(--csd-sidebar);
  border-radius: 10px;
  margin-bottom: .5rem;
}

.csd-merek__logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: var(--csd-primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .78rem;
}

.csd-merek__b1 { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.csd-merek__b2 {
  color: var(--csd-sidebar-ink-mut);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .15rem;
}

.csd-merek__berkas {
  width: 46px; height: 46px; flex: none;
  border-radius: 10px;
  background: var(--csd-bg);
  border: 1px solid var(--csd-line);
  display: grid; place-items: center;
  font-size: 1.3rem; opacity: .55;
}

/* ============================================================================
   JEMBATAN NAMA — kelas yang dikeluarkan penggambar demo tetapi dinamai
   berbeda di aplikasi, atau memang tidak ada di sana.
   ============================================================================

   Penggambar demo satu untuk CAL dan CSD; keduanya memakai struktur kelas yang
   sama karena menu samping CSD memang diturunkan dari CAL. Yang berbeda hanya
   beberapa nama, dan di situlah berkas ini bekerja — BUKAN dengan menyalin
   gaya aplikasi, melainkan dengan menautkan nama.
   ========================================================================= */

/* `--csd-line` tidak ada di csd.css: aplikasi menulis warna garisnya langsung
   sebagai rgba. Demo membutuhkannya sebagai variabel, jadi didefinisikan di
   sini dengan nilai yang sama. */
.kulit-csd { --csd-line: rgba(0, 0, 0, .06); }
[data-bs-theme="dark"] .kulit-csd { --csd-line: rgba(255, 255, 255, .06); }

/* Kepala halaman. Aplikasi menamainya `csd-page-head`; penggambar demo
   mengeluarkan `csd-head`. Ditautkan, bukan digambar ulang. */
.kulit-csd .csd-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem;
}
.kulit-csd .csd-head h1, .kulit-csd .csd-head h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* Petak angka. Aplikasi memakai `__n` dan `__l`; penggambar demo mengeluarkan
   `__value` dan `__label`. Keduanya dilayani supaya berkas ini tetap benar
   bila salah satu penamaan kelak menang. */
.kulit-csd .csd-stat__value, .kulit-csd .csd-stat__n { font-size: 2rem; font-weight: 700; line-height: 1; }
.kulit-csd .csd-stat__label, .kulit-csd .csd-stat__l { opacity: .9; font-size: .9rem; margin-top: .35rem; }
.kulit-csd .csd-stat__i { position: absolute; right: -6px; bottom: -10px; font-size: 4.5rem; opacity: .18; }

/* Sekat di dalam kartu. Dipakai halaman Pengaturan dan Update di aplikasi,
   tetapi belum punya aturan di csd.css — jadi ditetapkan di sini agar demo
   tidak menampilkan kartu tanpa jarak sama sekali. */
.kulit-csd .csd-form-sec { padding: 1rem 1.15rem; border-bottom: 1px solid var(--csd-line); }
.kulit-csd .csd-form-sec:last-child { border-bottom: 0; }
.kulit-csd .csd-form-sec h6 { font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-bottom: .6rem; }

/* Jejak audit dan daftar tugas — digambar JavaScript di demo, jadi kelasnya
   memang tidak ada di aplikasi. */
.csd-log { display: flex; align-items: baseline; gap: .6rem; padding: .5rem 0;
  border-bottom: 1px solid var(--csd-line); font-size: .86rem; }
.csd-log:last-child { border-bottom: 0; }
.csd-log__jam { flex: none; color: var(--csd-sidebar-ink-mut, #8a93c9); font-size: .78rem; }
.csd-log__teks { flex: 1; min-width: 0; }
.csd-log__aksi { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .65; }

.csd-toc__link { display: block; padding: .3rem 0; font-size: .88rem; color: var(--csd-primary); }
.csd-toc__link:hover { text-decoration: underline; }

.csd-gen__hasil { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .04em; word-break: break-all; }

/* Pratinjau merek di halaman Pengaturan. */
.csd-merek__logo { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.csd-merek__pv { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem;
  border-radius: 10px; background: var(--csd-sidebar); color: #fff; }
.csd-merek__b1 { font-weight: 700; font-size: .95rem; }
.csd-merek__b2 { font-size: .7rem; opacity: .65; }
.csd-merek__berkas { font-size: .78rem; opacity: .7; }

/* Petak angka tanpa `nada`.
 *
 * `csd.css` memberi `.csd-stat` teks putih dan mengandalkan salah satu varian
 * (`--primary`, `--teal`, `--slate`, `--rose`) untuk latarnya. Manifest boleh
 * saja tidak menyebut nada — dan bila begitu, hasilnya putih di atas putih:
 * angkanya ada, tetapi tidak terbaca sama sekali.
 *
 * Varian bawaan diberikan di sini supaya kartu tanpa nada tetap terbaca, dan
 * dua nada demo (`warn`, `bad`) dipetakan ke warna aplikasi yang setara.
 */
.kulit-csd .csd-stat {
  display: block;
  background: linear-gradient(135deg, var(--csd-primary), var(--csd-accent));
}
.kulit-csd .csd-stat:hover { filter: brightness(1.06); }
.kulit-csd .csd-stat--warn { background: linear-gradient(135deg, #d99a2b, var(--csd-warn)); }
.kulit-csd .csd-stat--bad  { background: linear-gradient(135deg, #c94a46, var(--csd-bad)); }
.kulit-csd .csd-stat--ok   { background: linear-gradient(135deg, #1a9e6f, var(--csd-ok)); }