/* 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; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESTORE SCROLLBARS IN THE PLAYBOOKS
   ═══════════════════════════════════════════════════════════════════════════
   assets/js/topnav.js injects this at runtime, into every page in the estate:

     html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
     ::-webkit-scrollbar { display: none !important; }

   "Hide scrollbars globally while keeping scroll functional." Reasonable for a dashboard you take
   in at a glance. Wrong for a playbook: these are long documents — a 38-section strategy, a
   141-item HR assessment — read in a fixed-height pane, and with no scrollbar the reader gets no
   signal that anything exists below the fold. That was reported as "the scrollbar is broken" three
   times before anyone found the rule hiding it.

   Restored HERE, in the stylesheet all five playbooks load, rather than in each app: one source of
   truth, and it cannot drift between them.

   TWO DELIBERATE LIMITS:

   1. Only the inner scrolling PANES, never html or body. Making a document-level scrollbar appear
      in an app whose layout assumed none is how a horizontal shift or a double scrollbar gets
      introduced into four live apps.
   2. The global rule is left alone. Non-playbook apps in the estate (Learning Hub, the toolboxes)
      keep the hidden-scrollbar behaviour they were designed around.

   Specificity is what carries it: an id (#spScroll) or a class (.hr-scroll) beats the universal
   selector, and !important on both sides means the more specific one wins.

   WHY EVERY SELECTOR BELOW CARRIES `html body`:
   the left sidebar was the only pane that actually showed its scrollbar, and it was also the
   only one written as `html body .sp-sidebar` — the main panes were written bare. Reported as
   "the scrollbar is missing from the right side". Rather than re-derive which rule wins, the
   main panes now use the exact form that is demonstrably winning in the same stylesheet.

   ── THE STANDARD: [data-vo-scrollpane] ──────────────────────────────────────

   **Any element in any VisionOne app that scrolls its own content carries
   `data-vo-scrollpane`.** That attribute is the contract. Nothing else is required, and no
   stylesheet needs to learn the app's class names.

   This attribute was added to the selector list below when the list was written, and then went
   unused for four apps — so every new app kept appending its own class name instead, and the
   list became the thing someone had to remember. It was not remembered. The Sales Playbook
   renamed `.hr-scroll` to `.sales-scroll` when it was forked from HR, the name was not added
   here, and its scrollbars were invisible on the day it was built. That is the FOURTH time this
   exact bug has been reported, and each previous fix added a name rather than removing the need
   for one.

   So the per-app class names below are now LEGACY. They stay because removing a working selector
   from four live apps to prove a point is a bad trade, and they cost nothing. But:

     - A new app adds NOTHING here. It tags its panes and it works.
     - `test/playbook-scope-smoke.js` DISCOVERS apps from disk rather than from a list, and fails
       if any app ships a scrolling pane without the attribute. A list the test reads is still a
       list someone must update; a directory scan is not.

   Both halves matter. The attribute without the test just moves which thing gets forgotten. */
html body #spScroll, html body #spView, html body #hrScroll,
html body .sp-main, html body .sp-side, html body .sp-sidebar,
html body .hr-scroll, html body .hr-side,
html body .ma-scroll, html body .npd-scroll, html body .mi-scroll,
html body .sp-viewer, html body .sp-viewer-body,
html body [data-vo-scrollpane] {
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
  scrollbar-color: var(--vo-green, #649954) var(--vo-green-tint, #e7efe2) !important;
}
html body #spScroll::-webkit-scrollbar, html body #spView::-webkit-scrollbar, html body #hrScroll::-webkit-scrollbar,
html body .sp-main::-webkit-scrollbar, html body .sp-side::-webkit-scrollbar, html body .sp-sidebar::-webkit-scrollbar,
html body .hr-scroll::-webkit-scrollbar, html body .hr-side::-webkit-scrollbar,
html body .ma-scroll::-webkit-scrollbar, html body .npd-scroll::-webkit-scrollbar, html body .mi-scroll::-webkit-scrollbar,
html body .sp-viewer::-webkit-scrollbar, html body .sp-viewer-body::-webkit-scrollbar,
html body [data-vo-scrollpane]::-webkit-scrollbar {
  display: block !important;
  /* 12px, not 14: wide enough to grab, narrow enough that a layout built around a zero-width
     scrollbar does not reflow noticeably. */
  width: 12px !important;
  height: 12px !important;
}
html body #spScroll::-webkit-scrollbar-track, html body #spView::-webkit-scrollbar-track, html body #hrScroll::-webkit-scrollbar-track,
html body .sp-main::-webkit-scrollbar-track, html body .sp-side::-webkit-scrollbar-track, html body .sp-sidebar::-webkit-scrollbar-track,
html body .hr-scroll::-webkit-scrollbar-track, html body .hr-side::-webkit-scrollbar-track,
html body .ma-scroll::-webkit-scrollbar-track, html body .npd-scroll::-webkit-scrollbar-track, html body .mi-scroll::-webkit-scrollbar-track,
html body .sp-viewer::-webkit-scrollbar-track, html body .sp-viewer-body::-webkit-scrollbar-track,
html body [data-vo-scrollpane]::-webkit-scrollbar-track {
  display: block !important;
  background: var(--vo-green-tint, #e7efe2) !important;
  border-radius: 6px !important;
}
html body #spScroll::-webkit-scrollbar-thumb, html body #spView::-webkit-scrollbar-thumb, html body #hrScroll::-webkit-scrollbar-thumb,
html body .sp-main::-webkit-scrollbar-thumb, html body .sp-side::-webkit-scrollbar-thumb, html body .sp-sidebar::-webkit-scrollbar-thumb,
html body .hr-scroll::-webkit-scrollbar-thumb, html body .hr-side::-webkit-scrollbar-thumb,
html body .ma-scroll::-webkit-scrollbar-thumb, html body .npd-scroll::-webkit-scrollbar-thumb, html body .mi-scroll::-webkit-scrollbar-thumb,
html body .sp-viewer::-webkit-scrollbar-thumb, html body .sp-viewer-body::-webkit-scrollbar-thumb,
html body [data-vo-scrollpane]::-webkit-scrollbar-thumb {
  display: block !important;
  background: var(--vo-green, #649954) !important;
  border: 3px solid var(--vo-green-tint, #e7efe2) !important;
  border-radius: 6px !important;
  min-height: 40px !important;
}
html body #spScroll::-webkit-scrollbar-thumb:hover, html body #spView::-webkit-scrollbar-thumb:hover,
html body #hrScroll::-webkit-scrollbar-thumb:hover,
html body .sp-main::-webkit-scrollbar-thumb:hover, html body .sp-side::-webkit-scrollbar-thumb:hover,
html body .hr-scroll::-webkit-scrollbar-thumb:hover, html body .hr-side::-webkit-scrollbar-thumb:hover,
html body .ma-scroll::-webkit-scrollbar-thumb:hover, html body .npd-scroll::-webkit-scrollbar-thumb:hover,
html body .mi-scroll::-webkit-scrollbar-thumb:hover,
html body .sp-viewer::-webkit-scrollbar-thumb:hover, html body .sp-viewer-body::-webkit-scrollbar-thumb:hover,
html body [data-vo-scrollpane]::-webkit-scrollbar-thumb:hover {
  background: var(--vo-green-dark, #4d7a40) !important;
}