/* ============ SIDEBAR / NAVIGATION ============ */
aside{
  position:fixed;left:0;top:0;width:230px;height:100vh;
  background:linear-gradient(180deg,#17324d 0%,#112b42 100%);
  color:white;padding:25px 15px;overflow-y:auto;
  box-shadow:2px 0 14px rgba(23,50,77,.18);
}
aside h2{margin:0 0 4px;text-align:center}
aside small{display:block;text-align:center;opacity:.8;margin-bottom:25px}
aside button{
  display:block;width:100%;border:0;background:none;color:#e8f1ff;
  text-align:left;padding:13px;margin:4px 0;border-radius:10px;cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
aside button:hover{background:rgba(255,255,255,.10);transform:translateX(2px)}
aside button.active-nav{background:rgba(255,255,255,.14);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #9cc1ff}
.whoami{color:#e8f1ff;font-size:12px;text-align:center;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.18)}
/* ---- Hamburger toggle (mobile only) ---- */
.nav-toggle{
  display:none;position:fixed;top:14px;left:14px;z-index:40;
  width:44px;height:44px;border-radius:10px;border:0;
  background:#8B6F47;color:#fff;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25;
}

/* ---- Responsive: tablet (icon-only rail) ---- */
@media(max-width:900px){
  aside{width:70px}
  aside h2,aside small{display:none}
}

/* ---- Responsive: phone (off-canvas drawer) ---- */
@media(max-width:680px){
  aside{width:250px;transform:translateX(-100%)}
  aside h2,aside small{display:block}
  body.nav-open{overflow:hidden}
  body.nav-open aside{transform:translateX(0);z-index:30}
  body.nav-open .nav-backdrop{display:block}
  .nav-toggle{display:block}
}