/**
 * @file
 * Skin du dropdown custom pour tous les <select> du site (form-element--select.html.twig).
 * Extrait de mediatheque-filter.css (PELV3) pour être chargé globalement —
 * ce skin n'est plus réservé aux filtres médiathèque/actualités.
 */

/* ── Dropdown select — label Drupal (ff-body bold muted, no tracking) ──── */
/* Spécificité (0,2,1) pour gagner sur .form-item label (0,1,1) de Drupal */
.form-item[data-component="select"] label,
.form-item[data-component="select"] .form-item__label,
[data-component="select"] label,
[data-component="select"] .form-item__label {
  font-family: var(--tw-font-ff-body);
  font-weight: 700;
  font-size: var(--tw-text-fs-sm);
  line-height: var(--tw-text-fs-sm--line-height);
  color: var(--tw-color-content-complement);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

/* Focus / ouverture du select natif → bordure teal + shadow (no-JS fallback) */
[data-component="select"]:not([data-enhanced]):focus-within {
  border-color: var(--tw-color-content-uno);
  box-shadow: 0 0 2px 1px rgba(2, 60, 72, 0.16);
  background-color: var(--tw-color-surface-highest);
}

/* Option sélectionnée (valeur non vide) → bg blanc + bordure noire (no-JS fallback) */
[data-component="select"]:not([data-enhanced]):has(select option:checked:not([value=""])) {
  background-color: var(--tw-color-surface-highest);
  border-color: var(--tw-color-content-main-alt);
}

/* Sélectionné + focus → bg blanc + bordure noire + shadow (no-JS fallback) */
[data-component="select"]:not([data-enhanced]):has(select option:checked:not([value=""])):focus-within {
  border-color: var(--tw-color-content-main-alt);
  box-shadow: 0 0 2px 1px rgba(2, 60, 72, 0.16);
}

/* ── Custom select widget ───────────────────────────────────────────── */

/* Container positional anchor for the absolute panel.
   overflow: visible casse le tw:overflow-hidden du wrapper Standard
   (form-element--select.html.twig) : sans ça, .select-custom-panel — en
   position absolute juste en dessous du pill — est clippé par son parent et
   n'apparaît jamais au clic (état ARIA/DOM correct, mais rien de visible). */
[data-component="select"][data-enhanced] {
  position: relative;
  overflow: visible;
}

/* Hide native select visually — still in DOM for form submission */
[data-component="select"][data-enhanced] select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Value display replaces the native select text */
.select-value-display {
  font-family: var(--tw-font-ff-body);
  font-weight: 500;
  font-size: var(--tw-text-fs-sm);
  line-height: var(--tw-text-fs-sm--line-height);
  color: var(--tw-color-content-main-alt);
  padding-right: var(--tw-spacing-spa-md, 20px); /* room for absolute chevron */
  min-width: 3rem;
  white-space: nowrap;
}

/* Placeholder state */
[data-component="select"]:not([data-selected]) .select-value-display {
  font-style: italic;
  color: var(--tw-color-content-complement);
}

/* Chevron rotation when open — uses transform, Tailwind v4 uses translate separately */
.select-caret {
  transition: transform 0.15s ease;
}

[data-component="select"][data-open] .select-caret {
  transform: rotate(180deg);
}

/* Open state — replace :focus-within for enhanced selects */
[data-component="select"][data-enhanced][data-open] {
  border-color: var(--tw-color-content-uno);
  box-shadow: 0 0 2px 1px rgba(2, 60, 72, 0.16);
  background-color: var(--tw-color-surface-highest);
}

/* Selected + open state */
[data-component="select"][data-enhanced][data-selected][data-open] {
  border-color: var(--tw-color-content-main-alt);
  box-shadow: 0 0 2px 1px rgba(2, 60, 72, 0.16);
}

/* Selected + closed state */
[data-component="select"][data-enhanced][data-selected]:not([data-open]) {
  background-color: var(--tw-color-surface-highest);
  border-color: var(--tw-color-content-main-alt);
}

/* Custom dropdown panel */
.select-custom-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background-color: var(--tw-color-surface-zone-base-higher);
  border: 1px solid var(--tw-color-outline-low);
  border-radius: var(--tw-radius-main, 8px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  padding: var(--tw-spacing-spa-sd, 16px);
  z-index: 100;
  margin-top: 2px;
}

.select-custom-panel[hidden] {
  display: none;
}

/* Option list */
.select-custom-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select-custom-panel li {
  font-family: var(--tw-font-ff-body);
  font-weight: 400;
  font-size: var(--tw-text-fs-sd);
  line-height: 1.5;
  color: var(--tw-color-content-main);
  padding: 8px 40px 8px 8px;
  cursor: pointer;
  border-radius: var(--tw-radius-sm, 4px);
  white-space: nowrap;
}

.select-custom-panel li:hover {
  background-color: var(--tw-color-surface-effect-overlay-lowest, rgba(0, 0, 0, 0.04));
}

.select-custom-panel li[aria-selected="true"] {
  color: var(--tw-color-content-uno);
  font-weight: 500;
}