/* The categorised sidebar, once, for every dashboard page.
 *
 * Pairs with pnnav.js, which reorders the items each template already ships
 * and inserts the category headings between them. Only the headings and the
 * scrolling are new here - every rule an item has is still the template's own,
 * on purpose, so no page's sidebar changes colour or spacing because of this
 * file.
 */

/* Twenty-two items do not fit on a laptop the way fourteen did. */
body .sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 130, 200, 0.35) transparent;
  padding-bottom: 24px;
}

body .sidebar::-webkit-scrollbar { width: 8px; }
body .sidebar::-webkit-scrollbar-track { background: transparent; }
body .sidebar::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 200, 0.28);
  border-radius: 8px;
}
body .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(120, 130, 200, 0.45); }

/* A heading is not a row. Every template styles `.sidebar li` as a padded,
   hoverable, clickable thing, so each of those has to be undone here - the
   same reason `.pn-sidebar-sep` in nav.css is written this way.
   `!important` is not decoration: seven of the templates write
   `.sidebar li { padding: 13px 14px !important }`, which outranks any selector
   this file can spell. Without it the rule below kept the row's 26px height and
   drew its gradient across all of it, which is what looked like a blurred bar
   instead of a hairline. */
body .sidebar li.pn-nav-cat,
body .sidebar li.pn-nav-cat:hover,
body .sidebar li.pn-nav-cat.active {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 16px 0 4px !important;
  padding: 0 18px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted, var(--pn-muted, #8b93b5));
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

body .sidebar li.pn-nav-cat:first-child { margin-top: 4px; }

body .sidebar li.pn-nav-cat .pn-nav-cat-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 130, 200, 0.3), transparent);
}

/* The three pages above the first heading are the server's own, not a
   feature, and the rule below is what says so. */
body .sidebar li.pn-nav-rule,
body .sidebar li.pn-nav-rule:hover {
  display: block !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 12px 14px 2px !important;
  border: 0 !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  background: linear-gradient(90deg, transparent, rgba(120, 130, 200, 0.32) 20%,
              rgba(120, 130, 200, 0.32) 80%, transparent) !important;
  cursor: default;
  pointer-events: none;
}

/* Items pnnav.js created itself take their shape from the template's own
   `.sidebar li` rule, whatever that template chose. These two only supply what
   a brand-new <li> has no way to inherit. */
body .sidebar li.pn-nav-item { white-space: nowrap; }
body .sidebar li.pn-nav-item > .icon { display: inline-block; width: 22px; text-align: center; }

/* A feature that is switched off should look it, without being hidden. */
body .sidebar li.pn-nav-item.is-off > .icon { opacity: 0.45; }

/* Keep the list readable when there is a lot of it. */
body .sidebar ul { width: 100%; }

@media (max-width: 767px) {
  body .sidebar { padding-bottom: 40px; }
}