/* ===== Tata letak: topbar tetap, sidebar kiri (tersembunyi di desktop, muncul dari tepi kiri), footer sticky/fixed ===== */
:root { --tinggi-topbar: 60px; --lebar-sidebar: 250px; --tinggi-footer: 44px; }

body { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--tinggi-topbar); }

.topbar { height: var(--tinggi-topbar); background: var(--warna-header); color: var(--teks-header);
  box-shadow: 0 1px 4px rgba(0,0,0,.15); flex-wrap: nowrap; padding-top: env(safe-area-inset-top); }
.topbar .navbar-brand, .btn-topbar { color: var(--teks-header) !important; }
.btn-topbar { border: 0; }
.btn-topbar:hover { background: rgba(127,127,127,.2); }
.logo-app { height: 38px; width: 38px; object-fit: contain; border-radius: 8px; }

.sidebar { background: var(--warna-sidebar); color: var(--teks-sidebar); }
.sidebar .offcanvas-header { color: var(--teks-sidebar); }
.sidebar .btn-close { filter: var(--filter-close, invert(1)); }
.sidebar .nav-link { color: var(--teks-sidebar); opacity: .85; border-radius: .5rem; margin-bottom: 2px; padding: .6rem .8rem; }
.sidebar .nav-link:hover { opacity: 1; background: rgba(127,127,127,.18); }
.sidebar .nav-link.active { opacity: 1; background: var(--aksen); color: var(--teks-aksen); }
.menu-judul { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; padding: .9rem .8rem .3rem; }

@media (min-width: 992px) {
  /* offcanvas-lg Bootstrap membuat latar transparan di layar besar → paksa warna sidebar */
  .sidebar.offcanvas-lg { position: fixed; top: var(--tinggi-topbar); bottom: 0; left: 0; width: var(--lebar-sidebar);
    overflow-y: auto; background-color: var(--warna-sidebar) !important; z-index: 1010; }
  .konten:not(.tanpa-sidebar), .footer-app { margin-left: var(--lebar-sidebar); }
  body:has(.tanpa-sidebar) .footer-app { margin-left: 0; }
}
@media (max-width: 991.98px) {
  .sidebar.offcanvas-lg { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--warna-sidebar); }
}

/* ===== Desktop dengan mouse/trackpad: sidebar tersembunyi, muncul saat kursor menyentuh tepi kiri layar =====
   Aturan di atas (sidebar selalu tampil) tetap berlaku sebagai cadangan untuk layar sentuh yang lebar
   (mis. tablet landscape), karena di sana tidak ada kursor untuk memicu tepi layar. */
.sidebar-pemicu { display: none; }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  /* zona sempit di tepi kiri (di bawah topbar) + garis aksen sebagai petunjuk bahwa ada menu tersembunyi */
  .sidebar-pemicu { display: block; position: fixed; top: var(--tinggi-topbar); bottom: 0; left: 0; width: 12px; z-index: 1024; }
  .sidebar-pemicu::after { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 72px; margin-top: -36px;
    border-radius: 0 4px 4px 0; background: var(--aksen); opacity: .55; transition: opacity .2s; }
  body.sidebar-buka .sidebar-pemicu::after { opacity: 0; }

  /* z-index 1025: di atas footer fixed (1020) agar dasar sidebar tidak tertutup, di bawah topbar (1030) */
  .sidebar.offcanvas-lg { z-index: 1025; transform: translateX(-100%); transition: transform .2s ease; }
  body.sidebar-buka .sidebar.offcanvas-lg { transform: none; box-shadow: 4px 0 16px rgba(0,0,0,.25); }

  /* sidebar menimpa konten (tidak mendorongnya), jadi konten dan footer memakai lebar penuh */
  .konten:not(.tanpa-sidebar), .footer-app { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.offcanvas-lg, .sidebar-pemicu::after { transition: none; }
}

.konten { flex: 1 0 auto; }
.footer-app { background: var(--warna-footer); color: var(--teks-footer); text-align: center; font-size: .85rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
/* sticky: menempel di bawah layar bila konten pendek, ikut turun bila konten panjang */
.footer-sticky .footer-app { margin-top: auto; }
/* fixed: selalu terlihat di bawah layar */
.footer-fixed .footer-app { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1020; }
.footer-fixed .konten { padding-bottom: calc(var(--tinggi-footer) + 1rem); }

/* ===== Aksen primer & sekunder untuk komponen Bootstrap ===== */
.btn-primary { --bs-btn-bg: var(--aksen); --bs-btn-border-color: var(--aksen); --bs-btn-color: var(--teks-aksen);
  --bs-btn-hover-bg: color-mix(in srgb, var(--aksen) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--aksen) 85%, #000);
  --bs-btn-hover-color: var(--teks-aksen); --bs-btn-active-bg: color-mix(in srgb, var(--aksen) 75%, #000);
  --bs-btn-active-color: var(--teks-aksen); --bs-btn-disabled-bg: var(--aksen); --bs-btn-disabled-border-color: var(--aksen); }
.btn-outline-primary { --bs-btn-color: var(--aksen); --bs-btn-border-color: var(--aksen); --bs-btn-hover-bg: var(--aksen);
  --bs-btn-hover-border-color: var(--aksen); --bs-btn-hover-color: var(--teks-aksen); --bs-btn-active-bg: var(--aksen); }
.btn-secondary { --bs-btn-bg: var(--aksen2); --bs-btn-border-color: var(--aksen2); --bs-btn-color: var(--teks-aksen2);
  --bs-btn-hover-bg: color-mix(in srgb, var(--aksen2) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--aksen2) 85%, #000);
  --bs-btn-hover-color: var(--teks-aksen2); }
.form-control:focus, .form-select:focus { border-color: var(--aksen); box-shadow: 0 0 0 .2rem rgba(var(--aksen-rgb), .25); }
.form-check-input:checked { background-color: var(--aksen); border-color: var(--aksen); }
.nav-pills .nav-link:not(.active) { color: var(--aksen); }
.nav-pills .nav-link.active, .page-item.active .page-link { background-color: var(--aksen); border-color: var(--aksen); color: var(--teks-aksen); }
.badge-sekunder { background: var(--aksen2); color: var(--teks-aksen2); }

/* ===== Mode gelap/terang: tampilkan ikon yang sesuai ===== */
[data-bs-theme="dark"] .ikon-gelap, [data-bs-theme="light"] .ikon-terang { display: none; }

/* ===== Input password dengan ikon mata ===== */
.toggle-password svg { width: 1.15rem; height: 1.15rem; }

/* ===== Theme picker ===== */
.tema-opsi { cursor: pointer; border: 2px solid transparent; border-radius: .75rem; padding: .4rem; }
.tema-opsi:has(input:checked) { border-color: var(--aksen); }
.tema-swatch { display: flex; height: 36px; border-radius: .5rem; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127,127,127,.3); }
.tema-swatch span { flex: 1; }
.form-control-color { width: 100%; }

.card { border-radius: .75rem; }

/* ===== Khusus aplikasi ruang ujian ===== */
.table > thead > tr > th { white-space: nowrap; }
.kartu-statistik .angka { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kartu-statistik .bi { font-size: 1.6rem; opacity: .55; color: var(--aksen); }

/* tabel matriks (ruang × sesi): kolom pertama menempel saat digulir ke samping */
.matriks th:first-child, .matriks td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg); min-width: 150px; }
.matriks thead th:first-child { z-index: 2; }
.matriks td, .matriks th { min-width: 150px; }
.matriks td:first-child, .matriks th:first-child { box-shadow: 2px 0 0 rgba(127,127,127,.2); }

.thumb-denah { height: 64px; width: 96px; object-fit: cover; border-radius: .4rem; cursor: zoom-in; border: 1px solid rgba(127,127,127,.3); }
.tabel-aksi .btn { padding: .2rem .5rem; }
.baris-total > td { font-weight: 600; background: rgba(127,127,127,.12) !important; }