/*
 * Arc_Prod Rôle du fichier : règles structurelles globales mobile-first pour le runtime tenant.
 * Fichier: public_html/assets/xhelpers/css/modules/mobile_responsive.css
 * Objectif : garantir un comportement responsive cohérent entre modules sans patch par vue.
 */

/* Shared safety */
body.arcprod-tenant img,
body.arcprod-tenant video,
body.arcprod-tenant iframe,
body.arcprod-tenant svg {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    body.arcprod-tenant {
        overflow-x: hidden;
    }

    body.arcprod-tenant .main-content-area {
        margin-top: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.arcprod-tenant .main-content-area :is(.container, .stats-container) {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.arcprod-tenant :is(.tutorial-container, .video-container, .resource-container, .glossary-container,
        .guide-container, .forum-home-content .stats-container, .edition-page-content .tutorial-container) {
        margin-top: 0.5rem !important;
    }

    /* Module headers */
    body.arcprod-tenant .module-header-tools {
        width: 100%;
        margin-left: 0 !important;
        justify-content: space-between;
        gap: 0.55rem !important;
    }

    body.arcprod-tenant .search-box-container {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.arcprod-tenant :is(.tutorial-search, .resource-search, .guide-search, .video-search, #searchInput, #videoSearch) {
        width: 100% !important;
    }

    body.arcprod-tenant .module-header-primary-action {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Horizontal-safe chips and filters */
    body.arcprod-tenant :is(.nav-tabs, .guide-path-filters, .module-filters-inline-row .nav-tabs) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.15rem;
        gap: 0.45rem !important;
    }

    body.arcprod-tenant :is(.nav-tabs > li, .guide-path-filters > button, .module-filters-inline-row .nav-item) {
        flex: 0 0 auto !important;
    }

    /* Tables */
    body.arcprod-tenant :is(.table-responsive, .data-table-container, .stats-table-responsive) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    body.arcprod-tenant :is(table.item-list, table.data-table, table.table) {
        min-width: 560px !important;
    }

    body.arcprod-tenant .dataTables_wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stats/review/forum cards */
    body.arcprod-tenant :is(.metrics-grid, .lifecycle-metrics-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Cards grids */
    body.arcprod-tenant :is(.videos-page-content #videoGrid, .resources-page-content #cards-row, .tutorials-page-content #cards-row,
        .guides-page-content #cards-row, .my-favorites-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    body.arcprod-tenant :is(.videos-page-content #videoGrid > *, .resources-page-content #cards-row > *,
        .tutorials-page-content #cards-row > *, .guides-page-content #cards-row > *) {
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Pagination */
    body.arcprod-tenant .pagination-container {
        gap: 0.5rem !important;
    }

    body.arcprod-tenant .pagination .page-link {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem 0.55rem;
    }

    /* Contact / form readability */
    body.arcprod-tenant :is(input.form-control, select.form-select, textarea.form-control, .btn) {
        min-height: 42px;
    }

    body.arcprod-tenant textarea.form-control {
        min-height: 120px;
    }
}

@media (max-width: 767.98px) {
    body.arcprod-tenant .main-content-area {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    body.arcprod-tenant :is(.tutorial-title, .video-title, .resource-title, .glossary-title, .guide-title, .stats-title) {
        font-size: clamp(1.7rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    body.arcprod-tenant .module-filters-group-label {
        margin-bottom: 0.45rem !important;
    }

    body.arcprod-tenant :is(.videos-page-content #videoGrid, .resources-page-content #cards-row, .tutorials-page-content #cards-row,
        .guides-page-content #cards-row, .my-favorites-grid) {
        grid-template-columns: 1fr !important;
    }

    body.arcprod-tenant :is(.metric-card, .data-table-card, .card) {
        border-radius: 14px !important;
    }

    body.arcprod-tenant :is(.forum-home-content .stats-actions, .lifecycle-header-top) {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    body.arcprod-tenant :is(.forum-home-content .stats-actions > *, .lifecycle-header-top > .btn-stats-icon) {
        min-height: 40px;
    }

    body.arcprod-tenant .guide-detail-container .guide-content-layout {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    body.arcprod-tenant .guide-detail-container .guide-steps-nav {
        order: 2;
    }

    body.arcprod-tenant .guide-detail-container .guide-step-card {
        order: 1;
    }

    body.arcprod-tenant :is(.pagination-container, #forum-pagination-outer) {
        justify-content: flex-start !important;
    }

    body.arcprod-tenant :is(.data-table th, .data-table td, table.table th, table.table td) {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 575.98px) {
    body.arcprod-tenant :is(.metrics-grid, .lifecycle-metrics-grid) {
        grid-template-columns: 1fr !important;
    }

    body.arcprod-tenant :is(table.item-list, table.data-table, table.table) {
        min-width: 500px !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .videos-page-content, .resources-page-content,
        .glossary-page-content, .guides-page-content, .forum-home-content) .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.arcprod-tenant :is(.nav-tabs .nav-link, .category-tab, .guide-path-chip) {
        min-height: 34px !important;
        font-size: 0.9rem !important;
        padding-left: 0.72rem !important;
        padding-right: 0.72rem !important;
    }
}

/* ===================================================================
 * Correctifs mobiles ciblés — audit pré-production (2026-04-04)
 * =================================================================== */

/* Forum — icônes admin (pin/lock/delete) : cible tactile 40px
 * forum_home.css impose .forum-icon-btn { width: 20px; height: 20px } */
@media (max-width: 767.98px) {
    body.arcprod-tenant .forum-icon-btn {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* .search-box hardcodé à 240px dans forum_home.css */
    body.arcprod-tenant .search-box {
        width: 100% !important;
        max-width: none;
    }

    /* Glossaire — barre de lettres scrollable + boutons ≥ 40px */
    body.arcprod-tenant .letter-bar-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    body.arcprod-tenant .letter-btn {
        min-height: 40px;
        min-width: 40px;
    }
}

/* Filtres inline (guides, FAQ, ressources) — sections empilées sur mobile
 * Les nav-tabs internes restent en scroll horizontal (règle ligne 61) */
@media (max-width: 991.98px) {
    body.arcprod-tenant .module-filters-inline-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Module LimeSurvey API — padding réduit sur tablette/mobile */
    body.arcprod-tenant .lsapi-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Module LimeSurvey API — tableau et contrôles sur petit écran */
@media (max-width: 575.98px) {
    body.arcprod-tenant .lsapi-controls .row {
        --bs-gutter-x: 0.5rem;
    }

    body.arcprod-tenant [data-ls-table] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
}

/* ===================================================================
 * Expérience mobile native — Phase mobile-UX (2026-05-02)
 * =================================================================== */

/* ── 1. Suppression du flash de tap Safari (global) ────────────────── */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ── 2. Touch feedback natif ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    body.arcprod-tenant :is(.card, .faq-item, .content-card, .metric-card, .module-card):active {
        transform: scale(0.98);
        transition: transform 0.1s ease-out;
    }

    body.arcprod-tenant .btn:active {
        transform: scale(0.96);
        opacity: 0.85;
    }

    /* Tactile = pas de hover : afficher en permanence les actions renommer/supprimer des chips de categorie */
    body.arcprod-tenant .admin-cat-manage {
        opacity: 1;
    }
}

/* ── 3. Safe areas complémentaires ────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Footer : Home Indicator iPhone */
    body.arcprod-tenant footer {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    /* Sidebar offcanvas header : encoche */
    body.arcprod-tenant .offcanvas-header {
        padding-top: max(0.85rem, calc(0.85rem + env(safe-area-inset-top)));
    }

    /* Bouton retour en haut : au-dessus du Home Indicator */
    body.arcprod-tenant .arcprod-back-to-top {
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ── 4. Overscroll behavior ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Empêche le back-swipe Android accidentel sur le contenu principal */
    body.arcprod-tenant .main-content-area {
        overscroll-behavior-x: none;
    }

    /* Contient le scroll dans la sidebar et les modaux */
    body.arcprod-tenant :is(.offcanvas-body, .modal-body) {
        overscroll-behavior-y: contain;
    }

    /* Accordéons FAQ */
    body.arcprod-tenant .accordion-body {
        overscroll-behavior-y: contain;
    }
}

/* ── 5. Scroll snap — carousels de cartes (< 768px) ──────────────── */
@media (max-width: 767.98px) {
    body.arcprod-tenant :is(
        .videos-page-content #videoGrid,
        .resources-page-content #cards-row,
        .tutorials-page-content #cards-row,
        .guides-page-content #cards-row
    ) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        padding-bottom: 0.5rem;
        gap: 0.75rem !important;
        grid-template-columns: unset !important;
    }

    body.arcprod-tenant :is(
        .videos-page-content #videoGrid,
        .resources-page-content #cards-row,
        .tutorials-page-content #cards-row,
        .guides-page-content #cards-row
    )::-webkit-scrollbar {
        display: none;
    }

    body.arcprod-tenant :is(
        .videos-page-content #videoGrid > *,
        .resources-page-content #cards-row > *,
        .tutorials-page-content #cards-row > *,
        .guides-page-content #cards-row > *
    ) {
        scroll-snap-align: start;
        flex: 0 0 85vw !important;
        max-width: 340px !important;
        min-width: 0 !important;
    }
}

/* ── 5.1 Correction spécificité carousel resources ───────────────── */
/* resources.css déclare flex: 0 0 100% !important sur .resource-item  */
/* avec une spécificité (1,3,1). On cible le même sélecteur dans ce    */
/* fichier qui est chargé après resources.css → même spécificité mais  */
/* déclaration plus tardive dans la cascade → victoire garantie.       */
@media (max-width: 767.98px) {
    body.arcprod-tenant .resources-page-content #cards-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
        flex: 0 0 85vw !important;
        max-width: 340px !important;
        width: 85vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── 6. Swipe entre articles — indicateurs visuels ───────────────── */
@media (max-width: 991.98px) {
    .swipe-hint {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        opacity: 0.12;
        pointer-events: none;
        font-size: 2rem;
        color: var(--text-primary, #1f2937);
        transition: opacity 0.15s ease;
        padding: 0.5rem;
    }

    .swipe-hint-left {
        left: 0.25rem;
    }

    .swipe-hint-right {
        right: 0.25rem;
    }
}

/* ── 7. Pull-to-refresh — spinner CSS ─────────────────────────────── */
.pull-refresh-spinner {
    position: fixed;
    top: calc(4px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
}

.pull-refresh-icon {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary-color, #0f4c81);
    border-radius: 50%;
    animation: pullRefreshSpin 0.8s linear infinite;
    background: var(--bg-primary, #fff);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

@keyframes pullRefreshSpin {
    to { transform: rotate(360deg); }
}

/* ── 8. Micro-animations d'entrée ─────────────────────────────────── */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    /* Animation d'entrée sur les cartes des grilles modules */
    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ) {
        animation: slideUpFadeIn 0.3s ease-out both;
    }

    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ):nth-child(1) { animation-delay: 0ms; }

    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ):nth-child(2) { animation-delay: 50ms; }

    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ):nth-child(3) { animation-delay: 100ms; }

    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ):nth-child(4) { animation-delay: 150ms; }

    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ):nth-child(n+5) { animation-delay: 200ms; }

    /* Accordéons FAQ : transition fluide cubic-bezier */
    body.arcprod-tenant .accordion-collapse {
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* Respect de prefers-reduced-motion : zéro animation */
@media (prefers-reduced-motion: reduce) {
    body.arcprod-tenant :is(
        .tutorials-page-content #cards-row > *,
        .videos-page-content #videoGrid > *,
        .guides-page-content #cards-row > *,
        .resources-page-content #cards-row > *
    ) {
        animation: none !important;
    }

    body.arcprod-tenant .accordion-collapse {
        transition: none !important;
    }

    .pull-refresh-icon {
        animation: none !important;
    }
}

/* ── 9. Inputs optimisés mobile ───────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Prévention zoom iOS sur select (avec !important pour lever les overrides) */
    body.arcprod-tenant select {
        font-size: 16px !important;
    }

    /* Empêche le resize horizontal du textarea */
    body.arcprod-tenant textarea {
        resize: vertical;
    }

    /* Supprime le style natif iOS sur les champs recherche */
    body.arcprod-tenant input[type="search"] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ── 10. Compacité des cartes de modules sur smartphone ──────────── */
/* Padding réduit des card-body, thumbnail vidéo moins haute, titre
 * vidéo légèrement allégé. Tous les sélecteurs ont la même spécificité
 * que les CSS de module — mobile_responsive.css étant chargé après,
 * la cascade CSS assure la victoire sans contournements. */
@media (max-width: 767.98px) {
    /* Padding card-body : 0.9rem 1rem → 0.7rem 0.85rem sur les 4 modules */
    body.arcprod-tenant .tutorials-page-content .tutorial-card .card-body {
        padding: 0.7rem 0.85rem !important;
    }

    body.arcprod-tenant .resources-page-content .resource-card .card-body {
        padding: 0.7rem 0.85rem !important;
    }

    body.arcprod-tenant .guides-page-content .guide-card .card-body {
        padding: 0.7rem 0.85rem !important;
    }

    body.arcprod-tenant .videos-page-content .video-card-body {
        padding: 0.65rem 0.85rem !important;
    }

    /* Titre vidéo légèrement réduit : 1.05rem → 0.97rem */
    body.arcprod-tenant .videos-page-content .video-card-title {
        font-size: 0.97rem !important;
    }

    /* Thumbnail vidéo moins haute : 180px → 150px */
    body.arcprod-tenant :is(.videos-page-content, .favorite-videos-page-content) .video-thumbnail {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }
}

/* ── 10.1 Très petit écran — iPhone SE, Galaxy A (< 576px) ──────── */
@media (max-width: 575.98px) {
    /* Padding card-body encore plus compact */
    body.arcprod-tenant .tutorials-page-content .tutorial-card .card-body {
        padding: 0.6rem 0.75rem !important;
    }

    body.arcprod-tenant .resources-page-content .resource-card .card-body {
        padding: 0.6rem 0.75rem !important;
    }

    body.arcprod-tenant .guides-page-content .guide-card .card-body {
        padding: 0.6rem 0.75rem !important;
    }

    body.arcprod-tenant .videos-page-content .video-card-body {
        padding: 0.55rem 0.75rem !important;
    }

    /* Titre vidéo encore réduit */
    body.arcprod-tenant .videos-page-content .video-card-title {
        font-size: 0.93rem !important;
    }

    /* Thumbnail vidéo encore moins haute : 130px */
    body.arcprod-tenant :is(.videos-page-content, .favorite-videos-page-content) .video-thumbnail {
        height: 130px !important;
        min-height: 130px !important;
        max-height: 130px !important;
    }
}