/*
 * Fantasy Football AI Design System
 * Professional Light/Dark Mode CSS Framework
 * Version 1.0 - Production Ready with Tailwind Base Styles
 */

/* ==========================================================================
   Tailwind CSS Base Styles (Essential for Production)
   ========================================================================== */

/* Modern CSS Reset */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before, ::after {
  --tw-content: '';
}

/* Document Setup */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  margin: 0;
  line-height: inherit;
}

/* Typography Reset */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

/* Form Elements */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

/* Utility Classes */
.hidden {
  display: none;
}

.flex {
  display: flex;
}

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

.justify-between {
  justify-content: space-between;
}

/* Essential Grid Layout Classes - CRITICAL FIX */
.grid {
  display: grid;
}

/* Fantasy Football Gradient Backgrounds */
.gradient-fantasy {
  background: linear-gradient(135deg, var(--ff-primary-500), var(--ff-secondary-500));
}


.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.shadow-fantasy-lg {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover-lift {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-6 {
  gap: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

/* Responsive Grid Classes */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.h-16 {
  height: 4rem;
}

.w-10 {
  width: 2.5rem;
}

.h-10 {
  height: 2.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Gradient color stops */
.from-ff-primary-500 {
  --tw-gradient-from: #667eea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(102 126 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-ff-secondary-500 {
  --tw-gradient-to: #764ba2 var(--tw-gradient-to-position);
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Additional Spacing and Layout */
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.block {
  display: block;
}

.relative {
  position: relative;
}

.group {
  /* Group utility for hover states */
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.opacity-75 {
  opacity: 0.75;
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.rounded-lg {
  border-radius: 0.5rem;
}

/* Responsive Design Base */
.md\:block {
  display: block;
}

.md\:hidden {
  display: none;
}

.sm\:inline {
  display: inline;
}

@media (min-width: 640px) {
  .sm\:inline {
    display: inline;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:hidden {
    display: none;
  }
}

/* ==========================================================================
   CSS Custom Properties - Light Mode (Default)
   ========================================================================== */

:root {
  /* Primary Fantasy Brand Colors */
  --ff-primary-50: #f0f4ff;
  --ff-primary-100: #e0e8ff;
  --ff-primary-200: #c7d2fe;
  --ff-primary-300: #a5b4fc;
  --ff-primary-400: #818cf8;
  --ff-primary-500: #667eea; /* Main brand */
  --ff-primary-600: #5b21b6;
  --ff-primary-700: #764ba2;
  --ff-primary-800: #4c1d95;
  --ff-primary-900: #1e1b4b;

  /* Secondary Brand Colors */
  --ff-secondary-50: #f5f3ff;
  --ff-secondary-100: #ede9fe;
  --ff-secondary-200: #ddd6fe;
  --ff-secondary-300: #c4b5fd;
  --ff-secondary-400: #a78bfa;
  --ff-secondary-500: #764ba2; /* Secondary brand */
  --ff-secondary-600: #7c3aed;
  --ff-secondary-700: #6d28d9;
  --ff-secondary-800: #5b21b6;
  --ff-secondary-900: #4c1d95;

  /* Football Field Green */
  --ff-field-50: #f0fdf4;
  --ff-field-100: #dcfce7;
  --ff-field-200: #bbf7d0;
  --ff-field-300: #86efac;
  --ff-field-400: #4ade80;
  --ff-field-500: #22c55e; /* Success/positive */
  --ff-field-600: #16a34a;
  --ff-field-700: #15803d;
  --ff-field-800: #166534;
  --ff-field-900: #14532d;

  /* NFL Position Colors - Light Mode */
  --ff-qb-color: #dc2626; /* Red */
  --ff-qb-bg: #fef2f2;
  --ff-qb-border: #fecaca;

  --ff-rb-color: #059669; /* Emerald */
  --ff-rb-bg: #ecfdf5;
  --ff-rb-border: #a7f3d0;

  --ff-wr-color: #2563eb; /* Blue */
  --ff-wr-bg: #eff6ff;
  --ff-wr-border: #bfdbfe;

  --ff-te-color: #7c3aed; /* Purple */
  --ff-te-bg: #f5f3ff;
  --ff-te-border: #c4b5fd;

  --ff-k-color: #d97706; /* Amber */
  --ff-k-bg: #fefbeb;
  --ff-k-border: #fde68a;

  --ff-dst-color: #4b5563; /* Gray */
  --ff-dst-bg: #f9fafb;
  --ff-dst-border: #d1d5db;

  /* Alert Colors - Light Mode */
  --ff-success-50: #f0fdf4;
  --ff-success-500: #22c55e;
  --ff-success-700: #15803d;

  --ff-warning-50: #fefce8;
  --ff-warning-500: #eab308;
  --ff-warning-700: #a16207;

  --ff-error-50: #fef2f2;
  --ff-error-500: #ef4444;
  --ff-error-700: #b91c1c;

  --ff-info-50: #eff6ff;
  --ff-info-500: #3b82f6;
  --ff-info-700: #1d4ed8;

  /* Background Colors - Light Mode */
  --ff-bg-primary: #ffffff;
  --ff-bg-secondary: #f8fafc;
  --ff-bg-tertiary: #f1f5f9;
  --ff-bg-elevated: #ffffff;
  --ff-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Surface Colors */
  --ff-surface-primary: #ffffff;
  --ff-surface-secondary: #f8fafc;
  --ff-surface-accent: rgba(102, 126, 234, 0.05);

  /* Text Colors - Light Mode */
  --ff-text-primary: #0f172a;
  --ff-text-secondary: #475569;
  --ff-text-tertiary: #64748b;
  --ff-text-inverse: #ffffff;
  --ff-text-accent: #667eea;

  /* Pigskin Prophet Brand Colors */
  --pp-gold-primary: #D4AF37;
  --pp-gold-light: #F0D060;
  --pp-gold-dark: #B8941E;
  --pp-gold-glow: rgba(212, 175, 55, 0.25);
  --pp-gold-dim: rgba(212, 175, 55, 0.12);
  --pp-navy-primary: #0A1628;
  --pp-navy-light: #1A2A44;
  --pp-navy-medium: #0F1D32;

  /* Pigskin Prophet Tier Colors */
  --pp-tier-elite: #10b981;
  --pp-tier-good: #3b82f6;
  --pp-tier-average: #f59e0b;
  --pp-tier-below: #ef4444;

  /* Pigskin Prophet Typography */
  --pp-font-display: 'Oswald', 'Inter', system-ui, sans-serif;
  --pp-font-accent: 'Cinzel', Georgia, serif;

  /* Typography Variables */
  --ff-font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --ff-font-numeric: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  --ff-font-display: 'Inter', system-ui, sans-serif;

  /* Font Sizes */
  --ff-text-xs: 0.75rem;     /* 12px */
  --ff-text-sm: 0.875rem;    /* 14px */
  --ff-text-base: 1rem;      /* 16px */
  --ff-text-lg: 1.125rem;    /* 18px */
  --ff-text-xl: 1.25rem;     /* 20px */
  --ff-text-2xl: 1.5rem;     /* 24px */
  --ff-text-3xl: 1.875rem;   /* 30px */
  --ff-text-4xl: 2.25rem;    /* 36px */
  --ff-text-5xl: 3rem;       /* 48px */

  /* Line Heights */
  --ff-leading-tight: 1.25;
  --ff-leading-snug: 1.375;
  --ff-leading-normal: 1.5;
  --ff-leading-relaxed: 1.625;

  /* Font Weights */
  --ff-weight-normal: 400;
  --ff-weight-medium: 500;
  --ff-weight-semibold: 600;
  --ff-weight-bold: 700;

  /* Spacing */
  --ff-space-xs: 0.25rem;
  --ff-space-sm: 0.5rem;
  --ff-space-md: 1rem;
  --ff-space-lg: 1.5rem;
  --ff-space-xl: 2rem;
  --ff-space-2xl: 3rem;

  /* Border Radius */
  --ff-radius-sm: 0.25rem;
  --ff-radius-md: 0.5rem;
  --ff-radius-lg: 0.75rem;
  --ff-radius-xl: 1rem;

  /* Shadows */
  --ff-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ff-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ff-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* NFL Team Colors */
  --team-buf: #00338d; /* Bills */
  --team-mia: #008e97; /* Dolphins */
  --team-ne: #002244; /* Patriots */
  --team-nyj: #125740; /* Jets */
  --team-bal: #241773; /* Ravens */
  --team-cin: #fb4f14; /* Bengals */
  --team-cle: #311d00; /* Browns */
  --team-pit: #ffb612; /* Steelers */
  --team-hou: #03202f; /* Texans */
  --team-ind: #002c5f; /* Colts */
  --team-jax: #9f792c; /* Jaguars */
  --team-ten: #4b92db; /* Titans */
  --team-den: #fb4f14; /* Broncos */
  --team-kc: #e31837; /* Chiefs */
  --team-lv: #000000; /* Raiders */
  --team-lac: #0080c6; /* Chargers */
}

/* ==========================================================================
   Dark Mode Theme Override
   ========================================================================== */

[data-theme="dark"] {
  /* Primary Fantasy Brand - Dark Mode */
  --ff-primary-50: #1e1b4b;
  --ff-primary-100: #4c1d95;
  --ff-primary-200: #5b21b6;
  --ff-primary-300: #764ba2;
  --ff-primary-400: #818cf8;
  --ff-primary-500: #a5b4fc; /* Main brand - lighter in dark mode */
  --ff-primary-600: #c7d2fe;
  --ff-primary-700: #e0e8ff;
  --ff-primary-800: #f0f4ff;
  --ff-primary-900: #ffffff;

  /* Secondary Brand - Dark Mode */
  --ff-secondary-50: #4c1d95;
  --ff-secondary-100: #5b21b6;
  --ff-secondary-200: #6d28d9;
  --ff-secondary-300: #7c3aed;
  --ff-secondary-400: #a78bfa;
  --ff-secondary-500: #c4b5fd; /* Secondary brand - lighter */
  --ff-secondary-600: #ddd6fe;
  --ff-secondary-700: #ede9fe;
  --ff-secondary-800: #f5f3ff;
  --ff-secondary-900: #ffffff;

  /* Football Field Green - Dark Mode */
  --ff-field-50: #14532d;
  --ff-field-100: #166534;
  --ff-field-200: #15803d;
  --ff-field-300: #16a34a;
  --ff-field-400: #22c55e;
  --ff-field-500: #4ade80; /* Success - brighter in dark */
  --ff-field-600: #86efac;
  --ff-field-700: #bbf7d0;
  --ff-field-800: #dcfce7;
  --ff-field-900: #f0fdf4;

  /* NFL Position Colors - Dark Mode */
  --ff-qb-color: #fca5a5; /* Lighter red */
  --ff-qb-bg: #7f1d1d;
  --ff-qb-border: #991b1b;

  --ff-rb-color: #6ee7b7; /* Lighter emerald */
  --ff-rb-bg: #064e3b;
  --ff-rb-border: #065f46;

  --ff-wr-color: #93c5fd; /* Lighter blue */
  --ff-wr-bg: #1e3a8a;
  --ff-wr-border: #1d4ed8;

  --ff-te-color: #c4b5fd; /* Lighter purple */
  --ff-te-bg: #5b21b6;
  --ff-te-border: #6d28d9;

  --ff-k-color: #fbbf24; /* Lighter amber */
  --ff-k-bg: #92400e;
  --ff-k-border: #b45309;

  --ff-dst-color: #9ca3af; /* Lighter gray */
  --ff-dst-bg: #374151;
  --ff-dst-border: #4b5563;

  /* Alert Colors - Dark Mode */
  --ff-success-50: #14532d;
  --ff-success-500: #4ade80;
  --ff-success-700: #bbf7d0;

  --ff-warning-50: #713f12;
  --ff-warning-500: #fbbf24;
  --ff-warning-700: #fde68a;

  --ff-error-50: #7f1d1d;
  --ff-error-500: #f87171;
  --ff-error-700: #fca5a5;

  --ff-info-50: #1e3a8a;
  --ff-info-500: #60a5fa;
  --ff-info-700: #93c5fd;

  /* Background Colors - Dark Mode */
  --ff-bg-primary: #0f172a;
  --ff-bg-secondary: #1e293b;
  --ff-bg-tertiary: #334155;
  --ff-bg-elevated: #1e293b;
  --ff-bg-overlay: rgba(0, 0, 0, 0.8);

  /* Surface Colors */
  --ff-surface-primary: #1e293b;
  --ff-surface-secondary: #334155;
  --ff-surface-accent: rgba(165, 180, 252, 0.1);

  /* Text Colors - Dark Mode */
  --ff-text-primary: #f8fafc;
  --ff-text-secondary: #cbd5e1;
  --ff-text-tertiary: #94a3b8;
  --ff-text-inverse: #0f172a;
  --ff-text-accent: #a5b4fc;

  /* Shadows - Dark Mode */
  --ff-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ff-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --ff-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --ff-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Base Theme Transition
   ========================================================================== */

.ff-theme-transition,
.ff-theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Typography System
   ========================================================================== */

/* Font Loading */
body {
  font-family: var(--ff-font-primary);
  line-height: var(--ff-leading-normal);
  color: var(--ff-text-primary);
  background-color: var(--ff-bg-primary);
}

/* Headings */
.ff-h1 {
  font-family: var(--ff-font-display);
  font-size: var(--ff-text-4xl);
  font-weight: var(--ff-weight-bold);
  line-height: var(--ff-leading-tight);
  color: var(--ff-text-primary);
  letter-spacing: -0.025em;
  margin-bottom: var(--ff-space-md);
}

.ff-h2 {
  font-family: var(--ff-font-display);
  font-size: var(--ff-text-3xl);
  font-weight: var(--ff-weight-semibold);
  line-height: var(--ff-leading-tight);
  color: var(--ff-text-primary);
  letter-spacing: -0.015em;
  margin-bottom: var(--ff-space-md);
}

.ff-h3 {
  font-family: var(--ff-font-display);
  font-size: var(--ff-text-2xl);
  font-weight: var(--ff-weight-semibold);
  line-height: var(--ff-leading-snug);
  color: var(--ff-text-primary);
  margin-bottom: var(--ff-space-sm);
}

.ff-h4 {
  font-family: var(--ff-font-display);
  font-size: var(--ff-text-xl);
  font-weight: var(--ff-weight-medium);
  line-height: var(--ff-leading-snug);
  color: var(--ff-text-primary);
  margin-bottom: var(--ff-space-sm);
}

/* Body Text */
.ff-body-lg {
  font-size: var(--ff-text-lg);
  line-height: var(--ff-leading-relaxed);
  color: var(--ff-text-primary);
}

.ff-body {
  font-size: var(--ff-text-base);
  line-height: var(--ff-leading-normal);
  color: var(--ff-text-primary);
}

.ff-body-sm {
  font-size: var(--ff-text-sm);
  line-height: var(--ff-leading-normal);
  color: var(--ff-text-secondary);
}

/* Stats/Numeric Text */
.ff-stat {
  font-family: var(--ff-font-numeric);
  font-weight: var(--ff-weight-bold);
  color: var(--ff-text-accent);
}

.ff-stat-large {
  font-size: var(--ff-text-4xl);
  font-weight: var(--ff-weight-bold);
  line-height: var(--ff-leading-tight);
}

.ff-stat-medium {
  font-size: var(--ff-text-2xl);
  font-weight: var(--ff-weight-semibold);
  line-height: var(--ff-leading-snug);
}

/* ==========================================================================
   Card System
   ========================================================================== */

/* Base Card */
.ff-card {
  background-color: var(--ff-surface-primary);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-sm);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.ff-card:hover {
  box-shadow: var(--ff-shadow-lg);
  transform: translateY(-2px);
}

[data-theme="dark"] .ff-card {
  border-color: rgba(94, 111, 128, 0.3);
}

/* Player Card */
.ff-player-card {
  position: relative;
  padding: var(--ff-space-xl);
  background-color: var(--ff-surface-primary);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-sm);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.ff-player-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ff-primary-500), var(--ff-secondary-500));
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.ff-player-card:hover::before {
  opacity: 1;
}

.ff-player-card:hover {
  box-shadow: var(--ff-shadow-lg);
  transform: translateY(-2px);
}

/* Stats Card */
.ff-stats-card {
  padding: var(--ff-space-xl);
  text-align: center;
  background: var(--ff-surface-accent);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-sm);
}

/* Alert Cards */
.ff-alert-card {
  padding: var(--ff-space-md);
  border-left: 4px solid var(--ff-info-500);
  background-color: var(--ff-surface-primary);
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-sm);
}

.ff-alert-card.success {
  border-left-color: var(--ff-success-500);
  background-color: var(--ff-success-50);
}

.ff-alert-card.warning {
  border-left-color: var(--ff-warning-500);
  background-color: var(--ff-warning-50);
}

.ff-alert-card.error {
  border-left-color: var(--ff-error-500);
  background-color: var(--ff-error-50);
}

/* ==========================================================================
   Button System
   ========================================================================== */

/* Base Button Styles */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-sm);
  padding: var(--ff-space-sm) var(--ff-space-lg);
  border-radius: var(--ff-radius-md);
  font-weight: var(--ff-weight-semibold);
  font-size: var(--ff-text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: none;
  white-space: nowrap;
  user-select: none;
}

/* Primary Button */
.ff-btn-primary {
  background: linear-gradient(135deg, var(--ff-primary-500), var(--ff-secondary-500));
  color: var(--ff-text-inverse);
  box-shadow: var(--ff-shadow-sm);
}

.ff-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ff-shadow-lg);
  background: linear-gradient(135deg, var(--ff-primary-600), var(--ff-secondary-600));
  color: var(--ff-text-inverse);
  text-decoration: none;
}

.ff-btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--ff-shadow-sm);
}

/* Secondary Button */
.ff-btn-secondary {
  background: transparent;
  color: var(--ff-primary-500);
  border: 2px solid var(--ff-primary-500);
  box-shadow: var(--ff-shadow-sm);
}

.ff-btn-secondary:hover {
  background: var(--ff-primary-500);
  color: var(--ff-text-inverse);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Danger Button */
.ff-btn-danger {
  background: var(--ff-error-500);
  color: var(--ff-text-inverse);
  box-shadow: var(--ff-shadow-sm);
}

.ff-btn-danger:hover {
  background: var(--ff-error-700);
  transform: translateY(-2px);
  color: var(--ff-text-inverse);
  text-decoration: none;
}

/* Success Button */
.ff-btn-success {
  background: var(--ff-success-500);
  color: var(--ff-text-inverse);
  box-shadow: var(--ff-shadow-sm);
}

.ff-btn-success:hover {
  background: var(--ff-success-700);
  transform: translateY(-2px);
  color: var(--ff-text-inverse);
  text-decoration: none;
}

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

.ff-btn-lg {
  padding: var(--ff-space-md) var(--ff-space-2xl);
  font-size: var(--ff-text-base);
}

/* Disabled Button */
.ff-btn:disabled,
.ff-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

/* ==========================================================================
   Navigation System
   ========================================================================== */

/* Main Navigation */
.ff-nav {
  background: linear-gradient(135deg, var(--ff-primary-500), var(--ff-secondary-500));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--ff-shadow-md);
}

.ff-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--ff-space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

/* Nav Links */
.ff-nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: var(--ff-space-sm) var(--ff-space-md);
  border-radius: var(--ff-radius-md);
  font-weight: var(--ff-weight-medium);
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: var(--ff-space-sm);
  font-size: var(--ff-text-sm);
}

.ff-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.ff-nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
  box-shadow: var(--ff-shadow-sm);
}

/* Navigation Dropdowns */
.ff-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--ff-radius-md);
  box-shadow: var(--ff-shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  z-index: 1000;
  pointer-events: none;
}

.group:hover .ff-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.ff-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ff-space-md);
  padding: var(--ff-space-md);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ff-nav-dropdown-item:last-child {
  border-bottom: none;
}

.ff-nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

/* Logo */
.ff-logo {
  display: flex;
  align-items: center;
  gap: var(--ff-space-sm);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  font-weight: var(--ff-weight-bold);
  font-size: var(--ff-text-lg);
}

.ff-logo:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}

.ff-logo-icon {
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  font-size: var(--ff-text-sm);
}

.ff-logo:hover .ff-logo-icon {
  transform: rotate(360deg);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

/* Input Fields */
.ff-input {
  width: 100%;
  padding: var(--ff-space-sm) var(--ff-space-md);
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--ff-radius-md);
  background: var(--ff-bg-primary);
  color: var(--ff-text-primary);
  font-size: var(--ff-text-base);
  font-family: var(--ff-font-primary);
  transition: all 0.2s ease-in-out;
  box-shadow: var(--ff-shadow-sm);
}

.ff-input:focus {
  outline: none;
  border-color: var(--ff-primary-500);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--ff-shadow-sm);
}

.ff-input::placeholder {
  color: var(--ff-text-tertiary);
}

[data-theme="dark"] .ff-input {
  border-color: rgba(94, 111, 128, 0.4);
}

/* Select Dropdown */
.ff-select {
  width: 100%;
  padding: var(--ff-space-sm) var(--ff-space-md);
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--ff-radius-md);
  background: var(--ff-bg-primary);
  color: var(--ff-text-primary);
  font-size: var(--ff-text-base);
  font-family: var(--ff-font-primary);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--ff-space-sm) center;
  background-size: 1rem;
  padding-right: 2.5rem;
  appearance: none;
}

.ff-select:focus {
  outline: none;
  border-color: var(--ff-primary-500);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Checkbox */
.ff-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-bg-primary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  appearance: none;
  position: relative;
  margin: 0;
  display: inline-block;
}

.ff-checkbox:checked {
  background: var(--ff-primary-500);
  border-color: var(--ff-primary-500);
}

.ff-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
}

.ff-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Form Labels */
.ff-label {
  display: block;
  font-size: var(--ff-text-sm);
  font-weight: var(--ff-weight-medium);
  color: var(--ff-text-secondary);
  margin-bottom: var(--ff-space-xs);
}

/* Form Groups */
.ff-form-group {
  margin-bottom: var(--ff-space-lg);
}

.ff-form-group.error .ff-input,
.ff-form-group.error .ff-select {
  border-color: var(--ff-error-500);
}

.ff-form-group.error .ff-label {
  color: var(--ff-error-500);
}

.ff-form-error {
  color: var(--ff-error-500);
  font-size: var(--ff-text-sm);
  margin-top: var(--ff-space-xs);
}

/* ==========================================================================
   Table System
   ========================================================================== */

/* Data Tables */
.ff-table {
  width: 100%;
  background: var(--ff-surface-primary);
  border-collapse: collapse;
  border-radius: var(--ff-radius-lg);
  overflow: hidden;
  box-shadow: var(--ff-shadow-sm);
}

.ff-table th {
  background: var(--ff-surface-secondary);
  color: var(--ff-text-primary);
  font-weight: var(--ff-weight-semibold);
  font-size: var(--ff-text-sm);
  padding: var(--ff-space-md);
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.ff-table td {
  padding: var(--ff-space-md);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  color: var(--ff-text-primary);
  font-size: var(--ff-text-sm);
}

.ff-table tbody tr:hover {
  background: var(--ff-surface-accent);
}

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

/* Player Stats Table */
.ff-player-table .player-name {
  font-weight: var(--ff-weight-semibold);
  color: var(--ff-text-primary);
}

.ff-player-table .player-team {
  color: var(--ff-text-tertiary);
  font-size: var(--ff-text-xs);
}

.ff-player-table .stat-value {
  font-family: var(--ff-font-numeric);
  font-weight: var(--ff-weight-bold);
  text-align: right;
}

.ff-player-table .positive {
  color: var(--ff-success-500);
}

.ff-player-table .negative {
  color: var(--ff-error-500);
}

/* ==========================================================================
   Position Badge System
   ========================================================================== */

.ff-position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ff-space-xs) var(--ff-space-sm);
  border-radius: var(--ff-radius-md);
  font-size: var(--ff-text-xs);
  font-weight: var(--ff-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 2.5rem;
  transition: all 0.2s ease-in-out;
}

.ff-position-qb {
  background-color: var(--ff-qb-bg);
  color: var(--ff-qb-color);
  border: 1px solid var(--ff-qb-border);
}

.ff-position-rb {
  background-color: var(--ff-rb-bg);
  color: var(--ff-rb-color);
  border: 1px solid var(--ff-rb-border);
}

.ff-position-wr {
  background-color: var(--ff-wr-bg);
  color: var(--ff-wr-color);
  border: 1px solid var(--ff-wr-border);
}

.ff-position-te {
  background-color: var(--ff-te-bg);
  color: var(--ff-te-color);
  border: 1px solid var(--ff-te-border);
}

.ff-position-k {
  background-color: var(--ff-k-bg);
  color: var(--ff-k-color);
  border: 1px solid var(--ff-k-border);
}

.ff-position-dst {
  background-color: var(--ff-dst-bg);
  color: var(--ff-dst-color);
  border: 1px solid var(--ff-dst-border);
}

/* ==========================================================================
   Performance Indicators
   ========================================================================== */

/* Fantasy Performance Indicators */
.ff-performance-positive {
  color: var(--ff-success-500);
  font-weight: var(--ff-weight-bold);
}

.ff-performance-positive::before {
  content: '↗';
  margin-right: var(--ff-space-xs);
  color: var(--ff-success-500);
}

.ff-performance-negative {
  color: var(--ff-error-500);
  font-weight: var(--ff-weight-bold);
}

.ff-performance-negative::before {
  content: '↘';
  margin-right: var(--ff-space-xs);
  color: var(--ff-error-500);
}

.ff-performance-neutral {
  color: var(--ff-text-tertiary);
  font-weight: var(--ff-weight-medium);
}

.ff-performance-neutral::before {
  content: '→';
  margin-right: var(--ff-space-xs);
  color: var(--ff-text-tertiary);
}

/* Fantasy Action Indicators */
.ff-action-start {
  color: var(--ff-success-500);
  font-weight: var(--ff-weight-bold);
  background: var(--ff-success-50);
  padding: var(--ff-space-xs) var(--ff-space-sm);
  border-radius: var(--ff-radius-sm);
  font-size: var(--ff-text-xs);
}

.ff-action-sit {
  color: var(--ff-error-500);
  font-weight: var(--ff-weight-bold);
  background: var(--ff-error-50);
  padding: var(--ff-space-xs) var(--ff-space-sm);
  border-radius: var(--ff-radius-sm);
  font-size: var(--ff-text-xs);
}

.ff-action-flex {
  color: var(--ff-warning-500);
  font-weight: var(--ff-weight-bold);
  background: var(--ff-warning-50);
  padding: var(--ff-space-xs) var(--ff-space-sm);
  border-radius: var(--ff-radius-sm);
  font-size: var(--ff-text-xs);
}

/* ==========================================================================
   Team Colors and Elements
   ========================================================================== */

/* Team Badge Component */
.ff-team-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-sm);
  padding: var(--ff-space-xs) var(--ff-space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--ff-radius-md);
  font-size: var(--ff-text-xs);
  font-weight: var(--ff-weight-medium);
}

.ff-team-logo {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

/* ==========================================================================
   Football Field Effects
   ========================================================================== */

/* Subtle field texture for backgrounds */
.ff-field-texture {
  background-image: 
    linear-gradient(90deg, rgba(34, 197, 94, 0.05) 50%, transparent 50%),
    linear-gradient(rgba(34, 197, 94, 0.02) 50%, transparent 50%);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
}

[data-theme="dark"] .ff-field-texture {
  background-image: 
    linear-gradient(90deg, rgba(74, 222, 128, 0.05) 50%, transparent 50%),
    linear-gradient(rgba(74, 222, 128, 0.02) 50%, transparent 50%);
}

/* Field lines for special sections */
.ff-field-section {
  position: relative;
  padding: var(--ff-space-xl);
  background: var(--ff-bg-secondary);
  border-top: 2px solid var(--ff-success-500);
  border-bottom: 2px solid var(--ff-success-500);
}

.ff-field-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: var(--ff-success-500);
  opacity: 0.3;
  transform: translateX(-50%);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
  }
}

.ff-animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.ff-animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

.ff-animate-pulse-glow {
  animation: pulseGlow 2s infinite;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile Optimizations */
@media (max-width: 768px) {
  .ff-nav-container {
    padding: 0 var(--ff-space-sm);
  }
  
  .ff-card,
  .ff-player-card,
  .ff-stats-card {
    padding: var(--ff-space-md);
  }
  
  .ff-h1 {
    font-size: var(--ff-text-3xl);
  }
  
  .ff-h2 {
    font-size: var(--ff-text-2xl);
  }
  
  .ff-btn {
    padding: var(--ff-space-xs) var(--ff-space-md);
    font-size: var(--ff-text-xs);
  }
  
  .ff-table th,
  .ff-table td {
    padding: var(--ff-space-sm);
    font-size: var(--ff-text-xs);
  }
}

@media (max-width: 480px) {
  .ff-h1 {
    font-size: var(--ff-text-2xl);
  }
  
  .ff-h2 {
    font-size: var(--ff-text-xl);
  }
  
  .ff-stat-large {
    font-size: var(--ff-text-3xl);
  }
  
  .ff-stat-medium {
    font-size: var(--ff-text-xl);
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .ff-card {
    border-width: 2px;
    border-color: var(--ff-text-primary);
  }
  
  .ff-btn {
    border: 2px solid var(--ff-text-primary);
  }
  
  .ff-input,
  .ff-select {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .ff-logo-icon {
    transition: none;
  }
  
  .ff-card:hover,
  .ff-btn:hover {
    transform: none;
  }
}

/* Focus indicators for keyboard navigation */
.ff-btn:focus-visible,
.ff-input:focus-visible,
.ff-select:focus-visible,
.ff-checkbox:focus-visible,
.ff-nav-link:focus-visible {
  outline: 3px solid var(--ff-primary-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Pigskin Prophet / PigPro Score Components
   ========================================================================== */

/* --- Hero Score Ring (SVG-based) --- */
.pigpro-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.pigpro-ring {
  position: relative;
  width: 80px;
  height: 80px;
}
.pigpro-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.pigpro-ring-bg {
  fill: none;
  stroke: var(--ff-gray-200, #e5e7eb);
  stroke-width: 5;
}
.pigpro-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}
.pigpro-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pp-font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.pigpro-ring-label {
  font-family: var(--pp-font-accent, 'Cinzel', serif);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pp-gold-primary, #D4AF37);
}
/* Large ring variant (player detail pages) */
.pigpro-ring-lg {
  width: 120px;
  height: 120px;
}
.pigpro-ring-lg .pigpro-ring-value {
  font-size: 2.25rem;
}
.pigpro-ring-lg .pigpro-ring-bg,
.pigpro-ring-lg .pigpro-ring-fill {
  stroke-width: 6;
}

/* --- Full PigPro Badge (card-style) --- */
.pigpro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--ff-surface-primary, #fff);
  border: 1.5px solid var(--pp-gold-dim, rgba(212, 175, 55, 0.12));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pigpro-score-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--pp-gold-dim, rgba(212, 175, 55, 0.12));
}
.pigpro-score-value {
  color: #fff;
  font-family: var(--pp-font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 1rem;
}
.pigpro-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pigpro-brand {
  font-family: var(--pp-font-accent, 'Cinzel', serif);
  font-weight: 700;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pp-gold-primary, #D4AF37);
}
.pigpro-tier-label {
  font-size: 0.8125rem;
  font-weight: 600;
}
.pigpro-rec {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.pigpro-rec-target { color: var(--pp-tier-elite, #10b981); }
.pigpro-rec-consider { color: var(--pp-tier-good, #3b82f6); }
.pigpro-rec-sleeper { color: var(--pp-tier-average, #f59e0b); }
.pigpro-rec-avoid { color: var(--pp-tier-below, #ef4444); }

/* --- Tier color coding --- */
.pigpro-tier-elite { color: var(--pp-tier-elite, #10b981); }
.pigpro-tier-good { color: var(--pp-tier-good, #3b82f6); }
.pigpro-tier-average { color: var(--pp-tier-average, #f59e0b); }
.pigpro-tier-below { color: var(--pp-tier-below, #ef4444); }

/* --- Compact inline badge (tables/lists) --- */
.pigpro-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  padding: 0 0.375rem;
  border-radius: 0.375rem;
  font-family: var(--pp-font-display, 'Oswald', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  background: currentColor;
}
.pigpro-score-sm {
  color: #fff;
}

/* --- Component breakdown --- */
.pigpro-breakdown {
  padding: 0.75rem;
}
.pigpro-breakdown-title {
  font-family: var(--pp-font-accent, 'Cinzel', serif);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-gold-primary, #D4AF37);
  margin-bottom: 0.75rem;
}
.pigpro-breakdown-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pigpro-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pigpro-bar-label {
  font-size: 0.75rem;
  width: 100px;
  flex-shrink: 0;
  text-align: right;
}
.pigpro-bar-track {
  flex: 1;
  height: 8px;
  background: var(--ff-gray-200, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.pigpro-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pigpro-bar-primary { background: var(--pp-tier-good, #3b82f6); }
.pigpro-bar-success { background: var(--pp-tier-elite, #10b981); }
.pigpro-bar-warning { background: var(--pp-tier-average, #f59e0b); }
.pigpro-bar-info { background: #06b6d4; }
.pigpro-bar-error { background: var(--pp-tier-below, #ef4444); }
.pigpro-bar-gray { background: var(--ff-gray-400, #9ca3af); }
.pigpro-bar-value {
  font-family: var(--ff-font-numeric, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  width: 32px;
  flex-shrink: 0;
}

/* --- Pigskin Prophet Nav Brand --- */
.pp-nav-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pp-gold-primary, #D4AF37), var(--pp-gold-dark, #B8941E));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pp-font-accent, 'Cinzel', serif);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--pp-navy-primary, #0A1628);
  flex-shrink: 0;
}
.pp-nav-title {
  font-family: var(--pp-font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pp-nav-subtitle {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--pp-gold-primary, #D4AF37);
  margin-top: -2px;
}

/* --- Dark theme overrides for PigPro components --- */
[data-theme="dark"] .pigpro-badge {
  background: var(--pp-navy-light, #1A2A44);
  border-color: var(--pp-gold-dim, rgba(212, 175, 55, 0.12));
}
[data-theme="dark"] .pigpro-ring-bg {
  stroke: var(--pp-navy-light, #1A2A44);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .ff-nav,
  .ff-btn,
  .ff-form-group {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .ff-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  
  .ff-h1, .ff-h2, .ff-h3, .ff-h4 {
    color: black !important;
    break-after: avoid;
  }
}