/* Give native fields the same inset chevron as the shared React select.
 * Browser-drawn arrows ignore padding, so draw the indicator explicitly. */
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):not([aria-hidden="true"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-inline-end: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 16px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
}
select:not([multiple]):dir(rtl) {
  background-position: left 16px center !important;
}
.clapilot-select-trigger:not([data-compact-icon]) {
  padding-inline-end: 16px !important;
}
@media (min-width: 768px) {
  .clapilot-select-trigger[data-compact-icon] { padding-inline-end: 16px !important; }
}

/* Shared by React selects/action menus and native controls in module frames. */
.clapilot-dropdown-surface.clapilot-dropdown-surface {
  border: 1px solid rgba(24, 32, 48, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #202124;
  box-shadow: 0 12px 28px rgba(24, 32, 48, 0.12), 0 2px 5px rgba(24, 32, 48, 0.05);
}
.clapilot-native-dropdown {
  position: fixed;
  inset: auto;
  z-index: 10000;
  box-sizing: border-box;
  width: max-content;
  margin: 0;
  padding: 4px;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  outline: none;
  font: 400 14px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
}
.clapilot-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: default;
  user-select: none;
  box-sizing: border-box;
}
.clapilot-dropdown-option > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.clapilot-dropdown-option[data-active="true"] { background: #f0f2f6; }
.clapilot-dropdown-option[aria-disabled="true"] { opacity: 0.4; }
.clapilot-dropdown-check { width: 16px; flex-shrink: 0; color: #466197; }
.clapilot-dropdown-group { padding: 8px 10px 4px; color: #6b7280; font-size: 12px; font-weight: 600; }
@media (forced-colors: active) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):not([aria-hidden="true"]) {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
  }
  .clapilot-dropdown-surface.clapilot-dropdown-surface { border-color: ButtonText; background: Canvas; color: CanvasText; }
  .clapilot-dropdown-option[data-active="true"] { outline: 1px solid Highlight; }
  .clapilot-dropdown-check { color: CanvasText; }
}