.row-spacer {
  flex: 1;
}

.topbar-page-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text-light);
}

#topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: 30;
}

.menu-circle,
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-circle:active,
.icon-btn:active {
  transform: scale(0.92);
  background: rgba(127, 127, 127, .12);
}


#backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 900;
}
#backdrop.show {
  opacity: 1;
  pointer-events: auto;
}


.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(280px, 84vw);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  transform: translateX(-105%);
  transition: transform .25s ease;
  z-index: 950;
  padding: 18px 16px 72px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 28px var(--shadow-color);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
}
.sidebar.open {
  transform: translateX(0);
}

.zone {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 6px;
}
.side-icon-brand {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.side-title {
  color: var(--text-light);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}

.divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 8px 0 10px;
  flex-shrink: 0;
}


.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 11px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  text-align: left;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.menu-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sidebar-settings-btn {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  color: var(--text-light);
}
.sidebar-settings-btn .menu-ic {
  width: 19px;
  height: 19px;
}
.menu button.active {
  background: var(--primary-tint-10);
  color: var(--text-light);
  box-shadow: inset 2px 0 0 var(--primary);
}
.menu button.active .menu-ic {
  color: var(--primary);
}
.menu a.nav-link-btn {
  display: block;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 11px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  transition: var(--transition);
}
.submenu a.nav-link-btn {
  margin-top: 2px;
  padding: 8px 10px 8px 40px;
  font-size: 13px;
}


.submenu {
  margin-left: 0;
  display: none;
}
.submenu.open {
  display: block;
}
.submenu button {
  margin-top: 2px;
  padding: 8px 10px 8px 40px;
  font-size: 13px;
  width: 100%;
}


.sidebar-footer {
  text-align: center;
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 20px;
}
.sidebar-footer-controls {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.autonomy-footer select {
  background: var(--bg-input);
  border: 1px solid var(--border-color-strong);
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 11px;
}

@media (hover: hover) and (pointer: fine) {
.menu-circle:hover,
.icon-btn:hover {
  background: rgba(127, 127, 127, .12);
}
.menu button:hover {
  background: rgba(127, 127, 127, .08);
}
.menu a.nav-link-btn:hover {
  background: rgba(127, 127, 127, .08);
}
}

/* Di layar lebar (desktop), sebelumnya sidebar TETAP jadi overlay
   fixed yang cuma nongol kalau tombol hamburger diklik -- gak ada
   navigasi yang kelihatan sama sekali secara default, mirip halaman
   kosong. Di atas breakpoint ini, sidebar jadi rail permanen di
   sebelah kiri (bukan overlay di atas konten) dan topbar tetap
   melebar penuh di atasnya lewat CSS Grid pada .container -- pola
   standar aplikasi desktop, bukan tampilan mobile yang diregangkan. */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "topbar topbar" "sidebar main";
    min-height: 100vh;
  }
  #topbar {
    grid-area: topbar;
  }
  #backdrop {
    display: none !important;
  }
  #hamburgerBtn,
  #topbarBackBtn {
    display: none !important;
  }
  .sidebar {
    grid-area: sidebar;
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    transform: none !important;
    box-shadow: none;
    z-index: 1;
  }
  .main {
    grid-area: main;
    min-width: 0;
  }
}