/* static/css/nav.css - shared Muster navigation shell
   Sidebar on desktop, top bar on mobile. Theme-matched to the app. */
:root{
  --nav-w: 240px;
  --nav-w-collapsed: 68px;
  --nav-bg: #0e141a;
  --nav-elev: #141b22;
  --nav-border: #1e2832;
  --nav-text: #e7edf3;
  --nav-dim: #6b7886;
  --nav-accent: #e8b04a;
}

body{ margin:0; }

#muster-nav{
  position: fixed; top:0; left:0; height:100vh; width: var(--nav-w);
  background: var(--nav-bg); border-right:1px solid var(--nav-border);
  display:flex; flex-direction:column; z-index:40;
  font-family:'Manrope', system-ui, sans-serif;
}

/* ---- Brand: amber logo tile + wordmark ---- */
#muster-nav .brand{
  display:flex; align-items:center; gap:11px; padding:18px 18px 12px;
}
#muster-nav .brand .logo{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#f2c869,#e3a234); color:#191103;
  font-family:'JetBrains Mono', monospace; font-weight:800; font-size:18px;
  box-shadow:0 2px 12px rgba(232,176,74,.22);
}
#muster-nav .brand .word{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:15px;
  letter-spacing:.30em; color:var(--nav-text);
}
#muster-nav .brand .beta-badge{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:9px;
  letter-spacing:.08em; text-decoration:none; padding:2px 6px; border-radius:5px;
  color:#191103; background:var(--nav-accent); align-self:center;
}

/* ---- Sections + links ---- */
#muster-nav .links{ flex:1 1 auto; padding:6px 12px 12px; overflow:visible; }
#muster-nav .navsec{
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--nav-dim); padding:16px 10px 7px;
}
#muster-nav .links > .navsec:first-child{ padding-top:8px; }

#muster-nav a.navlink{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:1px 0; border-radius:9px;
  color:var(--nav-text); text-decoration:none; font-size:14px; font-weight:600;
  cursor:pointer; transition:background .12s, color .12s;
}
#muster-nav a.navlink .ic{
  width:20px; height:20px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:var(--nav-dim); transition:color .12s;
}
#muster-nav a.navlink .lb{ flex:1 1 auto; }
#muster-nav a.navlink:hover{ background:rgba(255,255,255,.035); }
#muster-nav a.navlink:hover .ic{ color:var(--nav-text); }

/* active: warm-gradient pill, white label, amber icon, edge accent bar */
#muster-nav a.navlink.active{
  background:linear-gradient(90deg, rgba(232,176,74,.15), rgba(232,176,74,.02));
  color:#fff;
}
#muster-nav a.navlink.active .ic{ color:var(--nav-accent); }
#muster-nav a.navlink.active::before{
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0; background:var(--nav-accent);
}

/* count badge pill */
#muster-nav a.navlink .badge{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  background:rgba(214,90,74,.20); color:#ff9d8c; border:1px solid rgba(214,90,74,.42);
}

/* disabled (greyed, with a short reason) */
#muster-nav a.navlink.disabled{ opacity:.4; cursor:not-allowed; }
#muster-nav a.navlink .lk{ display:none; }
#muster-nav a.navlink.disabled .lk{
  display:inline; margin-left:auto; font-size:9px; font-family:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:.05em; color:var(--nav-dim);
}

/* ---- User card ---- */
#muster-nav .who{ padding:12px; }
#muster-nav .usercard{
  display:flex; align-items:center; gap:11px; padding:9px 10px;
  border:1px solid var(--nav-border); border-radius:13px; background:var(--nav-elev);
}
#muster-nav .usercard .avatar{
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#b2913f,#7e6326); color:#f3e7c6;
  font-family:'JetBrains Mono', monospace; font-weight:800; font-size:13px;
}
#muster-nav .usercard .uinfo{ flex:1 1 auto; min-width:0; }
#muster-nav .usercard .uname{
  font-weight:700; font-size:13px; color:var(--nav-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#muster-nav .usercard .urole{
  font-size:11px; color:var(--nav-dim); font-family:'JetBrains Mono', monospace;
  letter-spacing:.02em; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#muster-nav .usercard .signout{
  flex-shrink:0; background:none; border:none; color:var(--nav-dim); cursor:pointer;
  padding:5px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  transition:color .12s, background .12s;
}
#muster-nav .usercard .signout:hover{ color:var(--nav-accent); background:rgba(255,255,255,.05); }
#muster-nav .usercard .themetoggle{
  flex-shrink:0; background:none; border:none; color:var(--nav-dim); cursor:pointer;
  padding:5px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  transition:color .12s, background .12s;
}
#muster-nav .usercard .themetoggle:hover{ color:var(--nav-accent); background:rgba(255,255,255,.05); }
#muster-nav .usercard.guest .avatar{ background:#26323d; color:var(--nav-dim); }

/* mobile toggle button (hidden on desktop) */
#muster-nav-toggle{ display:none; }

/* ---- Collapse-to-rail toggle (desktop) ---- */
#muster-nav .navcollapse{
  display:flex; align-items:center; gap:12px; width:calc(100% - 24px);
  margin:0 12px 12px; padding:9px 12px; border:1px solid var(--nav-border);
  border-radius:9px; background:none; color:var(--nav-dim); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  transition:color .12s, background .12s;
}
#muster-nav .navcollapse:hover{ color:var(--nav-text); background:rgba(255,255,255,.04); }
#muster-nav .navcollapse .ic{ display:flex; align-items:center; transition:transform .16s ease; }
#muster-nav .navcollapse .lb{ flex:1 1 auto; text-align:left; }

/* ---- Desktop: reserve space for the sidebar; collapse to an icon rail ---- */
@media (min-width: 781px){
  body.has-nav{ padding-left: var(--nav-w); transition:padding-left .16s ease; }
  #muster-nav{ transition:width .16s ease; }

  body.nav-collapsed.has-nav{ padding-left: var(--nav-w-collapsed); }
  body.nav-collapsed #muster-nav{ width: var(--nav-w-collapsed); }
  /* hide text; show only icons */
  body.nav-collapsed #muster-nav .word,
  body.nav-collapsed #muster-nav .beta-badge,
  body.nav-collapsed #muster-nav .lb,
  body.nav-collapsed #muster-nav .navsec,
  body.nav-collapsed #muster-nav .uinfo,
  body.nav-collapsed #muster-nav .usercard .themetoggle,
  body.nav-collapsed #muster-nav .usercard .signout{ display:none; }
  /* the disabled-link reason (.lk) is shown by a .disabled-specific rule, so its
     collapse-hide must out-specify that one or the reason text bleeds past the rail */
  body.nav-collapsed #muster-nav a.navlink.disabled .lk{ display:none; }
  body.nav-collapsed #muster-nav .brand{ justify-content:center; padding:18px 0 12px; }
  body.nav-collapsed #muster-nav a.navlink{ justify-content:center; padding:10px 0; }
  body.nav-collapsed #muster-nav a.navlink.active::before{ display:none; }
  body.nav-collapsed #muster-nav .who{ padding:8px; }
  body.nav-collapsed #muster-nav .usercard{ justify-content:center; padding:8px; border:none; background:none; }
  body.nav-collapsed #muster-nav .navcollapse{ justify-content:center; width:46px; margin:0 auto 12px; padding:10px 0; }
  body.nav-collapsed #muster-nav .navcollapse .ic{ transform:rotate(180deg); }
  /* the count badge becomes a small dot on the icon */
  body.nav-collapsed #muster-nav a.navlink .badge{
    position:absolute; top:5px; right:9px; min-width:9px; width:9px; height:9px;
    padding:0; margin:0; font-size:0; border-radius:50%;
  }
}

/* ---- Mobile: nav becomes a top bar that expands ---- */
@media (max-width: 780px){
  #muster-nav{
    width:100%; height:auto; position:sticky; top:0; left:0;
    border-right:none; border-bottom:1px solid var(--nav-border);
  }
  #muster-nav .brand{ justify-content:space-between; padding:12px 16px; }
  #muster-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--nav-border); color:var(--nav-text);
    border-radius:8px; padding:6px 11px; font-size:16px; cursor:pointer; line-height:1;
  }
  #muster-nav .links{ display:none; padding:6px 12px 10px; border-top:1px solid var(--nav-border); }
  #muster-nav.open .links{ display:block; }
  #muster-nav .who{ display:none; }
  #muster-nav.open .who{ display:block; }
  #muster-nav .navcollapse{ display:none; }
  #muster-nav a.navlink.active::before{ display:none; }
  body.has-nav{ padding-left:0; }
}

/* Shared footer (injected by nav.js on every app page). In normal flow at the
   page end; the body's has-nav padding already offsets it past the sidebar. */
#muster-foot{
  margin-top:28px; padding:16px 22px 20px;
  border-top:1px solid var(--nav-border);
  color:var(--nav-dim); font-size:11px; line-height:1.5; text-align:center;
  font-family:'Manrope', system-ui, sans-serif;
}
#muster-foot .foot-ver{
  margin-top:5px; font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:.03em; opacity:.75;
}