/*
 * Shared single-select contract for the PHP CRM runtime and Control.
 * Keep native multi-select/listbox controls untouched for keyboard and range selection.
 */
.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) {
  box-sizing: border-box;
  max-inline-size: 100%;
  min-block-size: 42px;
  padding-block: 8px;
  padding-inline-start: 12px;
  padding-inline-end: 36px;
  border: 1px solid var(--crm-color-border-strong, #d5deea);
  border-radius: 11px;
  color: var(--crm-color-ink, #1b2740);
  background-color: var(--crm-color-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' stroke='%23766fce' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 14px 14px;
  font: inherit;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.crm-ui-surface :where(
  .account-subscription-toolbar,
  .account-paid-plan-form,
  .control-form-grid,
  .folder-field-row,
  .field-row,
  .field-create-row,
  .field-management-toolbar,
  .permission-management-toolbar,
  .customers-filters,
  .invoice-history-tools,
  .invoice-item-row,
  .bulk-fields,
  .lead-sort-control,
  .lead-filters,
  .product-filter-form,
  .product-view-form,
  .sales-filter-grid,
  .sales-bulk-form,
  .trash-toolbar,
  .excel-trace-toolbar,
  .calendar-picker-selects,
  .assignment-form,
  .followup-assign-form,
  .settings-modal-form,
  .settings-calendar-form,
  .support-form,
  .support-reply-form,
  .customer-needs-form-grid,
  .customer-call-entry,
  .questionnaire-q5-filter,
  .questionnaire-q5-invite-form,
  .wa-profile-workspace-form,
  .lead-comment-form,
  .accounting-profile-form,
  .evaluation-filter
) select:not([multiple]):not([size]):not([data-native-select]) {
  min-block-size: 36px;
  padding-block: 6px;
  padding-inline-end: 36px;
  border-radius: 9px;
  background-position: left 12px center;
  background-size: 14px 14px;
}

.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):hover {
  border-color: #aebbd0;
  background-color: #fcfdff;
}

.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):focus {
  border-color: var(--crm-color-primary, #6257df);
  box-shadow: 0 0 0 3px rgba(98, 87, 223, .13);
  outline: 0;
}

.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):focus-visible {
  outline: 2px solid rgba(98, 87, 223, .42);
  outline-offset: 2px;
}

.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):disabled {
  border-color: #e4e8ef;
  color: #8993a2;
  background-color: #f4f6f9;
  cursor: not-allowed;
  opacity: .82;
}

.crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):dir(ltr) {
  background-position: right 12px center;
}

.crm-ui-surface :where(
  .account-subscription-toolbar,
  .account-paid-plan-form,
  .control-form-grid,
  .folder-field-row,
  .field-row,
  .field-create-row,
  .field-management-toolbar,
  .permission-management-toolbar,
  .customers-filters,
  .invoice-history-tools,
  .invoice-item-row,
  .bulk-fields,
  .lead-sort-control,
  .lead-filters,
  .product-filter-form,
  .product-view-form,
  .sales-filter-grid,
  .sales-bulk-form,
  .trash-toolbar,
  .excel-trace-toolbar,
  .calendar-picker-selects,
  .assignment-form,
  .followup-assign-form,
  .settings-modal-form,
  .settings-calendar-form,
  .support-form,
  .support-reply-form,
  .customer-needs-form-grid,
  .customer-call-entry,
  .questionnaire-q5-filter,
  .questionnaire-q5-invite-form,
  .wa-profile-workspace-form,
  .lead-comment-form,
  .accounting-profile-form,
  .evaluation-filter
) select:not([multiple]):not([size]):not([data-native-select]):dir(ltr) {
  background-position: right 12px center;
}

@media (max-width: 760px) {
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) {
    min-block-size: 44px;
  }

  .crm-ui-surface :where(
    .account-subscription-toolbar,
    .account-paid-plan-form,
    .control-form-grid,
    .folder-field-row,
    .field-row,
    .field-create-row,
    .field-management-toolbar,
    .permission-management-toolbar,
    .customers-filters,
    .invoice-history-tools,
    .invoice-item-row,
    .bulk-fields,
    .lead-sort-control,
    .lead-filters,
    .product-filter-form,
    .product-view-form,
    .sales-filter-grid,
    .sales-bulk-form,
    .trash-toolbar,
    .excel-trace-toolbar,
    .calendar-picker-selects,
    .assignment-form,
    .followup-assign-form,
    .settings-modal-form,
    .settings-calendar-form,
    .support-form,
    .support-reply-form,
    .customer-needs-form-grid,
    .customer-call-entry,
    .questionnaire-q5-filter,
    .questionnaire-q5-invite-form,
    .wa-profile-workspace-form,
    .lead-comment-form,
    .accounting-profile-form,
    .evaluation-filter
  ) select:not([multiple]):not([size]):not([data-native-select]) {
    min-block-size: 40px;
  }
}

/* Progressive enhancement: style the actual option picker where the browser exposes it. */
@media (hover: hover) and (pointer: fine) {
 @supports (appearance: base-select) and selector(select::picker(select)) {
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]),
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker(select) {
    -webkit-appearance: base-select;
    appearance: base-select;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) {
    background-image: none;
    padding-inline: 12px;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):open {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker-icon {
    /* Keep the chevron at the field's logical end instead of beside its label. */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' stroke='%23766fce' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
    margin-inline-start: auto;
    margin-inline-end: 0;
    inline-size: 14px;
    block-size: 14px;
    border: 0;
    background: none;
    rotate: 0deg;
    transform-origin: center;
    transition: rotate var(--crm-motion-standard, 180ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1));
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):open::picker-icon {
    rotate: 180deg;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker(select) {
    inline-size: anchor-size(width);
    max-block-size: min(22rem, 55vh);
    margin: 0;
    padding: 4px;
    overflow: auto;
    border: 1px solid #dce3ed;
    border-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 10px;
    border-end-end-radius: 10px;
    color: #28364b;
    background: #fff;
    box-shadow: 0 14px 28px rgba(31, 48, 73, .12);
    opacity: 0;
    translate: 0 -3px;
    transition:
      opacity var(--crm-motion-fast, 140ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1)),
      translate var(--crm-motion-fast, 140ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1)),
      display var(--crm-motion-fast, 140ms) allow-discrete,
      overlay var(--crm-motion-fast, 140ms) allow-discrete;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):open::picker(select) {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):open::picker(select) {
      opacity: 0;
      translate: 0 -3px;
    }
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option {
    min-block-size: 36px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    text-align: start;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option:hover,
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option:focus {
    color: #28364b;
    background: #f2f4fa;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option:checked {
    color: #4037a5;
    background: #efedff;
    font-weight: 700;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option::checkmark {
    color: #6257df;
  }
 }
}

@media (prefers-reduced-motion: reduce) {
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]),
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker-icon,
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker(select) {
    transition: none;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker(select),
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]):open::picker(select) {
    translate: none;
  }
}

@media (forced-colors: active) {
  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select])::picker(select) {
    border: 1px solid CanvasText;
    border-block-start: 0;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .crm-ui-surface select:not([multiple]):not([size]):not([data-native-select]) option:checked {
    color: HighlightText;
    background: Highlight;
  }
}