/*
 * Cloudflare-style in-place accordion for the sidebars (app, admin, docs).
 * Behaviour lives in static/javascript/helpers/sidebar_accordion.js; markup
 * follows its data-sa-* contract:
 *   [data-sidebar-accordion]   sidebar root
 *   .sa-toggle[data-sa-toggle] section row (a <button>), aria-expanded + aria-controls
 *   .sa-caret                  caret inside the row
 *   .sa-panel[data-sa-panel]   the section's items, `hidden` when closed
 *   .sa-current-section        added by JS to rows above the current page
 * The JS animates panel height (200 ms, ease-out); this file only clips the
 * panel while it moves, so the height never needs a CSS transition here (a
 * transition would fight the JS animation when a click reverses it).
 */

/* ---------- Section rows ---------- */
/* Rows centre their content, so links and section buttons line up when a
   minimum touch height makes rows taller than their text. */
[data-sidebar-accordion] .nav-link {
  display: flex;
  align-items: center;
}
[data-sidebar-accordion] .nav-link > .d-flex {
  flex: 1 1 auto;
  min-width: 0;
}
[data-sidebar-accordion] .sa-toggle {
  /* A button shrinks to its content; stretch it like the block links. */
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  text-align: start;
  cursor: pointer;
}
[data-sidebar-accordion] .sa-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin-inline-start: auto;
  padding-inline-start: 0.5rem;
  box-sizing: content-box;
  color: var(--phoenix-navbar-vertical-dropdown-indicator-color);
}
/* In the phone drawer rows run edge to edge; keep the caret off the edge. */
@media (max-width: 991.98px) {
  [data-sidebar-accordion] .nav-item-wrapper > .sa-toggle {
    padding-inline-end: 1.5rem;
  }
}
[data-sidebar-accordion] .sa-caret > * {
  transform: scale(0.8);
}
/* RTL: the closed caret points left (the inline end); open still points down,
   because the open rule below is more specific. */
[dir="rtl"] [data-sidebar-accordion] .sa-caret {
  transform: rotate(180deg);
}
[data-sidebar-accordion] .sa-toggle[aria-expanded="true"] > .sa-caret,
[data-sidebar-accordion] .sa-toggle[aria-expanded="true"] > .d-flex > .sa-caret {
  transform: rotate(90deg);
}

/* ---------- Lists ---------- */
/* Django's /admin/ pages include the admin sidebar after Django's own
   admin/css/base.css, whose global rules give every ul > li a square bullet
   and padding, li a fixed font size and line height, and ul a margin. Reset
   them to what the sidebar gets everywhere else. */
[data-sidebar-accordion] li {
  list-style: none;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
[data-sidebar-accordion] .navbar-nav {
  margin-top: 0;
}

/* ---------- Panels ---------- */
[data-sidebar-accordion] .sa-panel {
  overflow: hidden;
  list-style: none;
  margin: 0.125rem 0 0.25rem;
  padding: 0;
  /* Thin guide line beside the open items, under the parent row's icon. */
  margin-inline-start: 3rem;
  margin-inline-end: 0.75rem;
  border-inline-start: 1px solid var(--phoenix-border-color);
  font-size: 0.8125rem;
}
[data-sidebar-accordion] .sa-panel .sa-panel {
  margin-inline-start: 1rem;
  margin-inline-end: 0;
}
/* Items inside a panel: lighter than the section rows, indented from the
   guide line. Higher specificity than Phoenix's .navbar-nav .nav-link rules. */
.navbar-vertical[data-sidebar-accordion] .navbar-vertical-content .navbar-nav .sa-panel .nav-link,
[data-sidebar-accordion] .sa-panel .nav-link {
  margin: 0.0625rem 0 0.0625rem 0.375rem;
  padding: 0.3rem 0.625rem;
  font-weight: 400;
  white-space: normal;
}
[dir="rtl"] .navbar-vertical[data-sidebar-accordion] .navbar-vertical-content .navbar-nav .sa-panel .nav-link,
[dir="rtl"] [data-sidebar-accordion] .sa-panel .nav-link {
  margin: 0.0625rem 0.375rem 0.0625rem 0;
}
[data-sidebar-accordion] .sa-panel .nav-link .nav-link-text {
  padding-inline-start: 0;
}

/* ---------- Current page ---------- */
/* Weight plus colour, so the current item is not marked by colour alone. */
.navbar-vertical[data-sidebar-accordion] .navbar-vertical-content .navbar-nav .nav-link[aria-current="page"],
[data-sidebar-accordion] .nav-link[aria-current="page"] {
  font-weight: 600;
  color: var(--phoenix-navbar-vertical-link-active-color);
  background-color: var(--phoenix-navbar-vertical-link-hover-bg);
}
/* Phoenix scrolls the active link to the top of the sidebar (smoothly) when
   the page loads. This margin, about one sidebar height, turns that into
   "scroll only if the current item is below the visible area, and then
   just far enough to show it", so the sidebar does not move on most loads.
   The 7rem: the scrolling area is 100vh minus the top bar minus Phoenix's
   4rem footer, so this margin leaves the last 3rem of that area below the
   link's top, room for the link itself (about 2rem in a panel) and a
   little space under it. */
[data-sidebar-accordion] .navbar-vertical-content .nav-link[aria-current="page"] {
  scroll-margin-top: calc(100vh - var(--phoenix-navbar-top-height) - 7rem);
}
[data-sidebar-accordion] .sa-toggle.sa-current-section,
[data-sidebar-accordion] .sa-toggle.sa-current-section .nav-link-icon {
  color: var(--phoenix-navbar-vertical-link-active-color);
}

/* ---------- Keyboard focus ---------- */
[data-sidebar-accordion] .nav-link:focus-visible {
  outline: 2px solid var(--phoenix-primary);
  outline-offset: -2px;
}

/* ---------- Motion ---------- */
/* data-sa-ready is set by the JS two frames after init, so carets of the
   section opened on page load do not rotate in. */
@media (prefers-reduced-motion: no-preference) {
  [data-sidebar-accordion][data-sa-ready] .sa-caret {
    transition: transform 200ms ease-out;
  }
}

/* ---------- Shrunk (icons-only) mode, desktop only ---------- */
@media (min-width: 992px) {
  /* Phoenix makes the shrunk bar position: absolute, so its icons would
     scroll away with the page while the bar background stays. Pin it, but
     only while every row fits: the JS sets data-sa-rail-overflow when the
     window is too short, and the rail then keeps Phoenix's layout and
     scrolls with the page so no row is out of reach. */
  .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg[data-sidebar-accordion]:not([data-sa-rail-overflow]) {
    position: fixed;
    height: 100vh;
    min-height: 0;
  }
  /* Unpinned rail: rows scroll with the page under the fixed top bar and
     footer, so keyboard focus and scrollIntoView stop clear of both. */
  html.navbar-vertical-collapsed [data-sidebar-accordion][data-sa-rail-overflow] .nav-item-wrapper > .nav-link {
    scroll-margin-top: var(--phoenix-navbar-top-height);
    scroll-margin-bottom: 4rem;
  }
  html.navbar-vertical-collapsed [data-sidebar-accordion] .sa-panel,
  html.navbar-vertical-collapsed [data-sidebar-accordion] .sa-caret,
  html.navbar-vertical-collapsed [data-sidebar-accordion] .parent-wrapper,
  html.navbar-vertical-collapsed [data-sidebar-accordion] .collapsed-nav-item-title,
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-link-text-wrapper {
    display: none !important;
  }
  html.navbar-vertical-collapsed [data-sidebar-accordion] .sa-toggle {
    width: auto;
  }
  /* Phoenix only highlights shrunk icons on hover through its flyout rules;
     give every row the same hover background without the flyout. */
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-item-wrapper > .nav-link {
    position: relative;
  }
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-item-wrapper > .nav-link:hover {
    background-color: var(--phoenix-navbar-vertical-link-hover-bg);
  }
  /* Name tip: a label only, never a menu. */
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-item-wrapper > .nav-link[data-sa-label]::after {
    content: attr(data-sa-label);
    display: none;
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 0.5rem);
    transform: translateY(-50%);
    z-index: 1080;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--phoenix-border-color);
    border-radius: 0.375rem;
    background: var(--phoenix-emphasis-bg);
    color: var(--phoenix-emphasis-color);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
  }
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-item-wrapper > .nav-link[data-sa-label]:hover::after,
  html.navbar-vertical-collapsed [data-sidebar-accordion] .nav-item-wrapper > .nav-link[data-sa-label]:focus-visible::after {
    display: block;
  }
}