/* ============================================================
   RESPONSIVE GLOBAL — Android / Tablette / iOS
   Breakpoints : xs < 576 | sm 576-767 | md 768-1023 | lg 1024+
   ============================================================ */

/* ── 1. Désactiver les animations lourdes sur mobile ── */
@media (max-width: 1023px) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }

    .players-header::before,
    .players-header::after,
    .page-header::before,
    .page-header::after,
    .profile-hero::before,
    .profile-hero::after,
    .dashboard-hero::before,
    .dashboard-hero::after {
        display: none !important;
    }

    /* Supprimer backdrop-filter coûteux */
    .glass-card,
    .header-stat-item,
    .player-jersey {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Supprimer les transform au hover (inutiles sur tactile) */
    .glass-card:hover,
    .form-card:hover,
    .feature-card:hover,
    .stat-card:hover,
    .btn-filter:hover,
    .btn-new-player:hover,
    .btn-submit:hover,
    .btn-action:hover,
    .modern-table tbody tr:hover,
    .player-avatar-sm:hover,
    .pagination-modern .page-link:hover {
        transform: none !important;
    }
}

/* ── 2. Navbar mobile ── */
@media (max-width: 767px) {
    .navbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar-brand span {
        font-size: 1rem !important;
    }

    .navbar-brand img {
        height: 36px !important;
        width: 36px !important;
    }

    /* Menu déroulant pleine largeur */
    .navbar-collapse .dropdown-menu {
        width: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Notifications dropdown */
    #notificationsDropdown .dropdown-menu {
        width: 95vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }
}

/* ── 3. Headers de pages (hero banners) ── */
@media (max-width: 767px) {
    .players-header,
    .page-header,
    .profile-hero,
    .dashboard-hero {
        padding: 1.25rem !important;
        border-radius: 16px !important;
        margin-bottom: 1rem !important;
    }

    .header-title,
    .hero-title,
    .player-name {
        font-size: 1.4rem !important;
        letter-spacing: -0.5px !important;
    }

    .header-stats {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .header-stat-item {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Bouton nouveau joueur visible sur mobile */
    .col-lg-4 .btn-new-player {
        display: flex !important;
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .players-header,
    .page-header,
    .profile-hero {
        padding: 1.5rem 2rem !important;
        border-radius: 20px !important;
    }

    .header-title,
    .hero-title {
        font-size: 1.8rem !important;
    }
}

/* ── 4. Filtres ── */
@media (max-width: 767px) {
    .filter-card {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    .filter-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .filter-group {
        width: 100% !important;
        min-width: unset !important;
    }

    .btn-filter,
    .btn-reset {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .filter-row {
        flex-wrap: wrap !important;
    }

    .filter-group {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: unset !important;
    }
}

/* ── 5. Tableaux → cards sur mobile ── */
@media (max-width: 767px) {
    /* Masquer les colonnes secondaires */
    .modern-table thead,
    .table thead {
        display: none !important;
    }

    .modern-table,
    .modern-table tbody,
    .modern-table tr,
    .modern-table td {
        display: block !important;
        width: 100% !important;
    }

    .modern-table tr {
        border: 1px solid #e2e8f0;
        border-radius: 16px !important;
        margin-bottom: 1rem;
        padding: 0.75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .modern-table td {
        border: none !important;
        padding: 0.4rem 0.5rem !important;
        text-align: left !important;
    }

    .modern-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        display: block;
        margin-bottom: 0.2rem;
    }

    /* Table standard Bootstrap */
    .table-responsive table thead {
        display: none !important;
    }

    .table-responsive table,
    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td {
        display: block !important;
        width: 100% !important;
    }

    .table-responsive tr {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
    }

    .table-responsive td {
        border: none !important;
        padding: 0.3rem 0 !important;
    }

    /* Garder les tableaux de stats en scroll horizontal */
    .stats-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .stats-table-scroll table {
        min-width: 500px;
    }
}

/* ── 6. Grilles de cartes ── */
@media (max-width: 767px) {
    /* Colonnes lg → pleine largeur */
    .col-lg-4,
    .col-lg-8,
    .col-lg-6,
    .col-lg-3 {
        width: 100% !important;
    }

    /* Colonnes md → pleine largeur */
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-3 {
        width: 100% !important;
    }

    /* Stats grid 2 colonnes sur mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Cards */
    .glass-card,
    .form-card,
    .filter-card,
    .table-container {
        border-radius: 16px !important;
        margin-bottom: 1rem !important;
    }

    .card-body-modern,
    .card-body-custom {
        padding: 1rem !important;
    }

    .card-header-modern,
    .card-header-custom {
        padding: 0.75rem 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .col-lg-4 {
        width: 100% !important;
    }

    .col-lg-8 {
        width: 100% !important;
    }
}

/* ── 7. Profil joueur / entraîneur ── */
@media (max-width: 767px) {
    /* Hero profil : avatar + infos en colonne */
    .profile-hero .d-flex.align-items-center.gap-4 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 1rem !important;
    }

    .player-avatar,
    .avatar-placeholder {
        width: 90px !important;
        height: 90px !important;
    }

    .player-status-badge {
        position: static !important;
        display: inline-block;
        margin-top: 0.5rem;
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    .player-position {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Boutons d'action en colonne */
    .action-buttons {
        flex-direction: column !important;
        width: 100%;
    }

    .btn-action {
        width: 100% !important;
        justify-content: center;
        border-radius: 12px !important;
        padding: 0.6rem 1rem !important;
    }

    /* Badges en ligne */
    .d-flex.gap-2.flex-wrap {
        justify-content: center;
    }

    /* Alert banner */
    .alert-banner {
        flex-direction: column !important;
        gap: 1rem;
        text-align: center;
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    .alert-banner .d-flex.gap-2 {
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .player-avatar,
    .avatar-placeholder {
        width: 110px !important;
        height: 110px !important;
    }

    .action-buttons {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* ── 8. Formulaires ── */
@media (max-width: 767px) {
    .form-progress {
        padding: 0.75rem 1rem !important;
        border-radius: 16px !important;
        gap: 0.25rem;
        overflow-x: auto;
    }

    .progress-step {
        flex-shrink: 0;
    }

    .step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .btn-submit {
        width: 100% !important;
        padding: 0.9rem 1.5rem !important;
    }

    .btn-back {
        width: 100%;
        text-align: center;
    }

    .submit-section {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }

    .submit-section .d-flex {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Photo upload */
    .photo-upload-area {
        padding: 1.5rem 1rem !important;
    }

    .form-control-modern:focus {
        transform: none !important;
    }
}

/* ── 9. Dashboard ── */
@media (max-width: 767px) {
    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    .stat-card {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    .feature-card {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }

    .feature-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        border-radius: 1rem !important;
    }

    .feature-title {
        font-size: 1.1rem !important;
    }

    .btn-modern {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1.25rem !important;
    }

    /* Tableau recent players → scroll */
    .glass-card .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-title {
        font-size: 2rem !important;
    }

    .stat-number {
        font-size: 2.2rem !important;
    }
}

/* ── 10. Notifications ── */
@media (max-width: 767px) {
    .notification-item {
        padding: 0.6rem 0.75rem !important;
    }

    .notification-title {
        font-size: 0.85rem !important;
    }

    .notification-message {
        font-size: 0.78rem !important;
    }
}

/* ── 11. Modals ── */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    .modal-body .row .col-md-6,
    .modal-body .row .col-md-4,
    .modal-body .row .col-md-3 {
        width: 100% !important;
    }
}

/* ── 12. Pagination ── */
@media (max-width: 767px) {
    .pagination-modern {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    .pagination-modern .page-link {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.85rem !important;
    }

    nav[aria-label="pagination"] {
        overflow-x: auto;
    }
}

/* ── 13. Entraineurs index (table standard) ── */
@media (max-width: 767px) {
    .card .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Header entraîneur show */
    .p-4.rounded-4 .d-flex.align-items-center.gap-4 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 1rem !important;
    }

    .p-4.rounded-4 .d-flex.gap-2.flex-wrap {
        justify-content: center !important;
        width: 100%;
    }

    .p-4.rounded-4 .flex-grow-1 {
        text-align: center;
    }
}

/* ── 14. Accords / Scouts / Users ── */
@media (max-width: 767px) {
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 a,
    .d-flex.justify-content-between.align-items-center.mb-4 button {
        width: 100%;
        text-align: center;
    }
}

/* ── 15. Utilitaires globaux ── */
@media (max-width: 767px) {
    /* Espacement général */
    .main-content {
        padding: 1rem 0 !important;
    }

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Textes trop grands */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* Badges lisibles */
    .badge-modern {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.75rem !important;
    }

    /* Boutons d'action dans les tableaux */
    .d-flex.gap-1 .btn-sm {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Scroll horizontal pour les tableaux de stats */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        padding: 1.5rem 0 !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── 16. iOS Safari fixes ── */
@supports (-webkit-touch-callout: none) {
    /* Fix input zoom sur iOS (font-size >= 16px évite le zoom auto) */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Fix position fixed sur iOS */
    .form-progress {
        position: sticky !important;
    }

    /* Fix overflow scroll iOS */
    .table-responsive,
    .dropdown-menu,
    .modal {
        -webkit-overflow-scrolling: touch;
    }
}