/*
 * The admin sidebar (views/partials/sidebar.ejs, behaviour in js/sidebar.js),
 * on top of the WowDash rules in style.css. Loaded after it, so a selector of
 * the same weight here wins.
 *
 * The one rule the rest follows: a single row is solid brand colour, and it is
 * the page you are on. The theme also painted an open section's header solid,
 * so an expanded section and the current page looked alike and two rows were
 * lit at once.
 */

/* Logo, search, then the list in whatever height is left, so the search box
   stays put however far down the list has been scrolled. */
.sidebar {
  display: flex;
  flex-direction: column;
}

/* The theme's 1400px width all the way down. At 220px (1200-1399px, every
   1280 and 1366 laptop) and in the 250px drawer, most section names broke
   over two lines. */
@media (max-width: 1649.98px) {
  .sidebar {
    width: 17.1875rem;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .dashboard-main {
    margin-inline-start: 17.1875rem;
  }
}

.sidebar-menu-area {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-block: 0.25rem 1rem;
}

/* --- Find a screen ------------------------------------------------------- */

.sidebar-search {
  position: relative;
  flex: none;
  padding: 0.75rem 1rem 0.5rem;
  border-inline-end: 1px solid var(--neutral-200);
}

.sidebar-search input {
  width: 100%;
  height: 2.375rem;
  padding-inline: 2.25rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary-light);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sidebar-search input::placeholder {
  color: var(--text-secondary-light);
}

.sidebar-search input:focus {
  background-color: var(--white);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.sidebar-search-icon {
  position: absolute;
  inset-inline-start: 1.75rem;
  /* the input's centre: top padding + half its height */
  top: 1.9375rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--text-secondary-light);
  pointer-events: none;
}

.sidebar-search-empty {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary-light);
}

/* While filtering, every section with a match is open at once — the accordion
   only ever shows one — and the rest of the list is out of the way. */
.sidebar-menu .is-filtered-out {
  display: none !important;
}

.sidebar-menu.is-filtering li.dropdown > .sidebar-submenu {
  display: block !important;
}

.sidebar-menu.is-filtering li.dropdown > a::after {
  transform: translateY(-50%) rotate(90deg);
}

/* --- Rows ---------------------------------------------------------------- */

/* The theme spaced a dropdown 0.5rem from the row above and a plain link not at
   all, so the list ran in an uneven rhythm. */
.sidebar-menu > li + li,
.sidebar-menu li.dropdown {
  margin-block-start: 0.125rem;
}

.sidebar-menu li a {
  padding: 0.5rem 0.75rem;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar-menu li a:not(.active-page):hover {
  background-color: var(--neutral-100);
}

.sidebar-menu li a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* An open section is just open: its header keeps the ordinary row colours, and
   only the section holding the current page has its name in brand colour. */
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background-color: transparent;
  color: var(--text-primary-light);
}

.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover {
  color: var(--brand);
}

.sidebar-menu li.dropdown.has-active-page > a {
  color: var(--brand);
  font-weight: 600;
}

/* Room for the arrow, which is positioned over the row rather than beside the
   name: a long name used to run underneath it. */
.sidebar-menu li.dropdown > a {
  padding-inline-end: 2rem;
}

.sidebar-menu li.dropdown > a::after {
  transition: transform 0.2s;
}

/* Open as rendered. The theme only showed a section's items for `open`; the
   server now renders the current page's section `dropdown-open`, the class the
   toggle itself uses, so the two can no longer disagree. */
.sidebar-menu li.dropdown.dropdown-open > .sidebar-submenu {
  display: block;
}

/* A section's items hang off a guide line under its icon, instead of a bullet
   apiece. */
.sidebar-menu .sidebar-submenu {
  margin-block: 0.125rem 0.375rem;
  margin-inline-start: 1.3125rem;
  padding-block-start: 0;
  padding-inline-start: 0.625rem;
  border-inline-start: 1px solid var(--neutral-200);
}

.sidebar-menu .sidebar-submenu li + li {
  margin-block-start: 0.125rem;
}

.sidebar-menu .sidebar-submenu li a {
  padding: 0.375rem 0.75rem;
}

.sidebar-menu .sidebar-submenu li.active-page a {
  background-color: var(--brand);
  color: #fff;
}

/* --- Headings over the blocks of sections -------------------------------- */

.sidebar-menu .sidebar-menu-heading {
  margin-block: 1.125rem 0.375rem;
  padding-inline: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* --- The drawer below 1200px --------------------------------------------- */

/* The dimmed backdrop behind the open drawer. The theme sized it to the body,
   so on a page shorter than the window the bottom of the screen stayed bright.
   Fixed in both states, so it does not jump while it slides away. */
body::after {
  position: fixed;
}

/* --- Folded down to icons ------------------------------------------------- */

.sidebar.active:not(:hover) .sidebar-search {
  display: none;
}

/* Hovering opens the folded sidebar out to full width; the theme brings the
   headings back as inline-block there, which squeezes their margins. */
.sidebar.active:hover .sidebar-menu li.sidebar-menu-heading {
  display: block;
}

/* With the labels hidden a heading would be blank, so each block is set off by
   a rule instead. */
.sidebar.active:not(:hover) .sidebar-menu li.sidebar-menu-heading {
  display: block;
  height: 1px;
  margin: 0.625rem 0.75rem;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  background-color: var(--neutral-200);
}

/* The current page's section is closed while folded, so its icon is what says
   where you are. */
.sidebar.active:not(:hover) .sidebar-menu li.dropdown.has-active-page > a {
  background-color: var(--brand);
  color: #fff;
}