/* ========================================
   THÈME PADEL - SYSTÈME DE DESIGN COHÉRENT
   Basé sur les couleurs d'un court de padel
   ======================================== */

:root {
  /* ========================================
     PALETTE DE COULEURS PRINCIPALE
     ======================================== */
  
  /* Couleurs de base du court de padel */
  --padel-white: #F2F2F2;           /* Lignes blanches du court */
  --padel-green: #A3BF8F;           /* Surface principale du court */
  --padel-dark-green: #13402B;      /* Accents sombres (chaises, poteaux) */
  --padel-muted-green: #6D8B66;     /* Ombres et détails */
  
  /* ========================================
     COULEURS SÉMANTIQUES
     ======================================== */
  
  /* Couleurs principales */
  --padel-primary: var(--padel-green);
  --padel-primary-50: #F7F9F5;
  --padel-primary-100: #E8F0E3;
  --padel-primary-200: #D1E3C7;
  --padel-primary-300: #B8D1A3;
  --padel-primary-400: #A3BF8F;
  --padel-primary-500: #8FA67A;
  --padel-primary-600: #7A8D66;
  --padel-primary-700: #657452;
  --padel-primary-800: #505B3D;
  --padel-primary-900: #3B4229;
  
  /* Couleurs secondaires */
  --padel-secondary: var(--padel-dark-green);
  --padel-secondary-50: #F0F4F2;
  --padel-secondary-100: #D9E5DD;
  --padel-secondary-200: #B3CBBB;
  --padel-secondary-300: #8DB199;
  --padel-secondary-400: #679777;
  --padel-secondary-500: #13402B;
  --padel-secondary-600: #0F3322;
  --padel-secondary-700: #0B2619;
  --padel-secondary-800: #071A10;
  --padel-secondary-900: #030D07;
  
  /* Couleurs neutres */
  --padel-neutral-50: #F9FAFB;
  --padel-neutral-100: #F3F4F6;
  --padel-neutral-200: #E5E7EB;
  --padel-neutral-300: #D1D5DB;
  --padel-neutral-400: #9CA3AF;
  --padel-neutral-500: #6B7280;
  --padel-neutral-600: #4B5563;
  --padel-neutral-700: #374151;
  --padel-neutral-800: #1F2937;
  --padel-neutral-900: #111827;
  
  /* Couleurs de statut */
  --padel-success: #10B981;
  --padel-success-light: #34D399;
  --padel-warning: #F59E0B;
  --padel-warning-light: #FBBF24;
  --padel-error: #EF4444;
  --padel-error-light: #F87171;
  --padel-info: #3B82F6;
  --padel-info-light: #60A5FA;

  /* Accents supplémentaires */
  --padel-sand: #F3E9D2;
  --padel-sand-dark: #CBBE9A;
  --padel-indigo: #3A5DAE;
  
  /* ========================================
     COULEURS D'INTERFACE
     ======================================== */
  
  /* Textes */
  --padel-text-primary: var(--padel-secondary-800);
  --padel-text-secondary: var(--padel-neutral-600);
  --padel-text-muted: var(--padel-neutral-500);
  --padel-text-inverse: white;
  
  /* Arrière-plans */
  --padel-bg-primary: white;
  --padel-bg-secondary: var(--padel-neutral-50);
  --padel-bg-tertiary: var(--padel-primary-50);
  --padel-bg-inverse: var(--padel-secondary);
  
  /* Bordures */
  --padel-border-light: var(--padel-neutral-200);
  --padel-border-medium: var(--padel-neutral-300);
  --padel-border-strong: var(--padel-primary-300);
  
  /* Ombres */
  --padel-shadow-sm: 0 1px 2px 0 rgba(19, 64, 43, 0.05);
  --padel-shadow-md: 0 4px 6px -1px rgba(19, 64, 43, 0.1);
  --padel-shadow-lg: 0 10px 15px -3px rgba(19, 64, 43, 0.1);
  --padel-shadow-xl: 0 20px 25px -5px rgba(19, 64, 43, 0.1);
}

/* ========================================
   SYSTÈME DE TYPOGRAPHIE
   ======================================== */

.text-padel-heading {
  color: var(--padel-text-primary);
  font-weight: 700;
  line-height: 1.2;
}

.text-padel-body {
  color: var(--padel-text-secondary);
  font-weight: 400;
  line-height: 1.5;
}

.text-padel-muted {
  color: var(--padel-text-muted);
  font-weight: 400;
  line-height: 1.5;
}

.text-padel-inverse {
  color: var(--padel-text-inverse);
  font-weight: 400;
  line-height: 1.5;
}

/* ========================================
   SYSTÈME DE BOUTONS
   ======================================== */

.btn-padel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--padel-shadow-sm);
}

.btn-padel:focus {
  outline: 2px solid var(--padel-primary-300);
  outline-offset: 2px;
}

.btn-padel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-padel-primary {
  background: linear-gradient(135deg, var(--padel-primary) 0%, var(--padel-primary-500) 100%);
  color: var(--padel-text-inverse);
  box-shadow: var(--padel-shadow-md);
}

.btn-padel-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--padel-primary-500) 0%, var(--padel-primary-600) 100%);
  transform: translateY(-1px);
  box-shadow: var(--padel-shadow-lg);
}

.btn-padel-secondary {
  background: linear-gradient(135deg, var(--padel-secondary) 0%, var(--padel-secondary-600) 100%);
  color: var(--padel-text-inverse);
  box-shadow: var(--padel-shadow-md);
}

.btn-padel-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--padel-secondary-600) 0%, var(--padel-secondary-700) 100%);
  transform: translateY(-1px);
  box-shadow: var(--padel-shadow-lg);
}

.btn-padel-outline {
  background: transparent;
  color: var(--padel-primary);
  border: 2px solid var(--padel-primary);
}

.btn-padel-outline:hover:not(:disabled) {
  background: var(--padel-primary);
  color: var(--padel-text-inverse);
}

.btn-padel-ghost {
  background: transparent;
  color: var(--padel-text-secondary);
  box-shadow: none;
}

.btn-padel-ghost:hover:not(:disabled) {
  background: var(--padel-primary-50);
  color: var(--padel-text-primary);
}

.btn-padel-error {
  background: linear-gradient(135deg, var(--padel-error) 0%, #DC2626 100%);
  color: var(--padel-text-inverse);
  box-shadow: var(--padel-shadow-md);
}

.btn-padel-error:hover:not(:disabled) {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  transform: translateY(-1px);
  box-shadow: var(--padel-shadow-lg);
}

/* ========================================
   SYSTÈME DE CARTES
   ======================================== */

.card-padel {
  background: var(--padel-bg-primary);
  border: 1px solid var(--padel-border-light);
  border-radius: 0.75rem;
  box-shadow: var(--padel-shadow-sm);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.card-padel:hover {
  border-color: var(--padel-border-strong);
  box-shadow: var(--padel-shadow-md);
  transform: translateY(-2px);
}

.card-padel-header {
  background: var(--padel-bg-tertiary);
  border-bottom: 1px solid var(--padel-border-light);
  padding: 1rem 1.5rem;
}

.card-padel-body {
  padding: 1.5rem;
}

.card-padel-footer {
  background: var(--padel-bg-secondary);
  border-top: 1px solid var(--padel-border-light);
  padding: 1rem 1.5rem;
}

/* ========================================
   SYSTÈME DE FORMULAIRES
   ======================================== */

.form-control-padel {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--padel-border-light);
  border-radius: 0.5rem;
  background: var(--padel-bg-primary);
  color: var(--padel-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 0.2s ease-in-out;
}

.form-control-padel:focus {
  border-color: var(--padel-primary);
  box-shadow: 0 0 0 3px var(--padel-primary-100);
  outline: none;
}

.form-control-padel:disabled {
  background: var(--padel-neutral-100);
  color: var(--padel-text-muted);
  cursor: not-allowed;
}

.form-label-padel {
  display: block;
  color: var(--padel-text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ========================================
   SYSTÈME DE BADGES
   ======================================== */

.badge-padel {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badges utilisent maintenant les classes du design system */

/* ========================================
   SYSTÈME DE NAVIGATION
   ======================================== */

.navbar-padel {
  background: linear-gradient(135deg, var(--padel-secondary) 0%, var(--padel-secondary-600) 100%);
  box-shadow: var(--padel-shadow-md);
}

.navbar-padel .navbar-brand {
  color: var(--padel-text-inverse);
  font-weight: 700;
  text-decoration: none;
}

.navbar-padel .nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.navbar-padel .nav-link:hover {
  color: var(--padel-text-inverse);
  background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   SYSTÈME DE TABLEAUX
   ======================================== */

.table-padel {
  width: 100%;
  background: var(--padel-bg-primary);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--padel-shadow-sm);
}

.table-padel thead {
  background: var(--padel-primary);
  color: var(--padel-text-inverse);
}

.table-padel th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.table-padel td {
  padding: 1rem;
  border-bottom: 1px solid var(--padel-border-light);
}

.table-padel tbody tr:hover {
  background: var(--padel-primary-50);
}

/* ========================================
   SYSTÈME DE HERO
   ======================================== */

.hero-padel {
  background: linear-gradient(135deg, var(--padel-primary) 0%, var(--padel-primary-500) 50%, var(--padel-secondary) 100%);
  color: var(--padel-text-inverse);
  position: relative;
  overflow: hidden;
}

.hero-padel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="court" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="20" height="20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23court)"/></svg>');
  opacity: 0.3;
}

.hero-padel .container {
  position: relative;
  z-index: 1;
}

/* Hero avec filtres intégrés */
.hero-search {
  background: linear-gradient(135deg, var(--padel-primary) 0%, var(--padel-primary-500) 50%, var(--padel-secondary) 100%);
}

.hero-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.06)"/></svg>');
  opacity: 0.4;
}

.hero-search .card-padel {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ========================================
   SYSTÈME DE CARTES DE TOURNOI
   ======================================== */

.tournament-card {
  background: var(--padel-bg-primary);
  border: 1px solid var(--padel-border-light);
  border-radius: 0.75rem;
  box-shadow: var(--padel-shadow-sm);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.tournament-card:hover {
  border-color: var(--padel-primary);
  box-shadow: var(--padel-shadow-md);
  transform: translateY(-2px);
}

.tournament-card .card-title {
  color: var(--padel-text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  transition: color 0.2s ease-in-out;
}

.tournament-card:hover .card-title {
  color: var(--padel-primary);
}

.tournament-card .card-info {
  color: var(--padel-text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25;
}

.tournament-card .card-info i {
  color: var(--padel-primary);
  width: 1rem;
  text-align: center;
}

.tournament-card .places-info {
  color: var(--padel-success);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
}

.tournament-card .badge-category {
  background: linear-gradient(135deg, var(--padel-primary) 0%, var(--padel-muted-green) 100%);
  color: var(--padel-text-inverse);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   UTILITAIRES DE COULEURS
   ======================================== */

.text-padel-primary { color: var(--padel-text-primary) !important; }
.text-padel-secondary { color: var(--padel-text-secondary) !important; }
.text-padel-muted { color: var(--padel-text-muted) !important; }
.text-padel-inverse { color: var(--padel-text-inverse) !important; }

.bg-padel-primary { background-color: var(--padel-primary) !important; }
.bg-padel-secondary { background-color: var(--padel-secondary) !important; }
.bg-padel-tertiary { background-color: var(--padel-bg-tertiary) !important; }

.border-padel { border-color: var(--padel-primary) !important; }
.border-padel-light { border-color: var(--padel-border-light) !important; }

.ring-padel-warning { --tw-ring-color: var(--padel-warning) !important; }
.bg-padel-warning { background-color: var(--padel-warning) !important; }
.border-padel-warning { border-color: var(--padel-warning) !important; }
.text-padel-warning-dark { color: var(--padel-warning-dark) !important; }
.text-padel-success-dark { color: var(--padel-success-dark) !important; }
.border-padel-success { border-color: var(--padel-success) !important; }
.border-padel-accent { border-color: var(--padel-accent) !important; }
.text-padel-error-dark { color: var(--padel-error-dark) !important; }

/* ========================================
   OVERRIDES POUR COMPATIBILITÉ TAILWIND
   ======================================== */

/* Remplacer les couleurs Tailwind par les couleurs padel */
.text-gray-900 { color: var(--padel-text-primary) !important; }
.text-gray-800 { color: var(--padel-text-primary) !important; }
.text-gray-700 { color: var(--padel-text-primary) !important; }
.text-gray-600 { color: var(--padel-text-secondary) !important; }
.text-gray-500 { color: var(--padel-text-muted) !important; }

.bg-gray-50 { background-color: var(--padel-bg-secondary) !important; }
.bg-gray-100 { background-color: var(--padel-neutral-100) !important; }
.bg-gray-200 { background-color: var(--padel-neutral-200) !important; }

.border-gray-200 { border-color: var(--padel-border-light) !important; }
.border-gray-300 { border-color: var(--padel-border-medium) !important; }

/* Couleurs de statut */
.text-green-600 { color: var(--padel-success) !important; }
.text-orange-600 { color: var(--padel-warning) !important; }
.text-red-600 { color: var(--padel-error) !important; }
.text-blue-600 { color: var(--padel-info) !important; }

.bg-green-500 { background-color: var(--padel-success) !important; }
.bg-orange-500 { background-color: var(--padel-warning) !important; }
.bg-red-500 { background-color: var(--padel-error) !important; }
.bg-blue-500 { background-color: var(--padel-info) !important; }

/* ========================================
   MODE SOMBRE
   ======================================== */

/* Mode sombre désactivé - on garde le thème clair */
/* @media (prefers-color-scheme: dark) {
  :root {
    --padel-text-primary: var(--padel-neutral-100);
    --padel-text-secondary: var(--padel-neutral-300);
    --padel-text-muted: var(--padel-neutral-400);
    --padel-text-inverse: var(--padel-secondary);
    
    --padel-bg-primary: var(--padel-neutral-900);
    --padel-bg-secondary: var(--padel-neutral-800);
    --padel-bg-tertiary: var(--padel-secondary-900);
    --padel-bg-inverse: var(--padel-primary);
    
    --padel-border-light: var(--padel-neutral-700);
    --padel-border-medium: var(--padel-neutral-600);
    --padel-border-strong: var(--padel-primary-600);
  }
  
  .card-padel {
    background: var(--padel-bg-primary);
    border-color: var(--padel-border-light);
  }
  
  .form-control-padel {
    background: var(--padel-bg-primary);
    border-color: var(--padel-border-light);
    color: var(--padel-text-primary);
  }
} */

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes padel-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

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

.animate-padel-bounce { animation: padel-bounce 2s infinite; }
.animate-padel-pulse { animation: padel-pulse 2s infinite; }

/* ========================================
   SUBTLE OVERRIDES: Neutral surfaces + focused accents
   These override default theme values without changing HTML.
   ======================================== */
/* Styles spécifiques pour btn-padel-* uniquement (pas btn-action-*) */
.btn-padel.btn-padel-primary {
  background-color: #1e4a32 !important; /* +luminance */
  color: #ffffff !important; /* visible on white surfaces */
  border: 0 !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 14px rgba(19, 64, 43, 0.18) !important;
}
.btn-padel.btn-padel-primary:hover:not(:disabled) { background-color: #194131 !important; box-shadow: 0 8px 20px rgba(19,64,43,.28) !important; }
.btn-padel.btn-padel-primary:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(163,191,143,.45) !important; }

.btn-padel.btn-padel-secondary {
  background: #ffffff !important; /* solide et opaque */
  color: #0f1f18 !important;
  border: 1px solid #E5E7EB !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.btn-padel.btn-padel-secondary:hover:not(:disabled) { background: #f6f8f6 !important; border-color: #D1D5DB !important; }
.btn-padel.btn-padel-secondary:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(163,191,143,.35) !important; }

/* Neutralize blue underlines and unify focus */
a, button { text-decoration: none !important; }
a:hover { text-decoration: none !important; }
:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(163,191,143,.35) !important; }

/* Lighter hero and surfaces */
.hero-padel {
  /* Nouveau hero plus lumineux et focalisé */
  background:
    radial-gradient(1200px 500px at 50% 25%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #eef4ef 0%, #e6efe9 55%, #dfe8e2 100%) !important;
}
.hero-padel::after{ /* contraste pour textes blancs (WCAG) */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(800px 300px at 50% 40%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,0) 70%);
}

/* ========================================
   HERO MODERNE (neutral + sand accents + glass panel)
   ======================================== */
.hero-modern {
  position: relative;
  color: var(--padel-text-primary);
  background:
    linear-gradient(180deg, #F9FAFB 0%, #F6F7F6 35%, #F3F6F3 100%);
  overflow: hidden;
}
.hero-modern::before {
  content: ""; position: absolute; inset: -20% -20% auto auto; height: 60%; width: 60%;
  background: radial-gradient(60% 60% at 70% 30%, rgba(243,233,210,.55) 0%, rgba(243,233,210,0) 70%),
              radial-gradient(40% 40% at 20% 80%, rgba(58,93,174,.15) 0%, rgba(58,93,174,0) 70%);
  pointer-events: none;
}
.hero-modern::after {
  /* Motif diagonal subtil uniquement en arrière-plan du hero */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 2px, transparent 2px, transparent 16px);
}
.hero-panel {
  /* Panneau à plat (opaque) : pas d'effet dépoli ni motifs visibles derrière */
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, .06);
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  border-radius: 1rem;
  padding: 1.25rem;
  position: relative;
  z-index: 1; /* assure que le motif du hero reste derrière le contenu et les boutons */
}
.hero-modern .hero-panel h1 { color: #0f1f18 !important; text-shadow: none !important; }
.hero-modern .hero-panel p { color: #374151 !important; opacity: 1 !important; }
.bg-padel-secondary { background: #fafafa !important; }
.bg-padel-tertiary { background: #f3f6f3 !important; }

/* Softer cards */
.card-padel { background: #ffffff !important; border: 1px solid rgba(0,0,0,.12) !important; box-shadow: 0 4px 14px rgba(0,0,0,.06) !important; }

/* Metric cards for tournament header (WCAG-conscious) */
.card-metric { background:#ffffff !important; color:#111827 !important; border:1px solid #E5E7EB !important; border-radius:0.75rem !important; padding:0.75rem !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
.card-metric .metric-value { font-weight:800 !important; font-size:1.5rem !important; color:#0f1f18 !important; }
.card-metric .metric-label { font-size:.875rem !important; color:#374151 !important; opacity:1 !important; }
.with-accent-sand { border-left:4px solid var(--padel-sand-dark) !important; }
.with-accent-indigo { border-left:4px solid var(--padel-indigo) !important; }

/* Links/info accent */
.link-info { color: var(--padel-indigo) !important; text-decoration: none !important; }
.link-info:hover { text-decoration: underline !important; }

/* Typo & spacing fine-tune */
.hero-padel h1 { line-height: 1.1 !important; letter-spacing: -0.01em !important; }
.hero-padel p { line-height: 1.45 !important; }
.btn-padel-primary, .btn-padel-secondary { letter-spacing: -0.01em !important; }

/* CTA group spacing inside hero */
.hero-padel .space-y-4 > * { margin-top: 1rem !important; }
.hero-padel .space-x-4 > * + * { margin-left: 1rem !important; }

/* Divider sable pour équilibrer le vert */
.divider-sand { height: 6px; background: var(--padel-sand); opacity: .9; }

/* Status badges - utilise les variables du design system */