:root {
  --dropdown-bg: #ffffff;
  --dropdown-border: #cbd5e1;
  --dropdown-border-focus: var(--brand, #4f46e5);
  --dropdown-text: #0f172a;
  --dropdown-muted: #64748b;
  --dropdown-option-hover: var(--brand, #4f46e5);
  --dropdown-option-hover-text: #ffffff;
  --dropdown-shadow: 0 16px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
}

.global-dropdown {
  position: relative;
  display: inline-grid;
  width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.global-dropdown-source {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.global-dropdown-button {
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  background: var(--dropdown-bg);
  color: var(--dropdown-text);
  cursor: default;
  font: inherit;
  line-height: 1.2;
  padding: 8px 10px 8px 12px;
  text-align: left;
  outline: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.global-dropdown-button:hover,
.global-dropdown.open .global-dropdown-button,
.global-dropdown-button:focus-visible {
  border-color: var(--dropdown-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dropdown-border-focus) 16%, transparent);
}

.global-dropdown-value {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-dropdown-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--dropdown-muted);
  transform: translateY(-1px);
}

.global-dropdown-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.global-dropdown.open .global-dropdown-icon {
  transform: translateY(1px) rotate(180deg);
}

/* An open dropdown's panel overflows its card. Two things can hide it:
   1) the card clips it — `.panel` has `overflow: hidden`, so a panel that
      extends past a short filter card's bottom edge gets cut off;
   2) a following card — especially a data table, whose `th` cells are
      `position: sticky; z-index: 1` and so form their own stacking context —
      paints over it.
   So for a card (or controls row) that holds an open dropdown, let the panel
   escape (`overflow: visible`) and raise the card above its siblings. */
.panel:has(.global-dropdown.open),
.card:has(.global-dropdown.open),
article:has(.global-dropdown.open),
.inventory-table-controls:has(.global-dropdown.open) {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.global-dropdown-panel {
  /* Positioned (fixed) by dropdown-theme.js from the button's rect so a modal or
     overflow container can never clip it; JS sets top/bottom/left/width/max-height
     and adds .up when it opens above the field. */
  position: fixed;
  z-index: 9999;
}

.global-dropdown-panel {
  max-width: min(420px, calc(100vw - 24px));
  max-height: 15rem;
  /* ONE scroller, and it is this panel - the way it was before the search box
     existed. 59.1 moved scrolling to an inner .global-dropdown-list so the
     search row could stay put; on a touch screen that nested scroller inside a
     position:fixed panel is awkward to drag and the supplier list read as stuck
     (client, 19 Aug 2026). The search row is sticky instead, which keeps it
     visible with no second scroll container. */
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--dropdown-border) 82%, #ffffff 18%);
  border-radius: 8px;
  background: var(--dropdown-bg);
  box-shadow: var(--dropdown-shadow);
  padding: 4px;
}

.global-dropdown-list {
  /* Deliberately NOT a scroll container - see the panel above. It stays as a
     plain wrapper so the options remain one flat scrolling column. */
  display: block;
}

/* Only rendered for lists past SEARCH_MIN_OPTIONS in dropdown-theme.js. */
.global-dropdown-search {
  /* Sticky rather than a flex header, so it stays visible while the PANEL
     scrolls. Opaque background and a z-index, or the options scroll through it. */
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 2px 6px;
  background: var(--dropdown-bg);
}

.global-dropdown-search[hidden] {
  /* The [hidden] attribute alone loses to the display above, the same trap the
     handover documents for .role-owner-branch. */
  display: none;
}

.global-dropdown-search-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--dropdown-border);
  border-radius: 6px;
  background: var(--dropdown-bg);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.global-dropdown-search-input:focus-visible {
  outline: 2px solid var(--focus-ring, #0f9d58);
  outline-offset: 1px;
}

.global-dropdown-empty {
  margin: 0;
  padding: 10px;
  color: var(--dropdown-muted);
  font-size: 12.5px;
}

.global-dropdown-group {
  padding: 7px 10px 4px;
  color: var(--dropdown-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.global-dropdown-option {
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dropdown-text);
  cursor: default;
  font: inherit;
  line-height: 1.2;
  padding: 8px 9px;
  text-align: left;
}

.global-dropdown-option:hover,
.global-dropdown-option:focus-visible {
  background: var(--dropdown-option-hover);
  color: var(--dropdown-option-hover-text);
  outline: none;
}

.global-dropdown-option-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-dropdown-check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--dropdown-border-focus);
  opacity: 0;
}

.global-dropdown-check::before {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.global-dropdown-option.selected .global-dropdown-check {
  opacity: 1;
}

.global-dropdown-option:hover .global-dropdown-check,
.global-dropdown-option:focus-visible .global-dropdown-check {
  color: var(--dropdown-option-hover-text);
}

.global-dropdown-option:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.global-dropdown.is-disabled .global-dropdown-button {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .global-dropdown-panel {
    width: max(100%, 12rem);
    max-height: 13rem;
  }
}