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

   Gaya aplikasinya sendiri tidak ditiru di sini. Halaman demo memuat
   `bootstrap.min.css` dan `cal.css` yang ASLI, disalin apa adanya dari
   `CAL-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-cal { display: block; }
.kulit-cal .cal-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 cal.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 — `.cal-side__nav{overflow:visible}` di ≥992px — dan bisa begitu
 * karena daftar utamanya cuma sembilan baris, muat tanpa perlu digulir.
 */
@media (min-width: 992px) {
  .kulit-cal .cal-side,
  .kulit-cal .cal-side__nav { overflow: visible; }
}
.kulit-cal .kanan { margin-left: var(--cal-side-w, 252px); min-height: calc(100vh - 52px); }
.kulit-cal .main { padding: 1.4rem; }

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

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

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

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

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

.kulit-cal .appbar .ikonbtn:hover { background: rgba(0, 0, 0, .05); }
.kulit-cal .appbar .aku .badge { background: var(--cal-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-cal .cal-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-cal .cal-side__link .kls + .cal-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-cal .cal-side__link.terkunci { opacity: .45; }
.kulit-cal .cal-side__link.terkunci:hover { opacity: .7; background: var(--cal-sidebar-2); }
.kulit-cal .cal-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.  */
.cal-todo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--cal-line);
  font-size: .88rem;
}

.cal-todo:last-child { border-bottom: 0; }
.cal-todo .badge { flex: none; font-size: .68rem; }
.cal-todo__teks { flex: 1; min-width: 0; }
.cal-todo__aksi { color: var(--cal-primary); font-size: .84rem; }
.cal-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 —
 * `cal.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 `cal.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-cal .cal-side { transform: translateX(-100%); transition: transform .2s; }
  .kulit-cal.side-buka .cal-side { transform: none; }
  .kulit-cal .kanan { margin-left: 0; }
}

/* ---------------------------------------------- empat layar khusus demo --
   Kelas berikut ada di aplikasi (Blade-nya sendiri) tetapi tidak ada di
   `cal.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. */
.cal-log {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--cal-line);
  font-size: .86rem;
}

.cal-log:last-child { border-bottom: 0; }
.cal-log--bahaya .cal-log__ik { color: var(--cal-bad); }
.cal-log__jam { flex: none; width: 9.5rem; color: var(--cal-primary); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cal-log__ik { flex: none; opacity: .6; }
.cal-log__teks { flex: 1; min-width: 0; }
.cal-log__teks--tautan { color: var(--cal-primary); }
.cal-log__aktor { flex: none; font-weight: 400; font-size: .7rem; opacity: .85; }
.cal-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. */
.cal-gen__hasil {
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--cal-primary);
  word-break: break-all;
}

@media (max-width: 767.98px) {
  .cal-log { flex-wrap: wrap; }
  .cal-log__jam { width: 100%; }
  .cal-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". */
.cal-merek__pv {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  background: var(--cal-sidebar);
  border-radius: 10px;
  margin-bottom: .5rem;
}

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

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

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