/* Scope focus chip + popover.
 */

/* Inactive: the .nav-link class on the toggle handles color so the chip text
 * matches its sibling nav items. We trim the vertical padding so the active
 * pill reads as a chip (shorter than a full nav-link tap target). The
 * surrounding <li> uses align-items-center to keep it aligned with siblings. */
.scope-focus .scope-focus-chip {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

/* Active: blue pill signals an applied scope focus. Uses Bootstrap's primary
 * palette tokens so the tint tracks the theme. */
.scope-focus[data-active="true"] .scope-focus-chip,
.scope-focus[data-active="true"] .scope-focus-chip:hover,
.scope-focus[data-active="true"] .scope-focus-chip:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    color: #fff;
}
.scope-focus[data-active="true"] .scope-focus-chip:hover,
.scope-focus[data-active="true"] .scope-focus-chip:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.28);
}

/* Popover overrides Bootstrap's auto-width dropdown-menu. Width is fixed so
 * long department names don't make the popover stretch off-screen; max-height
 * caps it at 70% viewport so opening with both sections full still fits. */
.scope-focus-popover {
    width: 280px;
    max-height: 70vh;
}

/* Phone-width: anchoring the popover to the chip leaves it growing off the
 * right side of the screen (Popper has nowhere to flip to inside the
 * collapsed hamburger menu). Pin it to the viewport with side gutters so the
 * full popover is visible. !important is needed to win over the inline
 * styles Popper writes onto the dropdown for desktop positioning. */
@media (max-width: 575.98px) {
    .scope-focus-popover.show {
        position: fixed !important;
        top: 4rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 5rem);
        transform: none !important;
    }
}

/* Bootstrap's .dropdown-menu.show is display: block — override to flex so the
 * body can grow/shrink between the pinned header and footer. */
.scope-focus-popover.show {
    display: flex;
    flex-direction: column;
}

.scope-focus-popover-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Per-section scroll cap. Both lists are server-sorted (selected first, alpha)
 * so the user's current focus is always visible at the top before scrolling. */
.scope-focus-list {
    max-height: 220px;
    overflow-y: auto;
}

/* The option is now a wrapper around .form-check (in markup), so we control
 * row padding without disturbing Bootstrap's internal checkbox positioning.
 * Horizontal margin pulls the highlight inset from the popover walls. */
.scope-focus-option {
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
}
.scope-focus-option:hover {
    background: rgba(0, 0, 0, 0.04);
}
.scope-focus-option:has(input:checked) {
    background: rgba(96, 165, 250, 0.10);
    font-weight: 500;
}
.scope-focus-option:has(input:checked):hover {
    background: rgba(96, 165, 250, 0.18);
}