/* =========================================================================
   liveselect.css — self-contained, themeable styles.

   THEMING: Everything reads from CSS custom properties with sane fallbacks, so
   the control looks finished with no host theme. Override any of the --liveselect-*
   variables (globally on :root or scoped to one .liveselect) to restyle it, or target
   the BEM-ish classes directly. Class prefix is `liveselect` (matches classPrefix).

   To match an existing app's inputs, the simplest override is:
     .liveselect { --liveselect-border: <your border>; --liveselect-radius: <your radius>; }
   ========================================================================= */

.liveselect {
  /* --- theme tokens (override these) --- */
  --liveselect-font:          inherit;
  --liveselect-text:          #0f1821;
  --liveselect-text-muted:    #6b7785;
  --liveselect-bg:            #ffffff;
  --liveselect-surface:       #ffffff;
  --liveselect-hover:         #f1f4f7;
  --liveselect-border:        #cdd5de;
  --liveselect-border-focus:  #3b82f6;
  --liveselect-accent:        #2563eb;
  --liveselect-danger:        #dc2626;
  --liveselect-radius:        8px;
  --liveselect-radius-sm:     6px;
  --liveselect-shadow:        0 8px 28px rgba(15, 24, 33, 0.14);
  --liveselect-input-pad:     10px 12px;
  --liveselect-menu-z:        1500;

  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  font-family: var(--liveselect-font);
  color: var(--liveselect-text);
}

.liveselect--disabled { opacity: 0.6; pointer-events: none; }

.liveselect__label { font-size: 0.85rem; font-weight: 600; color: var(--liveselect-text-muted); }
.liveselect__req   { color: var(--liveselect-danger); }

.liveselect__control { position: relative; }

.liveselect__input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--liveselect-input-pad);
  padding-right: 38px;
  font: inherit;
  font-size: 1rem;
  color: var(--liveselect-text);
  background: var(--liveselect-bg);
  border: 1px solid var(--liveselect-border);
  border-radius: var(--liveselect-radius);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.liveselect__input::placeholder { color: var(--liveselect-text-muted); }
.liveselect__input:focus {
  border-color: var(--liveselect-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--liveselect-border-focus) 22%, transparent);
}

.liveselect__clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0; background: transparent;
  color: var(--liveselect-text-muted);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  border-radius: var(--liveselect-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.liveselect__clear:hover { background: var(--liveselect-hover); color: var(--liveselect-text); }
.liveselect__clear[hidden] { display: none; }

/* ---- Multiple selection (chips) ---- */
.liveselect__tags { display: contents; }
.liveselect__tags[hidden] { display: none; }

.liveselect--multi .liveselect__control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 38px 6px 8px;
  background: var(--liveselect-bg);
  border: 1px solid var(--liveselect-border);
  border-radius: var(--liveselect-radius);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.liveselect--multi .liveselect__control:focus-within {
  border-color: var(--liveselect-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--liveselect-border-focus) 22%, transparent);
}
/* The input becomes a borderless, auto-growing field sitting after the chips. */
.liveselect--multi .liveselect__input {
  flex: 1 1 80px; width: auto; min-width: 80px;
  padding: 4px 2px; border: 0; background: transparent; box-shadow: none;
}
.liveselect--multi .liveselect__input:focus { border: 0; box-shadow: none; }

.liveselect__tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 9px;
  background: var(--liveselect-hover);
  border: 1px solid var(--liveselect-border);
  border-radius: 999px;
  font-size: 0.86rem; line-height: 1.4; max-width: 100%;
}
.liveselect__tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liveselect__tag-remove {
  flex: 0 0 auto; width: 18px; height: 18px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--liveselect-text-muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.liveselect__tag-remove:hover { background: var(--liveselect-border); color: var(--liveselect-text); }

/* Dropdown menu. */
.liveselect__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: var(--liveselect-menu-z);
  max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--liveselect-surface);
  border: 1px solid var(--liveselect-border);
  border-radius: var(--liveselect-radius-sm);
  box-shadow: var(--liveselect-shadow);
  padding: 6px;
}
.liveselect__menu[hidden] { display: none; }

/* Each option: large, left-aligned, two-line tap target (touch-friendly). */
.liveselect__opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; min-height: 42px;
  padding: 8px 12px;
  border: 0; background: transparent; color: var(--liveselect-text);
  cursor: pointer; border-radius: var(--liveselect-radius-sm);
  font: inherit; font-size: 1rem;
}
.liveselect__opt:hover,
.liveselect__opt--active { background: var(--liveselect-hover); }

.liveselect__opt--create {
  color: var(--liveselect-accent); font-weight: 600;
  flex-direction: row; align-items: center; gap: 8px;
}

/* Non-selectable option (per-option `disabled: true`). */
.liveselect__opt--disabled {
  opacity: 0.5; cursor: not-allowed;
}
.liveselect__opt--disabled:hover { background: transparent; }

/* Chosen row in multiple mode: tinted, with a trailing checkmark. */
.liveselect__opt--chosen { color: var(--liveselect-accent); }
.liveselect__opt--chosen::after {
  content: "✓"; position: absolute; right: 12px;
  font-weight: 700; color: var(--liveselect-accent);
}
.liveselect--multi .liveselect__opt { position: relative; padding-right: 30px; }

.liveselect__opt-label { font-weight: 600; }
.liveselect__opt-sub   { font-size: 0.82rem; color: var(--liveselect-text-muted); }

/* Matched-substring highlight (opt-in via `highlight: true`). */
.liveselect__mark {
  background: var(--liveselect-mark, #fde68a); color: inherit;
  border-radius: 2px; padding: 0 1px;
}

/* "Showing N of M" footer when results are capped by `limit`. */
.liveselect__more {
  padding: 6px 12px; text-align: center;
  color: var(--liveselect-text-muted); font-size: 0.8rem;
}

/* Group heading (from groupBy / option.group): non-selectable, sticky label. */
.liveselect__group {
  position: sticky; top: -6px;
  padding: 8px 12px 4px;
  background: var(--liveselect-surface);
  color: var(--liveselect-text-muted);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

.liveselect__msg   { padding: 10px 12px; color: var(--liveselect-text-muted); font-size: 0.92rem; }
.liveselect__error { color: var(--liveselect-danger); font-size: 0.82rem; }
.liveselect__error[hidden] { display: none; }

/* Optional dark theme: add class `liveselect--dark` (or override the tokens yourself). */
.liveselect--dark {
  --liveselect-text:        #e6edf3;
  --liveselect-text-muted:  #8b98a5;
  --liveselect-bg:          #0f1821;
  --liveselect-surface:     #16212c;
  --liveselect-hover:       #1f2c39;
  --liveselect-border:      #2b3947;
  --liveselect-shadow:      0 8px 28px rgba(0, 0, 0, 0.5);
  --liveselect-mark:        #7c5b00;
}
.liveselect--dark .liveselect__mark { color: #ffe9a8; }