/* Classes utilitaires pour remplacer les styles inline */
.hidden {
    display: none !important;
}

/* Classes pour les prévisualisations de couleur dynamiques */
.color-preview-bg {
    width: 3rem;
    height: 3rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(229 231 235);
    flex-shrink: 0;
}

.color-preview-text {
    width: 3rem;
    height: 3rem;
    border-radius: 0.25rem;
    background-color: rgb(243 244 246);
    border: 1px solid rgb(229 231 235);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-preview-text span {
    font-weight: 700;
}

/* Scrollbar personnalisée pour les conteneurs de contacts */
.contacts-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #10b981 #f0fdf4;
}

/* Styles personnalisés - Blain Badminton Club */

/* Logo personnalisé */
.logo {
  height: 86px;
  width: auto;
}

/* Carousel des partenaires - Swiper */
.partners-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.partners-carousel {
  width: 100%;
  overflow: hidden;
}

.partners-carousel .swiper-slide {
  width: 280px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .partners-carousel .swiper-slide {
    width: 300px !important;
  }
}

@media (min-width: 1024px) {
  .partners-carousel .swiper-slide {
    width: 250px !important;
  }
}

@media (min-width: 1280px) {
  .partners-carousel .swiper-slide {
    width: 240px !important;
  }
}

.bg-\[url\(\'\.\.\/\.\.\/assets\/images\/club\/inscription\.jpg\'\)\]{
  background-image: var(--bg-inscription-image) !important;
}

/* Animation ripple pour les notifications toast (style Notyf) */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Style pour les notifications toast SweetAlert (style Notyf) */
.swal2-toast {
  padding: 12px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer;
}

.swal2-toast.swal2-success {
  background: var(--color-success) !important; /* #3CC662 - Vert */
  color: var(--color-white) !important; /* Blanc */
  border-left: 4px solid var(--color-success) !important;
}

.swal2-toast.swal2-success .swal2-icon {
  color: var(--color-white) !important;
}

.swal2-toast.swal2-success .swal2-title {
  color: var(--color-white) !important;
}

.swal2-toast.swal2-error {
  background: var(--color-error) !important; /* #EC3C3C - Rouge */
  color: var(--color-white) !important; /* Blanc */
  border-left: 4px solid var(--color-error) !important;
}

.swal2-toast.swal2-error .swal2-icon {
  color: var(--color-white) !important;
}

.swal2-toast.swal2-error .swal2-title {
  color: var(--color-white) !important;
}

/* Masquer complètement les boutons dans les toasts */
.swal2-toast .swal2-actions {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.swal2-toast .swal2-confirm,
.swal2-toast .swal2-cancel,
.swal2-toast .swal2-deny {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style pour les boutons SweetAlert (popup, pas toast) */
.swal2-popup .swal2-confirm {
  background-color: var(--color-success) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(60, 198, 98, 0.3) !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* Masquer complètement le bouton deny dans les popups d'action */
.swal2-popup .swal2-deny {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.swal2-popup .swal2-confirm:hover {
  background-color: var(--color-success-dark) !important;
}

.swal2-popup .swal2-cancel {
  background-color: #6c757d !important;
  color: var(--color-white) !important;
  border: none !important;
}

.swal2-popup .swal2-cancel:hover {
  background-color: #5a6268 !important;
}

.swal2-popup .swal2-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.swal2-popup .swal2-actions button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   CONSENT TOGGLE - uiverse.io Style Toggle Switch
   Inspiré de: https://uiverse.io/mobinkakei/spicy-moose-47
   ============================================ */
.consent-switch-wrapper {
  position: relative;
  display: inline-block;
}

.consent-toggle-input {
  display: none;
}

.consent-toggle-label {
  position: relative;
  display: flex;
  align-items: center;
  width: 90px;
  height: 38px;
  background: var(--color-error);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 3px 12px rgba(236, 60, 60, 0.3);
  overflow: hidden;
}

.consent-toggle-label:hover {
  transform: scale(1.05);
}

.consent-toggle-slider {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consent-toggle-slider::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  transition: all 0.3s ease;
}

.consent-toggle-text {
  position: absolute;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.consent-toggle-text-yes {
  left: 10px;
  opacity: 0;
  transform: translateX(-10px);
}

.consent-toggle-text-no {
  right: 10px;
  opacity: 1;
  transform: translateX(0);
}

/* État "Oui" sélectionné (checked) - Vert */
.consent-toggle-input:checked + .consent-toggle-label {
  background: var(--color-success);
  box-shadow: 0 3px 12px rgba(60, 198, 98, 0.3);
}

.consent-toggle-input:checked + .consent-toggle-label .consent-toggle-slider {
  left: calc(100% - 35px);
  transform: translateY(-50%) rotate(360deg);
}

.consent-toggle-input:checked + .consent-toggle-label .consent-toggle-text-yes {
  opacity: 1;
  transform: translateX(0);
}

.consent-toggle-input:checked + .consent-toggle-label .consent-toggle-text-no {
  opacity: 0;
  transform: translateX(10px);
}

/* Animation du slider au clic */
.consent-toggle-input:active + .consent-toggle-label .consent-toggle-slider {
  width: 36px;
}

.consent-toggle-input:checked:active + .consent-toggle-label .consent-toggle-slider {
  width: 36px;
}

.blog-link span {
  position: relative;
  display: inline-block;
}

.blog-link span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width 0.3s ease-in-out;
}

.blog-link:hover span:after {
  width: 100%;
}

/* Image de fond pour la page de connexion */
.bg-login-banner {
    background-image: var(--bg-login-image) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cacher complètement les icônes non remplacées */
i[data-feather] {
  display: none !important;
}

/* Animer l'apparition des SVG */
svg[data-feather] {
  animation: fadeIn 0.2s ease-in-out;
}

/* ============================================
   DATEPICKER - Personnalisation js-datepicker
   ============================================ */

/* Container principal */
.qs-datepicker-container {
    background: white;
    border: 1px solid rgb(226 232 240); /* border-gray-200 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    font-family: inherit;
    z-index: 9999;
    top: 0 !important;
}

/* Mode sombre */
.dark .qs-datepicker-container {
    background: rgb(15 23 42); /* bg-slate-900 */
    border-color: rgb(51 65 85); /* border-slate-700 */
    color: white;
}

/* En-tête avec contrôles */
.qs-controls {
    background-color: var(--color-accent) !important;
    color: white;
    padding: 0.75rem;
    border-radius: 0.75rem 0.75rem 0 0;
}

.dark .qs-controls {
    background-color: var(--color-secondary) !important;
}

/* Flèches de navigation */
.qs-arrow {
    color: white;
    transition: background-color 0.2s;
}

.qs-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
}

/* Flèche gauche */
.qs-arrow.qs-left:after {
    border-right-color: white !important;
}

/* Flèche droite */
.qs-arrow.qs-right:after {
    border-left-color: white !important;
}

/* Mois et année */
.qs-month-year {
    color: white;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.qs-month-year:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Grille des jours */
.qs-squares {
    padding: 0.5rem;
    background: white;
}

.dark .qs-squares {
    background: rgb(15 23 42); /* bg-slate-900 */
}

/* Jours de la semaine (en-tête) */
.qs-day {
    color: rgb(100 116 139); /* text-slate-500 */
    font-weight: 600;
    font-size: 0.875rem;
}

.dark .qs-day {
    color: rgb(148 163 184); /* text-slate-400 */
}

/* Cases de dates */
.qs-square {
    color: rgb(30 41 59); /* text-slate-800 */
    transition: all 0.2s;
    border-radius: 0.375rem;
    margin: 0.125rem;
}

.dark .qs-square {
    color: rgb(226 232 240); /* text-slate-200 */
}

/* Date du jour */
.qs-current {
    font-weight: 700;
    color: var(--color-accent) !important;
    text-decoration: none;
}

.dark .qs-current {
    color: var(--color-accent) !important;
}

/* Date sélectionnée */
.qs-active,
.qs-range-start,
.qs-range-end {
    background-color: var(--color-accent) !important;
    color: white !important;
    font-weight: 600;
}

.dark .qs-active,
.dark .qs-range-start,
.dark .qs-range-end {
    background-color: var(--color-secondary) !important;
}

/* Dates dans la plage */
.qs-range-middle {
    background-color: rgba(46, 124, 194, 0.2) !important; /* accent avec opacité */
    color: var(--color-accent) !important;
}

.dark .qs-range-middle {
    background-color: rgba(31, 78, 122, 0.3) !important; /* secondary avec opacité */
    color: var(--color-accent) !important;
}

/* Hover sur les dates */
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
    background-color: rgba(46, 124, 194, 0.15) !important; /* accent avec opacité */
    color: var(--color-accent) !important;
}

.dark .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
    background-color: rgba(31, 78, 122, 0.3) !important; /* secondary avec opacité */
    color: var(--color-accent) !important;
}

/* Dates désactivées */
.qs-disabled,
.qs-outside-current-month {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Overlay pour la sélection d'année */
.qs-overlay {
    background: rgba(31, 78, 122, 0.95); /* bg-slate-900 avec opacité */
    backdrop-filter: blur(4px);
}

.dark .qs-overlay {
    background: rgba(0, 0, 0, 0.95);
}

.qs-overlay-year {
    color: white;
    border-bottom-color: rgb(148 163 184); /* border-slate-400 */
}

.qs-overlay-year:focus {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px;
}

.qs-overlay-month {
    color: white;
    transition: all 0.2s;
}

.qs-overlay-month:hover,
.qs-overlay-month.active {
    background: rgb(99 102 241); /* bg-indigo-600 */
    color: white;
}

.qs-submit {
    background: rgb(99 102 241); /* bg-indigo-600 */
    color: white;
    border: none;
    transition: background-color 0.2s;
}

.qs-submit:hover:not(.qs-disabled) {
    background: rgb(79 70 229); /* bg-indigo-700 */
}

.qs-submit.qs-disabled {
    background: rgb(148 163 184); /* bg-slate-400 */
    cursor: not-allowed;
}

/* Bouton Valider désactivé dans l'overlay */
.qs-overlay .qs-submit.qs-disabled {
    color: white !important;
    border-color: white !important;
    cursor: not-allowed;
}

/* Bouton de fermeture du calendrier - dans les contrôles à côté de la flèche droite */
.qs-controls .qs-close-btn {
    position: static;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 0.375rem;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    margin-left: 0.5rem;
    padding: 0;
}

.qs-controls .qs-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.qs-controls .qs-close-btn:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Masquer les boutons valider/annuler quand le calendrier est ouvert */
.datepicker-open ~ .flex.gap-2,
.datepicker-open + * .flex.gap-2 {
    display: none !important;
}

/* Masquer les boutons valider/annuler quand le calendrier est ouvert (alternative) */
input[data-controller="date-picker"]:focus ~ * .flex.gap-2,
input[data-controller="date-picker"]:focus + * .flex.gap-2 {
    display: none !important;
}

/* Masquer les boutons quand le calendrier est visible */
.qs-datepicker-container:not([style*="display: none"]) ~ * .flex.gap-2,
body:has(.qs-datepicker-container:not([style*="display: none"])) .inline-edit-field .flex.gap-2 {
    display: none !important;
}

/* ============================================
   SPINNER LOADER - CSS Spinner moderne
   ============================================ */
.spinner {
   --d: 24.6px;
   width: 4.5px;
   height: 4.5px;
   border-radius: 50%;
   color: var(--color-accent);
   box-shadow: calc(1*var(--d))      calc(0*var(--d))     0 0,
          calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1.1px,
          calc(0*var(--d))      calc(1*var(--d))     0 2.2px,
          calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px,
          calc(-1*var(--d))     calc(0*var(--d))     0 4.5px,
          calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px,
          calc(0*var(--d))      calc(-1*var(--d))    0 6.7px;
   animation: spinner-a90wxe 1s infinite steps(8);
}

@keyframes spinner-a90wxe {
   100% {
      transform: rotate(1turn);
   }
}

/* Variante avec couleur accent (vert) */
.spinner-accent {
   color: var(--color-accent);
}

/* Variante avec couleur rouge pour suppression */
.spinner-red {
   color: var(--color-error);
}

/* ============================================
   SETTINGS PAGE - Styles pour la page des paramètres système
   ============================================ */

/* Animation pour le chevron des détails */
.settings-details[open] summary .details-chevron {
    transform: rotate(180deg);
}

/* Animation d'apparition pour les paramètres */
.settings-grid > div {
    animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

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

/* Délai d'animation pour chaque paramètre */
.settings-grid > div:nth-child(1) { animation-delay: 0s; }
.settings-grid > div:nth-child(2) { animation-delay: 0.1s; }
.settings-grid > div:nth-child(3) { animation-delay: 0.2s; }
.settings-grid > div:nth-child(4) { animation-delay: 0.3s; }
.settings-grid > div:nth-child(5) { animation-delay: 0.4s; }
.settings-grid > div:nth-child(6) { animation-delay: 0.5s; }

/* Style pour le summary (supprime la flèche par défaut) */
.settings-details summary::-webkit-details-marker {
    display: none;
}

.settings-details summary::marker {
    display: none;
}

/* ============================================
   STICKY TABLE - Colonnes fixes dans les tableaux
   ============================================ */

/* ============================================
   STICKY TABLE - Colonnes fixes dans les tableaux
   ============================================ */

/* Container pour les tableaux avec colonnes fixes */
.sticky-table-container {
    position: relative;
    max-height: calc(100vh - 300px);
    overflow: auto;
}

/* Tableau avec colonnes fixes */
.sticky-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* En-tête fixe (sticky) */
.sticky-thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.sticky-thead th {
    background-color: var(--color-accent);
    color: white;
}

/* Colonne 1 fixe (première colonne) */
.sticky-col-1 {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: white;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.sticky-thead .sticky-col-1 {
    background-color: var(--color-accent);
    z-index: 15;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}

/* Colonne Actions fixe (dernière colonne) */
.sticky-col-actions {
    position: sticky;
    right: 0;
    z-index: 5;
    background-color: white;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
}

.sticky-thead .sticky-col-actions {
    background-color: var(--color-accent);
    z-index: 15;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}

/* Hover sur les lignes - maintenir le z-index et le background */
.sticky-table tbody tr:hover .sticky-col-1,
.sticky-table tbody tr:hover .sticky-col-actions {
    background-color: rgb(249 250 251); /* bg-gray-50 */
    z-index: 6;
}

/* Bordure droite pour la colonne 1 quand elle est fixe */
.sticky-col-1 {
    border-right: 1px solid rgb(229 231 235); /* border-gray-200 */
}

.sticky-thead .sticky-col-1 {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Bordure gauche pour la colonne Actions quand elle est fixe */
.sticky-col-actions {
    border-left: 1px solid rgb(229 231 235); /* border-gray-200 */
}

.sticky-thead .sticky-col-actions {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Assurer que les liens dans les colonnes fixes restent cliquables */
.sticky-col-1 a,
.sticky-col-actions a,
.sticky-col-1 button,
.sticky-col-actions button {
    position: relative;
    z-index: 1;
}