/**
 * RESPONSIVE STYLES
 * Media queries pour mobile et tablet
 * VERSION 2.8 - Améliorations mobile optimisées
 */

/* ==================== RESPONSIVE MOBILE ==================== */

@media screen and (max-width: 768px) {

    /* ========== LAYOUT GÉNÉRAL ========== */

    /* App container avec padding-top pour header mobile */
    .qslpro-app-container {
        flex-direction: column;
    }

    .qslpro-main-content {
        width: 100%;
        padding: 0; /* Reset padding, géré dans tab-panel */
    }

    /* ========== GRILLES & LAYOUTS ========== */

    /* Chapitres 1 colonne sur mobile */
    .qslpro-chapter-list-progressive {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Cartes chapitres plus compactes */
    .qslpro-chapter-progressive-item {
        padding: 12px;
    }

    /* Grade buttons en colonne */
    .qslpro-grade-buttons-group {
        flex-direction: column;
        gap: 10px;
    }

    .qslpro-grade-btn {
        width: 100%;
        padding: 12px;
    }

    /* Stats complete en colonne */
    .qslpro-complete-stats {
        flex-direction: column;
        gap: 15px;
    }

    /* Phases et tips 1 colonne */
    .qslpro-phases-container,
    .qslpro-tips-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Calendar en colonne */
    .qslpro-calendar-item {
        flex-direction: column;
    }

    .qslpro-calendar-week {
        width: 100%;
    }

    /* Stats cards 1 colonne */
    .qslpro-stats-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* ========== HEADERS & NAVIGATION ========== */

    /* Tab header - garde en ligne pour bouton retour + titre */
    .qslpro-tab-header {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    .qslpro-tab-header h1 {
        font-size: 20px;
        flex: 1;
        min-width: 0;
    }

    /* 🆕 VERSION 4.7.0: Bouton retour mobile */
    .qslpro-btn-back {
        width: 36px;
        height: 36px;
        margin-right: 10px;
    }

    .qslpro-btn-back .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .qslpro-btn-refresh {
        width: 100%;
        justify-content: center;
    }

    /* ========== CARTES & COMPOSANTS ========== */

    /* Cartes de révision */
    .qslpro-card {
        padding: 15px;
    }

    .qslpro-card-question h2 {
        font-size: 18px;
    }

    /* Réponses plus compactes */
    .qslpro-answer-btn {
        padding: 12px;
        font-size: 14px;
    }

    /* Session info */
    .qslpro-session-info {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    /* ========== STATISTIQUES ========== */

    /* Graphiques plus petits */
    .qslpro-chart-container {
        padding: 15px;
    }

    #chart-progress {
        max-height: 250px !important;
    }

    /* Tableau chapitres responsive */
    .qslpro-chapter-table {
        font-size: 13px;
    }

    .qslpro-chapter-table th,
    .qslpro-chapter-table td {
        padding: 8px 6px;
    }

    /* ========== ONBOARDING & GUIDE ========== */

    /* Hero section */
    .qslpro-onboarding-hero {
        padding: 30px 20px;
    }

    .qslpro-onboarding-hero h1 {
        font-size: 28px;
    }

    /* Accordéons */
    .qslpro-accordion-header,
    .qslpro-guide-accordion-header {
        padding: 12px 15px;
    }

    .qslpro-accordion-content,
    .qslpro-guide-accordion-content {
        padding: 15px;
    }

    /* Sections onboarding */
    .qslpro-onboarding-section {
        padding: 20px 15px;
    }

    /* ========== BOUTONS & INTERACTIONS ========== */

    /* Tous les boutons touch-friendly */
    .qslpro-btn,
    button,
    .qslpro-nav-btn,
    .qslpro-exam-btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 15px;
    }

    /* Espacement entre boutons */
    .qslpro-btn + .qslpro-btn {
        margin-top: 10px;
    }

    /* ========== TEXTES ========== */

    /* Réduction légère des tailles */
    body.qslpro-app-body {
        font-size: 15px;
    }

    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }

    /* ========== SPACING GLOBAL ========== */

    /* Réduire les gaps globalement */
    .qslpro-config-section,
    .qslpro-stat-box,
    .qslpro-info-box {
        padding: 15px;
        margin-bottom: 15px;
    }

    /* ========== FORMATIONS HUB v4.7.0 - Grille 2 colonnes → 1 colonne mobile ========== */

    .qslpro-formations-cards {
        grid-template-columns: 1fr;  /* 1 colonne sur mobile */
        gap: 15px;
        padding: 0 10px;
        max-width: 100%;
    }

    /* VERSION 4.8.0 - 3 cartes → 1 colonne mobile */
    .qslpro-formations-cards-3 {
        grid-template-columns: 1fr;
    }

    .qslpro-hub-card-full {
        max-width: 100%;
    }

    /* VERSION 4.9.0 - 4 cartes → 1 colonne mobile */
    .qslpro-formations-cards-4 {
        grid-template-columns: 1fr;
    }

    /* VERSION 5.3.1 - 6 cartes → 1 colonne mobile */
    .qslpro-formations-cards-6 {
        grid-template-columns: 1fr;
    }

    /* Dictées: stacked layout (vidéo en haut, PDF en bas) */
    .qslpro-dictee-item {
        grid-template-columns: 1fr !important;
    }

    .qslpro-dictee-item h3 {
        font-size: 16px;
    }

    .qslpro-dictee-pdf {
        padding: 15px;
    }

    /* ========== LECTEUR DE CHAPITRE - Mobile avec scroll indépendant ========== */

    .qslpro-chapitre-reader,
    .qslpro-modulaire-reader {
        height: calc(100vh - 100px); /* 🆕 Ajusté pour mobile */
        max-height: calc(100vh - 100px);
    }

    .qslpro-chapitre-layout {
        flex-direction: column;
    }

    .qslpro-chapitre-nav {
        width: 100%;
        min-width: 100%;
        max-height: 180px; /* 🆕 TOC scrollable en haut */
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        overflow-y: auto; /* 🆕 Scroll indépendant TOC mobile */
    }

    .qslpro-chapitre-content {
        flex: 1;
        min-height: 0; /* 🆕 Permet le scroll */
        overflow-y: auto; /* 🆕 Scroll indépendant contenu mobile */
    }

    .qslpro-chapitre-content-body .container {
        padding: 20px 15px;
    }

    .qslpro-chapitre-header h1 {
        font-size: 1.1rem;
    }

    /* ========== HUB AIDE v4.7.2 - Grille 3 colonnes → 1 colonne mobile ========== */

    .qslpro-aide-cards {
        grid-template-columns: 1fr;  /* 1 colonne sur mobile */
        gap: 15px;
        padding: 0 10px;
        max-width: 100%;
    }

    /* Formulaire bug report mobile */
    .qslpro-bug-report-container {
        padding: 15px 10px;
    }

    .qslpro-bug-form select,
    .qslpro-bug-form textarea {
        padding: 10px;
        font-size: 16px;  /* Éviter zoom auto iOS */
    }

    .qslpro-hub-card {
        padding: 15px;
        min-height: auto;  /* Hauteur auto sur mobile */
    }

    /* Header mobile - icône + info côte à côte */
    .qslpro-hub-card-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    /* Icône mobile - plus petite */
    .qslpro-hub-card-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .qslpro-hub-card-icon .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    /* Titre et desc mobile */
    .qslpro-hub-card-title {
        font-size: 15px;
        margin-bottom: 3px;
    }

    .qslpro-hub-card-desc {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Contenu mobile */
    .qslpro-hub-card-content {
        margin-bottom: 10px;
    }

    /* Stats mobile - compact */
    .qslpro-hub-card-stats {
        gap: 8px;
    }

    .qslpro-hub-stat {
        padding: 8px 12px;
        min-width: 70px;
    }

    .qslpro-hub-stat-value {
        font-size: 18px;
    }

    .qslpro-hub-stat-label {
        font-size: 9px;
    }

    /* Dropdown mobile */
    .qslpro-hub-card .qslpro-formation-dropdown {
        padding: 8px 10px;
        font-size: 13px;
    }

    .qslpro-formations-intro {
        font-size: 15px;
        padding: 0 15px;
        margin-bottom: 20px;
    }

}

/* ==================== RESPONSIVE LANDSCAPE MOBILE ==================== */

@media screen and (max-width: 768px) and (orientation: landscape) {

    /* Optimisations paysage */
    .qslpro-tab-header h1 {
        font-size: 20px;
    }

    .qslpro-card {
        padding: 12px;
    }

    /* Graphiques encore plus compacts */
    #chart-progress {
        max-height: 200px !important;
    }

}

/* ==================== RESPONSIVE TABLET ==================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* Sidebar un peu plus étroite */
    .qslpro-sidebar {
        width: 240px;
    }

    /* Padding réduit */
    .qslpro-tab-panel {
        padding: 25px 30px 25px 100px !important;
    }

    /* Chapitres 2 colonnes sur tablet */
    .qslpro-chapter-list-progressive {
        grid-template-columns: repeat(2, 1fr);
    }

}