/* ============================================================
   Race Timing — shared visual system (realtimemaster.com/result)
   Visual polish only. Markup & PHP unchanged.
   Fonts: Barlow Condensed (display) + Barlow (body)
   ============================================================ */

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

:root {
  /* Brand (kept from original indigo→purple identity, tuned) */
  --brand:        #5b6ef0;
  --brand-deep:   #6d49c9;
  --brand-ink:    #4338ca;     /* darker, AA-safe brand text on white */
  --grad:         linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Podium metals */
  --gold:         #f5b301;
  --gold-soft:    #ffe179;
  --silver:       #b7bcc4;
  --silver-soft:  #e8ebef;
  --bronze:       #cd7f32;
  --bronze-soft:  #e89b5c;

  /* Neutrals / text (contrast-checked on white) */
  --ink:          #0f172a;     /* primary text */
  --muted:        #5b6472;     /* secondary text ~5.6:1 */
  --faint:        #6b7280;     /* tertiary ~4.8:1 (was #999, failed AA) */
  --line:         #e8ecf3;
  --gap:          #d92d54;     /* time gap red, AA on white */

  /* Surfaces & elevation */
  --surface:      #ffffff;
  --surface-tint: #f6f8fe;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow-sm:    0 2px 8px rgba(20, 24, 60, .08);
  --shadow-md:    0 8px 24px rgba(20, 24, 60, .12);
  --shadow-lg:    0 18px 48px rgba(20, 24, 60, .22);
  --t:            200ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Base ---------- */
body {
  background: var(--grad);
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 50px;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.race-title, .action-title, .stat-number,
.card-header h4, .filter-card h5 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: .2px;
}

/* Tabular figures everywhere numbers must align (times, gaps, counts) */
.font-monospace, .stage-time, .stage-rank, .stat-number,
.rank-badge, .time-diff, .time-gap, td.text-center {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.font-monospace { font-family: 'Barlow', monospace; letter-spacing: .3px; }

/* ---------- Cards / hero ---------- */
.hero-section,
.filter-card,
.results-card,
.hero-container {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.hero-section { padding: 2rem; margin-bottom: 1.75rem; }
.filter-card  { padding: 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-sm); }
.results-card { overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-container { padding: 3rem; border-radius: 20px; box-shadow: var(--shadow-lg); }

.race-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: .4rem;
  line-height: 1.05;
}
.hero-container .race-title { font-size: 3.1rem; }     /* landing page larger */
.race-info, .race-subtitle { color: var(--muted); font-size: 1.08rem; }
.race-subtitle { font-size: 1.25rem; margin-bottom: 2rem; }

/* ---------- Nav pills ---------- */
.nav-pills { gap: .5rem; }
.nav-pills .nav-link {
  color: var(--brand-ink);
  font-weight: 600;
  border-radius: 999px;
  padding: .55rem 1.25rem;
  transition: background var(--t), color var(--t), transform var(--t);
}
.nav-pills .nav-link:hover { background: var(--surface-tint); transform: translateY(-1px); }
.nav-pills .nav-link.active {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ---------- Filter selects ---------- */
.form-label.fw-bold { color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-size: .82rem; }
.form-select { border-radius: var(--radius-sm); border-color: var(--line); transition: border-color var(--t), box-shadow var(--t); }
.form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(91, 110, 240, .25); }

/* ---------- Table ---------- */
.results-card .card-header.bg-primary { background: var(--grad) !important; border: 0; }
.results-card .card-header h4 { font-weight: 700; letter-spacing: .4px; }

.table { margin-bottom: 0; }
.table thead.table-dark th {
  position: sticky; top: 0; z-index: 2;
  background: #1d2333;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .78rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  border: 0;
}
.table tbody td { vertical-align: middle; border-color: var(--line); }
.table-hover tbody tr { transition: background var(--t); }
.table-hover tbody tr:hover { background: var(--surface-tint); }

.winner-row,
.leader-yellow {
  background: linear-gradient(90deg, rgba(245,179,1,.16) 0%, rgba(255,255,255,0) 70%);
  border-left: 5px solid var(--gold);
}

.time-diff, .time-gap { color: var(--gap); font-weight: 600; }
.stage-time { font-size: .92rem; font-weight: 600; }
.stage-rank { font-size: .74rem; color: var(--faint); }

/* ---------- Rank badges ---------- */
.rank-badge {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700; font-size: 1.15rem;
  font-family: 'Barlow Condensed', sans-serif;
  box-shadow: var(--shadow-sm);
}
.rank-1 { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); color: #3a2c00; box-shadow: 0 4px 16px rgba(245,179,1,.5); }
.rank-2 { background: linear-gradient(135deg, var(--silver) 0%, var(--silver-soft) 100%); color: #2b2f36; box-shadow: 0 4px 16px rgba(183,188,196,.5); }
.rank-3 { background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-soft) 100%); color: #fff; box-shadow: 0 4px 16px rgba(205,127,50,.5); }
.rank-other { background: linear-gradient(135deg, #6c757d 0%, #8a93a0 100%); color: #fff; }

/* ---------- Podium (standings) ---------- */
.podium-section { margin-bottom: 2.5rem; }
.podium-card {
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
  height: 100%;
}
.podium-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.podium-1 { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); border: 3px solid var(--gold); box-shadow: 0 15px 40px rgba(245,179,1,.45); }
.podium-2 { background: linear-gradient(135deg, var(--silver) 0%, var(--silver-soft) 100%); border: 3px solid var(--silver); box-shadow: var(--shadow-md); }
.podium-3 { background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-soft) 100%); border: 3px solid var(--bronze); box-shadow: var(--shadow-md); }
.podium-icon { font-size: 3.6rem; margin: 1rem 0; }

/* ---------- Landing page (index) ---------- */
.race-logo { font-size: 5rem; margin-bottom: 1rem; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.hero-container { animation: fadeInUp .7s ease; }

.action-card {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  border: 3px solid transparent; height: 100%; cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.action-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.action-card-stage:hover   { border-color: var(--brand); background: linear-gradient(135deg, rgba(91,110,240,.06) 0%, #fff 100%); }
.action-card-overall:hover { border-color: var(--gold);  background: linear-gradient(135deg, rgba(245,179,1,.07) 0%, #fff 100%); }
.action-icon  { font-size: 4rem; margin-bottom: 1rem; }
.action-title { font-size: 1.9rem; font-weight: 700; margin-bottom: .5rem; }
.action-desc  { color: var(--muted); }

.stats-section { background: rgba(91,110,240,.08); border-radius: var(--radius-sm); padding: 1.5rem; margin: 2rem 0; }
.stat-number { font-size: 2.8rem; font-weight: 800; color: var(--brand-ink); line-height: 1; }
.stat-label  { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: 1.2px; }

.btn-admin {
  position: fixed; top: 20px; right: 20px;
  border-radius: 50px; padding: .65rem 1.4rem; font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* ---------- Legend / refresh ---------- */
.refresh-info {
  background: rgba(91,110,240,.08);
  border-left: 4px solid var(--brand);
  padding: 1rem; border-radius: var(--radius-sm); margin-top: 1rem;
  color: var(--muted);
}

/* ---------- A11y: focus + reduced motion ---------- */
a:focus-visible, .nav-link:focus-visible, .form-select:focus-visible, .action-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .race-title { font-size: 1.9rem; }
  .hero-container .race-title { font-size: 2.1rem; }
  .hero-container { padding: 1.75rem; }
  .race-logo { font-size: 3.2rem; }
  .action-title { font-size: 1.4rem; }
  .action-card { padding: 1.5rem; }
  .stat-number { font-size: 2.1rem; }
  .podium-icon { font-size: 3rem; }
  .podium-card h4 { font-size: 1.2rem; }
  .table-responsive { font-size: .9rem; }
  .rank-badge { width: 38px; height: 38px; font-size: 1rem; }
}