.os-auth-role-picker,
.os-search-select {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.os-auth-role-picker-native,
.os-search-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.os-search-select.is-invalid .os-search-select-trigger,
.os-search-select:has(.is-invalid) .os-search-select-trigger,
.os-search-select:has(:invalid) .os-search-select-trigger {
  border-color: #b42318;
}

.os-auth-role-picker-trigger,
.os-search-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  text-align: start;
  padding: 0.35rem 0.65rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
}

.os-auth-role-picker-trigger::after,
.os-auth-role-picker-trigger::before,
.os-search-select-trigger::after,
.os-search-select-trigger::before {
  content: none !important;
  display: none !important;
}

.os-auth-role-picker-value,
.os-search-select-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-auth-role-picker-caret,
.os-search-select-caret {
  flex: 0 0 auto;
  color: var(--os-dropdown-arrow, var(--os-text-muted, #5f6b68));
}

.os-auth-role-picker-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.45rem;
}

.os-auth-role-picker-summary {
  margin: 0;
  font-size: 0.8rem;
  color: var(--os-text-muted, var(--os-color-text-muted, #5f6b68));
}

.os-search-select-panel {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
  max-height: min(18rem, 60vh);
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid var(--os-dropdown-popup-border, var(--os-color-form-border, #c8c8c8));
  border-radius: 0.4rem;
  background: var(--os-dropdown-popup-bg, var(--os-color-surface, #fff));
  box-shadow: var(--os-dropdown-popup-shadow, var(--os-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)));
}

.os-auth-role-picker-panel {
  position: absolute;
  z-index: 1400;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  max-height: min(18rem, 60vh);
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid var(--os-dropdown-popup-border, var(--os-color-form-border, #c8c8c8));
  border-radius: 0.4rem;
  background: #fff;
  background: var(--os-dropdown-popup-bg, var(--os-color-surface, #fff));
  color: var(--os-color-text, #1a2e24);
  box-shadow: var(--os-dropdown-popup-shadow, var(--os-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18)));
}

.os-auth-role-picker-panel[hidden] {
  display: none !important;
}

.os-auth-role-picker-search,
.os-search-select-search {
  flex: 0 0 auto;
  margin-bottom: 0.45rem;
}

.os-auth-role-picker-list,
.os-search-select-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 8rem;
  overflow: auto;
}

.os-auth-role-picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--os-color-form-border, #d6dbda);
  background: var(--os-dropdown-popup-bg, var(--os-color-surface, #fff));
  color: var(--os-text-muted, #5f6b68);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.os-auth-role-picker-option,
.os-search-select-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: inherit;
  text-align: start;
}

.os-auth-role-picker-option:hover,
.os-auth-role-picker-option:focus-visible,
.os-search-select-option:hover,
.os-search-select-option:focus-visible {
  background: var(--os-dropdown-item-hover-bg, var(--os-color-hover, #eef3f0));
}

.os-auth-role-picker-option.is-selected,
.os-search-select-option.is-selected {
  background: var(--os-dropdown-item-selected-bg, color-mix(in srgb, var(--os-color-primary, #2e7d4f) 14%, transparent));
  font-weight: 650;
}

.os-auth-role-picker-option-code {
  font-size: 0.9rem;
}

.os-auth-role-picker-option-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted, #5f6b68);
}

.os-auth-role-picker-empty,
.os-search-select-empty {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--os-text-muted, #5f6b68);
}

.os-auth-role-preview-dialog {
  max-width: min(72rem, 96vw);
}

.os-auth-role-preview .modal-content {
  background: var(--os-popup-bg, var(--os-color-surface, #fff));
  color: var(--os-popup-fg, var(--os-color-text, #1a2e24));
}

.os-auth-role-preview-meta {
  margin-bottom: 0.75rem;
}

.os-auth-role-preview-scope {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--os-text-muted, #5f6b68);
}

.os-auth-role-preview .os-auth-matrix-wrap {
  max-height: min(28rem, 55vh);
}

html[data-theme="dark"] .os-auth-role-picker-panel,
html.os-theme-dark .os-auth-role-picker-panel,
body.os-theme-dark .os-auth-role-picker-panel,
html[data-theme="dark"] .os-search-select-panel,
html.os-theme-dark .os-search-select-panel,
body.os-theme-dark .os-search-select-panel {
  background: var(--os-dropdown-popup-bg, var(--os-surface, #1c2128));
}

.os-search-select-trigger.is-placeholder .os-search-select-value {
  color: var(--os-text-muted, #5f6b68);
}