/* ===========================================================================
   Thirty-one Partners — Top navigation (horizontal, Rocker-style)
   Loads LAST. Converts the base left-sidebar layout into a full-width top bar.
   Adjustments: compact 52px bar, menu items centered (logo pinned left),
   Account Manager collapsed into a right-aligned dropdown.
   Palette: violet/purple dark.
   =========================================================================== */

body:has(.topnav){ flex-direction:column !important; }

/* ---- Top bar shell ---- */
.topnav{
  position:sticky; top:0; left:0; width:100%; z-index:80;
  background:linear-gradient(180deg,#100c22,#0b0918);
  border-bottom:1px solid rgba(139,92,246,0.14);
  box-shadow:0 6px 26px rgba(0,0,0,.45), 0 1px 0 rgba(139,92,246,.06) inset;
  backdrop-filter:saturate(120%) blur(6px);
}
.tn-bar{
  display:flex; align-items:center; gap:14px;
  height:52px; padding:0 20px; max-width:1640px; margin:0 auto;
}

/* ---- Logo (pinned far left) ---- */
.topnav .side-logo{ height:auto; padding:0; flex-shrink:0; }
.topnav .side-logo img{ height:48px; }
.topnav .side-logo .bolt-only{ display:none; }

/* ---- Horizontal nav: centered in the remaining space ---- */
.topnav .nav{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:2px; flex:1; min-width:0; height:100%;
}
.topnav .nav-item{
  width:auto; height:34px; padding:0 12px; gap:8px;
  border-radius:9px; font-size:13px; white-space:nowrap;
}
.topnav .nav-item .ic svg{ width:17px; height:17px; }
.topnav .nav-item .lbl{ flex:0 0 auto; }
.topnav .nav-item .caret{ margin-left:2px; }
.topnav .nav-item .caret svg{ width:13px; height:13px; }
.topnav .nav-item.active::before{ display:none; }
.topnav .nav-item.active{
  background:linear-gradient(180deg,rgba(139,92,246,0.20),rgba(139,92,246,0.04));
  box-shadow:inset 0 -2px 0 0 #8b5cf6;
}
.topnav .nav-item.active .ic{ color:#a78bfa; }

/* ---- Dropdowns: open DOWNWARD under the trigger ---- */
.topnav .nav-group{ height:100%; display:flex; align-items:center; }
.topnav .flyout{
  left:0; top:calc(100% + 6px); right:auto;
  transform:translateY(-8px) scale(.98); transform-origin:top left;
  border:1px solid rgba(139,92,246,0.18);
  background:linear-gradient(160deg,#1c1533,#120e22);
  box-shadow:0 22px 60px rgba(0,0,0,.65);
}
.topnav .flyout::before{
  left:20px; top:-7px;
  border-left:1px solid rgba(139,92,246,0.18);
  border-bottom:none; border-top:1px solid rgba(139,92,246,0.18);
  background:#1c1533;
}
.topnav .nav-group:hover > .flyout,
.topnav .nav-group:focus-within > .flyout,
.topnav .nav-group.open > .flyout{
  opacity:1 !important; transform:translateY(0) scale(1) !important;
  pointer-events:auto !important; transition-delay:0s !important;
}
/* Reliable top-bar dropdowns. Three fixes, since the trigger is a 34px pill centered
   in a 52px bar and the flyout opens downward:
   1) shrink the gap so there's less dead space;
   2) the shared bridge (sp_4a4) covers the LEFT gap for the sidebar — here we need a
      WIDE bridge covering the vertical gap above the flyout;
   3) once opened by click, keep it open + interactive regardless of hover (the shared
      rule flips pointer-events:none the instant the cursor isn't over the group). */
.topnav .flyout{ top:calc(100% + 2px); }
.topnav .nav-group > .flyout::after{
  top:-26px; bottom:auto; left:-10px; right:-10px; width:auto; height:28px;
}
.topnav .nav-group.open > .flyout{
  opacity:1 !important; transform:translateY(0) scale(1) !important;
  pointer-events:auto !important; transition-delay:0s !important;
}

/* ---- Right cluster ---- */
.tn-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0; }

/* ---- Account Manager dropdown ---- */
.topnav .mgr-dd{ position:relative; height:100%; display:flex; align-items:center; }
.topnav .mgr-trigger{
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 10px; border-radius:9px;
  background:linear-gradient(160deg,#1a1330,#130f24);
  border:1px solid rgba(139,92,246,0.16);
  color:#cdbdff; cursor:pointer; font-family:inherit;
  transition:border-color .18s, background .18s;
}
.topnav .mgr-trigger:hover{ border-color:rgba(139,92,246,0.34); }
.topnav .mgr-trigger svg{ width:18px; height:18px; }
.topnav .mgr-trigger .caret{ display:flex; transition:transform .2s; }
.topnav .mgr-dd.open .mgr-trigger .caret{ transform:rotate(180deg); }
.topnav .mgr-dd.open .mgr-trigger{ border-color:rgba(139,92,246,0.40); background:rgba(139,92,246,0.12); }

.topnav .mgr-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:95;
  min-width:248px; padding:6px;
  border:1px solid rgba(139,92,246,0.18); border-radius:12px;
  background:linear-gradient(160deg,#1c1533,#120e22);
  box-shadow:0 22px 60px rgba(0,0,0,.65);
  opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98);
  transform-origin:top right; transition:opacity .18s, transform .18s;
}
.topnav .mgr-dd.open .mgr-panel{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.topnav .mgr-panel .mgr{
  display:flex; align-items:center; gap:11px; padding:10px 11px;
  background:none; border:none; border-radius:9px; max-width:none;
}
.topnav .mgr-panel .mgr .av{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1.5px solid rgba(139,92,246,.5);
  display:flex; align-items:center; justify-content:center; color:#a78bfa;
}
.topnav .mgr-panel .mgr .av img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.topnav .mgr-panel .mgr .tx{ min-width:0; flex:1; overflow:hidden; }
.topnav .mgr-panel .mgr .t1{ font-size:10px; color:rgba(214,208,240,.66); margin-bottom:1px; }
.topnav .mgr-panel .mgr .t2{ font-size:12.5px; font-weight:600; }
.topnav .mgr-panel .mgr .t3{ font-size:9.5px; color:#a78bfa; margin-top:1px; word-break:break-all; line-height:1.3; }

/* ---- Main fills full width below the bar ---- */
.main{ width:100% !important; margin-left:0 !important; }
.main .hamburger{ display:none !important; }

/* ---- Mobile burger (hidden on desktop) ---- */
.tn-burger{
  display:none; width:34px; height:30px; border-radius:9px;
  border:1px solid rgba(139,92,246,0.20); background:#15101f;
  color:#cdbdff; align-items:center; justify-content:center; cursor:pointer;
}

/* ===========================================================================
   Responsive: collapse the horizontal nav into a dropdown panel
   =========================================================================== */
@media (max-width:1100px){
  .tn-burger{ display:flex; }
  .topnav .nav{
    position:absolute; top:52px; left:0; right:0; z-index:95;
    flex:none; height:auto; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:3px;
    padding:12px 14px 16px;
    background:linear-gradient(180deg,#120e24,#0d0a1b);
    border-bottom:1px solid rgba(139,92,246,0.16);
    box-shadow:0 24px 50px rgba(0,0,0,.6);
    max-height:calc(100vh - 52px); overflow-y:auto;
    opacity:0; pointer-events:none; transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .topnav.open .nav{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .topnav .nav-item{ width:100%; height:auto; padding:11px 13px; }
  .topnav .nav-group{ height:auto; display:block; }
  .topnav .flyout{
    position:static; opacity:1; pointer-events:auto; transform:none;
    box-shadow:none; background:transparent; border:none;
    padding:2px 0 4px 14px; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .topnav .flyout::before{ display:none; }
  .topnav .nav-group.open > .flyout{ max-height:520px; }
}

@media (max-width:560px){
  .tn-bar{ padding:0 14px; height:50px; }
  .topnav .nav{ top:50px; }
  .topnav .side-logo img{ height:34px; }
  .topnav .mgr-panel{ min-width:220px; }
}