/* =============== Sidebar Modern =============== */
.sidenav-modern{
  /* Theme tokens */
  --bg:#ffffff; --text:#0f172a; --muted:#6b7280; --line:#e5e7eb;
  --ring:#6366f1; --shadow:0 10px 30px rgba(2,6,23,.08);

  /* Layout tokens */
  --sidebar-w-expanded: 280px;
  --sidebar-w-rail: 72px;

  background:var(--bg);
  border-right:1px solid var(--line);
}
html[data-theme="dark"] .sidenav-modern{
  --bg:#0d1326; --text:#e5e7eb; --muted:#9aa3b2; --line:#1f2937;
  --ring:#8b9cfb; --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ---------- Items ---------- */
.sidenav-modern .nav{ gap:.25rem; }
.sidenav-modern .nav .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem; border-radius:12px;
  color:var(--muted); font-weight:600; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.sidenav-modern .nav .nav-link:hover{
  background:color-mix(in oklab, var(--ring) 10%, transparent);
  color:var(--text);
  border-color:color-mix(in oklab, var(--ring) 22%, var(--line));
}
.sidenav-modern .nav .nav-link.active,
.sidenav-modern .nav .nav-link[aria-current="page"]{
  background:linear-gradient(180deg, color-mix(in oklab, var(--ring) 22%, transparent), transparent 60%);
  border-color:color-mix(in oklab, var(--ring) 40%, var(--line));
  color:var(--text); box-shadow:var(--shadow);
}
.sidenav-modern .nav .nav-link .nav-icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in oklab, var(--ring) 6%, transparent); color:var(--ring);
}
.sidenav-modern .nav .nav-link .nav-text{ flex:1 1 auto; display:flex; align-items:center; min-width:0; }
.sidenav-modern .nav .nav-link .edit{ opacity:.35; transition:opacity .15s ease; }
.sidenav-modern .nav .nav-link:hover .edit{ opacity:1; }

/* ---------- Section headers ---------- */
.sidenav-modern .nav-section-title{
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:.75rem 0 .35rem; padding:0 .25rem;
  display:flex; align-items:center; gap:.45rem;
}
.sidenav-modern .nav-section-title .toggle{
  margin-left:auto; border:1px solid var(--line); border-radius:10px; width:28px; height:28px;
  display:grid; place-items:center; color:var(--muted); cursor:pointer;
}
.sidenav-modern .nav-section-title .toggle:hover{
  border-color:color-mix(in oklab,var(--ring) 46%, var(--line)); color:var(--text);
}

/* ---------- Collapsibles ---------- */
.sidenav-modern .section-body{ overflow:hidden; transition:grid-template-rows .25s ease; display:grid; grid-template-rows:1fr; }
.sidenav-modern .section-body.is-collapsed{ grid-template-rows:0fr; }
.sidenav-modern .section-body > div{ min-height:0; }

/* ---------- Show more ---------- */
.sidenav-modern .showmore{
  display:none; 
  margin:.25rem 0 .5rem;
  cursor:pointer; user-select:none;
  color:var(--muted); font-weight:600;
  border:1px dashed var(--line); border-radius:999px; padding:.35rem .6rem;
  width:max-content; pointer-events:auto;
}
.sidenav-modern .showmore:hover{ border-color:var(--ring); color:var(--text); }

/* ---------- Scrollbar ---------- */
.sidenav-modern.custom-scrollbar{ scrollbar-width:thin; }
.sidenav-modern.custom-scrollbar::-webkit-scrollbar{ width:8px; }
.sidenav-modern.custom-scrollbar::-webkit-scrollbar-thumb{
  background:color-mix(in oklab, var(--ring) 18%, var(--line)); border-radius:8px;
}

/* =============== Mobile Offcanvas =============== */
@media (max-width:767.98px){
  .nav-sidenav.sidenav-modern{
    position: fixed;
    inset: var(--header-h,56px) auto 0 0;
    height: calc(100dvh - var(--header-h,56px));
    width: min(84vw, 320px);
    z-index: 1051;
    transform: translateX(-105%);
    transition: transform .28s ease;
    box-shadow: var(--shadow);
    background: var(--bg);
    will-change: transform;
  }
  body.sidebar-open .nav-sidenav.sidenav-modern{ transform: translateX(0); }
  #sidebarOverlay{
    position: fixed; inset: var(--header-h,56px) 0 0 0;
    background: rgba(2,6,23,.35); backdrop-filter: blur(2px); z-index: 1050;
  }
}

/* =============== Desktop: Expanded vs Rail =============== */
@media (min-width:768px){
  .nav-sidenav.sidenav-modern{
    width: var(--sidebar-w-expanded);
    transition: width .22s ease;
  }
}
@media (min-width:768px){
  body.sidebar-rail .nav-sidenav.sidenav-modern{
    width: var(--sidebar-w-rail);
    padding-left:.5rem; padding-right:.5rem;
    border-right:1px solid var(--line);
  }
  body.sidebar-rail .nav-sidenav .nav .nav-link{
    justify-content:center; gap:0; padding:.5rem 0;
  }
  body.sidebar-rail .nav-sidenav .nav .nav-icon{ margin:0; }

  body.sidebar-rail .nav-sidenav .nav .nav-link .nav-text{ display:none !important; }
  body.sidebar-rail .nav-sidenav .nav-section-title > span,
  body.sidebar-rail .nav-sidenav .nav-section-title .toggle,
  body.sidebar-rail .nav-sidenav .showmore{
    display:none !important;
  }
  body.sidebar-rail .nav-sidenav .section-body{
    display:grid; grid-template-rows:1fr !important; overflow:hidden;
  }
}

/* Helper */
.rotate-180{ transform:rotate(180deg); transition:transform .25s ease; }