/* Django Hub - Styles Modernisés (v2.2 - Dark Mode Ready) */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    /* Suppression de --light-bg hardcodé pour laisser Bootstrap gérer */
    --card-border-radius: 16px;
    --transition-speed: 0.3s;
    /* Dégagement réservé à la barre basse fixe (.mobile-bottom-nav) : source de
       vérité unique consommée par body et par l'offcanvas « Autre » plein écran. */
    --mobile-bottom-nav-space: 80px;
}

/* === Global === */
body {
    /* Background géré par Bootstrap (bg-body) */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* === Navbar === */
.navbar {
    backdrop-filter: blur(10px);
    /* Utilisation de la variable Bootstrap pour le fond avec transparence */
    background-color: rgba(var(--bs-body-bg-rgb), 0.9) !important; 
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === Cards & Interactions === */
.card {
    border-radius: var(--card-border-radius);
    overflow: hidden;
    /* Background géré par Bootstrap (.card a déjà un bg sémantique) */
}

.hover-lift {
    transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-6px);
    /* Ombre plus subtile en dark mode à gérer si besoin, mais le défaut est ok */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

/* App Card Specifics */
.card-link-wrapper {
    color: inherit;
    display: block;
    text-decoration: none; /* Ajout explicite */
}

.card-link-wrapper:hover {
    color: inherit;
}

.app-unavailable {
    opacity: 0.7;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.app-unavailable:hover {
    transform: none !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

/* === Utility === */
/* Utilisation de bg-primary-subtle de Bootstrap au lieu de hardcoder */
.bg-primary-subtle {
    /* La classe existe déjà dans Bootstrap 5.3, on peut surcharger si besoin mais l'originale est adaptative */
}

/* Surcharge uniquement si nécessaire pour le contraste */
.text-primary-emphasis {
   /* Laisser Bootstrap gérer */
}

.icon-wrapper-lg {
    width: 64px;
    height: 64px;
}

/* Footer */
.footer {
    /* Background et bordure gérés par classes utilitaires dans HTML (bg-body-tertiary) */
}

/* === Mobile Bottom Nav === */
/* Note: Bootstrap 'd-md-none' hides this on screens >= 768px */
@media (max-width: 767.98px) {
    body {
        padding-bottom: var(--mobile-bottom-nav-space); /* Espace pour la navbar */
    }

    .mobile-bottom-nav {
        position: fixed !important; /* Force fixed positioning */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-top: 1px solid var(--bs-border-color); /* Bordure adaptative */
        padding-bottom: env(safe-area-inset-bottom);
        height: auto;
        min-height: 60px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08); /* Ombre plus prononcée vers le haut */
        z-index: 1050 !important; /* Force au-dessus du reste */
        background-color: rgba(var(--bs-body-bg-rgb), 0.95) !important; /* Fond adaptatif */
        backdrop-filter: blur(10px);
    }

    .mobile-bottom-nav .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem; /* Slightly larger text */
        color: var(--secondary-color);
        padding: 0.75rem 0; /* Increased padding for better touch target (min 44px height) */
        transition: color 0.2s;
        width: 100%;
        text-align: center;
        min-height: 56px; /* Ensuring minimum height for touch target */
    }

    .mobile-bottom-nav .nav-link i {
        font-size: 1.4rem; /* Icones légèrement plus grandes */
        margin-bottom: 4px;
        display: block;
    }

    .mobile-bottom-nav .nav-link.active {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    .mobile-bottom-nav .nav-item {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}

/* === Menu « Autre » : grille de tuiles plein écran (mobile / PWA) === */
.menu-grid-offcanvas {
    height: 100% !important; /* Plein écran au lieu du 30vh par défaut de offcanvas-bottom */
    /* Note : la safe-area et le dégagement de la barre basse sont réservés par le
       .offcanvas-body ci-dessous (zone de scroll), pas ici, pour éviter un double
       inset et garantir que les tuiles du bas restent atteignables. */
}

/*
 * Scroll vertical de la grille de tuiles.
 *
 * 1. Contrainte de hauteur : le corps de l'offcanvas est un enfant flex en
 *    colonne. `min-height: 0` + `overflow-y: auto` rendent la contrainte
 *    explicite (la WebView iOS/WKWebView applique mal le défaut Bootstrap et
 *    laisse le corps grandir à la taille du contenu).
 * 2. Dégagement de la barre basse : l'offcanvas est plein écran (`height: 100 %`,
 *    z-index 1045) mais la `.mobile-bottom-nav` fixe (z-index 1050) est peinte
 *    PAR-DESSUS son bas. Sans réserve, la zone de scroll s'étend derrière la
 *    navbar : le contenu « tient » dans le conteneur, aucun scroll ne se
 *    déclenche et la dernière rangée de tuiles reste piégée derrière la navbar.
 *    On réserve donc en bas la hauteur de la navbar (+ safe-area) pour que ces
 *    tuiles débordent réellement et deviennent atteignables au scroll.
 */
.menu-grid-offcanvas .offcanvas-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* inertie de défilement iOS/WKWebView (Capacitor) */
    overscroll-behavior: contain; /* pas de scroll-chaining vers la page derrière */
    padding-bottom: calc(var(--mobile-bottom-nav-space) + env(safe-area-inset-bottom));
}

.menu-grid .menu-tile {
    /* Empêche la sélection de texte pendant l'appui long (drag tactile) */
    -webkit-user-select: none;
    user-select: none;
}

.menu-tile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0.9rem 0.4rem;
    min-height: 92px;
}

.menu-tile-card:hover {
    color: inherit;
}

.menu-tile-card i {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    color: var(--primary-color);
}

.menu-tile-card span {
    font-size: 0.75rem;
    line-height: 1.1;
    font-weight: 500;
}

.menu-tile-card.active {
    border: 2px solid var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
    font-weight: 600;
}

.menu-tile-card.active span {
    color: var(--bs-primary);
    font-weight: 700;
}

.menu-tile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.65rem;
}

/* États de glissement SortableJS */
.menu-tile.sortable-ghost {
    opacity: 0.4;
}

.menu-tile.sortable-drag {
    opacity: 0.9;
}

/* === Version / Release notes page === */
.markdown-content h1 { font-size: 1.5rem; color: #0d6efd; margin-top: 1.5rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
.markdown-content h2 { font-size: 1.25rem; color: #333; margin-top: 1.25rem; font-weight: 600; }
.markdown-content h3 { font-size: 1.1rem; color: #555; margin-top: 1rem; font-weight: 600; }
.markdown-content ul { padding-left: 1.2rem; }
.markdown-content li { margin-bottom: 0.25rem; }
.markdown-content code { background-color: #f8f9fa; color: #d63384; padding: 0.1em 0.3em; border-radius: 0.2rem; font-size: 0.9em; }
.exercise-info-chevron { transition: transform 0.2s ease; }

/* === Utilitaire de repli/dépli générique (collapsible.js) === */
/* min-width:0 : autorise .text-truncate à tronquer un libellé long en flex
   sans pousser le chevron hors de la ligne. */
.js-collapsible-trigger { cursor: pointer; min-height: 44px; min-width: 0; } /* cible tactile WCAG 2.5.5 */
.js-collapsible-trigger > .text-truncate { min-width: 0; }
.js-collapsible-chevron { transition: transform 0.2s ease; }

/* === Supersets — palette pour distinguer plusieurs supersets === */
.superset-color-0 { --ss-color: #0d6efd; } /* bleu */
.superset-color-1 { --ss-color: #d63384; } /* rose */
.superset-color-2 { --ss-color: #fd7e14; } /* orange */
.superset-color-3 { --ss-color: #198754; } /* vert */
.superset-color-4 { --ss-color: #6f42c1; } /* violet */
.superset-color-5 { --ss-color: #20c997; } /* teal */

/* Builder : lignes membres d'un superset */
.formset-row.superset-member { border-left: 4px solid var(--ss-color, #0d6efd) !important; }
.list-group-item.superset-member { border-left: 4px solid var(--ss-color, #0d6efd) !important; }
.superset-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; margin-bottom: 2px; color: var(--ss-color, #0d6efd); }

/* Aperçu Program Builder IA : crayon d'édition du titre */
.editable-pen { font-size: 0.5em; cursor: pointer; }

/* Séance live : carte de bloc superset + entrée dans la liste de séance */
.superset-block-card { border-left: 4px solid var(--ss-color, #0d6efd); }
.superset-title { color: var(--ss-color, #0d6efd); }
.list-group-item.superset-nav-item { border-left: 4px solid var(--ss-color, #0d6efd) !important; }
[aria-expanded="true"] .exercise-info-chevron { transform: rotate(90deg); }
/* Tableau des programmes en lecture */
tr .superset-member { border-left: 4px solid var(--ss-color, #0d6efd) !important; }

/* Bilan de fin de séance & détail de séance : blocs de performances jouées.
   Classe dédiée pour ne pas altérer le rendu des cartes de la séance live. */
.performed-superset-card > .card-header {
    background-color: transparent; /* repli si color-mix() n'est pas supporté */
    background-color: color-mix(in srgb, var(--ss-color, #0d6efd) 10%, transparent);
}
.performed-superset-member {
    border-color: var(--ss-color, #0d6efd) !important;
    color: var(--ss-color, #0d6efd);
}
.performed-set-col { width: 60px; }
.performed-note-col { max-width: 150px; }
/* La perf reste sur une ligne : le tableau défile (.table-responsive) plutôt
   que de casser « 80 kg x 10 reps » en quatre lignes sur mobile. */
.performed-perf-col { white-space: nowrap; }
@media (max-width: 575.98px) {
    .performed-note-col { max-width: 90px; }
}
.share-user-list { max-height: 250px; }