/* ==========================================================================
   IHAVANDHOO SPORTS — DESIGN SYSTEM
   Concept: a floodlit island pitch at night, seen through the digital
   scoreboard at the end of the ground. Deep night navy, turf green,
   amber scoreboard glow. Scores are always set in tabular mono digits,
   like an LED matrix — that's the one signature we repeat everywhere.
   ========================================================================== */

:root {
  /* --- Color tokens --- */
  --ink:        #0B1220;   /* near-black navy, page background */
  --ink-raised: #121C2E;   /* card / raised surface */
  --ink-line:   #22304A;   /* hairline borders on dark surfaces */
  --turf:       #1F8A57;   /* pitch green — primary accent */
  --turf-dim:   #163F2B;
  --amber:      #F2B705;   /* scoreboard amber — live / highlight */
  --coral:      #E0483C;   /* alerts, red cards, cancellations */
  --paper:      #F5F7FA;   /* light surface (public cards on white sections) */
  --ink-text:   #E7ECF3;   /* primary text on dark */
  --ink-muted:  #8B96A8;   /* secondary text on dark */
  --dark-text:  #10182B;   /* primary text on light */
  --dark-muted: #5B6576;   /* secondary text on light */

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--turf); color: #fff; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turf);
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--turf); color: #fff; }
.btn-primary:hover { background: #23a266; }
.btn-ghost { background: transparent; color: var(--ink-text); border-color: var(--ink-line); }
.btn-ghost:hover { border-color: var(--turf); color: var(--turf); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: var(--coral); color: #fff; }

/* --- Top nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(145deg, var(--turf), var(--turf-dim));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: #fff; font-size: 14px;
}
.brand small { display:block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--ink-muted); }
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink-text); }
.nav-cta { display:flex; align-items:center; gap:14px; }

/* --- Hero: the live scoreboard --- */
.hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(ellipse at top right, rgba(31,138,87,.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(242,183,5,.08), transparent 45%);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 44px; line-height: 1.05; margin: 14px 0 16px; }
.hero p.lead { color: var(--ink-muted); font-size: 17px; max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; }

/* Scoreboard card — the signature element */
.scoreboard {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.scoreboard-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--ink-line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
  display: inline-block; margin-right: 6px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--ink-line);
}
.score-row:last-child { border-bottom: none; }
.team-col { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.team-col.away { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.team-badge {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ink-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  flex-shrink: 0;
}
.score-digits {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--amber);
  letter-spacing: .05em;
  min-width: 70px;
  text-align: center;
}
.score-digits .sep { color: var(--ink-muted); padding: 0 6px; font-weight: 400; }
.score-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-align:center; margin-top:2px; }

/* --- Section headings --- */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: 28px; }
.section-head .view-all { font-size: 13px; font-weight: 600; color: var(--turf); }

/* --- Tournament cards --- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--turf); transform: translateY(-3px); }
.tourn-banner {
  height: 120px;
  background: linear-gradient(135deg, var(--turf-dim), var(--ink-line));
  display: flex; align-items: flex-end; padding: 14px;
  position: relative;
}
.tourn-banner .badge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 999px; color: var(--ink-text);
}
.tourn-sport { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.card-body { padding: 16px 18px 20px; }
.card-body h3 { font-size: 17px; margin-bottom: 6px; }
.card-meta { font-size: 13px; color: var(--ink-muted); display: flex; gap: 14px; flex-wrap: wrap; }

.status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-pill.live { background: rgba(224,72,60,.15); color: #ff8577; }
.status-pill.upcoming { background: rgba(242,183,5,.15); color: var(--amber); }
.status-pill.completed { background: rgba(139,150,168,.15); color: var(--ink-muted); }
.status-pill.done { background: rgba(139,150,168,.15); color: var(--ink-muted); }
.status-pill.warn { background: rgba(224,72,60,.15); color: #ff8577; }
.status-pill.muted { background: rgba(139,150,168,.15); color: var(--ink-muted); }

/* --- Fixtures list rows --- */
.fixture-row {
  display: grid;
  grid-template-columns: 90px 1fr auto 1fr 40px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 14px;
}
.fixture-row:last-child { border-bottom: none; }
.fixture-row .date-col { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.fixture-row .team { display:flex; align-items:center; gap:8px; font-weight: 600; }
.fixture-row .team.right { justify-content: flex-end; text-align:right; flex-direction: row-reverse; }
.fixture-row .score { font-family: var(--font-mono); font-weight: 700; color: var(--amber); text-align:center; }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--ink-line); padding: 40px 0; margin-top: 40px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-muted); }

/* --- Empty state --- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.empty-state .icon { font-size: 32px; margin-bottom: 12px; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 32px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .fixture-row { grid-template-columns: 60px 1fr 1fr; }
  .fixture-row > .score { grid-column: 1 / -1; order: 3; }
}

/* ==========================================================================
   ADMIN PANEL
   Same token system, applied to a workspace layout (light content pane,
   dark sidebar) so operators immediately recognize it as the same product.
   ========================================================================== */

.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-sidebar {
  background: var(--ink-raised);
  border-right: 1px solid var(--ink-line);
  padding: 22px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar .brand { padding: 0 8px 22px; }
.admin-nav-group { margin-bottom: 18px; }
.admin-nav-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding: 0 10px; margin-bottom: 6px; display:block; }
.admin-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-muted);
  margin-bottom: 2px;
}
.admin-nav a:hover { background: var(--ink-line); color: var(--ink-text); }
.admin-nav a.active { background: var(--turf-dim); color: #6be3a4; }

.admin-main { background: var(--paper); color: var(--dark-text); min-height: 100vh; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; background: #fff; border-bottom: 1px solid #E4E8EF;
  position: sticky; top: 0; z-index: 10;
}
.admin-content { padding: 28px 32px 60px; max-width: 1100px; }

.admin-h1 { font-size: 24px; color: var(--dark-text); }
.admin-sub { color: var(--dark-muted); font-size: 14px; margin-bottom: 24px; }

.panel { background: #fff; border: 1px solid #E4E8EF; border-radius: var(--radius-md); }
.panel-head { padding: 18px 22px; border-bottom: 1px solid #E4E8EF; display:flex; align-items:center; justify-content:space-between; }
.panel-head h2 { font-size: 16px; }
.panel-body { padding: 22px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dark-muted); padding: 10px 12px; border-bottom: 1px solid #E4E8EF; }
.data-table td { padding: 12px; border-bottom: 1px solid #F0F2F6; vertical-align: middle; }
.data-table tr:hover td { background: #FAFBFD; }

.badge {
  display: inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing:.05em;
  padding: 4px 9px; border-radius: 999px; font-weight: 600;
}
.badge-green { background: #E4F6ED; color: #1F8A57; }
.badge-amber { background: #FEF3D6; color: #9A7000; }
.badge-red   { background: #FCE7E5; color: #C13B31; }
.badge-gray  { background: #EEF0F4; color: #5B6576; }

.form-group { margin-bottom: 18px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color: var(--dark-text); }
.form-hint { font-size: 12px; color: var(--dark-muted); margin-top: 4px; }
.form-control {
  width: 100%; padding: 11px 14px; border: 1px solid #DADFE7; border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font-body); background:#fff; color: var(--dark-text);
}
.form-control:focus { outline: none; border-color: var(--turf); box-shadow: 0 0 0 3px rgba(31,138,87,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
textarea.form-control { resize: vertical; min-height: 100px; }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; }
.alert-success { background: #E4F6ED; color: #17663f; }
.alert-error { background: #FCE7E5; color: #a12a21; }
.alert-info { background: #E7F0FE; color: #17518a; }

.stat-card { background:#fff; border:1px solid #E4E8EF; border-radius: var(--radius-md); padding: 20px; }
.stat-card .num { font-family: var(--font-mono); font-size: 30px; font-weight:700; color: var(--dark-text); }
.stat-card .label { font-size: 13px; color: var(--dark-muted); margin-top:4px; }
.stat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 28px; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display:none; }
  .form-row, .stat-grid { grid-template-columns: 1fr 1fr; }
}