/* 
 * CSS spécifique pour la page d'accueil (index.html)
 * Ajustement du padding-top pour le nouveau header mobile
 */

/* Ajustement du padding-top pour mobile sur la page d'accueil */
@media (max-width: 768px) {
    body {
        padding-top: 40px !important; /* Réduit à 40px comme demandé */
    }
    
    /* Optimisation de la carte de recherche sur mobile */
    .card-body {
        padding: 1rem !important; /* Réduire le padding de la carte */
    }
    
    /* Renforcer les bordures des cartes uniquement en mode light sur mobile */
    html:not([data-bs-theme="dark"]) .card {
        border: 1.5px solid #dee2e6 !important; /* Bordure plus épaisse en mode light */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Légère ombre en mode light */
    }
    
    /* Renforcer le contraste de la carte en mode sombre */
    [data-bs-theme="dark"] .card {
        background-color: #242424 !important; /* Gris un peu plus clair pour meilleur contraste */
        border: 1px solid #495057 !important; /* Bordure grise visible */
        box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; /* Légère ombre pour détacher la carte */
    }
    
    /* Réduire l'espacement entre les éléments du formulaire */
    .row.g-3 {
        --bs-gutter-y: 0.5rem !important; /* Encore plus réduit */
    }
    
    /* Aligner tous les éléments sur la largeur du toggle */
    .row.g-3,
    #city-input-container,
    .col-12:not(.mb-3) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Optimiser les champs date et heure avec proportions différentes */
    .date-column {
        flex: 0 0 calc(65% - 0.25rem) !important; /* Date plus large */
        max-width: calc(65% - 0.25rem) !important;
        padding-left: 0 !important;
    }
    
    .time-column {
        flex: 0 0 calc(35% - 0.25rem) !important; /* Heure plus étroite */
        max-width: calc(35% - 0.25rem) !important;
        padding-right: 0 !important;
    }
    
    /* Masquer le mot "minimum" du label heure sur mobile */
    .time-column .form-label {
        font-size: 0 !important; /* Masquer le texte original */
    }
    
    .time-column .form-label::after {
        content: "Heure";
        font-size: 0.9rem !important;
        font-weight: normal !important;
    }
    
    /* Réduire la taille des labels */
    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Optimiser la hauteur des inputs */
    .form-control, .form-range {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Optimiser le toggle géolocalisation - texte plus petit sur une ligne */
    .col-12.mb-3 {
        margin-bottom: 0.5rem !important; /* Réduire encore l'espacement */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Corriger le conteneur du toggle pour qu'il ne dépasse pas */
    .col-12.mb-3 .d-flex {
        padding-right: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .col-12.mb-3 .form-check-label {
        font-size: 0.85rem !important; /* Texte plus petit */
        font-weight: 500 !important; /* Moins gras */
        flex-shrink: 1 !important; /* Permettre au texte de se réduire */
    }
    
    /* Corriger le toggle qui dépasse - réduire sa taille */
    #use-location-toggle {
        transform: scale(1.3) !important; /* Plus petit que 1.6 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Forcer la pastille blanche pour le toggle de géolocalisation en mode sombre */
    [data-bs-theme="dark"] #use-location-toggle:not(:checked) {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    }

    [data-bs-theme="dark"] #use-location-toggle:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    }
    
    .form-check.form-switch {
        margin-right: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0 !important; /* Garder la taille du toggle */
    }
    
    /* Réduire l'espacement après le toggle géolocalisation */
    #city-input-container {
        margin-top: 0.25rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Optimiser l'affichage du slider de rayon */
    .form-range {
        margin: 0.25rem 0 !important; /* Marges encore plus réduites */
    }
    
    /* Réduire l'espacement des indicateurs du slider */
    .d-flex.justify-content-between.small {
        display: none !important; /* Masquer complètement sur mobile */
    }
    
    /* Optimiser le bouton de recherche */
    .btn {
        padding: 0.3rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Réduire drastiquement l'espacement avant le bouton */
    .col-12.mt-4 {
        margin-top: 0.75rem !important; /* Beaucoup plus proche */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Raccourcir le texte des boutons de recherche sur mobile */
    #slots-tab {
        font-size: 0 !important; /* Masquer le texte original */
    }
    
    #slots-tab::after {
        content: "Créneau";
        font-size: 14px;
        font-weight: 500;
    }
    
    #slots-tab i {
        font-size: 16px !important;
        margin-right: 8px !important;
    }
    
    #tournaments-tab {
        font-size: 0 !important; /* Masquer le texte original */
    }
    
    #tournaments-tab::after {
        content: "Tournoi";
        font-size: 14px;
        font-weight: 500;
    }
    
    #tournaments-tab i {
        font-size: 16px !important;
        margin-right: 8px !important;
    }
    
    /* Corriger la couleur de l'icône tournoi en mode light quand actif */
    html:not([data-bs-theme="dark"]) #tournaments-tab.active i {
        color: white !important;
    }
}

/* Ajustement pour très petits écrans */
@media (max-width: 400px) {
    body {
        padding-top: 40px !important;
    }
    
    /* Sur très petits écrans, réduire encore plus l'espacement */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .form-label {
        font-size: 0.85rem !important;
    }
    
    .form-control {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Texte géolocalisation encore plus petit sur très petits écrans */
    .col-12.mb-3 .form-check-label {
        font-size: 0.8rem !important;
    }
}

/* Icônes noires en mode dark uniquement */
[data-bs-theme="dark"] i {
    color: #C6FF00 !important;
}

/* Améliorer la visibilité des cartes de fonctionnalités en mode light desktop */
@media (min-width: 769px) {
    html:not([data-bs-theme="dark"]) .card.h-100.border-0.shadow-sm {
        border: 2px solid #e9ecef !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        background-color: #ffffff !important;
    }
    
    html:not([data-bs-theme="dark"]) .card.h-100.border-0.shadow-sm:hover {
        border-color: #dee2e6 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
    
    html:not([data-bs-theme="dark"]) .card.h-100.border-0.shadow-sm .card-title {
        color: #212529 !important;
        font-weight: 600 !important;
    }
    
    html:not([data-bs-theme="dark"]) .card.h-100.border-0.shadow-sm .card-text {
        color: #6c757d !important;
    }
}

/* Forcer le texte du copyright (span.text-muted.small) en blanc */
footer span.text-muted.small {
    color: #ffffff !important; /* Blanc en light et dark mode */
}

/* Custom styles for search tabs on index.html */
#searchTabs.nav-tabs {
    border-bottom: none !important; /* Remove Bootstrap's default bottom border from the ul */
}

#searchTabs .nav-link {
    border: none !important; /* Remove all default borders from Bootstrap nav-link */
    padding: 0.75rem 1rem; /* Adjust padding as needed */
    transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}

/* Inactive tabs styling */
/* Styles pour le contenu des onglets afin que l'onglet actif puisse se fondre */
[data-bs-theme="dark"] #searchTabsContent {
    background-color: #242424; /* Doit correspondre au fond de l'onglet actif en mode sombre */
}

[data-bs-theme="light"] #searchTabsContent {
    background-color: #ffffff; /* Doit correspondre au fond de l'onglet actif en mode clair */
}

/* Inactive tabs styling - CE SONT EUX QUI ONT LA BORDURE INFÉRIEURE */
[data-bs-theme="dark"] #searchTabs .nav-link:not(.active) {
    color: #adb5bd; /* Muted text for inactive */
    background-color: #1e1e1e; /* Fond légèrement différent du contenu pour se démarquer */
    border-bottom: 2px solid #495057 !important; /* Subtle dark gray border for inactive */
}

[data-bs-theme="light"] #searchTabs .nav-link:not(.active) {
    color: #6c757d; /* Standard muted text for light mode */
    background-color: #f8f9fa; /* Fond légèrement différent du contenu pour se démarquer */
    border-bottom: 2px solid #dee2e6 !important; /* Subtle light gray border for inactive */
}

/* Active tab styling - PAS DE BORDURE INFÉRIEURE VISIBLE, SE FOND AVEC LE CONTENU */
[data-bs-theme="dark"] #searchTabs .nav-link.active {
    color: #000; /* Texte noir */
    background-color: #c6ff00; /* Fond vert citron, doit correspondre à #searchTabsContent */
    border-bottom: 2px solid #c6ff00 !important; /* Bordure de la même couleur que le fond pour la cacher */
    font-weight: 500;
}

/* Icône noire quand le bouton est actif en mode sombre */
[data-bs-theme="dark"] #searchTabs .nav-link.active i.bi {
    color: #000 !important; /* Icône noire quand actif */
}

/* Icône blanche quand le bouton est inactif en mode sombre */
[data-bs-theme="dark"] #searchTabs .nav-link:not(.active) i.bi {
    color: #ffffff !important; /* Icône blanche quand inactif */
}

/* Forcer la pastille blanche pour le toggle de géolocalisation en mode sombre - règle globale pour tous les écrans */
[data-bs-theme="dark"] #use-location-toggle:not(:checked),
[data-bs-theme="dark"] #use-location-toggle:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="light"] #searchTabs .nav-link.active {
    color: #000000; /* Black text */
    background-color: #ffffff; /* White background, doit correspondre à #searchTabsContent */
    border-bottom: 2px solid #ffffff !important; /* Bordure de la même couleur que le fond pour la cacher */
    font-weight: 500;
}

/* Hover on inactive tabs */
[data-bs-theme="dark"] #searchTabs .nav-link:not(.active):hover {
    color: #ffffff; /* Brighter text on hover */
    background-color: #2d2d2d;
    border-bottom-color: #6c757d !important;
}

[data-bs-theme="light"] #searchTabs .nav-link:not(.active):hover {
    color: #000000; /* Darker text on hover */
    background-color: #e9ecef;
    border-bottom-color: #adb5bd !important;
}