/* ============================================================
   ABRAJ RUNNERS - theme-green.css
   Pakistan / National Pride Theme  →  body.theme-green
   Colors: Deep green, white, gold accents
   Fonts: Poppins (headings), Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── Root palette ─────────────────────────────────────────── */
body.theme-green {
  --g-bg:           #0a1f0f;
  --g-surface:      #0d2613;
  --g-card:         #122d18;
  --g-card-2:       #0f2614;
  --g-green:        #01411C;
  --g-green-mid:    #1a5c2a;
  --g-green-light:  #2d7a3a;
  --g-gold:         #DAA520;
  --g-gold-light:   #f0c040;
  --g-gold-dim:     rgba(218,165,32,.35);
  --g-white:        #f5f0e8;
  --g-text:         #d4e8d4;
  --g-text-dim:     #7a9e80;
  --g-border:       rgba(218,165,32,.25);
  --g-khaki:        #8b7355;
  --g-khaki-dim:    rgba(139,115,85,.2);

  font-family: 'Inter', sans-serif;
  background-color: var(--g-bg);
  color: var(--g-text);
  min-height: 100vh;
}

/* ── Subtle green-field texture + radial glow ─────────────── */
body.theme-green::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(218,165,32,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 105%, rgba(1,65,28,.5) 0%, transparent 60%),
    linear-gradient(rgba(218,165,32,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218,165,32,.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
}

body.theme-green > * { position: relative; z-index: 1; }

/* ── Headings ─────────────────────────────────────────────── */
body.theme-green h1,
body.theme-green h2,
body.theme-green h3,
body.theme-green h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--g-gold-light);
}

/* ── Site Header ──────────────────────────────────────────── */
body.theme-green .site-header {
  background: linear-gradient(135deg, var(--g-green) 0%, #022d14 100%);
  border-bottom: 2px solid var(--g-border);
  box-shadow:
    0 4px 24px rgba(0,0,0,.5),
    0 0 40px rgba(218,165,32,.06);
}

body.theme-green .site-header__title,
body.theme-green .site-header .logo {
  font-family: 'Poppins', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--g-gold);
  text-shadow:
    0 0 8px rgba(218,165,32,.5),
    0 2px 4px rgba(0,0,0,.4);
  letter-spacing: .05em;
}

body.theme-green .site-header .tagline {
  color: rgba(245,240,232,.55);
  font-size: .82rem;
  font-family: 'Inter', sans-serif;
}

/* ── Nav ──────────────────────────────────────────────────── */
body.theme-green .site-header__nav a,
body.theme-green .nav a,
body.theme-green .nav-link {
  color: rgba(245,240,232,.75);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .88rem;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .22s ease;
  letter-spacing: .03em;
}

body.theme-green .site-header__nav a:hover,
body.theme-green .nav a:hover,
body.theme-green .nav-link:hover {
  color: var(--g-gold);
  border-color: var(--g-gold-dim);
  background: rgba(218,165,32,.08);
}

body.theme-green .site-header__nav a.active,
body.theme-green .nav a.active,
body.theme-green .nav-link.active {
  color: var(--g-gold);
  border-color: rgba(218,165,32,.5);
  background: rgba(218,165,32,.12);
  font-weight: 600;
}

/* ── Stat Cards ───────────────────────────────────────────── */
body.theme-green .stat-card {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 12px;
  box-shadow:
    0 4px 16px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(218,165,32,.1);
  position: relative;
  overflow: hidden;
}

body.theme-green .stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-gold), transparent);
}

body.theme-green .stat-value {
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--g-gold);
  text-shadow: 0 0 12px rgba(218,165,32,.4);
  font-variant-numeric: tabular-nums;
}

body.theme-green .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--g-text-dim);
}

/* ── Runner Cards ─────────────────────────────────────────── */
body.theme-green .runner-card {
  background: var(--g-card);
  border: 1px solid rgba(218,165,32,.2);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
  transition: all .28s ease;
}

body.theme-green .runner-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--g-green-light), var(--g-gold), var(--g-green-light));
  opacity: .6;
  transition: opacity .28s ease;
}

body.theme-green .runner-card:hover {
  transform: translateY(-5px);
  border-color: rgba(218,165,32,.55);
  box-shadow:
    0 0 18px rgba(218,165,32,.18),
    0 8px 28px rgba(0,0,0,.5);
}

body.theme-green .runner-card:hover::before { opacity: 1; }

/* Avatar */
body.theme-green .runner-card .avatar,
body.theme-green .avatar {
  border: 3px solid var(--g-gold);
  box-shadow:
    0 0 8px rgba(218,165,32,.4),
    0 0 20px rgba(218,165,32,.15);
  transition: box-shadow .28s ease;
}

body.theme-green .runner-card:hover .avatar {
  box-shadow:
    0 0 14px rgba(218,165,32,.7),
    0 0 32px rgba(218,165,32,.3);
}

/* Name */
body.theme-green .runner-card .name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--g-white);
  letter-spacing: .02em;
}

/* KM total */
body.theme-green .runner-card .km-total {
  color: var(--g-green-light);
  font-weight: 600;
  font-size: .88rem;
}

/* ── Streak ───────────────────────────────────────────────── */
body.theme-green .streak {
  background: rgba(218,165,32,.12);
  border: 1px solid rgba(218,165,32,.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--g-gold);
  font-size: .88rem;
}

body.theme-green .streak-fire {
  filter: drop-shadow(0 0 5px rgba(218,165,32,.8));
  animation: greenFirePulse .8s ease-in-out infinite alternate;
}

@keyframes greenFirePulse {
  from { filter: drop-shadow(0 0 4px rgba(218,165,32,.7)); }
  to   { filter: drop-shadow(0 0 10px rgba(255,180,0,.95)); }
}

/* ── Medal Badges ─────────────────────────────────────────── */
body.theme-green .medal-bronze {
  background: linear-gradient(135deg, #b87333, #8b5e3c);
  color: #fff;
  box-shadow: 0 0 8px rgba(184,115,51,.4);
}

body.theme-green .medal-silver {
  background: linear-gradient(135deg, #c0c0c0, #909090);
  color: #0a1f0f;
  box-shadow: 0 0 8px rgba(192,192,192,.4);
}

body.theme-green .medal-gold {
  background: linear-gradient(135deg, #DAA520, #FFD700, #c8940e);
  color: #0a1f0f;
  box-shadow: 0 0 14px rgba(218,165,32,.7), 0 0 28px rgba(218,165,32,.3);
  animation: greenGoldGlow 2s ease-in-out infinite;
}

@keyframes greenGoldGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(218,165,32,.7), 0 0 28px rgba(218,165,32,.3); }
  50%       { box-shadow: 0 0 24px rgba(218,165,32,1.0), 0 0 48px rgba(218,165,32,.5); }
}

body.theme-green .medal-platinum {
  background: linear-gradient(135deg, #e8e8e8, #b0c4b0, #e8e8e8);
  color: #0a1f0f;
  box-shadow: 0 0 10px rgba(176,196,176,.5);
}

body.theme-green .medal-diamond {
  background: linear-gradient(135deg, #a8ffc0, #00e676, #01411C);
  color: #fff;
  box-shadow: 0 0 16px rgba(0,230,118,.7), 0 0 32px rgba(0,230,118,.3);
  animation: greenDiamondGlow 1.8s ease-in-out infinite;
}

@keyframes greenDiamondGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(0,230,118,.7), 0 0 32px rgba(0,230,118,.3); }
  50%       { box-shadow: 0 0 28px rgba(0,230,118,1.0), 0 0 56px rgba(0,230,118,.5); }
}

/* ── Bench Zone ───────────────────────────────────────────── */
body.theme-green .bench-zone {
  background: linear-gradient(135deg, rgba(15,28,16,.9), rgba(20,16,10,.9));
  border: 1px dashed rgba(139,115,85,.45);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  position: relative;
}

body.theme-green .bench-zone h2,
body.theme-green .bench-zone h3 {
  color: var(--g-khaki);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

body.theme-green .bench-days {
  color: var(--g-khaki);
  font-weight: 600;
}

body.theme-green .runner-card--benched,
body.theme-green .bench-zone .runner-card {
  opacity: .6;
  background: rgba(15,20,15,.8);
  border-color: rgba(139,115,85,.3);
  filter: grayscale(.4) sepia(.15);
  transform: scale(0.93);
}

body.theme-green .runner-card--benched:hover,
body.theme-green .bench-zone .runner-card:hover {
  opacity: .82;
  transform: scale(0.96);
  filter: grayscale(.2);
}

/* Bench speech bubble */
body.theme-green .bench-bubble {
  background: rgba(15,22,16,.95);
  border: 1px solid rgba(139,115,85,.4);
  color: var(--g-khaki);
  border-radius: 10px;
  font-size: .78rem;
  font-family: 'Inter', sans-serif;
  padding: 6px 12px;
}

body.theme-green .bench-bubble::after {
  border-top-color: rgba(139,115,85,.4);
}

/* ── Leaderboard ──────────────────────────────────────────── */
body.theme-green .leaderboard {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  overflow: hidden;
}

body.theme-green .leaderboard__tab,
body.theme-green .leaderboard-tab {
  color: var(--g-text-dim);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .85rem;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  transition: all .2s ease;
  cursor: pointer;
}

body.theme-green .leaderboard__tab--active,
body.theme-green .leaderboard-tab.active {
  background: rgba(218,165,32,.15);
  color: var(--g-gold);
  border: 1px solid rgba(218,165,32,.35);
  font-weight: 600;
}

body.theme-green .leaderboard__table th,
body.theme-green .leaderboard thead th {
  background: rgba(218,165,32,.07);
  color: var(--g-gold);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--g-border);
  padding: 12px 16px;
}

body.theme-green .leaderboard__table td,
body.theme-green .leaderboard tbody td {
  color: var(--g-text);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
}

body.theme-green .leaderboard tbody tr:hover td {
  background: rgba(218,165,32,.05);
}

body.theme-green .leaderboard tbody tr:nth-child(1) td {
  color: var(--g-gold);
  background: rgba(218,165,32,.06);
}

body.theme-green .leaderboard tbody tr:nth-child(2) td {
  background: rgba(192,192,192,.04);
}

body.theme-green .leaderboard tbody tr:nth-child(3) td {
  color: #b87333;
  background: rgba(184,115,51,.04);
}

/* ── Today Status Banner ──────────────────────────────────── */
body.theme-green .today-status__banner--active {
  background: linear-gradient(135deg, rgba(1,65,28,.6), rgba(18,45,24,.8));
  border: 1px solid rgba(0,200,80,.35);
  border-radius: 12px;
  color: #6eefa0;
  box-shadow: 0 0 20px rgba(0,180,60,.12);
}

body.theme-green .today-status__banner--idle {
  background: rgba(15,22,16,.7);
  border: 1px solid rgba(139,115,85,.3);
  border-radius: 12px;
  color: var(--g-text-dim);
}

/* ── Coming Soon Cards ────────────────────────────────────── */
body.theme-green .coming-soon__card,
body.theme-green .coming-soon .feature-card {
  background: var(--g-card);
  border: 1px solid rgba(218,165,32,.15);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

body.theme-green .coming-soon__card::after,
body.theme-green .coming-soon .feature-card::after {
  background: rgba(218,165,32,.15);
  color: var(--g-gold);
}

/* ── Music Section ────────────────────────────────────────── */
body.theme-green .music-section {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 14px;
}

body.theme-green .music-player {
  background: rgba(10,31,15,.7);
  border-radius: 10px;
  border: 1px solid rgba(218,165,32,.12);
}

body.theme-green .music-player .track-name {
  color: var(--g-white);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

body.theme-green .music-player .controls button {
  background: linear-gradient(135deg, var(--g-green), var(--g-green-mid));
  border: 1px solid var(--g-gold-dim);
  color: var(--g-gold);
  border-radius: 50%;
  transition: all .2s ease;
}

body.theme-green .music-player .controls button:hover {
  background: var(--g-gold);
  color: var(--g-bg);
  box-shadow: 0 0 14px rgba(218,165,32,.4);
}

/* ── Buttons ──────────────────────────────────────────────── */
body.theme-green .btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 8px;
  font-size: .9rem;
  letter-spacing: .03em;
  transition: all .22s ease;
}

body.theme-green .btn-primary {
  background: linear-gradient(135deg, var(--g-green), var(--g-green-mid));
  color: var(--g-gold);
  border: 1px solid var(--g-gold-dim);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

body.theme-green .btn-primary:hover {
  background: linear-gradient(135deg, var(--g-green-mid), var(--g-green-light));
  color: var(--g-gold-light);
  border-color: rgba(218,165,32,.6);
  box-shadow: 0 4px 18px rgba(218,165,32,.25), 0 2px 8px rgba(0,0,0,.3);
  transform: translateY(-1px);
}

body.theme-green .btn-success {
  background: rgba(0,160,60,.2);
  color: #6eeaa0;
  border: 1px solid rgba(0,180,80,.35);
}

body.theme-green .btn-success:hover {
  background: rgba(0,160,60,.35);
  box-shadow: 0 4px 14px rgba(0,160,60,.25);
  transform: translateY(-1px);
}

body.theme-green .btn-danger {
  background: rgba(180,20,20,.15);
  color: #ff8080;
  border: 1px solid rgba(200,30,30,.35);
}

body.theme-green .btn-danger:hover {
  background: rgba(180,20,20,.3);
  box-shadow: 0 4px 14px rgba(180,20,20,.25);
  transform: translateY(-1px);
}

/* ── Theme Switcher ───────────────────────────────────────── */
body.theme-green .theme-switcher button,
body.theme-green .theme-switcher__panel button {
  background: var(--g-card);
  border: 1px solid rgba(218,165,32,.2);
  color: var(--g-text-dim);
  border-radius: 8px;
  transition: all .2s ease;
}

body.theme-green .theme-switcher button:hover,
body.theme-green .theme-switcher__panel button:hover {
  border-color: rgba(218,165,32,.5);
  color: var(--g-gold);
  background: rgba(218,165,32,.08);
}

body.theme-green .theme-switcher button.active,
body.theme-green .theme-switcher button[data-theme="green"] {
  background: rgba(218,165,32,.14);
  border-color: var(--g-gold);
  color: var(--g-gold);
  box-shadow: 0 0 16px rgba(218,165,32,.25);
}

/* ── Footer ───────────────────────────────────────────────── */
body.theme-green .site-footer,
body.theme-green .footer {
  color: var(--g-text-dim);
  border-top: 1px solid rgba(218,165,32,.1);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
}

/* ── Admin Cards ──────────────────────────────────────────── */
body.theme-green .admin-card {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

body.theme-green .admin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--g-green-light), var(--g-gold), var(--g-green-light));
}

body.theme-green .admin-card h3 {
  color: var(--g-gold);
  font-family: 'Poppins', sans-serif;
}

/* ── Forms ────────────────────────────────────────────────── */
body.theme-green .form-group label {
  color: var(--g-text-dim);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.theme-green .form-group input,
body.theme-green .form-group select,
body.theme-green .form-group textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(218,165,32,.2);
  border-radius: 8px;
  color: var(--g-text);
  font-family: 'Inter', sans-serif;
}

body.theme-green .form-group input:focus,
body.theme-green .form-group select:focus,
body.theme-green .form-group textarea:focus {
  border-color: var(--g-gold);
  background: rgba(218,165,32,.05);
  box-shadow: 0 0 0 3px rgba(218,165,32,.12);
  outline: none;
}

body.theme-green .form-group input::placeholder,
body.theme-green .form-group textarea::placeholder {
  color: rgba(122,158,128,.45);
}

/* ── Data Table ───────────────────────────────────────────── */
body.theme-green .data-table {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 12px;
  overflow: hidden;
}

body.theme-green .data-table th {
  background: rgba(218,165,32,.07);
  color: var(--g-gold);
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--g-border);
}

body.theme-green .data-table td {
  color: var(--g-text);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

body.theme-green .data-table tr:hover td {
  background: rgba(218,165,32,.04);
}

/* ── Alerts ───────────────────────────────────────────────── */
body.theme-green .alert-success {
  background: rgba(0,180,60,.12);
  color: #7effa8;
  border: 1px solid rgba(0,180,60,.3);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0,180,60,.1);
}

body.theme-green .alert-error {
  background: rgba(180,20,20,.12);
  color: #ffa0a0;
  border: 1px solid rgba(200,30,30,.3);
  border-radius: 10px;
}

/* ── Running Track ────────────────────────────────────────── */
body.theme-green .running-track {
  background: linear-gradient(90deg,
    var(--g-bg) 0%,
    rgba(1,65,28,.8) 20%,
    rgba(29,92,42,.6) 50%,
    rgba(1,65,28,.8) 80%,
    var(--g-bg) 100%);
  border-top: 2px solid var(--g-gold-dim);
  border-bottom: 2px solid var(--g-gold-dim);
}

/* ── Stats Bar ────────────────────────────────────────────── */
body.theme-green .stats-bar {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 14px;
  box-shadow:
    0 4px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(218,165,32,.08);
  position: relative;
  overflow: hidden;
}

body.theme-green .stats-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-gold), transparent);
}

/* ── Modal ────────────────────────────────────────────────── */
body.theme-green .modal-content {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 14px;
  box-shadow:
    0 0 40px rgba(218,165,32,.1),
    0 24px 60px rgba(0,0,0,.6);
}

body.theme-green .modal-header h2 {
  color: var(--g-gold);
  font-family: 'Poppins', sans-serif;
}

body.theme-green .modal-close {
  background: rgba(255,255,255,.05);
  color: var(--g-text-dim);
}

body.theme-green .modal-close:hover {
  background: rgba(180,20,20,.15);
  color: #ff8080;
}