/**
 * Corrections d'affichage mobile
 * 
 * Ce fichier corrige les problèmes de débordement sur les petits écrans.
 */

/* =============================================================================
   1. Message spécial - Éviter le débordement des mots longs
   ============================================================================= */

/* Page recherche et fiche thérapeute */
.bg-blue-50.border-l-4.border-primary p,
.bg-blue-50 p.text-gray-700 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* =============================================================================
   2. Calendrier de réservation - Jours qui débordent
   ============================================================================= */

.calendar-grid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.calendar-day {
    min-width: 0 !important;
    font-size: clamp(0.75rem, 3vw, 1rem) !important;
    padding: 0 !important;
}

@media (max-width: 400px) {
    .calendar-grid {
        gap: 2px !important;
    }
    
    .calendar-day {
        font-size: 0.75rem !important;
        min-height: 32px !important;
    }
}

/* =============================================================================
   3. Champ téléphone dans le formulaire de réservation
   ============================================================================= */

@media (max-width: 640px) {
    /* Conteneur flex pour le champ téléphone */
    .booking-modal-content .flex:has(input[type="tel"]),
    #booking-modal .flex:has(input[type="tel"]) {
        flex-wrap: nowrap;
    }
    
    .booking-modal-content input[type="tel"],
    #booking-modal input[type="tel"] {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* =============================================================================
   4. Agenda Calendar - Header du calendrier FullCalendar
   ============================================================================= */

/* Toolbar responsive */
.fc .fc-toolbar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.fc .fc-toolbar-title {
    font-size: 1rem !important;
}

@media (max-width: 640px) {
    .fc .fc-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .fc .fc-toolbar-title {
        font-size: 0.9rem !important;
        text-align: center;
        order: -1;
        width: 100%;
        margin-bottom: 0.5rem !important;
    }
    
    .fc .fc-button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    .fc .fc-button-group {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   5. Agenda Settings - Onglets de navigation
   ============================================================================= */

#tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#tabs-nav::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    #tabs-nav {
        flex-wrap: nowrap !important;
    }
    
    #tabs-nav .tab-btn {
        flex: 0 0 auto !important;
        min-width: max-content;
        padding: 0.75rem 1rem !important;
        font-size: 0.7rem !important;
    }
    
    #tabs-nav .tab-btn svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* =============================================================================
   6. Account.php - Bouton déconnecter Google
   ============================================================================= */

@media (max-width: 640px) {
    /* Conteneur des comptes liés */
    .flex.items-center.justify-between:has(.rounded-full.bg-green-100) {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    /* Boutons et badges dans la section comptes liés */
    .flex.items-center.gap-3:has(form button[type="submit"]) {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .flex.items-center.gap-3 form {
        width: 100%;
    }
    
    .flex.items-center.gap-3 form button,
    .flex.items-center.gap-3 > button {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   7. Corrections globales pour éviter les débordements
   ============================================================================= */

/* Empêcher tout débordement horizontal sur la page */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Container principal */
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg {
    max-width: 100%;
    box-sizing: border-box;
}

/* Texte long */
p, span, a, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Boutons et liens */
@media (max-width: 640px) {
    button, .btn, a.inline-flex {
        max-width: 100%;
        white-space: normal;
    }
}