/* =============================================================
 * cs-sidebar-shared.css — shared v2-side companion to /css/nav.css.
 * =============================================================
 *
 * /css/nav.css owns the look of every .snav-* / .sidebar-brand /
 * .cs-lang-picker rule. It was written for Draw (app.html) and
 * targets CSS variables that v2 pages don't define directly. This
 * file makes nav.css work on v2 pages too, by:
 *
 *   1. Aliasing v2's variable names (--ink / --line / --muted /
 *      --brand / --card / --soft) onto the ones nav.css uses
 *      (--text / --border / --text-muted / --accent / --surface /
 *      --surface2). v2 pages set their own values for the v2-side
 *      vars; this file just re-exposes them.
 *
 *   2. Providing the aside#sidebar CONTAINER styles. Draw ships
 *      those in styles.css; v2 pages don't load styles.css, so we
 *      restate them here with mobile-drawer behavior layered on
 *      top (Draw is desktop-only, v2 is responsive).
 *
 *   3. Defining the cs-topbar / cs-nav-toggle / cs-nav-backdrop
 *      pieces v2's responsive layout needs. These don't exist in
 *      Draw at all — they're the hamburger + scrim that lets the
 *      sidebar slide in on mobile.
 *
 * Include AFTER /css/nav.css so the cascade works correctly.
 *
 * ─── Var aliasing ───────────────────────────────────────────────── */
:root {
  /* Map v2's vars onto Draw's. v2 pages already set --ink/--line
     etc.; this just forwards them. The fallback (after the comma)
     is the same value the Draw :root in styles.css ships, so the
     CSS still resolves on a page that forgot to declare them. */
  --text:        var(--ink,    #e6edf3);
  --text-muted:  var(--muted,  #8b949e);
  --border:      var(--line,   #30363d);
  --surface:     var(--card,   #161b22);
  --surface2:    var(--soft,   #21262d);
  --accent:      var(--brand,  #58a6ff);
  --accent-dim:  var(--brand-dim, #1f6feb44);
  --sidebar-w:   240px;
}

/* ─── Sidebar container ─────────────────────────────────────────────
 * Desktop: fixed 240 px column on the left.
 * Mobile (< 900 px): off-canvas, slides in when body has
 * .cs-nav-open (toggled by the hamburger).                          */
aside#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  z-index: 60;
  transition: transform .25s cubic-bezier(.2,.8,.4,1);
}
/* When body.cs-nav-hidden is set (user clicked the brand-row hide
   button on desktop), translate the sidebar off-screen and reveal
   the .sidebar-show-tab. Mobile uses the same body-class so the
   collapse behavior is consistent across viewports. */
body.cs-nav-hidden aside#sidebar { transform: translateX(-100%); }

/* Push page content over by the sidebar's width on desktop so it
   doesn't sit behind the fixed sidebar. The padding goes away on
   mobile (sidebar becomes an overlay). */
@media (min-width: 900px) {
  body { padding-left: var(--sidebar-w); }
  body.cs-nav-hidden { padding-left: 0; }
}

/* ─── Mobile drawer plumbing ────────────────────────────────────────
 * Hamburger lives in the cs-topbar; backdrop is a scrim behind the
 * drawer. Both are no-ops on desktop.                              */
.cs-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cs-topbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.cs-topbar .spacer { flex: 1; }
.cs-topbar .status { font-size: 12px; color: var(--text-muted); }

.cs-nav-toggle {
  display: none;            /* shown only at < 900 px */
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.cs-nav-toggle svg { width: 20px; height: 20px; }

.cs-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 55;
}
body.cs-nav-open .cs-nav-backdrop { display: block; }

@media (max-width: 899px) {
  /* On mobile the sidebar starts off-screen; opens when body has
     cs-nav-open (set by the hamburger). The desktop body padding
     above is already gated to >= 900px so it doesn't apply here. */
  aside#sidebar { transform: translateX(-100%); width: 260px; }
  body.cs-nav-open aside#sidebar {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(0,0,0,0.6);
  }
  /* Hide the desktop-side re-expand tab on mobile — the hamburger
     in the cs-topbar serves the same role. */
  .sidebar-show-tab { display: none !important; }
  .cs-nav-toggle { display: inline-flex; }
}

/* ─── Nav-shell tweaks ──────────────────────────────────────────────
 * Small adjustments to nav.css's defaults that only matter for v2.
 * Kept here so /css/nav.css stays exactly as the Draw module wants
 * it. If a rule lives here, it's because v2 needs something Draw
 * doesn't.                                                         */
.sidebar-nav { flex: 1; }   /* fill remaining vertical space in the column */

/* Footer (sign-out etc.) — pushed to the bottom of the column. v2
   used to have a .cs-nav-foot block; the same class still works
   here, but it's only used in Phase 1 (Phase 2 moves sign-out into
   the user-badge area at the top). */
.cs-nav-foot {
  margin-top: auto;
  padding: 8px 0 12px;
  border-top: 1px solid var(--border);
}
.cs-nav-foot .snav-label { color: var(--text-muted); }
.cs-nav-foot .snav-label:hover { color: var(--text); }

/* ─── User badge ─────────────────────────────────────────────────────
 * Mirrors the rules in /css/auth.css that style #user-badge for Draw.
 * Restated here so v2 pages don't need to pull the whole auth.css.
 * If you tweak one, tweak the other (or extract into a third file).
 * ──────────────────────────────────────────────────────────────── */
.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 30px;
  flex-shrink: 0;
}
.ub-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  /* Use full --text (not --text-muted) so the user can actually see who
     they're signed in as. 11px gray-on-dark was effectively invisible. */
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plan pill — Pro / Trial · Nd left / Trial ended. JS sets text + class. */
.ub-plan {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
/* The display:inline-flex above wins over the user-agent default for the
   [hidden] attribute, leaving the empty pill visible as a 1px bordered
   box even when JS hides it. Force hidden to actually hide. */
.ub-plan[hidden],
.ub-icon-btn[hidden] { display: none !important; }
.ub-plan.is-pro   { color: #7fdb7f; border-color: #2da32d; background: rgba(45,163,45,0.12); }
.ub-plan.is-trial { color: #ffd866; border-color: #b48800; background: rgba(180,136,0,0.12); }
.ub-plan.is-ended { color: #ff8b8b; border-color: #b33;    background: rgba(179,51,51,0.12); }

/* Shared icon-button shape. Per-button color comes from the variant
   class below (.ub-upgrade / .ub-manage / .ub-logout). */
/* Shared icon-button shape. Per-button color comes from the variant
   class below (.ub-upgrade / .ub-manage / .ub-logout). */
.ub-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.ub-icon-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Upgrade — green outline so it draws the eye. */
.ub-upgrade {
  border-color: #2da32d;
  color: #7fdb7f;
}
.ub-upgrade:hover {
  background: rgba(45,163,45,0.12);
  color: #aef0ae;
  border-color: #2da32d;
}

/* Manage subscription — neutral, only shown to active subscribers. */
.ub-manage {
  color: var(--text-muted);
}
.ub-manage:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Sign-out — neutral, sits in the badge action cluster. */
.ub-logout {
  color: var(--text-muted);
}
.ub-logout:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* ── .snav-item.is-active ──────────────────────────────────────────
 * Highlights the top-level group whose section the user is currently
 * in (e.g., "Reports" while viewing a report page). Replaces the
 * old .is-open auto-expand so the menu stays fully collapsed by
 * default — user clicks to open. Visual cue only.
 */
.snav-item.is-active > .snav-label .snav-label-text {
    color: var(--accent, var(--brand, #f7873b));
    font-weight: 600;
}
.snav-item.is-active > .snav-label > svg,
.snav-item.is-active > .snav-label > .snav-label-icon {
    color: var(--accent, var(--brand, #f7873b));
}