/* ============================================
   Global Dropdown Layering Fix (Root-Level)
   - Removes fullscreen transparent overlays caused by dropdown backdrops
   - Unifies z-index with Design System variables (see base.css)
   - Keeps dropdowns within their container context (no viewport-level fixed by default)
   ============================================ */

:root {
  /* Fallbacks if base.css variables are missing for any reason */
  --z-dropdown: 1000;
  --z-popover: 1060;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;
}

/* Ensure dropdown wrappers create a local stacking context */
.searchable-select,
.searchable-select-wrapper {
  position: relative !important;
  z-index: var(--z-dropdown) !important;
  isolation: isolate;
}

/* IMPORTANT:
   When a dropdown is open, its wrapper MUST be above sibling fields.
   Otherwise (especially with isolation/stacking contexts), a later field like "بدون"
   can render on top of the open dropdown (as in the screenshot). */
.searchable-select-wrapper:has(.ss-dropdown.open),
.searchable-select:has(.searchable-select-dropdown) {
  z-index: var(--z-popover) !important;
}

/* Same behavior without relying on :has (and it beats async DOM transformations).
   The JS enhancer toggles `.ss-open` on the wrapper when the dropdown opens. */
.searchable-select-wrapper.ss-open {
  z-index: var(--z-popover) !important;
}

/* CRITICAL: eliminate fullscreen transparent overlay created by dropdown backdrops */
.searchable-select-backdrop,
.searchable-select-portal,
.searchable-select-portal .searchable-select-backdrop {
  display: none !important;
  pointer-events: none !important;
}

/* Some libs (and older bootstrap patterns) may inject a dropdown backdrop; never allow it to block the UI */
.dropdown-backdrop,
.select-backdrop {
  display: none !important;
  pointer-events: none !important;
}

/* Dropdown menus should live inside their field/container */
.searchable-select-dropdown,
.ss-dropdown {
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  top: calc(100% + 4px) !important;
  z-index: var(--z-popover) !important;
  pointer-events: auto !important;
}

/* Unify layering for other dropdown implementations used across the app */
.dropdown-menu,
.dropdown-menu.show,
.choices__list--dropdown,
.select2-dropdown,
.tom-select-dropdown,
.ts-dropdown {
  z-index: var(--z-popover) !important;
}

/* Tom Select: keep wrapper above siblings when open */
.ts-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ts-wrapper.dropdown-active {
  z-index: var(--z-popover) !important;
}

/* When dropdown is portaled to body, ensure it stays above modals/tabs */
body > .ts-dropdown {
  z-index: var(--z-popover) !important;
}

/* Custom modal overlay in site.css uses extremely high z-index; match it for Tom Select dropdowns inside it */
.modal-overlay .ts-wrapper.dropdown-active {
  z-index: 2147483646 !important; /* one less than dropdown */
}

.modal-overlay .ts-dropdown {
  z-index: 2147483647 !important;
}

/* Ensure Tom Select control doesn't overflow/crop in flex rows */
.ts-control {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ts-control .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.ts-dropdown .option,
.ts-dropdown .create {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

/* When open, keep them visible (JS controls display, but guard anyway) */
.ss-dropdown.open,
.searchable-select:has(.searchable-select-dropdown) .searchable-select-dropdown {
  display: flex;
}

/* CRITICAL: site.css previously forced fixed positioning with max z-index for open dropdowns.
   Override that here to prevent cross-page bleed and fullscreen layering bugs. */
.ss-dropdown.open,
.ss-dropdown.open.fixed-position,
.dropdown-menu,
.dropdown-menu.show,
.dropdown-menu[style*="display: block"],
.choices__list--dropdown,
.select2-dropdown,
.tom-select-dropdown {
  position: absolute !important;
  z-index: var(--z-popover) !important;
  transform: none !important;
  will-change: auto !important;
}

/* Stop parent wrappers from jumping to extreme z-index values */
.searchable-select-wrapper,
.searchable-select,
.searchable-select-wrapper:has(.ss-dropdown.open),
.searchable-select:has(.searchable-select-dropdown) {
  z-index: var(--z-dropdown) !important;
}

/* Make sure common containers don't clip dropdowns (only when a dropdown is open) */
.tab-content:has(.searchable-select-dropdown),
.tab-content:has(.ss-dropdown.open),
.tab-pane:has(.searchable-select-dropdown),
.tab-pane:has(.ss-dropdown.open),
.form-group:has(.searchable-select-dropdown),
.form-group:has(.ss-dropdown.open),
.form-row:has(.searchable-select-dropdown),
.form-row:has(.ss-dropdown.open),
.modal-content:has(.searchable-select-dropdown),
.modal-content:has(.ss-dropdown.open),
.modal-body:has(.searchable-select-dropdown),
.modal-body:has(.ss-dropdown.open) {
  overflow: visible;
}

/* Tom Select fallback without :has support: keep common containers from clipping while dropdown is active */
.tab-content .ts-wrapper.dropdown-active,
.tab-pane .ts-wrapper.dropdown-active,
.modal-content .ts-wrapper.dropdown-active,
.modal-body .ts-wrapper.dropdown-active,
.form-group .ts-wrapper.dropdown-active,
.form-row .ts-wrapper.dropdown-active {
  position: relative;
  z-index: var(--z-popover) !important;
}

/* Avoid global "dropdown-open" side effects (older CSS relied on this class) */
body.dropdown-open {
  /* No-op by design */
}