/* ─── Combobox ─────────────────────────────────────────────────────────────────
   Values: site/tokens.css  (--ds-combobox-* + --ds-input-* for field)
   Consumers: site/preview/combobox.html + src/components/Combobox/Combobox.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root wrapper ──────────────────────────────────────────────────────────── */

.ds-combobox {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  width:          100%;
}

/* ── Size custom-property bridges ──────────────────────────────────────────── */

.ds-combobox[data-size='sm'] {
  --_h:         var(--ds-input-sm-h);
  --_r:         var(--ds-input-sm-r);
  --_px:        var(--ds-input-sm-px);
  --_fs:        var(--ds-input-sm-fs);
  --_label-fs:  var(--ds-input-sm-label-fs);
  --_helper-fs: var(--ds-input-sm-helper-fs);
}

.ds-combobox[data-size='md'] {
  --_h:         var(--ds-input-md-h);
  --_r:         var(--ds-input-md-r);
  --_px:        var(--ds-input-md-px);
  --_fs:        var(--ds-input-md-fs);
  --_label-fs:  var(--ds-input-md-label-fs);
  --_helper-fs: var(--ds-input-md-helper-fs);
}

.ds-combobox[data-size='lg'] {
  --_h:         var(--ds-input-lg-h);
  --_r:         var(--ds-input-lg-r);
  --_px:        var(--ds-input-lg-px);
  --_fs:        var(--ds-input-lg-fs);
  --_label-fs:  var(--ds-input-lg-label-fs);
  --_helper-fs: var(--ds-input-lg-helper-fs);
}

/* ── Label ─────────────────────────────────────────────────────────────────── */

.ds-combobox-label {
  font-family: inherit;
  font-weight: 500;
  color:       var(--ds-text-secondary);
  font-size:   var(--_label-fs);
  line-height: 1.4;
}

/* ── Required marker ───────────────────────────────────────────────────────── */

.ds-combobox-required {
  color: var(--ds-neg-default);
}

/* ── Control wrapper (field container) ─────────────────────────────────────── */

.ds-combobox-control {
  position:      relative;
  display:       flex;
  align-items:   center;
  height:        var(--_h);
  border:        1px solid var(--ds-nba-border);
  border-radius: var(--_r);
  background:    var(--ds-surface-0);
  transition:    border-color 150ms ease, box-shadow 150ms ease;
  cursor:        text;
}

.ds-combobox-control:hover:not([data-focused]):not([data-disabled]) {
  border-color: var(--ds-stroke-neutral-hover);
}

/* ── Native input field ────────────────────────────────────────────────────── */

.ds-combobox-field {
  flex:        1 1 auto;
  min-width:   0;
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: inherit;
  font-size:   var(--_fs);
  line-height: 1.4;
  color:       var(--ds-text-primary);
  padding:     0 var(--_px);
  cursor:      text;
}

.ds-combobox-field::placeholder {
  color: var(--ds-text-tertiary);
}

/* ── Chevron icon ──────────────────────────────────────────────────────────── */

.ds-combobox-chevron {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           16px;
  height:          16px;
  color:           var(--ds-text-tertiary);
  margin-right:    var(--_px);
  transition:      transform 150ms ease;
}

.ds-combobox-chevron svg {
  width:  100%;
  height: 100%;
}

.ds-combobox[data-open] .ds-combobox-chevron {
  transform: rotate(180deg);
}

/* ── Clear button ──────────────────────────────────────────────────────────── */

.ds-combobox-clear {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  padding:         0;
  margin-right:    4px;
  border:          none;
  background:      transparent;
  color:           var(--ds-icon-tertiary);
  cursor:          pointer;
  border-radius:   var(--ds-field-icon-btn-radius);
  transition:      color var(--ds-dur-1) var(--ds-ease), background var(--ds-dur-1) var(--ds-ease);
}

.ds-combobox-clear:hover  { background: var(--ds-field-icon-btn-hover-bg); }
.ds-combobox-clear:active { color: var(--ds-field-icon-btn-active-color); background: var(--ds-field-icon-btn-active-bg); }

/* ── Caption / helper text ─────────────────────────────────────────────────── */

.ds-combobox-caption {
  font-family: inherit;
  font-size:   var(--_helper-fs);
  line-height: 1.4;
  color:       var(--ds-text-tertiary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   VALIDATION INTENTS  (data-error on root)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Error ─────────────────────────────────────────────────────────────────── */

.ds-combobox[data-error] .ds-combobox-control {
  border-color: var(--ds-neg-default);
}

.ds-combobox[data-error] .ds-combobox-control[data-focused] {
  border-color: var(--ds-neg-default);
  box-shadow:   0 0 0 var(--ds-focus-offset) var(--ds-surface-0),
                0 0 0 calc(var(--ds-focus-offset) + var(--ds-focus-width)) var(--ds-neg-default);
}

.ds-combobox[data-error] .ds-combobox-caption {
  color: var(--ds-neg-default);
}

/* ══════════════════════════════════════════════════════════════════════════════
   STATES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Focused ───────────────────────────────────────────────────────────────── */

.ds-combobox-control[data-focused] {
  border-color: var(--ds-info-800);
  box-shadow:   var(--ds-focus-ring);
}

/* ── Disabled ──────────────────────────────────────────────────────────────── */

.ds-combobox[data-disabled] {
  pointer-events: none;
}

.ds-combobox[data-disabled] .ds-combobox-control {
  background:   var(--ds-nba-15);
  border-color: var(--ds-nba-border-disabled);
  cursor:       not-allowed;
}

.ds-combobox[data-disabled] .ds-combobox-field,
.ds-combobox[data-disabled] .ds-combobox-field::placeholder,
.ds-combobox[data-disabled] .ds-combobox-label,
.ds-combobox[data-disabled] .ds-combobox-caption,
.ds-combobox[data-disabled] .ds-combobox-chevron,
.ds-combobox[data-disabled] .ds-combobox-clear {
  color: var(--ds-disabled-text);
}

/* ── Hovered (explicit data-attr for Storybook / test harness) ─────────────── */

.ds-combobox-control[data-hovered]:not([data-focused]):not([data-disabled]) {
  border-color: var(--ds-stroke-neutral-hover);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DROPDOWN  (portal, position:fixed — coords set by JS)
   ══════════════════════════════════════════════════════════════════════════ */

.ds-combobox-dropdown {
  position:       fixed;
  background:     var(--ds-combobox-dropdown-bg);
  border:         1px solid var(--ds-combobox-dropdown-border);
  border-radius:  var(--ds-combobox-dropdown-r);
  box-shadow:     var(--ds-combobox-dropdown-shadow);
  z-index:        var(--ds-combobox-dropdown-z);
  padding:        var(--ds-combobox-dropdown-py) 0;
  overflow-y:     auto;
  max-height:     240px;
  opacity:        0;
  transform:      translateY(-4px);
  transition:     opacity var(--ds-combobox-dur) ease,
                  transform var(--ds-combobox-dur) ease;
  pointer-events: none;
}

.ds-combobox-dropdown[data-open] {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

/* ── Option item ───────────────────────────────────────────────────────────── */

.ds-combobox-option {
  display:     flex;
  align-items: center;
  width:       100%;
  padding:     0 var(--ds-combobox-item-md-px);
  height:      var(--ds-combobox-item-md-h);
  border:      none;
  background:  transparent;
  color:       var(--ds-text-secondary);
  font-family: inherit;
  font-size:   var(--ds-input-md-fs);
  text-align:  left;
  cursor:      pointer;
  outline:     none;
  white-space: nowrap;
  transition:  background 120ms ease, color 120ms ease;
  box-sizing:  border-box;
}

.ds-combobox-option[data-active] {
  background: var(--ds-nba-20);
  color:      var(--ds-text-primary);
}

.ds-combobox-option[data-selected] {
  background: var(--ds-nba-15);
  color:      var(--ds-text-primary);
}

.ds-combobox-option[data-disabled] {
  color:  var(--ds-disabled-text);
  cursor: not-allowed;
}

.ds-combobox-option:focus-visible {
  box-shadow: var(--ds-focus-ring) inset;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */

.ds-combobox-empty {
  padding:     12px var(--ds-combobox-item-md-px);
  color:       var(--ds-text-tertiary);
  font-size:   var(--ds-input-md-fs);
  font-family: inherit;
}

/* ── Option internals (React wraps icon + label) — mirrors Combobox.module.css ── */

.ds-combobox-checkmark {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           14px;
  height:          14px;
}

.ds-combobox-option-label {
  flex:          1 1 auto;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme='dark'] .ds-combobox-option[data-active] {
  background: var(--ds-nba-40);
}
[data-theme='dark'] .ds-combobox-required,
.theme-invert .ds-combobox-required { color: var(--ds-neg-500); }
[data-theme='dark'] .ds-combobox[data-error] .ds-combobox-caption,
.theme-invert .ds-combobox[data-error] .ds-combobox-caption { color: var(--ds-neg-500); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-combobox-option[data-active] {
    background: var(--ds-nba-40);
  }
  :root:not([data-theme='light']) .ds-combobox-required { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-combobox[data-error] .ds-combobox-caption { color: var(--ds-neg-500); }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-combobox-control,
  .ds-combobox-chevron,
  .ds-combobox-dropdown {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}