/* ============================================================
   CUSTOM SELECT — Themed dropdown replacement for native <select>.

   Fully themed via var(--color-*) and var(--font-*) tokens.
   Renders options as a styled popover instead of browser-native
   picker popup. Keyboard navigable, ARIA listbox pattern.

   USAGE (React):
     <CordiantSelect
       id="field-id"
       value={currentValue}
       onChange={setValue}
       options={[{ value: 'US', label: 'United States' }]}
       placeholder="Select..."
     />

   USAGE (HTML — vanilla JS):
     <div class="csel">
       <button class="csel__trigger" aria-haspopup="listbox">
         <span class="csel__label">Select...</span>
         <svg class="csel__chevron" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="1.5"
           stroke-linecap="round" stroke-linejoin="round"
           aria-hidden="true">
           <path d="M6 9l6 6 6-6"/>
         </svg>
       </button>
       <div class="csel__list" role="listbox">
         <div class="csel__item" role="option">Option 1</div>
         <div class="csel__item csel__item--active"
           aria-selected="true" role="option">Option 2</div>
       </div>
     </div>

   MODIFIERS:
     .csel--disabled          Reduced opacity, no pointer events
     .csel__trigger--open     Accent border when list is visible
     .csel__trigger--placeholder  Muted label when no selection
     .csel__chevron--open     Rotated 180° when list is visible
     .csel__item--active      Bold + primary colour for selected
     .csel__item--focus       Warm background for keyboard focus
   ============================================================ */


/* ── Wrapper ── */

.csel {
  position: relative;
  width: 100%;
}

.csel--disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ── Trigger Button ── */

.csel__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-surface-base, transparent);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.4;
}

.csel__trigger:hover {
  border-color: var(--color-primary);
}

.csel__trigger:focus {
  border-color: var(--color-accent);
}

.csel__trigger--open {
  border-color: var(--color-accent);
}

.csel__trigger--placeholder .csel__label {
  color: var(--color-text-secondary);
  opacity: 0.6;
}


/* ── Label & Chevron ── */

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

.csel__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}

.csel__chevron--open {
  transform: rotate(180deg);
}


/* ── Dropdown List ── */

.csel__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: var(--shadow-card, 0 4px 12px rgba(0, 0, 0, 0.08));
  animation: csel__fadeIn 0.15s ease-out;
}

@keyframes csel__fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Option Items ── */

.csel__item {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}

.csel__item:hover,
.csel__item--focus {
  background: var(--color-surface-warm);
}

.csel__item--active {
  font-weight: 600;
  color: var(--color-primary);
}

.csel__item--active.csel__item--focus,
.csel__item--active:hover {
  background: var(--color-surface-warm);
}


/* ── Scrollbar ── */

.csel__list::-webkit-scrollbar {
  width: 4px;
}

.csel__list::-webkit-scrollbar-track {
  background: transparent;
}

.csel__list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}


/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
  .csel__chevron {
    transition: none;
  }
  .csel__list {
    animation: none;
  }
}