/* Playbook scope bar, gated navigation, and the sidebar scrollbar.
 *
 * Shared by every playbook shell. Two jobs:
 *
 * 1. THE SCOPE BAR + GATED NAV. Three of the playbooks work on one of many entities —
 *    a market segment, a deal, a product — and most of their views are meaningless
 *    until one is chosen. The old sidebar listed all sixteen destinations flat, so
 *    twelve of them led to a "pick a segment" dead end. Now the sidebar states what you
 *    are working on at the top, and the destinations that need an entity are grouped
 *    under it and disabled until there is one. Nothing is hidden — a disabled button
 *    still tells you the capability exists and what it needs.
 *
 * 2. THE SIDEBAR SCROLLBAR. .sp-sidebar scrolls, but the track only appeared when the
 *    content happened to overflow, and `scrollbar-width: thin` in the enhance sheet made
 *    Blink ignore the ::-webkit-scrollbar styling entirely — so where it did appear it
 *    was a hairline in the default grey rather than the green everything else uses. Both
 *    are fixed here: the track is always reserved and always branded.
 */

/* ── Sidebar scrollbar ───────────────────────────────────────────── *
 * `overflow-y: scroll` (not auto) so the track is always present: a scrollbar that
 * appears and disappears shifts the nav sideways as the section list grows.
 * `scrollbar-width: auto` is required — with `thin`, Blink drops the ::-webkit rules. */
html body .sp-sidebar {
  overflow-y: scroll !important;
  scrollbar-width: auto !important;
  scrollbar-color: var(--vo-green, #649954) var(--vo-green-tint, #e7efe2) !important;
  scrollbar-gutter: stable;
}
html body .sp-sidebar::-webkit-scrollbar {
  width: 12px !important;
  display: block !important;
  -webkit-appearance: none !important;
  background: var(--vo-green-tint, #e7efe2) !important;
}
html body .sp-sidebar::-webkit-scrollbar-track {
  background: var(--vo-green-tint, #e7efe2) !important;
  border-radius: 6px !important;
}
html body .sp-sidebar::-webkit-scrollbar-thumb {
  background: var(--vo-green, #649954) !important;
  border-radius: 6px !important;
  border: 2px solid var(--vo-green-tint, #e7efe2) !important;
  min-height: 40px !important;
}
html body .sp-sidebar::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark, #4d7a40) !important; }

/* ── Scope bar ───────────────────────────────────────────────────── *
 * Sticky at the top of the sidebar: as the section list scrolls past, what you are
 * working on stays on screen. Without that, the answer to "which segment am I editing"
 * scrolls away exactly when a long list makes you need it most. */
.vo-scope {
  position: sticky;
  top: -20px;                     /* cancels .sp-sidebar's 20px top padding */
  z-index: 3;
  margin: 0 0 16px;
  padding: 10px 12px 12px;
  background: var(--vo-green-tint, #e7efe2);
  border: 1px solid var(--vo-green, #649954);
  border-radius: 8px;
}
.vo-scope-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vo-green-dark, #4d7a40);
  margin-bottom: 5px;
}
.vo-scope-select {
  width: 100%;
  font-family: var(--vo-font-body, inherit);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vo-ink, #1d2420);
  padding: 7px 8px;
  border: 1px solid var(--vo-green, #649954);
  border-radius: 6px;
  background: var(--vo-surface, #fff);
  cursor: pointer;
}
.vo-scope-select:focus-visible { outline: 2px solid var(--vo-blue, #0081B7); outline-offset: 1px; }
.vo-scope-select:disabled { cursor: default; opacity: .75; }

/* The roll-up path. This is where "segments roll up to the company" is made visible in
   the shell rather than only inside the portfolio view: you can always see the chain
   you are inside, and click any ancestor to widen the scope back out. */
.vo-scope-trail { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--vo-ink-soft, #55605a); }
.vo-scope-trail button {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--vo-blue, #0081B7); text-decoration: underline;
}
.vo-scope-trail button:hover { color: var(--vo-blue-dark, #006592); }
.vo-scope-trail .vo-scope-sep { margin: 0 4px; opacity: .6; }
.vo-scope-trail .vo-scope-here { font-weight: 700; color: var(--vo-ink, #1d2420); }

.vo-scope-hint { margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--vo-ink-soft, #55605a); }
.vo-scope-count { font-weight: 700; color: var(--vo-green-dark, #4d7a40); }

/* ── Grouped nav ─────────────────────────────────────────────────── */
.sp-nav-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.vo-nav-head {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--vo-ink-soft, #55605a);
  margin: 4px 0 5px; padding: 0 2px;
}
.vo-nav-head .vo-nav-head-name {
  text-transform: none; letter-spacing: 0; font-size: 12px;
  color: var(--vo-green-dark, #4d7a40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vo-nav-head.is-locked .vo-nav-head-name { color: var(--vo-ink-soft, #55605a); font-style: italic; }

/* A gated destination stays visible and keeps its label — it is dimmed, not removed, so
   the nav still describes everything the app can do. */
.sp-nav-btn.is-locked {
  opacity: .45;
  cursor: not-allowed;
  position: relative;
  padding-right: 26px;
}
.sp-nav-btn.is-locked:hover { background: transparent; }
.sp-nav-btn.is-locked::after {
  content: '🔒';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; opacity: .8;
}

/* Company-scope rows in the segment picker. */
.vo-scope-all {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; border: none; cursor: pointer;
  padding: 8px 10px; margin-bottom: 4px; border-radius: 8px;
  font-family: var(--vo-font-body, inherit); font-size: 13.5px; font-weight: 700;
  background: transparent; color: var(--vo-ink, #1d2420);
}
.vo-scope-all:hover { background: var(--vo-green-tint, #e7efe2); }
.vo-scope-all.is-active { background: var(--vo-green, #649954); color: #fff; }
.vo-scope-all .vo-scope-all-sub { font-weight: 400; font-size: 11.5px; opacity: .8; }