/*
 * Menu category accents + brand legibility in dark themes.
 *
 * Two requests, one file because they share the same cause: in the dark themes the
 * section headings and the brand artwork were both sitting at very low contrast
 * against a near-black surface.
 *
 * 1. Category headings were all --ct-muted, which made every group look identical and
 *    gave the eye nothing to anchor on when scanning a 13-item menu. Each section now
 *    carries its own hue, matched between the player sidebar and the Admin sidebar so
 *    the two read as one product.
 *
 * 2. The brand mark and title art are light line-art on transparent PNGs. On the dark
 *    surfaces they lost most of their contrast. A soft luminous backdrop plus a small
 *    brightness lift restores them without touching the artwork itself.
 */

/* ---- menu category accents ------------------------------------------- */

/* Player sidebar. Sections are emitted by sidebar-nav.js with data-nav-section. */
#nav .nav-section{--cat:var(--ct-muted,#8ea3bd)}
#nav .nav-section[data-nav-section="Collection"]{--cat:#5fe0ad}
#nav .nav-section[data-nav-section="Social"]    {--cat:#3fd0e8}
#nav .nav-section[data-nav-section="Tools"]     {--cat:#e0a63c}
#nav .nav-section[data-nav-section="Account"]   {--cat:#a479ff}
#nav .nav-section[data-nav-section="More"]      {--cat:#8ea3bd}

/* Admin sidebar. Same hue vocabulary, mapped onto the Admin sections. */
#adminToolNav .admin-nav-section{--cat:var(--ct-muted,#8ea3bd)}
#adminToolNav .admin-nav-section[data-nav-section="Catalogue"] {--cat:#5fe0ad}
#adminToolNav .admin-nav-section[data-nav-section="Content"]   {--cat:#3fd0e8}
#adminToolNav .admin-nav-section[data-nav-section="Operations"]{--cat:#e0a63c}
#adminToolNav .admin-nav-section[data-nav-section="Players"]   {--cat:#a479ff}
#adminToolNav .admin-nav-section[data-nav-section="System"]    {--cat:#e8798f}
#adminToolNav .admin-nav-section[data-nav-section="More"]      {--cat:#8ea3bd}

#nav .nav-section-label,
#adminToolNav .admin-nav-section-label{
  color:color-mix(in srgb,var(--cat) 82%,var(--ct-text,#f2f6fb));
}

/* A short rule in the category colour, so the grouping is visible at a glance and
   is not carried by the label hue alone. */
#nav .nav-section-label > span,
#adminToolNav .admin-nav-section-label > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#nav .nav-section-label > span::before,
#adminToolNav .admin-nav-section-label > span::before{
  content:"";
  width:14px;
  height:2px;
  flex:none;
  border-radius:2px;
  background:var(--cat);
}

#nav .nav-section-label:hover,
#adminToolNav .admin-nav-section-label:hover{
  color:color-mix(in srgb,var(--cat) 95%,var(--ct-text,#f2f6fb));
}

/* The active row picks up its own section's hue rather than one global accent. */
#nav .nav-section .nav-row.active{
  background:color-mix(in srgb,var(--cat) 16%,transparent);
  border-color:color-mix(in srgb,var(--cat) 42%,transparent);
  box-shadow:inset 3px 0 0 var(--cat);
}
#nav .nav-section .nav-row.active .nav-row-icon{color:var(--cat)}

#adminToolNav #adminSidebarModules .admin-nav-section .admin-module.selected{
  box-shadow:inset 3px 0 0 var(--cat) !important;
  border-color:color-mix(in srgb,var(--cat) 50%,var(--ct-border,rgba(255,255,255,.12))) !important;
  background:color-mix(in srgb,var(--cat) 15%,var(--st-surface-2,#141f33)) !important;
}
#adminToolNav .admin-nav-section:not([open]):has(.admin-module.selected) .admin-nav-section-label{
  color:var(--cat);
}

/* In icon-only rail mode the headings are hidden, so the hue moves to the icons to
   keep the grouping legible. */
#adminToolNav.rail .admin-nav-section .admin-module-icon{color:var(--cat) !important}

html[data-theme="light"] #nav .nav-section-label,
html[data-theme="light"] #adminToolNav .admin-nav-section-label{
  color:color-mix(in srgb,var(--cat) 62%,#1a2230);
}

/* ---- brand legibility in dark themes --------------------------------- */

/* The mark and the wordmark are pale line art on transparent PNGs. On the dark
   surfaces they dropped to roughly the same luminance as the background. */
html[data-theme="dark"] .sidebar-brand img,
html[data-theme="dark"] .persistent-brand img,
html[data-theme="dark"] .admin-app-brand img,
html[data-theme="dark"] .overview-brand-title,
html[data-theme="dark"] .overview-brand-slogan{
  filter:brightness(1.18) contrast(1.06)
         drop-shadow(0 0 18px rgba(150,200,255,.28))
         drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* A soft radial behind the mark lifts it off the panel without a visible box. */
html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .admin-app-brand{
  position:relative;
  isolation:isolate;
}
html[data-theme="dark"] .sidebar-brand::before,
html[data-theme="dark"] .admin-app-brand::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  z-index:-1;
  border-radius:16px;
  background:radial-gradient(ellipse at 22% 50%,rgba(120,170,235,.16),transparent 68%);
  pointer-events:none;
}

html[data-theme="dark"] .sidebar-brand span,
html[data-theme="dark"] .brand{
  color:#f4f8ff;
  text-shadow:0 0 22px rgba(120,180,255,.35),0 1px 2px rgba(0,0,0,.6);
}

/* The home hero wordmark sits on the page background rather than a panel, so it
   needs slightly more lift than the sidebar mark. */
html[data-theme="dark"] .overview-brand-hero{
  position:relative;
  isolation:isolate;
}
html[data-theme="dark"] .overview-brand-hero::before{
  content:"";
  position:absolute;
  inset:-4% -6%;
  z-index:-1;
  background:radial-gradient(ellipse at 50% 46%,rgba(126,178,242,.20),transparent 66%);
  pointer-events:none;
}

/* The darkest visual themes need a touch more than the standard dark surface. */
html[data-theme="dark"][data-visual-theme="classic"] .sidebar-brand img,
html[data-theme="dark"][data-visual-theme="galaxy"] .sidebar-brand img,
html[data-theme="dark"][data-visual-theme="cube"] .sidebar-brand img,
html[data-theme="dark"][data-visual-theme="classic"] .overview-brand-title,
html[data-theme="dark"][data-visual-theme="galaxy"] .overview-brand-title,
html[data-theme="dark"][data-visual-theme="cube"] .overview-brand-title{
  filter:brightness(1.3) contrast(1.1)
         drop-shadow(0 0 22px rgba(170,215,255,.36))
         drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

@media(prefers-reduced-transparency:reduce){
  html[data-theme="dark"] .sidebar-brand::before,
  html[data-theme="dark"] .admin-app-brand::before,
  html[data-theme="dark"] .overview-brand-hero::before{display:none}
}