/* SPDX-FileCopyrightText: 2026 Original Syndicate, LLC
   SPDX-License-Identifier: LicenseRef-OGS-Proprietary

   Long select menus ran off the screen and the entries at the bottom could not be
   reached. Reported on the Bookings page: 13 event technicians, the field sits near the
   top of the page, and MUI anchors a Select's menu OVER the input so the selected item
   lines up with the field. A list that tall then opens upward past the top of the
   viewport and the names at the bottom are unreachable.

   This exists because the platform build customers are on is the June 2025 one, which
   cannot be rebuilt from source. The equivalent fix for the newer build is in
   CustomDropdown.js as MenuProps. Keep the two in step: five rows, then scroll.

   Scoped to .MuiMenu-paper deliberately, NOT .MuiPopover-paper. Menus and date pickers
   share the Popover class, and capping that would break the calendar.

   248px = 5 rows at 48px, plus the MenuList's 8px of vertical padding, so five whole rows
   show and the sixth is clipped enough to read as scrollable. */

.MuiMenu-paper {
  max-height: 248px !important;
  overflow-y: auto !important;
}

/* The inner list must not impose its own height, or it scrolls independently of the
   paper and the scrollbar ends up in the wrong place. */
.MuiMenu-paper .MuiMenu-list,
.MuiMenu-paper .MuiList-root {
  max-height: none !important;
  overflow: visible !important;
}

/* Momentum scrolling on trackpads and touch, and a scrollbar that is actually visible on
   a dark surface, otherwise the list looks truncated rather than scrollable. */
.MuiMenu-paper {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.MuiMenu-paper::-webkit-scrollbar {
  width: 10px;
}
.MuiMenu-paper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 5px;
}
.MuiMenu-paper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}
.MuiMenu-paper::-webkit-scrollbar-track {
  background: transparent;
}