/* ===== Tata letak: topbar tetap, sidebar 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); }
}

.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; }