/* ================================================================
   groups-page.css  —  UPC editorial groups & standings
   ================================================================ */

/* ── Token ───────────────────────────────────────────────────── */

/* ── Main wrapper ────────────────────────────────────────────── */
.grp-main {
  padding: 2.5rem 0 6rem;
}

/* ── Empty state ─────────────────────────────────────────────── */
.grp-empty {
  text-align: center;
  padding: 5rem 1rem;
}
.grp-empty-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent-primary) 6%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 12%,transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
  font-size: 1.5rem;
}
.grp-empty-title {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.grp-empty-desc {
  font-size: .85rem;
  color: var(--text-tertiary);
  max-width: 400px;
  margin: 0 auto 2rem;
}


/* ── Filter bar ──────────────────────────────────────────────── */
.grp-filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  position: sticky;
  top: 64px;
  z-index: 50;
  padding: .85rem 0;
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='color-mix(in srgb,var(--accent-primary) 50%,transparent)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 10px;
  color: var(--text-primary);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .65rem 2.6rem .65rem 1rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  min-width: 220px;
}
.page-filter-select:hover,
.page-filter-select:focus {
  border-color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  color: var(--text-primary);
  outline: none;
}
.page-filter-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ── Category section ────────────────────────────────────────── */
.grp-cat-section {
  margin-bottom: 4rem;
}

.grp-cat-hdr {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-color, var(--border-primary));
}

.grp-cat-title {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: var(--text-primary);
  margin: 0;
}

.grp-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .7rem;
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 18%,transparent);
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: color-mix(in srgb,var(--accent-primary) 80%,transparent);
  text-transform: uppercase;
}
.grp-cat-badge--teams {
  background: color-mix(in srgb,var(--accent-secondary) 7%,transparent);
  border-color: color-mix(in srgb,var(--accent-secondary) 18%,transparent);
  color: color-mix(in srgb,var(--accent-secondary) 80%,transparent);
}

/* ── Rules accordion ─────────────────────────────────────────── */
.grp-rules {
  background: color-mix(in srgb,var(--accent-primary) 3%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 10%,transparent);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color .2s;
}
.grp-rules[open] {
  border-color: color-mix(in srgb,var(--accent-primary) 20%,transparent);
}

.grp-rules-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: .75rem;
  color: var(--text-secondary);
  transition: color .2s;
  user-select: none;
}
.grp-rules-summary::-webkit-details-marker { display: none; }
.grp-rules-summary:hover { color: var(--text-primary); }

.grp-rules-icon {
  color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
  font-size: .7rem;
  flex-shrink: 0;
}
.grp-rules-label {
  font-weight: 700;
  color: color-mix(in srgb,var(--accent-primary) 70%,transparent);
  flex-shrink: 0;
}
.grp-rules-text { flex: 1; }
.grp-rules-chevron {
  font-size: .6rem;
  color: color-mix(in srgb,var(--accent-primary) 40%,transparent);
  margin-left: auto;
  transition: transform .25s ease;
  flex-shrink: 0;
}

.grp-rules-body {
  padding: 0 1rem .9rem 2.1rem;
  font-size: .75rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.grp-rules-body p { margin: 0 0 .4rem; }
.grp-rules-sub { color: var(--text-tertiary); font-size: .7rem; }

/* ── Group cards grid ────────────────────────────────────────── */
.grp-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* ── Group card ──────────────────────────────────────────────── */
.grp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.grp-card:hover {
  border-color: color-mix(in srgb,var(--accent-primary) 25%,transparent);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 32px color-mix(in srgb,var(--accent-primary) 6%,transparent);
}

/* Card header */
.grp-card-hdr {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
}
.grp-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb,var(--accent-primary) 22%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 45%,transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  font-size: .8rem;
  flex-shrink: 0;
}
.grp-card-name {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: .06em;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.grp-card-count {
  font-size: .68rem;
  color: var(--text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
}

/* No teams */
.grp-no-teams {
  padding: 1.5rem 1.25rem;
  font-size: .8rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.grp-no-teams i { color: color-mix(in srgb,var(--accent-primary) 30%,transparent); }

/* ── Standings table ─────────────────────────────────────────── */
.grp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

/* Header cells */
.grp-th {
  padding: .55rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color, var(--border-primary));
  white-space: nowrap;
  text-align: center;
}
/* Separator before DIF column */
.grp-th-sep {
  border-left: 2px solid var(--border-color, var(--border-primary)) !important;
}
.grp-th-pos  { text-align: center; width: 36px; }
.grp-th-team { text-align: left; }
.grp-th-stat { text-align: center; }
.grp-th-pts  { text-align: center; color: color-mix(in srgb,var(--accent-primary) 45%,transparent); }

/* Hide less-important columns on narrow cards */
@media (max-width: 500px) {
  .grp-th-hide { display: none; }
}

/* Body rows */
.grp-row {
  border-bottom: 1px solid var(--border-color, var(--border-primary));
  transition: background .15s, transform .15s;
}
.grp-row:last-child { border-bottom: none; }
.grp-row:hover { background: var(--bg-secondary); }

/* Leader row */
.grp-row--leader {
  border-left: 2px solid color-mix(in srgb,var(--accent-primary) 55%,transparent);
  background: color-mix(in srgb,var(--accent-primary) 2.5%,transparent);
}
.grp-row--leader:hover { background: color-mix(in srgb,var(--accent-primary) 4%,transparent); }

/* Data cells */
.grp-td {
  padding: .75rem .75rem;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
}
.grp-td-sep {
  border-left: 2px solid var(--border-color, var(--border-primary)) !important;
}
.grp-td-pos  { text-align: center; }
.grp-td-team { text-align: left; padding-left: .75rem; }
.grp-td-stat { text-align: center; }
.grp-td-pts  {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: color-mix(in srgb,var(--accent-primary) 90%,transparent);
}
.grp-td-pos-val { color: color-mix(in srgb,var(--accent-primary) 60%,transparent); }
.grp-td-neg-val { color: color-mix(in srgb,var(--accent-secondary) 50%,transparent); }

@media (max-width: 500px) {
  .grp-td-hide { display: none; }
}

/* Position badges */
.grp-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 700;
}
.grp-pos--1 {
  background: rgba(255,215,0,.15);
  border: 1px solid rgba(255,215,0,.35);
  color: #ffd700;
}
.grp-pos--2 {
  background: rgba(192,192,192,.12);
  border: 1px solid rgba(192,192,192,.3);
  color: #c0c0c0;
}
.grp-pos--3 {
  background: rgba(205,127,50,.12);
  border: 1px solid rgba(205,127,50,.3);
  color: #cd7f32;
}
.grp-pos--n {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-tertiary);
}

/* Team name + link */
.grp-team-name {
  font-size: .95rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
}
.grp-sep {
  color: color-mix(in srgb,var(--accent-primary) 40%,transparent);
  margin: 0 .2rem;
  font-size: .65rem;
}
.grp-team-link {
  display: block;
  font-size: .6rem;
  color: color-mix(in srgb,var(--accent-primary) 40%,transparent);
  text-decoration: none;
  transition: color .2s;
  margin-top: .15rem;
}
.grp-team-link:hover { color: color-mix(in srgb,var(--accent-primary) 80%,transparent); }

/* Difference cell */
.grp-dif {
  font-weight: 600;
  font-size: .72rem;
}
.grp-dif--pos { color: color-mix(in srgb,var(--accent-primary) 70%,transparent); }
.grp-dif--neg { color: color-mix(in srgb,var(--accent-secondary) 65%,transparent); }
.grp-dif--zero { color: var(--text-tertiary); }

/* ── Mobile legend (inside card) ─────────────────────────────── */
.grp-mob-legend {
  display: none;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  padding: .6rem 1rem .8rem;
  border-top: 1px solid var(--border-color, var(--border-primary));
  font-size: .6rem;
  color: var(--text-tertiary);
}
.grp-mob-legend b { color: var(--text-secondary); }
@media (max-width: 500px) {
  .grp-mob-legend { display: flex; }
}

/* ── Global legend (bottom) ──────────────────────────────────── */
.grp-legend {
  margin-top: 3rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.grp-legend-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.grp-legend-title i { color: color-mix(in srgb,var(--accent-primary) 35%,transparent); font-size: .65rem; }
.grp-legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
}
.grp-legend-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: var(--text-tertiary);
}
.grp-legend-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .1rem .45rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 28px;
}
.grp-legend-key--pos {
  background: color-mix(in srgb,var(--accent-primary) 7%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 18%,transparent);
  color: color-mix(in srgb,var(--accent-primary) 65%,transparent);
}
.grp-legend-key--neg {
  background: color-mix(in srgb,var(--accent-secondary) 7%,transparent);
  border-color: color-mix(in srgb,var(--accent-secondary) 18%,transparent);
  color: color-mix(in srgb,var(--accent-secondary) 60%,transparent);
}
.grp-legend-key--pts {
  background: color-mix(in srgb,var(--accent-primary) 10%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 25%,transparent);
  color: color-mix(in srgb,var(--accent-primary) 85%,transparent);
  font-size: .65rem;
}