/*
 * responsive.css : Shopflow sur téléphone et tablette (07/10/2026).
 *
 * Chargée en DERNIER, après tailwind.build.css. Pourquoi cette feuille existe : sur téléphone, la barre
 * latérale était « cachée » par un translateX(-100 %) qui la rendait invisible mais lui laissait ses 320 px
 * dans la mise en page flex. Sur un iPhone de 390 px, tout le contenu tenait dans 70 px (capture de Kévin du
 * 07/10/2026). Mesures et captures : .claude/scripts/audit-mobile.mjs.
 *
 * Toutes largeurs : rangées repliables, tableaux qui défilent dans leur cadre, zones de contenu déclarées
 * conteneurs de requête (les grilles s'adaptent à la place réellement disponible, pas à l'écran).
 * Paliers (règle agence : ordre décroissant, un seul bloc par palier) :
 *   1279 px et moins : administration en liste déroulante (trois colonnes ne tiennent pas à 1024-1279) ;
 *   1023 px et moins : la barre latérale devient un tiroir, ouvert par le bouton menu de l'en-tête ;
 *    767 px et moins : téléphone (marges, navigation compacte) ;
 *    479 px et moins : petit téléphone (titres, filtres pleine largeur).
 * Les grilles « md: » et « lg: » de Tailwind ne valent qu'à partir de 768 et 1024 px d'écran : leur
 * recadrage par conteneur est donc placé sous ces deux seuils d'écran, en fin de feuille.
 */

#fermer-tiroir,
#admin-section-select-mobile {
    display: none;
}

/* ================================== Toutes largeurs ============================================== */

/* Zones de contenu déclarées conteneurs de requête. Au bureau, entre la barre latérale et le menu
   d'administration, le contenu n'a que 450 à 700 px sur un écran de 1024 à 1366 px : les grilles prévues
   pour un grand écran s'y écrasaient. Un conteneur de requête devient le cadre des éléments en position
   fixe qu'il contient : la seule modale définie dans un onglet (#file-preview-modal) est remontée dans
   <body> par responsive.js. */
#main-app main > .overflow-y-auto,
#tab-administration > .flex.h-full > .flex-1 {
    container: zone / inline-size;
}

/* Rangées d'éléments côte à côte : elles passent à la ligne au lieu de sortir de leur cadre. L'espacement
   « space-x » de Tailwind (marge à gauche de chaque élément sauf le premier) devient un écart de même
   valeur, sinon chaque ligne repliée commencerait décalée. Jamais dans une cellule de tableau : une rangée
   repliable y réduit la largeur minimale de la cellule et le tableau écrase alors ses colonnes. */
.tab-content .flex[class*="space-x-"]:not(td *),
.tab-content .flex.gap-1:not(td *),
.tab-content .flex.gap-2:not(td *),
.tab-content .flex.gap-3:not(td *),
.tab-content .flex.gap-4:not(td *),
.tab-content .flex.justify-between:not(td *),
#adminActionButtonContainer {
    flex-wrap: wrap;
    row-gap: 8px;
}

.tab-content .flex.justify-between:not(td *) {
    column-gap: 8px;
}

.tab-content .flex[class*="space-x-"]:not(td *) > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-right: 0;
}

.tab-content .flex.space-x-1:not(td *) { column-gap: 4px; }
.tab-content .flex.space-x-2:not(td *) { column-gap: 8px; }
.tab-content .flex.space-x-3:not(td *) { column-gap: 12px; }
.tab-content .flex.space-x-4:not(td *) { column-gap: 16px; }
.tab-content .flex.space-x-6:not(td *) { column-gap: 24px; }
.tab-content .flex.space-x-8:not(td *) { column-gap: 32px; }

/* Tableau plus large que son cadre : il défile dans son cadre au lieu d'être coupé */
.tab-content div:has(> table) {
    overflow-x: auto;
}

/* Tableaux d'administration : un nom de société ne descend pas sous 8rem de colonne */
#tab-administration td {
    min-width: 8rem;
}

/* Statistiques par utilisateur et par société : le nom de société y est la donnée lue en premier, et ses
   cellules ont 24 px de marge de chaque côté. « SARL STANDARD EXCHANGE INDUSTRY » tenait sur cinq lignes
   jusqu'à 1536 px d'écran. Le tableau défile dans son cadre s'il ne tient plus. */
#admin-section-stats-users td,
#admin-section-stats-tenants td {
    min-width: 11rem;
}

/* Colonnes qui ne portent qu'une case à cocher, une étoile ou une icône : pas de largeur minimale */
.tab-content td:has(> input[type="checkbox"]:only-child),
.tab-content th:has(> input[type="checkbox"]:only-child),
.tab-content td:has(> button:only-child),
.tab-content th:has(> svg:only-child),
.tab-content th:has(> i:only-child) {
    min-width: 0;
}

@media (max-width: 1279px) {
    /* --- Administration : liste déroulante à la place de la colonne de navigation ------------------ */
    #tab-administration > .flex.h-full {
        flex-direction: column;
    }

    #tab-administration > .flex.h-full > .w-64 {
        width: 100% !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.2));
    }

    #tab-administration > .flex.h-full > .w-64 nav {
        display: none;
    }

    #tab-administration > .flex.h-full > .w-64 > .p-4 > h3 {
        margin-bottom: 8px;
    }

    #admin-section-select-mobile {
        display: block !important;
        max-width: 32rem;
    }

    #tab-administration > .flex.h-full > .flex-1 {
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    /* --- Barre latérale en tiroir, sortie du flux ------------------------------------------------- */
    #sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        /* le mode réduit du bureau pose une largeur en style inline : sans effet dans le tiroir */
        width: min(320px, 86vw) !important;
        min-width: 0 !important;
        transform: translateX(-100%);
        visibility: hidden;
        /* !important : le mode réduit du bureau pose une transition en style inline */
        transition: transform 0.25s ease, visibility 0s linear 0.25s !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #sidebar.sidebar-mobile-visible {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.25s ease !important;
        box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
    }

    /* Le bouton « réduire » du bureau n'a pas de sens dans le tiroir : remplacé par « fermer » */
    #sidebar #sidebar-toggle-btn {
        display: none !important;
    }

    #fermer-tiroir {
        display: inline-flex !important;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: transparent;
    }

    #sidebar-overlay {
        z-index: 55;
        background: rgba(0, 0, 0, 0.5);
    }

    body.tiroir-ouvert {
        overflow: hidden;
    }

    /* --- En-tête mobile (bouton menu, logo) --------------------------------------------------------- */
    #entete-mobile {
        display: flex !important;
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top));
    }

    #entete-mobile .bouton-menu {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Champs : 16 px minimum, sinon iOS (iPhone comme iPad) zoome à chaque saisie -------------- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .tab-content select,
    .tab-content input,
    .tab-content textarea {
        max-width: 100%;
    }

    /* --- Tableaux : défilement horizontal dans leur cadre, jamais de la page ---------------------- */
    .tab-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Écarts larges ramenés à 16 px sur tablette et téléphone */
    .tab-content .flex.space-x-6:not(td *),
    .tab-content .flex.space-x-8:not(td *) {
        column-gap: 16px;
    }

    #tab-administration td.px-6,
    #tab-administration th.px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- Cibles tactiles : 40 px pour les actions des tableaux, 44 px pour les listes ------------- */
    .tab-content td button,
    .tab-content td a[href] {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tab-content select {
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    /* --- Marges : 16 px de gouttière (doctrine agence) -------------------------------------------- */
    .tab-content.p-6,
    #tab-administration .p-6,
    #tab-administration .p-8 {
        padding: 16px !important;
    }

    .page-header {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    /* Marges internes imbriquées : 24 px à chaque niveau laissaient 80 px de texte à 320 px de large */
    .tab-content .p-6,
    .tab-content .p-8 {
        padding: 16px !important;
    }

    .tab-content .px-6,
    .tab-content .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .tab-content .pl-6 {
        padding-left: 12px !important;
    }

    /* Filtres de l'historique : deux par ligne, pleine largeur, au lieu de sept lignes inégales */
    #tab-history .history-filter-pill {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        min-height: 44px;
    }

    #tab-history .history-filter-pill select,
    #tab-history .history-filter-pill input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        min-height: 0;
    }

    /* Le thème retire toute marge interne à ces listes (« padding: 0 !important ») : le texte passait
       sous la flèche. Même spécificité que la règle du thème, chargée après elle. */
    :root[class] #tab-history .history-filter-pill select {
        padding-right: 22px !important;
    }

    /* Pastilles (Actif, API PrestaShop...) : jamais coupées en deux lignes */
    .tab-content .rounded-full.text-xs,
    .tab-content .rounded-full.text-\[11px\] {
        white-space: nowrap;
    }

    /* Cellules de tableau : pas d'écrasement à un mot par ligne, le tableau défile dans son cadre */
    .tab-content td,
    .tab-content th {
        min-width: 8rem;
    }

    .tab-content td:first-child,
    .tab-content th:first-child {
        min-width: 9rem;
    }

    .page-title {
        font-size: 1.25rem;
    }

    /* --- Barre d'onglets : icônes, libellé de l'onglet actif seul, défilement horizontal ---------- */
    nav.nav-bar {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    nav.nav-bar > div {
        gap: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    nav.nav-bar > div::-webkit-scrollbar {
        display: none;
    }

    nav.nav-bar .tab-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0 12px;
        justify-content: center;
        scroll-snap-align: center;
    }

    nav.nav-bar .tab-btn:not(.tab-btn-active) > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    nav.nav-bar .tab-btn [data-lucide],
    nav.nav-bar .tab-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* --- Fenêtres modales : grilles à deux colonnes, tableaux défilants dans leur cadre ----------- */
    .fixed.inset-0 .grid.grid-cols-3,
    .fixed.inset-0 .grid.grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fixed.inset-0 table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fixed.inset-0 td,
    .fixed.inset-0 th {
        min-width: 8rem;
    }

    /* --- Fenêtres modales : plein écran utile --------------------------------------------------- */
    .fixed.inset-0 > .max-w-4xl,
    .fixed.inset-0 > .max-w-3xl,
    .fixed.inset-0 > .max-w-2xl,
    .fixed.inset-0 > .max-w-5xl,
    .fixed.inset-0 > .max-w-6xl,
    .fixed.inset-0 > div > .max-w-4xl,
    .fixed.inset-0 > div > .max-w-3xl,
    .fixed.inset-0 > div > .max-w-2xl {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px !important;
    }
}

@media (max-width: 479px) {
    /* Filtres de l'historique : à deux par ligne, « Tous les statuts » devenait « Tous les… » et les
       dates perdaient leur année. Pleine largeur. */
    #tab-history .history-filter-pill {
        flex-basis: 100%;
    }

    /* La documentation est déplacée dans l'onglet Explorer au chargement : les deux conteneurs */
    #tab-documentation .grid.grid-cols-2:not(.documentation-nav),
    #tab-documentation .grid.grid-cols-3,
    #tab-explorer .grid.grid-cols-2:not(.documentation-nav),
    #tab-explorer .grid.grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 1.125rem;
    }

    .page-subtitle {
        font-size: 0.8125rem;
    }
}

/* ================== Grilles recadrées d'après la place disponible (requêtes de conteneur) ========== */
/* Imbriquées sous le seuil d'écran où la classe Tailwind s'applique : sans cela, une grille
   « grid-cols-1 md:grid-cols-4 » passerait à deux colonnes sur téléphone. */

@media (min-width: 768px) {
    @container zone (max-width: 899px) {
        .tab-content .grid.md\:grid-cols-3,
        .tab-content .grid.md\:grid-cols-4,
        .tab-content .grid.md\:grid-cols-5 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (min-width: 1024px) {
    @container zone (max-width: 899px) {
        .tab-content .grid.lg\:grid-cols-3,
        .tab-content .grid.lg\:grid-cols-4,
        .tab-content .grid.lg\:grid-cols-5,
        .tab-content .grid.lg\:grid-cols-6,
        .tab-content .grid.xl\:grid-cols-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}