/* ── sidebar.css ──────────────────────────────────────────────────────────────
 * Shared sidebar styles for all app pages.
 * Pairs with /js/sidebar.js which generates the sidebar HTML.
 *
 * Load AFTER the page's inline <style> block (design tokens must be defined).
 * Load BEFORE mobile-overrides.css so mobile rules can override.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Base sidebar layout ─────────────────────────────────────────────────── */

/* EXACT match of the Risk Management page's sidebar: the whole aside is sticky,
   pinned below the header, fixed to viewport height, scrolls internally if the
   nav is long. Header offset comes from body padding-top (set in app.css). */
.sidebar {
  position: sticky;
  top: var(--header-h, 74px);
  height: calc(100vh - var(--header-h, 74px));
  /* The cap, and the fallbacks above, guard one silent failure mode: this aside is a
     flex item with `align-self: stretch`, which resolves against the flex line — and
     the flex line is as tall as the main column, i.e. the whole page. `stretch` is
     ignored while `height` is definite, so the two coexist safely right up until
     `height` fails to compute. A missing --header-h invalidates the whole calc(),
     height falls back to auto, and stretch then grows the aside to page height: the
     content no longer overflows, overflow-y:auto has nothing to scroll, and every nav
     item below the fold is unreachable — no scrollbar, and scrolling the page just
     slides the sticky aside along. max-height clamps the stretched size too, so the
     aside cannot exceed the viewport however the height resolves. */
  max-height: calc(100vh - var(--header-h, 74px));
  width: var(--sidebar-width);
  background: transparent;
  border-radius: 0;
  padding: 1.3rem 0.5rem 2rem;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: stretch;
  flex-shrink: 0;
}

.sidebar-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-dark);
  margin-bottom: var(--space-lg);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 200ms;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  margin: 1px .3rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.sidebar-item:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-text);
}

.sidebar-item.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.sidebar-item .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  flex-shrink: 0;
  stroke: var(--color-primary);
  fill: none;
  transition: stroke .12s;
}
.sidebar-item.active .icon { stroke: #fff !important; }

.sidebar-item-text { opacity: 1; }

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 1rem;
}

.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-secondary);
  padding: .55rem 1rem .35rem;
}

.beta-badge, .coming-soon-badge {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  padding: .18em .5em;
  border-radius: 100px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.sidebar-tooltip {
  display: none;
}

/* Note: below 800px the sidebar is hidden entirely (see mobile-overrides.css);
   collapse-to-toggle on desktop is handled by app.css (body.sidebar-collapsed). */