/* ==========================================================
   NXTTRAIL — SIDEBAR (Contrast + Clarity)
   File: styles/sidebar.css
   - Stronger section headers
   - Accordion headers look clickable
   - Open state stays WHITE (no var(--ink) flip)
   - Clear active rail + subtle glow
========================================================== */

:root{
  --hero:#1E3A8A;
  --brand:#ff6600;
  --brand-dark:#cc5200;
  --glow:#FFD700;
}

/* ------------------------------
   SIDEBAR LAYOUT
------------------------------ */
#nxtSidebar{
  width:270px;
  background:var(--hero);
  color:#fff;
  padding:26px;

  position:fixed;
  top:0;
  left:0;

  height:100vh;
  overflow-y:auto;
  z-index:10;

  box-shadow:4px 0 12px rgba(0,0,0,0.25);

  scrollbar-width:thin;
  scrollbar-color:var(--brand) rgba(0,0,0,.25);
}
#nxtSidebar::-webkit-scrollbar{ width:12px; }
#nxtSidebar::-webkit-scrollbar-track{ background:rgba(0,0,0,.25); }
#nxtSidebar::-webkit-scrollbar-thumb{
  background:var(--brand);
  border-radius:10px;
}
#nxtSidebar::-webkit-scrollbar-thumb:hover{ background:var(--brand-dark); }

/* ------------------------------
   HEADER / BRAND
------------------------------ */
#nxtSidebar .nxtSide-header{ margin-bottom:22px; }

#nxtSidebar .nxttrail-brand{
  font-size:28px;
  font-weight:900;
  letter-spacing:0.5px;
  color:#fff;
  margin-bottom:6px;
  text-shadow: 0 0 6px rgba(255,255,255,0.25), 0 0 10px rgba(0,0,0,0.15);
}
#nxtSidebar .nxttrail-brand .ai{
  color:#ff0000;
  font-weight:900;
  text-shadow: 0 0 6px var(--glow), 0 0 10px var(--glow), 0 0 12px rgba(255,215,0,0.9);
}
#nxtSidebar .nxtSide-header .sub{
  opacity:0.88;
  font-size:14px;
  margin-bottom:18px;
}

/* ------------------------------
   SECTION HEADER STRIPS (stronger)
------------------------------ */
#nxtSidebar .nxtSide-label,
#nxtSidebar .nxtSide-groupTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;
  margin:16px 0 10px;
  padding:10px 12px;

  /* darker bar so it stands out */
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid rgba(255,215,0,.75);
  border-radius: 12px;

  color: rgba(255,255,255,.95);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ------------------------------
   COLLAPSIBLE (Accordion)
------------------------------ */
#nxtSidebar .collapse-section{
  margin:6px 0 10px;
  background:transparent;
}

/* Make header look like a button */
#nxtSidebar .collapse-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;

  padding:10px 14px;
  padding-right:34px; /* caret space */

  color: rgba(255,255,255,.94);
  font-weight:850;

  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;

  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#nxtSidebar .collapse-header:hover{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
}

/* Caret indicator */
#nxtSidebar .collapse-header::after{
  content:"›";
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%) rotate(0deg);
  font-size:18px;
  opacity:.75;
  transition: transform .18s ease, opacity .18s ease;
}
#nxtSidebar .collapse-section.open .collapse-header::after{
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

/* Body spacing */
#nxtSidebar .collapse-body{
  padding:8px 2px 10px;
}

/* Open state — IMPORTANT: keep text white */
#nxtSidebar .collapse-section.open{
  background: transparent;
}
#nxtSidebar .collapse-section.open .collapse-header{
  color:#fff;
  font-weight:900;
  background: rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.22);
  box-shadow: 0 0 0 1px rgba(255,215,0,.06) inset;
}

/* ------------------------------
   NAV BUTTONS
------------------------------ */
#nxtSidebar .side-btn{
  width:100%;
  background:transparent;
  padding:8px 18px;
  border-radius:10px;
  color:rgba(255,255,255,.86);
  text-align:left;
  margin:4px 0;
  font-size:14px;
  font-weight:650;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
  position:relative; /* active rail */
}

#nxtSidebar .side-btn:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

#nxtSidebar .side-btn.active{
  background:rgba(255,102,0,.14);
  color:#fff;
}

#nxtSidebar .side-btn.active::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  background:var(--brand);
  border-radius:999px;
}

/* Optional: subtle “group rail” down the left when accordion open */
#nxtSidebar .collapse-section.open .collapse-body{
  border-left: 2px solid rgba(255,215,0,.35);
  margin-left: 10px;
  padding-left: 10px;
}
/* ==========================================================
   FINAL OVERRIDES (keep at bottom)
   Goal:
   - Gold rails ONLY on section headers
   - Accordion headers: flat/transparent
   - Active accordion: orange rail only
   - No borders/boxes on accordion headers
========================================================== */

/* Section headers (ACCOUNT / INPUTS etc.) */
#nxtSidebar .nxtSide-label,
#nxtSidebar .nxtSide-groupTitle{
  background: rgba(255,255,255,.12);
  border: 0;
  border-left: 4px solid var(--glow);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Accordion header (PROJECT SETUP, PRODUCT INFO...) — flat */
#nxtSidebar .collapse-header{
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px;
}

/* Hover affordance only */
#nxtSidebar .collapse-header:hover{
  background: rgba(255,255,255,.06);
}

/* Active/open accordion header — orange rail only */
#nxtSidebar .collapse-section.open .collapse-header{
  background: transparent;
  border-left: 4px solid var(--brand) !important;
  padding-left: 12px;
  font-weight: 900;
}

/* Remove the yellow “group rail” in body */
#nxtSidebar .collapse-section.open .collapse-body{
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}