/**
 * DHCW Single Record — Select
 * Reference HTML/CSS implementation, matched to the Figma Select set
 * (building blocks 1517:14820, option items 1517:14856, composed 1517:14471).
 * Consumes @dhcw/sr-tokens.
 *
 * Anatomy (vertical stack, gap = space-1), mirroring Input:
 *   .sr-select__label  — legend/label (+ required asterisk)
 *   .sr-select__hint   — helper text (above the control)
 *   .sr-select__trigger— the closed control: value + chevron-down
 *   .sr-select__menu   — listbox popover (role="listbox")
 *   .sr-select__option — one option (role="option")
 *   .sr-select__error  — validation message (Error state only)
 *
 * States (from Figma building blocks):
 *   Default  — white fill, 1px Border/Default.
 *   Focus/open — 3px Border/Focus (Cyan/700) outer ring.
 *   Error    — Status/Critical border.
 *   Disabled — Surface/Background fill, Border/Disabled, Text/Disabled.
 */

.sr-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
}

.sr-select__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-select__required {
  color: var(--sr-color-status-critical);
}

.sr-select__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Positioning context for the popover. */
.sr-select__control {
  position: relative;
  width: 100%;
}

/* ---------- Trigger (closed control) ---------- */
.sr-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-2) 0 var(--space-3); /* pr 8, pl 12 */
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
  text-align: left;
  cursor: pointer;
}
/* Placeholder (no value chosen yet). */
.sr-select__trigger[data-placeholder="true"] {
  color: var(--sr-color-text-secondary);
}
.sr-select__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-select__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
  transition: transform 0.15s ease;
}
.sr-select__chevron svg { width: 100%; height: 100%; }

.sr-select__trigger:focus-visible,
.sr-select__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--sr-color-border-default);
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}
.sr-select__trigger[aria-expanded="true"] .sr-select__chevron {
  transform: rotate(180deg);
}

/* ---------- Menu (listbox popover) ---------- */
.sr-select__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-overlay);
  max-height: 280px;
  overflow-y: auto;
}
.sr-select__menu[hidden] { display: none; }

.sr-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-sm);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-select__option-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: inherit;
}
.sr-select__option-chevron svg { width: 100%; height: 100%; }

/* Hover — soft Info Blue/50 wash, text stays secondary (distinct from active). */
.sr-select__option:hover {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-text-secondary);
}
/* Keyboard-active and selected — brand-blue fill, inverse text (+ white chevron). */
.sr-select__option.is-active,
.sr-select__option[aria-selected="true"] {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}
.sr-select__option[aria-disabled="true"] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
  background: transparent;
}

/* ---------- Error ---------- */
.sr-select--error .sr-select__trigger {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-select--error .sr-select__trigger:focus-visible,
.sr-select--error .sr-select__trigger[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical), 0 0 0 3px var(--sr-color-border-focus);
}
.sr-select__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}
.sr-select__error-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-select__error-icon svg { width: 100%; height: 100%; }

/* ---------- Disabled ---------- */
.sr-select--disabled .sr-select__trigger {
  background-color: var(--sr-color-surface-background);
  border-color: var(--sr-color-border-disabled);
  color: var(--sr-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
.sr-select--disabled .sr-select__chevron {
  color: var(--sr-color-text-disabled);
}
.sr-select--disabled .sr-select__label {
  color: var(--sr-color-text-disabled);
}