/* Mobile navigation, once, for every dashboard page.
 *
 * Each of the twelve dashboard templates ships its own complete stylesheet and
 * each had grown its own version of this - `top: 10px` here, `top: 14px`
 * there, one page missing the open-state rule entirely. That is why the menu
 * looked different depending on which page you were on.
 *
 * Injected before </body> alongside accessibility.css, so it lands after every
 * template's own <style> and wins on cascade order. Selectors are qualified
 * with `body` only where a template rule is more specific than a bare class -
 * notably `.sidebar.show ~ .toggle-sidebar`, which is (0,3,0).
 *
 * Three things were wrong, all visible on a phone:
 *   - the button was pinned `right: 190px`, which on a 375px screen is the
 *     middle of the display: it read as floating rather than belonging;
 *   - opening the menu moved it to `right: 330px` - left, but not to the edge,
 *     so it drifted to a second arbitrary spot;
 *   - nothing closed the menu except the button, and every app on a phone
 *     closes a drawer when you tap beside it.
 */

@media (max-width: 767px) {

  /* The page's own header becomes the bar the button lives in. It already
     holds the logo, the title and the user menu - replacing it with a bar of
     our own was what hid the logo. */
  .toolbar {
    position: sticky;
    top: 0;
    z-index: 1002;
    background: var(--surface-solid, #12172e);
  }

  .toolbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  /* Space for the hamburger comes from the button, not from a gap on the
     container - a gap there also pushed the title away from the logo and
     changed a header that was not asked to change. */
  body .toolbar-left > .toggle-sidebar {
    margin-right: 10px;
  }

  /* Fallback bar, only for a page with no .toolbar at all. */
  .pn-mobile-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: var(--surface-solid, #12172e);
    border-bottom: 1px solid var(--border, rgba(120, 130, 200, 0.25));
    z-index: 1002;
  }

  .pn-mobile-bar .pn-mobile-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text, #eef1fb);
    letter-spacing: 0.2px;
  }

  /* The button sits at the start of the bar and stays there. It used to chase
     the sidebar across the screen, which is what made it look unplaced. */
  body .toggle-sidebar,
  body .sidebar.show ~ .toggle-sidebar {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    inset: auto;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--text, #eef1fb);
    background: transparent;
    border: 1px solid var(--border, rgba(120, 130, 200, 0.25));
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  body .toggle-sidebar:hover,
  body .toggle-sidebar:focus-visible {
    background: rgba(120, 130, 200, 0.14);
  }

  /* All the way off screen when closed, all the way on when open. A fixed
     -250px offset left a sliver showing on any sidebar wider than 250px. */
  body .sidebar {
    width: 264px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.28s ease-in-out;
    padding-top: 68px;
    z-index: 1003;
  }

  body .sidebar.show {
    transform: translateX(0);
  }

  /* Tap anywhere beside the menu to close it. */
  .pn-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 16, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 1001;
  }

  .pn-nav-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* The sticky toolbar occupies its own space, so the 60px the templates
     reserved for a floating button is now a gap. */
  body .top-part {
    margin-top: 0;
  }
}

/* The brand is a link now, and it must look exactly like it did before.
 *
 * Every declaration here exists to *undo* something the browser applies to an
 * anchor - the default blue and the underline - or to keep the two children
 * laid out the way they were as direct flex items of .toolbar-left. Nothing
 * here sets a font, a size or a spacing: the title's own `.toolbar-title`
 * rule still styles it, and `margin-left: 12px` on that rule is still the
 * only thing separating it from the logo. An earlier version added `gap:
 * 10px` here, which widened that to 22px - a change to a header nobody asked
 * to change. */
.pn-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* Keyboard users still need to see where they are. Hover deliberately does
   nothing: the header should look identical to how it always has. */
.pn-brand-link:focus-visible {
  outline: 2px solid #5b8bff;
  outline-offset: 3px;
  border-radius: 10px;
}

/* The line in the sidebar between the server's own pages (Dashboard, ProNick
 * Logs) and the system configuration pages below it. Qualified with `body`
 * because every template styles `.sidebar li` as a padded, hoverable row, and
 * a separator must be none of those. */
body .sidebar li.pn-sidebar-sep,
body .sidebar li.pn-sidebar-sep:hover {
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 10px 12px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 130, 200, 0.35) 18%,
              rgba(120, 130, 200, 0.35) 82%, transparent);
  cursor: default;
  pointer-events: none;
}

/* The bar is a phone affordance only; the sidebar is always visible above this. */
@media (min-width: 768px) {
  .pn-mobile-bar,
  .pn-nav-overlay {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .sidebar,
  .pn-nav-overlay {
    transition: none !important;
  }
}