/* Desktop dropdown menu rebuild.
 *
 * Why the old "Jobs / Customers / Items / Staff / Finance" dropdowns
 * flickered and looked cut off:
 *
 *   1. There was a 4px gap between each nav button and its dropdown list.
 *      Moving the mouse straight down from the button to the list crossed
 *      that gap, which belongs to no element - so the menu would close and
 *      reopen mid-movement. That reads as flicker.
 *   2. The "Staff" and "Finance" dropdowns opened flush with the left edge
 *      of the button. Those two buttons sit near the right edge of the
 *      screen, so on narrower windows the list ran off the edge of the
 *      page - the "cut off corner" look.
 *   3. Pages tall enough to need a vertical scrollbar are ~15px narrower
 *      (inside the viewport) than pages that don't need one. Since the nav
 *      bar is full-width, switching between a scrolling and a non-scrolling
 *      page shifted the whole header sideways by that much, which also
 *      showed up as things near the right edge looking clipped.
 *
 * This file is loaded last (after admin-mobile.css) so it wins the cascade,
 * and every rule is wrapped in the same 781px breakpoint admin-mobile.css
 * already uses for "desktop" - phones and small tablets are untouched.
 */

/* Separate bug, same "something is cut off" family: any section using
 * class="panel table-wrap" (Performance, Jobs completed, Upcoming jobs,
 * Messaging & notes, Payslips, and the accounting table pages) has its
 * padding forced to 0 by .table-wrap in v2.css, so the table can scroll
 * edge-to-edge on narrow screens. That rule also strips padding from the
 * heading row sitting above the table, so titles like "Performance" start
 * flush against the panel's left border - at some zoom/DPI levels the
 * border line visibly slices through the first letter. Table itself stays
 * edge-to-edge (unchanged); only the heading row gets its padding back.
 * Applies at every screen width, not just desktop. */
.table-wrap > .panel-heading {
  padding: 18px 18px 12px !important;
  margin-bottom: 0 !important;
}
.table-wrap > table,
.table-wrap > .staff-centre-table {
  margin: 0 !important;
}

@media (min-width: 781px) {

  /* Fix 3: always reserve the scrollbar's space, so the page is the same
     width whether or not it actually needs to scroll. */
  html {
    scrollbar-gutter: stable;
  }

  /* Fix 1: dropdown sits flush against its button - zero gap, so the mouse
     never has to cross empty space to get from the button to the list. */
  header.site-header nav .sales-menu-links {
    top: 100% !important;
    margin-top: 0 !important;
    left: 0 !important;
    right: auto !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
  }

  /* Fix 2: the two right-most buttons (Staff, Finance) open their list
     leftwards instead of rightwards, so it always stays on screen. */
  header.site-header nav .sales-menu:nth-of-type(4) .sales-menu-links,
  header.site-header nav .sales-menu:nth-of-type(5) .sales-menu-links {
    left: auto !important;
    right: 0 !important;
  }

  /* Show the list on hover, keyboard focus, or a click (native [open]
     attribute) - three independent triggers, none of them dependent on a
     JS timer, so there's no timing race left that could cause a flicker. */
  header.site-header nav .sales-menu > .sales-menu-links {
    display: none;
  }
  header.site-header nav .sales-menu:hover > .sales-menu-links,
  header.site-header nav .sales-menu:focus-within > .sales-menu-links,
  header.site-header nav .sales-menu[open] > .sales-menu-links {
    display: grid !important;
    visibility: visible !important;
  }

  /* No hover-colour fade to overlap between items as the mouse moves. */
  header.site-header nav a,
  header.site-header nav .sales-menu > summary,
  header.site-header nav .sales-menu-links a {
    transition: none !important;
  }
}

/* Scroll anti-strobe (loaded last among menu CSS files).
   When .is-scrolling is on, freeze link hover so wheel/trackpad
   does not strobe highlights under a still mouse. */
@media (min-width: 781px) {
  header.site-header nav .sales-menu-links {
    max-height: min(70vh, 420px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }
  header.site-header nav .sales-menu-links a,
  header.site-header nav .sales-menu-links a:hover,
  header.site-header nav .sales-menu-links a:focus {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  header.site-header nav .sales-menu-links.is-scrolling a,
  header.site-header nav .sales-menu-links.is-scrolling a:hover,
  header.site-header nav .sales-menu-links.is-scrolling a:focus,
  header.site-header nav .sales-menu-links.is-scrolling a:active {
    pointer-events: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #142833 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
}