/*
 * Sidebar (layouts/sidebar/sidebar.php; behaviour in script/components/sidebar.js), working like GitLab's.
 * 1200px and wider: docked, 256px like GitLab's, or an 88px icon rail. Narrower: an overlay opened from the header.
 * Dark in both modes; colours come from the --cf-sidebar-* tokens, which follow the brand only.
 */
.sidebar {
  --sb-width: 256px;
  --sb-rail: 88px;
  --sb-ease: cubic-bezier(.215, .61, .355, 1);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  width: var(--sb-width);
  border-radius: 0 16px 0 0;
  background: var(--cf-sidebar-bg);
  color: var(--cf-sidebar-color);
  font-size: var(--cf-font-size);
  line-height: 1.25;
  transition: width .2s var(--sb-ease);
}
.sidebar :focus-visible,
.sidebar-flyout :focus-visible {
  outline: var(--cf-focus-ring-width) solid var(--cf-sidebar-accent);
  outline-offset: -2px;
}

/* ------------------------------------------------------------ regions */
.sidebar-top {
  display: flex;
  flex: none;
  align-items: center;
  height: 72px;
  padding-right: 16px;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 24px;
}
.sidebar-close {
  display: none; /* the overlay's close button, below 1200px */
  margin-left: auto;
  color: var(--cf-sidebar-strong);
}
.sidebar-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cf-sidebar-current-bg) transparent;
}
/* only once settled: nothing fades in while the page loads */
.sidebar.is-ready .sidebar-scroll {
  transition: box-shadow .2s;
}
/* shadows at the top and bottom edge while there is more to scroll */
.sidebar.has-more-above .sidebar-scroll { box-shadow: inset 0 12px 10px -10px rgb(0 0 0 / .45); }
.sidebar.has-more-below .sidebar-scroll { box-shadow: inset 0 -12px 10px -10px rgb(0 0 0 / .45); }
.sidebar.has-more-above.has-more-below .sidebar-scroll {
  box-shadow: inset 0 12px 10px -10px rgb(0 0 0 / .45), inset 0 -12px 10px -10px rgb(0 0 0 / .45);
}
.sidebar-edge {
  display: block;
  height: 1px;
}
.sidebar-footer {
  flex: none;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--cf-sidebar-line);
}
.sidebar-separator {
  height: 0;
  margin: 8px 12px;
  border: 0;
  border-top: 1px solid var(--cf-sidebar-line);
}

/* ------------------------------------------------------------ rows */
.sidebar-items,
.sidebar-sections {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-section,
.sidebar-item {
  position: relative;
}
.sidebar-item {
  display: flex;
  align-items: center;
  border-radius: var(--cf-radius);
}
.sidebar-link,
.sidebar-section-toggle,
.sidebar-rail-toggle {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--cf-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sidebar-section-toggle,
.sidebar-rail-toggle {
  width: 100%; /* a button shrinks to its content otherwise */
}
.sidebar-section .sidebar-link {
  min-height: 36px;
  padding-left: 44px; /* lines up with the section title, after its icon */
}
.sidebar-icon {
  width: 20px;
  height: 20px;
}
.sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-item:hover,
.sidebar-section-toggle:hover,
.sidebar-rail-toggle:hover,
.sidebar-section-toggle.has-flyout {
  background: var(--cf-sidebar-hover-bg);
  color: var(--cf-sidebar-strong);
}

/* current page: stronger row, plus a bar in the brand accent. A closed section, and every section on
   the icon rail, shows the bar on its own row when it holds the current page. */
.sidebar-item:has(> .sidebar-link[aria-current="page"]),
.sidebar-section.has-current:not(.is-expanded) > .sidebar-section-toggle {
  background: var(--cf-sidebar-current-bg);
  color: var(--cf-sidebar-strong);
}
.sidebar-link[aria-current="page"] {
  font-weight: var(--cf-font-weight-semibold);
}
.sidebar-link[aria-current="page"]::before,
.sidebar-section.has-current:not(.is-expanded) > .sidebar-section-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--cf-sidebar-accent);
}

/* ------------------------------------------------------------ sections */
.sidebar-chevron {
  --cf-icon: url(/images/menu-arrow-right.svg);
  width: 10px;
  height: 8px;
  transform: rotate(-90deg);
  transition: transform .2s var(--sb-ease), opacity .1s linear;
}
.sidebar-section.is-expanded > .sidebar-section-toggle .sidebar-chevron {
  transform: none;
}
@media (hover: hover) {
  /* like GitLab: the chevron shows when the row is hovered or focused */
  .sidebar-chevron { opacity: 0; }
  .sidebar-section-toggle:is(:hover, :focus-visible, .has-flyout) .sidebar-chevron { opacity: 1; }
}
.sidebar-collapse {
  overflow: hidden;
  transition: height .2s var(--sb-ease);
}
.sidebar-collapse > .sidebar-items {
  padding: 2px 0 6px;
}
.sidebar-empty {
  margin: 0;
  padding: 8px 12px 10px 44px;
  font-size: var(--cf-font-size-sm);
}

/* ------------------------------------------------------------ pin, grip, move menu */
.sidebar-pin,
.sidebar-grip {
  display: grid;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: var(--cf-radius-sm);
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.sidebar-pin {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
}
/* the name makes room for the pin only while it shows (touch screens: always) */
.sidebar-item:is(:hover, :focus-within) > .sidebar-link {
  padding-right: 36px;
}
.sidebar-pin .icon {
  --cf-icon: url(/images/pin-16.svg);
  width: 16px;
  height: 16px;
}
.sidebar-pin.is-on .icon {
  --cf-icon: url(/images/pin-16-filled.svg);
}
.sidebar-grip {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 24px;
  height: 28px;
  margin-top: -14px;
  cursor: grab;
}
.sidebar-grip .icon {
  --cf-icon: url(/images/grip-16.svg);
  width: 16px;
  height: 16px;
}
.sidebar-item.is-pinned > .sidebar-link {
  padding-left: 44px;
}
.sidebar-item:is(:hover, :focus-within) > :is(.sidebar-pin, .sidebar-grip),
.sidebar-grip[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .sidebar-pin,
  .sidebar-grip { opacity: 1; }
  .sidebar-item > .sidebar-link:has(~ .sidebar-pin) { padding-right: 36px; }
}
.sidebar-pin:hover,
.sidebar-grip:hover {
  background: var(--cf-sidebar-line);
}
/* the grip's Move up / Move down menu (script/components/reorder.js), in the sidebar's colours */
.sidebar .reorder-menu {
  border-color: transparent;
  background: var(--cf-sidebar-flyout-bg);
  color: var(--cf-sidebar-color);
  box-shadow: var(--cf-sidebar-shadow);
}
.sidebar .reorder-menu button:hover:not(:disabled) {
  background: var(--cf-sidebar-hover-bg);
  color: var(--cf-sidebar-strong);
}

/* ------------------------------------------------------------ flyout */
.sidebar-flyout {
  position: fixed;
  z-index: 3;
  padding: 12px 12px 12px 24px; /* an invisible margin that keeps the pointer "inside" near the edges */
  transition: opacity .2s var(--sb-ease);
}
@starting-style {
  .sidebar-flyout { opacity: 0; }
}
.sidebar-flyout-box {
  min-width: 192px;
  max-width: 320px;
  padding: 4px;
  border-radius: var(--cf-radius-lg);
  background: var(--cf-sidebar-flyout-bg);
  color: var(--cf-sidebar-color);
  box-shadow: var(--cf-sidebar-shadow);
}
.sidebar-flyout-title {
  margin: 0;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--cf-sidebar-line);
  margin-bottom: 4px;
  color: var(--cf-sidebar-strong);
  font-weight: var(--cf-font-weight-semibold);
}
.sidebar-flyout .sidebar-items {
  max-height: 70vh;
  overflow-y: auto;
}
.sidebar-flyout .sidebar-link {
  min-height: 36px;
  padding-left: 12px;
}
.sidebar-flyout .sidebar-item:hover {
  background: var(--cf-sidebar-hover-bg);
}
/* the "safe triangle": from the pointer to the flyout's corners, so a diagonal move does not close it */
.sidebar-safe {
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.sidebar-safe polygon {
  fill: transparent;
  pointer-events: auto;
}

/* ------------------------------------------------------------ tooltip (icon rail) */
.sidebar-tooltip {
  position: fixed;
  z-index: 16;
  padding: 6px 10px;
  border-radius: var(--cf-radius-sm);
  background: var(--cf-sidebar-flyout-bg);
  color: var(--cf-sidebar-strong);
  font-size: var(--cf-font-size-sm);
  white-space: nowrap;
  box-shadow: var(--cf-sidebar-shadow);
  pointer-events: none;
}

/* ------------------------------------------------------------ docked: page offset and icon rail */
@media (min-width: 1200px) {
  body:has(> .sidebar) .header {
    padding-left: 241px; /* as with the old 195px sidebar: 15px less than its width */
    transition: padding-left .2s var(--sb-ease, ease);
  }
  body:has(> .sidebar) .content {
    padding-left: 279px;
    transition: padding-left .2s var(--sb-ease, ease);
  }
  body:has(> .sidebar.is-rail) .header { padding-left: 83px; }
  body:has(> .sidebar.is-rail) .content { padding-left: 118px; }

  .sidebar.is-rail { width: var(--sb-rail); }
  .sidebar.is-rail .sidebar-top {
    justify-content: center;
    padding: 0;
  }
  .sidebar.is-rail .sidebar-logo {
    padding: 0;
  }
  .sidebar.is-rail .sidebar-scroll,
  .sidebar.is-rail .sidebar-footer {
    padding-inline: 16px;
  }
  .sidebar.is-rail .sidebar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sidebar.is-rail :is(.sidebar-chevron, .sidebar-pin, .sidebar-grip, .sidebar-collapse) {
    display: none;
  }
  .sidebar.is-rail :is(.sidebar-link, .sidebar-section-toggle, .sidebar-rail-toggle) {
    justify-content: center;
    padding: 0;
  }
  .sidebar.is-rail .sidebar-section.has-current > .sidebar-section-toggle {
    background: var(--cf-sidebar-current-bg);
    color: var(--cf-sidebar-strong);
  }
  .sidebar.is-rail .sidebar-section.has-current > .sidebar-section-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    width: 3px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: var(--cf-sidebar-accent);
  }
  .sidebar.is-rail .sidebar-flyout .sidebar-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .sidebar.is-rail .sidebar-flyout :is(.sidebar-pin) {
    display: grid;
  }
  .sidebar.is-rail .sidebar-flyout .sidebar-link {
    justify-content: flex-start;
    padding: 0 12px;
  }
  .sidebar-rail-toggle .sidebar-icon {
    --cf-icon: url(/images/sidebar-collapse.svg);
    transition: transform .2s var(--sb-ease);
  }
  .sidebar.is-rail .sidebar-rail-toggle .sidebar-icon {
    transform: scaleX(-1);
  }
  .sidebar-overlay {
    display: none;
  }
}

/* ------------------------------------------------------------ narrow: overlay */
@media (max-width: 1199px) {
  .sidebar {
    width: min(80%, 320px);
    border-radius: 0 16px 16px 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s var(--sb-ease), visibility 0s linear .2s;
  }
  .sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform .2s var(--sb-ease), visibility 0s;
  }
  .sidebar-footer {
    display: none; /* the icon rail is for wide screens only */
  }
  .sidebar-close {
    display: inline-flex;
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 14;
    background: rgb(0 0 0 / .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--sb-ease), visibility 0s linear .2s;
  }
  .sidebar.is-open ~ .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s var(--sb-ease), visibility 0s;
  }
  body:has(> .sidebar) .burger-btn {
    display: inline-flex;
  }
  body:has(> .sidebar) .burger-menu {
    display: block; /* only the brand's own image: the other one is hidden with !important */
  }
}
@media (min-width: 901px) and (max-width: 1199px) {
  body:has(> .sidebar) .header { padding-left: 16px; }
  body:has(> .sidebar) .content { padding-left: 32px; }
}

/* while the window is being resized, nothing slides */
.sidebar-resizing :is(.sidebar, .sidebar *, .sidebar-overlay, .header, .content) {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :is(.sidebar, .sidebar *, .sidebar-overlay, .sidebar-flyout) {
    transition: none !important;
  }
}