/* Sidebar card — generic container used by the three left-sidebar
   blocks (featured leagues / featured teams / all leagues browser).
   Visual contract mirrors the rest of the desktop chrome:
     - dark surface bg + subtle border + radius 16
     - tight padding so the cards stack vertically with breathing room
   Mobile keeps the existing `.stat-rail__widget` styling untouched —
   the new `.sidebar-card` class is scoped to `.has-desktop-shell` at
   ≥1200px only. */

@layer components {
  .sidebar-card {
    display: none;
  }

  @media (width >= 1200px) {
    .has-desktop-shell .sidebar-card {
      display: block;
      background:
        linear-gradient(180deg, rgb(255 255 255 / 3%) 0%, rgb(255 255 255 / 0%) 60%),
        var(--color-surface);
      border: 1px solid rgb(255 255 255 / 8%);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .has-desktop-shell .sidebar-card__header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: rgb(22 22 26);
      /* border-bottom: 1px solid rgb(255 255 255 / 8%); */
    }

    .has-desktop-shell .sidebar-card__title {
      margin: 0;
      font-family: var(--font-title);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-text);
      flex: 1;
      min-width: 0;
    }

    .has-desktop-shell .sidebar-card__list {
      list-style: none;
      padding: 4px 0;
      margin: 0;
    }

    .has-desktop-shell .sidebar-card__item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px 0 0;
    }

    .has-desktop-shell .sidebar-card__item:hover {
      background: rgb(255 255 255 / 3%);
    }

    .has-desktop-shell .sidebar-card__link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      color: var(--color-text);
      text-decoration: none;
      flex: 1;
      min-width: 0;
    }

    .has-desktop-shell .sidebar-card__crest {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 4px;
      background: var(--color-surface);
      overflow: hidden;
    }

    .has-desktop-shell .sidebar-card__crest--team {
      border-radius: 50%;
    }

    .has-desktop-shell .sidebar-card__crest img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .has-desktop-shell .sidebar-card__crest-fallback {
      font-family: var(--font-title);
      font-size: 8px;
      font-weight: 700;
      color: var(--color-text-muted);
      letter-spacing: 0.5px;
    }

    .has-desktop-shell .sidebar-card__name {
      font-size: 13px;
      font-weight: var(--weight-medium);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1;
    }

    .has-desktop-shell .sidebar-card__badge {
      font-family: var(--font-title);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 2px 5px;
      border-radius: 4px;
      background: rgb(0 255 135 / 18%);
      color: var(--color-accent);
      flex-shrink: 0;
    }

    .has-desktop-shell .sidebar-card__follow {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      background: none;
      border: 0;
      cursor: pointer;
      padding: 0;
      color: var(--color-text-muted);
      transition: color 0.15s ease;
    }

    .has-desktop-shell .sidebar-card__follow:hover {
      color: var(--color-text);
    }

    .has-desktop-shell .sidebar-card__follow.is-followed {
      color: var(--color-accent);
    }

    .has-desktop-shell .sidebar-card__follow.is-followed svg {
      fill: var(--color-accent);
    }

    /* All-leagues card — search sits BELOW the header, above the country
       list. Slim pill, less padding than other inputs so it reads as a
       quick-filter rather than a primary CTA. */
    .has-desktop-shell .sidebar-card__search {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 12px 6px 0;
      padding: 7px 10px;
      background: rgb(0 0 0 / 25%);
      border: 1px solid rgb(255 255 255 / 6%);
      border-radius: 9999px;
      color: var(--color-text-muted);
    }

    .has-desktop-shell .sidebar-card__search:focus-within {
      border-color: rgb(255 255 255 / 14%);
    }

    .has-desktop-shell .sidebar-card__search-input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: 0;
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: 12px;
      padding: 0;
    }

    .has-desktop-shell .sidebar-card__search-input::placeholder {
      color: var(--color-text-muted);
    }

    .has-desktop-shell .sidebar-card__countries {
      padding: 4px 0;
    }

    .has-desktop-shell .sidebar-card__country[hidden] {
      display: none;
    }

    .has-desktop-shell .sidebar-card__country-summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      cursor: pointer;
      list-style: none;
      font-size: 13px;
      color: var(--color-text);
    }

    .has-desktop-shell .sidebar-card__country-summary::-webkit-details-marker {
      display: none;
    }

    .has-desktop-shell .sidebar-card__country-summary:hover {
      background: rgb(255 255 255 / 3%);
    }

    .has-desktop-shell .sidebar-card__country-flag {
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
    }

    .has-desktop-shell .sidebar-card__country-name {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .has-desktop-shell .sidebar-card__country-count {
      font-size: 11px;
      color: var(--color-text-muted);
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .sidebar-card__country-chevron {
      color: var(--color-text-muted);
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }

    .has-desktop-shell .sidebar-card__country[open] .sidebar-card__country-chevron {
      transform: rotate(180deg);
    }

    .has-desktop-shell .sidebar-card__country-leagues {
      list-style: none;
      margin: 0;
      padding: 2px 0 8px;
    }

    .has-desktop-shell .sidebar-card__country-league[hidden] {
      display: none;
    }

    .has-desktop-shell .sidebar-card__country-league a {
      display: block;
      padding: 6px 12px 6px 40px;
      color: var(--color-text-muted);
      text-decoration: none;
      font-size: 12px;
    }

    .has-desktop-shell .sidebar-card__country-league a:hover {
      background: rgb(255 255 255 / 3%);
      color: var(--color-text);
    }

    .has-desktop-shell .sidebar-card__empty {
      padding: 16px 12px;
      text-align: center;
      font-size: 12px;
      color: var(--color-text-muted);
    }

    .has-desktop-shell .sidebar-card__empty[hidden] {
      display: none;
    }

    /* ──────────────────────────────────────────────────────────────
       Variant: `.sidebar-list` — chrome-less list. No card bg, no
       border, just the section title + an "Editar" link header, and
       flat rows with active-item highlight. Used by the featured-
       teams partial as a visual A/B against `.sidebar-card`. */
    .has-desktop-shell .sidebar-list {
      display: block;
      margin-bottom: 16px;
    }

    .has-desktop-shell .sidebar-list__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      margin-bottom: 10px;
    }

    .has-desktop-shell .sidebar-list__title {
      margin: 0;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 1.2px;
      color: var(--color-text-muted);
      text-transform: uppercase;
    }

    .has-desktop-shell .sidebar-list__edit {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--color-text-subtle, var(--color-text-muted));
      text-decoration: none;
    }

    .has-desktop-shell .sidebar-list__edit:hover {
      color: var(--color-text);
    }

    .has-desktop-shell .sidebar-list__items {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .has-desktop-shell .sidebar-list__item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: rgb(228 228 231);
      background: transparent;
      border: 1px solid transparent;
      text-decoration: none;
      transition:
        background 0.15s ease,
        border-color 0.15s ease;
    }

    .has-desktop-shell .sidebar-list__item:hover {
      background: rgb(255 255 255 / 3%);
    }

    .has-desktop-shell .sidebar-list__item.is-active {
      background: rgb(17 17 19);
      border-color: rgb(255 255 255 / 8%);
      color: #fff;
      font-weight: 600;
    }

    .has-desktop-shell .sidebar-list__item-flag {
      width: 18px;
      height: 13px;
      border-radius: 1px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .has-desktop-shell .sidebar-list__item-name {
      flex: 1 1 0;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .has-desktop-shell .sidebar-list__item-badge {
      font-family: var(--font-title);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--color-accent);
      flex-shrink: 0;
    }

    /* ─── Bota de Oro Europea (variant --bota) ────────────────────── */

    .has-desktop-shell .sidebar-card__title-icon {
      flex-shrink: 0;
      color: rgb(255 193 7);
    }

    .has-desktop-shell .sidebar-card__hint {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .sidebar-card__bota-list {
      list-style: none;
      padding: 8px 12px 12px;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .has-desktop-shell .sidebar-card__bota-row {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 4px 4px;
    }

    .has-desktop-shell .sidebar-card__bota-row--leader {
      padding: 6px 8px;
      margin: 0 -4px;
      border-radius: 6px;
      background: linear-gradient(
        90deg,
        rgb(255 193 7 / 12%) 0%,
        rgb(255 193 7 / 0%) 100%
      );
    }

    .has-desktop-shell .sidebar-card__bota-rank {
      font-family: var(--font-title);
      font-size: 13px;
      color: var(--color-text-muted);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .sidebar-card__bota-row--leader .sidebar-card__bota-rank {
      color: rgb(255 193 7);
      font-weight: 700;
    }

    .has-desktop-shell .sidebar-card__bota-player {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .has-desktop-shell .sidebar-card__bota-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .has-desktop-shell .sidebar-card__bota-meta {
      font-size: 11px;
      color: var(--color-text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .has-desktop-shell .sidebar-card__bota-goals {
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-family: var(--font-title);
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .sidebar-card__bota-goals-num {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-accent);
    }

    .has-desktop-shell .sidebar-card__bota-goals small {
      font-size: 9px;
      font-weight: 600;
      color: var(--color-text-muted);
      text-transform: uppercase;
    }
  }
}