/* =============================================================================
   OrganicSystem — UI-1.4 Global Dropdown / Select / ComboBox / TagBox
   Closed + open overlay chrome for Light/Dark. Token-driven only.
   Does NOT change data sources, selection behavior, or APIs.
   Does NOT rewrite button / general input rules (UI-1.2 / UI-1.3 own those).
   Load AFTER os-form-controls-theme.css so popup/stacking rules win last.
   ============================================================================= */

:root {
  /* Surface aliases (consume Theme Engine + UI-1.1) */
  --os-dropdown-closed-bg: var(--os-input-bg, var(--os-color-select, var(--os-color-form-control-bg)));
  --os-dropdown-closed-text: var(--os-input-text, var(--os-color-input-text));
  --os-dropdown-closed-border: var(--os-input-border, var(--os-color-form-border));
  --os-dropdown-placeholder: var(--os-input-placeholder, var(--os-color-placeholder));
  --os-dropdown-arrow: var(--os-color-icon-muted, var(--os-text-muted, var(--os-color-text-muted)));
  --os-dropdown-popup-bg: var(--os-app-dropdown-bg, var(--os-color-dropdown, var(--os-color-popup)));
  --os-dropdown-popup-text: var(--os-app-dropdown-color, var(--popup-text, var(--os-color-text)));
  --os-dropdown-popup-border: var(--os-app-dropdown-border, var(--os-color-border));
  --os-dropdown-popup-shadow: var(--os-app-dropdown-shadow, var(--os-color-shadow-md));
  --os-dropdown-item-hover-bg: var(--os-popup-selection-hover-bg, var(--os-app-dropdown-hover-bg, var(--os-color-hover)));
  --os-dropdown-item-selected-bg: var(--os-popup-selection-selected-bg, var(--os-dropdown-item-hover-bg));
  --os-dropdown-item-disabled-text: var(--os-text-muted, var(--os-color-text-muted));
  --os-dropdown-tag-bg: color-mix(in srgb, var(--os-color-primary) 14%, var(--os-dropdown-closed-bg));
  --os-dropdown-tag-text: var(--os-dropdown-closed-text);
  --os-dropdown-scroll-thumb: var(--os-scroll-thumb, color-mix(in srgb, var(--os-color-text) 35%, transparent));
  --os-dropdown-scroll-track: var(--os-scroll-track, transparent);

  /*
    Stacking: above sticky toolbar (~2100), sidebar (~40–1200), grid chrome.
    Below portaled Bootstrap toolbar menus (inline 20050) and plan-select (10050).
    Do not force .dropdown-menu — Bootstrap + organicsystem-ui portal own that.
  */
  --os-z-dropdown-overlay: 3500;
  --os-z-dropdown-context: 4000;
  --os-z-dropdown-header-filter: 3600;
}

/* =============================================================================
   CLOSED — arrow / selected value / tags (field fill owned by UI-1.3)
   ============================================================================= */

.dx-selectbox .dx-texteditor-input,
.dx-tagbox .dx-texteditor-input,
.dx-dropdownbox .dx-texteditor-input,
.dx-lookup .dx-texteditor-input,
.dx-autocomplete .dx-texteditor-input,
.dx-datebox .dx-texteditor-input,
.dx-combobox .dx-texteditor-input,
select.form-select:not([multiple]),
.form-select:not([multiple]),
.module-main-filter-select:not([multiple]),
.prs-station-select,
.rotation-toolbar-select {
  color: var(--os-dropdown-closed-text) !important;
  -webkit-text-fill-color: var(--os-dropdown-closed-text);
}

.dx-selectbox .dx-placeholder,
.dx-tagbox .dx-placeholder,
.dx-dropdownbox .dx-placeholder,
.dx-lookup .dx-placeholder,
.dx-autocomplete .dx-placeholder,
.dx-datebox .dx-placeholder,
.dx-selectbox .dx-placeholder::before,
.dx-tagbox .dx-placeholder::before,
.dx-dropdownbox .dx-placeholder::before,
.dx-lookup .dx-placeholder::before,
.dx-autocomplete .dx-placeholder::before,
.dx-datebox .dx-placeholder::before {
  color: var(--os-dropdown-placeholder) !important;
  -webkit-text-fill-color: var(--os-dropdown-placeholder);
}

.dx-texteditor .dx-dropdowneditor-icon,
.dx-texteditor .dx-dropdowneditor-button .dx-dropdowneditor-icon,
.dx-selectbox .dx-dropdowneditor-icon,
.dx-tagbox .dx-dropdowneditor-icon,
.dx-dropdownbox .dx-dropdowneditor-icon,
.dx-lookup .dx-lookup-arrow,
.dx-datebox .dx-dropdowneditor-icon,
.dx-autocomplete .dx-dropdowneditor-icon {
  color: var(--os-dropdown-arrow) !important;
}

.dx-texteditor .dx-icon-clear,
.dx-dropdowneditor-button.dx-clear-button-area .dx-icon,
.dx-texteditor .dx-icon-clear.dx-icon {
  color: var(--os-dropdown-arrow) !important;
}

/* Native select caret — theme-aware (avoids dark white-flash / invisible arrow) */
.form-select:not([multiple]),
select.form-select:not([multiple]) {
  --os-form-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--os-form-select-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

html[data-theme="dark"] .form-select:not([multiple]),
html[data-theme="dark"] select.form-select:not([multiple]) {
  --os-form-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8c6c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.dx-tagbox .dx-tag,
.dx-tagbox .dx-tag-content {
  background-color: var(--os-dropdown-tag-bg) !important;
  color: var(--os-dropdown-tag-text) !important;
  border-color: var(--os-dropdown-closed-border) !important;
}

.dx-tagbox .dx-tag-remove-button::before,
.dx-tagbox .dx-tag-remove-button {
  color: var(--os-dropdown-arrow) !important;
}

/* Certificate toggle placeholder (closed) — token only */
.ags-export-invoice-certificate-toggle,
.ags-export-invoice-certificate-label {
  color: var(--os-dropdown-closed-text);
}

.ags-export-invoice-certificate-label.is-placeholder {
  color: var(--os-dropdown-placeholder) !important;
}

/* =============================================================================
   OPEN — DX SelectBox / ComboBox / TagBox / Lookup / DropDownBox / Autocomplete
   Both themes: opaque themed popup (kills white flash on dark).
   ============================================================================= */

.dx-dropdowneditor-overlay.dx-overlay-wrapper,
.dx-overlay-wrapper.dx-dropdowneditor-overlay,
.dx-overlay-wrapper[class*="-dropdown"],
.dx-datebox-wrapper.dx-overlay-wrapper,
.dx-header-filter-menu.dx-overlay-wrapper {
  /* Keep above chrome; respect higher inline/specialized z-index when set. */
  z-index: var(--os-z-dropdown-overlay) !important;
}

.dx-header-filter-menu.dx-overlay-wrapper {
  z-index: var(--os-z-dropdown-header-filter) !important;
}

.dx-context-menu.dx-overlay-wrapper {
  z-index: var(--os-z-dropdown-context) !important;
}

/* Plan Product/Plot lists keep their dedicated high stack (os-responsive-fix). */
.ags-plan-select-dropdown.dx-overlay-wrapper {
  z-index: 10050 !important;
}

.dx-dropdowneditor-overlay .dx-overlay-content,
.dx-dropdowneditor-overlay .dx-popup-content,
.dx-dropdowneditor-overlay .dx-scrollable,
.dx-dropdowneditor-overlay .dx-scrollable-content,
.dx-dropdowneditor-overlay .dx-list,
.dx-header-filter-menu .dx-overlay-content,
.dx-header-filter-menu .dx-popup-content,
.dx-header-filter-menu .dx-list,
.dx-overlay-wrapper[class*="-dropdown"] .dx-overlay-content,
.dx-overlay-wrapper[class*="-dropdown"] .dx-popup-content,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list,
.dx-datebox-wrapper .dx-overlay-content,
.dx-datebox-wrapper .dx-popup-content {
  background-color: var(--os-dropdown-popup-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
  border-color: var(--os-dropdown-popup-border) !important;
  opacity: 1 !important;
}

.dx-dropdowneditor-overlay .dx-overlay-content,
.dx-header-filter-menu .dx-overlay-content,
.dx-overlay-wrapper[class*="-dropdown"] .dx-overlay-content,
.dx-datebox-wrapper .dx-overlay-content {
  box-shadow: var(--os-dropdown-popup-shadow) !important;
  border: 1px solid var(--os-dropdown-popup-border) !important;
}

.dx-dropdowneditor-overlay .dx-list-item,
.dx-dropdowneditor-overlay .dx-list-item-content,
.dx-header-filter-menu .dx-list-item,
.dx-header-filter-menu .dx-list-item-content,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item-content,
.dx-dropdowneditor-overlay .dx-treeview-item,
.dx-header-filter-menu .dx-treeview-item {
  background-color: transparent !important;
  color: var(--os-dropdown-popup-text) !important;
}

.dx-dropdowneditor-overlay .dx-list-item.dx-state-hover,
.dx-dropdowneditor-overlay .dx-list-item.dx-state-focused,
.dx-header-filter-menu .dx-list-item.dx-state-hover,
.dx-header-filter-menu .dx-list-item.dx-state-focused,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item.dx-state-hover,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item.dx-state-focused {
  background-color: var(--os-dropdown-item-hover-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
}

.dx-dropdowneditor-overlay .dx-list-item.dx-list-item-selected,
.dx-header-filter-menu .dx-list-item.dx-list-item-selected,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item.dx-list-item-selected {
  background-color: var(--os-dropdown-item-selected-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
}

.dx-dropdowneditor-overlay .dx-list-item.dx-state-disabled,
.dx-dropdowneditor-overlay .dx-list-item.dx-state-disabled .dx-list-item-content,
.dx-header-filter-menu .dx-list-item.dx-state-disabled,
.dx-overlay-wrapper[class*="-dropdown"] .dx-list-item.dx-state-disabled {
  color: var(--os-dropdown-item-disabled-text) !important;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Lookup / DropDownBox grids inside overlays */
.dx-dropdowneditor-overlay .dx-datagrid,
.dx-dropdowneditor-overlay .dx-datagrid-headers,
.dx-dropdowneditor-overlay .dx-datagrid-rowsview,
.dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-data-row > td,
.dx-dropdowneditor-overlay .dx-datagrid-headers .dx-header-row > td,
.dx-overlay-wrapper[class*="-dropdown"] .dx-datagrid,
.dx-overlay-wrapper[class*="-dropdown"] .dx-datagrid-rowsview .dx-data-row > td {
  background-color: var(--os-dropdown-popup-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
  border-color: var(--os-dropdown-popup-border) !important;
}

.dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-data-row:hover > td,
.dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-selection > td,
.dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-row-focused > td,
.dx-overlay-wrapper[class*="-dropdown"] .dx-datagrid-rowsview .dx-data-row:hover > td,
.dx-overlay-wrapper[class*="-dropdown"] .dx-datagrid-rowsview .dx-selection > td {
  background-color: var(--os-dropdown-item-hover-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
}

/* Search field inside open popup */
.dx-dropdowneditor-overlay .dx-list-search,
.dx-header-filter-menu .dx-list-search,
.dx-dropdowneditor-overlay .dx-texteditor,
.dx-header-filter-menu .dx-texteditor,
.dx-dropdowneditor-overlay .dx-texteditor-input,
.dx-header-filter-menu .dx-texteditor-input {
  background-color: var(--os-dropdown-closed-bg) !important;
  color: var(--os-dropdown-closed-text) !important;
  border-color: var(--os-dropdown-closed-border) !important;
  -webkit-text-fill-color: var(--os-dropdown-closed-text);
}

.dx-dropdowneditor-overlay .dx-placeholder,
.dx-header-filter-menu .dx-placeholder,
.dx-dropdowneditor-overlay .dx-placeholder::before,
.dx-header-filter-menu .dx-placeholder::before {
  color: var(--os-dropdown-placeholder) !important;
  -webkit-text-fill-color: var(--os-dropdown-placeholder);
}

.dx-dropdowneditor-overlay .dx-icon-clear,
.dx-header-filter-menu .dx-icon-clear,
.dx-dropdowneditor-overlay .dx-icon-search,
.dx-header-filter-menu .dx-icon-search {
  color: var(--os-dropdown-arrow) !important;
}

/* Scrollbars inside open lists */
.dx-dropdowneditor-overlay .dx-scrollable-scroll,
.dx-header-filter-menu .dx-scrollable-scroll,
.dx-overlay-wrapper[class*="-dropdown"] .dx-scrollable-scroll {
  background-color: var(--os-dropdown-scroll-thumb) !important;
}

.dx-dropdowneditor-overlay .dx-scrollable-container,
.dx-header-filter-menu .dx-scrollable-container,
.dx-overlay-wrapper[class*="-dropdown"] .dx-scrollable-container,
.ags-export-invoice-certificate-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--os-dropdown-scroll-thumb) var(--os-dropdown-scroll-track);
}

/* Context menu */
.dx-context-menu .dx-menu-item,
.dx-context-menu .dx-menu-item-content,
.dx-context-menu .dx-menu-item-text {
  color: var(--os-dropdown-popup-text) !important;
}

.dx-context-menu .dx-submenu,
.dx-context-menu.dx-overlay-content,
.dx-context-menu .dx-menu-items-container {
  background-color: var(--os-dropdown-popup-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
  border-color: var(--os-dropdown-popup-border) !important;
  box-shadow: var(--os-dropdown-popup-shadow);
}

.dx-context-menu .dx-menu-item.dx-state-hover,
.dx-context-menu .dx-menu-item.dx-state-focused {
  background-color: var(--os-dropdown-item-hover-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
}

.dx-context-menu .dx-menu-item.dx-state-disabled,
.dx-context-menu .dx-menu-item.dx-state-disabled .dx-menu-item-text {
  color: var(--os-dropdown-item-disabled-text) !important;
  opacity: 0.55;
}

/* =============================================================================
   Bootstrap dropdown menus (chrome / filters / certificate) — theme tokens
   Do not alter portal JS, positioning, or data-bs-toggle behavior.
   ============================================================================= */

.dropdown-menu,
.dropdown-menu.show,
.app-dropdown__panel,
.os-language-menu,
.ags-export-invoice-certificate-menu,
.ags-export-invoice-certificate-menu.show {
  background-color: var(--os-dropdown-popup-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
  border-color: var(--os-dropdown-popup-border) !important;
  box-shadow: var(--os-dropdown-popup-shadow);
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text,
.ags-export-invoice-certificate-menu .dropdown-item,
.app-dropdown__link {
  color: var(--os-dropdown-popup-text) !important;
  background-color: transparent;
  min-height: var(--os-list-item-min-height, 30px);
  padding-top: var(--os-list-item-padding-y, 0.2rem);
  padding-bottom: var(--os-list-item-padding-y, 0.2rem);
  padding-inline: var(--os-list-item-padding-x, 0.65rem);
  line-height: 1.3;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.ags-export-invoice-certificate-menu .dropdown-item:hover,
.ags-export-invoice-certificate-menu .dropdown-item:focus,
.ags-export-invoice-certificate-menu .dropdown-item.active,
.app-dropdown__link:hover {
  background-color: var(--os-dropdown-item-hover-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
}

.dropdown-menu .dropdown-item:disabled,
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled:hover,
.dropdown-menu .dropdown-item.disabled:hover {
  color: var(--os-dropdown-item-disabled-text) !important;
  background-color: transparent !important;
  opacity: 0.55;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--os-dropdown-popup-border) !important;
}

/* =============================================================================
   Theme flip — prevent white flash (dark) / dark bleed (light) on overlays
   ============================================================================= */

html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-overlay-content,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-popup-content,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-list,
html[data-theme="dark"] .dx-header-filter-menu .dx-overlay-content,
html[data-theme="dark"] .dx-header-filter-menu .dx-list,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="light"] .dx-dropdowneditor-overlay .dx-overlay-content,
html[data-theme="light"] .dx-dropdowneditor-overlay .dx-popup-content,
html[data-theme="light"] .dx-dropdowneditor-overlay .dx-list,
html[data-theme="light"] .dx-header-filter-menu .dx-overlay-content,
html[data-theme="light"] .dropdown-menu {
  background-color: var(--os-dropdown-popup-bg) !important;
  color: var(--os-dropdown-popup-text) !important;
  border-color: var(--os-dropdown-popup-border) !important;
}

html[data-theme="dark"] .dx-tagbox .dx-tag,
html[data-theme="dark"] .dx-tagbox .dx-tag-content,
html[data-theme="light"] .dx-tagbox .dx-tag,
html[data-theme="light"] .dx-tagbox .dx-tag-content {
  background-color: var(--os-dropdown-tag-bg) !important;
  color: var(--os-dropdown-tag-text) !important;
}