/* ============================================================================
   Platform sidebar — single source of truth for its appearance.

   Loaded by components/sidebar.html, which renders the rail's contents on
   every page that has one. Everything here is scoped under `.ia-sb` (the
   wrapper that component emits) rather than under the host's own class, so
   this file can never leak onto the *secondary* rails that reuse names like
   `.app-sidebar` (business_plan / strategy_builder chat both do).

   The host template still owns the rail's box — width, position, scroll — see
   `.app-sidebar` (base_app.html), `.ss-aside` (solarsizer_ai) and
   `.ia-main-sidebar` (components/sidebar_standalone.html). `.ia-sb` fills that
   box and paints its own background, so a host that forgets to update its
   colour cannot show through.

   No Bootstrap dependency: the markup uses only `.ia-sb-*` classes and the
   `bi-*` icon glyphs, which is why the pages that bypass Bootstrap no longer
   need to re-implement its utilities to make this rail legible.
   ========================================================================== */

.ia-sb {
  /* Surfaces */
  --iasb-bg:          #d3e3fd;
  --iasb-surface:     #ffffff;
  --iasb-hover:       rgba(255, 255, 255, 0.55);
  /* Ink */
  --iasb-ink:         #1b1b1f;
  --iasb-ink-soft:    #444746;
  --iasb-ink-faint:   #5f6368;
  /* Group accents — mirror the reference: blue, red, amber. */
  --iasb-blue:        #0b57d0;
  --iasb-red:         #c5221f;
  --iasb-amber:       #e2a300;
  /* Set per-group by the modifier classes below; consumed by the heading
     pill and by each item's left rail. */
  --iasb-accent:      var(--iasb-blue);
  --iasb-accent-ink:  #ffffff;

  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 10px 14px;
  gap: 2px;
  background: var(--iasb-bg);
  color: var(--iasb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.ia-sb *, .ia-sb *::before, .ia-sb *::after { box-sizing: border-box; }
.ia-sb a { text-decoration: none; color: inherit; }
.ia-sb ul { list-style: none; margin: 0; padding: 0; }

/* ── Brand card ────────────────────────────────────────────────────────── */
.ia-sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--iasb-surface); border-radius: 14px;
  color: var(--iasb-ink); font-weight: 700; font-size: 15px;
  box-shadow: 0 1px 2px rgba(11, 87, 208, 0.10);
}
.ia-sb-brand-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.ia-sb-nav {
  flex: 1 1 auto; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  /* Thin scrollbar so the rail doesn't gain a heavy chrome gutter. */
  scrollbar-width: thin; scrollbar-color: rgba(11, 87, 208, 0.30) transparent;
}
.ia-sb-nav::-webkit-scrollbar { width: 6px; }
.ia-sb-nav::-webkit-scrollbar-thumb { background: rgba(11, 87, 208, 0.30); border-radius: 999px; }

/* ── Items ─────────────────────────────────────────────────────────────── */
.ia-sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: 999px;
  color: var(--iasb-ink); font-weight: 500;
  transition: background 0.12s ease;
}
.ia-sb-link:hover { background: var(--iasb-hover); color: var(--iasb-ink); }
.ia-sb-link.active {
  background: var(--iasb-surface); font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 87, 208, 0.12);
}
.ia-sb-link > i { font-size: 16px; line-height: 1; width: 20px; text-align: center; flex-shrink: 0; }
.ia-sb-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Collapsible group ─────────────────────────────────────────────────
   <details open> so the chevron in the heading is a real control rather
   than decoration. No JS and no persisted state: every load starts open,
   so a collapsed group can never hide navigation from the next visitor. */
.ia-sb-group { margin-top: 10px; }
.ia-sb-group[open] .ia-sb-head-caret { transform: rotate(180deg); }
.ia-sb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 10px; cursor: pointer;
  background: var(--iasb-accent); color: var(--iasb-accent-ink);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  list-style: none;
}
.ia-sb-head::-webkit-details-marker { display: none; }
.ia-sb-head:focus-visible { outline: 2px solid var(--iasb-ink); outline-offset: 2px; }
.ia-sb-head-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-sb-head-caret { flex-shrink: 0; transition: transform 0.15s ease; }

/* Items in a group hang off a rail tinted with the group's accent. */
.ia-sb-items {
  margin: 4px 0 0 12px; padding-left: 10px;
  border-left: 3px solid var(--iasb-accent);
  display: flex; flex-direction: column; gap: 2px;
}

.ia-sb-group--blue  { --iasb-accent: var(--iasb-blue);  --iasb-accent-ink: #ffffff; }
.ia-sb-group--red   { --iasb-accent: var(--iasb-red);   --iasb-accent-ink: #ffffff; }
/* Amber is too light to carry white text at this size. */
.ia-sb-group--amber { --iasb-accent: var(--iasb-amber); --iasb-accent-ink: #1b1b1f; }

/* ── Footer plan card ──────────────────────────────────────────────────── */
.ia-sb-foot { margin-top: 12px; padding-top: 12px; }
.ia-sb-plan {
  background: var(--iasb-surface); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(11, 87, 208, 0.10);
}
.ia-sb-plan-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--iasb-ink-faint);
}
.ia-sb-plan strong { display: block; font-size: 15px; color: var(--iasb-ink); }
.ia-sb-plan-credits { margin-top: 8px; }
.ia-sb-upgrade {
  display: block; margin-top: 10px; padding: 8px 12px;
  text-align: center; border-radius: 999px;
  background: var(--iasb-blue); color: #ffffff;
  font-size: 13px; font-weight: 600;
  transition: background 0.12s ease;
}
.ia-sb-upgrade:hover { background: #0842a0; color: #ffffff; }

/* ── Host boxes ────────────────────────────────────────────────────────
   The rails that carry this rail's contents. Keeping their background in
   step here means a host template can never leave a dark strip showing
   behind an overscroll or beside the scrollbar gutter. Literal colour, not
   the token — the tokens live on `.ia-sb`, which is a descendant of these. */
.app-sidebar:has(> .ia-sb),
.ss-aside:has(> .ia-sb),
.ia-main-sidebar:has(.ia-sb) { background: #d3e3fd; }