/* ═══════════════════════════════════════════════════════════
   def-dropdown1 — Shared dropdown style
   Edit ONLY this file to change height, colors, chevron, etc.
   Width is NOT included here (set per page / layout).
   ═══════════════════════════════════════════════════════════ */

:root {
  --def-dropdown1-height: 44px;
  --def-dropdown1-padding-y: 0.65rem;
  --def-dropdown1-padding-x: 0.85rem;
  --def-dropdown1-padding-chevron: 2.5rem;
  --def-dropdown1-font-size: 0.9rem;
  --def-dropdown1-radius: var(--radius-sm);
  --def-dropdown1-menu-radius: var(--def-dropdown1-radius);
  --def-dropdown1-menu-bg: #212C34;
  --def-dropdown1-bg: var(--input-bg);
  --def-dropdown1-border: var(--border);
  --def-dropdown1-color: var(--text-primary);
  --def-dropdown1-placeholder-color: var(--text-muted);
  --def-dropdown1-chevron-inset: 0.9rem;
  --def-dropdown1-chevron-size: 16px;
  --def-dropdown1-chevron: 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='%239ba3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --def-dropdown1-menu-padding: 0.3rem;
  --def-dropdown1-editable-option-padding-y: 0.55rem;
  --def-dropdown1-editable-option-line-height: 1.4;
  --def-dropdown1-menu-max-visible-items: 4;
}

.def-dropdown1,
select {
  box-sizing: border-box;
  display: block;
  height: var(--def-dropdown1-height);
  min-height: var(--def-dropdown1-height);
  padding: var(--def-dropdown1-padding-y) var(--def-dropdown1-padding-x);
  padding-left: var(--def-dropdown1-padding-chevron);
  background-color: var(--def-dropdown1-bg);
  background-image: var(--def-dropdown1-chevron);
  background-repeat: no-repeat;
  background-position: left var(--def-dropdown1-chevron-inset) center;
  background-size: var(--def-dropdown1-chevron-size);
  border: 1px solid var(--def-dropdown1-border);
  border-radius: var(--def-dropdown1-radius);
  color: var(--def-dropdown1-color);
  font-family: var(--font);
  font-size: var(--def-dropdown1-font-size);
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.def-dropdown1::-ms-expand,
select::-ms-expand {
  display: none;
}

.def-dropdown1:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.def-dropdown1:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.def-dropdown1.is-empty,
select.def-dropdown1.is-empty {
  cursor: default;
  pointer-events: none;
  color: var(--def-dropdown1-placeholder-color);
}

.def-dropdown1.is-empty {
  opacity: 0.85;
}

.def-dropdown1 option,
select option {
  background: var(--def-dropdown1-bg);
  color: var(--def-dropdown1-color);
  font-family: var(--font);
  font-size: var(--def-dropdown1-font-size);
  outline: none;
}

/* Placeholder: muted when closed, hidden from open menu */
.def-dropdown1 option[data-placeholder],
select option[data-placeholder] {
  display: none;
  color: var(--def-dropdown1-placeholder-color);
}

.def-dropdown1.is-placeholder,
select.is-placeholder,
.def-dropdown1:has(option[data-placeholder]:checked),
select:has(option[data-placeholder]:checked) {
  color: var(--def-dropdown1-placeholder-color);
}

.def-dropdown1 option[hidden],
select option[hidden] {
  display: none;
}

/* Open menu — rounded list (Chrome / Edge 134+) */
@supports (appearance: base-select) {
  .def-dropdown1,
  select,
  .def-dropdown1::picker(select),
  select::picker(select) {
    appearance: base-select;
    -webkit-appearance: base-select;
  }

  .def-dropdown1::picker-icon,
  select::picker-icon {
    display: none;
  }

  .def-dropdown1::picker(select),
  select::picker(select) {
    background-color: var(--def-dropdown1-menu-bg, var(--def-dropdown1-bg));
    border: 1px solid var(--def-dropdown1-border);
    border-radius: var(--def-dropdown1-menu-radius);
    padding: 0.3rem;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .def-dropdown1 option:not([data-placeholder]):not([hidden]),
  select option:not([data-placeholder]):not([hidden]) {
    padding: 0.55rem 0.75rem;
    border-radius: calc(var(--def-dropdown1-menu-radius) - 2px);
    margin-block: 0.125rem;
  }

  .def-dropdown1 option:not([data-placeholder]):not([hidden]):hover,
  select option:not([data-placeholder]):not([hidden]):hover,
  .def-dropdown1 option:not([data-placeholder]):not([hidden]):focus,
  select option:not([data-placeholder]):not([hidden]):focus {
    background-color: var(--bg-elevated);
    outline: none;
  }
}

/* Typeable dropdown wrapper — same height/chevron, allows typing */
.def-dropdown1-editable {
  position: relative;
  display: block;
  height: var(--def-dropdown1-height);
  min-height: var(--def-dropdown1-height);
  border: 1px solid var(--def-dropdown1-border);
  border-radius: var(--def-dropdown1-radius);
  background-color: var(--def-dropdown1-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.def-dropdown1-editable:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.def-dropdown1-editable > .def-dropdown1,
.def-dropdown1-editable > select {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.def-dropdown1-editable > .def-dropdown1:focus,
.def-dropdown1-editable > select:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.def-dropdown1-editable-input {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: var(--def-dropdown1-padding-chevron);
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: calc(var(--def-dropdown1-radius) - 1px);
  background: var(--def-dropdown1-bg);
  color: var(--def-dropdown1-color);
  font-family: var(--font);
  font-size: var(--def-dropdown1-font-size);
  line-height: 1.4;
  padding: 0 var(--def-dropdown1-padding-x);
  z-index: 1;
}

.def-dropdown1-editable-input:focus {
  outline: none;
  box-shadow: none;
}

.def-dropdown1-editable-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--def-dropdown1-padding-chevron);
  z-index: 2;
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  background-image: var(--def-dropdown1-chevron);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--def-dropdown1-chevron-size);
}

.def-dropdown1-editable-hit:disabled {
  opacity: 0.35;
  cursor: default;
}

.def-dropdown1-editable.is-empty .def-dropdown1-editable-hit {
  cursor: default;
  pointer-events: none;
  opacity: 0.35;
}

.def-dropdown1-editable.is-menu-open {
  z-index: 30;
}

.def-dropdown1-editable-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  z-index: 1200;
  max-height: calc(
    var(--def-dropdown1-menu-padding) * 2 +
    var(--def-dropdown1-menu-max-visible-items) * (
      var(--def-dropdown1-editable-option-padding-y) * 2 +
      var(--def-dropdown1-font-size) * var(--def-dropdown1-editable-option-line-height)
    )
  );
  overflow-y: auto;
  padding: var(--def-dropdown1-menu-padding);
  border: 1px solid var(--def-dropdown1-border);
  border-radius: var(--def-dropdown1-menu-radius);
  background: var(--def-dropdown1-menu-bg);
  box-shadow: var(--shadow);
  scrollbar-gutter: stable;
}

.def-dropdown1-editable-menu[hidden] {
  display: none;
}

.def-dropdown1-editable-menu.is-floating {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.def-dropdown1-editable-option {
  display: block;
  width: 100%;
  text-align: right;
  padding: var(--def-dropdown1-editable-option-padding-y) 0.75rem;
  border: none;
  border-radius: calc(var(--def-dropdown1-menu-radius) - 2px);
  background: transparent;
  color: var(--def-dropdown1-color);
  font-family: var(--font);
  font-size: var(--def-dropdown1-font-size);
  line-height: var(--def-dropdown1-editable-option-line-height);
  cursor: pointer;
  transition: background-color var(--transition);
}

.def-dropdown1-editable-option:hover {
  background: var(--bg-elevated);
}

.def-dropdown1-editable-option-row {
  display: flex;
  align-items: stretch;
  direction: ltr;
  gap: 0.2rem;
}

.def-dropdown1-editable-option-select {
  flex: 1;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.def-dropdown1-editable-option-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  padding: 0;
  border: none;
  border-radius: calc(var(--def-dropdown1-menu-radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color var(--transition),
    background-color var(--transition);
}

.def-dropdown1-editable-option-delete:hover {
  color: var(--danger);
  background: rgba(248, 81, 73, 0.12);
}