/**
 * KMDT - Patchs responsive globaux
 * Version : 2.20.0 | Date : 2026-05-04
 * Corrige les pages qui dépassaient en mobile et clarifie la cohérence
 * tablette/mobile sur tout le projet (membres, vidéos, dashboard, programme,
 * dossier admin, échéances, paramètres, formulaires).
 *
 * Charge APRES style.css et kmdt.css pour pouvoir override les inline styles
 * via spécificité accrue (.dashboard-header > * { … } ou !important ciblé).
 *
 * Breakpoints :
 *   ≤ 1100 px : tablette paysage / petit laptop
 *   ≤ 768  px : tablette portrait
 *   ≤ 576  px : mobile (référence Cédrik)
 *   ≤ 380  px : très petit mobile (iPhone SE 1ère génération)
 */

/* ============================================================
   FIXES GLOBAUX (toutes tailles)
   ============================================================ */

/* Pas d'overflow-x parasite */
html, body { max-width: 100%; overflow-x: hidden; }

/* Tout container principal accepte de se rétrécir */
.app-layout, .main-content { min-width: 0; }

/* Wrap par défaut sur les barres de filtres avec inline gap */
.dashboard-header, .filters-bar, .echeance-filters, .video-filters,
.search-bar, .filters-row, .filters-form, .header-actions, .header-left,
.video-tags-cloud, .card-header {
    flex-wrap: wrap;
}

/* Tableaux qui peuvent déborder : assurer un overflow-x auto sur le wrap */
.obsidian-table-wrap,
.table-responsive,
.video-liste-table-wrap,
.video-selection-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tableau admin (administratif.php) sans wrap : on le rend scrollable */
.table-responsive table,
.obsidian-table-wrap table {
    min-width: 100%;
}

/* Le bouton Flashcards garde son icône en mobile, label adapté */
.btn-flashcards .btn-flashcards-label {
    display: inline;
}

/* ============================================================
   ≤ 1100 px — petits laptops / tablettes paysage
   ============================================================ */
@media (max-width: 1100px) {
    /* Header de page : laisse les actions descendre proprement */
    .dashboard-header {
        align-items: flex-start;
    }

    /* Programme de grade — table 8 colonnes : police plus compacte */
    .obsidian-table {
        font-size: 0.85rem;
    }
    .obsidian-table th,
    .obsidian-table td {
        padding: 0.7rem 0.85rem;
    }
}

/* ============================================================
   ≤ 768 px — tablette portrait
   ============================================================ */
@media (max-width: 768px) {
    /* Page header : stack vertical pour laisser place aux actions */
    .dashboard-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    /* Override des inline styles des pages PHP (.header-left, .header-actions) */
    .dashboard-header > .header-left,
    .dashboard-header > .header-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100%;
    }

    .dashboard-header > .header-actions {
        gap: 0.5rem;
    }

    .dashboard-header > .header-actions .btn {
        font-size: 0.78rem;
        padding: 0.5rem 0.85rem;
    }

    /* Vidéos — barre de filtres : champs pleine largeur */
    .video-filters .form-group {
        flex: 1 1 100% !important;
    }
    .video-filters .form-group select,
    .video-filters .form-group input {
        width: 100%;
    }

    /* Échéances — filtres en boutons, taille réduite */
    .echeance-filters .btn {
        font-size: 0.75rem;
        padding: 0.45rem 0.7rem;
    }

    /* Cards & sections */
    .card,
    .profile-section {
        padding: 1rem;
    }

    /* Profil membre : actions full-width */
    .profile-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .profile-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
        justify-content: center;
    }

    /* KPI grid : 2 colonnes en tablette */
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Page-title plus compact */
    .page-title {
        font-size: 1.4rem;
    }

    /* Filters-bar (administratif) — colonnes pleine largeur */
    .filters-form,
    .filters-bar .filters-form {
        gap: 0.5rem !important;
    }
    .filters-form .form-group {
        flex: 1 1 100%;
    }
    .filters-form .form-select {
        width: 100%;
    }

    /* Card-header (grade_admin) : titre + meta empilés */
    .card-header {
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ============================================================
   ≤ 576 px — mobile (Cédrik référence)
   ============================================================ */
@media (max-width: 576px) {
    /* Sidebar plus large pour bonne lisibilité */
    .sidebar {
        width: 280px;
    }

    /* Container : padding réduit */
    .main-content {
        padding: 1rem 0.75rem !important;
        padding-top: 4rem !important;
    }

    /* Header dashboard — stack vertical et compact */
    .dashboard-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .dashboard-header > .header-left,
    .dashboard-header > .header-actions {
        width: 100%;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .header-left .obsidian-badge-stats {
        font-size: 0.65rem;
    }

    /* Page-title */
    .page-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Boutons header — compactés */
    .dashboard-header > .header-actions .btn {
        font-size: 0.72rem;
        padding: 0.45rem 0.7rem;
        flex: 1 1 auto;
    }

    /* Bouton flashcards : icône uniquement en mobile (gain de place) */
    .btn-flashcards .btn-flashcards-label {
        display: none;
    }
    .btn-flashcards {
        padding: 0.45rem 0.75rem;
    }

    /* KPI grid : 2 colonnes très compactes */
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .kpi-card {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    .kpi-icon {
        width: 36px;
        height: 36px;
    }
    .kpi-value {
        font-size: 1.25rem;
    }
    .kpi-label {
        font-size: 0.62rem;
    }
    .kpi-sub {
        font-size: 0.58rem;
    }

    /* KPI panels : 1 colonne */
    .kpi-panels {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .kpi-panel {
        padding: 0.85rem;
    }
    .kpi-panel-title {
        font-size: 0.72rem;
    }

    /* Vidéos grid : 1 colonne large */
    .videos-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Filtres vidéos : tout en colonne */
    .video-filters {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }

    /* Filtres dossier admin */
    .filters-bar {
        margin-bottom: 1rem;
    }

    /* Échéances — KPIs compacts */
    .echeance-filters {
        gap: 0.35rem;
    }
    .echeance-filters .btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
        flex: 1 1 calc(50% - 0.2rem);
        text-align: center;
        justify-content: center;
    }

    /* Profil membre — header */
    .profile-header {
        padding: 1rem !important;
        gap: 0.75rem;
    }
    .profile-name {
        font-size: 1.1rem !important;
    }
    .profile-tags {
        justify-content: center;
        gap: 0.3rem;
        flex-wrap: wrap;
    }
    .profile-tags .badge {
        font-size: 0.62rem;
        padding: 0.2rem 0.5rem;
    }

    /* Profil — actions full-width chacune */
    .profile-actions .btn {
        flex: 1 1 100%;
    }

    /* Cards / Sections */
    .card,
    .profile-section {
        padding: 0.85rem !important;
        margin-bottom: 0.85rem;
    }
    .section-title {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
    }

    /* Tableau Programme grade — police plus petite */
    .obsidian-table {
        font-size: 0.78rem;
    }
    .obsidian-table th,
    .obsidian-table td {
        padding: 0.55rem 0.65rem;
    }

    /* Boutons d'action dans tableaux — full-icon */
    .obsidian-table .btn-small,
    .obsidian-table .btn.btn-small {
        font-size: 0.7rem;
        padding: 0.3rem 0.55rem;
    }

    /* Modale flashcards — pleine largeur viewport */
    .flashcards-dialog {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 92vh;
        margin: 0;
    }
    .flashcards-modal {
        align-items: center !important;
        padding: 0.5rem;
    }
    .flashcards-stats {
        font-size: 0.7rem;
    }

    /* Modale photo cropper — adapté mobile */
    .photo-cropper-dialog {
        width: 96% !important;
        max-height: 92vh;
        overflow-y: auto;
    }
    .photo-editor-zone {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .photo-preview-circle {
        margin: 0 auto;
    }
    .photo-editor-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem !important;
    }
    .photo-editor-actions .btn {
        flex: 1 1 calc(50% - 0.2rem);
        font-size: 0.75rem;
        padding: 0.45rem 0.65rem;
        text-align: center;
    }

    /* Modale modale-générique : padding adapté */
    .video-liste-members-modal,
    .modal-content,
    .modal-dialog {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 92vh;
    }

    /* Form actions : boutons en colonne (déjà géré dans kmdt.css mais on
       sécurise pour les pages qui n'utilisent pas .form-actions) */
    .video-form-actions,
    .grade-form-actions,
    .form-actions-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .video-form-actions .btn,
    .grade-form-actions .btn,
    .form-actions-row .btn {
        width: 100%;
        text-align: center;
    }

    /* Alertes : padding adapté */
    .alert {
        font-size: 0.85rem;
        padding: 0.75rem 0.85rem;
    }

    /* Empty state */
    .empty-state {
        padding: 2rem 1rem;
    }
    .empty-icon {
        font-size: 2.2rem;
    }
    .empty-text {
        font-size: 0.85rem;
    }

    /* Stat-row dans header — compact */
    .obsidian-badge-stats {
        font-size: 0.6rem;
        padding: 0.3rem 0.55rem;
    }

    /* Lien d'invitation : input + boutons stack */
    .invitation-link-row,
    section#activation-compte > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Vidéo embed — full width */
    .video-card-thumb,
    .video-player {
        max-width: 100%;
    }

    /* Vidéo card body : titre 2 lignes max */
    .video-card-title {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    /* Backup / Import — formulaires lisibles */
    .backup-card,
    .import-card {
        padding: 0.85rem !important;
    }

    /* Paramètres : sections en colonne */
    .params-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* Login — adapté tactile */
    .login-container {
        padding: 1.25rem !important;
        margin: 0.75rem !important;
    }
    .login-title {
        font-size: 1.8rem !important;
    }
}

/* ============================================================
   ≤ 380 px — très petit mobile (iPhone SE 1ère génération)
   ============================================================ */
@media (max-width: 380px) {
    /* KPI grid : 1 colonne (sinon trop tassé) */
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    /* Boutons d'action dans header : stack en colonne */
    .dashboard-header > .header-actions {
        flex-direction: column !important;
    }
    .dashboard-header > .header-actions .btn {
        width: 100%;
        flex: none;
    }

    /* Filtres vidéos / échéances : empilage 1 par 1 */
    .echeance-filters .btn {
        flex: 1 1 100%;
    }

    /* Profile-actions : 100% chacun */
    .profile-actions .btn {
        flex: 1 1 100% !important;
    }

    /* Page-title encore plus petit */
    .page-title {
        font-size: 1rem !important;
    }

    /* Sidebar : 92% du viewport */
    .sidebar {
        width: 92vw;
    }
}

/* ============================================================
   FIX MEMBRES — filtres et sélecteur de vue toujours visibles (v2.20.1)
   ============================================================ */
/* Avant v2.20.1 :
   - Les 5 selects (Rôles, Ceintures, Statuts, Divisions, Abonnements) etaient
     caches derriere un bouton "▼ Filtres" en mobile (≤576px) — l'utilisateur
     devait cliquer pour les voir.
   - Le sélecteur de vue (Liste / Galerie / Cartes) etait cache en mobile via
     un display:none !important, forcant la vue Cartes uniquement.
   On retablit tout : tous les filtres sont visibles d'office, le toggle "▼"
   devient inutile et est masque, et le sélecteur de vue est de retour. */

@media (max-width: 768px) {
    /* Sélecteur de vue rétabli en tablette portrait et mobile */
    .view-toggle {
        display: flex !important;
        flex-shrink: 0;
    }

    /* Le tableau membres reste affichable (scroll horizontal sur ses 9 cols) */
    .obsidian-table-wrap#membersTable {
        display: block;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 576px) {
    /* Filtres TOUJOURS visibles en mobile (override du display:none historique) */
    .filters-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .filters-row .form-select {
        width: 100%;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    /* Le bouton "▼ Filtres" devient inutile vu qu'on affiche tout : on le masque */
    .btn-toggle-filters {
        display: none !important;
    }

    /* Sélecteur de vue compact, en fin de barre de filtres, prend une ligne complete */
    .view-toggle {
        margin-left: 0 !important;
        align-self: stretch;
        justify-content: center;
        order: 99; /* envoie le toggle en bas de la liste de filtres */
    }
    .view-toggle .btn-view {
        width: 36px;
        height: 36px;
    }
    .view-toggle .btn-view svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
   FIX MODALE FLASHCARDS — toujours dans le viewport
   ============================================================ */
.flashcards-modal {
    z-index: 9000;
}
.flashcards-dialog {
    box-sizing: border-box;
}

/* ============================================================
   FIX INLINE STYLES "grid-template-columns" (video_stats, etc.)
   ============================================================ */
@media (max-width: 768px) {
    /* Toute grille 2 colonnes inline → 1 colonne en tablette portrait */
    [style*="grid-template-columns: 1fr 1fr"]:not(.kpi-grid):not(.profile-grid) {
        grid-template-columns: 1fr !important;
    }
    /* Toute grille 3 colonnes inline → 1 colonne en tablette portrait */
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Toute grille 4 colonnes inline → 1 colonne en tablette portrait */
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* "minmax(280px, 1fr)" et similaires se gèrent déjà tout seul */
}

/* ============================================================
   FIX TABLES ORPHELINES (sans wrapper)
   ============================================================ */
@media (max-width: 768px) {
    /* Toute table directement dans .card / .profile-section / la page :
       on encapsule visuellement avec overflow scrollable parent */
    .card > table,
    .profile-section > table,
    main.main-content > table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        white-space: nowrap;
    }
    main.main-content > table thead,
    main.main-content > table tbody,
    .card > table thead,
    .card > table tbody {
        display: revert;
    }
}

/* video_stats : table avec inline width:100% → forcée scrollable */
@media (max-width: 576px) {
    .card > div > table[style*="width: 100%"] {
        font-size: 0.75rem;
    }
}

/* ============================================================
   FIX PARAMÈTRES — toggles ON/OFF en mobile
   ============================================================ */
@media (max-width: 576px) {
    /* Forms toggle dans Paramètres : passage en colonne pour ne pas
       coller le bouton à droite quand le texte est long */
    .main-content form[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .main-content form[style*="justify-content: space-between"] .btn {
        align-self: flex-end;
    }

    /* Cards Paramètres avec icône + titre + description : icône au-dessus */
    a.card[style*="display: flex"][style*="align-items: center"] {
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    a.card[style*="display: flex"][style*="align-items: center"] > span:first-child {
        font-size: 1.25rem !important;
    }
    a.card[style*="display: flex"][style*="align-items: center"] strong {
        font-size: 0.92rem;
    }
    a.card[style*="display: flex"][style*="align-items: center"] p {
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   FIX FICHE MEMBRE — section activation compte mobile
   ============================================================ */
@media (max-width: 576px) {
    /* Bloc activation : input + boutons full-width */
    section#activation-compte input[type="text"][style*="flex: 1"] {
        min-width: auto !important;
        width: 100%;
    }
    section#activation-compte > div[style*="display: flex"] .btn {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   FIX BACKUP / RESTORE — formulaire fichier mobile
   ============================================================ */
@media (max-width: 576px) {
    input[type="file"] {
        font-size: 0.8rem;
        max-width: 100%;
    }
}

/* ============================================================
   FIX MODALES GÉNÉRIQUES (compte invitation, photo lightbox, etc.)
   ============================================================ */
@media (max-width: 576px) {
    /* Toute modale qui utilise un dialog flexible doit s'adapter au viewport */
    .compte-modal-dialog,
    .compte-modal-content,
    .modal-dialog,
    .modal-content,
    [class*="-modal-dialog"],
    [class*="-modal-content"] {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh;
        margin: 0;
    }

    /* Lightbox photo : centrage + fermeture facile */
    .photo-lightbox img,
    .lightbox-image,
    [class*="lightbox"] img {
        max-width: 96vw;
        max-height: 80vh;
        object-fit: contain;
    }
}

/* ============================================================
   FIX FOND FUMÉE EN MOBILE — kmdt-theme (v2.20.2)
   ============================================================ */
/* Bug historique : kmdt.css mettait left:240px / width:calc(100% - 240px)
   en dur sur le pseudo-élément ::before (overlay sombre + lueurs). En mobile,
   la sidebar est cachée mais le ::before gardait sa position desktop, créant
   une bande claire à droite (le fond du body apparaissait). Correction : on
   force left:0 + width:100% en mobile. */
@media (max-width: 768px) {
    .kmdt-theme .main-content::before {
        left: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   SIDEBAR COLLAPSABLE EN DESKTOP (v2.20.2)
   ============================================================ */
/* Permet à l'utilisateur de fermer la sidebar même en desktop / paysage
   tablette pour gagner de la place. État persisté en localStorage par le JS
   du footer. La classe .app-layout--sidebar-collapsed est appliquée au body
   ou au .app-layout. */

/* Bouton fermer la sidebar (situé dans .sidebar-brand, à droite) */
.sidebar-close-btn {
    display: none; /* visible uniquement en desktop ≥ 769 px */
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    margin-left: auto;
    transition: all 0.15s ease;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.sidebar-close-btn:hover {
    background: var(--bg-card-hover);
    color: var(--accent-cyan);
    border-color: var(--border-accent);
}
.sidebar-close-btn svg {
    width: 16px;
    height: 16px;
}

/* En desktop : afficher le bouton fermer */
@media (min-width: 769px) {
    .sidebar-close-btn {
        display: inline-flex;
    }

    /* Quand la sidebar est repliée par l'utilisateur en desktop */
    .app-layout--sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }
    .app-layout--sidebar-collapsed .main-content {
        margin-left: 0;
        padding: 1.5rem 2rem;
    }
    /* Le burger réapparaît en desktop quand sidebar repliée pour la rouvrir */
    .app-layout--sidebar-collapsed .sidebar-toggle {
        display: flex;
    }
    /* Le ::before s'élargit pour couvrir tout l'écran quand sidebar repliée */
    .app-layout--sidebar-collapsed .kmdt-theme .main-content::before,
    .kmdt-theme .app-layout--sidebar-collapsed .main-content::before,
    body:has(.app-layout--sidebar-collapsed) .kmdt-theme .main-content::before {
        left: 0;
        width: 100%;
    }
}

/* ============================================================
   FIX VUE "CARTES" — 1 carte par ligne en mobile (v2.20.2)
   ============================================================ */
/* L'utilisateur veut, dans la vue "Cartes", une carte par ligne pleine
   largeur (au lieu de 2 cartes côte à côte qui rendaient mal sur les
   smartphones étroits). La vue "Galerie" (data-view="grid") reste en 2 cols
   mobile pour rester compacte. */
@media (max-width: 576px) {
    /* Vue Cartes (grandes vignettes) → 1 col */
    .students-grid[data-view="cards"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    /* Vue Galerie (vignettes compactes) → 2 cols (par défaut kmdt.css) */
    .students-grid[data-view="grid"],
    .students-grid:not([data-view]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* Vue Liste : déjà en flex-column, rien à changer */
    .students-grid[data-view="list"] {
        display: flex !important;
        flex-direction: column;
    }
}

/* En tablette portrait, la vue Cartes garde 2 colonnes (assez large) */
@media (min-width: 577px) and (max-width: 768px) {
    .students-grid[data-view="cards"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   FIX SAFE-AREA iOS (notch + home indicator)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .main-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .sidebar {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}