/* ===== Tata letak ===== */
: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) {
  .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; min-width: 0; }
.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)); }
.footer-sticky .footer-app { margin-top: auto; }
.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 ===== */
.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); }
[data-bs-theme="dark"] .ikon-gelap, [data-bs-theme="light"] .ikon-terang { display: none; }
.toggle-password svg { width: 1.15rem; height: 1.15rem; }
.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; }
.stat-angka { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }

/* ===== Matriks jadwal ===== */
.mtx-wrap { overflow: auto; max-height: calc(100vh - 190px); border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.mtx { border-collapse: separate; border-spacing: 0; font-size: .78rem; text-align: center; width: max-content; min-width: 100%; }
.mtx th, .mtx td { border-right: 1px solid #889; border-bottom: 1px solid #889; padding: 2px 4px; min-width: 38px; height: 26px; white-space: nowrap; }
.mtx thead th { position: sticky; background: #c3d1dc; color: #111; font-weight: 700; z-index: 3; }
.mtx thead tr:first-child th { top: 0; }
.mtx thead tr.baris2 th { top: 27px; }
.mtx .c-hr { position: sticky; left: 0; z-index: 2; background: #c3d1dc; color: #111; width: 34px; min-width: 34px; font-weight: 700; }
.mtx thead .c-hr { z-index: 5; }
.mtx .c-hr span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .15em; }
.mtx .c-waktu { position: sticky; left: 34px; z-index: 2; background: #e6edf2; color: #111; min-width: 90px; }
.mtx .c-jam { position: sticky; left: 124px; z-index: 2; background: #e6edf2; color: #111; min-width: 34px; font-weight: 600; }
.mtx thead .c-waktu, .mtx thead .c-jam { z-index: 5; background: #c3d1dc; }
.mtx .awal, .mtx th.awal { border-left: 2px solid #334; }
.mtx tr.akhir-hari td, .mtx tr.akhir-hari th { border-bottom: 2px solid #334; }
.mtx td.sel { background: #d5e0e8; color: #111; cursor: default; font-weight: 500; }
.mtx td.sel.kosong { background: #fff; }
.mtx.warna-mapel td.sel[style] { background: var(--mp); }
.mtx td.ist { background: #a7bcc8; color: #111; font-size: .7rem; }
.mtx td.keg { color: #111; font-weight: 700; }
.mtx td.sel.sorot { background: #00ffff !important; font-weight: 700; }
.mtx td.sel.konflik { background: #ff9aa2 !important; }
.mtx td.sel.terkunci { box-shadow: inset 0 0 0 2px #d97706; }
.mtx.edit td.sel { cursor: pointer; }
.mtx.edit td.sel:hover { outline: 2px solid var(--aksen); outline-offset: -2px; }
.mtx td.sel.dipilih { outline: 3px solid var(--aksen2); outline-offset: -3px; }
.legenda-guru { columns: 3 220px; font-size: .82rem; }
.kd { display: inline-block; min-width: 2.2em; font-weight: 700; }
.panel-guru { font-size: .85rem; }