.global-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    /* No border-right: the header shares this surface, and a full-height
       hairline would draw a visible vertical seam through the unified top
       strip. The ::after below restores the subtle edge against the page
       content, starting only below the header. */
    z-index: 1060;
    transition: transform var(--transition-normal), width var(--transition-normal);
    padding-top: var(--safe-top);
    /* Logout is the last row and the sidebar is pinned to the bottom edge, so
       without this the phone's home indicator is drawn over it. */
    padding-bottom: var(--safe-bottom);
    /* Sidebar inherits the per-tenant body font (var(--font-family) on body,
       set from organization.body_font with Poppins fallback). The brand-name
       below opts up to var(--font-family-heading) so the org name reads in
       the tenant's display/header font. Fonts vary per tenant by design —
       that's the white-label point. */
    /* Visual size parity across tenant fonts. Different fonts have different
       x-heights at the same nominal font-size (Fortis's body font is shorter
       than Poppins, so it reads small). font-size-adjust normalizes the
       x-height to a fixed ratio of font-size, so every tenant's nav reads at
       the same visual size regardless of which font is active. 0.52 is
       calibrated to Poppins (the platform default) — tenants on Poppins are
       unchanged, smaller-x-height fonts get scaled up to match. */
    font-size-adjust: 0.52;
}

/* Hairline edge between sidebar and page content — replaces the old
   border-right, which ran the full height and showed as a thin vertical
   line splitting the sidebar from the header band. Starts at the header's
   bottom edge so the top strip stays seamless. */
.global-sidebar::after {
    content: "";
    position: absolute;
    top: var(--header-bottom);
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--sidebar-border);
    pointer-events: none;
}

/* Bootstrap Icons render at a font-family that has no meaningful x-height
   (glyphs fill the em-box), so font-size-adjust on .global-sidebar would shrink
   them and throw off centering inside fixed-size buttons. Opt icon glyphs
   out of x-height normalization — they keep their nominal font-size. */
.global-sidebar .bi {
    font-size-adjust: none;
}

/* Sidebar brand/logo area — height matches the header so its bottom edge
   lines up with the header's. No separate background: the header now shares
   the sidebar surface, so a darker brand band would break the single
   continuous chrome strip across the top. */
.global-sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm) 0 0;
    min-height: var(--header-height);
}

.global-sidebar-brand-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    padding-left: var(--spacing-xs);
    margin-left: calc(-1 * var(--spacing-xs));
    transition: background var(--transition-fast);
}

.global-sidebar-brand-link:hover {
    background: rgba(var(--sidebar-fg-rgb),0.08);
    text-decoration: none;
    color: inherit;
}

.global-sidebar-brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

.global-sidebar-brand-logo-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--sidebar-fg-rgb),0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-md);
    flex-shrink: 0;
    color: var(--sidebar-text);
}

/* Icon rail: fixed 56px column for logos, nav icons, and avatars.
   Matches collapsed sidebar width so icons never move during transition. */
.global-sidebar-icon-rail {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-sidebar-brand-name {
    flex: 1;
    min-width: 0;
    /* Per-tenant header font for the org name itself.
       --font-family-heading is set per-org in base.html from
       organization.header_font (Poppins fallback). */
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar-org-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: rgba(var(--sidebar-fg-rgb),0.1);
    border: 1px solid rgba(var(--sidebar-fg-rgb),0.15);
    cursor: pointer;
    color: var(--sidebar-text);
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
}

.global-sidebar-org-toggle:hover {
    background: rgba(var(--sidebar-fg-rgb),0.2);
    border-color: rgba(var(--sidebar-fg-rgb),0.3);
}

.global-sidebar-org-toggle-svg {
    width: 10px;
    height: 16px;
    opacity: 0.85;
}

.global-sidebar-org-dropdown {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 240px;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: var(--z-popover);
    overflow: hidden;
    margin-left: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Inline org reveal (expanded sidebar): rendered BEFORE the brand row in DOM
   order, animates max-height from 0 → cap so the brand row gets pushed down
   by normal flex flow — visually, "the brand slides down, others reveal
   above." Scroll-capped at 5 rows so 6+ orgs don't shove nav off-screen.
   On collapsed (icon rail) sidebars, the flyout below takes over instead.

   --sidebar-org-row-height is the single source of truth for that cap: the row
   below is pinned to it, so 5 rows fit the cap exactly. The cap used to be a
   hand-written 44px while the row rendered at 45.78px (24px line box + 2 x
   0.65rem padding + 1px rule), which left the 5th org sliced ~8px short
   against the brand row under it. */
.global-sidebar-org-others {
    --sidebar-org-row-height: 46px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    scrollbar-width: none;
}

.global-sidebar-org-others.is-open {
    max-height: calc(5 * var(--sidebar-org-row-height));
    overflow: hidden auto;
    overscroll-behavior: contain;
}

.global-sidebar-org-others::-webkit-scrollbar {
    display: none;
}

.is-sidebar-collapsed .global-sidebar-org-others {
    display: none;
}

.global-sidebar-org-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Pinned so every row is the same height whether or not it carries the
       bottom rule, and so the 5-row cap above stays exact. The height has to
       cover this padding + the 24px line box (--line-height x 1rem) + the rule
       — 45.8px today, 46 rounded up. Grow the padding or the type scale and
       you must grow this too, or the name below (overflow: hidden) clips. */
    height: var(--sidebar-org-row-height);
    box-sizing: border-box;
    padding: var(--spacing-smd) var(--spacing-smd);
    color: var(--sidebar-text);
    text-decoration: none;
    transition: filter 0.15s ease;
    border-bottom: 1px solid var(--sidebar-border);
}

.global-sidebar-org-row:last-child {
    border-bottom: none;
}

.global-sidebar-org-row:hover {
    filter: brightness(1.25);
    color: var(--sidebar-text);
    text-decoration: none;
}

.global-sidebar-org-row-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar-org-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-smd) var(--spacing-smd);
    color: var(--sidebar-text);
    text-decoration: none;
    transition: filter 0.15s ease;
    border-bottom: 1px solid var(--sidebar-border);
}

.global-sidebar-org-dropdown-item:last-child {
    border-bottom: none;
}

.global-sidebar-org-dropdown-item:hover {
    filter: brightness(1.25);
    color: var(--sidebar-text);
    text-decoration: none;
}

.global-sidebar-org-dropdown-item.is-current {
    font-weight: var(--font-weight-medium);
}

/* Dot indicator for current org. Uses currentColor so it inherits the
   per-row contrast color set by the inline `color:` style — works for any
   row brand luminance, including light brands where #ffffff would vanish. */
.global-sidebar-org-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.global-sidebar-org-dropdown-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar-nav-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.global-sidebar-nav {
    flex: 1;
    overflow: hidden auto; /* hidden-x prevents scrollbar during collapse, auto-y for long lists */
    overscroll-behavior: contain;
    scrollbar-width: none; /* Firefox: hide scrollbar (scroll arrows replace it) */
    padding: var(--spacing-xs) 0;
}

.global-sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari: hide scrollbar */
}

.global-sidebar-nav-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sidebar-text-muted);
    opacity: 0.7;
    z-index: 2;
    transition: opacity var(--transition-fast);
}

.global-sidebar-nav-arrow:hover {
    opacity: 1;
}

.global-sidebar-nav-arrow-up {
    top: 0;
    background: linear-gradient(to bottom, var(--sidebar-bg) 40%, transparent);
}

.global-sidebar-nav-arrow-down {
    bottom: 0;
    background: linear-gradient(to top, var(--sidebar-bg) 40%, transparent);
}

.global-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-sidebar-nav ul + ul {
    margin-top: 0;
}

/* Box + sidebar ink only — the caps type comes from
   .global-label-caps--strong --wide on the element (components/label-caps.css). */
.global-sidebar-section-label {
    padding: var(--spacing-smd) var(--spacing-mdlg) var(--spacing-xs);
    color: rgba(var(--sidebar-fg-rgb),0.45);
    overflow: hidden;
    white-space: nowrap;
}

.is-sidebar-collapsed .global-sidebar-section-label span {
    visibility: hidden;
}

/* Collapsed: remove right padding so hover covers the full sidebar width */
.is-sidebar-collapsed .global-sidebar-brand,
.is-sidebar-collapsed .global-sidebar-profile-row {
    padding-right: 0;
}

.global-sidebar-section-label + ul {
    margin-top: 0;
}

.global-sidebar-nav li {
    margin-bottom: var(--spacing-2xs);
}

.global-sidebar-nav a {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 0;
    padding: var(--spacing-sm) 0;
    margin: 0 var(--spacing-sm);
    border-radius: var(--radius-pill);
    color: var(--sidebar-text) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-base);
    transition: background var(--transition-fast);
}

.global-sidebar-nav a:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text) !important;
    text-decoration: none;
}

.global-sidebar-nav a:focus {
    color: var(--sidebar-text) !important;
}

.global-sidebar-nav a[aria-current="page"] {
    background: var(--sidebar-active-bg);
    color: var(--brand-secondary-fg) !important;
}

.global-sidebar-nav a i,
.global-sidebar-nav a .bi,
.global-sidebar-nav a span {
    color: inherit !important;
}

.global-sidebar-nav a i,
.global-sidebar-nav a .bi {
    font-size: var(--font-size-base);
    width: 56px;
    text-align: center;
    flex-shrink: 0;
}

.global-sidebar-nav a span {
    white-space: nowrap;
}

/* Collapsed: the hover/active fill becomes a circle behind the icon so the
   pill shape survives the narrow rail. 38px matches the link's row height. */
.is-sidebar-collapsed .global-sidebar-nav a {
    margin: 0;
}

.is-sidebar-collapsed .global-sidebar-nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: background var(--transition-fast);
    z-index: -1;
}

.is-sidebar-collapsed .global-sidebar-nav a:hover,
.is-sidebar-collapsed .global-sidebar-nav a[aria-current="page"] {
    background: none;
}

.is-sidebar-collapsed .global-sidebar-nav a:hover::before {
    background: var(--sidebar-hover-bg);
}

.is-sidebar-collapsed .global-sidebar-nav a[aria-current="page"]::before {
    background: var(--sidebar-active-bg);
}

.global-sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--spacing-xsm);
    border-radius: 0.625rem;
    background: var(--color-error);
    color: white;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    margin-left: auto;
}

.global-sidebar-badge[hidden] {
    display: none;
}

/* A count on a nav link (the Inbox's unread threads) sits at the row's right
   edge, white on red whatever colour the link's own label inherits. */
.global-sidebar-nav a .global-sidebar-badge {
    color: white !important;
    margin-right: var(--spacing-md);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* On the icon rail the label is gone, so the count rides the icon's top-right
   corner, ringed in the sidebar's own colour so it reads as a separate dot.
   The ring is an outline, so it takes the sidebar colour of the element it
   sits in and follows the badge's rounded corners. */
.is-sidebar-collapsed .global-sidebar-nav a .global-sidebar-badge {
    position: absolute;
    top: 2px;
    left: 32px;
    min-width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0 var(--spacing-2xs);
    outline: var(--spacing-2xs) solid var(--sidebar-bg);
}

.global-sidebar-footer {
    padding: var(--spacing-sm) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* One footer row: the Skool CTA stretches across it and the collapse toggle
   sits at its right edge.

   Every control in this row is one height, declared once here. The two are
   neighbours with nothing between them, so a pill even a couple of pixels
   taller than the square reads as a mistake — and left to themselves they
   drift: the pill's height came out of its padding plus whatever line-height
   its tallest child inherited (38.8px against a 28px button), which is not a
   number anyone chose. The collapsed Skool mark takes it too, since it stands
   directly above the toggle in the rail. */
.global-sidebar-footer-actions {
    --sidebar-footer-control-h: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
}

/* "Join Skool" is set in Skool's own logo typeface so the CTA reads as one
   continuous wordmark. The brand ships its wordmark only as outlined paths (no
   font file), so we render the text in a tiny subset of Nunito 800 — the closest
   match to Skool's letterforms — carrying just the glyphs of "Join Skool"
   (J o i n S k l). Scoped family name so it can't leak into the rest of the app. */
@font-face {
    font-family: 'SkoolJoin';
    src: url("../../fonts/skool-join.ffcc88916947.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Skool community CTA, sharing the footer action row with the collapse toggle.
   Expanded reads "Join Skool" (matched wordmark + external-link icon) and takes
   the row's whole width left of that toggle; collapsed swaps the whole CTA for
   the compact "sk" mark centred in the shared 56px icon rail (the same trade
   the brand row makes). */
.global-sidebar-skool {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Expanded: the CTA row; no icon rail. */
.global-sidebar-skool-rail {
    display: none;
}

/* Expanded CTA is a pill button filling the row up to the collapse toggle, so
   it reads as the primary community invite, not a nav row. The label sits hard
   left, the open-in-new-tab icon hard right (space-between). Same frosted-glass
   fill as the collapse button (fg over the sidebar, not a flat white tint) so
   the two neighbours read as one material. No side margins: the row's own
   padding is the inset, and doubling it would pull the pill off the toggle it
   is meant to sit against. Decoration sits on the pill (not the <a>) so the
   collapsed rail stays bare. */
.global-sidebar-skool-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    /* Height from the row, inset from here: vertical padding would fight the
       height it is supposed to produce. */
    height: var(--sidebar-footer-control-h);
    padding-inline: var(--spacing-smd);
    border: 1px solid rgba(var(--sidebar-fg-rgb),0.1);
    border-radius: var(--radius-md);
    background: rgba(var(--sidebar-fg-rgb),0.06);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.global-sidebar-skool:hover .global-sidebar-skool-cta {
    background: rgba(var(--sidebar-fg-rgb),0.12);
    border-color: rgba(var(--sidebar-fg-rgb),0.18);
}

/* "Join Skool" as one text lockup. Both words are set in the matched face at the
   sidebar-menu size so the CTA reads as a peer of the nav items, not an oversized
   banner. "Join" is white; "Skool" carries the real logo colours per letter. They
   share a baseline so they read as a single lockup. */
.global-sidebar-skool-lockup {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-family: 'SkoolJoin', var(--font-family);
    font-weight: 800;
    font-size: var(--font-size-base);
    line-height: 1;
    /* Tightened slightly so the two words read as one lockup. */
    letter-spacing: -0.005em;
}

.global-sidebar-skool-join {
    color: var(--sidebar-text);
}

/* "Skool" rendered as text (not the fixed lowercase artwork) so the S can be
   capitalised, each letter tinted to the real Skool logo palette. These five are
   Skool's own brand colors — a foreign logo, not our design system — so they have
   no --token to map to and stay raw on purpose (baselined in css_standards). */
.global-sidebar-skool-name span:nth-child(1) { color: #263397; }
.global-sidebar-skool-name span:nth-child(2) { color: #D3513E; }
.global-sidebar-skool-name span:nth-child(3) { color: #E0B467; }
.global-sidebar-skool-name span:nth-child(4) { color: #6BB7EE; }
.global-sidebar-skool-name span:nth-child(5) { color: #C45946; }

/* Open-in-new-tab icon — this link opens the community in a new tab, so the
   box-arrow says exactly that. Sits at the pill's right edge (space-between on
   the parent) and nudges out slightly on hover. */
.global-sidebar-skool-arrow {
    font-size: var(--font-size-base);
    color: var(--sidebar-text-muted);
    transition: transform var(--transition-fast);
}

.global-sidebar-skool:hover .global-sidebar-skool-arrow {
    transform: translateX(2px);
}

/* Collapsed mark, square, matching the toggle stacked below it. */
.global-sidebar-skool-icon {
    width: var(--sidebar-footer-control-h);
    height: var(--sidebar-footer-control-h);
    border-radius: var(--radius-md);
    display: block;
}

.is-sidebar-collapsed .global-sidebar-skool-cta {
    display: none;
}

.is-sidebar-collapsed .global-sidebar-skool-rail {
    display: flex;
}

/* Profile row: just the profile button now (the notification bell moved to
   the header bar). Kept as its own flex row rather than folded into the
   button so the impersonation banner below can share the same rhythm. */
.global-sidebar-profile-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-right: var(--spacing-sm);
    position: relative;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.global-sidebar-profile-row .global-sidebar-profile {
    flex: 1;
    min-width: 0;
}

.global-sidebar-profile {
    display: flex;
    align-items: center;
    padding: var(--spacing-xsm) 0 var(--spacing-sm) var(--spacing-xs);
    margin-left: calc(-1 * var(--spacing-xs));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.global-sidebar-profile:hover {
    background: rgba(var(--sidebar-fg-rgb),0.08);
}

/* Sidebar profile face — geometry now comes from `.global-avatar
   .global-avatar--sm` (components/avatar.css). What survives here is the SKIN
   only: the sidebar's own themed fill and text color, which no platform fill
   modifier can express because they follow the per-org sidebar tokens.
   img.sidebar-profile-photo is gone — `img.global-avatar` covers it. */
.global-sidebar-profile-avatar {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
}

.global-sidebar-profile-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.global-sidebar-profile:focus {
    color: inherit;
}

/* The name now owns the row (the email line was dropped), so it reads a touch
   larger and heavier. */
.global-sidebar-profile-name {
    font-weight: 650;
    font-size: var(--font-size-base);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sidebar-text);
}

/* Impersonation indicator: the retired top banner, relocated into the sidebar
   as a persistent full-width block directly under the profile row. Shown only
   while impersonating (request.user is the target, so the avatar/name reuse the
   .global-sidebar-profile-avatar treatment above for a cohesive look). Wears the
   org-accent --brand-highlight to match the Impersonate start button — the
   whole impersonate feature reads as one family — and leaves red to Logout.
   Hosts the sole Stop control. */
.global-sidebar-impersonate {
    display: flex;
    align-items: center;
    background: var(--brand-highlight);
    color: var(--brand-highlight-fg);
}

.global-sidebar-impersonate-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
}

.global-sidebar-impersonate-name {
    font-weight: var(--font-weight-medium);
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar-impersonate-stop {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--brand-highlight-fg);
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar-impersonate-stop:hover {
    color: var(--brand-highlight-fg);
    filter: brightness(0.9);
}

/* Profile drawer: wraps the profile row + a click-to-reveal sign-out shelf.
   Closed: only the profile row is visible. Open: the .global-sidebar-profile-signout
   shelf grows from 0 → its natural height. Because the sidebar footer is
   pinned to the viewport bottom by flex layout, the drawer expands UPWARD —
   the avatar visually slides up while the sign-out reveals at the new bottom. */
.global-sidebar-profile-drawer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.global-sidebar-profile {
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

/* Actions shelf: collapsed by default, animates open via max-height + opacity.
   Houses the Impersonate (when enabled) and Logout buttons stacked vertically.
   max-height is generous enough for both buttons; the actual height is bounded
   by content. */
.global-sidebar-profile-actions {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 220ms ease-out, opacity 180ms ease-out;
}

.global-sidebar-profile-drawer.is-open .global-sidebar-profile-actions {
    max-height: 8rem;
    opacity: 1;
    pointer-events: auto;
}

.global-sidebar-profile-signout-form {
    margin: 0;
}

/* Shared metrics for action buttons (Impersonate, Logout). Each row is a
   full-width banner that aligns its icon with the avatar's icon-rail above. */
.global-sidebar-profile-action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-sm) 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                filter var(--transition-fast);
}

.global-sidebar-profile-action-btn:focus-visible {
    outline: 2px solid var(--sidebar-text);
    outline-offset: -2px;
}

.global-sidebar-profile-action-btn .bi {
    font-size: var(--font-size-base);
}

.global-sidebar-profile-action-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Impersonate row: per-tenant brand-highlight accent so the action is
   recognizable without competing with the red Logout below for "danger"
   semantics. --brand-highlight is the brightest org-defined accent (paired
   with --brand-highlight-fg). Both default in tokens.css and are overridden per
   tenant by the inline :root base.html emits when brand_colors is set. */
.global-sidebar-profile-impersonate-btn {
    background: var(--brand-highlight);
    color: var(--brand-highlight-fg);
}

.global-sidebar-profile-impersonate-btn:hover {
    filter: brightness(0.92);
    color: var(--brand-highlight-fg);
}

.global-sidebar-profile-impersonate-btn:active {
    filter: brightness(0.85);
}

/* Logout: solid danger banner, white text. The strongest visual signal in the
   sidebar — by design, it should be unmissable and unmistakable. */
.global-sidebar-profile-signout-btn {
    background: var(--color-error);
    color: #fff;
}

.global-sidebar-profile-signout-btn:hover {
    filter: brightness(0.92);
    color: #fff;
}

.global-sidebar-profile-signout-btn:active {
    filter: brightness(0.85);
}

.global-sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-footer-control-h);
    height: var(--sidebar-footer-control-h);
    border-radius: var(--radius-button);
    background: rgba(var(--sidebar-fg-rgb),0.06);
    border: 1px solid rgba(var(--sidebar-fg-rgb),0.1);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.global-sidebar-collapse-btn:hover {
    background: rgba(var(--sidebar-fg-rgb),0.12);
    color: var(--sidebar-text);
}

.global-sidebar-collapse-btn i {
    /* Center the glyph itself: making the <i> a flex box drops Bootstrap Icons'
       ::before vertical-align: -.125em, which otherwise rode the icon high of
       center inside the flex button (the gear looked too high). */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    line-height: 1;
}

.global-sidebar-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-button);
    background: rgba(var(--sidebar-fg-rgb),0.08);
    border: 1px solid rgba(var(--sidebar-fg-rgb),0.1);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.global-sidebar-settings-btn:hover {
    background: rgba(var(--sidebar-fg-rgb),0.15);
    color: var(--sidebar-text);
    border-color: rgba(var(--sidebar-fg-rgb),0.2);
}

.global-sidebar-settings-btn i {
    font-size: var(--font-size-base);
}

.global-sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    z-index: var(--z-scrim);
}

.global-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    position: relative;
    z-index: 1;
}

.global-sidebar-toggle:hover {
    background: var(--brand-primary);
    color: var(--brand-primary-fg);
    border-color: var(--brand-primary);
}

.global-sidebar-toggle:focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.global-sidebar-toggle i {
    font-size: var(--font-size-md);
}

.global-sidebar-close {
    display: none;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(var(--sidebar-fg-rgb),0.15);
    border-radius: var(--radius-md);
    background: rgba(var(--sidebar-fg-rgb),0.1);
    color: var(--sidebar-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
}

.global-sidebar-close:hover {
    background: var(--sidebar-hover-bg);
}

/* Desktop global-sidebar-collapse-btn and Sidebar Collapsed State are in main.css (layout/responsive section) */

/* The Help list exists for the compact shell only, where the header's support
   icon is the thing that got squeezed out; the block below turns it on. The
   whole <ul> hides, so the wide sidebar carries no empty list box. */
.global-sidebar-nav .global-sidebar-help {
    display: none;
}

/* ── Compact shell (<1024px) ────────────────────────────────────────────────
   Off-canvas sidebar: rows reach the touch height, the close is a 44 square,
   and the Help row appears. Stays LAST in the file. */
@media (max-width: 1023px) {
    .global-sidebar-nav a {
        min-height: var(--control-h-touch);
    }

    .global-sidebar-nav .global-sidebar-help {
        display: block;
    }

    .global-sidebar-close {
        width: var(--control-h-touch);
        height: var(--control-h-touch);
    }

    /* The account row and its Logout / Impersonate shelf are thumb targets
       in the off-canvas sidebar too. */
    .global-sidebar-profile,
    .global-sidebar-profile-action-btn {
        min-height: var(--control-h-touch);
    }
}