/**
 * FIX URGENT - Calendrier mobile invisible + UX optimisée
 * Date: 31 janvier 2026
 */

/* ========================================
   UX FULLSTACK PREMIUM - Page Header
   ======================================== */
@media (max-width: 768px) {
    /* Header compact et discret */
    .page-header {
        padding: 12px 16px !important;
        margin-bottom: 8px !important;
    }
    
    .page-header-content {
        display: flex;
        align-items: center;
        gap: 10px;
        animation: slideDownSubtle 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    
    @keyframes slideDownSubtle {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Icon compact */
    .page-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2859CC 0%, #1e40af 100%) !important;
        color: white !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        box-shadow: 0 2px 8px rgba(40, 89, 204, 0.15) !important;
        flex-shrink: 0;
    }
    
    /* Texte header compact */
    .page-header h1 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
    }
    
    .page-header p {
        font-size: 12px !important;
        color: #6b7280 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        font-weight: 400;
    }
    
    /* Container texte */
    .page-header-content > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

/* FORCE l'affichage du calendrier sur mobile */
@media (max-width: 768px) {
    .mobile-view {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* TRÈS IMPORTANT : Override du display:none inline sur #mobileSlots */
    #mobileSlots {
        display: none !important; /* Masqué par défaut */
    }
    
    #mobileSlots.show {
        display: block !important; /* Affiché quand on clique sur un jour */
    }
    
    #mobileCalendar.hidden {
        display: none !important; /* Masquer le calendrier quand on affiche les créneaux */
    }
    
    .calendar-desktop {
        display: none !important;
    }
    
    /* Désactiver les animations de slide desktop sur mobile */
    .calendar-view,
    .slots-view,
    .calendar-view.slide-out,
    .slots-view.slide-in {
        transform: none !important;
        transition: none !important;
        position: static !important;
    }
    
    /* Style du calendrier mobile */
    .mobile-view .calendar {
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .mobile-view .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .mobile-view .calendar-header h2 {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }
    
    .mobile-view .calendar-nav {
        display: flex;
        gap: 10px;
    }
    
    .mobile-view .calendar-nav button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #e5e7eb;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2859CC;
        font-size: 16px;
    }
    
    .mobile-view .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }
    
    .mobile-view .day-header {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-align: center;
        padding: 8px 0;
    }
    
    .mobile-view .day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        background: white;
    }
    
    .mobile-view .day.empty {
        visibility: hidden;
    }
    
    .mobile-view .day.disabled {
        color: #9ca3af !important;
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .mobile-view .day.today {
        border-color: #2859CC;
        font-weight: 700;
    }
    
    .mobile-view .day.selected {
        background: #2859CC !important;
        color: white !important;
        border-color: #2859CC;
    }
    
    .mobile-view .day:not(.disabled):not(.empty):not(.selected):hover {
        background: #eff6ff;
        border-color: #93c5fd;
    }
    
    /* Vue créneaux mobile - scrollable et fluide */
    #mobileSlots {
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    #mobileSlots.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        animation: slideUpSmooth 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    
    @keyframes slideUpSmooth {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Calendrier mobile - animation de sortie douce */
    #mobileCalendar {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: auto;
    }
    
    #mobileCalendar.hidden {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        pointer-events: none;
    }
    
    
    /* En-tête créneaux */
    .slots-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .slots-header h3 {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 4px 0;
    }
    
    .slots-header p {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }
    
    /* Créneaux horaires - 3 colonnes sur mobile */
    .time-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding-bottom: 20px;
    }
    
    @media (max-width: 480px) {
        .time-slots {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
    }
    
    /* Badge période (Matin, Après-midi, Soir) */
    .period-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #f3f4f6;
        border-radius: 8px;
        margin-top: 8px;
        margin-bottom: 4px;
    }
    
    .period-badge i {
        color: #2859CC;
        font-size: 16px;
    }
    
    .period-badge span {
        font-size: 13px;
        font-weight: 600;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Créneau horaire - Premium UX */
    .time-slot {
        padding: 14px 16px;
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .time-slot::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(40, 89, 204, 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .time-slot:hover {
        border-color: #2859CC;
        background: #2859CC;
        box-shadow: 0 2px 8px rgba(40, 89, 204, 0.2);
    }
    
    .time-slot:hover .slot-time {
        color: white !important;
    }
    
    .time-slot:active {
        transform: scale(0.96);
    }
    
    .time-slot.selected {
        background: linear-gradient(135deg, #2859CC 0%, #1e40af 100%) !important;
        border-color: #1e40af !important;
        box-shadow: 0 4px 12px rgba(40, 89, 204, 0.3) !important;
        animation: selectPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
    }
    
    /* Ripple effect au clic */
    .ripple-effect {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        pointer-events: none;
        animation: ripple 0.6s ease-out;
    }
    
    @keyframes ripple {
        from {
            width: 0;
            height: 0;
            top: 50%;
            left: 50%;
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        to {
            width: 400px;
            height: 400px;
            top: 50%;
            left: 50%;
            opacity: 0;
            transform: translate(-50%, -50%);
        }
    }
    
    /* Loader au clic */
    .slot-loader {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    .time-slot.selected .slot-loader {
        display: block;
    }
    
    @keyframes selectPulse {
        0% {
            box-shadow: 0 2px 8px rgba(40, 89, 204, 0.2);
        }
        50% {
            box-shadow: 0 6px 20px rgba(40, 89, 204, 0.4);
        }
        100% {
            box-shadow: 0 4px 12px rgba(40, 89, 204, 0.3);
        }
    }
    
    .time-slot .slot-time {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        transition: color 0.3s ease;
        position: relative;
        z-index: 1;
    }
    
    .time-slot.selected .slot-time {
        color: white !important;
    }
    
    /* Message vide */
    .no-slots {
        text-align: center;
        padding: 40px 20px;
        color: #9ca3af;
    }
    
    .no-slots i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    
    .no-slots p {
        font-size: 16px;
        font-weight: 500;
        margin: 0 0 4px 0;
    }
    
    .no-slots small {
        font-size: 14px;
        opacity: 0.8;
    }
    
    /* Animation de chargement */
    .loading {
        text-align: center;
        padding: 40px 20px;
        color: #6b7280;
    }
    
    .loading i {
        font-size: 32px;
        margin-bottom: 12px;
        color: #2859CC;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .loading p {
        font-size: 14px;
        margin: 0;
    }
    
    /* Assurer que le step-panel est scrollable SEULEMENT quand actif */
    .step-panel[data-step="3"].active {
        display: block !important;
        min-height: calc(100vh - 140px);
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
    }
    
    /* Footer navigation toujours visible en bas */
    .step-panel[data-step="3"] .nav-footer {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, white 100%);
        padding: 12px 16px;
        border-top: 1px solid #e5e7eb;
        margin-top: auto;
        z-index: 10;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        justify-content: flex-start;
    }
    
    /* Masquer les sections vides du footer */
    .step-panel[data-step="3"] .nav-footer > div:last-child {
        display: none;
    }
    
    /* Buttons dans le footer plus compacts */
    .nav-footer .btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }
    
    .nav-footer .btn-ghost {
        background: #f3f4f6 !important;
        color: #2859CC !important;
    }
    
    .nav-footer .btn-primary {
        background: linear-gradient(135deg, #2859CC 0%, #1e40af 100%) !important;
        box-shadow: 0 4px 12px rgba(40, 89, 204, 0.2) !important;
    }
    
    .nav-footer .btn-primary:active {
        transform: scale(0.98) !important;
    }
    
    /* Contenu après le step-banner */
    .step-panel[data-step="3"] > *:not(.step-banner):not(.page-header) {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Spacing managed in step-banner.css - removed to avoid conflicts */
    
    /* Sur mobile, masquer le layout desktop et afficher le mobile */
    .calendar-view {
        display: none !important;
    }
    
    .slots-view {
        display: none !important;
    }
    
    #mobileCalendar {
        display: block !important;
    }
    
    #mobileSlots {
        display: none !important;
    }
}
    
    /* Badge date sélectionnée - affiché quand une date ET un créneau sont choisis */
    .date-badge {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        border-radius: 12px;
        margin-top: 16px;
        box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
        animation: slideInFromTop 0.3s ease-out;
    }
    
    @keyframes slideInFromTop {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .date-badge i {
        font-size: 20px;
    }
    
    .date-badge span {
        font-size: 14px;
        font-weight: 600;
    }
    
    /* Style amélioré du bouton Suivant quand une sélection est faite */
    .nav-footer .btn-primary:not(:disabled) {
        animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        50% {
            box-shadow: 0 6px 20px rgba(40, 89, 204, 0.4);
        }
    }
}

/* Sur desktop, cacher absolument le mobile */
@media (min-width: 769px) {
    .mobile-view {
        display: none !important;
    }
    
    .calendar-desktop {
        display: block !important;
    }
}