/* ============================================================================
   DOCS SIDEBAR — nested sub-group rows (issue #212)
   ----------------------------------------------------------------------------
   The documentation sidebar's expanded module used to flatten every article in
   its subtree into one list, so the sub-groups themselves — the Knowledge
   Base's Scripts, Tips & Tricks, Technical Bulletins and the rest — never
   appeared. Views/Docs/_Sidebar.cshtml now renders them as the tree they are:
   a .visu-nav-group row per sub-group, its articles beneath it, recursing.

   Two additions carry the whole change:

   1. .visu-nav-group — a linked group-header row. Condensed caps like the
      MODULES label above it, so it reads as a heading; hover and active
      treatments match the rows around it (active mirrors the module row:
      navy text, accent-tinted fill, 3px accent left border — accent stays a
      fill, never the text colour).

   2. An indent per level via --nav-depth, stamped inline by the view. Group
      rows at depth d start where article rows do (38px) plus 14px per level
      below the module; article rows inside a group indent one step past their
      header. The var() defaults keep every row that does NOT carry the
      property exactly where it is today — Visibility University's sidebar and
      the module's own article rows resolve to the same 38px the compiled
      bundle gives them, so this file changes nothing it does not name.

   Deliberately a standalone stylesheet rather than only a rule in the SCSS
   pipeline, for the same reason capabilities.css, admin-nav.css and
   hub-module-header.css are: compiling the pipeline needs Node, which not
   every dev machine has, and the committed customerportal.min.css is already
   several modules stale. Styles/modules/_visuniversity.scss is updated to
   match anyway, so a future rebuild agrees with this file rather than
   fighting it.

   Named "-tree" rather than docs-sidebar.css: Styles/modules/_docs-sidebar.scss
   is the OLD sidebar's stylesheet, still imported for the article TOC's toc-*
   classes, and the guard test asserts this file's name stays out of Main.scss
   by substring.

   Loaded by _Layout after customerportal.min.css, before theme-dark.css.
   Dark mode needs no overrides of its own here: these rows take the same
   palette the existing .visu-nav-sub rows do, and the dark theme already
   handles the .visu-sidebar surface they sit on.
   ========================================================================= */

.visu-nav-group {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 5px 16px 4px calc(38px + (var(--nav-depth, 1) - 1) * 14px);
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    text-decoration: none;
    transition: background 0.12s;
}

.visu-nav-group .bi {
    font-size: 0.85rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.visu-nav-group:hover {
    background: #f7f9fb;
    color: var(--navy);
    text-decoration: none;
}

/* The module row's active treatment, one level down: the border is the marker,
   so the left padding gives back its 3px. */
.visu-nav-group--active {
    color: var(--navy);
    background: rgba(0, 188, 212, 0.07);
    border-left: 3px solid var(--accent);
    padding-left: calc(35px + (var(--nav-depth, 1) - 1) * 14px);
}

.visu-nav-group--active .bi {
    color: var(--accent);
}

/* Article rows indent one step past the group header above them. Without the
   property — Vis U's sidebar, the module's own articles, the admin action
   rows — this resolves to the 38px the compiled bundle already sets. */
.visu-nav-sub {
    padding-left: calc(38px + var(--nav-depth, 0) * 14px);
}

/* ── Search results sidebar (issue #214) ─────────────────────────────────
   The same vocabulary, with rows that act in place instead of navigating:
   a heading collapses its own branch, an item swaps the result into the
   pane over /partialarticle. They are anchors without an href, so the
   pointer has to say they act. The count badge is Bootstrap's, as it was
   on the old TOC; it just needs a hair of air before the title. */
.js-sr-toggle,
.js-sr-item {
    cursor: pointer;
}

.visu-nav-sub .badge {
    margin-right: 2px;
}