/* Header - Fixed position */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-height);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-lg);
  background:var(--color-bg-surface);
  border-bottom:1px solid var(--color-border);
  z-index:var(--z-fixed);
}

/* Body padding for fixed header */
body{
  padding-top:var(--header-height);
}
.header-brand{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-lg);font-weight:var(--weight-bold)}
.header-logo{width:32px;height:32px}
.header-actions{display:flex;align-items:center;gap:var(--space-md)}
.header-version{
  font-size:var(--text-xs);color:var(--color-text-muted);
  padding:var(--space-2xs) var(--space-xs);
  background:var(--color-bg-sunken);border-radius:var(--radius-sm);
}

/* Page Header */
.page-header{margin-bottom:var(--space-xl)}
.page-title{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:var(--text-2xl);font-weight:var(--weight-bold);
  margin:0 0 var(--space-xs) 0;color:var(--color-text-primary);
}
.page-icon{width:32px;height:32px;color:var(--color-accent);flex-shrink:0}
.page-subtitle{font-size:var(--text-md);color:var(--color-text-secondary);margin:0}
.page-subtitle .subtitle-meta{font-size:var(--text-sm);color:var(--color-text-muted)}
@media(max-width:599px){
  .page-title{font-size:var(--text-xl)}
  .page-icon{width:24px;height:24px}
}

/* Cards */
.card{
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  box-shadow:var(--shadow-sm);
  max-width:100%;
  overflow:hidden;
}
@media(max-width:599px) and (orientation:portrait){
  .card{padding:var(--space-md)}
}
.card--elevated{background:var(--color-bg-elevated);box-shadow:var(--shadow-md)}
.card--clickable{cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.card--clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-md)}
.card-title{font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0}
.card-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-2xs)}
.card-body{color:var(--color-text-secondary)}
.card-footer{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-divider)}

/* Rider Profile */
.rider-profile{display:flex;align-items:center;gap:var(--space-md)}
.rider-avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--color-bg-sunken);border:3px solid var(--color-border);
  overflow:hidden;flex-shrink:0;
}
.rider-avatar img{width:100%;height:100%;object-fit:cover}
.rider-info{flex:1;min-width:0}
.rider-name{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rider-club{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-2xs)}
.rider-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs);font-size:var(--text-xs);color:var(--color-text-tertiary)}

/* Stats */
.stats-row{display:flex;gap:var(--space-lg);margin-top:var(--space-md)}
.stat-block{flex:1;text-align:center}
.stat-value{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-accent-text);font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-2xs)}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;
}
.chip--enduro{background:var(--series-enduro);color:#000}
.chip--downhill{background:var(--series-downhill);color:#fff}
.chip--xc{background:var(--series-xc);color:#fff}
.chip--ges{background:var(--series-ges);color:#fff}
.chip--ggs{background:var(--series-ggs);color:#fff}
.chip--success{background:var(--color-success-light);color:var(--color-success)}
.chip--warning{background:var(--color-warning-light);color:var(--color-warning)}
.chip--error{background:var(--color-error-light);color:var(--color-error)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);
  font-size:var(--text-base);font-weight:var(--weight-medium);
  transition:all var(--transition-fast);white-space:nowrap;
}
.btn--primary{background:var(--color-accent);color:var(--color-text-inverse)}
.btn--primary:hover{background:var(--color-accent-hover)}
.btn--secondary{background:var(--color-bg-sunken);color:var(--color-text-primary);border:1px solid var(--color-border)}
.btn--secondary:hover{background:var(--color-bg-hover);border-color:var(--color-border-strong)}
.btn--ghost{background:transparent;color:var(--color-text-secondary)}
.btn--ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-lg)}
.breadcrumb-link{color:var(--color-text-secondary);transition:color var(--transition-fast)}
.breadcrumb-link:hover{color:var(--color-accent-text)}
.breadcrumb-separator{color:var(--color-text-muted)}
.breadcrumb-current{color:var(--color-text-primary);font-weight:var(--weight-medium)}

/* Theme Toggle */
.theme-toggle{
  position:fixed;
  bottom:calc(var(--mobile-nav-height) + var(--space-md) + env(safe-area-inset-bottom));
  right:var(--space-md);
  display:flex;
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:var(--space-2xs);
  box-shadow:var(--shadow-lg);
  z-index:var(--z-fixed);
}
.theme-toggle-btn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  font-size:var(--text-md);color:var(--color-text-secondary);
  transition:all var(--transition-fast);
}
.theme-toggle-btn:hover{background:var(--color-bg-hover)}
.theme-toggle-btn[aria-pressed="true"]{background:var(--color-accent-light);color:var(--color-accent-text)}

@media(min-width:900px){
  .theme-toggle{bottom:var(--space-lg);right:var(--space-lg)}
}

/* Placeholder */
.placeholder{
  display:flex;align-items:center;justify-content:center;min-height:200px;
  background:var(--color-bg-sunken);border:2px dashed var(--color-border);
  border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-sm);
}

/* Loading */
.loading{position:relative;pointer-events:none}
.loading::after{content:'';position:absolute;inset:0;background:var(--color-bg-surface);opacity:0.7}
.spinner{width:24px;height:24px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Icons */
.icon{width:20px;height:20px;flex-shrink:0;color:inherit}
.icon-sm{width:16px;height:16px}
.icon-lg{width:24px;height:24px}
.icon-xl{width:32px;height:32px}

/* Lucide icons - they replace <i data-lucide> with <svg class="lucide"> */
svg.lucide {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
}

/* Icon sizes for Lucide - use !important to override inline attributes */
.icon-sm svg.lucide, svg.lucide.icon-sm { width: 16px !important; height: 16px !important; }
.icon-lg svg.lucide, svg.lucide.icon-lg { width: 32px !important; height: 32px !important; }
.icon-xl svg.lucide, svg.lucide.icon-xl { width: 40px !important; height: 40px !important; }

/* Stat card icons should be larger */
.stat-card svg.lucide { width: 32px !important; height: 32px !important; }

/* Button icons stay small */
.btn svg.lucide { width: 18px !important; height: 18px !important; }

/* H1 title icons */
h1 svg.lucide {
  width: 28px !important;
  height: 28px !important;
  margin-right: var(--space-sm);
}

/* Nav Icons */
.mobile-nav-icon .icon{width:24px;height:24px}
.admin-nav-icon .icon{width:20px;height:20px}

/* Alerts */
.alert{
  display:flex;align-items:flex-start;gap:var(--space-sm);
  padding:var(--space-md);border-radius:var(--radius-md);
  font-size:var(--text-sm);
}
.alert--success{background:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success)}
.alert--error{background:var(--color-error-light);color:var(--color-error);border:1px solid var(--color-error)}
.alert--warning{background:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning)}
.alert--info{background:var(--color-accent-light);color:var(--color-accent);border:1px solid var(--color-accent)}

/* Image Grid (Admin) */
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}
.image-card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.image-preview{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:var(--space-md);background:var(--color-bg-sunken)}
.image-preview.bg-dark{background:#1a1a1a}
.image-preview.bg-light{background:#f5f5f5}
.image-preview img{max-width:100%;max-height:100%;object-fit:contain}
.image-info{padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}
.image-actions{padding:var(--space-xs) var(--space-md) var(--space-sm);border-top:1px solid var(--color-border)}

/* Badge variants */
.badge--default{background:var(--color-bg-sunken)}
.badge--light{background:#f5f5f5;color:#333}
.badge--dark{background:#333;color:#fff}

/* Stat Cards (Admin Dashboard) */
.stat-card{
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
}
.stat-number{
  font-size:var(--text-3xl);
  font-weight:var(--weight-bold);
  color:var(--color-text-primary);
  font-variant-numeric:tabular-nums;
}
.stat-label{
  font-size:var(--text-sm);
  color:var(--color-text-secondary);
}

/* Icon colors */
.text-primary{color:var(--color-accent)}
.text-success{color:var(--color-success)}
.text-accent{color:var(--color-accent)}
.text-warning{color:var(--color-warning)}
.text-error{color:var(--color-error)}

/* Button sizes */
.btn--sm{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}
.btn--lg{padding:var(--space-md) var(--space-lg);font-size:var(--text-md)}

/* Flex utilities for admin */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.gap-md{gap:var(--space-md)}
.gap-sm{gap:var(--space-sm)}