/*
 * Xhelpers — Shell application mobile (smartphone).
 * File: public_html/assets/xhelpers/css/modules/mobile_app_shell.css
 *
 * Objectif : ressenti app native (tab bar bas, chrome compact, listes verticales).
 * TOUTES les règles sont scopées max-width 991.98px (desktop 100 % inchangé).
 */

/* ── Variables shell (mobile only) ───────────────────────────────── */
@media (max-width: 991.98px) {
    body.arcprod-tenant.has-mobile-app-shell {
        --mobile-tabbar-height: 56px;
        --mobile-tabbar-total: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
        --mobile-navbar-height: 52px;
    }

    /* ── Navbar : chrome app compact ─────────────────────────────── */
    body.arcprod-tenant.has-mobile-app-shell #navbar.navbar-modern {
        min-height: var(--mobile-navbar-height);
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        padding-bottom: 6px;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(1.2) blur(12px);
        -webkit-backdrop-filter: saturate(1.2) blur(12px);
    }

    body.arcprod-tenant.has-mobile-app-shell {
        padding-top: calc(var(--mobile-navbar-height) + env(safe-area-inset-top, 0px) + env(titlebar-area-height, 0px));
        padding-bottom: 0;
    }

    /* Hamburger haut remplacé par l'onglet « Menu » de la tab bar */
    body.arcprod-tenant.has-mobile-app-shell #mobileMenuToggle {
        display: none !important;
    }

    /* Sous-titre branding masqué : plus d'espace pour le nom */
    body.arcprod-tenant.has-mobile-app-shell .brand-secondary {
        display: none !important;
    }

    body.arcprod-tenant.has-mobile-app-shell .brand-primary {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
        font-weight: 650;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.arcprod-tenant.has-mobile-app-shell .ulb-logo-brand {
        width: 30px !important;
        height: 30px !important;
    }

    /* Toggle thème : déjà dans le menu profil — allège la barre */
    body.arcprod-tenant.has-mobile-app-shell .navbar-theme-toggle {
        display: none !important;
    }

    /* Avatar plus compact */
    body.arcprod-tenant.has-mobile-app-shell .user-avatar,
    body.arcprod-tenant.has-mobile-app-shell .dropdown-user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    body.arcprod-tenant.has-mobile-app-shell .user-dropdown-toggle .dropdown-arrow {
        display: none;
    }

    body.arcprod-tenant.has-mobile-app-shell .user-role-icon {
        display: none;
    }

    /* ── Zone de contenu ─────────────────────────────────────────── */
    body.arcprod-tenant.has-mobile-app-shell .main-content-area {
        margin-top: 0.35rem !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        padding-bottom: calc(var(--mobile-tabbar-total) + 0.85rem) !important;
        min-height: calc(100dvh - var(--mobile-navbar-height) - env(safe-area-inset-top, 0px));
    }

    body.arcprod-tenant.has-mobile-app-shell .main-content-area > .container,
    body.arcprod-tenant.has-mobile-app-shell .main-content-area :is(
        .tutorial-container, .video-container, .resource-container,
        .glossary-container, .guide-container, .faq-container,
        .template-library-container, .survey-wizard-container
    ) {
        max-width: 100% !important;
    }

    /* Footer ULB discret en app mobile */
    body.arcprod-tenant.has-mobile-app-shell footer.footer-slim {
        display: none !important;
    }

    /* Back-to-top au-dessus de la tab bar */
    body.arcprod-tenant.has-mobile-app-shell .arcprod-back-to-top {
        bottom: calc(var(--mobile-tabbar-total) + 0.75rem) !important;
        right: 0.85rem !important;
        width: 42px;
        height: 42px;
    }

    /* ── Tab bar bas (style iOS / Material) ───────────────────────── */
    .mobile-app-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: var(--mobile-tabbar-total);
        padding: 0 0.15rem env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--bg-primary, #ffffff) 92%, transparent);
        background: rgba(255, 255, 255, 0.92);
        border-top: 0.5px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
        backdrop-filter: saturate(1.4) blur(16px);
        -webkit-backdrop-filter: saturate(1.4) blur(16px);
    }

    .mobile-app-tabbar__item {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: var(--mobile-tabbar-height);
        padding: 6px 2px 4px;
        margin: 0;
        border: 0;
        background: transparent;
        color: var(--token-text-secondary, #64748b);
        text-decoration: none;
        font-family: inherit;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.15;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        transition: color 0.15s ease, transform 0.1s ease;
    }

    .mobile-app-tabbar__item i {
        font-size: 1.28rem;
        line-height: 1;
        transition: transform 0.15s ease;
    }

    .mobile-app-tabbar__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 2px;
    }

    .mobile-app-tabbar__item.is-active {
        color: var(--brand-text);
    }

    .mobile-app-tabbar__item.is-active i {
        transform: scale(1.06);
    }

    .mobile-app-tabbar__item:active {
        transform: scale(0.96);
        opacity: 0.88;
    }

    .mobile-app-tabbar__badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #dc2626;
        color: #fff;
        font-size: 0.58rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    /* ── Listes : colonnes verticales natives (pas carousel forcé) ── */
    body.arcprod-tenant.has-mobile-app-shell :is(
        .videos-page-content #videoGrid,
        .resources-page-content #cards-row,
        .tutorials-page-content #cards-row,
        .guides-page-content #cards-row,
        .template-library-page-content #cards-row,
        .my-favorites-grid
    ) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        gap: 0.75rem !important;
        padding-bottom: 0.25rem !important;
    }

    body.arcprod-tenant.has-mobile-app-shell :is(
        .videos-page-content #videoGrid > *,
        .resources-page-content #cards-row > *,
        .tutorials-page-content #cards-row > *,
        .guides-page-content #cards-row > *,
        .template-library-page-content #cards-row > *,
        .my-favorites-grid > *
    ) {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: unset !important;
    }

    /* Cartes plus « app » : coins, ombre légère */
    body.arcprod-tenant.has-mobile-app-shell :is(
        .tutorial-card, .video-card, .resource-card, .guide-card,
        .template-card, .faq-item, .content-card, .metric-card, .card
    ) {
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    }

    /* En-têtes de module plus compacts */
    body.arcprod-tenant.has-mobile-app-shell :is(
        .tutorial-title, .video-title, .resource-title, .glossary-title,
        .guide-title, .stats-title, .template-library-title, .survey-wizard-title
    ) {
        font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important;
        letter-spacing: -0.02em;
    }

    body.arcprod-tenant.has-mobile-app-shell .module-header-tools {
        gap: 0.45rem !important;
    }

    /* Filtres chips : pills plus hautes, scroll tactile */
    body.arcprod-tenant.has-mobile-app-shell :is(.nav-tabs .nav-link, .category-tab, .guide-path-chip) {
        min-height: 36px !important;
        border-radius: 999px !important;
        font-weight: 550;
    }

    /* Tables édition : un peu moins « desktop » */
    body.arcprod-tenant.has-mobile-app-shell :is(table.item-list, table.data-table, table.table) {
        min-width: 0 !important;
    }

    body.arcprod-tenant.has-mobile-app-shell .table-responsive {
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, 0.06);
    }

    /* Offcanvas menu : plus app */
    body.arcprod-tenant.has-mobile-app-shell .offcanvas-sidebar {
        width: min(88vw, 320px) !important;
        border-radius: 0 16px 16px 0;
    }

    body.arcprod-tenant.has-mobile-app-shell .offcanvas-sidebar .sidebar-link {
        border-radius: 10px;
        margin: 2px 6px;
        min-height: 46px;
    }

    body.arcprod-tenant.has-mobile-app-shell .offcanvas-sidebar .sidebar-link.active {
        background: color-mix(in srgb, var(--xh-primary, #0f4c81) 12%, transparent);
        color: var(--brand-text);
        font-weight: 650;
    }

    /* Accueil : cartes modules plus tactiles */
    body.arcprod-tenant.has-mobile-app-shell .home-page-content .module-card,
    body.arcprod-tenant.has-mobile-app-shell .page-home .module-card {
        border-radius: 16px;
    }

    /* Survey wizard / template library : respirer sur petit écran */
    body.arcprod-tenant.has-mobile-app-shell .survey-wizard-container,
    body.arcprod-tenant.has-mobile-app-shell .template-library-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Très petits écrans */
@media (max-width: 379.98px) {
    body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__label {
        font-size: 0.55rem;
    }

    body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__item i {
        font-size: 1.18rem;
    }
}

/* Dark mode */
@media (max-width: 991.98px) {
    html[data-theme="dark"] body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar,
    html[data-theme="dark"] .mobile-app-tabbar {
        background: rgba(17, 24, 39, 0.94);
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
    }

    html[data-theme="dark"] body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__item {
        color: #94a3b8;
    }

    html[data-theme="dark"] body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__item.is-active {
        color: var(--brand-text);
    }

    html[data-theme="dark"] body.arcprod-tenant.has-mobile-app-shell #navbar.navbar-modern {
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.arcprod-tenant.has-mobile-app-shell :is(
        .tutorial-card, .video-card, .resource-card, .guide-card,
        .template-card, .faq-item, .content-card, .metric-card, .card
    ) {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.18);
    }
}

/* Standalone PWA : encore un cran plus « app » */
@media (max-width: 991.98px) and (display-mode: standalone) {
    body.arcprod-tenant.has-mobile-app-shell #navbar.navbar-modern {
        box-shadow: none;
        border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
    }

    body.arcprod-tenant.has-mobile-app-shell .main-content-area {
        min-height: calc(100dvh - var(--mobile-navbar-height) - env(safe-area-inset-top, 0px) - var(--mobile-tabbar-total));
    }
}

/* Desktop : tab bar jamais visible (double sécurité) */
@media (min-width: 992px) {
    .mobile-app-tabbar {
        display: none !important;
    }
}

/* Reduced motion */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__item,
    body.arcprod-tenant.has-mobile-app-shell .mobile-app-tabbar__item i {
        transition: none !important;
    }
}