html {
  font-size: 1em; /* Taille de police de base */
}

.group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

@media (min-width: 769px) {
  .group-list.two-teams {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .group-list.single-team {
    grid-template-columns: 1fr;
  }
}
/* Toast message styles */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red; /* Same color as buttons */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000; /* Ensure it's on top of other elements */
}

.toast.show {
  opacity: 1;
}

/* Modern Toast Notification Styles */
.toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  min-width: 350px;
  max-width: 500px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 20px;
  transform: translateX(calc(100% + 30px));
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10000;
  border-left: 4px solid;
}

.toast-notification.toast-show {
  transform: translateX(0);
}

.toast-notification.toast-success {
  border-left-color: #10b981;
}

.toast-notification.toast-error {
  border-left-color: #ef4444;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
}

.toast-success .toast-icon {
  color: #10b981;
}

.toast-error .toast-icon {
  color: #ef4444;
}

.toast-message {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  font-weight: 500;
}

.toast-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb;
}

.toast-button {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.toast-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.toast-button:active {
  transform: translateY(0);
}

/* Animation pour mobile */
@media (max-width: 768px) {
  .toast-notification {
    bottom: 20px;
    right: 20px;
    left: 20px;
    min-width: auto;
    max-width: none;
  }
}

/* Animation de pulsation pour attirer l'attention */
@keyframes pulse {
  0% {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
  }
  100% {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }
}

.toast-notification.toast-show {
  animation: pulse 2s ease-in-out;
}

/* Styles pour les notifications (voir bloc principal plus bas) */

body {
  margin: 0;
  padding: 0;
  font-size: 0.9em; /* Réduire légèrement la taille de la police */
  font-family: Verdana, sans-serif;
  background-color: #f0f0f0;
  color: #333; /* Modifier la couleur du texte */
  min-height: 100vh; /* Ajouter pour que le body prenne au moins toute la hauteur de l'écran */
  display: flex;
  flex-direction: column;
}

body.has-contextual-layout {
  height: 100vh;
  overflow: hidden;
}

header {
  background-color: #fff;
  color: var(--neutral-800);
  padding: var(--space-3) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--neutral-200);
  position: sticky;
  top: 0;
  z-index: 900;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logo img {
  height: 40px;
  border-radius: var(--radius-md);
}

.logo span {
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  color: var(--neutral-900);
  letter-spacing: -0.01em;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

nav ul.show {
  display: block;
}

nav ul.active {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: 65px; /* Height of the header */
  left: 0;
  background-color: #fff;
  width: 100%;
  padding: var(--space-3);
  gap: var(--space-1);
  border-top: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-lg);
  z-index: 1000; /* Ensure it's on top of other elements */
}

nav a {
  color: var(--neutral-700);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

nav a:hover {
  color: var(--primary-600);
  background-color: var(--primary-50);
}

main {
  flex: 1; /* Ajouter pour que le main prenne tout l'espace disponible */
}

.hero {
  background-image: url('/images/Gemini_Generated_Image_bell4pbell4pbell.jpg'); /* Ajouter une image de fond */
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: left; /* Modifier l'alignement du texte */
  padding: 2.5rem 2rem 6.25rem; /* Augmenter le padding */
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 3rem;
  text-shadow: 2px 2px 4px #000000;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: #fff;
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

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

.join-training-btn {
  /* Style compact pour le header */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.join-training-btn:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

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

.challenges {
  text-align: center;
  margin: 2rem auto; /* Ajout de marges supérieures, inférieures et latérales automatiques pour centrer */
  max-width: 1200px; /* Limiter la largeur pour créer des marges latérales */
}

.challenge-list {
  display: flex;
  justify-content: center; /* Modifier pour centrer les cartes */
  gap: 20px;
  margin-top: 2rem;
  flex-wrap: wrap; /* Permettre aux cartes de passer à la ligne */
}


.join-training-btn svg {
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

.challenge-card {
  background-color: #fff;
  border-radius: 5px;
  text-align: justify; /* Alignement justifié du texte */
  width: auto; /* Ajouter une largeur */
  max-width: 90%; /* Ajouter une largeur maximale */
  flex-grow: 1; /* Permettre aux cartes de s'étirer */
  flex-basis: 0; /* Définir la taille initiale à 0 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajouter une ombre */
  color: #333; /* Ajouter une couleur de texte */
}

.challenge-card img {
  width: 100%;
  display: block;
  margin-top: 0;
  height: auto;
  margin-bottom: 1rem;
}

.training-card-link {
  text-decoration: none;
  color: inherit; /* Pour conserver la couleur du texte de la carte */
}

.training-card-link:hover .training-card {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Légère élévation au survol */
  transform: translateY(-2px); /* Effet de soulèvement */
}

.training-card img {
  width: 100%;
  display: block;
  margin-top: 0;
  height: auto;
  margin-bottom: 1rem;
}

.training-creator .creator-avatar {
  width: 30px; /* Taille fixe pour l'avatar */
  height: 30px; /* Taille fixe pour l'avatar */
  border-radius: 50%; /* Pour le rendre circulaire */
  object-fit: cover; /* Pour s'assurer que l'image couvre bien la zone */
  margin-left: 5px; /* Espacement à gauche du nom de l'organisateur */
}

.challenge-content {
  padding: 16px;
}


.has-background-image {
  min-height: 50vh;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  z-index: -1;
}

.background-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: bottom;
}

form {
  display: flex;
  flex-direction: column;
  /*width: 100%;*/
  max-width: 90%;
  margin: var(--space-5) auto;
  padding: var(--space-6);
  background-color: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

form div {
  margin-bottom: var(--space-4);
}

form label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-semibold);
  color: var(--neutral-700);
  font-size: var(--text-sm);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="time"],
form input[type="number"],
form select,
form textarea  {
  width: 100%;
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--neutral-800);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus,
form input[type="time"]:focus,
form input[type="number"]:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

form button {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: all var(--transition-normal);
}

form button:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 3rem;
  text-shadow: 2px 2px 4px #000000;
  color: #fff;
  text-align: left; /* Alignement du texte à gauche */
}

footer {
  background-color: var(--neutral-900);
  color: var(--neutral-300);
  text-align: center;
  padding: 1rem;
  margin-top: auto; /* Modifier pour que le footer soit en bas */
  margin-left: calc(-50vw + 50%); /* Compenser les marges du contenu parent */
  position: relative;
}

.login-background {
  background-image: url('/images/Gemini_Generated_Image_50jm8150jm8150jm.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.register-background {
  background-image: url('/images/Gemini_Generated_Image_oj5gw7oj5gw7oj5g.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

/* ===== TRAINING FORM RESPONSIVE STYLES ===== */

/* Container général du formulaire */
.training-form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.training-form-container-small{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* Layout en deux colonnes pour écrans larges */
@media (min-width: 1024px) {
  .form-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }

  .form-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-full-width {
    grid-column: 1 / -1;
  }
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 1023px) {
  .form-two-columns {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Styles de base pour les form-div */
.form-div {
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

.form-div-team {
  display: flex;
  flex-direction: column;
}

/* Layout flexible pour les champs côte à côte */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.form-row.three-columns {
  grid-template-columns: 1fr 1fr 1fr;
  margin:auto;
}

/* Labels améliorés */
.form-label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Inputs améliorés */
.form-input {
  /*padding: 0.75rem;*/
  border: 2px solid #e1e8ed;
  border-radius: 5px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #fff;
}

.form-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-input select{
  padding: 0px !important;
}

/* Toggles améliorés */
.toggle-group {
  display: flex;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}

.toggle-container {
  flex-shrink: 0;
}

/* Champs spéciaux pour durée/distance */
.duration-distance-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.pace-inputs-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.pace-inputs-group .pace-input {
  width: 45px;
}

#recuperationActivePaceKmHValue {
    width: 70px;
}

.objective-input[type="time"] {
  width: 120px;
}

.objective-input[type="number"] {
  width: 120px;
}

#seuilFields .form-div {
    align-items: center;
}

#seuilFields .form-label {
    text-align: center;
}

#seuilFields .form-row.three-columns {
    justify-content: center;
}

#seuilFields .form-input {
    width: 120px;
}

.series-repeats-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.series-repeats-group input {
    width: 70px;
}

.series-separator {
    font-weight: bold;
}

/* Media queries responsive */
@media (max-width: 968px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-row.three-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .training-form-container {
    padding: 15px;
  }

  /* Styles for createTraining.ejs */
  form.form .form-div[style*="display: flex;"] {
    flex-direction: column;
  }

  form.form .form-div[style*="display: flex;"] > div {
    width: 100% !important;
    margin-bottom: 5px;
  }

  form.form .form-div[style*="display: flex;"] > div > .form-input {
    margin-bottom: 10px;
    width: 100%;
  }

  #footingFields .form-div {
    flex-direction: column;
  }

  #footingDistanceDiv {
    flex-direction: column;
  }

  #footingDistanceDiv input {
    width: 100% !important;
  }

  #footingDistanceDiv select {
    width: 100% !important;
  }

  .duration-distance-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .toggle-group {
    justify-content: center;
    margin-bottom: 1rem;
  }

  .pace-inputs-group {
    justify-content: center;
  }
}

/* ===== TRAINING FORM STYLES COMPLÉMENTAIRES ===== */

/* Header du formulaire */
.form-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem 1rem;
}

.form-header h1 {
  color: #333;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.form-description {
  color: #6c757d;
  font-size: 1.2rem;
  margin-bottom: 0;
  font-weight: 400;
}

/* Sections du formulaire */
.form-section {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.section-title {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid #f8f9fa;
  padding-bottom: 0.5rem;
}

/* Messages d'aide */
.form-help {
  color: #6c757d;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: block;
}

/* Messages de validation */
.validation-message {
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: none;
}

.validation-message.show {
  display: block;
}

.form-input.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-input.success {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Fieldsets pour les toggles */
.toggle-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.toggle-fieldset legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: inherit;
  line-height: inherit;
}

/* Groupes d'inputs spécialisés */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.distance-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.distance-input-group input {
  flex: 1;
}

.distance-input-group select {
  width: 80px;
  flex-shrink: 0;
}

.pace-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pace-separator, .pace-unit {
  font-weight: 600;
  color: #6c757d;
  white-space: nowrap;
}

/* Styles pour le champ "Qui peut participer ?" */
.visibility-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.visibility-fieldset legend {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.segmented-control {
  display: flex;
  background-color: #ff0000;
  border-radius: 0.5rem;
  overflow: hidden;
  width: fit-content;
  margin-top: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin: auto;
  padding: 4px;
}

.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control-option {
  padding: 3px 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: white;
  user-select: none;
  min-width: 120px; /* Assure une largeur minimale pour chaque option */
  justify-content: center; /* Centre le contenu */
  margin: 0px 5px;
  border-radius: 0.5rem;
}

.segmented-control-option .icon {
  font-size: 1.125rem;
}

.segmented-control input[type="radio"]:checked + .segmented-control-option {
  background-color: white; 
  color: #1f2937;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  position: relative;
  z-index: 1; /* Assure que l'élément sélectionné est au-dessus */
  border-radius: 0.5rem;
}

.segmented-control input[type="radio"]:hover + .segmented-control-option:not(:checked) {
  background-color: #45a049;
  color: white;
  border-radius: 0.5rem;
}

/* Améliorations pour la responsivité */
@media (max-width: 600px) {
  .segmented-control {
    width: 100%;
    flex-direction: column;
  }

  .segmented-control-option:last-child {
    border-bottom: none;
  }
}

/* Classes d'accessibilité */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Amélioration des toggles */
.toggleContainer[role="switch"] {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.toggleContainer[role="switch"]:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* États de focus améliorés */
.form-input:focus,
select.form-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* ===== STYLES POUR LA LOCALISATION ===== */

.city-autocomplete-container {
  position: relative;
  margin-bottom: 0px;
}

/* ===== AUTOCOMPLÉTION VILLE (inscription & profil) ===== */
#city-suggestions,
#default-city-suggestions,
.city-suggestions {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Masquer une liste vide (aucune suggestion en cours) */
#city-suggestions:empty,
#default-city-suggestions:empty,
.city-suggestions:empty {
  display: none;
}

#city-suggestions li,
#default-city-suggestions li,
.city-suggestions li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #334155;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#city-suggestions li::before,
#default-city-suggestions li::before,
.city-suggestions li::before {
  content: "\f3c5"; /* map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85em;
  color: #94a3b8;
}

#city-suggestions li:hover,
#city-suggestions li:focus,
#city-suggestions li.selected,
#default-city-suggestions li:hover,
#default-city-suggestions li.selected,
.city-suggestions li:hover,
.city-suggestions li:focus,
.city-suggestions li.selected {
  background-color: #eef2ff;
  color: #4338ca;
}

#city-suggestions li:hover::before,
#default-city-suggestions li:hover::before,
.city-suggestions li:hover::before {
  color: #4338ca;
}

/* Messages « aucun résultat » et erreurs */
#city-suggestions li.no-results,
#default-city-suggestions li.no-results,
.city-suggestions li.no-results,
#city-suggestions li.error,
.city-suggestions li.error {
  cursor: default;
  font-style: italic;
  color: #94a3b8;
}

#city-suggestions li.no-results:hover,
.city-suggestions li.no-results:hover,
#city-suggestions li.error:hover,
.city-suggestions li.error:hover {
  background-color: transparent;
  color: #94a3b8;
}

#city-suggestions li.no-results::before,
.city-suggestions li.no-results::before {
  content: "\f119"; /* frown */
}

#city-suggestions li.error,
.city-suggestions li.error {
  color: #dc2626;
}

#city-suggestions li.error::before,
.city-suggestions li.error::before {
  content: "\f071"; /* exclamation-triangle */
  color: #dc2626;
}

/* ===== STYLES DES IMAGES DE GROUPE ===== */

/* Vignette pour la liste des groupes (views/groups.ejs) */
.group-card {
    position: relative; /* Pour positionner l'image si besoin */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-card-picture {
    width: 100%;
    height: 150px; /* Hauteur fixe pour les vignettes */
    overflow: hidden;
    border-radius: 5px;
}

.group-image-thumbnail {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/ /* Assure que l'image couvre la zone sans déformation excessive */
}

/* Grande image pour les détails de groupe (views/groupDetails.ejs) */
.group-details-picture-container {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.group-image-detail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== STYLES DES IMAGES DE GROUPE ===== */

/* Vignette pour la liste des groupes (views/groups.ejs) */
.group-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-card-picture {
    width: 100%;
    height: 150px; /* Hauteur fixe pour les vignettes */
    overflow: hidden;
    border-radius: 5px;
}

.group-image-thumbnail {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/ /* Assure que l'image couvre la zone sans déformation excessive */
}

/* Grande image pour les détails de groupe (views/groupDetails.ejs) */
.group-details-picture-container {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.group-image-detail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-container {
  margin-top: 1rem;
}

.interactive-map {
  height: 300px;
  border-radius: 5px;
  border: 1px solid #e9ecef;
}

@media (max-width: 768px) {
  .interactive-map {
    height: 250px;
  }
}


/* ===== STYLES POUR LES ACTIONS DU FORMULAIRE ===== */

.form-actions {
  text-align: center;
  padding: 2rem 0;
  border-top: 2px solid #f8f9fa;
  margin-top: 2rem;
}

.form-button-primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
}

.form-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3, #004085);
}

.form-button-primary:active {
  transform: translateY(0);
}

.form-button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.button-icon {
  font-size: 1.2em;
}

@media (max-width: 768px) {
  .form-button-primary {
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1rem;
  }
}

/* Responsive pour les nouveaux éléments */
@media (max-width: 768px) {
  .form-header {
    padding: 1.5rem 1rem;
  }
  
  .form-header h1 {
    font-size: 2rem;
  }
  
  .form-description {
    font-size: 1rem;
  }
  
  .form-section {
    padding: 1rem;
  }
  
  .distance-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .distance-input-group select {
    width: 100%;
  }
  
  .pace-input-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  nav ul {
    display: none !important; /* Hide navigation links */
  }

  .burger-menu {
    display: block !important; /* Show burger menu icon */
    cursor: pointer;
  }

  /* Afficher les boutons de section sur petits écrans */
  .section-buttons {
    display: flex;
    align-items: center; /* Centrer verticalement les icônes */
    justify-content: space-around; /* Répartir l'espace horizontalement */
    width: 100%; /* S'assurer que le conteneur prend toute la largeur */
  }

  .section-buttons button {
    display: flex; /* Utiliser flexbox pour centrer l'icône */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    padding: 10px; /* Ajuster le padding pour les icônes */
    border: none;
    border-bottom: 2px solid transparent; /* Bordure inférieure transparente par défaut */
    background-color: transparent; /* Fond transparent */
    cursor: pointer;
    color: #333; /* Couleur par défaut des icônes */
    font-size: 1rem; /* Peut être ajusté si nécessaire */
    flex-grow: 1; /* Permettre aux boutons de prendre l'espace disponible */
  }

  .section-buttons button.active {
    border-bottom-color: #ff0000; /* Bordure inférieure rouge pour l'onglet actif */
    color: #ff0000; /* Couleur du texte/icône pour l'onglet actif */
  }

   .section-buttons button svg {
    width: 24px; /* Taille des icônes */
    height: 24px;
    stroke: #333; /* Couleur par défaut du trait de l'icône */
  }

  .section-buttons button.active svg {
    stroke: #ff0000; /* Couleur du trait de l'icône pour le bouton actif */
  }


  /* Cacher les sections par défaut sur petits écrans */
  .user-summary-sidebar,
  main.container,
  aside#training-sessions {
    display: none;
    width: 100%; /* Prend toute la largeur disponible */
  }

  /* Afficher la section active sur petits écrans */
  .user-summary-sidebar.active-section,
  main.container.active-section,
  aside#training-sessions.active-section {
    display: block;
    text-align: center; /* Centrer le contenu de l'aside gauche en mobile */
    padding: 0; /* Supprimer le padding en mobile */
    }
  
    .user-profile-card {
      margin: 0 auto; /* Centrer le bloc user-profile-card en mobile */
      max-width: 300px; /* Réduire la largeur maximale en mobile */
    }
  
    #training-sessions-container {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

.user-profile-card {
  margin: 0 auto; /* Centrer le bloc user-profile-card en mobile */
  text-align: center; /* Centrer le contenu */
}

.burger-menu {
  display: none; /* Show burger menu icon by default */
  color: var(--neutral-800);
  font-size: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
}

/* Lien d'upgrade dans la navigation (pilule accent) */
nav a.upgrade-link {
  background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
  color: #fff;
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-sm);
}

nav a.upgrade-link:hover {
  background: linear-gradient(135deg, var(--warning-600), var(--warning-600));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

nav a.subscription-link {
  color: var(--primary-600);
  font-weight: var(--font-semibold);
}

/* Style the logout link to look like a regular link */
#logout-form button {
  background: none;
  color: #fff;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-decoration: none;
}

#logout-form button:hover {
  text-decoration: underline;
  opacity: 1;
}

h1 {
  text-align: center;
}

/* Media query for large screens */
/* Media query pour les grands écrans (cacher les boutons de section) */
@media (min-width: 769px) {
  .section-buttons {
    display: none;
  }

  /* S'assurer que toutes les sections sont visibles sur grands écrans */
  .user-summary-sidebar,
  main.container,
  aside#training-sessions {
    display: block; /* S'assurer qu'ils sont visibles */
    width: auto; /* Annuler la largeur de 100% des petits écrans */
  }

  /* Appliquer les propriétés Flexbox directement aux éléments */
  .user-summary-sidebar {
    flex: 1;
  }

  main.container {
    flex: 3;
  }

  aside#training-sessions {
    flex: 1;
    text-align: center; /* Centrer le contenu */
  }

  aside#training-sessions h2 {
    text-align: center;
  }
}

@media (min-width: 801px) {
  main.profile-page {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Adjust the gap as needed */
  }

  main.profile-page .profile-picture-form {
    width: 20%; /* Adjust the width as needed */
    height: fit-content;
    margin-right: 0;
  }

  main.profile-page form:not(.profile-picture-form) {
    margin-left: 0;
  }
  /*form {
    max-width: 500px;
  }*/
  form.training {
    max-width: 100%;
  }
}

/* Style for error messages */
.error-message {
  text-align: center;
  color: red;
  font-size: 1.2em;
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.training-type-fields {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

hr {
  border: 1px solid #ccc;
  width: 100%;
}

/* ===== MODERN TRAINING CARDS DESIGN ===== */
.training-card {
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #6B7280; /* Default color, will be overridden */
  transition: all 0.3s ease;
  position: relative;
}

.training-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Training type color variants */
.training-card[data-type="Footing"] {
  border-left-color: #10B981;
}

.training-card[data-type="Sortie Longue"] {
  border-left-color: #3B82F6;
}

.training-card[data-type="Récupération Active"] {
  border-left-color: #8B5CF6;
}

.training-card[data-type="Fractionné"] {
  border-left-color: #EF4444;
}

.training-card[data-type="Fractionné Avancé"] {
  border-left-color: #06B6D4;
}

.training-card[data-type="Seuil"] {
  border-left-color: #F59E0B;
}

.training-card[data-type="PPG"] {
  border-left-color: #EC4899;
}

/* Header section with badge and join button */
.training-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.training-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px; /* Hauteur minimale pour maintenir l'espacement constant */
  justify-content: flex-end;
}

.training-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
}

/* Activity type badge */
.training-type-badge {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 2px solid transparent; /* Même bordure que le bouton pour cohérence */
  margin-top: 10px;
  margin-bottom: 10px;
}

.training-type-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.training-type-badge[data-type="Footing"] {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.training-type-badge[data-type="Sortie Longue"] {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.training-type-badge[data-type="Récupération Active"] {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.training-type-badge[data-type="Fractionné"] {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.training-type-badge[data-type="Fractionné Avancé"] {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

.training-type-badge[data-type="Seuil"] {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.training-type-badge[data-type="PPG"] {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
}

.training-meta-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 0.85rem;
  color: #6c757d;
}

.training-type-header {
  padding: 10px 15px;
  color: white;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.training-type-header[data-type="Footing"] {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.training-type-header[data-type="Sortie Longue"] {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.training-type-header[data-type="Récupération Active"] {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.training-type-header[data-type="Fractionné"] {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.training-type-header[data-type="Fractionné Avancé"] {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

.training-type-header[data-type="Seuil"] {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.training-type-header[data-type="PPG"] {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
}

.training-type-header[data-type="Autre"] {
  background: linear-gradient(135deg, #64748B 0%, #475569 100%);
}

/* Creator info in header */
.creator-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6B7280;
  font-size: 14px;
}

.creator-info img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #E5E7EB;
}

/* Edit button */
.edit-button {
  background: #F3F4F6;
  border: none;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-button:hover {
  background: #E5E7EB;
  transform: scale(1.05);
}

.edit-button svg {
  stroke: #6B7280;
  transition: stroke 0.2s ease;
}

.edit-button:hover svg {
  stroke: #374151;
}

/* Date and location info */
.training-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  margin-top: 8px;
}

.training-datetime,
.training-location,
.training-creator,
.training-participants {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
}

.training-datetime svg,
.training-location svg,
.training-creator svg,
.training-participants svg {
  stroke: #6B7280;
  flex-shrink: 0;
}

.creator-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 4px;
  border: 1px solid #E5E7EB;
}

/* Description section */
.training-description-section {
  background: #F9FAFB;
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 16px;
}

.training-description {
  margin: 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}

/* Participants section */
.participants-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
}

.participants-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.participants-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* Participant count and progress bar */
.participant-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.participant-progress {
  background: #E5E7EB;
  height: 4px;
  width: 60px;
  border-radius: 5px;
  overflow: hidden;
}

.participant-progress-fill {
  background: #10B981;
  height: 100%;
  transition: width 0.3s ease;
}

.participant-count-text {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* Individual participant items */
.participants-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.participant-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

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

.participant-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.participant-info img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
}

.participant-name {
  font-size: 14px;
  color: #374151;
}

.participant-status {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

/* Status indicators */
.status-confirmed {
  color: #10B981 !important;
}

.status-pending {
  color: #F59E0B !important;
}

.status-rejected {
  color: #EF4444 !important;
}

/* Empty state */
.no-participants {
  text-align: center;
  padding: 16px;
  color: #9CA3AF;
  font-size: 14px;
  background: #F9FAFB;
  border-radius: 5px;
  border: 2px dashed #E5E7EB;
}

/* Action buttons for participants */
.participant-actions {
  display: flex;
  gap: 6px;
}

.action-button {
  padding: 4px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-button.accept {
  background: #10B981;
  color: white;
}

.action-button.accept:hover {
  background: #059669;
}

.action-button.reject {
  background: #EF4444;
  color: white;
}

.action-button.reject:hover {
  background: #DC2626;
}

.action-button.remove {
  background: #6B7280;
  color: white;
}

.action-button.remove:hover {
  background: #4B5563;
}

/* Responsive design */
@media (max-width: 768px) {
  .training-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .training-title-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .training-meta {
    gap: 6px;
  }
  
  .participant-count {
    gap: 6px;
  }
  
  .participant-progress {
    width: 40px;
  }
}

.action-button.remove {
  background-color: #ff9800; /* Orange */
  color: white;
}

.action-button:hover {
  opacity: 0.8;
}

.edit-button {
  padding: 5px 10px;
  background-color: #2196F3; /* Blue */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8em;
  margin-left: 10px; /* Space between creator info and edit button */
}

.edit-button:hover {
  opacity: 0.8;
}

/* Styles pour aligner les champs de recherche sur la même ligne */
.search-form-improved {
  display: flex;
  flex-direction: row; /* Aligner les éléments en ligne */
  flex-wrap: wrap; /* Permettre le passage à la ligne sur petits écrans */
  gap: 10px; /* Espacement entre les champs */
  align-items: center; /* Centrer verticalement les éléments */
  max-width: fit-content; 
}

.search-input-group {
  flex: 1 1 auto; /* Permettre aux groupes de champs de prendre et de réduire l'espace */
  margin-bottom: 0; /* Annuler la marge inférieure générale */
  width: auto; /* Laisser Flexbox gérer la largeur */
  border-right: 1px solid #ccc; /* Ajouter une bordure droite */
  padding: 5px 10px 0; /* Ajouter du padding en haut et horizontal */
  box-sizing: border-box; /* Inclure le padding dans la largeur */
}

.search-input-group label {
  display: block; /* Assurer que le label est sur sa propre ligne au-dessus de l'input */
  margin-bottom: 5px;
}

.date-time-inputs {
  display: flex;
  margin-bottom: 0px;
  align-items: center; /* Centrer verticalement les éléments */
}

.date-time-inputs input {
  flex: 1; /* Permettre aux champs date et time de prendre l'espace disponible */
}

.search-button {
  padding: 8px 15px; /* Ajuster le padding du bouton de recherche */
  height: 35px; /* Aligner la hauteur avec les champs input */
  display: flex; /* Utiliser flexbox pour centrer l'icône */
  align-items: center; /* Centrer verticalement l'icône */
  justify-content: center; /* Centrer horizontalement l'icône */
  margin-bottom: 0; /* Annuler la marge inférieure générale */
  flex-shrink: 0; /* Empêcher le bouton de rétrécir */
.search-form-improved .search-input-group:last-child,
.search-form-improved .search-button {
  border-right: none; /* Supprimer la bordure droite du dernier élément et du bouton */
}
}

.search-button svg {
  width: 20px; /* Ajuster la taille de l'icône */
  height: 20px;
}

/* Media query pour les petits écrans pour empiler les champs de recherche */
@media (max-width: 768px) {
  .search-form-improved {
    flex-direction: column; /* Empiler les éléments verticalement */
    align-items: stretch; /* Étirer les éléments sur toute la largeur */
  }

  .search-input-group {
    width: 100%; /* Les groupes de champs prennent toute la largeur */
    min-width: auto; /* Supprimer la largeur minimale */
    border-right: none; /* Supprimer la bordure droite en mobile */
    border-bottom: 1px solid #ccc; /* Ajouter une bordure inférieure en mobile */
  }

  .search-input-group:last-child {
    border-bottom: none; /* Supprimer la bordure inférieure du dernier élément en mobile */
  }

  .date-time-inputs {
    flex-direction: row; /* Garder date et time sur la même ligne en mobile */
    gap: 5px;
    width: auto;
  }

  .date-time-inputs input {
    width: auto; /* Laisser flex: 1 gérer la largeur */
  }

  .search-button {
    width: 100%; /* Le bouton prend toute la largeur */
    padding: 10px 15px; /* Rétablir le padding par défaut du bouton */
  }
}

/* Styles for the edit button */
.edit-button {
  background-color: #ff0000; /* Red background */
  color: white; /* White icon color */
  border: none;
  border-radius: 50%; /* Make it circular */
  cursor: pointer;
  width: 30px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  display: flex; /* Use flexbox to center the icon */
  justify-content: center; /* Center icon horizontally */
  align-items: center; /* Center icon vertically */
  padding: 0; /* Remove padding */
  margin-left: 10px; /* Space between creator info and edit button */
}

.edit-button svg {
  stroke: white; /* Ensure icon color is white */
  width: 16px; /* Adjust icon size as needed */
  height: 16px; /* Adjust icon size as needed */
}

.edit-button:hover {
  opacity: 0.8;
}

/* Styles for the edit button */
.edit-button {
  background-color: #ff0000; /* Red background */
  color: white; /* White icon color */
  border: none;
  border-radius: 50%; /* Make it circular */
  cursor: pointer;
  width: 30px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  display: flex; /* Use flexbox to center the icon */
  justify-content: center; /* Center icon horizontally */
  align-items: center; /* Center icon vertically */
  padding: 0; /* Remove padding */
  margin-left: 10px; /* Space between creator info and edit button */
}

.edit-button svg {
  stroke: white; /* Ensure icon color is white */
  width: 16px; /* Adjust icon size as needed */
  height: 16px; /* Adjust icon size as needed */
}

.edit-button:hover {
  background-color: #4CAF50; /* Green background on hover */
  opacity: 1; /* Keep opacity at 1 on hover */
}


/* Styles pour le formulaire de recherche amélioré */
.search-form-improved {
  display: flex;
  align-items: center;
  gap: 10px; /* Espace entre les champs */
  background-color: #fff; /* Fond blanc */
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
  width: 100%; /* Utiliser toute la largeur disponible */
  box-sizing: border-box; /* Inclure le padding dans la largeur */
  margin: 0px auto; /* Centrer le formulaire */
  flex-wrap: wrap; /* Permettre le passage à la ligne sur petits écrans */
}

.search-input-group {
  display: flex;
  flex-direction: column; /* Par défaut, les éléments sont empilés */
  flex-grow: 1; /* Permettre aux groupes de prendre de l'espace */
  flex-basis: 0;
  width: fit-content;
}

/* Styles spécifiques pour les groupes de date/heure */

.search-input-group label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #555; /* Couleur du texte des labels */
}

.search-form-improved input[type="text"],
.search-form-improved input[type="date"],
.search-form-improved input[type="time"] {
  border: none; /* Supprimer la bordure par défaut */
  padding: 8px;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%; /* Prendre toute la largeur disponible dans le groupe */
  font-size: 1rem; /* Agrandir la police */
}

.search-form-improved input[type="date"],
.search-form-improved input[type="time"] {
    flex: 1 1 auto; /* Permettre aux champs de prendre et de réduire l'espace */
    /* Les propriétés display, width et margin-right sont gérées par Flexbox et le gap du parent */
}

.search-input-group label {
  white-space: nowrap; /* Empêcher le texte du label de passer à la ligne */
}


.search-button {
  background-color: #ff0000; /* Couleur de fond rouge */
  color: white;
  border: none;
  border-radius: 50%; /* Bouton rond */
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Taille du bouton */
  height: 40px; /* Taille du bouton */
  flex-shrink: 0; /* Empêcher le bouton de rétrécir */
}
.search-button:hover {
  background-color: #45a049; /* Couleur de fond verte au survol */
}

.search-button svg {
  stroke: white; /* Couleur de l'icône en blanc */
  width: 24px;
  height: 24px;
}

/* Media query pour les petits écrans */
@media (max-width: 768px) {
  .search-form-improved {
    flex-direction: column; /* Empiler les éléments verticalement */
    align-items: stretch; /* Étirer les éléments pour prendre toute la largeur */
    border-radius: 5px; /* Moins d'arrondi sur petits écrans */
  }

  .search-input-group {
    width: 100%; /* Chaque groupe prend toute la largeur */
    margin-bottom: 10px; /* Espacement entre les groupes */
  }

  .search-form-improved input[type="date"],
  .search-form-improved input[type="time"] {
      display: block; /* Afficher les champs date et heure en bloc sur petits écrans */
      width: 100%; /* Prendre toute la largeur */
      margin-right: 0; /* Supprimer la marge */
  }

  .search-button {
    width: 100%; /* Le bouton prend toute la largeur */
    border-radius: 5px; /* Moins d'arrondi pour le bouton */
    height: auto; /* Hauteur automatique */
    padding: 10px; /* Ajuster le padding */
  }
}

.toggleContainer {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   width: fit-content;
   border: 3px solid red;
   border-radius: 20px;
   background: red;
   color: #343434;
   cursor: pointer;
   height: 30px;
 }
 .toggleContainer::before {
   content: '';
   position: absolute;
   width: 50%;
   height: 100%;
   left: 0%;
   border-radius:20px;
   background: white;
   transition: all 0.3s;
 }
 .toggleCheckbox:checked + .toggleContainer::before {
    left: 50%;
 }
 .toggleContainer div {
  padding: 6px;
  text-align: center;
  z-index: 1;
  font-size: 0.8rem;
}
 .toggleCheckbox {
   display: none;
 }
 .toggleCheckbox:checked + .toggleContainer div:first-child{
   color: white;
   transition: color 0.3s;
 }
 .toggleCheckbox:checked + .toggleContainer div:last-child{
   color: #343434;
   transition: color 0.3s;
 }
 .toggleCheckbox + .toggleContainer div:first-child{
   color: #343434;
   transition: color 0.3s;
 }
 .toggleCheckbox + .toggleContainer div:last-child{
   color: white;
   transition: color 0.3s;
 }

.toggleContainer:hover {
  background: #45a049;
  border: 3px solid #45a049;
}

.toggle-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    border: 3px solid red;
    border-radius: 20px;
    background: red;
    color: white;
    cursor: pointer;
    height: 30px;
    margin: 0 auto;
    overflow: hidden;
}

.toggle-input {
    display: none;
}

.toggle-label {
    position: relative;
    display: inline-block;
    padding: 6px;
    text-align: center;
    z-index: 1;
    font-size: 0.8rem;
    font-family: Verdana, sans-serif;
    color: white;
    transition: color 0.3s;
    width: 33.33%;
}

.toggle-input:checked + .toggle-label {
    color: #343434;
}

.toggle-slider {
    position: absolute;
    width: 33.33%;
    height: 100%;
    left: 0%;
    border-radius: 20px;
    background: white;
    transition: all 0.3s;
}

#visibilityAll:checked ~ .toggle-slider {
    transform: translateX(0);
}

/* Dashboard Layout */
.dashboard-container {
  display: flex;
  gap: 20px; /* Espace entre les colonnes */
  padding: 20px;
  flex-wrap: wrap; /* Permettre aux colonnes de s'enrouler sur les petits écrans */
}

.dashboard-container > main {
  flex: 3; /* La colonne principale prend plus d'espace */
  min-width: 300px; /* Largeur minimale pour la colonne principale */
}

.dashboard-container > aside {
  flex: 1; /* Les colonnes latérales prennent moins d'espace */
  min-width: 250px; /* Largeur minimale pour les colonnes latérales */
  background-color: #fff;
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* User Summary Sidebar */
.user-summary-sidebar {
  order: -1; /* Place la colonne latérale du résumé de l'utilisateur à gauche */
}

.user-profile-card {
  text-align: center;
  padding: 20px;
}

.user-profile-card .profile-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 1px solid #ff0000; /* Bordure rouge comme sur la capture */
}

.user-profile-card h3 {
  margin-bottom: 20px;
  color: #333;
}

.user-profile-card .stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.user-profile-card .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-profile-card .stat-item span:first-child {
  font-size: 0.9em;
  color: #666;
}

.user-profile-card .stat-item .stat-value {
  font-size: 1.2em;
  font-weight: bold;
  color: #ff0000; /* Couleur rouge pour les valeurs numériques */
}

.user-profile-card .last-activity {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  text-align: left;
}

.user-profile-card .last-activity h4 {
  margin-bottom: 10px;
  color: #333;
}

.user-profile-card .last-activity p {
  font-size: 0.9em;
  color: #555;
}

.user-profile-card .training-journal-button {
  display: block;
  margin-top: 20px;
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

.user-profile-card .training-journal-button:hover {
  background-color: #cc0000;
}

#training-search {
  text-align: center;
}

/* Responsive adjustments for dashboard */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }

  .user-summary-sidebar {
    order: 0; /* Remet la colonne latérale du résumé de l'utilisateur à sa place normale sur les petits écrans */
  }
}

.planning-button {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: block;
  padding: 0.5rem 1rem;
  text-align: center;
}

.training-card {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.training-card h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
  color: black; /* Add this line */
}

.training-card p {
  font-size: 1em;
  margin-bottom: 5px;
}

.training-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* Ajouter un peu d'espace en bas */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.creator-info {
  display: flex;
  align-items: center;
}

/* Media query pour les grands écrans (cacher les boutons de section) */
@media (min-width: 769px) {
  .section-buttons {
    display: none;
  }

  /* S'assurer que toutes les sections sont visibles sur grands écrans */
  #user-summary-section,
  #training-search-section,
  #training-sessions-section {
    display: block !important; /* Utilise !important pour outrepasser les styles des petits écrans */
  }
}

.dashboard-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.container {
  width: 70%;
  margin: 0 auto;
}

#training-sessions {
  width: 28%;
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  background-color: #fff;
}

#visibilityWomen:checked ~ .toggle-slider {
    transform: translateX(100%);
}

#visibilityMen:checked ~ .toggle-slider {
    transform: translateX(200%);
}

.toggle-container:hover {
  background: #45a049;
  border: 3px solid #45a049;
}

/* Styles pour aligner le toggle et les champs sur la même ligne */
#footingFields .form-div {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pour répartir les éléments */
}

#footingDurationDiv,
#footingDistanceDiv {
    display: flex;
    align-items: center;
}

#footingDistanceDiv label {
    margin-right: 5px;
}

#footingDistanceDiv input {
    width: 65px; /* Ajuster la largeur ici */
    margin-right: 5px;
}

#footingDistanceDiv select {
    width: auto;
    height: 35px; /* Ajuster la hauteur ici */
}

/* ===== SEARCH RESULTS SPECIFIC STYLES ===== */
/* Styles spécifiques pour les résultats de recherche modernisés */

#search-results {
    margin-top: 30px;
}

#search-results h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
}

#search-results h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ff0000, #45a049);
    border-radius: 2px;
}

#search-results-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Améliorations des cartes de résultats de recherche */
#search-results .training-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#search-results .training-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--training-color, #6B7280) 0%,
        var(--training-color, #6B7280) 100%);
}

#search-results .training-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* Couleurs spécifiques pour chaque type d'entraînement */
#search-results .training-card[data-type="Footing"] {
    --training-color: #10B981;
}

#search-results .training-card[data-type="Sortie Longue"] {
    --training-color: #3B82F6;
}

#search-results .training-card[data-type="Récupération Active"] {
    --training-color: #8B5CF6;
}

#search-results .training-card[data-type="Fractionné"] {
    --training-color: #EF4444;
}

#search-results .training-card[data-type="Fractionné Avancé"] {
    --training-color: #06B6D4;
}

#search-results .training-card[data-type="Seuil"] {
    --training-color: #F59E0B;
}

#search-results .training-card[data-type="PPG"] {
    --training-color: #EC4899;
}

.training-content-with-map {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Styles pour les cartes dans les résultats de recherche */
.training-map {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid #f1f3f4;
    transition: border-color 0.3s ease;
}

.training-card:hover .training-map {
    border-color: var(--training-color, #6B7280);
}

/* Ajustements pour l'avatar du créateur dans les résultats de recherche */
.creator-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 8px;
    border: 1px solid #e5e5e5;
}

/* Responsive pour les résultats de recherche */
@media (max-width: 768px) {
    .training-content-with-map {
        flex-direction: column;
        gap: 15px;
    }
    
    .training-map {
        width: 100%;
        height: 200px;
    }
    
    .training-actions {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .training-actions .form-button {
        font-size: 0.8em;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .training-content-with-map {
        gap: 10px;
    }
    
    .training-map {
        height: 160px;
    }
    
    .training-actions .form-button {
        font-size: 0.75em;
        padding: 5px 10px;
        gap: 6px;
    }
    
    .training-actions .form-button svg {
        width: 14px;
        height: 14px;
    }
}

#footingFields div, 
#footingFields input,
#footingFields select,
#sortieLongueFields div,
#sortieLongueFields input,
#sortieLongueFields select  {
  margin-bottom: 0px;
}
/* Media query for medium screens */
@media (min-width: 768px) and (max-width: 1200px) {
  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  .challenge-list {
    justify-content: space-around;
  }
}
/* Responsive images */
.responsive-img {
  max-width: 100%;
  height: auto;
}
/* Styles pour les champs date et heure dans createTraining.ejs */
.form-div[style*="display: flex; flex-direction: column;"] {
  width: 50%;
  display: inline-block;
  margin: auto;
}
/* Specific rule for textarea height */
form textarea {
  height: auto; /* Allow height to be determined by content and rows attribute */
  min-height: 70px; /* Set a minimum height (approx 3 lines with default line-height) */
}
.training-details {
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Espace en dessous des détails */
}

.training-description {
  margin-top: 5px; /* Espace au-dessus de la description */
  color: #555; /* Couleur légèrement différente pour la description */
}
.creator-info .creator-name {
  display: none; /* Cacher le nom de l'utilisateur par défaut */
}

.creator-info:hover .creator-name {
  display: inline; /* Afficher le nom de l'utilisateur au survol */
  margin-left: 5px; /* Ajouter un petit espace entre l'image et le nom */
}

.creator-info .creator-profile-picture {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.training-map {
    height: 200px; /* Ajustez la hauteur selon vos besoins */
    width: 100%; /* La carte prendra toute la largeur disponible dans son conteneur */
    margin-top: 10px; /* Espacement au-dessus de la carte */
    margin-left: auto; /* Centrer la carte */
    margin-right: auto; /* Centrer la carte */
}

.training-content-flex {
    display: flex;
    flex-direction: column; /* Par défaut en colonne pour les petits écrans */
    align-items: center;
    gap: 10px;
}

@media (min-width: 769px) {
    .training-content-flex {
        flex-direction: row-reverse; /* Inverser l'ordre pour que la carte soit à gauche */
        justify-content: space-between;
        align-items: flex-start;
    }

    .training-content-flex .training-description {
        flex: 1; /* Le texte prend l'espace restant */
    }

    .training-content-flex .training-map {
        flex-shrink: 0; /* La carte ne rétrécit pas */
        margin-right: 20px; /* Espace entre la carte et le texte */
        margin-left: 0; /* Supprimer la marge gauche précédente */
    }

    #search-results-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Deux colonnes de taille égale */
        gap: 20px; /* Espacement entre les colonnes et les lignes */
    }

    .training-card {
        width: auto; /* Réinitialiser la largeur pour le grid */
        box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    }

    #search-results-container {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Ajuster pour deux colonnes maximum */
        justify-content: center; /* Centrer les éléments dans le grid */
    }
}

.form-button {
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-block; /* Pour que le padding et les marges fonctionnent comme un bouton */
  text-align: center; /* Centrer le texte */
  text-decoration: none; /* Supprimer le soulignement du lien */
  margin: 10px auto; /* Centrer horizontalement et ajouter une marge verticale */
}

.form-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hero-content {
  max-width: 1200px; /* Limiter la largeur */
  margin: 0 auto; /* Centrer le bloc */
}
/* Styles for editTraining.ejs */
.edit-training-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}

.card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
}

.card-header {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.card-body {
    padding: 1.5rem;
}

.training-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    align-items: center;
}

.form-group label {
    margin-right: 1rem;
}

.form-group label {
    font-weight: bold;
    color: #555;
    margin-bottom: 0.5rem;
}

.form-group p {
    margin: 0;
    padding: 0.5rem 0;
    color: #333;
}

.form-group-full {
    grid-column: 1 / -1;
}

#map {
    height: 243px;
    width: 100%;
    border-radius: 5px;
    margin-top: 1.5rem;
}

#participants-list {
    /* Styles for participants list can be added here */
}

#messages-section {
    display: flex;
    flex-direction: column;
}

#messages-list {
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    padding: 1rem;
    border-radius: 5px;
}

#message-input {
    display: flex;
    gap: 1rem;
}

#message-input textarea {
    flex-grow: 1;
    border-radius: 5px;
    padding: 0.75rem;
    border: 1px solid #ccc;
}

#message-input .btn {
    flex-shrink: 0;
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Toasts injectés dans le container par showToast().
   On neutralise la règle .toast legacy (centrée, fond rouge, opacity:0)
   qui provoquait un flash rouge apparaissant/disparaissant aussitôt. */
#toast-container .toast {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 280px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 10px;
    color: #fff;
    background-color: #334155; /* info / défaut */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

#toast-container .toast.success {
    background-color: #10b981;
}

#toast-container .toast.error {
    background-color: #ef4444;
}

#toast-container .toast .toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#toast-container .toast .toast-icon {
    flex-shrink: 0;
    color: #fff;
}

#toast-container .toast .toast-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    padding: 0;
}

#toast-container .toast .toast-close:hover {
    opacity: 1;
}
.form-group-inline {
    flex-direction: row;
    align-items: center;
}

.form-group-inline label {
    margin-bottom: 0;
    margin-right: 1rem;
}

.form-group-inline input {
    width: 80px;
}
.training-type-header {
    margin-left: auto;
}
.card-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.training-details-list {
    margin-top: 1rem;
}

.detail-item {
    display: flex;
    margin-bottom: 0.5rem;
}

.detail-label {
    font-weight: bold;
    margin-right: 0.5rem;
}

.detail-value {
    /* Styles for value if needed */
}
.training-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-label {
  font-weight: bold;
  color: #555;
}

.detail-value {
  color: #333;
}
/* Notification Icon */
.notification-icon {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.notification-icon .fa-bell {
  font-size: 1.5rem;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background-color: var(--primary-500);
  color: white;
  border-radius: var(--radius-full);
  padding: 2px 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

.notification-dropdown {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  background-color: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  width: 360px;
  max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
  animation: notif-dropdown-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes notif-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* En-tête du panneau */
.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-200);
}

.notification-dropdown-title {
  font-size: 1rem;
  font-weight: var(--font-semibold);
  color: var(--neutral-700, #404040);
}

.notification-mark-all {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--primary-500);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.notification-mark-all:hover {
  text-decoration: underline;
}

.notification-mark-all:disabled {
  color: var(--neutral-200);
  cursor: default;
  text-decoration: none;
}

/* Liste scrollable */
.notification-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sur petit écran (menu burger), ancrer le panneau au viewport
   pour éviter tout débordement et scroll horizontal */
@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed;
    top: 70px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

.notification-item {
  border-bottom: 1px solid var(--neutral-100, #f5f5f5);
  position: relative;
  transition: background-color 0.15s ease;
}

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

.notification-item:hover {
  background-color: var(--neutral-50, #fafafa);
}

.notification-item.unread {
  background-color: var(--primary-50, #fef2f2);
}

.notification-item.unread:hover {
  background-color: #fde8e8;
}

.notification-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 12px 16px 12px 14px;
  white-space: normal; /* annule le nowrap hérité de "nav a" */
}

.notification-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

/* Pastille d'icône colorée selon le type */
.notification-icon-item {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  background-color: #e0edff;
  color: #2563eb;
}

.notification-icon-item.notif-success { background-color: #d1fae5; color: #059669; }
.notification-icon-item.notif-warning { background-color: #fef3c7; color: #d97706; }
.notification-icon-item.notif-danger  { background-color: #fee2e2; color: #dc2626; }
.notification-icon-item.notif-info    { background-color: #e0edff; color: #2563eb; }

.notification-text {
  flex: 1;
  min-width: 0;
}

.notification-message {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--neutral-700, #404040);
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.notification-item.unread .notification-message {
  font-weight: var(--font-semibold);
  color: #1f2937;
}

.notification-time {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--neutral-500, #737373);
}

/* Point de non-lu */
.notification-item.unread .notification-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-500);
}

/* État vide */
.notification-item.no-notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--neutral-500, #737373);
  padding: 32px 20px;
  font-size: 0.875rem;
}

.notification-item.no-notifications i {
  font-size: 1.75rem;
  color: var(--neutral-200, #e5e5e5);
}
.teams-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.teams-section h4 {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: #333;
}

.teams-section h5 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1em;
  color: #555;
  font-weight: 600;
}

.teams-section ul.teams-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.teams-section .team-item {
  margin-bottom: 8px;
}

.teams-section .team-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  text-decoration: none;
  color: #333;
  border-radius: 6px;
  transition: all 0.2s ease;
  background-color: #f8f9fa;
  position: relative;
}

.teams-section .team-link:hover {
  background-color: #e9ecef;
  transform: translateX(4px);
}

.teams-section .team-thumbnail {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #ff0000;
  background-color: #fff;
}

.teams-section .team-name {
  flex: 1;
  font-weight: 500;
  /*color: #007bff;*/
}

.teams-section .team-creator-star {
  flex-shrink: 0;
  color: #ffc107;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease;
}

.teams-section .team-link:hover .team-creator-star {
  transform: scale(1.15) rotate(12deg);
}

.teams-section .no-team {
  color: #6c757d;
  font-style: italic;
  padding: 8px;
}

/* ===== STYLES POUR LA RÉCUPÉRATION TEMPS/DISTANCE DANS LES INTERVALLES AVANCÉS ===== */
.interval-rest-time-div,
.interval-rest-distance-div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.interval-rest-pace-div {
  display: none;
  flex-direction: column;
}

.interval-rest-pace-div .form-label {
  margin-bottom: 5px;
  font-weight: 500;
}

.interval-rest-pace-div select {
  width: 100%;
}

/* Amélioration de l'affichage du toggle dans les intervalles */
.interval-config .toggle-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.interval-config .toggle-fieldset legend {
  margin-bottom: 10px;
}

.interval-config .toggle-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== GROUPS PAGES STYLES ===== */

/* Action bar for groups page */
.action-bar {
  margin-bottom: 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}


/* Form actions for create group page */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.form-actions .btn-secondary:hover {
background-color: #45a049;
}

/* Groups list grid */
.groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Group card styles */
.group-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 5px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.group-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.group-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.group-card-title {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.badge-creator {
  background: #ffc107;
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.group-card-description {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.group-card-description.empty {
  font-style: italic;
  color: #999;
}

.group-card-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stat-item i {
  color: var(--primary-color);
}

.group-card-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.group-card-actions .btn-secondary,
.group-card-actions .btn-danger {
  flex: 1;
  min-width: 120px;
  justify-content: center;
  font-size: 0.9rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  text-align: center;
}

.group-card-actions .btn-secondary {
  background: #6c757d;
  color: white;
}

.group-card-actions .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.empty-state i {
  color: #ddd;
  margin-bottom: 1.5rem;
}

.empty-state h3 {
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem 0;
  color: var(--text-primary);
}

.empty-state p {
  font-size: 1rem;
  margin: 0.5rem 0;
}

/* Checkbox styles for groups */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox-label-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

/* Responsive styles for groups */
@media (max-width: 768px) {
  .action-bar {
    justify-content: stretch;
  }


  .groups-list {
    grid-template-columns: 1fr;
  }

  .group-card-actions {
    flex-direction: column;
  }

  .group-card-actions .btn-secondary,
  .group-card-actions .btn-danger {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

}

/* Force 2 columns on large screens for groups list */
/*@media (min-width: 1024px) {
  .groups-list {
    grid-template-columns: repeat(2, 1fr);
  }
}*/

/* Supprimer le contour des boutons "Retirer" dans la gestion d'équipe */
.member-card .btn-danger,
.members-grid .btn-danger,
.invitation-item .btn-danger {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.member-card .btn-danger:hover,
.members-grid .btn-danger:hover,
.invitation-item .btn-danger:hover {
  border: none !important;
  outline: none !important;
}

.member-card .btn-danger:focus,
.members-grid .btn-danger:focus,
.invitation-item .btn-danger:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.member-card .btn-danger:active,
.members-grid .btn-danger:active,
.invitation-item .btn-danger:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Group Details Page Styles */
.group-details-picture-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.group-image-detail {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
}

.detail-item {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: var(--text-primary);
}

.detail-item strong {
  display: inline-block;
  min-width: 120px;
  color: var(--primary-color);
}

.description-block {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
}

.description-block strong {
  display: block;
  margin-bottom: 0.5rem;
}

.description-block p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.member-item i {
  color: var(--primary-color);
}

.member-item span {
  font-weight: 500;
}

.empty-member-list {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.group-actions-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ===== FRACTIONNÉ AVANCÉ ===== */

/* Conteneur de structure avancée */
.advanced-structure-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  min-height: 100px;
  padding: 10px;
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}

.advanced-structure-container:empty::before {
  content: "Cliquez sur les boutons ci-dessous pour ajouter des blocs ou des intervalles";
  color: #999;
  text-align: center;
  display: block;
  padding: 40px 20px;
}

/* Item de structure (bloc ou intervalle) */
.structure-item {
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.structure-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.structure-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.structure-item-header h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bloc (série) */
.block-item {
  border-color: #4CAF50;
  background: linear-gradient(to bottom, #f1f8f4 0%, white 100%);
}

.block-item > .structure-item-header h4 {
  color: #4CAF50;
}

.block-config {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.block-intervals-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 15px 0;
  padding: 15px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px dashed #ddd;
}

.block-intervals-container:empty::before {
  content: "Aucun intervalle dans ce bloc";
  color: #999;
  text-align: center;
  display: block;
  padding: 20px;
  font-style: italic;
}

/* Intervalle */
.interval-item {
  border-color: #2196F3;
  background: linear-gradient(to bottom, #e3f2fd 0%, white 100%);
}

.interval-item > .structure-item-header h4 {
  color: #2196F3;
}

.block-intervals-container .interval-item {
  margin-left: 0;
  background: white;
  border-color: #64B5F6;
}

.interval-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Input avec unité */
.input-with-unit {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-with-unit input {
  flex: 2;
}

.input-with-unit select {
  flex: 1;
  min-width: 80px;
}

/* Boutons */
.btn-icon {
  background: none;
  border: none;
  color: #f44336;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 1.1em;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.btn-icon:hover {
  background: #ffebee;
  color: #d32f2f;
}

.btn-small {
  padding: 8px 15px;
  font-size: 0.9em;
}

.add-interval-to-block {
  margin-top: 10px;
  width: 100%;
}

.btn-secondary {
  background: var(--neutral-50);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-secondary:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .structure-item {
    padding: 10px;
  }
  
  .input-with-unit {
    flex-direction: column;
    align-items: stretch;
  }
  
  .input-with-unit input,
  .input-with-unit select {
    width: 100%;
  }
}

/* ===== EMPTY STATE STYLES ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 16px;
  border: 2px dashed #e5e7eb;
  margin: 20px 0;
  min-height: 300px;
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: #d1d5db;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.empty-state-icon {
  margin-bottom: 24px;
  color: #9ca3af;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.3;
}

.empty-state-message {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 32px;
  max-width: 500px;
  line-height: 1.6;
}

.empty-state-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background-color: #ff0000;
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
  border: none;
  cursor: pointer;
}

.empty-state-button:hover {
  background-color: #45a049;
  box-shadow: 0 6px 20px rgba(69, 160, 73, 0.4);
  transform: translateY(-2px);
}

.empty-state-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.empty-state-button svg {
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 20px;
    min-height: 250px;
  }
  
  .empty-state-icon svg {
    width: 48px;
    height: 48px;
  }
  
  .empty-state-title {
    font-size: 1.25rem;
  }
  
  .empty-state-message {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
  
  .empty-state-button {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* ============================================
   GENDER SELECTION - Modern Radio Buttons
   ============================================ */
.gender-selection {
  margin: 20px 0;
}

.gender-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.gender-option {
  position: relative;
}

.gender-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gender-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  min-height: 70px;
  text-align: center;
}

.gender-label:hover {
  border-color: #d1d5db;
}

.gender-icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
  opacity: 0.7;
}

.gender-text {
  font-size: 0.85rem;
  font-weight: 400;
  color: #6b7280;
}

/* Selected state */
.gender-option input[type="radio"]:checked + .gender-label {
  background: #fafafa;
  border-color: #9ca3af;
}

.gender-option input[type="radio"]:checked + .gender-label .gender-icon {
  opacity: 1;
}

.gender-option input[type="radio"]:checked + .gender-label .gender-text {
  color: #374151;
  font-weight: 500;
}

/* Focus state for accessibility */
.gender-option input[type="radio"]:focus + .gender-label {
  outline: 1px solid #d1d5db;
  outline-offset: 1px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .gender-options {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .gender-label {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    min-height: auto;
  }
  
  .gender-icon {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-right: 8px;
  }
  
  .gender-text {
    font-size: 0.85rem;
  }
}

/* ===================================
   Calendar Export Styles
   =================================== */

/* Calendar export button in training cards */
.training-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
}

.btn-calendar-export,
.btn.btn-calendar-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-calendar-export:hover,
.btn.btn-calendar-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
}

.btn-calendar-export:active,
.btn.btn-calendar-export:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.btn-calendar-export svg,
.btn.btn-calendar-export svg {
  flex-shrink: 0;
}

/* Calendar export dropdown menu */
.calendar-export-dropdown {
  position: absolute;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 8px;
  min-width: 220px;
  z-index: 1000;
  animation: fadeInScale 0.2s ease;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.calendar-export-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.calendar-export-option:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateX(4px);
}

.calendar-export-option:hover svg {
  filter: brightness(0) invert(1);
}

.calendar-export-option svg {
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

.calendar-export-option + .calendar-export-option {
  margin-top: 4px;
}

/* Responsive adjustments for calendar export */
@media (max-width: 768px) {
  .btn-calendar-export,
  .btn.btn-calendar-export {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
  
  .calendar-export-dropdown {
    min-width: 200px;
  }
  
  .calendar-export-option {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
}

/* Training header actions (for editTraining page) */
.training-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Adjust button styles in header context */
.training-header-actions .btn-calendar-export {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  box-shadow: none;
}

.training-header-actions .btn-calendar-export:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

@media (max-width: 768px) {
  .training-header-actions .btn-calendar-export span {
    display: none;
  }
  
  .training-header-actions .btn-calendar-export {
    padding: 8px;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
}