/* Shared left navigation for Scripts + Academy.
   All selectors are namespaced .mfnav* so they never collide with
   Bootstrap (app.py) or the token-based academy.css. */

:root{
  --mfnav-w: 248px;
  --mfnav-bg: #171c30;
  --mfnav-bg-2: #12162a;
  --mfnav-line: rgba(255,255,255,.08);
  --mfnav-head: #7c88a6;
  --mfnav-ink: #c7d0e6;
  --mfnav-ink-dim: #9aa4c0;
  --mfnav-accent: #c4f23d;
  --mfnav-active-bg: rgba(196,242,61,.12);
  --mfnav-hover-bg: rgba(255,255,255,.06);
  --mfnav-topbar-h: 54px;
}

/* Content offset: applied to <body> only when logged in. */
body.mfnav-shell{ padding-left: var(--mfnav-w); }
body.mfnav-shell > *{ min-width: 0; }
/* Restore top breathing room the old top navbar used to provide (Scripts shell). */
#mfnav-main{ padding: 24px 24px 32px; }
body.mfnav-shell #mfnav-main{ max-width: 1280px; }

/* Skip link for keyboard users. */
.mfnav-skip{
  position:fixed; left:8px; top:-60px; z-index:1060;
  background:#fff; color:#111; padding:8px 14px; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); transition:top .15s;
}
.mfnav-skip:focus{ top:8px; }

/* ── Sidebar shell ─────────────────────────────────────────── */
.mfnav{
  position:fixed; inset:0 auto 0 0; width:var(--mfnav-w);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--mfnav-bg),var(--mfnav-bg-2));
  color:var(--mfnav-ink); z-index:1040;
  border-right:1px solid var(--mfnav-line);
  font:14px/1.4 -apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.mfnav-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 16px 14px; border-bottom:1px solid var(--mfnav-line);
}
.mfnav-logo{ flex:0 0 auto; display:block; line-height:0; }
.mfnav-logo img{ height:26px; display:block; }
.mfnav-tenant{
  flex:1 1 auto; min-width:0;
  font-weight:700; font-size:.98rem; color:#fff;
  overflow-wrap:anywhere; line-height:1.25;
}
.mfnav-close{
  display:none; flex:0 0 auto; width:34px; height:34px;
  background:transparent; border:none; color:var(--mfnav-ink);
  border-radius:8px; align-items:center; justify-content:center;
}
.mfnav-close:hover{ background:var(--mfnav-hover-bg); }

.mfnav-scroll{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding:10px 10px 14px; scrollbar-width:thin;
}

.mfnav-group{ margin:6px 0 12px; }
.mfnav-h{
  margin:8px 8px 4px; padding:0;
  font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mfnav-head);
}

.mfnav-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:1px 0; border-radius:9px;
  color:var(--mfnav-ink); text-decoration:none;
  border-left:3px solid transparent; white-space:normal;
}
.mfnav-link:hover{ background:var(--mfnav-hover-bg); color:#fff; }
.mfnav-link:focus-visible{ outline:2px solid var(--mfnav-accent); outline-offset:1px; }
.mfnav-link.is-active{
  background:var(--mfnav-active-bg); color:#fff;
  border-left-color:var(--mfnav-accent); font-weight:600;
}
.mfnav-link .mfnav-ic{ flex:0 0 auto; width:18px; height:18px; color:var(--mfnav-ink-dim); }
.mfnav-link.is-active .mfnav-ic,
.mfnav-link:hover .mfnav-ic{ color:var(--mfnav-accent); }
.mfnav-link span{ min-width:0; }

/* ── Footer identity ───────────────────────────────────────── */
.mfnav-foot{
  flex:0 0 auto; padding:12px 14px 16px;
  border-top:1px solid var(--mfnav-line);
}
.mfnav-user{
  display:block; font-weight:600; color:#fff;
  margin-bottom:8px; overflow-wrap:anywhere;
}
.mfnav-foot-links{ display:flex; flex-wrap:wrap; gap:8px; }
.mfnav-foot-links a{
  color:var(--mfnav-ink-dim); text-decoration:none; font-size:.85rem;
}
.mfnav-foot-links a:hover{ color:#fff; text-decoration:underline; }
.mfnav-foot-links .mfnav-exit{ color:#e88; }
.mfnav-foot-links .mfnav-exit:hover{ color:#f7a; }

/* ── Mobile top bar + drawer ───────────────────────────────── */
.mfnav-topbar{
  display:none; align-items:center; gap:12px;
  position:fixed; inset:0 0 auto 0; height:var(--mfnav-topbar-h);
  padding:0 14px; z-index:1030;
  background:var(--mfnav-bg-2); color:#fff;
  border-bottom:1px solid var(--mfnav-line);
}
.mfnav-burger{
  flex:0 0 auto; width:40px; height:40px;
  background:transparent; border:1px solid var(--mfnav-line);
  border-radius:9px; color:#fff; display:flex;
  align-items:center; justify-content:center;
}
.mfnav-burger:focus-visible{ outline:2px solid var(--mfnav-accent); }
.mfnav-topbar-brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.mfnav-topbar-brand img{ height:22px; display:block; }
.mfnav-topbar-brand span{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mfnav-overlay{
  display:none; position:fixed; inset:0; z-index:1039;
  background:rgba(8,10,20,.55);
}

@media (max-width:900px){
  body.mfnav-shell{ padding-left:0; padding-top:var(--mfnav-topbar-h); }
  .mfnav-topbar{ display:flex; }
  .mfnav{
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:2px 0 24px rgba(0,0,0,.4);
    width:min(86vw,300px);
  }
  .mfnav-close{ display:flex; }
  .mfnav.is-open{ transform:translateX(0); }
  .mfnav-overlay.is-open{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  .mfnav{ transition:none; }
}

@media(max-width:900px){body.mfnav-drawer-open{overflow:hidden}}
.mfnav-head{flex-wrap:wrap}.mfnav-tenant{flex-basis:100%;font-size:13px;color:#bcc6d9}.mfnav-close{position:absolute;right:10px;top:12px}
.mfnav-logo img{max-width:180px;object-fit:contain}

.mfnav-shell .ac-top{background:#fff;color:#172033;padding:20px 24px 12px;flex-wrap:wrap}
.mfnav-shell .ac-role{color:#657184}
.mfnav-shell .ac-tabs{background:#fff;padding:0 16px 12px;border-bottom:1px solid #e2e7ee;gap:4px}
.mfnav-shell .ac-tab{color:#526074;border-radius:8px;font-size:14px;padding:9px 12px}
.mfnav-shell .ac-tab[aria-selected="true"]{background:#e9f0ed;color:#204c3e}