/*!
 * 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-predictions {
  // CSS custom properties intentionally remain CSS variables so
  // they can be overridden by a site owner or skin.

  --mp-radius: 10px;
  --mp-radius-sm: 6px;
  --mp-radius-circle: 50%;

  --mp-ink: #16181d;
  --mp-ink-muted: #6b7280;
  --mp-ink-faint: #9aa0aa;

  --mp-line: #e6e8eb;
  --mp-card-bg: #ffffff;
  --mp-closed-bg: #f6f7f8;
  --mp-phase-bg: #fafafa;

  --mp-accent: #1f8a4c;
  --mp-accent-rgb: 31, 138, 76;
  --mp-accent-soft: #e9f6ee;
  --mp-accent-ink: #0f5c31;

  --mp-closed-stripe: #c8ccd2;

  --mp-gold: #c8891a;
  --mp-gold-soft: #fbf1de;
  --mp-gold-ink: #7a530f;

  --mp-font-score: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace;

  font-family: inherit;
  color: var(--mp-ink);
  max-width: 760px;
  margin: 0 auto;

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

// ============================================================
// Phase divider
// ============================================================

.mp-phase {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;

  &:first-child {
    margin-top: 4px;
  }

  &__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-ink-muted);
    background: var(--mp-phase-bg);
    padding: 4px 10px;
    border: 1px solid var(--mp-line);
    border-radius: 999px;
    white-space: nowrap;
  }

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

// ============================================================
// Card grid
// ============================================================

// for the matches page we do not give the alternative background to the closed matches
.mp-predictions.matches-page {
  .mp-grid {
    .mp-card {
      &.is-closed {
        background: var(--mp-card-bg);
      }
    }
  }
}
.mp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

  // ============================================================
  // Match card
  // ============================================================

  .mp-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--mp-card-bg);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    overflow: hidden;

    &::before {
      // Status stripe — the at-a-glance open/closed signal.
      content: "";
      width: 4px;
      flex: 0 0 4px;
      background: var(--mp-accent);
    }

    &.is-closed {
      background: var(--mp-closed-bg);

      &::before {
        background: var(--mp-closed-stripe);
      }
    }

    &.saving::before {
      animation: mp-stripe-pulse 1.1s ease-in-out infinite;
    }

    &__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 10px 12px 10px 14px;
      min-width: 0;
    }

    &__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.74rem;
      color: var(--mp-ink-muted);
    }

    &__datetime {
      white-space: nowrap;
    }

    &__main {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
    }

    &__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 26px;
    }

    &__footer-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  // ============================================================
  // Venue
  // ============================================================

  .mp-venue {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mp-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    svg {
      flex: 0 0 auto;
      width: 11px;
      height: 11px;
    }
  }

  // ============================================================
  // Teams
  // ============================================================

  .mp-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    &--home {
      justify-content: flex-start;
    }

    &--away {
      justify-content: flex-end;
      text-align: right;
      flex-direction: row-reverse;
    }

    &__flag {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 20px;
      border-radius: 3px;
      overflow: hidden;
      background: #f0f1f3;
      border: 1px solid var(--mp-line);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      // Logo mode: square badge, logo shown whole.
      &--logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;

        img {
          object-fit: contain;
          padding: 2px;
        }
      }
    }

    &__name {
      font-size: 1rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // ============================================================
  // Score
  // ============================================================

  .mp-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 128px;

    div.mp-score--prediction.mp-score__row {
      a { text-decoration: none; }
    }

    &__row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    &__label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mp-ink-faint);
    }

    &__pair {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--mp-font-score);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 1.14rem;
      line-height: 1;

      .mp-sep {
        color: var(--mp-ink-faint);
        font-weight: 400;
      }
    }

    // Prediction chip — always shown.
    &--prediction {
      .mp-score__pair {
        background: var(--mp-accent-soft);
        color: var(--mp-accent-ink);
        padding: 4px 10px;
        border-radius: var(--mp-radius-sm);
      }
    }

    // Result row — only for closed matches.
    &--result {
      .mp-score__pair {
        color: var(--mp-ink);
        font-size: 1.03rem;
        padding: 2px 2px;
      }
    }
  }

  .mp-card.is-closed {
    .mp-score--prediction .mp-score__pair {
      background: #edeef0;
      color: var(--mp-ink-muted);
    }
  }

  // ============================================================
  // Score input
  // ============================================================

  .mp-score-input {
    width: 44px;
    height: 32px;
    text-align: center;
    font-family: var(--mp-font-score);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.03rem;
    color: var(--mp-ink);
    background: #fff;
    border: 1.5px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    padding: 0 6px;
    transition: border-color 0.2s ease;

    &:focus {
      outline: none;
      border-color: var(--mp-accent);
      box-shadow: 0 0 0 3px var(--mp-accent-soft);
    }

    &.saving {
      border-color: var(--mp-accent);
      animation: mp-input-pulse 1.1s ease-in-out infinite;
    }

    // Hide native number-input spinner.
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    // Firefox.
    -moz-appearance: textfield;
  }

  // ============================================================
  // Points
  // ============================================================

  .mp-points {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--mp-ink-muted);

    &__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mp-ink-faint);
    }

    &.has-points {
      color: var(--mp-gold-ink);

      .mp-points__dot {
        background: var(--mp-gold);
      }
    }
  }

  // ============================================================
  // Joker badge
  // ============================================================

  .mp-joker-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mp-gold-ink);
    background: var(--mp-gold-soft);
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;

    .mp-icon {
      width: 11px;
      height: 11px;
    }
  }

  // ============================================================
  // Icon buttons
  // ============================================================

  .mp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--mp-radius-sm);
    background: #fff;
    border: 1px solid var(--mp-line);
    color: var(--mp-ink-muted);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition:
            background-color 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease,
            transform 0.1s ease;

    svg {
      width: 14px;
      height: 14px;
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--mp-accent-soft);
      border-color: var(--mp-accent);
    }

    &--stats {
      &:hover,
      &:focus-visible {
        color: var(--mp-accent-ink);
        border-color: var(--mp-accent);
        background: var(--mp-accent-soft);
      }
    }

    // Joker toggle.
    &--joker {
      border-radius: var(--mp-radius-circle);
      border-color: var(--mp-gold);
      color: var(--mp-ink-faint);

      &:hover {
        border-color: var(--mp-gold-ink);
        color: var(--mp-gold-ink);
        background: var(--mp-gold-soft);
      }

      &[aria-pressed="true"] {
        background: var(--mp-gold);
        border-color: var(--mp-gold);
        color: #fff;

        &:hover {
          background: var(--mp-gold-ink);
          border-color: var(--mp-gold-ink);
          color: #fff;
        }
      }

      &:active {
        transform: scale(0.92);
      }

      // Blocked state: all multipliers already used and locked on closed matches.
      &:disabled,
      &.readonly {
        cursor: not-allowed;
        opacity: 0.55;
        border-color: var(--mp-line);
        color: var(--mp-ink-faint);
        background: var(--mp-closed-bg);

        &:hover {
          border-color: var(--mp-line);
          color: var(--mp-ink-faint);
          background: var(--mp-closed-bg);
        }

        &:active {
          transform: none;
        }
      }

      // Saving state.
      &.saving {
        pointer-events: none;

        .mp-icon {
          animation: mp-spin 0.8s linear infinite;
        }
      }
    }
  }

  // ============================================================
  // Icons
  // ============================================================

  .mp-icon {
    width: 14px;
    height: 14px;
    display: block;
  }
}

// ============================================================
// Tags
// ============================================================

.mp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;

  &--open {
    color: var(--mp-accent-ink);
    background: var(--mp-accent-soft);
  }

  &--closed {
    color: var(--mp-ink-muted);
    background: #ececee;
  }
}

// Icon override hook.
.mp-predictions {
  .mp-icon--joker-off {
    content: url("../images/match-table-card/joker-off.svg");
  }

  .mp-icon--joker-on {
    content: url("../images/match-table-card/joker-on.svg");
  }

  .mp-icon--joker-badge {
    content: url("../images/match-table-card/joker-badge.svg");
  }
}

// ============================================================
// Bonus questions (standalone block below the match list,
// and linked questions nested inside a match card)
// ============================================================

.mp-bonus {
  position: relative;
  background: var(--mp-card-bg);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  &--closed {
    background: var(--mp-closed-bg);
  }

  &.saving {
    border-color: var(--mp-accent);
    animation: mp-input-pulse 1.1s ease-in-out infinite;
  }

  &__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .mp-tag {
      margin-top: 0.15rem;
      flex: 0 0 auto;
    }
  }

  &__nr {
    flex: 0 0 auto;
    //font-size: 0.74rem;
    font-weight: 700;
    font-size: 2rem;
    color: var(--mp-ink-faint);
    margin-top: 0;
  }

  &__question {
    flex: 1;
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--mp-ink);
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--mp-ink-muted);

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;

      input[type="radio"], input[type="checkbox"] {
        flex: 0 0 auto;
        margin: 0.5rem 0 0;
      }
    }

    li label {
      flex: 1;
    }

    li label .multi-option {
      display: inline-block;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  &__footer-left,
  &__footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mp-ink-faint);
  }

  &__footer-right > span:not(:first-child) {
    border-left: 2px solid currentColor;
    padding-left: 0.5rem;
    margin-left: 0.5rem;  }

  &__closing,
  &__points,
  &__scored {
    white-space: nowrap;
  }

  &__points,
  &__scored {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--mp-ink-muted);

    &.has-points {
      color: var(--mp-gold-ink);
    }
  }

  // Basic re-skin of the shared radio/checkbox/dropdown/text markup from
  // Football_Pool_Match_Table_Renderer_Base::bonus_question_multiple()/single().
  // Treat this as a starting point - it only covers layout/spacing, not a full restyle.
  ul.multi-select {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin-bottom: 6px;
    }

    label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
  }

  input.bonus:not([type="checkbox"]):not([type="radio"]),
  textarea.bonus {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    font: inherit;
    color: var(--mp-ink);

    &:focus {
      outline: none;
      border-color: var(--mp-accent);
      box-shadow: 0 0 0 3px var(--mp-accent-soft);
    }
  }

  .multi-select.dropdown select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
  }
}

// Wrapper for a linked question inside a match card, and the divider between
// multiple linked questions on the same match.
.mp-card__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--mp-line);
}

.mp-linked-question {
  & + & {
    padding-top: 10px;
    border-top: 1px solid var(--mp-line);
  }
}

// Same .mp-bonus markup as the standalone block, but strip its own card chrome
// when nested inside a match card so it reads as part of that card rather than
// a card-in-a-card.
.mp-card__questions .mp-bonus {
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}

// ============================================================
// Animations
// ============================================================

@keyframes mp-stripe-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes mp-input-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--mp-accent-rgb), 0.35);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(var(--mp-accent-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--mp-accent-rgb), 0);
  }
}

@keyframes mp-spin {
  to {
    transform: rotate(360deg);
  }
}

// ============================================================
// Reduced motion
// ============================================================

@media (prefers-reduced-motion: reduce) {
  .mp-card.saving::before,
  .mp-score-input.saving,
  .mp-bonus.saving,
  .mp-icon-btn--joker.saving .mp-icon {
    animation: none;
  }

  .mp-card.saving::before {
    opacity: 0.55;
  }

  .mp-score-input.saving,
  .mp-bonus.saving {
    box-shadow: 0 0 0 3px rgba(var(--mp-accent-rgb), 0.25);
  }

  .mp-icon-btn--joker.saving .mp-icon {
    opacity: 0.5;
  }
}

// ============================================================
// Mobile
// ============================================================

@media (max-width: 480px) {
  .mp-card {
    &__main {
      gap: 6px;
    }

    &__body {
      padding: 8px 10px 8px 12px;
      gap: 5px;
    }
  }

  .mp-team__flag {
    width: 22px;
    height: 16px;

    &--logo {
      width: 20px;
      height: 20px;
    }
  }

  .mp-team__name {
    font-size: 0.89rem;
  }

  .mp-score {
    min-width: 112px;

    &__pair {
      font-size: 1rem;
    }

    &__label {
      display: none;
    }
  }

  .mp-score-input {
    width: 40px;
    height: 30px;
    padding: 0 5px;
  }

  .mp-venue {
    font-size: 0.74rem;
  }
}