/* Sidebar collapse behavior (desktop) — extracted from theme.css (FE-2).
 *
 * Collapsed: a super-slim full-height strip stays in the layout (the page
 * reserves only its width — nothing gets overlapped at rest). Hovering
 * the strip slides it out to an icon-only rail; hovering an icon flies
 * its name out further (label rules below). Clicking the toggle at the
 * rail's end materializes the full sidebar.
 *
 * The `.sidebar-collapsed` / `body.sidebar-is-collapsed` classes come
 * from sidebar_controller.js. Width tokens (--sidebar-width*) and the
 * shadow/z tokens live in theme.css's token block. */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    width: var(--sidebar-width);
    transition: width 0.2s ease;
  }

  .navbar-vertical.navbar-expand-lg.sidebar-collapsed {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width-strip);
    height: 100vh;
    border: none;
    border-inline-end: 1px solid var(--tblr-border-color);
    border-radius: 0;
    /* A soft cast into the page plus fine 45° brand-blue hairline
       stripes — the strip reads as a deliberate, slightly raised tech
       element. */
    box-shadow: var(--shadow-inline-end);
    background-color: var(--tblr-bg-surface);
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--traqx-blue-600) 9%, transparent) 0 1px,
      transparent 1px 7px
    );
    /* visible: the item labels slide out PAST the rail's right edge. */
    overflow: visible;
    z-index: var(--traqx-z-rail);
    transition: width 0.2s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.2s ease;
  }

  .navbar-vertical.navbar-expand-lg.sidebar-collapsed:hover {
    width: var(--sidebar-width-collapsed);
    box-shadow: var(--shadow-lg);
    /* The rail itself stays clean for icon legibility. */
    background-image: none;
  }

  /* Collapsed: remove container padding so all icons share the same center axis */
  .navbar-vertical.sidebar-collapsed .container-fluid {
    padding-inline: 0;
  }

  /* Collapsed at rest, the floating button is just the Traqx icon: the
     expand toggle moves to the very end of the hover rail and only
     fades in while hovering. */
  .navbar-vertical.sidebar-collapsed .sidebar-toggle {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .navbar-vertical.sidebar-collapsed:hover .sidebar-toggle {
    opacity: 1;
    visibility: visible;
  }

  /* Reserve the rail's end for the pinned toggle. */
  .navbar-vertical.sidebar-collapsed:hover .container-fluid {
    padding-block-end: 2.75rem;
  }

  /* The nav and the user item stay parked while the strip is at rest and
     fade in as the rail slides out (slight delay so they appear into the
     widened rail, not into the slim strip). */
  .navbar-vertical.sidebar-collapsed .navbar-collapse,
  .navbar-vertical.sidebar-collapsed .container-fluid > .nav-item.dropdown {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease 0.05s, visibility 0.2s;
  }

  .navbar-vertical.sidebar-collapsed:hover .navbar-collapse {
    opacity: 1;
    visibility: visible;
  }

  .navbar-vertical.sidebar-collapsed:hover .container-fluid > .nav-item.dropdown {
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }

  /* The user menu opens BESIDE the rail (dropdown-menu-end would push it
     off the left viewport edge), bottom-aligned with the avatar.
     !important throughout: Bootstrap's .dropdown-menu-end positions with
     its own !important-strength inline logic in the navbar context. */
  .navbar-vertical.sidebar-collapsed .container-fluid > .nav-item.dropdown .dropdown-menu {
    inset-inline-start: calc(100% + 0.5rem) !important; /* beats dropdown-menu-end */
    inset-inline-end: auto !important; /* beats dropdown-menu-end */
    inset-block-end: 0 !important; /* beats dropup */
    inset-block-start: auto !important; /* beats dropup */
  }

  /* Page wrapper margin adjustment.
     !important: mirrors the pre-existing theme rule it replaces — Tabler
     sets the wrapper margin with higher-specificity rules. */
  .page-wrapper {
    margin-inline-start: var(--sidebar-width) !important; /* beats Tabler wrapper rule */
    transition: margin-left 0.2s ease;
  }

  /* The page reserves exactly the slim strip; the hover rail expands as
     an overlay past it. */
  body.sidebar-is-collapsed .page-wrapper {
    margin-inline-start: var(--sidebar-width-strip) !important; /* beats Tabler wrapper rule */
  }

  /* Collapsed: hide text elements */
  .navbar-vertical.sidebar-collapsed .nav-link-title,
  .navbar-vertical.sidebar-collapsed .sidebar-text {
    display: none !important; /* beats Bootstrap d-xl-block utility (!important) */
  }

  /* Collapsed: show icon logo, hide full logo */
  .navbar-vertical.sidebar-collapsed .sidebar-logo-full {
    display: none;
  }

  .navbar-vertical.sidebar-collapsed .sidebar-logo-icon {
    display: block;
  }

  /* Collapsed: compact centered header — just the logo button */
  .navbar-vertical.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-block: 0.5rem;
  }

  .navbar-vertical.sidebar-collapsed .sidebar-header .navbar-brand {
    flex: none;
    display: flex;
    justify-content: center;
  }

  /* Collapsed: center nav links — high specificity to override Tabler defaults */
  .navbar-vertical.navbar-expand-lg.sidebar-collapsed .navbar-collapse .navbar-nav .nav-link {
    justify-content: center;
    padding-inline: 0;
  }

  .navbar-vertical.sidebar-collapsed .nav-link .nav-link-icon {
    margin-inline-end: 0;
  }

  /* Collapsed: remove active left border */
  .navbar-vertical.sidebar-collapsed .nav-item.active .nav-link::before {
    display: none;
  }

  /* Collapsed: center user dropdown, only show avatar */
  .navbar-vertical.sidebar-collapsed .dropdown .nav-link {
    justify-content: center;
  }

  /* Tooltips on hover */
  .navbar-vertical.sidebar-collapsed .nav-item {
    position: relative;
  }

  /* The item's name slides out to the right on hover — parked slightly
     left and faded, it glides into place like a small drawer. */
  .navbar-vertical.sidebar-collapsed .nav-link[data-title]::after {
    content: attr(data-title);
    position: absolute;
    inset-inline-start: 100%;
    inset-block-start: 50%;
    transform: translate(-8px, -50%);
    margin-inline-start: 12px;
    padding: 6px 12px;
    background-color: var(--gxp-slate-800);
    color: var(--tblr-white);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--tblr-border-radius);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease,
                transform 0.18s cubic-bezier(0.2, 0, 0, 1),
                visibility 0.18s;
    z-index: var(--traqx-z-tooltip);
    pointer-events: none;
  }

  .navbar-vertical.sidebar-collapsed .nav-link[data-title]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}

/* Nav group headings (Navigation::SectionComponent): quiet uppercase
   labels between item groups; the collapsed rail swaps the text for a
   hairline divider so the grouping survives icon-only mode. */
.navbar-vertical .nav-section-title {
  list-style: none;
  padding: 1.1rem 0.75rem 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

.navbar-vertical .navbar-nav .nav-section-title:first-child {
  padding-block-start: 0.35rem;
}

@media (min-width: 992px) {
  .navbar-vertical.sidebar-collapsed .nav-section-title-text {
    display: none;
  }

  .navbar-vertical.sidebar-collapsed .nav-section-title {
    padding: 0.35rem 0.6rem;
  }

  .navbar-vertical.sidebar-collapsed .nav-section-title::after {
    content: "";
    display: block;
    border-block-start: 1px solid var(--tblr-border-color);
  }

  .navbar-vertical.sidebar-collapsed .nav-section-title:first-child {
    padding: 0;
  }

  .navbar-vertical.sidebar-collapsed .nav-section-title:first-child::after {
    display: none;
  }
}