/* Bottom-sheet single-select modal — mobile-first picker that replaces
 * <select> when the native UI would feel out of place. Port of v1 CSS
 * (see assets/styles/app.css §31411+) mapped to v2 tokens.
 */

@layer components {
  /* Generic select trigger — the button that opens a select-modal.
     Use as the base class; component-specific triggers layer modifiers
     on top (e.g. .standings-league-trigger adds a leading logo).

     `min-height: 44px` + `padding: 10px 14px` keep the trigger at the
     WCAG 2.1 AA / iOS HIG touch-target minimum without hard-coding a
     fixed height (content can still push the button taller). All
     current consumers (standings toolbar, team stats picker, team
     matches competition filter, league season selector) render at the
     new height with no overrides needed. */
  .select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    min-height: 30px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .select-trigger:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  .select-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .select-trigger > svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: auto;
  }

  .select-trigger > span {
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  .select-trigger img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .select-modal-wrapper {
    position: relative;
  }

  /* `[hidden]` neutraliser — el CSS de select-modal vive en un
     archivo importado vía JS (`select_modal_controller.js` →
     `import "../styles/components/select-modal.css"`). En hard reload
     sin caché el HTML llega antes que el bundle JS, el modal aparece
     con `display: flex` + `position: fixed` cubriendo la pantalla con
     "Buscar jornada" durante el FOUC. Templates emiten `hidden` por
     defecto; el controller hace `target.hidden = false` en
     `connect()`. Sin este override, `display: flex` gana al atributo
     HTML `hidden`. */
  .select-modal[hidden],
  .select-modal-backdrop[hidden] {
    display: none !important;
  }

  .select-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease-in-out,
      visibility 0.3s ease-in-out;
    z-index: 9998;
  }

  .select-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  .select-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    max-height: 70vh;
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgb(0 0 0 / 40%);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .select-modal.active {
    transform: translateY(0);
  }

  .select-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .select-modal-title {
    font-family: var(--font-display, inherit);
    font-size: 20px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text);
    margin: 0;
  }

  .select-modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 5%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition:
      background 0.2s ease,
      transform 0.1s ease;
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  .select-modal-close-btn:hover {
    background: rgb(255 255 255 / 10%);
  }

  .select-modal-close-btn:active {
    transform: scale(0.95);
  }

  .select-modal-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentcolor;
  }

  /* Searchable modals lock to the full max-height so the bottom-sheet
     doesn't keep collapsing as the user types and matches drop off
     (the visual "loquísimo" springing the user reported). The base
     selector only sets `max-height`, which lets the modal collapse to
     content size; with `:has()` we promote it to `height` when the
     consumer rendered the optional search row. */
  .select-modal:has(.select-modal-search) {
    height: 70vh;
  }

  /* Optional search row for select-modals with long option lists (e.g.
     the stats metric picker — 39 options). Only renders when the
     consumer ships an `input data-select-modal-target="search"`; the
     controller's `filter` action picks it up automatically. */
  .select-modal-search {
    position: relative;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--color-border);
  }

  .select-modal-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(calc(-50% - 2px));
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .select-modal-search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
  }

  .select-modal-search-input::placeholder {
    color: var(--color-text-muted);
  }

  .select-modal-search-input:focus {
    border-color: var(--color-accent);
  }

  .select-modal-search-input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
  }

  .select-modal-options {
    overflow: hidden auto;
    flex: 1;
    padding: 8px 0;
    overscroll-behavior: contain;
  }

  .select-modal-options::-webkit-scrollbar {
    width: 6px;
  }

  .select-modal-options::-webkit-scrollbar-track {
    background: transparent;
  }

  .select-modal-options::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 10%);
    border-radius: 3px;
  }

  .select-modal-options::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / 15%);
  }

  .select-modal-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    min-height: 56px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
  }

  .select-modal-option:last-child {
    border-bottom: 0;
  }

  .select-modal-option:hover,
  .select-modal-option:focus-visible {
    background: var(--color-surface-hover);
    outline: none;
  }

  .select-modal-option.active {
    background: color-mix(in oklab, var(--color-accent) 5%, transparent);
  }

  .select-modal-option.active:hover {
    background: color-mix(in oklab, var(--color-accent) 8%, transparent);
  }

  .select-modal-option-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .select-modal-option-label {
    font-size: 16px;
    font-weight: var(--weight-semibold, 500);
    color: var(--color-text);
    flex: 1;
  }

  .select-modal-option.active .select-modal-option-label {
    color: var(--color-accent);
    font-weight: var(--weight-bold, 600);
  }

  .select-modal-option-check {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent);
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0;
  }

  .select-modal-option.active .select-modal-option-check {
    opacity: 1;
  }

  @media (width <= 420px) {
    .select-modal {
      max-height: 80vh;
    }

    .select-modal-option {
      min-height: 60px;
      padding: 18px 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .select-modal,
    .select-modal-backdrop {
      transition: none;
    }
  }
}