//
// Football Pool WordPress plugin
//
// @copyright Copyright (c) 2026 Antoine Hurkmans
// @link https://wordpress.org/plugins/football-pool/
// @license https://plugins.svn.wordpress.org/football-pool/trunk/LICENSE
//

.mp-groups {
  --mp-radius: 10px;
  --mp-ink: #16181d;
  --mp-ink-muted: #6b7280;
  --mp-ink-faint: #9aa0aa;
  --mp-line: #e6e8eb;
  --mp-card-bg: #ffffff;
  --mp-phase-bg: #fafafa;
  --mp-accent-soft: #e9f6ee;
  --mp-accent-ink: #0f5c31;
  --mp-font-score: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
  Consolas, monospace;

  font-family: inherit;
  color: var(--mp-ink);
  margin: 0 0 24px;

  * {
    box-sizing: border-box;
  }
}

// Phase divider — identical pattern to match-table-card.scss's .mp-phase
.mp-groups .mp-phase {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;

  &__label {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    margin: 0;
    color: var(--mp-ink);
  }

  &__rule {
    height: 1px;
    flex: 1;
    background: var(--mp-line);
  }
}

.mp-group-card {
  background: var(--mp-card-bg);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.mp-group-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;

  th,
  td {
    padding: 8px 10px;
    border: none;
  }

  th.team,
  td.team {
    width: auto; // absorbs whatever's left after the fixed-width columns below
    word-break: break-word;
  }

  th.numeric,
  td.numeric {
    width: 2.5rem;
  }

  th.points,
  td.points {
    width: 3.5rem; // wider than plain .numeric to fit the chip's padding
  }

  th.goals,
  td.goals {
    width: 4.25rem; // fits "(12-3)"-style two-digit scorelines without wrapping
  }

  thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mp-ink-muted);
    background: var(--mp-phase-bg);
    border-bottom: 1px solid var(--mp-line);
    text-align: center;

    &.team {
      text-align: left;
    }
  }

  td.team {
    font-weight: 600;

    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  td.numeric,
  td.goals {
    text-align: center;
    font-family: var(--mp-font-score);
    font-variant-numeric: tabular-nums;
    color: var(--mp-ink-muted);
  }

  td.goals {
    color: var(--mp-ink-faint);
    font-size: 0.85rem;
  }

  tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--mp-line);
  }

  .mp-points-chip {
    display: inline-flex;
    min-width: 20px;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    //background: var(--mp-accent-soft);
    color: var(--mp-accent-ink);
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  .mp-group-table {
    font-size: 0.82rem;

    th,
    td {
      padding: 6px 6px;
    }
  }
}