/**
 * Pico CSS Overrides for Outride
 *
 * Brand-specific customizations that layer on top of Pico CSS.
 * Philosophy: Let Pico handle the heavy lifting of semantic HTML styling,
 * we just inject our brand personality and data-density requirements.
 *
 * Design Direction: Athletic elegance meets data precision
 * Typography: Bebas Neue (display) + DM Sans (body)
 */

/* =============================================================================
   Custom Typography - Google Fonts
   ============================================================================= */

/* Bebas Neue: Bold, athletic display font for headings */
/* DM Sans: Clean, modern body font with personality */

/* =============================================================================
   Brand Color System - oklch(L C H)

   Primary hue: 264 (blue/purple boundary)
   Accent hues: 145 (emerald/success), 85 (gold/wins), 25 (coral/danger)
   oklch provides perceptually uniform colors across the lightness spectrum.
   ============================================================================= */

:root[data-theme='dark'] {
  /* Primary brand color - the hero */
  --pico-primary: oklch(0.55 0.15 264);
  --pico-primary-hover: oklch(0.65 0.15 264);
  --pico-primary-focus: oklch(0.45 0.15 264);
  --pico-primary-background: oklch(0.55 0.15 264);
  --pico-primary-underline: oklch(0.55 0.15 264 / 0.5);

  /* Semantic accent colors - performance indicators */
  --color-wins: oklch(0.75 0.15 85);      /* Gold for victories */
  --color-clears: oklch(0.60 0.15 145);   /* Emerald for clear rounds */
  --color-danger: oklch(0.55 0.18 25);    /* Coral for falls/errors */
  --color-podium: oklch(0.65 0.12 45);    /* Bronze for podiums */

  /* Surface colors - subtle brand-tinted backgrounds */
  --pico-background-color: oklch(0.13 0.015 264);
  --pico-card-background-color: oklch(0.18 0.02 264);
  --pico-table-border-color: oklch(0.30 0.02 264);

  /* Typography - custom fonts */
  --pico-font-family: 'DM Sans', system-ui, sans-serif;

  /* Typography scaling for data density */
  --pico-font-size: 87.5%;  /* Base: 14px at default browser settings */
  --pico-line-height: 1.4;  /* Tighter than Pico's default for compactness */
  --pico-typography-spacing-vertical: 0.75rem;  /* Reduced vertical rhythm */
}

/* =============================================================================
   Grain Texture - DISABLED

   The SVG noise pattern caused visible tiling seams (vertical line artifact).
   Removed for cleaner appearance. If needed, use a pre-rendered seamless PNG.
   ============================================================================= */

/* =============================================================================
   Typography Hierarchy

   Display: Bebas Neue - Athletic, bold, memorable
   Body: DM Sans - Clean, modern, readable
   ============================================================================= */

h1 {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  font-weight: 400;  /* Bebas Neue is naturally bold */
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

h2 {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 1.65rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

h4 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: oklch(0.6 0.03 264);
}

/* Links - Better contrast and visibility */
a {
  color: oklch(0.65 0.15 264);
}

a:hover {
  color: oklch(0.75 0.15 264);
}

/* =============================================================================
   Tables - Prioritize Scannability

   Tables are our primary data display. Make them readable and compact.
   ============================================================================= */

/* Tables - defined borders and proper containment */
table {
  width: 100%;
  font-size: 0.95rem;  /* ~13.3px - compact but readable */
  --pico-typography-spacing-vertical: 0.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid oklch(0.30 0.03 264);
  border-radius: 8px;
  overflow: hidden;
  background: oklch(0.16 0.02 264);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.2);
}

table thead {
  background: oklch(0.22 0.03 264);
}

table thead th {
  font-size: 0.875rem;  /* ~12.25px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid oklch(0.35 0.04 264);
  color: oklch(0.75 0.02 264);
}

table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid oklch(0.25 0.02 264);
}

table tbody tr:last-child td {
  border-bottom: none;
}

table tbody tr:hover {
  background: oklch(0.22 0.03 264);
}

/* =============================================================================
   Forms - Functional, Not Bulky
   ============================================================================= */

input,
select,
textarea {
  font-size: 0.95rem;
}

/* =============================================================================
   Buttons - Compact and Purposeful
   ============================================================================= */

button,
[role='button'] {
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s ease;
}

/* Action buttons in navigation - more refined */
nav button,
nav [role='button'] {
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

nav button img,
nav [role='button'] img {
  width: 1rem;
  height: 1rem;
  opacity: 0.9;
}

/* =============================================================================
   Cards/Articles - Breathing Room Without Excess
   ============================================================================= */

/* Card/Article containers - stronger visual definition */
article,
.card {
  background: oklch(0.18 0.02 264);
  border: 2px solid oklch(0.30 0.03 264);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow:
    0 2px 8px oklch(0 0 0 / 0.3),
    0 1px 3px oklch(0 0 0 / 0.2);
  position: relative;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

article::before,
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, oklch(0.45 0.15 264), oklch(0.55 0.15 264));
  border-radius: 8px 8px 0 0;
}

article:hover,
.card:hover {
  border-color: oklch(0.40 0.05 264);
  box-shadow:
    0 4px 12px oklch(0 0 0 / 0.4),
    0 2px 4px oklch(0 0 0 / 0.2);
}

/* Card headers with bottom border */
article > header,
article h3:first-child,
article h4:first-child,
.card > header,
.card h3:first-child,
.card .pane-header {
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid oklch(0.28 0.02 264);
}

/* =============================================================================
   Site Navigation - The Brand Moment

   Gradient background creates depth and visual interest while maintaining
   our brand color identity.
   ============================================================================= */

.site-nav {
  background: linear-gradient(135deg, oklch(0.25 0.12 264) 0%, oklch(0.35 0.12 264) 100%);
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25rem;
}

.site-nav .brand img {
  height: 32px;
  width: auto;
}

.site-nav .nav-links {
  display: flex;
  gap: 1.5rem;
}

.site-nav .nav-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav .nav-links a:hover {
  color: white;
}

/* User section in nav */
.site-nav .user-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.site-nav .user-email {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.site-nav .logout-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.site-nav .logout-link:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.site-nav .login-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: auto;
}

.site-nav .login-link:hover {
  color: white;
}

/* =============================================================================
   Component Patterns
   ============================================================================= */

/* Icon sizing - prevents Pico from blowing up SVGs */
.icon,
svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon.icon-lg,
svg.icon-lg {
  width: 2rem;
  height: 2rem;
}

/* Section header icons - Larger for better hierarchy */
h3 .icon,
h3 svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--pico-primary);
}

/* Badge - Inline status indicators */
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--pico-primary);
  color: white;
}

.badge-success {
  background: oklch(0.5 0.15 145);
}

.badge-warning {
  background: oklch(0.6 0.15 85);
}

.badge-error {
  background: oklch(0.5 0.15 25);
}

/* Page header - Title and actions in harmony */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.page-header h1 {
  margin: 0;
}

/* Footer - Subtle but accessible */
footer p {
  text-align: center;
  color: var(--pico-muted-color);
  margin-top: 2rem;
  font-size: 0.875rem;
}

/* Info help icons - Better styling with larger tap target */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  border-radius: 50%;
  background: var(--pico-primary);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: help;
  margin-left: 0.4rem;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -0.05em; /* Optical centering */
}

/* Button groups for period selectors - Unified segmented control */
[role="group"] {
  display: inline-flex;
  gap: 0;
  background: oklch(0.14 0.02 264);
  border: 1px solid oklch(0.35 0.04 264);
  border-radius: 6px;
  padding: 2px;
  width: fit-content;  /* Prevent Pico from stretching */
  flex: 0 0 auto;      /* Don't grow in flex contexts */
}

[role="group"] button,
[role="group"] [role="button"] {
  border-radius: 4px;
  margin: 0;
  border: none;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
  flex: 0 0 auto;  /* Don't expand buttons - natural width only */
  width: auto;
}

/* Outline buttons in groups - cleaner appearance */
[role="group"] button.outline,
[role="group"] [role="button"].outline {
  background: transparent;
  border: none;
  color: oklch(0.65 0.05 264);
}

[role="group"] button.outline:hover,
[role="group"] [role="button"].outline:hover {
  background: oklch(0.20 0.03 264);
  color: oklch(0.80 0.08 264);
}

/* Active state in button groups */
[role="group"] button:not(.outline),
[role="group"] [role="button"]:not(.outline) {
  background: var(--pico-primary);
  color: white;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
}

/* Outline buttons for inactive states */
.outline,
button.outline,
[role="button"].outline {
  background: transparent;
  border: 1px solid oklch(0.40 0.10 264);
  color: oklch(0.65 0.12 264);
}

.outline:hover {
  background: var(--pico-primary);
  color: white;
  border-color: var(--pico-primary);
}

/* Secondary button variant - subtle alternative */
button.secondary,
[role="button"].secondary {
  background: oklch(0.22 0.03 264);
  border: 1px solid oklch(0.30 0.04 264);
  color: oklch(0.75 0.05 264);
}

button.secondary:hover,
[role="button"].secondary:hover {
  background: oklch(0.25 0.04 264);
  border-color: oklch(0.35 0.05 264);
  color: oklch(0.85 0.08 264);
}

/* Focus states - More visible */
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

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

input:focus,
select:focus,
textarea:focus {
  border-color: var(--pico-primary);
  box-shadow: 0 0 0 3px oklch(0.55 0.15 264 / 0.3);
}

/* Pagination styling */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.pagination a:hover,
.pagination button:hover:not(:disabled) {
  background: var(--pico-primary);
  color: white;
}

.pagination button:disabled,
.pagination [role="button"][aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination .page-info {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* =============================================================================
   Rider Profile Enhancements
   ============================================================================= */

/* Profile page header - tighter bottom margin */
.rider-header {
  margin-bottom: 1.25rem;
}

.rider-header h1 {
  margin-bottom: 0.5rem;
}

.rider-header .rider-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Rider panes row - two-column layout for overview */
.rider-panes-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Animal panes row - same two-column layout */
.animal-panes-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Animal pane cards */
.animal-pane {
  /* Inherits from article/card base styles */
}

/* Profile section cards - tighter internal spacing */
.profile-section {
  padding: 1rem 1.25rem;
}

.profile-section .pane-header {
  margin-bottom: 0.75rem;
}

.profile-section .pane-details {
  margin-top: 0;
}

/* Rider pane inner sections */
.rider-pane-section {
  padding: 1rem;
  background: oklch(0.14 0.02 264);
  border: 1px solid oklch(0.25 0.02 264);
  border-radius: 6px;
}

/* Pane stat displays (used in performance cards) */
.pane-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.pane-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pico-primary);
}

/* Primary stat values - hero metrics that deserve attention */
.pane-stat-value-primary {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: oklch(0.65 0.15 264);
}

/* Secondary stat values - supporting detail metrics */
.pane-stat-value-secondary {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.pane-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(0.6 0.02 264);
  line-height: 1.2;
}

/* Primary/secondary stat grid layouts */
.pane-stats-primary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.pane-stats-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.28 0.02 264);
  text-align: center;
}

/* Grid utilities for pane layouts */
.grid-auto-xs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.75rem;
}

.gap-sm {
  gap: 0.75rem;
}

.text-center {
  text-align: center;
}

/* Section header with info icon */
.section-header-with-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.section-header-with-info h4 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Big number stat display */
.big-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pico-primary);
  line-height: 1.1;
}

/* Pane header styling */
.pane-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Pane details within cards */
.pane-details {
  margin-top: 0.5rem;
}

/* Grid layouts within cards */
.card .grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gap-lg {
  gap: 1.25rem;
}

.gap-md {
  gap: 1rem;
}

/* Grid auto-fit patterns */
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Highlight cards for personal bests */
.highlight-card {
  padding: 1rem;
  background: oklch(0.14 0.02 264);
  border: 1px solid oklch(0.25 0.02 264);
  border-radius: 6px;
}

.highlight-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: oklch(0.6 0.02 264);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.highlight-value {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--pico-primary);
}

.highlight-detail {
  font-size: 0.85rem;
  margin: 0 0 0.25rem 0;
  opacity: 0.8;
}

.highlight-date {
  font-size: 0.8rem;
  margin: 0;
  opacity: 0.6;
}

/* Chart containers */
.chart-container {
  position: relative;
  min-height: 250px;
}

/* Section headers with action links */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.toggle-link {
  font-size: 0.875rem;
}

/* Hidden rows for expandable tables */
.hidden-row {
  display: none;
}

/* Stat cards for comparison */
.stat-card {
  padding: 1rem;
  background: oklch(0.14 0.02 264);
  border: 1px solid oklch(0.25 0.02 264);
  border-radius: 6px;
  text-align: center;
}

.stat-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.stat-card .big-number {
  font-size: 2rem;
}

.stat-card p {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Period selector active state - Clean, no glow */
nav[role="group"] button:not(.outline):not(.secondary) {
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
}

/* Definition list styling for stats - Better hierarchy with containment */
dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  margin: 0;
  background: oklch(0.14 0.02 264);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid oklch(0.25 0.02 264);
}

dt {
  font-size: 0.7rem;
  font-weight: 600;
  color: oklch(0.6 0.02 264);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Allow shrinking */
}

dd {
  font-size: 0.9rem;
  font-weight: 600;
  color: oklch(0.9 0.02 264);
  margin: 0;
  text-align: right;
  line-height: 1.4;
  white-space: nowrap;
}

/* Large stat numbers - Better emphasis */
.big-number,
[style*="font-size: 2rem"] {
  color: var(--pico-primary);
  line-height: 1;
}

/* Danger button variant for destructive actions */
button.danger,
[role="button"].danger {
  --pico-background-color: oklch(0.45 0.15 25);
  --pico-border-color: oklch(0.45 0.15 25);
}

button.danger:hover,
[role="button"].danger:hover {
  --pico-background-color: oklch(0.55 0.15 25);
  --pico-border-color: oklch(0.55 0.15 25);
}

/* Outline button variant - Already exists above but adding explicit hover */
button.outline:hover,
[role="button"].outline:hover {
  background: var(--pico-primary);
  color: white;
}

/* Section panes - distinct visual containers */
section {
  margin-bottom: 2rem;
}

section > article {
  margin-bottom: 0;
}

/* Stats grid panes */
section > div[style*="grid"] > article {
  background: oklch(0.18 0.02 264);
  border: 2px solid oklch(0.28 0.03 264);
}

/* Side-by-side stat panes (Performance/Activity grids within articles) */
.stat-pane,
article > div[style*="grid"] {
  display: grid;
  gap: 1rem;
}

article > div[style*="grid"] > div {
  padding: 1rem;
  background: oklch(0.15 0.02 264);
  border: 1px solid oklch(0.25 0.02 264);
  border-radius: 6px;
}

/* Responsive table improvements */
@media (max-width: 768px) {
  table {
    font-size: 0.85rem;
  }

  table th,
  table td {
    padding: 0.5rem 0.25rem;
  }
}

/* =============================================================================
   Page Load Animations - Staggered reveals for polish
   ============================================================================= */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Main content animation */
main.container > * {
  animation: fadeSlideIn 0.4s ease-out backwards;
}

/* Stagger child elements */
main.container > *:nth-child(1) { animation-delay: 0.05s; }
main.container > *:nth-child(2) { animation-delay: 0.1s; }
main.container > *:nth-child(3) { animation-delay: 0.15s; }
main.container > *:nth-child(4) { animation-delay: 0.2s; }
main.container > *:nth-child(5) { animation-delay: 0.25s; }
main.container > *:nth-child(6) { animation-delay: 0.3s; }
main.container > *:nth-child(7) { animation-delay: 0.35s; }
main.container > *:nth-child(8) { animation-delay: 0.4s; }
main.container > *:nth-child(9) { animation-delay: 0.45s; }
main.container > *:nth-child(10) { animation-delay: 0.5s; }

/* Cards within grids get their own stagger */
article {
  animation: fadeSlideIn 0.35s ease-out backwards;
}

/* Big stat numbers get a pop animation */
[style*="font-size: 2rem"],
.big-number {
  animation: countUp 0.5s ease-out backwards;
  animation-delay: 0.3s;
}

/* Table rows fade in with cascade */
tbody tr {
  animation: fadeIn 0.3s ease-out backwards;
}

tbody tr:nth-child(1) { animation-delay: 0.1s; }
tbody tr:nth-child(2) { animation-delay: 0.13s; }
tbody tr:nth-child(3) { animation-delay: 0.16s; }
tbody tr:nth-child(4) { animation-delay: 0.19s; }
tbody tr:nth-child(5) { animation-delay: 0.22s; }
tbody tr:nth-child(6) { animation-delay: 0.25s; }
tbody tr:nth-child(7) { animation-delay: 0.28s; }
tbody tr:nth-child(8) { animation-delay: 0.31s; }
tbody tr:nth-child(9) { animation-delay: 0.34s; }
tbody tr:nth-child(10) { animation-delay: 0.37s; }

/* =============================================================================
   Semantic Color Classes - Performance indicators
   ============================================================================= */

/* Wins - Gold */
.stat-wins,
.color-wins {
  color: var(--color-wins) !important;
}

/* Clear rounds - Emerald */
.stat-clears,
.color-clears {
  color: var(--color-clears) !important;
}

/* Podiums - Bronze */
.stat-podiums,
.color-podium {
  color: var(--color-podium) !important;
}

/* Falls/Errors - Coral */
.stat-falls,
.stat-danger,
.color-danger {
  color: var(--color-danger) !important;
}

/* Inline stat badges with semantic colors */
.badge-wins {
  background: var(--color-wins);
  color: oklch(0.15 0.02 85);
}

.badge-clears {
  background: var(--color-clears);
  color: white;
}

.badge-podium {
  background: var(--color-podium);
  color: oklch(0.15 0.02 45);
}

.badge-danger {
  background: var(--color-danger);
  color: white;
}

/* =============================================================================
   Chart Styling - Brand-consistent data visualization
   ============================================================================= */

/* Chart container with proper aspect ratio */
canvas {
  max-width: 100%;
}

/* Chart legend improvements - handled via Chart.js config but we set defaults */

/* =============================================================================
   Enhanced Big Numbers with Semantic Colors
   ============================================================================= */

/* Performance pane wins */
article [style*="font-size: 2rem"]:has(+ [style*="Wins"]),
article div:has(> p:last-child:contains("Wins")) > p:first-child {
  color: var(--color-wins);
}

/* Override for specific stat types in stat panes */
.stat-value-wins {
  color: var(--color-wins) !important;
  font-weight: 700;
}

.stat-value-clears {
  color: var(--color-clears) !important;
  font-weight: 700;
}

.stat-value-podiums {
  color: var(--color-podium) !important;
  font-weight: 700;
}

.stat-value-falls {
  color: var(--color-danger) !important;
  font-weight: 700;
}

/* =============================================================================
   Accent Stripe Enhancement - More prominent
   ============================================================================= */

article::before,
.card::before {
  height: 5px;
  background: linear-gradient(90deg,
    oklch(0.50 0.18 264) 0%,
    oklch(0.60 0.15 264) 50%,
    oklch(0.55 0.12 200) 100%);
}

/* Special accent for performance cards */
article:has(h3:contains("Performance"))::before,
article:has(h3:contains("Top Performers"))::before {
  background: linear-gradient(90deg,
    var(--color-wins) 0%,
    var(--color-clears) 100%);
}

/* =============================================================================
   Nav Brand Typography
   ============================================================================= */

.site-nav .brand span,
.brand span {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* =============================================================================
   Prefers Reduced Motion - Respect user preferences
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Navigation Dropdowns
   ============================================================================= */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

.nav-dropdown-trigger:hover {
  color: white;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 180px;
  background: oklch(0.20 0.03 264);
  border: 1px solid oklch(0.35 0.05 264);
  border-radius: 8px;
  padding: 0.5rem 0;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease;
}

.nav-dropdown-menu a:hover {
  background: oklch(0.30 0.05 264);
  color: white;
}

/* Right-align dropdown for rightmost nav items to prevent overflow */
.nav-dropdown:last-child .nav-dropdown-menu {
  left: auto;
  right: 0;
}

/* =============================================================================
   Search Bar Component
   ============================================================================= */

.search-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.search-bar input[type="text"],
.search-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.search-bar [role="button"],
.search-bar button,
.search-bar a[role="button"] {
  flex-shrink: 0;
  white-space: nowrap;
  margin-bottom: 0;
}

/* Fix vertical alignment in flexbox forms - override Pico's default margins */
form[style*="display: flex"] input,
form[style*="display: flex"] button,
form[style*="display: flex"] [role="button"],
form[style*="display: flex"] select {
  margin-bottom: 0;
}

/* =============================================================================
   Period Selector Component
   ============================================================================= */

.period-selector {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

.period-selector [role="button"] {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 0;
  margin: 0;
}

.period-selector [role="button"]:first-child {
  border-radius: 4px 0 0 4px;
}

.period-selector [role="button"]:last-child {
  border-radius: 0 4px 4px 0;
}

.period-selector [role="button"]:not(:first-child) {
  margin-left: -1px;
}

/* Active state (non-outline) gets higher z-index for proper border overlap */
.period-selector [role="button"]:not(.outline) {
  z-index: 1;
  position: relative;
}

/* =============================================================================
   Loading Indicator - Industrial Athletic Timer

   A segmented ring design inspired by timing displays and equestrian arenas.
   Geometric, purposeful, with brand hue accents.
   ============================================================================= */

/* Full-page overlay - appears instantly for form submissions */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.10 0.02 264 / 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  /* No transition - appear instantly so it's visible before page navigation */
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* The timer ring - segmented octagon inspired by timing displays */
.loading-ring {
  width: 64px;
  height: 64px;
  position: relative;
}

.loading-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid oklch(0.25 0.03 264);
}

/* Animated arc segment */
.loading-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: oklch(0.65 0.18 264);
  border-right-color: oklch(0.55 0.15 264);
  animation: loading-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulsing center dot - the "heartbeat" */
.loading-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: oklch(0.60 0.15 145); /* Emerald accent */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.6;
  }
}

/* Loading text */
.loading-text {
  margin-top: 1.25rem;
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: oklch(0.70 0.03 264);
  animation: loading-text-pulse 1.8s ease-in-out infinite;
}

@keyframes loading-text-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Inline button loading state */
button.loading,
[role="button"].loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.loading::after,
[role="button"].loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid oklch(0.35 0.03 264);
  border-top-color: oklch(0.65 0.15 264);
  animation: loading-spin 0.7s linear infinite;
}

/* Smaller spinner for compact buttons */
button.loading.outline::after,
[role="button"].loading.outline::after {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-width: 2px;
}

/* Progress bar variant for longer operations */
.loading-progress {
  width: 200px;
  height: 4px;
  background: oklch(0.25 0.03 264);
  border-radius: 2px;
  margin-top: 1rem;
  overflow: hidden;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    oklch(0.55 0.15 264) 0%,
    oklch(0.65 0.18 264) 50%,
    oklch(0.55 0.15 264) 100%
  );
  background-size: 200% 100%;
  animation: loading-progress-shimmer 1.5s ease-in-out infinite;
  border-radius: 2px;
}

/* Indeterminate progress */
.loading-progress-bar.indeterminate {
  width: 40%;
  animation:
    loading-progress-shimmer 1.5s ease-in-out infinite,
    loading-progress-slide 1.2s ease-in-out infinite;
}

@keyframes loading-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loading-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Skeleton loading for content placeholders */
.skeleton {
  background: linear-gradient(
    90deg,
    oklch(0.20 0.02 264) 0%,
    oklch(0.25 0.03 264) 50%,
    oklch(0.20 0.02 264) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text:last-child {
  width: 70%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   Club Comparison Enhancements
   ============================================================================= */

/* Club list items - hover interaction */
.club-list-item {
  display: block;
  transition: background 0.15s ease;
  cursor: pointer;
}

.club-list-item:hover {
  background: oklch(0.22 0.03 264) !important;
}

/* Club tags - selected clubs display */
.club-tag {
  animation: tagSlideIn 0.2s ease-out;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: oklch(0.55 0.15 264);
  color: white;
  border-radius: 6px;
  font-size: 0.875rem;
}

@keyframes tagSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.club-tag .remove-tag {
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.15s ease;
}

.club-tag .remove-tag:hover {
  transform: scale(1.2);
  color: oklch(0.85 0.25 25) !important;
}

/* Best in column highlighting */
.best-in-column {
  background: oklch(0.22 0.04 145 / 0.15) !important;
  font-weight: 600;
}

.best-in-column span {
  font-weight: 700;
}

/* Star indicator for best values - golden color */
.best-in-column::after {
  content: '';
}

td.best-in-column {
  position: relative;
}

/* Mini-bars for visual comparison */
.mini-bar {
  transition: width 0.3s ease-out;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.2);
}

/* Sortable table headers */
.data-table.sortable th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.15s ease;
}

.data-table.sortable th.sortable:hover {
  background: oklch(0.26 0.04 264);
}

.data-table.sortable th.sortable::after {
  content: ' \2195 ';
  opacity: 0.4;
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

.data-table.sortable th.sortable.asc::after,
.data-table.sortable th.sortable.sorted-asc::after {
  content: ' \2191 ';
  opacity: 1;
  color: oklch(0.65 0.15 264);
}

.data-table.sortable th.sortable.desc::after,
.data-table.sortable th.sortable.sorted-desc::after {
  content: ' \2193 ';
  opacity: 1;
  color: oklch(0.65 0.15 264);
}

/* Rank column styling */
table td:first-child strong {
  color: oklch(0.65 0.12 264);
}

/* =============================================================================
   Rider Controls - Period selector and action buttons
   ============================================================================= */

/* Rider controls container - flex layout with proper alignment */
.rider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Action buttons container - ensure all children align vertically */
.rider-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Reset Pico's default form margins that throw off alignment */
.rider-actions form {
  margin: 0 !important;
}

/* Ensure all buttons in rider actions have consistent height */
.rider-actions button,
.rider-actions [role="button"] {
  margin: 0 !important;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  height: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Period selector in rider controls - ensure it doesn't stretch */
.rider-controls [role="group"] {
  margin: 0;
  align-self: center;
}

/* =============================================================================
   Info Modal - Help text overlay
   ============================================================================= */

/* Modal overlay - darkened background */
.info-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.7);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.info-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Modal dialog */
.info-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  max-width: 500px;
  width: 90%;
  background: oklch(0.20 0.03 264);
  border: 2px solid oklch(0.35 0.05 264);
  border-radius: 8px;
  padding: 1.5rem;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 12px 40px oklch(0 0 0 / 0.6);
}

.info-modal.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Close button */
.info-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: oklch(0.6 0.02 264);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s ease;
}

.info-close:hover {
  color: oklch(0.85 0.05 264);
}

/* Modal title */
.info-modal-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: oklch(0.85 0.05 264);
}

/* Modal description */
.info-modal-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: oklch(0.75 0.02 264);
}

/* =============================================================================
   Mobile Responsive - Hamburger Menu & Navigation
   ============================================================================= */

/* Hamburger menu button - hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 5px;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* Hamburger animation when open */
.nav-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile navigation styles */
@media (max-width: 768px) {
  /* Show hamburger on mobile */
  .nav-hamburger {
    display: flex;
    margin-left: auto;
  }

  /* Hide nav links by default on mobile */
  .site-nav .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: oklch(0.15 0.03 264);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 4rem 1.5rem 2rem;
    gap: 0;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  /* Show nav when menu is open */
  .site-nav .nav-links.open {
    transform: translateX(0);
  }

  /* Dropdowns in mobile menu */
  .site-nav .nav-dropdown {
    border-bottom: 1px solid oklch(0.25 0.03 264);
  }

  .site-nav .nav-dropdown-trigger {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
  }

  /* Dropdown menus in mobile - always visible when parent is touched */
  .site-nav .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0.75rem 1rem;
    min-width: auto;
    display: none;
  }

  .site-nav .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .site-nav .nav-dropdown-menu a {
    padding: 0.5rem 0;
    font-size: 0.95rem;
  }

  /* User section at bottom of mobile menu */
  .site-nav .user-nav {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid oklch(0.25 0.03 264);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .site-nav .user-email {
    font-size: 1rem;
  }

  .site-nav .logout-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .site-nav .login-link {
    margin-left: 0;
    font-size: 1rem;
  }

  /* Rider controls stack on mobile */
  .rider-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  /* Period selector scrollable on mobile */
  .period-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  /* Action buttons wrap on mobile */
  .rider-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Page header stack on mobile */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* =============================================================================
   Mobile Tables - Horizontal Scroll
   ============================================================================= */

/* Table wrapper for horizontal scroll */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-responsive table {
  min-width: 600px;
}

/* Tables with many columns need larger min-width */
.table-responsive.wide table {
  min-width: 800px;
}

@media (max-width: 768px) {
  /* Auto-wrap tables in scroll container via JS or make them scrollable */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce table cell padding on mobile */
  table thead th {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }

  table tbody td {
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Ensure long text doesn't break layout */
  table td,
  table th {
    white-space: nowrap;
  }

  /* But allow wrapping in specific columns */
  table td:nth-child(2),
  table td:nth-child(3) {
    white-space: normal;
    min-width: 120px;
  }
}

/* =============================================================================
   Mobile Typography & Spacing
   ============================================================================= */

@media (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.35rem;
  }

  /* Tighter container padding on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Cards with less padding on mobile */
  article,
  .card {
    padding: 1rem;
  }

  /* Definition lists stack on very small screens */
  dl {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  dt {
    margin-top: 0.5rem;
  }

  dt:first-child {
    margin-top: 0;
  }

  dd {
    text-align: left;
  }

  /* Stat grids on mobile */
  .pane-stats-primary {
    gap: 1rem;
  }

  .pane-stats-secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Smaller big numbers on mobile */
  .pane-stat-value-primary {
    font-size: 2rem;
  }

  .big-number {
    font-size: 2rem;
  }

  /* Button groups can scroll on mobile */
  [role="group"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}