/* === SLMMmedia Sidebar Navigation (Slim + Collapse) === */
:root{ --sb-w: 200px; --sb-w-collapsed: 72px; --sb-gap: 16px; --topbar-h: 52px; }

/* Desktop sidebar (push content) */
.sidebar{
  position: fixed;
  top: var(--topbar-h);
  left: 0; bottom: 0;
  width: var(--sb-w);
  z-index: 1020;
  background: rgba(17,19,25,0.65);
  border-right: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color:#e9eef6;
  transition: width .25s ease;
}
.sidebar-inner{ padding: .75rem; height: 100%; display:flex; flex-direction: column; gap: .6rem; }
.brand-line{ font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem; position:relative; }
.brand-line .sb-toggle{
  position:absolute; right:.25rem; top:50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 8px;
  border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
  color:#e9eef6;
}
.brand-line .sb-toggle:hover{ background: rgba(255,255,255,.12); }
.brand-line .sb-toggle i{ transition: transform .25s ease; }

.nav-list{ display:flex; flex-direction: column; gap:.2rem; margin-top:.25rem; }
.nav-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .55rem; border-radius: 10px;
  color:#e9eef6; text-decoration:none;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.nav-item i{ font-size:1.05rem; opacity:.9; width:22px; text-align:center; }
.nav-item:hover{ background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-item.active{ background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(14,165,233,.22)); border: 1px solid rgba(255,255,255,.15); }

/* Push main content & footer when sidebar is present */
@media (min-width: 992px){
  body.has-sidebar main,
  body.has-sidebar footer{
    margin-left: calc(var(--sb-w) + var(--sb-gap));
    transition: margin-left .25s ease;
  }
  body.has-sidebar.sidebar-collapsed main,
  body.has-sidebar.sidebar-collapsed footer{
    margin-left: calc(var(--sb-w-collapsed) + var(--sb-gap));
  }
}

/* Collapsed state (icon-only) */
body.sidebar-collapsed .sidebar{ width: var(--sb-w-collapsed); }
body.sidebar-collapsed .sidebar .brand-line span{ display:none; }
body.sidebar-collapsed .sidebar .sb-toggle i{ transform: rotate(180deg); }
body.sidebar-collapsed .sidebar .nav-item span{ display:none; }
body.sidebar-collapsed .sidebar .nav-item{ justify-content: center; gap:0; }

/* Mobile subnav (no overlay, horizontally scrollable) */
.subnav{
  position: sticky;
  top: var(--topbar-h);
  z-index: 1010;
  background: rgba(17,19,25,0.75);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.subnav-inner{
  display:flex; gap:.25rem; overflow-x: auto;
  padding: .35rem .5rem;
}
.subnav-link{
  display:inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 38px;
  color:#e9eef6; text-decoration:none;
  border-radius: .65rem; border: 1px solid transparent;
  transition: background .2s ease;
}
.subnav-link:hover{ background: rgba(255,255,255,.08); }
.subnav-link.active{ border-color: rgba(255,255,255,.15); background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(14,165,233,.22)); }