.tms-sidebar {
  background: var(--tms-sidebar);
  width: 210px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  padding: 1rem 0.75rem 3rem;
}
.offcanvas.tms-sidebar { position: fixed; height: 100vh; }

.sidebar-brand { color:#fff; font-weight:500; padding: .5rem .5rem 1rem; font-size:1.05rem; }
.sidebar-brand i { color: var(--tms-primary); margin-right:.4rem; }

.tms-nav-label { color:#4A6A68; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding: .9rem .5rem .3rem; }

.tms-nav-item {
  display:flex; align-items:center; gap:.6rem;
  color:#8AABAA; text-decoration:none;
  padding:.55rem .6rem; border-radius:.4rem; font-size:.9rem;
  transition: background .15s, color .15s;
}
.tms-nav-item i { width:18px; text-align:center; }
.tms-nav-item:hover { background: rgba(255,255,255,.06); color:#fff; }
.tms-nav-item.active { background: var(--tms-primary); color:#fff; }
.tms-nav-item .badge { background: rgba(201,74,74,0.25); color:#F0A0A0; font-weight:400; }

.sidebar-footer { display:flex; align-items:center; gap:.6rem; padding:1rem .5rem 0; margin-top:1rem; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer-info { color:#fff; font-size:.8rem; line-height:1.3; }

.main-content { flex-grow: 1; min-width: 0; background: var(--tms-bg-page); padding-bottom: 70px; }

@media (min-width: 768px) {
  .logo-col { border-left: 1px solid var(--tms-border); }
}

/* Tablet: icon-only */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tms-sidebar { width: 56px; padding: 1rem .35rem; }
  .tms-sidebar .nav-label, .tms-sidebar .sidebar-footer-info, .tms-nav-label { display:none; }
  .tms-nav-item { justify-content:center; }
  .sidebar-footer { flex-direction: column; justify-content:center; gap:.5rem; padding-left:0; padding-right:0; }
}

/* Mobile: hide desktop sidebar, show bottom nav */
.bottom-nav { display:none; }
@media (max-width: 767.98px) {
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:1040;
    background:#fff; border-top:1px solid var(--tms-border); height:60px;
  }
  .bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; color:#8A9A99; text-decoration:none; font-size:.68rem; }
  .bottom-nav-item i { font-size:1.15rem; }
  .bottom-nav-item.active { color: var(--tms-primary); }
}

/* Safari iOS punya bug dengan position:sticky di dalam ancestor flexbox.
   Sidebar sudah disembunyikan di mobile, jadi wrapper tidak perlu flex lagi di breakpoint ini. */
@media (max-width: 767.98px) {
  #wrapper { display: block !important; }
  .main-content { width: 100%; }
}