/* Keep all top-menu entries on one consistent baseline, including dropdowns. */
.site-header nav {
  align-items: center;
  gap: 14px;
}

.site-header nav > a,
.site-header nav > .sales-menu,
.site-header nav > .sales-menu > summary {
  height: 36px;
  display: flex;
  align-items: center;
  font: 600 14px/1.2 Arial, Helvetica, sans-serif;
}

.site-header nav > a {
  padding: 0 9px;
}

/* Each department tab is the positioning anchor for its own dropdown */
.site-header nav > details.sales-menu,
.sales-menu {
  margin: 0;
  padding: 0;
  position: relative;
}

.sales-menu summary {
  padding: 0 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.sales-menu summary:hover {
  background: #eaf6fb;
  color: #1686bc;
}

.sales-menu summary:after {
  line-height: 1;
  margin-left: 6px;
}

/*
 * Desktop dropdown: always start left-aligned under its tab.
 * JS (admin-mobile-menu.js) may nudge left/right so Staff/Finance
 * stay on-screen without losing the tab connection.
 */
@media (min-width: 781px) {
  .site-header nav > details.sales-menu {
    position: relative !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle;
  }

  .site-header nav > details.sales-menu > summary {
    position: relative;
    z-index: 1;
  }

  .site-header nav > details.sales-menu > .sales-menu-links,
  .site-header nav > .sales-menu > .sales-menu-links {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 80 !important;
    /* At least as wide as the tab; grow for long labels (Staff/Finance) */
    min-width: max(100%, 180px) !important;
    width: max-content !important;
    max-width: min(280px, calc(100vw - 16px)) !important;
    box-sizing: border-box !important;
    /* transform used by JS for viewport clamp — keep transform-origin top left */
    transform-origin: top left;
  }

  .site-header nav > details.sales-menu:not([open]) > .sales-menu-links {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .site-header nav > details.sales-menu[open] {
    z-index: 90 !important;
    position: relative !important;
  }

  .site-header nav > details.sales-menu[open] > .sales-menu-links {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 780px) {
  /* Mobile overrides live in admin-mobile.css — kill fixed desktop heights here */
  .site-header nav > a,
  .site-header nav > .sales-menu,
  .site-header nav > .sales-menu > summary {
    height: auto !important;
  }

  .sales-menu-links {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 560px) {
  .site-header nav {
    gap: 6px;
  }

  .site-header nav > a,
  .sales-menu summary {
    padding: 0 6px;
  }
}