/*
 * Player sidebar presentation. Shares the row proportions and section chrome with
 * /admin/admin-nav.css so both sides of the app read as one product.
 *
 * app.css defines `.nav button` at (0,1,1). Everything here is anchored on #nav,
 * giving (1,x,y), so it wins without needing !important.
 */

#nav.nav-sectioned{
  --nav-row:46px;
  --nav-icon:22px;
  display:grid;
  gap:2px;
  align-content:start;
  min-width:0;
}

/* ---- sections -------------------------------------------------------- */

#nav .nav-section{
  --nav-section-accent:var(--ct-accent,#36dcff);
  border:0;
  margin:0;
}
#nav .nav-section[data-nav-section="Collection"]{--nav-section-accent:#43e3b1}
#nav .nav-section[data-nav-section="Social"]{--nav-section-accent:#38d8f3}
#nav .nav-section[data-nav-section="Tools"]{--nav-section-accent:#ffb72e}
#nav .nav-section[data-nav-section="Account"]{--nav-section-accent:#a978ff}
#nav .nav-section[data-nav-section="More"]{--nav-section-accent:#ff77a8}
#nav .nav-section + .nav-section{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb,var(--ct-border,rgba(255,255,255,.1)) 55%,transparent);
}

#nav .nav-section-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:30px;
  padding:6px 12px 4px;
  border:1px solid color-mix(in srgb,var(--nav-section-accent) 34%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--nav-section-accent) 21%,transparent),color-mix(in srgb,var(--nav-section-accent) 8%,transparent));
  color:color-mix(in srgb,var(--nav-section-accent) 88%,#fff);
  font-size:var(--type-3xs,.625rem);
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
  user-select:none;
  border-radius:var(--radius-control,7px);
}
#nav .nav-section-label::-webkit-details-marker{display:none}
#nav .nav-section-label:hover{color:var(--ct-text,#fff)}
#nav .nav-section-label:focus-visible{outline:2px solid var(--nav-section-accent,var(--ct-accent,#36dcff));outline-offset:-2px}

#nav .nav-caret{
  width:7px;height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--duration-fast,120ms) var(--motion-ease,ease);
}
#nav .nav-section[open] .nav-caret{transform:rotate(225deg) translate(-1px,-1px)}

/* A collapsed section still shows where you are. */
#nav .nav-section:not([open]):has(.nav-row.active) .nav-section-label{color:var(--nav-section-accent,var(--ct-accent,#36dcff))}

#nav .nav-section-body{display:grid;gap:2px}

/* ---- rows ------------------------------------------------------------ */

#nav .nav-row{
  display:grid;
  /* Third column collapses to 0 when there is no badge, so a single template
     serves both cases and the label can never be overlapped. */
  grid-template-columns:var(--nav-icon) minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:var(--nav-row);
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--radius-object,10px);
  background:transparent;
  color:var(--ct-secondary,#93a6bf);
  font-weight:750;
  text-align:left;
  text-decoration:none;
  transition:background var(--duration-fast,120ms) var(--motion-ease,ease),
             color var(--duration-fast,120ms) var(--motion-ease,ease);
}

#nav .nav-row-icon{
  display:grid;
  place-items:center;
  width:var(--nav-icon);
  height:var(--nav-icon);
  border:1px solid color-mix(in srgb,var(--nav-section-accent) 24%,transparent);
  border-radius:7px;
  background:color-mix(in srgb,var(--nav-section-accent) 13%,var(--ct-panel,#13243b));
  color:color-mix(in srgb,var(--nav-section-accent) 72%,#fff);
  font-size:.95rem;
}
#nav .nav-row-svg-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

#nav .nav-row-sprite-icon::before{
  content:"";
  width:17px;
  height:17px;
  background:currentColor;
  -webkit-mask:url('/images/ui/fortnite-sprite-menu.png') center/contain no-repeat;
  mask:url('/images/ui/fortnite-sprite-menu.png') center/contain no-repeat;
}

#nav .nav-row-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--type-sm,.8125rem);
}

/* app.css translates rows on hover; that fights the icon grid. Suppress it. */
#nav .nav-row:hover{transform:none;background:color-mix(in srgb,var(--nav-section-accent,var(--ct-accent,#36dcff)) 8%,transparent);color:var(--ct-text,#fff)}
#nav .nav-row.active{
  background:color-mix(in srgb,var(--nav-section-accent,var(--ct-accent,#36dcff)) 15%,transparent);
  border-color:color-mix(in srgb,var(--nav-section-accent,var(--ct-accent,#36dcff)) 40%,transparent);
  box-shadow:inset 3px 0 0 var(--nav-section-accent,var(--ct-accent,#36dcff));
  color:var(--ct-text,#fff);
  transform:none;
}
#nav .nav-row.active .nav-row-icon{color:var(--nav-section-accent,var(--ct-accent,#36dcff))}
#nav .nav-row:focus-visible{outline:2px solid var(--nav-section-accent,var(--ct-accent,#36dcff));outline-offset:-2px}

/* Badges (e.g. Party invitations) sit right, on the row, never over the label. */
#nav .nav-row .party-nav-badge{
  grid-column:3;
  justify-self:end;
  margin:0 0 0 8px;
}

@media(prefers-reduced-motion:reduce){
  #nav .nav-caret,#nav .nav-row{transition:none}
}

/* Late feature links settle into their reserved section without rebuilding or
   flashing the complete sidebar. */
@keyframes nav-row-arrive{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#nav .nav-row-arriving{animation:nav-row-arrive 160ms var(--motion-ease,ease) both}
#nav .nav-section-arriving{animation:nav-row-arrive 140ms var(--motion-ease,ease) both}
@media(prefers-reduced-motion:reduce){#nav .nav-row-arriving,#nav .nav-section-arriving{animation:none}}