/**
 * LibZen Select — dropdown / creatable / searchable combobox.
 */

:root {
  --libzen-sl-bg: var(--bg, #0f1419);
  --libzen-sl-surface: var(--surface, #1a2332);
  --libzen-sl-text: var(--text, #e2e8f0);
  --libzen-sl-muted: var(--text-muted, #94a3b8);
  --libzen-sl-border: var(--border, #2d3a4f);
  --libzen-sl-hover: rgba(255, 255, 255, 0.06);
  --libzen-sl-accent: var(--accent, #3b82f6);
  --libzen-sl-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --libzen-sl-radius: 6px;
  --libzen-sl-font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

[data-libzen-select-theme='light'] {
  --libzen-sl-bg: #ffffff;
  --libzen-sl-surface: #ffffff;
  --libzen-sl-text: #37352f;
  --libzen-sl-muted: #9b9a97;
  --libzen-sl-border: rgba(55, 53, 47, 0.16);
  --libzen-sl-hover: rgba(55, 53, 47, 0.06);
  --libzen-sl-accent: #2383e2;
  --libzen-sl-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 3px 6px;
}

.libzen-sl-root { position: relative; width: 100%; font-family: var(--libzen-sl-font); }
.libzen-sl-control {
  display: flex; align-items: stretch; width: 100%; min-height: 34px; font-size: 14px;
  border: 1px solid var(--libzen-sl-border); border-radius: var(--libzen-sl-radius);
  background: var(--libzen-sl-bg); overflow: hidden;
}
.libzen-sl-root:focus-within .libzen-sl-control { border-color: var(--libzen-sl-accent); }
.libzen-sl-transparent .libzen-sl-control,
.libzen-sl-transparent.libzen-sl-root:focus-within .libzen-sl-control {
  background: transparent; border-color: transparent;
}
.libzen-sl-transparent .libzen-sl-toggle { border-left-color: transparent; }
.libzen-sl-contained.libzen-sl-root, .libzen-sl-transparent.libzen-sl-root { font-family: inherit; }
.libzen-sl-contained .libzen-sl-control, .libzen-sl-transparent .libzen-sl-control { font-size: inherit; }
.libzen-sl-contained .libzen-sl-toggle, .libzen-sl-transparent .libzen-sl-toggle {
  width: auto; padding: 0 0.15em;
}
.libzen-sl-chip.libzen-sl-root { width: auto; display: inline-flex; }
.libzen-sl-chip .libzen-sl-control { width: auto; }
.libzen-sl-chip .libzen-sl-value, .libzen-sl-chip .libzen-sl-input {
  flex: 0 1 auto; padding-left: 0; padding-right: 0;
}
.libzen-sl-panel-inherit-font .libzen-sl-option,
.libzen-sl-panel-inherit-font .libzen-sl-empty { font-family: inherit; font-size: inherit; }
.libzen-sl-input, .libzen-sl-value {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--libzen-sl-text);
  font: inherit; padding: 6px 10px; text-align: left;
}
.libzen-sl-input::placeholder { color: var(--libzen-sl-muted); }
.libzen-sl-value {
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.libzen-sl-value-placeholder { color: var(--libzen-sl-muted); }
.libzen-sl-toggle {
  flex-shrink: 0; width: 34px; min-width: 0; border: none;
  border-left: 1px solid var(--libzen-sl-border); background: transparent;
  color: var(--libzen-sl-muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
}
.libzen-sl-toggle:hover { background: var(--libzen-sl-hover); color: var(--libzen-sl-text); }
.libzen-sl-chevron {
  display: inline-block; width: 0.55em; height: 0.55em;
  border-right: 0.14em solid currentColor; border-bottom: 0.14em solid currentColor;
  transform: rotate(45deg); margin-top: -0.2em;
}
.libzen-sl-panel {
  position: fixed; z-index: 10000; background: var(--libzen-sl-surface); color: var(--libzen-sl-text);
  border: 1px solid var(--libzen-sl-border); border-radius: var(--libzen-sl-radius);
  box-shadow: var(--libzen-sl-shadow); overflow: hidden; display: flex; flex-direction: column;
  box-sizing: border-box; max-width: calc(100vw - 16px);
}
.libzen-sl-list { overflow-y: auto; padding: 4px 0; }
.libzen-sl-option {
  display: block; width: 100%; border: none; background: transparent; color: inherit;
  font: inherit; font-size: 14px; text-align: left; padding: 8px 12px; cursor: pointer;
  white-space: nowrap;
}
.libzen-sl-option:hover, .libzen-sl-option-highlight { background: var(--libzen-sl-hover); }
.libzen-sl-option-selected { color: var(--libzen-sl-accent); font-weight: 600; }
.libzen-sl-option-create {
  color: var(--libzen-sl-accent); font-weight: 600; border-bottom: 1px solid var(--libzen-sl-border);
}
.libzen-sl-empty { padding: 10px 12px; font-size: 13px; color: var(--libzen-sl-muted); }
.libzen-sl-disabled { opacity: 0.55; pointer-events: none; }
.libzen-sl-value[hidden], .libzen-sl-input[hidden] { display: none !important; }
.libzen-sl-select-mode .libzen-sl-value { cursor: pointer; }
.libzen-sl-select-mode .libzen-sl-value:hover { background: var(--libzen-sl-hover); }
.libzen-sl-searchable .libzen-sl-input { cursor: text; }
.libzen-sl-searchable.libzen-sl-root:not(.libzen-sl-create-mode) .libzen-sl-value {
  display: none !important;
}