/**
 * SYSTÈME DE HEADER STANDARDISÉ POUR MOBILE
 * Basé sur le design de "Mes Candidatures" - Le meilleur exemple
 * 
 * Règles:
 * 1. Padding top maximum 70px (réduit de 90px)
 * 2. Titre à gauche, boutons à droite
 * 3. Breadcrumb masqué sur mobile pour économiser l'espace
 * 4. Texte limité à 2 lignes maximum avec ellipsis
 * 5. Boutons toujours visibles et alignés
 */

/* ========================================
   1. RÉDUCTION DU PADDING GLOBAL
   ======================================== */

@media (max-width: 768px) {
    /* Réduire l'espace au-dessus du contenu principal */
    .main-content {
        padding-top: 70px !important; /* Réduit de 90px */
    }
    
    /* Réduire padding container */
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ========================================
   2. HEADER STANDARDISÉ - PATTERN "MES CANDIDATURES"
   ======================================== */

@media (max-width: 768px) {
    /* Masquer le breadcrumb sur mobile - trop d'espace perdu */
    .page-header-breadcrumb nav,
    .page-header-breadcrumb .breadcrumb,
    .breadcrumb {
        display: none !important;
    }
    
    /* Header structure standardisée */
    .d-md-flex.d-block.align-items-center.justify-content-between.my-4.page-header-breadcrumb,
    .d-flex.justify-content-between.align-items-center.mb-4 {
        display: flex !important;
        flex-direction: row !important; /* Toujours horizontal */
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
        padding: 0 !important;
        gap: 8px !important;
    }
    
    /* Titre de page - gauche, limité à 2 lignes */
    .page-title,
    .h3,
    h1, h2, h3 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        flex: 1 !important;
        
        /* Limitation à 2 lignes avec ellipsis */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }
    
    /* Container de boutons - droite */
    .pageheader-btn,
    .d-flex.gap-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        max-width: 45% !important; /* Limite pour laisser place au titre */
    }
    
    /* Boutons header - taille standardisée */
    .pageheader-btn .btn,
    .d-flex.gap-2 .btn {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        
        /* Texte limité à 1 ligne */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Icônes dans les boutons - taille réduite */
    .pageheader-btn .btn i,
    .d-flex.gap-2 .btn i {
        font-size: 0.9rem !important;
        margin-right: 4px !important;
    }
}

/* ========================================
   3. CORRECTION SPÉCIFIQUE "MON PROFIL"
   ======================================== */

@media (max-width: 768px) {
    /* Profil - Réduire l'espace entre photo et info */
    .d-flex.align-items-top.p-4.border-bottom-0 {
        padding: 1rem !important;
    }
    
    /* Profil - Avatar plus petit sur mobile */
    .avatar.avatar-xl {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Profil - Cartes plus compactes */
    .card.custom-card {
        margin-bottom: 0.75rem !important;
    }
    
    .card.custom-card .card-body {
        padding: 1rem !important;
    }
    
    .card.custom-card .card-header {
        padding: 0.75rem 1rem !important;
    }
}

/* ========================================
   4. CARTES STATISTIQUES STANDARDISÉES
   ======================================== */

@media (max-width: 768px) {
    /* Statistiques - 2 colonnes au lieu de 4 */
    .row.mb-4 [class*="col-md-3"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }
    
    /* Cartes stats plus compactes */
    .row.mb-4 .card .card-body {
        padding: 0.75rem !important;
    }
    
    /* Icônes stats plus petites */
    .row.mb-4 .fs-2 {
        font-size: 1.5rem !important;
    }
    
    /* Chiffres stats */
    .row.mb-4 .fs-4 {
        font-size: 1.25rem !important;
    }
    
    /* Labels stats */
    .row.mb-4 .small {
        font-size: 0.7rem !important;
    }
}

/* ========================================
   5. LIMITATION TEXTE À 2 LIGNES PARTOUT
   ======================================== */

@media (max-width: 768px) {
    /* Titres de sections */
    .card-title,
    .card-header h5,
    .card-header .card-title {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        /* Max 2 lignes */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-overflow: ellipsis !important;
    }
    
    /* Sous-titres et descriptions */
    .text-muted p,
    .card-body p:not(.mb-0) {
        font-size: 0.85rem !important;
        /* Max 2 lignes pour descriptions courtes */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Labels de formulaire */
    .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
        
        /* 1 ligne max */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ========================================
   6. TABLEAUX RESPONSIVES
   ======================================== */

@media (max-width: 768px) {
    /* Masquer tableaux, afficher cartes */
    .table-responsive {
        display: none !important;
    }
    
    /* Si pas de vue carte alternative, forcer scroll horizontal */
    .table-responsive.mobile-scroll {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table-responsive.mobile-scroll table {
        min-width: 600px !important;
        font-size: 0.75rem !important;
    }
}

/* ========================================
   7. BOUTONS STANDARDS - TAILLES UNIFIÉES
   ======================================== */

@media (max-width: 768px) {
    /* Boutons primaires */
    .btn-primary,
    .btn-rdconnect-primary {
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
        min-height: 36px !important;
    }
    
    /* Boutons secondaires */
    .btn-secondary,
    .btn-outline-primary,
    .btn-outline-secondary {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        min-height: 32px !important;
    }
    
    /* Petits boutons */
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
    }
    
    /* Groupes de boutons */
    .btn-group {
        gap: 4px !important;
    }
    
    /* Boutons full-width pour actions principales */
    .w-100.btn {
        margin-bottom: 0.5rem !important;
    }
}

/* ========================================
   8. CORRECTIONS FORMULAIRES
   ======================================== */

@media (max-width: 768px) {
    /* Inputs et selects */
    .form-control,
    .form-select {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }
    
    /* Textarea */
    textarea.form-control {
        min-height: 80px !important;
    }
    
    /* Marges entre champs */
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Colonnes de formulaire en full-width */
    .row [class*="col-lg-"],
    .row [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   9. CORRECTIONS MODALS
   ======================================== */

@media (max-width: 768px) {
    /* Modals plein écran sur mobile */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    .modal-dialog.modal-lg {
        max-width: 100% !important;
    }
    
    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* Header modal */
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-title {
        font-size: 1rem !important;
        
        /* Max 2 lignes */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* Body modal scrollable */
    .modal-body {
        padding: 1rem !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }
    
    /* Footer modal */
    .modal-footer {
        padding: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    .modal-footer .btn {
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }
}

/* ========================================
   10. BADGES ET STATUTS
   ======================================== */

@media (max-width: 768px) {
    .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }
    
    /* Badges inline */
    .d-flex.mt-2 .badge {
        margin-right: 4px !important;
        margin-bottom: 4px !important;
    }
}

/* ========================================
   11. CENTRAGE ET EMPTY STATES
   ======================================== */

@media (max-width: 768px) {
    /* Empty states */
    .text-center.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .text-center.py-5 i {
        font-size: 3rem !important;
    }
    
    .text-center.py-5 h4 {
        font-size: 1.1rem !important;
        margin-top: 1rem !important;
    }
    
    .text-center.py-5 p {
        font-size: 0.85rem !important;
    }
}

/* ========================================
   12. CORRECTIONS SPÉCIFIQUES PAR PAGE
   ======================================== */

@media (max-width: 768px) {
    /* MESSAGES - Centre de Messages */
    body[class*="messages"] .pageheader-btn {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    /* FORMATIONS - Cartes formations */
    body[class*="formations"] .card {
        margin-bottom: 0.75rem !important;
    }
    
    /* ABONNEMENT - Cartes premium */
    body[class*="premium"] .card {
        margin-bottom: 1rem !important;
    }
    
    /* DOCUMENTS - Liste documents */
    body[class*="documents"] .list-group-item {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* ========================================
   13. ANIMATIONS ET TRANSITIONS
   ======================================== */

@media (max-width: 768px) {
    /* Transitions douces pour toutes les interactions */
    .btn,
    .card,
    .badge {
        transition: all 0.2s ease !important;
    }
    
    /* Feedback tactile */
    .btn:active {
        transform: scale(0.97) !important;
    }
    
    .card:active {
        transform: scale(0.99) !important;
    }
}

/* ========================================
   14. ACCESSIBILITÉ MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Zone de toucher minimale 44x44px */
    a, button, .btn, input[type="checkbox"], input[type="radio"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Espacement entre éléments cliquables */
    .btn + .btn,
    a + a {
        margin-top: 8px !important;
    }
    
    /* Contraste amélioré */
    .text-muted {
        color: #6c757d !important;
    }
}