/**
 * South End Pickleball — canonical ADMIN DARK theme + admin index/hub card component.
 *
 * Single source of truth for:
 *   1. the admin dark palette (was inlined per-page across the 22 admin pages), and
 *   2. the reusable admin "index/hub page" card component (.admin-grid / .admin-card /
 *      .admin-kicker / .admin-title / .admin-desc / .admin-cta).
 *
 * Self-contained: admin pages do NOT load south-end-tokens.css, so this sheet declares
 * everything the component needs. Reference via ABSOLUTE href: /css/south-end-admin.css.
 *
 * Canonical values basis: SouthEnd_Admin_League_Play.html (#00ff88 block, 22 pages agree)
 * and SouthEnd_Admin_Advanced_Open_Play.html (the card component's only prior home).
 * See docs/design-tokens-audit-2026-08-26.md (Batch 3).
 */
:root {
  /* Canonical admin dark palette */
  --navy: #0a1628;      /* page background base */
  --navy-lt: #152342;   /* header / raised panel */
  --electric: #a855f7;  /* admin purple accent */
  --neon: #00ff88;      /* primary "live/good" accent (NOT teal #4fd1c5) */
  --ink: #0a0a1a;       /* near-black; CTA/neon foreground */
  --red: #ff6b6b;       /* error / alert */
  --muted: rgba(255, 255, 255, .55); /* secondary text */

  /* Added here (declared only by the drifted teal family before this sheet).
     Accent-neutral navy values that read against --ink / --navy — derived from the
     canonical navy family, NOT the teal family's slate (#161b22 / #243040). */
  --panel: #152342;     /* card / raised surface, = --navy-lt */
  --rule: #22314f;      /* low-contrast navy hairline */

  /* Admin inherits the canonical light-theme gold (NOT #fbbf24 / #f59e0b). */
  --gold: #e8a020;
}

/* ---- Admin index/hub card component -------------------------------------
   Lifted verbatim from SouthEnd_Admin_Advanced_Open_Play.html so that page is
   pixel-identical; the only change is the touch-hover guard below. */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
@media (max-width: 840px) {
  .admin-grid { grid-template-columns: 1fr; }
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  border: 1.5px solid rgba(0, 255, 136, .22);
  border-radius: 12px;
  padding: 18px;
  background: rgba(0, 0, 0, .18);
  text-decoration: none;
  color: #fff;
}
/* Guard hover so iOS doesn't leave a sticky :hover after tap (see PR #363). */
@media (hover: hover) and (pointer: fine) {
  .admin-card:hover {
    border-color: rgba(0, 255, 136, .45);
    background: rgba(0, 255, 136, .06);
  }
}
.admin-kicker {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
}
.admin-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
}
.admin-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.45;
  flex: 1;
}
.admin-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--neon);
  color: var(--ink);
}