*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font-body, 'Manrope', system-ui, sans-serif);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
ul[role='list'],ol[role='list']{list-style:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:root{
  /* Core spacing scale */
  --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;
  --space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;

  /* Branding-controlled tokens (can be overridden by /admin/branding) */
  --card-padding:16px;
  --content-padding:16px;
  --table-cell-padding-y:12px;
  --table-cell-padding-x:16px;

  /* Typography - Font Families */
  --font-heading:'Oswald', sans-serif;
  --font-heading-secondary:'Cabin Condensed', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-link:'Roboto', sans-serif;
  --font-mono:'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Legacy fallback */
  --font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans:var(--font-body);

  /* Font sizes - Desktop */
  --text-xs:0.75rem;--text-sm:0.8125rem;--text-base:0.875rem;
  --text-md:1rem;--text-lg:1.125rem;--text-xl:1.25rem;
  --text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;

  --weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;

  --sidebar-width:88px;--header-height:60px;--mobile-nav-height:95px;
  --content-max-width:1400px;

  /* Container padding - matches branding.json defaults */
  --container-padding:12px;

  --z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal:500;--z-toast:600;

  --transition-fast:150ms ease;--transition-base:250ms ease;

  --series-enduro:#FFE009;--series-downhill:#FF6B35;--series-xc:#2E7D32;
  --series-ges:#EF761F;--series-ggs:#8A9A5B;--series-gss:#6B4C9A;
  --series-gravel:#795548;--series-dual:#E91E63;

  /* Brand colors for UI elements */
  --color-enduro:#FFD700;--color-enduro-hover:#E6BD00;

  /* ============================================
     ACHIEVEMENT SYSTEM COLORS
     ============================================ */
  --achievement-gold:#FFD700;
  --achievement-silver:#C0C0C0;
  --achievement-bronze:#CD7F32;
  --achievement-green:var(--color-accent, #61CE70);
  --achievement-orange:var(--color-ges-orange, #EF761F);
  --achievement-blue:var(--color-gs-blue, #004a98);
  --achievement-yellow:#FFE009;
  --achievement-purple:#5F1D67;
  --achievement-steel:#607D8B;
  --achievement-olive:var(--color-ggs-green, #8A9A5B);

  /* ============================================
     BADGE SYSTEM
     ============================================ */
  --badge-hex-bg:#171717;
  --badge-transition:0.25s ease;

  /* ============================================
     ICON SIZING
     ============================================ */
  --icon-xs:12px;
  --icon-sm:16px;
  --icon-md:20px;
  --icon-lg:24px;
  --icon-xl:32px;
  --icon-2xl:48px;

  /* ============================================
     ADMIN GRADIENTS
     ============================================ */
  --admin-gradient-primary:linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --admin-gradient-success:linear-gradient(135deg, #10B981 0%, #059669 100%);
  --admin-gradient-warning:linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --admin-gradient-danger:linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

  /* ============================================
     ADMIN SHADOWS
     ============================================ */
  --admin-shadow-soft:0 2px 8px rgba(0, 0, 0, 0.08);
  --admin-shadow-medium:0 4px 16px rgba(0, 0, 0, 0.12);
  --admin-shadow-strong:0 8px 32px rgba(0, 0, 0, 0.16);
  --admin-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container padding - tablet gets more breathing room */
@media (min-width: 768px) {
  :root {
    --container-padding:24px;
  }
}

/* Container padding - desktop gets full spacing */
@media (min-width: 1024px) {
  :root {
    --container-padding:32px;
  }
}

/* Responsive font sizes for mobile */
@media (max-width: 768px) {
  :root {
    --text-xl:1.125rem;
    --text-2xl:1.25rem;
    --text-3xl:1.5rem;
    --text-4xl:2rem;
  }
}

/* Mobile icon sizing - slightly smaller for better mobile UX */
@media (max-width: 599px) {
  :root {
    --icon-lg:20px;
    --icon-xl:28px;
    --icon-2xl:40px;
  }
}
/* ============================================
   THEHUB - EVCS INSPIRED THEME SYSTEM
   Light/Dark Mode - UNIFIED (same colors)
   Updated: 2026-01-18 - Dark mode now uses light mode colors
   ============================================ */

/* DEFAULT - Uses Light Mode colors for consistency across all themes */
:root,
html[data-theme="dark"] {
  /* ===== BAKGRUNDER - Clean Light Base (same as light) ===== */
  --color-bg-page: #F9F9F9;
  --color-bg-surface: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F0F0F0;
  --color-bg-hover: rgba(0, 102, 204, 0.04);
  --color-bg-active: rgba(0, 102, 204, 0.08);

  /* Glass morphism backgrounds */
  --color-bg-glass: rgba(255, 255, 255, 0.8);
  --color-bg-glass-strong: rgba(255, 255, 255, 0.95);

  /* ===== TEXT - Dark Navy & Grays (same as light) ===== */
  --color-text-primary: #0b131e;
  --color-text-secondary: #495057;
  --color-text-tertiary: #6c757d;
  --color-text-muted: #868e96;
  --color-text-inverse: #ffffff;

  /* ===== BORDERS - Subtle Gray (same as light) ===== */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-border-light: rgba(0, 0, 0, 0.08);
  --color-divider: rgba(0, 0, 0, 0.1);

  /* ===== ACCENT - Blue ===== */
  --color-accent: #0066CC;
  --color-accent-hover: #0052A3;
  --color-accent-light: rgba(0, 102, 204, 0.08);
  --color-accent-text: #0066CC;
  --color-accent-glow: rgba(0, 102, 204, 0.2);
  --color-accent-glow-strong: rgba(0, 102, 204, 0.35);

  /* ===== STATUS COLORS (same as light) ===== */
  --color-success: #059669;
  --color-success-light: #d1fae5;
  --color-success-bg: rgba(5, 150, 105, 0.1);

  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-bg: rgba(217, 119, 6, 0.1);

  --color-error: #dc2626;
  --color-error-light: #fee2e2;
  --color-error-bg: rgba(220, 38, 38, 0.1);

  --color-info: #0284c7;
  --color-info-light: #e0f2fe;
  --color-info-bg: rgba(2, 132, 199, 0.1);

  /* ===== SHADOWS & EFFECTS (same as light) ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 24px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 48px var(--color-accent-glow-strong);

  /* Blur effects */
  --blur-sm: 12px;
  --blur-md: 30px;
  --blur-lg: 80px;

  /* Fade gradients (same as light) */
  --gradient-fade-up: linear-gradient(180deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);
  --gradient-fade-down: linear-gradient(0deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);

  color-scheme: light;
}

/* ============================================
   LIGHT MODE - Samma visuella stil
   ============================================ */
html[data-theme="light"] {
  /* ===== BAKGRUNDER - Clean Light Base ===== */
  --color-bg-page: #F9F9F9;
  --color-bg-surface: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F0F0F0;
  --color-bg-hover: rgba(0, 102, 204, 0.04);
  --color-bg-active: rgba(0, 102, 204, 0.08);

  /* Glass morphism backgrounds */
  --color-bg-glass: rgba(255, 255, 255, 0.8);
  --color-bg-glass-strong: rgba(255, 255, 255, 0.95);

  /* ===== TEXT - Dark Navy & Grays ===== */
  --color-text-primary: #0b131e;
  --color-text-secondary: #495057;
  --color-text-tertiary: #6c757d;
  --color-text-muted: #868e96;
  --color-text-inverse: #ffffff;

  /* ===== BORDERS - Subtle Gray ===== */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-border-light: rgba(0, 0, 0, 0.08);
  --color-divider: rgba(0, 0, 0, 0.1);

  /* ===== ACCENT - Blue (ljusare i light mode) ===== */
  --color-accent: #0066CC;
  --color-accent-hover: #0052A3;
  --color-accent-light: rgba(0, 102, 204, 0.08);
  --color-accent-text: #0066CC;
  --color-accent-glow: rgba(0, 102, 204, 0.2);
  --color-accent-glow-strong: rgba(0, 102, 204, 0.35);

  /* ===== STATUS COLORS ===== */
  --color-success: #059669;
  --color-success-light: #d1fae5;
  --color-success-bg: rgba(5, 150, 105, 0.1);

  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-bg: rgba(217, 119, 6, 0.1);

  --color-error: #dc2626;
  --color-error-light: #fee2e2;
  --color-error-bg: rgba(220, 38, 38, 0.1);

  --color-info: #0284c7;
  --color-info-light: #e0f2fe;
  --color-info-bg: rgba(2, 132, 199, 0.1);

  /* ===== SHADOWS & EFFECTS ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 24px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 48px var(--color-accent-glow-strong);

  /* Blur effects (samma som dark mode) */
  --blur-sm: 12px;
  --blur-md: 30px;
  --blur-lg: 80px;

  /* Fade gradients */
  --gradient-fade-up: linear-gradient(180deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);
  --gradient-fade-down: linear-gradient(0deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);

  color-scheme: light;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ===== TYPOGRAPHY - Headings ===== */
h1,
.h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h2,
.h2,
h3,
.h3 {
  font-family: var(--font-heading-secondary);
  font-weight: var(--weight-semibold);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
}

/* ===== TYPOGRAPHY - Links ===== */
a {
  font-family: var(--font-link);
}

/* ===== TYPOGRAPHY - Body text ===== */
p,
span,
div,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-family: inherit;
}

/* ===== UTILITY CLASSES ===== */
.font-heading {
  font-family: var(--font-heading);
}
.font-heading-secondary {
  font-family: var(--font-heading-secondary);
}
.font-body {
  font-family: var(--font-body);
}
.font-link {
  font-family: var(--font-link);
}

/* ===== SELECTION & SCROLLBAR ===== */
::selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-sunken);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}
/* ============================================
   THEHUB - EVCS EFFECTS
   Glass morphism, Glow effects, Blur
   ============================================ */

/* ============================================
   GLASS MORPHISM CARDS
   ============================================ */
.card--glass {
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-border);
}

.card--glass-strong {
  background: var(--color-bg-glass-strong);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-border-strong);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

/* Accent glow - För interaktiva element */
.glow {
  position: relative;
  isolation: isolate;
}

.glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-accent-glow), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.glow:hover::before {
  opacity: 1;
}

/* Permanent glow - För accent elements */
.glow--active {
  box-shadow: var(--shadow-glow);
}

.glow--strong {
  box-shadow: var(--shadow-glow-strong);
}

/* Animated glow pulse */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--color-accent-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--color-accent-glow-strong);
  }
}

.glow--pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ============================================
   BUTTON GLOW EFFECTS
   ============================================ */
.btn--glow {
  position: relative;
  overflow: hidden;
}

.btn--glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--color-accent-glow) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.btn--glow:hover::after {
  opacity: 1;
}

/* Primary button with glow */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  transition: all var(--transition-fast);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

/* ============================================
   GRADIENT OVERLAYS
   ============================================ */
.gradient-overlay {
  position: relative;
}

.gradient-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-fade-up);
  pointer-events: none;
}

.gradient-overlay--top::after {
  background: var(--gradient-fade-down);
}

/* ============================================
   BLUR BACKGROUNDS
   ============================================ */
.blur-bg {
  position: relative;
}

.blur-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at center,
    var(--color-accent-glow) 0%,
    transparent 60%
  );
  filter: blur(var(--blur-lg));
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   CARD ENHANCEMENTS
   ============================================ */

/* Card med subtil hover glow */
.card--hover-glow {
  transition: all var(--transition-base);
}

.card--hover-glow:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* Card med accent border top */
.card--accent-top {
  border-top: 2px solid var(--color-accent);
}

/* Card med gradient border */
.card--gradient-border {
  position: relative;
  background: var(--color-bg-card);
  border: none;
}

.card--gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-accent-glow),
    transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================
   INPUT/FORM GLOW EFFECTS
   ============================================ */
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light), var(--shadow-glow);
}

/* ============================================
   BADGE GLOW
   ============================================ */
.badge--glow {
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* ============================================
   TEXT GLOW
   ============================================ */
.text-glow {
  text-shadow: 0 0 20px var(--color-accent-glow);
}

.text-glow--strong {
  text-shadow: 0 0 30px var(--color-accent-glow-strong);
}

/* ============================================
   DIVIDER WITH GLOW
   ============================================ */
.divider--glow {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%
  );
  box-shadow: 0 0 10px var(--color-accent-glow);
}

/* ============================================
   GLASS PANEL (För modals/overlays)
   ============================================ */
.glass-panel {
  background: var(--color-bg-glass-strong);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   STATS CARD WITH GLOW
   ============================================ */
.stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
}

.stat-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.stat-card:hover::before {
  opacity: 1;
}

/* ============================================
   FLOATING ELEMENTS
   ============================================ */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* ============================================
   SHIMMER EFFECT
   ============================================ */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-glow) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* ============================================
   ACCENT DECORATIONS
   ============================================ */

/* Accent dot/indicator */
.accent-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.accent-dot--pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Accent line */
.accent-line {
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Reduce effects on mobile for performance */
@media (max-width: 768px) {
  .blur-bg::before {
    filter: blur(calc(var(--blur-lg) * 0.5));
  }
  
  .card--glass,
  .card--glass-strong,
  .glass-panel {
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
  }
  
  /* Disable animations for better performance */
  @media (prefers-reduced-motion: reduce) {
    .glow--pulse,
    .float,
    .shimmer {
      animation: none;
    }
  }
}

/* Disable effects if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glow--pulse,
  .float,
  .shimmer {
    animation: none;
  }
  
  .card--hover-glow:hover,
  .stat-card:hover {
    transform: none;
  }
}
/* Skip Link */
.skip-link{
  position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  background:var(--color-accent);color:var(--color-text-inverse);
  padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);
  z-index:var(--z-toast);font-weight:var(--weight-medium);
  transition:top var(--transition-fast);
}
.skip-link:focus{top:var(--space-md)}

/* Back Navigation */
.back-nav{margin-bottom:var(--space-md)}
.back-link{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  color:var(--color-text-secondary);font-size:var(--text-sm);
  padding:var(--space-xs) 0;
  transition:color var(--transition-fast);
}
.back-link:hover{color:var(--color-accent-text)}
.back-arrow{font-size:var(--text-lg)}

/* App Layout - Fixed sidebar, scrollable content */
.app-layout{
  display:block;
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100dvh - var(--header-height));
  padding-left:var(--sidebar-width);
}

/* Sidebar - Fixed position */
.sidebar{
  position:fixed;
  top:var(--header-height);
  left:0;
  width:var(--sidebar-width);
  height:calc(100vh - var(--header-height));
  height:calc(100dvh - var(--header-height));
  background:var(--color-bg-surface);
  border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;
  padding:var(--space-md) 0;
  overflow-y:auto;
  overflow-x:visible;
  z-index:var(--z-sticky);
}

/* Sidebar Logo */
.sidebar-logo{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-sm);margin-bottom:var(--space-sm);
}
.sidebar-logo img{width:40px;height:40px;border-radius:var(--radius-sm)}

.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-2xs);padding:0 var(--space-sm)}

/* Sidebar link - icon with label below */
.sidebar-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:var(--space-sm) var(--space-xs);
  margin:0 auto;
  color:var(--color-text-secondary);
  text-decoration:none;
  border-radius:var(--radius-md);
  transition:all 0.2s ease;
  position:relative;
}
.sidebar-link:hover{
  color:var(--color-text-primary);
  background:var(--color-bg-hover);
}
.sidebar-link:hover .sidebar-icon-svg{color:var(--color-text-primary)}

/* Active state */
.sidebar-link.is-active,
.sidebar-link[aria-current="page"]{
  background:var(--color-accent-light);
  color:var(--color-accent-text);
  box-shadow:0 0 16px var(--color-accent-glow);
}
.sidebar-link.is-active .sidebar-icon-svg,
.sidebar-link[aria-current="page"] .sidebar-icon-svg{color:var(--color-accent-text)}

/* Active indicator bar */
.sidebar-link.is-active::before,
.sidebar-link[aria-current="page"]::before{
  content:'';
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:24px;
  background:var(--color-accent);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 12px var(--color-accent-glow-strong);
}

/* Sidebar icon */
.sidebar-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.sidebar-icon svg,.sidebar-icon-svg{
  width:22px;height:22px;
  color:inherit;stroke:currentColor;
}

/* Label under icon */
.sidebar-label{
  display:block;
  font-size:10px;
  font-weight:var(--weight-medium);
  line-height:1.2;
  text-align:center;
  margin-top:2px;
}

/* Sidebar sections */
.sidebar-section{margin-bottom:var(--space-xs)}
.sidebar-section-title{
  font-size:9px;
  font-weight:var(--weight-semibold);
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:var(--space-xs) var(--space-sm);
  text-align:center;
}
.sidebar-divider{
  height:1px;
  background:var(--color-border);
  margin:var(--space-xs) var(--space-sm);
}

/* Admin link styling */
.sidebar-link--admin{color:var(--color-accent-text) !important}

/* Notification badge on sidebar icons */
.sidebar-badge{
  position:absolute;
  top:-6px;right:-8px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;
  padding:0 4px;
  font-size:10px;font-weight:600;line-height:1;
  border-radius:8px;
  background:var(--color-text-secondary);
  color:white;
}
.sidebar-badge--alert{
  background:var(--color-error);
  animation:pulse-badge 2s infinite;
}
@keyframes pulse-badge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}
.sidebar-link.has-badge .sidebar-icon-svg{color:var(--color-error)}

/* Main Content - Uses --container-padding from branding for responsive control */
.main-content{
  padding:var(--container-padding) !important;
  padding-bottom:calc(var(--container-padding) + var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
  max-width:var(--content-max-width);margin:0 auto;width:100%;
  overflow-x:hidden;
}
.main-content:focus{outline:none}

.page-content{animation:fadeIn var(--transition-base)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Page Grid */
.page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-lg)}
.page-grid--2col{grid-template-columns:repeat(2,1fr)}
.grid-full{grid-column:1/-1}

/* Mobile Nav */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  height:var(--mobile-nav-height);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--color-bg-surface);
  border-top:1px solid var(--color-border);
  z-index:999;
}
.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center;height:100%;max-width:500px;margin:0 auto;padding:0 var(--space-xs)}
.mobile-nav-link{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:var(--space-xs) var(--space-sm);color:var(--color-text-muted);
  font-size:var(--text-xs);font-weight:var(--weight-medium);min-width:56px;
  transition:color var(--transition-fast);text-decoration:none;
}
.mobile-nav-link:hover{color:var(--color-text-secondary)}
.mobile-nav-link.active,.mobile-nav-link[aria-current="page"]{color:var(--color-accent-text)}
.mobile-nav-icon{display:flex;align-items:center;justify-content:center}
.mobile-nav-icon svg{width:24px;height:24px;stroke-width:2}

/* Responsive - Uses --container-padding from branding (set via responsive media queries in head.php) */

/* PORTRAIT MOBILE (up to 899px): Bottom nav, no sidebar */
@media(max-width:899px) and (orientation:portrait){
  .app-layout{padding-left:0}
  .sidebar{display:none}
  .mobile-nav{display:block}
  .main-content{
    padding:var(--container-padding);
    padding-bottom:calc(var(--container-padding) + var(--mobile-nav-height) + env(safe-area-inset-bottom) + 60px);
    margin-left:0;
    width:100%;
    /* Ensure touch scrolling works on mobile */
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}

@media(max-width:599px) and (orientation:portrait){
  .page-grid{grid-template-columns:1fr!important}
  /* Compact mobile nav for narrow portrait screens */
  .mobile-nav-link{min-width:40px;padding:var(--space-2xs);font-size:9px}
  .mobile-nav-icon svg{width:20px;height:20px}
}

/* LANDSCAPE MOBILE/TABLET (up to 1023px): Compact sidebar, NO bottom nav */
@media(max-width:1023px) and (orientation:landscape){
  .app-layout{padding-left:64px !important;margin-left:0 !important}
  .sidebar{
    display:flex !important;
    position:fixed !important;
    top:var(--header-height) !important;
    left:0 !important;
    right:auto !important;
    margin:0 !important;
    transform:none !important;
    width:64px !important;
    padding:4px 0 !important;
    gap:0;
  }
  .sidebar-nav{gap:0;padding:0 4px}
  .sidebar-link{
    padding:6px 4px;
    gap:2px;
    font-size:9px;
    border-radius:var(--radius-sm);
  }
  .sidebar-icon svg{width:24px !important;height:24px !important}
  .mobile-nav{display:none !important}
  .main-content{
    padding:var(--container-padding) !important;
    padding-left:var(--landscape-sidebar-gap, 4px) !important;
    padding-bottom:var(--container-padding) !important;
    margin-left:0 !important;
    width:100% !important;
  }
  .page-grid{grid-template-columns:1fr 1fr!important}
}

@media(min-width:900px){
  .main-content{padding-bottom:var(--space-xl)}
}

/* ============================================================================
   EVENT PAGE ISOLATION - Desktop Width 2025
   Event pages are SACRED - their layout must not be affected by global changes.
   These rules ensure event result displays remain unchanged.
   ============================================================================ */

/* Event pages - remove max-width constraints on containers */
.event-page .main-content,
.event-page .container,
.event-page .page-wrap,
.event-page .content-wrap,
.event-page .content-prose {
  max-width: none;
}

/* Ensure event page tables can expand fully */
.event-page .table-wrapper {
  max-width: 100%;
}

/* Event page cards should respect available space */
.event-page .card {
  max-width: 100%;
}

/* Event page specific padding adjustments for wider content */
@media(min-width:1200px) {
  .event-page .main-content {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}
/* 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;border-radius:var(--radius-sm);object-fit:contain}
.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-lg)}
.page-title{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:var(--text-3xl);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-2xl)}
  .page-icon{width:28px;height:28px}
}

/* Cards - Uses --card-padding from branding for responsive control */
.card{
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--card-padding);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* ============================================================================
   EDGE-TO-EDGE MOBILE STANDARD 2025
   SINGLE SOURCE OF TRUTH - All mobile edge-to-edge rules go here ONLY
   Uses CSS variables for maintainability
   ============================================================================ */

/* Mobile Edge-to-Edge System - Clean & Maintainable */
@media (max-width: 767px) {
  /* Ensure container has correct padding */
  .container,
  .page-content {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Cards break out to edges - PRODUCTION selectors from pages/ */
  .card,
  .class-section,
  .result-card,
  .event-card,
  .event-row,
  .filter-row,
  .filters-bar,
  .alert,
  .event-header-banner,
  .event-header,
  .event-sponsor-banner,
  .event-sponsor-logos,
  .event-tabs-wrapper,
  /* Rider page elements */
  .profile-hero,
  .events-dropdown,
  .rider-stats-trend,
  .form-section,
  .highlights-section,
  .ranking-section,
  .results-achievements-grid,
  .trend-card,
  .series-tabs,
  .results-card {
    /* Negative margin equals container padding */
    margin-left: calc(-1 * var(--container-padding)) !important;
    margin-right: calc(-1 * var(--container-padding)) !important;

    /* Remove borders and radius on sides */
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;

    /* Let it expand naturally */
    width: auto !important;
    max-width: none !important;
  }

  /* Tables and lists also break out */
  .table-responsive,
  .table-wrapper,
  .result-list,
  .event-list {
    margin-left: calc(-1 * var(--container-padding)) !important;
    margin-right: calc(-1 * var(--container-padding)) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Restore padding inside cards - PRODUCTION selectors */
  .card-header,
  .card-body,
  .result-info,
  .event-info,
  /* Rider page internal padding (for child elements inside edge-to-edge containers) */
  .hero-content,
  .events-dropdown-header,
  .events-dropdown-content {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Rider sections that already have internal padding - override to use container-padding */
  .form-section,
  .highlights-section,
  .ranking-section,
  .trend-card,
  .results-card {
    padding: var(--container-padding) !important;
  }

  /* Series tabs internal padding */
  .series-nav,
  .series-content,
  .series-panel,
  .section-header-styled {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Event row specific - restore internal padding */
  .event-row {
    padding: var(--container-padding) !important;
  }

  /* Highlight items break out of parent padding to go edge-to-edge */
  .highlights-list,
  .highlight-item {
    margin-left: calc(-1 * var(--container-padding)) !important;
    margin-right: calc(-1 * var(--container-padding)) !important;
    border-radius: 0 !important;
    width: auto !important;
  }

  .highlight-item {
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
  }


  /* Tables inside cards need to break out of card padding too */
  .card .table-wrapper,
  .card .result-list,
  .card .table-responsive,
  .card table {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    width: auto;
  }

  /* Restore cell padding in tables */
  .card table th,
  .card table td {
    padding-left: var(--container-padding);
  }
  .card table th:last-child,
  .card table td:last-child {
    padding-right: var(--container-padding);
  }
}

/*
   NOTE 2025: The 599px portrait breakpoint with 8px padding has been removed.
   Modern phones (360-430px) work great with 16px padding.
   See docs/css-analysis/README_START_HÄR.md for rationale.
*/

.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),0 0 24px var(--color-accent-glow)}
.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}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}
.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}
.stat-value{display:block;font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-accent);line-height:1.2;font-variant-numeric:tabular-nums}
.stat-label{display:block;font-size:var(--text-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-top:var(--space-2xs)}

/* Stat Cards - Responsive (mobile-first) */
@media(max-width:768px){
  .stat-card{padding:var(--space-md)}
  .stat-value{font-size:var(--text-xl)}
}
@media(max-width:480px){
  .stat-card{padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md)}
  .stat-value{font-size:var(--text-lg);line-height:1}
  .stat-label{font-size:9px;letter-spacing:0;line-height:1.2;margin-top:2px}
}

/* 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);
  box-shadow:0 0 20px var(--color-accent-glow)
}
.btn--primary:hover{
  background:var(--color-accent-hover);
  box-shadow:0 0 30px var(--color-accent-glow-strong), 0 0 60px var(--color-accent-glow)
}
.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)}

/* Tabs - Unified tab system for all pages */
.tabs-nav{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);border-bottom:2px solid var(--color-border)}
.tabs-nav--noborder{border-bottom:none}
.tab{
  padding:var(--space-sm) var(--space-lg);
  background:transparent;
  color:var(--color-text-secondary);
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  border:none;
  border-bottom:3px solid transparent;
  cursor:pointer;
  transition:all var(--transition-fast);
  white-space:nowrap;
}
.tab:hover{color:var(--color-text-primary);background:var(--color-bg-hover)}
.tab.active{
  color:var(--color-accent);
  border-bottom-color:var(--color-accent);
  background:transparent;
  text-shadow:0 0 12px var(--color-accent-glow);
}
/* Tab variant: Pill style (alternative) - stands out from white background */
.tab-pill{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:var(--color-bg-surface);
  font-weight:var(--weight-medium);
  color:var(--color-text-secondary);
  text-decoration:none;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.tab-pill i,.tab-pill svg{width:16px;height:16px}
.tab-pill:hover{background:var(--color-bg-hover);border-color:var(--color-border-strong);color:var(--color-text-primary)}
.tab-pill.active{
  background:var(--color-accent);
  color:var(--color-text-inverse);
  border-color:var(--color-accent);
  box-shadow:0 0 16px var(--color-accent-glow);
}

/* 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 - alias for backwards compatibility */
.stat-number{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-text-primary);font-variant-numeric:tabular-nums}

/* 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)}

/* ============================================================================
   FILTER BAR - Standardized filter component
   ============================================================================ */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-end;
  margin-bottom:var(--space-lg);padding:var(--space-md);
  background:var(--color-bg-card);border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
}
.filter-select-wrapper{
  display:flex;flex-direction:column;gap:var(--space-2xs);
  flex:1;min-width:140px;max-width:220px;
}
.filter-search-wrapper{flex:2;max-width:280px}
.filter-label{
  font-size:var(--text-xs);color:var(--color-text-secondary);
  text-transform:uppercase;font-weight:var(--weight-medium);
}
.filter-select,.filter-input{
  padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-bg-surface);color:var(--color-text-primary);
  transition:border-color var(--transition-fast);
}
.filter-select{
  padding-right:var(--space-xl);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.filter-select:focus,.filter-input:focus{
  outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(59,158,255,0.1);
}
.filter-btn{align-self:flex-end;white-space:nowrap}
@media(max-width:599px){
  .filter-bar{flex-direction:column;padding:var(--space-sm);gap:var(--space-sm)}
  .filter-select-wrapper,.filter-search-wrapper{width:100%;max-width:none;min-width:0}
  .filter-select,.filter-input{width:100%}
  .filter-btn{width:100%}
}

/* ============================================================================
   EVENTS DROPDOWN - Collapsible event lists
   ============================================================================ */
.events-dropdown{
  background:var(--color-bg-card);border-radius:var(--radius-lg);
  margin-bottom:var(--space-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.events-dropdown-header{
  display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);
  cursor:pointer;font-weight:var(--weight-medium);list-style:none;
  background:var(--color-bg-surface);border-bottom:1px solid transparent;
  transition:background 0.15s;
}
.events-dropdown-header:hover{background:var(--color-bg-hover)}
.events-dropdown-header::-webkit-details-marker{display:none}
.events-dropdown[open] .events-dropdown-header{border-bottom-color:var(--color-border)}
.events-count{color:var(--color-text-muted);font-size:var(--text-sm);margin-left:auto}
.dropdown-arrow{transition:transform 0.2s;color:var(--color-text-muted)}
.events-dropdown[open] .dropdown-arrow{transform:rotate(180deg)}
.events-dropdown-content{max-height:400px;overflow-y:auto}
.event-dropdown-item{
  display:flex;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);
  text-decoration:none;color:inherit;align-items:center;
  border-bottom:1px solid var(--color-border-light);transition:background 0.15s;
}
.event-dropdown-item:hover{background:var(--color-bg-hover)}
.event-dropdown-item:last-child{border-bottom:none}
.event-position{
  width:28px;height:28px;min-width:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.75rem;font-weight:700;
  background:var(--color-bg-sunken);color:var(--color-text-muted);
  border:1px solid var(--color-border);
}
.event-position.p1{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:var(--color-medal-gold);color:#92400e}
.event-position.p2{background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-color:var(--color-medal-silver);color:#4b5563}
.event-position.p3{background:linear-gradient(135deg,#fed7aa,#fdba74);border-color:var(--color-medal-bronze);color:#9a3412}
.event-position.motion{color:var(--color-accent)}
.event-position.motion i,.event-position.motion svg{width:14px;height:14px}
.event-position .medal-icon{width:18px;height:18px;display:block}
.event-num{color:var(--color-accent);font-weight:var(--weight-medium);min-width:30px;font-size:var(--text-sm)}
.event-date{color:var(--color-text-muted);min-width:50px;font-size:var(--text-sm)}
.event-name{flex:1;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-results{color:var(--color-text-muted);font-size:var(--text-xs);white-space:nowrap}
/* Series results dropdown variant */
.series-results-dropdown{margin-top:var(--space-md);box-shadow:none;border:1px solid var(--color-border)}
.series-results-dropdown .events-dropdown-header{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm)}
.series-results-dropdown .events-dropdown-content{max-height:300px}
@media(max-width:599px){
  .events-dropdown-header{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm)}
  .event-dropdown-item{padding:var(--space-xs) var(--space-sm);gap:var(--space-xs)}
  .event-position{width:24px;height:24px;min-width:24px;font-size:0.65rem}
  .event-position .medal-icon{width:16px;height:16px}
  .event-num{min-width:24px;font-size:var(--text-xs)}
  .event-date{min-width:40px;font-size:var(--text-xs)}
  .event-name{font-size:var(--text-xs)}
  .event-results{display:none}
}

/* ============================================================================
   YEAR DIVIDER - Separator between years in result lists
   ============================================================================ */
.year-divider{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-xs) var(--space-md);
}
.year-label{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  color:var(--color-text-muted);white-space:nowrap;
}
.year-line{flex:1;height:1px;background:var(--color-border-light)}
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}

.table{width:100%;border-collapse:collapse;font-size:var(--text-base);font-variant-numeric:tabular-nums;table-layout:auto}
.table th,.table td{padding:var(--table-cell-padding-y) var(--table-cell-padding-x);text-align:left;border-bottom:1px solid var(--color-divider)}
.table thead{background:var(--color-bg-sunken)}
.table th{font-weight:var(--weight-medium);color:var(--color-text-secondary);font-size:var(--text-sm);position:sticky;top:0;background:var(--color-bg-sunken);white-space:nowrap}
.table tbody tr{transition:background var(--transition-fast)}
.table tbody tr:hover{background:var(--color-bg-hover)}

/* Column Types */
.col-place{width:48px;min-width:48px;text-align:center;font-weight:var(--weight-semibold)}
.col-place--1{color:var(--color-medal-gold)}
.col-place--2{color:var(--color-medal-silver)}
.col-place--3{color:var(--color-medal-bronze)}
.col-rider{font-weight:var(--weight-medium);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-club{color:var(--color-text-secondary);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-time{text-align:right;font-family:var(--font-mono);white-space:nowrap;width:80px;min-width:80px}
.col-diff,.col-gap{text-align:right;color:var(--color-text-tertiary);font-family:var(--font-mono);white-space:nowrap;width:70px;min-width:70px}
.col-points{text-align:right;font-weight:var(--weight-semibold);color:var(--color-accent-text);white-space:nowrap;width:60px}
.col-split{text-align:right;font-family:var(--font-mono);color:var(--color-text-secondary);white-space:nowrap;width:90px;min-width:80px}

/* Portrait: Hide extra columns and compact layout */
@media(orientation:portrait){
  .col-split,.col-diff,.table-col-hide-portrait{display:none!important}
  .table th,.table td{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}
  .col-rider{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Landscape: Show all hidden columns */
@media(orientation:landscape){
  .col-split,.col-diff,.table-col-hide-portrait,
  th.table-col-hide-portrait,td.table-col-hide-portrait,
  .table th.table-col-hide-portrait,.table td.table-col-hide-portrait{
    display:table-cell!important;
    visibility:visible!important;
    opacity:1!important
  }
}

/* Fallback: aspect-ratio based (iOS Safari compatibility) */
@media(min-aspect-ratio:1/1){
  .col-split,.col-diff,.table-col-hide-portrait,
  th.table-col-hide-portrait,td.table-col-hide-portrait,
  .table th.table-col-hide-portrait,.table td.table-col-hide-portrait{
    display:table-cell!important;
    visibility:visible!important;
    opacity:1!important
  }
}

/* Fallback: width > height detection */
@media(min-width:500px) and (max-height:500px){
  .col-split,.col-diff,.table-col-hide-portrait,
  th.table-col-hide-portrait,td.table-col-hide-portrait,
  .table th.table-col-hide-portrait,.table td.table-col-hide-portrait{
    display:table-cell!important;
    visibility:visible!important;
    opacity:1!important
  }
}

/* Variants */
.table--compact th,.table--compact td{padding:calc(var(--table-cell-padding-y) * 0.67) calc(var(--table-cell-padding-x) * 0.75);font-size:var(--text-sm)}
.table--striped tbody tr:nth-child(even){background:transparent}
.table--striped tbody tr:hover{background:var(--color-bg-hover)}
.table--clickable tbody tr{cursor:pointer}
.table--clickable tbody tr:active{background:var(--color-bg-active)}

/* Empty State */
.table-empty{text-align:center;padding:var(--space-2xl);color:var(--color-text-muted)}
.table-empty-icon{font-size:var(--text-3xl);margin-bottom:var(--space-md)}

/* Mobile Card List */
.result-list{display:none}

/* ============================================================================
   MOBILE PORTRAIT: Result Cards (replaces table)
   Shows on max-width:599px in portrait orientation
   ============================================================================ */
@media(max-width:599px) and (orientation:portrait){
  .table-wrapper{display:none}

  .result-list{
    display:block;
    /* Edge-to-edge: break out of card padding using CSS variable */
    margin-left:calc(-1 * var(--card-padding));
    margin-right:calc(-1 * var(--card-padding));
    width:calc(100% + 2 * var(--card-padding));
  }

  .result-item{
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    padding:var(--space-sm) var(--space-md);
    text-decoration:none;
    border-bottom:1px solid var(--color-border);
    background:var(--color-bg-surface);
  }

  .result-item:last-child{
    border-bottom:none;
  }

  .result-place{
    width:36px;
    height:36px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-bg-sunken);
    border-radius:var(--radius-sm);
    font-weight:var(--weight-bold);
    font-size:var(--text-sm);
  }

  .result-place.top-3{
    background:var(--color-accent-light);
  }

  .result-info{
    flex:1;
    min-width:0;
    overflow:hidden;
  }

  .result-name{
    font-weight:var(--weight-medium);
    color:var(--color-text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .result-club{
    font-size:var(--text-sm);
    color:var(--color-text-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .result-time-col{
    text-align:right;
    flex-shrink:0;
  }

  .time-value{
    font-family:var(--font-mono);
    font-weight:var(--weight-medium);
  }

  .time-behind-small{
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--color-text-muted);
  }

  /* Split times in mobile cards */
  .result-item-splits{
    flex-wrap:wrap;
  }

  .result-splits-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-xs);
    margin-top:var(--space-xs);
    width:100%;
  }

  .result-split-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--color-bg-sunken);
    padding:var(--space-xs) var(--space-sm);
    border-radius:var(--radius-sm);
    min-width:60px;
  }

  .result-split-item .split-label{
    font-size:var(--text-xs);
    color:var(--color-text-muted);
    font-weight:var(--weight-medium);
  }

  .result-split-item .split-value{
    font-family:var(--font-mono);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    color:var(--color-text-primary);
  }

  .result-split-item .split-rank{
    font-size:var(--text-xs);
    color:var(--color-text-tertiary);
  }
}
/* Container */
.container{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--space-md)}

/* Display */
.hidden{display:none!important}
.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}

/* Grid Columns */
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
@media(min-width:768px){.gs-md-grid-cols-4{grid-template-columns:repeat(4,1fr)}}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}

.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}
.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}
.ml-auto{margin-left:auto}
.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}

.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}
.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-4xl{font-size:4rem}
.font-normal{font-weight:normal}.font-medium{font-weight:var(--weight-medium)}.font-semibold{font-weight:var(--weight-semibold)}.font-bold{font-weight:var(--weight-bold)}
.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent-text)}
.text-center{text-align:center}.text-right{text-align:right}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.no-underline{text-decoration:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(orientation:portrait){.hide-portrait{display:none!important}}
@media(orientation:landscape){.hide-landscape{display:none!important}}
@media(max-width:599px){.hide-mobile{display:none!important}}
@media(min-width:900px){.hide-desktop{display:none!important}}

/* Toast Notifications */
.toast-container{position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:10000;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}
.toast{padding:var(--space-md) var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-weight:var(--weight-medium);box-shadow:var(--shadow-lg);transform:translateX(100%);opacity:0;transition:all 0.3s ease;pointer-events:auto}
.toast.visible{transform:translateX(0);opacity:1}
.toast-success{background:var(--color-success-bg,rgba(34,197,94,0.15));border-color:var(--color-success,#22c55e);color:var(--color-success,#22c55e)}
.toast-error{background:var(--color-error-bg,rgba(239,68,68,0.15));border-color:var(--color-error,#ef4444);color:var(--color-error,#ef4444)}
.toast-warning{background:var(--color-warning-bg,rgba(234,179,8,0.15));border-color:var(--color-warning,#eab308);color:var(--color-warning,#eab308)}
.toast-info{background:var(--color-accent-light,rgba(59,130,246,0.15));border-color:var(--color-accent,#3b82f6);color:var(--color-accent,#3b82f6)}

/* Registration Participant Cards */
.registration-participant{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-sm)}
.participant-avatar{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;border-radius:var(--radius-full);font-weight:var(--weight-bold)}
.participant-info{flex:1;min-width:0}
.participant-name{display:block;font-weight:var(--weight-medium)}
.participant-class{display:block;padding:var(--space-xs) var(--space-sm);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-primary);margin-top:var(--space-2xs)}
.participant-price{font-weight:var(--weight-semibold);color:var(--color-accent)}
.participant-remove{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.participant-remove:hover{background:var(--color-error-bg,rgba(239,68,68,0.1));border-color:var(--color-error,#ef4444);color:var(--color-error,#ef4444)}

/* Registration Summary */
.registration-summary{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-lg)}
.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}
.summary-row span{font-size:var(--text-lg)}
.summary-row strong{font-size:var(--text-xl);color:var(--color-accent)}

/* ==============================================
   LAYOUT UTILITIES (for replacing inline flex/grid)
   ============================================== */
.justify-end{justify-content:flex-end}
.justify-start{justify-content:flex-start}
.flex-1{flex:1}
.flex-2{flex:2}
.w-full{width:100%}
.rotate-90{transform:rotate(90deg)}
.flex-shrink-0{flex-shrink:0}
.nowrap{white-space:nowrap}
.icon-sm{width:16px;height:16px}
.icon-md{width:20px;height:20px}
.icon-lg{width:24px;height:24px}
.icon-xl{width:48px;height:48px}
.icon-2xl{width:64px;height:64px}
.code{background:var(--color-bg-sunken);padding:2px 6px;border-radius:4px}
.inline{display:inline}
.align-middle{vertical-align:middle}
.mr-xs{margin-right:var(--space-xs)}.mr-sm{margin-right:var(--space-sm)}
.ml-xs{margin-left:var(--space-xs)}
.text-error{color:var(--color-error)}
.text-warning{color:var(--color-warning)}
.text-success{color:var(--color-success)}
.text-info{color:var(--color-info)}
.bg-error{background:var(--color-error-light);border-color:var(--color-error)}
.color-accent{color:var(--color-accent)}
.cursor-pointer{cursor:pointer}

/* Admin form highlight */
.admin-form-group--highlight{background:var(--color-bg-secondary);padding:var(--space-md);border-radius:var(--radius-md)}

/* Checkbox chip (for sponsor selection etc) */
.checkbox-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--color-bg-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm)}

/* Additional icon size */
.icon-xs{width:14px;height:14px}

/* Padding utilities */
.p-0{padding:0}

/* Min-width utilities */
.min-w-120{min-width:120px}
.min-w-140{min-width:140px}
.min-w-200{min-width:200px}
.w-60{width:60px}

/* Table column utilities */
.col-fixed{display:table-cell!important;visibility:visible!important}

/* Grid span utilities */
.col-span-2{grid-column:span 2}

/* Stat card icon backgrounds */
.stat-icon-error{background:rgba(239,68,68,0.1);color:var(--color-error)}
.stat-icon-warning{background:var(--color-warning-light,rgba(234,179,8,0.1));color:var(--color-warning,#ca8a04)}
.stat-icon-success{background:var(--color-success-light);color:var(--color-success)}
.stat-icon-accent{background:rgba(245,158,11,0.1);color:var(--color-accent)}
.stat-icon-info{background:rgba(59,130,246,0.1);color:#3b82f6}

/* Grid auto-fill utilities */
.grid-auto-280{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}
.grid-auto-250{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg)}
.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.grid-1-col{display:grid;grid-template-columns:1fr;gap:var(--space-md)}

/* ==============================================
   LOGO/PREVIEW BOX (for branding page)
   ============================================== */
.logo-preview-box{width:100%;height:80px;background:var(--color-bg-sunken);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;border:2px dashed var(--color-border);transition:border-color 0.2s}
.logo-preview-box:hover{border-color:var(--color-accent)}
.logo-preview-box img{max-width:100%;max-height:100%;object-fit:contain}
.logo-preview-placeholder{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ==============================================
   DEVICE/SETTINGS SECTIONS (branding page)
   ============================================== */
.device-settings{padding:var(--space-lg);background:var(--color-bg-surface);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}
.device-settings:last-child{margin-bottom:0}
.device-settings-header{margin:0 0 var(--space-md) 0;display:flex;align-items:center;gap:var(--space-sm)}
.device-settings--blue{border-left:4px solid #3B9EFF}
.device-settings--orange{border-left:4px solid #F59E0B}
.device-settings--green{border-left:4px solid #10B981}
.device-settings--purple{border-left:4px solid #8B5CF6}
.device-settings small{display:block;margin-top:var(--space-sm);opacity:0.7;font-size:var(--text-xs)}

/* Form label block style */
.form-label-block{display:block;font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}

/* ==============================================
   INFO BOX (for contextual info)
   ============================================== */
.info-box{padding:var(--space-md);background:var(--color-bg-sunken);border-radius:var(--radius-md);border:1px solid var(--color-border)}
.info-box p{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;align-items:flex-start;gap:var(--space-sm)}
.info-box svg,.info-box i{width:16px;height:16px;margin-top:2px;flex-shrink:0}

/* ==============================================
   MODAL UTILITIES (for media picker etc.)
   ============================================== */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
.modal.active{display:flex!important}
.modal-content{background:var(--color-bg-surface);border-radius:var(--radius-lg);max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--color-border)}
.modal-header h3{margin:0;font-size:var(--text-lg)}
.modal-close{background:none;border:none;cursor:pointer;padding:var(--space-sm);color:var(--color-text-secondary)}
.modal-body{padding:var(--space-lg);overflow-y:auto;flex:1}
.modal-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);background:var(--color-bg-sunken)}

/* Media grid for picker */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-sm)}
.media-item{cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);padding:var(--space-sm);transition:border-color 0.2s;background:var(--color-bg-surface)}
.media-item:hover{border-color:var(--color-accent);background:var(--color-bg-elevated)}
.media-item img{width:100%;height:80px;object-fit:contain;background:var(--color-bg-sunken);border-radius:var(--radius-sm)}
.media-item-name{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* ==============================================
   SAKNADE UTILITY-KLASSER (2024-12-23)
   ============================================== */

/* Margin - All Sides */
.m-0{margin:0}
.m-auto{margin:0 auto}
.mt-0{margin-top:0}
.mt-xl{margin-top:var(--space-xl)}
.mb-xs{margin-bottom:var(--space-xs)}
.ml-sm{margin-left:var(--space-sm)}
.ml-md{margin-left:var(--space-md)}
.mr-md{margin-right:var(--space-md)}

/* Padding - Directional */
.pt-sm{padding-top:var(--space-sm)}
.pt-md{padding-top:var(--space-md)}
.pt-lg{padding-top:var(--space-lg)}
.pb-sm{padding-bottom:var(--space-sm)}
.pb-md{padding-bottom:var(--space-md)}
.pb-lg{padding-bottom:var(--space-lg)}

/* Flex - Additional */
.flex-row{display:flex;flex-direction:row}
.items-stretch{align-items:stretch}
.justify-around{justify-content:space-around}
.flex-nowrap{flex-wrap:nowrap}
.flex-auto{flex:auto}
.flex-none{flex:none}
.gap-xl{gap:var(--space-xl)}
.gap-0{gap:0}

/* Flex Combinations */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col-center{display:flex;flex-direction:column;align-items:center}

/* Text - Additional */
.text-left{text-align:left}
.text-white{color:white}
.text-black{color:black}
.text-3xl{font-size:var(--text-3xl,1.875rem)}

/* Icon Sizes - Additional */
.icon-16{width:16px;height:16px}
.icon-20{width:20px;height:20px}
.icon-32{width:32px;height:32px}
.icon-40{width:40px;height:40px}
.icon-80{width:80px;height:80px}
.icon-120{width:120px;height:120px}
.icon-160{width:160px;height:160px}

/* Border Utilities */
.border{border:1px solid var(--color-border)}
.border-t{border-top:1px solid var(--color-border)}
.border-b{border-bottom:1px solid var(--color-border)}
.border-l{border-left:1px solid var(--color-border)}
.border-r{border-right:1px solid var(--color-border)}
.border-2{border-width:2px}
.border-none{border:none}

/* Border Radius */
.rounded-none{border-radius:0}
.rounded-sm{border-radius:var(--radius-sm)}
.rounded{border-radius:var(--radius-md)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-full{border-radius:50%}

/* Position */
.static{position:static}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}

/* Width/Height */
.w-auto{width:auto}
.h-full{height:100%}
.h-auto{height:auto}
.min-w-0{min-width:0}
.max-w-full{max-width:100%}

/* Overflow */
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-visible{overflow:visible}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}

/* Background */
.bg-transparent{background:transparent}
.bg-white{background:white}
.bg-surface{background:var(--color-bg-surface)}
.bg-elevated{background:var(--color-bg-elevated)}
.bg-sunken{background:var(--color-bg-sunken)}

/* Shadow */
.shadow-none{box-shadow:none}
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}

/* Opacity */
.opacity-0{opacity:0}
.opacity-50{opacity:0.5}
.opacity-70{opacity:0.7}
.opacity-100{opacity:1}

/* Interaction */
.pointer-events-none{pointer-events:none}
.pointer-events-auto{pointer-events:auto}

/* Z-Index */
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}

/* Responsive Modifiers */
@media(max-width:768px){
  .mobile\:hidden{display:none}
  .mobile\:block{display:block}
  .mobile\:flex-col{flex-direction:column}
  .mobile\:text-center{text-align:center}
}
@media(min-width:769px){
  .desktop\:hidden{display:none}
  .desktop\:block{display:block}
}
/* ========================================
   THEHUB BADGE DESIGN SYSTEM
   Inspired by: Awakenings
   Use: Series, Events, Sponsors
   ======================================== */

/* ===== CORE BADGE GRID ===== */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl, 2rem);
    padding: var(--space-xl, 2rem) 0;
}

@media (min-width: 600px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .badge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .badge-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== BOLD GRADIENT BADGE (Primary Style) ===== */
.badge-bold {
    position: relative;
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--badge-gradient-start, #004A98) 0%, var(--badge-gradient-end, #001f3f) 100%);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
    display: block;
    color: white;
}

/* Shimmer effect on hover */
.badge-bold::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.15) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.badge-bold:hover::before {
    opacity: 1;
}

/* Hover lift effect */
.badge-bold:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Active/pressed state */
.badge-bold:active {
    transform: translateY(-4px) scale(1.01);
}

/* ===== BADGE LOGO CONTAINER ===== */
.badge-logo-container {
    position: relative;
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl, 2rem);
    z-index: 2;
}

.badge-logo {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.badge-bold:hover .badge-logo {
    transform: scale(1.05);
}

/* Fallback icon when no logo */
.badge-logo-placeholder {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* ===== BADGE INFO SECTION ===== */
.badge-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg, 1.5rem);
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.8) 50%,
        transparent 100%
    );
    z-index: 3;
}

/* ===== DISCIPLINE/CATEGORY BADGE ===== */
.badge-discipline {
    display: inline-block;
    padding: 4px 12px;
    background: var(--badge-accent, rgba(97, 206, 112, 0.9));
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    margin-bottom: var(--space-xs, 0.25rem);
    backdrop-filter: blur(4px);
}

/* Accent color variants */
.badge-bold[data-accent="gold"] .badge-discipline,
.badge-discipline[data-accent="gold"] {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
}

.badge-bold[data-accent="blue"] .badge-discipline,
.badge-discipline[data-accent="blue"] {
    background: rgba(0, 74, 152, 0.9);
}

.badge-bold[data-accent="green"] .badge-discipline,
.badge-discipline[data-accent="green"] {
    background: rgba(97, 206, 112, 0.9);
}

.badge-bold[data-accent="orange"] .badge-discipline,
.badge-discipline[data-accent="orange"] {
    background: rgba(255, 107, 53, 0.9);
}

.badge-bold[data-accent="purple"] .badge-discipline,
.badge-discipline[data-accent="purple"] {
    background: rgba(139, 92, 246, 0.9);
}

.badge-bold[data-accent="red"] .badge-discipline,
.badge-discipline[data-accent="red"] {
    background: rgba(239, 68, 68, 0.9);
}

.badge-bold[data-accent="teal"] .badge-discipline,
.badge-discipline[data-accent="teal"] {
    background: rgba(20, 184, 166, 0.9);
}

/* ===== BADGE TITLE ===== */
.badge-title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2xs, 0.125rem);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ===== BADGE META INFO ===== */
.badge-meta {
    font-size: var(--text-xs, 0.75rem);
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    margin-bottom: var(--space-sm, 0.5rem);
}

/* ===== BADGE CTA BUTTON ===== */
.badge-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    padding: 8px 16px;
    background: rgba(97, 206, 112, 0.2);
    border: 1px solid rgba(97, 206, 112, 0.5);
    color: var(--color-success);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.badge-bold:hover .badge-cta {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.badge-cta-arrow {
    transition: transform 0.2s ease;
}

.badge-bold:hover .badge-cta-arrow {
    transform: translateX(4px);
}

/* ===== SPONSOR BADGE (sidebar/ad placement) ===== */
.badge-sponsor {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    border-radius: 12px;
    overflow: hidden;
    padding: var(--space-md, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
}

.badge-sponsor:hover {
    border-color: var(--color-accent, #61CE70);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.badge-sponsor-logo {
    max-width: 70%;
    max-height: 60%;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.badge-sponsor:hover .badge-sponsor-logo {
    opacity: 1;
}

.badge-sponsor-label {
    position: absolute;
    top: var(--space-xs, 0.25rem);
    right: var(--space-xs, 0.25rem);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}

/* Sponsor tier sizes */
.badge-sponsor[data-tier="title"] {
    aspect-ratio: 21/9;
}

.badge-sponsor[data-tier="gold"] {
    aspect-ratio: 16/9;
}

.badge-sponsor[data-tier="silver"],
.badge-sponsor[data-tier="bronze"] {
    aspect-ratio: 3/2;
}

/* ===== EVENT HEADER BADGE (wide format) ===== */
.badge-event-header {
    position: relative;
    aspect-ratio: 21/9;
    background: linear-gradient(135deg, var(--badge-gradient-start, #004A98) 0%, var(--badge-gradient-end, #001f3f) 100%);
    border-radius: 16px;
    overflow: hidden;
    padding: var(--space-xl, 2rem);
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--space-xl, 2rem);
}

.badge-event-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(255,255,255,0.03) 20px,
            rgba(255,255,255,0.03) 40px
        );
    pointer-events: none;
}

.badge-event-header-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.badge-event-header .badge-title {
    font-size: var(--text-3xl, 1.875rem);
    margin-bottom: var(--space-sm, 0.5rem);
}

.badge-event-header .badge-meta {
    font-size: var(--text-base, 1rem);
}

.badge-event-header-sponsors {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--space-md, 1rem);
    align-items: center;
    padding: var(--space-md, 1rem);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border-radius: 8px;
}

.badge-event-sponsor-logo {
    height: 40px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.badge-event-sponsor-logo:hover {
    opacity: 1;
}

/* ===== SERIES HEADER BADGE ===== */
.badge-series-header {
    position: relative;
    aspect-ratio: 3/1;
    background: linear-gradient(135deg, var(--badge-gradient-start, #004A98) 0%, var(--badge-gradient-end, #001f3f) 100%);
    border-radius: 16px;
    overflow: hidden;
    padding: var(--space-xl, 2rem);
    display: flex;
    align-items: center;
    gap: var(--space-xl, 2rem);
    margin-bottom: var(--space-xl, 2rem);
}

.badge-series-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 30px,
            rgba(255,255,255,0.02) 30px,
            rgba(255,255,255,0.02) 60px
        );
    pointer-events: none;
}

.badge-series-header-logo {
    position: relative;
    z-index: 2;
    max-height: 100%;
    max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.badge-series-header-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

/* ===== SPONSOR GRID LAYOUTS ===== */
.sponsor-badges {
    display: grid;
    gap: var(--space-md, 1rem);
    margin: var(--space-lg, 1.5rem) 0;
}

/* Sidebar sponsor grid (vertical) */
.sidebar-section .sponsor-grid,
.sponsor-grid-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md, 1rem);
}

/* Content area sponsor grid (horizontal) */
.content-sponsors,
.sponsor-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md, 1rem);
    padding: var(--space-xl, 2rem) 0;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

/* Footer sponsor grid */
.footer-sponsors,
.sponsor-grid-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl, 2rem);
    flex-wrap: wrap;
    padding: var(--space-xl, 2rem) 0;
    opacity: 0.7;
}

.footer-sponsors .badge-sponsor-logo,
.sponsor-grid-footer .badge-sponsor-logo {
    height: 30px;
    width: auto;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 599px) {
    .badge-bold {
        aspect-ratio: 1;
    }

    .badge-event-header {
        aspect-ratio: 4/3;
        flex-direction: column;
        align-items: stretch;
    }

    .badge-event-header-sponsors {
        margin-top: var(--space-md, 1rem);
        flex-wrap: wrap;
        justify-content: center;
    }

    .badge-series-header {
        aspect-ratio: 4/3;
        flex-direction: column;
        text-align: center;
    }

    .badge-series-header-logo {
        max-height: 80px;
    }
}

/* ===== LIGHT THEME ADJUSTMENTS ===== */
[data-theme="light"] .badge-sponsor {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .badge-sponsor-label {
    color: rgba(0,0,0,0.4);
}

/* ===== DARK THEME ADJUSTMENTS ===== */
[data-theme="dark"] .badge-sponsor {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

[data-theme="dark"] .badge-sponsor-logo {
    filter: brightness(1.1);
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    50% {
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
}

.badge-bold.badge-featured {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* ===== BADGE STATUS INDICATORS ===== */
.badge-status {
    position: absolute;
    top: var(--space-md, 1rem);
    right: var(--space-md, 1rem);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    z-index: 4;
}

.badge-status-live {
    background: var(--color-error);
    color: white;
    animation: badge-pulse 1s ease-in-out infinite;
}

.badge-status-upcoming {
    background: #f59e0b;
    color: white;
}

.badge-status-completed {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
}

/* ===== SKELETON LOADING STATE ===== */
.badge-skeleton {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.badge-skeleton .badge-logo-container,
.badge-skeleton .badge-info {
    visibility: hidden;
}
/**
 * TheHUB V3 - PWA Styles
 * Styles for PWA-specific UI elements + Bottom Navigation
 */

/* ========== BOTTOM NAVIGATION (nav-bottom) ========== */
/* Base styles - always hidden on desktop, shown on mobile via critical-inline.css */
.nav-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xs) var(--space-sm);
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

@media (max-width: 1023px) {
  .nav-bottom {
    display: flex;
    justify-content: space-around;
  }
  body {
    padding-bottom: var(--mobile-nav-height);
  }
}

.nav-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  position: relative;
}

.nav-bottom-item:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.nav-bottom-item.is-active {
  color: var(--color-accent);
}

.nav-bottom-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.nav-bottom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bottom-icon svg {
  width: 24px;
  height: 24px;
}

.nav-bottom-label {
  font-size: 10px;
  font-weight: 500;
}

/* ========== SAFE AREA HANDLING (Notch, etc) ========== */
/* NOTE: Header safe-area is now ONLY applied in standalone PWA mode (see below)
   to prevent the header from becoming too tall in regular browser mode */

@supports (padding-top: env(safe-area-inset-top)) {
  /* Bottom nav needs safe-area in all modes for home indicator */
  .mobile-nav,
  .nav-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Side padding for landscape notch devices */
  .main-content {
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
  }
}

/* ========== PWA INSTALLED STATE ========== */
body.pwa-installed .header-install,
body.pwa-installed .pwa-install-prompt {
  display: none !important;
}

/* Hide browser-specific UI hints when installed */
body.pwa-installed .browser-hint {
  display: none;
}

/* ========== INSTALL BUTTON ========== */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.pwa-install-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.02);
}

.pwa-install-btn.hidden {
  display: none;
}

.pwa-install-icon {
  font-size: var(--text-md);
}

.hide-mobile {
  display: none;
}

@media (min-width: 600px) {
  .hide-mobile {
    display: inline;
  }
}

/* ========== UPDATE NOTIFICATION ========== */
.pwa-update-notification {
  position: fixed;
  bottom: calc(var(--mobile-nav-height) + var(--space-md) + env(safe-area-inset-bottom, 0px));
  left: var(--space-md);
  right: var(--space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  transform: translateY(120%);
  transition: transform var(--transition-base);
}

.pwa-update-notification.visible {
  transform: translateY(0);
}

.pwa-update-notification span {
  flex: 1;
  font-size: var(--text-sm);
}

.pwa-update-notification button {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}

.pwa-update-notification button:first-of-type {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.pwa-update-notification button:last-of-type {
  background: transparent;
  color: var(--color-text-secondary);
}

@media (min-width: 600px) {
  .pwa-update-notification {
    left: auto;
    right: var(--space-lg);
    max-width: 400px;
  }
}

/* ========== iOS INSTALL MODAL ========== */
.pwa-ios-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.pwa-ios-modal.visible {
  opacity: 1;
}

.pwa-ios-modal-content {
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-xl);
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 400px;
  text-align: center;
  transform: translateY(100%);
  transition: transform var(--transition-base);
  position: relative;
}

.pwa-ios-modal.visible .pwa-ios-modal-content {
  transform: translateY(0);
}

.pwa-ios-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.pwa-ios-modal-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.pwa-ios-modal h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
}

.pwa-ios-modal p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.pwa-ios-modal ol {
  text-align: left;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.pwa-ios-modal li {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.pwa-ios-share-icon {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}

.pwa-ios-modal-btn {
  width: 100%;
  padding: var(--space-md);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

/* ========== INSTALL PROMPT BANNER ========== */
.pwa-install-prompt {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.pwa-install-prompt-icon {
  font-size: var(--text-2xl);
}

.pwa-install-prompt-text {
  flex: 1;
}

.pwa-install-prompt-text strong {
  display: block;
  font-weight: var(--weight-semibold);
}

.pwa-install-prompt-text span {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.pwa-install-prompt-btn {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast);
}

.pwa-install-prompt-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pwa-install-prompt-close {
  padding: var(--space-xs);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.pwa-install-prompt-close:hover {
  opacity: 1;
}

/* ========== STANDALONE MODE ADJUSTMENTS ========== */
@media (display-mode: standalone) {
  /* Header safe-area handling - only in PWA mode, not regular browser
     This adds padding for notch/status bar AND increases height to match */
  .header {
    padding-top: env(safe-area-inset-top, 0px);
    /* Height increases to account for safe-area padding */
    height: calc(var(--header-height, 60px) + env(safe-area-inset-top, 0px));
  }

  /* Hide install prompts */
  .pwa-install-prompt,
  .pwa-install-btn,
  .header-install {
    display: none !important;
  }
}

/* iOS standalone mode */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html {
    height: 100%;
    height: -webkit-fill-available;
  }

  body {
    min-height: 100%;
    min-height: -webkit-fill-available;
    /* Push ALL content below fixed header */
    padding-top: calc(var(--header-height, 60px) + env(safe-area-inset-top, 0px));
  }

  /* Main content fills viewport height minimum */
  .main-content,
  .gs-main-content,
  .welcome-page,
  main {
    min-height: calc(100vh - var(--header-height, 60px) - var(--mobile-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - var(--header-height, 60px) - var(--mobile-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  /* Ensure bottom nav stays fixed at bottom in standalone mode */
  .nav-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    transform: translate3d(0, 0, 0); /* Force GPU layer */
    -webkit-transform: translate3d(0, 0, 0);
  }

  /* Header should also be fixed */
  .header,
  .gs-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* LANDSCAPE standalone mode - hide bottom nav, use sidebar instead */
@media (display-mode: standalone) and (orientation: landscape) and (max-width: 1023px),
       (display-mode: fullscreen) and (orientation: landscape) and (max-width: 1023px) {
  /* Hide bottom nav in landscape - sidebar is used instead */
  .nav-bottom,
  .mobile-nav {
    display: none !important;
  }

  /* Sidebar must be flush to left edge in landscape standalone
     Position accounts for header height + safe-area */
  .sidebar {
    position: fixed !important;
    top: calc(var(--header-height, 60px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: 64px !important;
  }

  /* App layout padding for sidebar */
  .app-layout {
    padding-left: 64px !important;
    margin-left: 0 !important;
  }

  /* Recalculate height without mobile-nav-height */
  .main-content,
  .gs-main-content,
  main {
    min-height: calc(100vh - var(--header-height, 60px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - var(--header-height, 60px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: var(--landscape-sidebar-gap, 4px) !important;
  }
}
/**
 * TheHUB Viewport System
 *
 * Dynamiska viewport-variabler som anpassar sig till skarmens storlek.
 * Hanterar mobile browser chrome (adressfalt som andrar storlek).
 *
 * Anvandning:
 *   height: var(--vh-100);           // 100% av viewport-hojd
 *   height: var(--vh-50);            // 50% av viewport-hojd
 *   height: calc(var(--vh-100) - 60px); // Viewport minus header
 *   min-height: var(--map-height);   // Kartans rekommenderade hojd
 *
 * @since 2025-12-14
 */

/* ==========================================================================
   VIEWPORT TOKENS - Sätts av JavaScript, fallback till CSS units
   ========================================================================== */

:root {
    /* Dynamiska viewport-variabler (uppdateras av JS) */
    /* Fallback till moderna CSS units om JS inte laddat */
    --vh: 1vh;
    --vw: 1vw;

    /* Viewport-hojder (i procent) */
    --vh-100: calc(var(--vh) * 100);
    --vh-90: calc(var(--vh) * 90);
    --vh-80: calc(var(--vh) * 80);
    --vh-75: calc(var(--vh) * 75);
    --vh-70: calc(var(--vh) * 70);
    --vh-60: calc(var(--vh) * 60);
    --vh-50: calc(var(--vh) * 50);
    --vh-40: calc(var(--vh) * 40);
    --vh-30: calc(var(--vh) * 30);
    --vh-25: calc(var(--vh) * 25);
    --vh-20: calc(var(--vh) * 20);

    /* Viewport-bredder (i procent) */
    --vw-100: calc(var(--vw) * 100);
    --vw-50: calc(var(--vw) * 50);
    --vw-33: calc(var(--vw) * 33.333);
    --vw-25: calc(var(--vw) * 25);

    /* Komponent-specifika hojder (kan overridas via branding) */
    --map-height-mobile: calc(var(--vh) * 60);
    --map-height-tablet: calc(var(--vh) * 65);
    --map-height-desktop: calc(var(--vh) * 70);
    --map-min-height: 400px;
    --map-max-height: 800px;

    /* Hero-sektioner */
    --hero-height-mobile: calc(var(--vh) * 50);
    --hero-height-desktop: calc(var(--vh) * 60);

    /* Fullskarm minus header */
    --content-height: calc(var(--vh-100) - var(--header-height, 60px));
    --content-height-with-nav: calc(var(--vh-100) - var(--header-height, 60px) - var(--mobile-nav-height, 64px));
}

/* Modern browsers: Anvand dynamic viewport units om tillgangliga */
@supports (height: 100dvh) {
    :root {
        --vh: 1dvh;
        --vw: 1dvw;
    }
}

/* ==========================================================================
   RESPONSIVE MAP HEIGHTS
   ========================================================================== */

/* Standardklass for kartor - anpassar sig till viewport */
.map-viewport {
    height: var(--map-height-mobile);
    min-height: var(--map-min-height);
    max-height: var(--map-max-height);
    width: 100%;
    transition: height 0.3s ease;
}

@media (min-width: 768px) {
    .map-viewport {
        height: var(--map-height-tablet);
    }
}

@media (min-width: 1024px) {
    .map-viewport {
        height: var(--map-height-desktop);
    }
}

/* Variant: Karta som fyller tillgangligt utrymme */
.map-viewport--fill {
    height: var(--content-height);
    max-height: none;
}

@media (max-width: 899px) {
    .map-viewport--fill {
        height: var(--content-height-with-nav);
    }
}

/* Variant: Karta med fast aspekt-ratio */
.map-viewport--16x9 {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: var(--map-min-height);
    max-height: var(--map-max-height);
}

.map-viewport--4x3 {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: var(--map-min-height);
    max-height: var(--map-max-height);
}

/* ==========================================================================
   UTILITY CLASSES - Viewport-baserade hojder
   ========================================================================== */

/* Fasta viewport-hojder */
.h-vh-100 { height: var(--vh-100); }
.h-vh-90 { height: var(--vh-90); }
.h-vh-80 { height: var(--vh-80); }
.h-vh-75 { height: var(--vh-75); }
.h-vh-70 { height: var(--vh-70); }
.h-vh-60 { height: var(--vh-60); }
.h-vh-50 { height: var(--vh-50); }
.h-vh-40 { height: var(--vh-40); }
.h-vh-30 { height: var(--vh-30); }

/* Min-hojder */
.min-h-vh-100 { min-height: var(--vh-100); }
.min-h-vh-75 { min-height: var(--vh-75); }
.min-h-vh-50 { min-height: var(--vh-50); }

/* Max-hojder */
.max-h-vh-100 { max-height: var(--vh-100); }
.max-h-vh-75 { max-height: var(--vh-75); }
.max-h-vh-50 { max-height: var(--vh-50); }

/* Content-hojd (minus header) */
.h-content { height: var(--content-height); }
.min-h-content { min-height: var(--content-height); }

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */

.hero-viewport {
    height: var(--hero-height-mobile);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hero-viewport {
        height: var(--hero-height-desktop);
        min-height: 400px;
    }
}

/* ==========================================================================
   SCROLLABLE CONTAINERS
   ========================================================================== */

/* Scrollbar container som fyller tillganglig hojd */
.scroll-viewport {
    height: var(--content-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

@media (max-width: 899px) {
    .scroll-viewport {
        height: var(--content-height-with-nav);
    }
}

/* ==========================================================================
   MOBILE-SPECIFIC ADJUSTMENTS
   ========================================================================== */

/* iOS Safari safe area handling */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    :root {
        --safe-area-top: env(safe-area-inset-top);
        --safe-area-bottom: env(safe-area-inset-bottom);
        --safe-area-left: env(safe-area-inset-left);
        --safe-area-right: env(safe-area-inset-right);
    }

    .map-viewport--fill,
    .scroll-viewport {
        padding-bottom: var(--safe-area-bottom);
    }
}

/* ==========================================================================
   DATA ATTRIBUTES FOR JS CONTROL
   ========================================================================== */

/* Tillat JS att styra specifika elements hojd */
[data-vh-height] {
    height: calc(var(--vh) * var(--element-vh, 50));
}

[data-vh-min-height] {
    min-height: calc(var(--vh) * var(--element-vh-min, 30));
}

[data-vh-max-height] {
    max-height: calc(var(--vh) * var(--element-vh-max, 80));
}