/* ============================================================
   GSTAKE ADMIN — GAMES & ODDS PAGE
   admin-games.css
   Import AFTER admin-shared.css
   ============================================================ */

/* ─── Score display ─── */
.score-display {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--ffC);
  font-size: 1.1rem;
  font-weight: 800;
}
.score-sep {
  color: var(--t3);
  font-size: 0.9rem;
}

/* ─── Odds inline chips ─── */
.odds-set {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.odds-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--accent);
  border: 1px solid var(--borderAcc);
  white-space: nowrap;
}
.odds-chip span {
  color: var(--t3);
  font-weight: 500;
  margin-right: 2px;
  font-size: 0.65rem;
}

/* ─── Action buttons cell ─── */
.action-cell {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Status tabs ─── */
.tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs {
  display: flex;
  gap: 0.4rem;
  width: max-content;
  padding-bottom: 2px; /* prevents clipping of border-bottom glow */
}
.tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--t2);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--accentBg);
  color: var(--accent);
  border-color: var(--borderAcc);
}
.tab-btn:hover:not(.active) {
  border-color: var(--borderHov);
  color: var(--t1);
}

/* ─── Odds grid inside modal ─── */
.odds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.odds-grid-full { grid-column: span 3; }

/* ─── Confirm / danger modal ─── */
.confirm-modal { max-width: 400px; }
.confirm-icon {
  width: 52px;
  height: 52px;
  background: var(--redBg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.confirm-icon svg { width: 24px; height: 24px; color: var(--red); }
.confirm-text { text-align: center; margin-bottom: 1.5rem; }
.confirm-title {
  font-family: var(--ffC);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}
.confirm-sub {
  font-size: 0.83rem;
  color: var(--t2);
  line-height: 1.5;
}

/* ─── Result score inputs ─── */
.result-teams {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.result-team {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--t1);
}
.result-vs { color: var(--t3); font-size: 0.8rem; }
.score-inputs {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.score-input-wrap { flex: 1; }
.score-input-wrap .form-input {
  text-align: center;
  font-family: var(--ffC);
  font-size: 1.5rem;
  font-weight: 800;
  padding: 0.75rem;
}

/* ─── Mobile game cards (replaces table on small screens) ─── */
.game-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--rLg);
  padding: 1rem 1rem 0.85rem;
  margin-bottom: 0.65rem;
  transition: border-color 0.15s;
}
.game-card:hover { border-color: var(--borderHov); }

.game-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.game-teams {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.4;
  flex: 1;
}
.game-teams .vs {
  color: var(--t3);
  font-size: 0.78rem;
  font-weight: 400;
  margin: 0 4px;
}
.game-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.game-date {
  font-size: 0.75rem;
  color: var(--t2);
}
.booking-code {
  font-size: 0.71rem;
  color: var(--t3);
  font-family: monospace;
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.game-card-odds {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}
.game-card-score {
  font-family: var(--ffC);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 0.65rem;
}
.game-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
/* Make action buttons fill evenly on mobile */
.game-card-actions .btn {
  flex: 1;
  min-width: 70px;
  justify-content: center;
  font-size: 0.76rem;
  padding: 0.45rem 0.5rem;
}
.game-card-actions .btn-icon-only {
  flex: 0 0 auto;
  padding: 0.45rem 0.6rem;
}

/* ─── Responsive: show cards, hide table ─── */
.game-cards-list { display: none; }

@media (max-width: 767px) {
  /* Hide desktop table, show mobile cards */
  .table-wrap { display: none !important; }
  .game-cards-list { display: block; }

  /* Full-width search */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-wrap { max-width: 100%; }

  /* Page header stack */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.25rem;
  }
  .page-title { font-size: 1.6rem; }

  /* Modal slides up from bottom on mobile */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--rXl);
    border-top-right-radius: var(--rXl);
    max-height: 92vh;
    max-width: 100%;
    padding: 1.5rem 1.25rem 2rem;
    animation: slideUpModal 0.3s cubic-bezier(0.22, 0.68, 0, 1.2) both;
  }
  @keyframes slideUpModal {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Odds grid: 2 col on mobile */
  .odds-grid {
    grid-template-columns: 1fr 1fr;
  }
  .odds-grid-full { grid-column: span 2; }

  /* Modal footer stacks */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Score inputs comfortable size */
  .score-input-wrap .form-input {
    font-size: 1.8rem;
    padding: 0.9rem;
  }
}

@media (max-width: 480px) {
  .page-content { padding: 1rem 0.875rem; }

  .game-card { padding: 0.875rem 0.875rem 0.75rem; }

  /* Larger touch targets for action buttons */
  .game-card-actions .btn { padding: 0.55rem 0.5rem; font-size: 0.78rem; }
}

/* ─── Hide logo on mobile ─── */
@media (max-width: 768px) {
  .logo { display: none; }
  .admin-badge { display: none; } /* optional: also hide badge if tight */
}