/* ── Custom Select Component ─────────────────────────────────────────────── */
/*                                                                            */
/* Replaces native <select> with a pixel-perfect cross-platform dropdown.    */
/* Avoids EMUI full-screen picker, iOS scroll-wheel, and desktop OS flyouts. */
/*                                                                            */
/* Variants (set via data-npx-variant on the <select>):                      */
/*   chip           — pill button matching .gallery-filter-chip               */
/*   box            — light rectangular (archive picker, small selects)       */
/*   form           — full-width, matches auth .auth-input style              */
/*   settings-form  — full-width, matches .page-view__input style             */

/* ── Hide the original <select> without removing it from the DOM ──────────
   Keeping it in the DOM means:
   - native form submission still works
   - existing .value reads and change listeners still fire
   - assistive technology can use it if the custom widget is unavailable    */
[data-npx-select] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ── Host wrapper ──────────────────────────────────────────────────────── */
.npx-select {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Trigger button ──────────────────────────────────────────────────────
   Resets browser button defaults then re-applies exactly what each
   variant needs. Using explicit properties instead of `all: unset`
   so font inheritance still flows correctly.                              */
.npx-select__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  cursor: pointer;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline-offset: 2px;
}

.npx-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron icon — rotates when open */
.npx-select__chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
  opacity: 0.65;
}

.npx-select[aria-expanded="true"] .npx-select__chevron {
  transform: rotate(-180deg);
}

/* ── Dropdown panel ────────────────────────────────────────────────────── */
.npx-select__panel {
  /* The panel lives permanently in document.body (appended at init time by
     _buildWidget). position:fixed in _positionPanel() anchors it to the visual
     viewport, immune to all ancestor overflow:hidden and transforms.
     The values below are CSS fallback only (panel is hidden by default). */
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 3000;
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  min-width: 100%;
  max-width: 280px;
  max-height: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.npx-select__panel[hidden] {
  display: none !important;
}

/* ── Search input ────────────────────────────────────────────────────────
   Only shown when the option count warrants it (auto or forced).         */
.npx-select__search {
  padding: 0.5rem 0.6rem 0.35rem;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}

.npx-select__search[hidden] {
  display: none !important;
}

.npx-select__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  color: var(--color-text, #333);
}

.npx-select__search-input:focus {
  border-color: var(--color-accent, #2ECC71);
}

/* ── Option list ─────────────────────────────────────────────────────────  */
.npx-select__list {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.npx-select__option {
  padding: 0.52rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text, #333);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.npx-select__option:hover,
.npx-select__option--focused {
  background: rgba(46, 204, 113, 0.09);
}

.npx-select__option--selected {
  color: var(--color-accent, #2ECC71);
  font-weight: 600;
}

/* Selected + focused at same time */
.npx-select__option--selected.npx-select__option--focused {
  background: rgba(46, 204, 113, 0.14);
}

.npx-select__option[hidden] {
  display: none !important;
}

/* Group headers (from <optgroup label="..."> ) */
.npx-select__group-label {
  padding: 0.5rem 0.9rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light, #888);
  cursor: default;
}

.npx-select__group-label[hidden] {
  display: none !important;
}

/* Empty-state when search returns no results */
.npx-select__empty {
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  color: var(--color-text-light, #888);
  font-style: italic;
}

.npx-select__empty[hidden] {
  display: none !important;
}

/* ══ VARIANT: chip ══════════════════════════════════════════════════════════
   Pill button — sits inline with the .gallery-filter-chip buttons.
   Active state (club selected) uses the same green as the active chip.    */
.npx-select--chip {
  flex-shrink: 0;
}

.npx-select--chip .npx-select__trigger {
  border: 1.5px solid #ccc;
  border-radius: 20px;
  padding: 0.3rem 0.5rem 0.3rem 0.9rem;
  font-size: 1rem;
  height: 38px;
  width: 110px;
  min-width: 100px;
  max-width: 125px;
  color: #555;
  background: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Active = a real value is selected */
.npx-select--chip[data-has-value="true"] .npx-select__trigger {
  background: var(--color-accent, #2ECC71);
  border-color: var(--color-accent, #2ECC71);
  color: #fff;
}

.npx-select--chip[data-has-value="true"] .npx-select__chevron {
  opacity: 1;
}

/* Panel aligned to left edge of the trigger */
.npx-select--chip .npx-select__panel {
  left: 0;
  right: auto;
}

/* ══ VARIANT: box ═══════════════════════════════════════════════════════════
   Standard rectangular — matches .archive-picker__select appearance.      */
.npx-select--box {
  display: flex;
}

.npx-select--box .npx-select__trigger {
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 6px);
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a1a1a);
  min-width: 180px;
}

.npx-select--box .npx-select__trigger:focus-visible {
  outline: 2px solid var(--color-accent, #2ECC71);
  outline-offset: 1px;
}

/* ══ VARIANT: form ══════════════════════════════════════════════════════════
   Full-width — matches .auth-input in auth/styles/auth-global.css.        */
.npx-select--form {
  display: flex;
  width: 100%;
}

.npx-select--form .npx-select__trigger {
  width: 100%;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 6px);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: white;
  color: var(--color-text, #333);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.npx-select--form .npx-select__trigger:focus-visible {
  outline: none;
  border-color: var(--color-blue, #4A90E2);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.npx-select--form[aria-expanded="true"] .npx-select__trigger {
  border-color: var(--color-blue, #4A90E2);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.npx-select--form .npx-select__panel {
  width: 100%;
  max-width: 100%;
}

/* ══ VARIANT: settings-form ═════════════════════════════════════════════════
   Full-width — matches .page-view__input in css/pages/settings.css.       */
.npx-select--settings-form {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
}

.npx-select--settings-form .npx-select__trigger {
  width: 100%;
  border: 1px solid #d5dce6;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  background: #fafbfd;
  color: #1a1a1a;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.npx-select--settings-form .npx-select__trigger:focus-visible {
  outline: none;
  border-color: #5b8dd4;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(91, 141, 212, 0.12);
}

.npx-select--settings-form[aria-expanded="true"] .npx-select__trigger {
  border-color: #5b8dd4;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(91, 141, 212, 0.12);
}

.npx-select--settings-form .npx-select__panel {
  width: 100%;
  max-width: 100%;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
.np-dark-mode .npx-select__panel {
  background: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.12);
}

.np-dark-mode .npx-select__option {
  color: #e0e0e0;
}

.np-dark-mode .npx-select__option:hover,
.np-dark-mode .npx-select__option--focused {
  background: rgba(46, 204, 113, 0.12);
}

.np-dark-mode .npx-select__group-label {
  color: rgba(255, 255, 255, 0.45);
}

.np-dark-mode .npx-select__search-input {
  background: #2a2a3e;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

.np-dark-mode .npx-select--settings-form .npx-select__trigger {
  background: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}