/* Responsive Design pour CoachBooking */

/* Breakpoints */
/* Mobile: < 768px */
/* Tablet: 768px - 1024px */
/* Desktop: > 1024px */

/* ===== MOBILE FIRST APPROACH ===== */

/* Styles de base pour mobile */
@media (max-width: 767px) {
    /* Layout général */
    .main-content {
        padding: 16px !important;
        max-width: 100% !important;
    }
    
    /* Top App Bar */
    .mdc-top-app-bar__title {
        font-size: 18px !important;
    }
    
    .mdc-top-app-bar__section--align-end {
        flex-shrink: 0;
    }
    
    .mdc-top-app-bar__section--align-end .mdc-button {
        padding: 0 8px !important;
        font-size: 14px !important;
    }
    
    /* Cartes sur la page d'accueil */
    .card-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .mdc-card {
        height: 160px !important;
        padding: 16px !important;
    }
    
    .card-icon {
        font-size: 36px !important;
    }
    
    .card-title {
        font-size: 18px !important;
    }
    
    .card-description {
        font-size: 13px !important;
    }
    
    /* Formulaires */
    .login-form {
        max-width: 100% !important;
        margin: 16px !important;
        padding: 20px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Filtres sur la page de réservation */
    .filters-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
    
    .mdc-select,
    .mdc-text-field {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* Calendrier */
    .calendar-header {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    
    .calendar-nav {
        justify-content: center !important;
    }
    
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        font-size: 12px !important;
    }
    
    .calendar-day {
        min-height: 80px !important;
        padding: 4px !important;
    }
    
    .calendar-day-header {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    /* Tableaux */
    .table-container {
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }
    
    .slots-table {
        font-size: 14px !important;
    }
    
    .slots-table th,
    .slots-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    /* Boutons */
    .mdc-button {
        width: 100% !important;
        margin-bottom: 8px !important;
        margin-right: 0 !important;
    }
    
    /* Modales et popups */
    .confirmation-dialog,
    .booking-modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px !important;
        padding: 20px !important;
    }
    
    /* FullCalendar responsive */
    .fc-header-toolbar {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .fc-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .fc-toolbar-title {
        font-size: 16px !important;
        text-align: center !important;
    }
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        padding: 20px !important;
    }
    
    .card-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .filters-row {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    
    .mdc-select,
    .mdc-text-field {
        min-width: 180px !important;
    }
}

/* ===== DESKTOP ===== */
@media (min-width: 1024px) {
    .main-content {
        padding: 24px !important;
    }
    
    .card-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .filters-row {
        gap: 20px !important;
    }
}

/* ===== ORIENTATION LANDSCAPE SUR MOBILE ===== */
@media (max-width: 767px) and (orientation: landscape) {
    .main-content {
        padding: 12px !important;
    }
    
    .card-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .mdc-card {
        height: 120px !important;
    }
    
    .card-icon {
        font-size: 28px !important;
    }
    
    .card-title {
        font-size: 16px !important;
    }
    
    .card-description {
        font-size: 12px !important;
    }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    /* Améliorer la zone de clic sur mobile */
    .mdc-button {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    .mdc-card {
        min-height: 44px !important;
    }
    
    /* Améliorer la navigation du calendrier */
    .fc-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Améliorer les zones de sélection */
    .calendar-day {
        min-height: 60px !important;
    }
    
    .slot-row-free,
    .slot-row-booked {
        min-height: 44px !important;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mdc-card {
        border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    }
    
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
        border-width: 0.5px !important;
    }
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce) {
    .mdc-card,
    .fc-event,
    .mdc-button {
        transition: none !important;
        transform: none !important;
    }
    
    .mdc-card:hover {
        transform: none !important;
    }
    
    .fc-event:hover {
        transform: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mdc-top-app-bar,
    .mdc-button,
    .confirmation-popup,
    .booking-modal {
        display: none !important;
    }
    
    .main-content {
        padding: 0 !important;
        max-width: none !important;
    }
    
    .card-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .mdc-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid !important;
    }
}