/* ============================================================
   Varial Layout — structural shell (sidebar + content)
   Loaded after bootstrap.min.css. Replaces Falcon's layout layer.
   No !important. No Falcon dependency. Zero dead code.
   ============================================================ */

/* ── 1. Sidebar toggle button sizing ────────────────────────────────────
   Used by the sidebar header toggle (sidebar.html .navbar-vertical-toggle).
   ─────────────────────────────────────────────────────────────────────── */
.navbar-toggler-humburger-icon {
  padding: 0.25rem 0.5rem;
  line-height: 1;
  /* Guarantee a 44x44 tap target — this is the only nav control on mobile
     (sidebar-only nav, #3188). Icon stays centred at its intrinsic size. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ── 2. Avatar ──────────────────────────────────────────────────────────
   Falcon's .avatar / .avatar-xl / .avatar-name. Replaced with 6 rules.
   ─────────────────────────────────────────────────────────────────────── */
.avatar {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
}
.avatar-xl {
  width: 2rem;
  height: 2rem;
}
.avatar-name {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--varial-primary, #1B3AA0);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Unverified-email notification dot — sits top-right of the sidebar avatar */
.avatar-verification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--bs-danger);
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: block;
}

/* ── 3b. Sidebar header strip (brand + toggle) ──────────────────────────
   Replaces .d-flex.align-items-center — owning the class avoids fighting
   Bootstrap's d-flex !important. Visible at every breakpoint: it owns the
   sidebar toggle (burger at <1200px, pin/favicon at desktop).
   ─────────────────────────────────────────────────────────────────────── */
.navbar-vertical-header {
  display: flex;
  align-items: center;
  /* Fixed height so the nav content starts at the same Y in all three states.
     Derived from: brand SVG height (34px) + Bootstrap .navbar-brand padding-y
     (0.3125rem × 2 = ~10px) = ~44px. Use 2.875rem (46px) for a tiny margin. */
  min-height: 2.875rem;
  flex-shrink: 0;
}

/* ── 4. Sidebar structure ───────────────────────────────────────────────
   At desktop (≥1200px): fixed left edge, full height, scrollable nav content.
   At tablet (<1200px): Bootstrap's navbar-expand-xl collapse mechanism handles
   it as a stacked dropdown — no positioning needed.
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .navbar-vertical {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: var(--vrl-sidebar-w, 12.625rem);
    z-index: 1021;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Bootstrap .navbar-expand-xl sets center — override so .navbar-collapse fills full sidebar width */
    overflow: hidden;
    transition: width 0.2s ease;
    /* Sidebar carries role="button" for the tablet/mobile whole-navbar tap
       target. At desktop the click/keyboard handlers are no-ops, so the
       generic `[role="button"] { cursor: pointer }` rule from base styles
       would be misleading — reset to default arrow. */
    cursor: auto;
  }

  /* At desktop, Bootstrap's .navbar-expand-xl already sets
     .navbar-collapse { display: flex !important }. The nav content
     should fill remaining height and scroll. Bootstrap also sets
     align-items: center on the navbar — override to stretch so
     .navbar-vertical-content (SimpleBar) fills the full sidebar width. */
  .navbar-vertical .navbar-collapse {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

/* Sidebar inner scroll container (SimpleBar target) */
.navbar-vertical-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── 5. Content area ────────────────────────────────────────────────────
   Offset left to clear the fixed sidebar at desktop.
   ─────────────────────────────────────────────────────────────────────── */
.content {
  min-height: 100vh;
  transition: margin-left 0.2s ease;
  display: flex;
  flex-direction: column;
}

/* Cap content width and own horizontal padding so it doesn't stretch on
   ultra-wide screens and so padding is adjustable in one place.
   The direct-child selector avoids affecting any nested container-fluids.
   Edit --vrl-content-px to change the side padding app-wide. */
.content > .container-fluid {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vrl-content-px, 0.75rem);
  padding-right: var(--vrl-content-px, 0.75rem);
}

/* Main content block grows to fill remaining height, pushing footer down.
   py-3 distinguishes the app-content wrapper from the footer's container-fluid,
   avoiding :first-of-type which breaks when impersonation banners appear first. */
.content > .container-fluid.py-3 {
  flex: 1;
}

@media (min-width: 1200px) {
  .content {
    margin-left: var(--vrl-sidebar-w, 12.625rem);
  }

  /* When the sidebar block is suppressed (public/marketing pages), no
     .navbar-vertical exists — reset the offset so content is not shifted. */
  body:not(:has(.navbar-vertical)) .content {
    margin-left: 0;
  }
}

/* ── 7. Collapsed state (desktop only) ──────────────────────────────────
   html.navbar-vertical-collapsed → sidebar narrows to icon-rail.
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .navbar-vertical-collapsed .navbar-vertical {
    width: var(--vrl-sidebar-collapsed, 3.125rem);
  }
  .navbar-vertical-collapsed .content {
    margin-left: var(--vrl-sidebar-collapsed, 3.125rem);
  }

  /* Hide nav labels and section headings in icon-rail (collapsed) state.
     Sidebar is overflow:hidden so they're visually clipped, but we also set
     visibility:hidden so Playwright / screen-readers treat them as hidden. */
  .navbar-vertical-collapsed .navbar-vertical .nav-link-text,
  .navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label,
  .navbar-vertical-collapsed .navbar-vertical .sidebar-footer-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }

  /* Collapse the footer label's physical height when in icon-rail mode so
     the divider line stays flush with the first icon row. */
  .navbar-vertical-collapsed .navbar-vertical .sidebar-footer-label {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  /* In collapsed icon-rail mode the section label text is already opacity:0
     (rule above). Keep the <li> visible so the <hr> provides section spacing;
     collapse just the top padding so it doesn't create too large a gap. */
  .navbar-vertical-collapsed .navbar-vertical .navbar-vertical-label {
    padding-top: 0.375rem;
    padding-bottom: 0;
  }

}

/* ── 8b. Sidebar nested submenu (VAR / Possies) ─────────────────────────
   Split-row: the VAR nav-link and the chevron toggle are separate elements
   so each can be clicked independently. Bootstrap collapse drives open/close.
   In icon-rail (collapsed) mode the submenu and toggle are hidden.
   ─────────────────────────────────────────────────────────────────────── */

/* Split row: main nav link + separate chevron toggle */
.nav-link-split-row {
  display: flex;
  align-items: stretch;
}

.nav-link-split-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0;
  border-radius: 0.375rem;
  padding-right: 0.125rem;
}

.nav-link-split-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.nav-link-split-toggle:hover,
.nav-link-split-toggle:focus-visible,
.nav-link-split-toggle[aria-expanded="true"] {
  color: #fff;
  outline: 0;
}

.nav-submenu-caret {
  font-size: 0.625rem;
  opacity: 0.65;
  transition: transform 0.25s ease;
}

.nav-link-split-toggle[aria-expanded="true"] .nav-submenu-caret {
  transform: rotate(180deg);
}

.nav-submenu {
  margin-top: 0.0625rem;
  margin-bottom: 0.375rem;
}

.nav-submenu .nav-link-submenu {
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 2.75rem;
  font-size: 0.8125rem;
}

.nav-submenu .nav-link-submenu .nav-link-icon {
  min-width: 1rem;
  display: inline-flex;
  justify-content: center;
}

@media (min-width: 1200px) {
  .navbar-vertical-collapsed
    .nav-item-submenu
    .nav-submenu {
    display: none;
  }

  .navbar-vertical-collapsed
    .nav-link-split-toggle {
    display: none;
  }
}

/* ── 9. Tablet (<1200px) ────────────────────────────────────────────────
   The sidebar header (logo + toggle) stays visible at tablet — it owns the
   burger that reveals the sidebar (see the icon-swap rules in 9b below).
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .navbar-vertical {
    margin: 0;
  }
}

/* ── 9b. Tablet/mobile hover-open + tap-to-pin ──────────────────────────
   At <1200px the sidebar is collapsed by default and the pin icon is small
   & undiscoverable. We add two state classes (driven by layout.js):
     .is-hovered  — set on mouseenter (gated until the pointer leaves once
                    after a pin/unpin) and cleared on mouseleave
     .is-pinned   — toggled by tap anywhere on .navbar-vertical that isn't
                    an interactive child; persisted to sessionStorage
   Either class forces the collapsed drawer visible. The whole sidebar gets
   cursor:pointer so the tap affordance is discoverable.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  /* Whole-sidebar tap target — cursor:pointer signals the affordance.
     Bootstrap's links/buttons already define cursor:pointer; form-check
     and bare flex spacers inherit pointer which is what we want
     (clicking them WILL toggle the pin). */
  .navbar-vertical {
    cursor: pointer;
  }
  /* Restore default cursor for inputs only — links/buttons keep pointer. */
  .navbar-vertical input,
  .navbar-vertical textarea,
  .navbar-vertical select {
    cursor: auto;
  }

  /* Focus ring on the sidebar when it's the tap/keyboard target. */
  .navbar-vertical:focus-visible {
    outline: 2px solid var(--varial-primary, #1B3AA0);
    outline-offset: -2px;
  }

  /* Issue 1 fix: Bootstrap's default .navbar sets align-items:center and
     justify-content:space-between, which would center the .navbar-collapse
     drawer horizontally inside .navbar-vertical at <1200px (the desktop
     override at line 119 only applies ≥1200px). Force left-aligned stack. */
  .navbar-vertical {
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Push burger icon to the right-hand side of the header on mobile, with a
     bit of breathing room from the edge. */
  .navbar-vertical-header {
    justify-content: space-between;
    width: 100%;
    padding-right: 0.75rem;
  }
  .navbar-vertical .navbar-collapse {
    align-items: stretch;
    text-align: left;
  }

  /* Drawer open/close animation.
     Bootstrap's .collapse sets display:none; .show flips it. CSS transitions
     don't work on display, so at this breakpoint we override .navbar-collapse
     to always be display:flex but visually closed via max-height/opacity/
     translateY. The state classes (.is-hovered / .is-pinned on .navbar-vertical)
     animate it open. We piggy-back on the parent state class so Bootstrap's
     own .show toggle still works too.
     !important required to defeat Bootstrap's .collapse:not(.show){display:none}
     which is the only place at this breakpoint where state would otherwise win. */
  .navbar-vertical > .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition:
      max-height 280ms ease,
      opacity 200ms ease,
      transform 280ms ease,
      visibility 0s linear 280ms;
  }
  .navbar-vertical.is-hovered > .navbar-collapse,
  .navbar-vertical.is-pinned > .navbar-collapse {
    max-height: 100vh;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    overflow-y: auto;
    transition:
      max-height 320ms ease,
      opacity 240ms ease,
      transform 280ms ease,
      visibility 0s linear 0s;
  }
  /* Respect user motion preferences — disable the animation. */
  @media (prefers-reduced-motion: reduce) {
    .navbar-vertical > .navbar-collapse,
    .navbar-vertical.is-hovered > .navbar-collapse,
    .navbar-vertical.is-pinned > .navbar-collapse {
      transition: none;
    }
  }

  /* Pinned-state hint on the header — subtle inset border so users see the
     pin is active. Uses brand token with fallback. */
  .navbar-vertical.is-pinned .navbar-vertical-header[data-sidebar-header] {
    box-shadow: inset 3px 0 0 var(--varial-accent, #C49A1A);
  }

  /* Toggle icon at tablet/mobile: always the burger (☰) — the universally
     recognised "open menu" affordance on narrow screens. The desktop
     directional chevrons (branding.css, ≥1200px) stay hidden here; the
     burger's open/close state is driven by .is-pinned on .navbar-vertical
     via the same drawer animation above, so the icon itself doesn't swap. */
  .navbar-vertical .navbar-vertical-toggle .vrl-toggle--burger {
    display: inline-flex;
  }
}

/* ── 9c. Tablet/mobile: pin the top navbar above the wizard chrome ───────
   The Spot/VAR wizard chrome is `position: fixed; z-index: 1030` (wizard.css) and
   is pushed to `top: 2.875rem` so it clears the collapsed top navbar. But that
   navbar sat in normal flow with no z-index, so two things broke on narrow screens:
     • expanding the burger dropped the drawer *behind* the fixed chrome — the wizard
       step-nav stayed on top when the top nav should win;
     • scrolling let the navbar slide out from under the fixed chrome, so the step-nav
       overlapped it.
   Pinning the navbar (sticky top:0) and lifting it above the chrome (z-index 1035 >
   1030) fixes both: the drawer overlays the step-nav, and the navbar always renders
   on top of (never under) the chrome. */
@media (max-width: 1199.98px) {
  .navbar-vertical {
    position: sticky;
    top: 0;
    z-index: 1035;
  }
}

/* ── 11. Sidebar footer — region + user, pinned to bottom ───────────────
   Lives inside .navbar-collapse (flex column), after .navbar-vertical-content.
   At desktop it's always visible; at tablet it scrolls with the nav.
   ─────────────────────────────────────────────────────────────────────── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 0.125rem 0;
}

.sidebar-footer-label {
  padding: 0.4rem 0.75rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
}

.sidebar-footer-logout:hover,
.sidebar-footer-logout:focus-visible {
  color: var(--varial-danger, #DC2626);
}

/* Shared button shape for region + user triggers */
.sidebar-footer-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
  --bs-dropdown-caret: none;
}

.sidebar-footer-item::after,
.sidebar-footer-item.dropdown-toggle::after {
  display: none; /* suppress Bootstrap's auto-caret — we use our own chevron icon */
}

.sidebar-footer-item:hover,
.sidebar-footer-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Scale down the avatar in the footer */
.sidebar-footer-item .avatar {
  width: 1.375rem;
  height: 1.375rem;
}

.sidebar-footer-item .avatar-name {
  font-size: 0.6rem;
  line-height: 1;
}

/* Chevron icon inside user button — flips open when dropdown is shown */
.sidebar-footer-user .show .sidebar-footer-chevron,
.sidebar-footer-user.show .sidebar-footer-chevron,
.sidebar-footer-region .show .sidebar-footer-chevron,
.sidebar-footer-region.show .sidebar-footer-chevron {
  transform: rotate(180deg);
}

.sidebar-footer-chevron {
  transition: transform 0.2s ease;
  font-size: 0.6rem;
  opacity: 0.5;
}

/* ── Active-team switch confirmation tick ─────────────────────────────────
   Rendered only on the first render after a team switch (group_just_switched).
   The team icon briefly flips to a green tick (overlaid in the same slot, so no
   layout shift) then fades back — pure CSS, no JS timer. Works in both the
   expanded sidebar and the collapsed icon-rail since it lives on the icon. */
.sidebar-switch-icon {
  position: relative;
}

.sidebar-switch-icon .sidebar-switch-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--varial-success, #16a34a);
  opacity: 0;
  pointer-events: none;
  animation: vrl-switch-confirm 1.8s ease forwards;
}

/* Base team icon fades out while the tick is shown, then back in. */
.sidebar-switch-icon.is-switching .sidebar-switch-base-icon {
  animation: vrl-switch-base-icon 1.8s ease forwards;
}

@keyframes vrl-switch-confirm {
  0% { opacity: 0; transform: scale(0.5); }
  12% { opacity: 1; transform: scale(1.15); }
  22% { transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes vrl-switch-base-icon {
  0%, 75% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-switch-icon .sidebar-switch-confirm,
  .sidebar-switch-icon.is-switching .sidebar-switch-base-icon {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* ── Sidebar nested submenu (DIYvar) ─────────────────────────────────── */
.nav-link-submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  text-align: left;
}

/* Split row: main nav link + separate chevron toggle */
.nav-link-split-row {
  display: flex;
  align-items: stretch;
}

.nav-link-split-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0;
  border-radius: 0.375rem;
  padding-right: 0.125rem;
}

.nav-link-split-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  margin-right: 0.25rem;
  border-radius: 0.375rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.nav-link-split-toggle:hover {
  color: #fff;
}

.nav-link-split-toggle:focus-visible {
  color: #fff;
  outline: 0;
}

.nav-link-split-toggle[aria-expanded="true"] .nav-submenu-caret {
  transform: rotate(180deg);
}

.nav-link-split-toggle[aria-expanded="true"] {
  color: #fff;
}

.nav-submenu-caret {
  font-size: 0.625rem;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.nav-item-submenu > .collapse.show + .nav-submenu-caret,
.nav-item-submenu.open .nav-submenu-caret,
.nav-link-submenu-toggle[aria-expanded="true"] .nav-submenu-caret {
  transform: rotate(180deg);
}

.nav-submenu {
  margin-top: 0.0625rem;
  margin-bottom: 0.375rem;
}

.nav-submenu .nav-link-submenu {
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 2.75rem;
  font-size: 0.8125rem;
}

.nav-submenu .nav-link-submenu .nav-link-icon {
  min-width: 1rem;
  display: inline-flex;
  justify-content: center;
}

@media (min-width: 1200px) {
  .navbar-vertical-collapsed
    .nav-item-submenu
    .nav-submenu {
    display: none;
  }

  .navbar-vertical-collapsed
    .nav-item-submenu
    .nav-submenu-caret {
    display: none;
  }

  .navbar-vertical-collapsed
    .nav-link-split-toggle {
    display: none;
  }
}

/* ── Sidebar footer dropdowns — dark-themed to match sidebar ────────────
   Bootstrap defaults to a white dropdown; the sidebar is #0D1B2E so we
   override every token to a dark palette that feels native to the shell. */
.sidebar-footer .dropdown-menu {
  /* Position: open upward, sized a fraction narrower than the sidebar so the
     menu sits fully inside it. The sidebar is overflow:hidden, so a menu wider
     than --vrl-sidebar-w gets clipped at the right edge (looked cropped). */
  bottom: 100%;
  top: auto;
  margin-bottom: 0.25rem;
  width: calc(var(--vrl-sidebar-w, 12.625rem) - 0.25rem);
  min-width: 0;
  max-width: calc(var(--vrl-sidebar-w, 12.625rem) - 0.25rem);
  /* Dark palette */
  background-color: #1a2e47;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.375rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  /* Override Bootstrap's CSS variable so nested selectors inherit correctly */
  --bs-dropdown-bg: #1a2e47;
  --bs-dropdown-color: rgba(255, 255, 255, 0.85);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.12);
  --bs-dropdown-link-color: rgba(255, 255, 255, 0.78);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(255, 255, 255, 0.14);
  --bs-dropdown-link-disabled-color: rgba(255, 255, 255, 0.3);
}

/* Optional header rows inside the menu (e.g. "Switch account") */
.sidebar-footer .dropdown-header {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.75rem 0.125rem;
}

.sidebar-footer .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-footer .dropdown-item {
  color: rgba(255, 255, 255, 0.78);
  padding: 0.35rem 0.75rem;
  border-radius: 0;
}

.sidebar-footer .dropdown-item:hover,
.sidebar-footer .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-footer .dropdown-item.active,
.sidebar-footer .dropdown-item:active {
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sidebar-footer .dropdown-item.disabled,
.sidebar-footer .dropdown-item:disabled {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* ── Collapsed icon-rail mode — hide footer text, disable dropdowns ─────
   display:none (not opacity/visibility) so justify-content:center
   centres the icon without invisible text taking up flex space.

   Scoped to (min-width: 1200px) because .navbar-vertical-collapsed is a
   desktop-only state (set from localStorage on every page load — see
   layout.js init block). At <1200px the sidebar is a drawer and the
   .is-pinned source-of-truth governs whether it's visible; a stale
   .navbar-vertical-collapsed leftover from a desktop visit must NOT
   collapse the footer there, or a pinned mobile drawer ends up with
   a tiny center-aligned avatar while the rest of the drawer is wide. */
@media (min-width: 1200px) {
  .navbar-vertical-collapsed
    .navbar-vertical .sidebar-footer-item .nav-link-text,
  .navbar-vertical-collapsed
    .navbar-vertical .sidebar-footer .sidebar-footer-chevron {
    display: none;
  }

  /* Keep the collapsed sidebar footer compact */
  .navbar-vertical-collapsed
    .navbar-vertical .sidebar-footer-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Prevent dropdown triggers from opening in icon-rail mode —
     there is no room for a readable menu when the sidebar is 3.5rem wide. */
  .navbar-vertical-collapsed
    .navbar-vertical .sidebar-footer .dropdown-toggle {
    pointer-events: none;
  }
}