/* ═══════════════════════════════════════════════════════════════════
   EPICURE — MOBILE RESPONSIVE CSS
   Fichier dédié à la responsivité mobile & tablette.
   Ne modifie AUCUN style desktop. N'intervient qu'à travers des
   @media queries (max-width).
   
   Breakpoints :
     • ≤ 1023px  → Tablettes et mobiles (sidebar cachée par défaut)
     • ≤ 767px   → Mobiles paysage / tablettes portrait
     • ≤ 640px   → Smartphones portrait
     • ≤ 400px   → Très petits écrans (iPhone SE, etc.)
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   SECTION 1 : HEADER & NAVIGATION (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* ── Header ── */
    #epicure-main-content > header {
        height: 60px;
        padding-left: 12px;
        padding-right: 12px;
    }

    #epicure-main-content > header h2 {
        font-size: 1rem;
    }

    #epicure-main-content > header #current-date {
        font-size: 0.65rem;
    }

    /* Masquer le séparateur "|" et nom restaurant dans le header */
    #epicure-main-content > header #restaurant-name {
        display: none !important;
    }

    /* ── Header Right : compacter les icônes ── */
    #epicure-main-content > header > div:last-child {
        gap: 4px;
    }

    /* Masquer le bouton plein écran sur mobile (inutile) */
    #epicure-main-content > header button[title*="Plein"],
    #epicure-main-content > header button[data-i18n-title="header.fullscreen"] {
        display: none;
    }

    /* Réduire la taille des pilules langue/devise */
    #lang-pill-btn,
    #currency-pill-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* Masquer le chevron dans les pilules */
    #lang-pill-btn .fa-chevron-down,
    #currency-pill-btn .fa-chevron-down {
        display: none;
    }

    /* Boutons ronds du header */
    #epicure-main-content > header button.w-9 {
        width: 32px;
        height: 32px;
    }

    /* ── Sidebar mobile ── */
    #mobile-sidebar {
        width: 260px;
    }

    #mobile-sidebar .px-8 {
        padding-left: 16px;
        padding-right: 16px;
    }

    #mobile-sidebar h1 {
        font-size: 1.25rem;
    }

    /* Liens nav plus compacts */
    #mobile-sidebar nav a {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    #mobile-sidebar nav ul {
        gap: 2px;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 2 : LAYOUT GLOBAL & VUES (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* Réduire le padding de toutes les vues principales */
    #view-dashboard,
    #view-economat,
    #view-labo,
    #view-radar,
    #view-fournisseurs,
    #view-ventes,
    #view-settings,
    #view-guide {
        padding: 16px !important;
        padding-bottom: 48px !important;
    }

    /* Réduire space-y-8 en space-y-5 */
    #view-dashboard > *:not(:first-child),
    #view-economat > *:not(:first-child),
    #view-labo > *:not(:first-child),
    #view-radar > *:not(:first-child),
    #view-fournisseurs > *:not(:first-child),
    #view-ventes > *:not(:first-child),
    #view-settings > *:not(:first-child),
    #view-guide > *:not(:first-child) {
        margin-top: 20px;
    }

    /* Cards : padding réduit */
    #view-dashboard .luxury-shadow,
    #view-economat .luxury-shadow,
    #view-labo .luxury-shadow,
    #view-radar .luxury-shadow,
    #view-fournisseurs .luxury-shadow,
    #view-ventes .luxury-shadow,
    #view-settings .luxury-shadow {
        padding: 16px;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 3 : DASHBOARD (≤ 767px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* ── KPI Cards : 1 colonne ── */
    #view-dashboard .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ── Revenue KPIs : 2 colonnes au lieu de 4 ── */
    #revenue-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* ── Graphiques + Top Pertes : 1 colonne ── */
    #view-dashboard .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Forcer lg:col-span-2 à occuper toute la largeur */
    #view-dashboard .lg\:col-span-2 {
        grid-column: span 1;
    }

    /* ── Flux matière mini-KPIs : en ligne, texte réduit ── */
    #flux-kpis {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* ── Textes KPI : réduire les tailles ── */
    #dashboard-marge-value,
    #dashboard-stock-value,
    #card-alerte-value {
        font-size: 1.75rem !important;
    }

    #rev-ca, #rev-nb, #rev-avg, #rev-articles {
        font-size: 1.25rem !important;
    }

    /* ── Conteneurs graphiques Chart.js ── */
    #view-dashboard canvas {
        max-height: 220px;
        width: 100% !important;
    }

    /* ── Flux date range inputs ── */
    #flux-date-start,
    #flux-date-end {
        width: 100px;
        font-size: 0.7rem;
    }

    /* ── Flux matière rows : grille adaptée ── */
    .flux-row {
        grid-template-columns: 90px 1fr 60px !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 4 : ÉCONOMAT (≤ 767px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* ── Formulaire d'ajout : 1 colonne ── */
    #eco-add-form {
        grid-template-columns: 1fr !important;
    }

    /* ── Barre de recherche pleine largeur ── */
    #eco-search-input {
        width: 100% !important;
    }

    /* ── Toolbar : stack vertical ── */
    #view-economat > div:first-child {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Liste d'ingrédients : adapter la mise en page ── */
    #eco-list-container .group {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
        padding: 12px;
    }

    /* Bloc des valeurs (provisions, prix, seuil) : empiler */
    #eco-list-container .group > div:last-child {
        flex-wrap: wrap;
        gap: 8px !important;
        width: 100%;
    }

    /* Supprimer les séparateurs verticaux border-l sur mobile */
    #eco-list-container .group .border-l {
        border-left: none;
        padding-left: 0;
    }

    /* ── Boutons d'action : 36px pour toucher ── */
    #eco-list-container .group button {
        min-width: 36px;
        min-height: 36px;
    }

    /* ── Historique réappro : 1 colonne ── */
    #reappro-history-container {
        grid-template-columns: 1fr !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 5 : LABO / RECETTES (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* ── Layout 2 colonnes → 1 colonne ── */
    #view-labo .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* ── Coût de revient : réduire text-6xl ── */
    #total-cost-display {
        font-size: 2.5rem !important;
    }

    /* ── Recherche pleine largeur ── */
    #labo-search-input {
        width: 100% !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 6 : RADAR DES ÉCARTS (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* ── Tableau Radar : conteneur scrollable ── */
    #view-radar .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Indicateur de scroll horizontal */
    #view-radar .overflow-x-auto::after {
        content: '← Glissez pour voir plus →';
        display: block;
        text-align: center;
        font-size: 0.6rem;
        color: var(--text-muted);
        padding: 6px 0;
        opacity: 0.7;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 7 : SAISIE FLASH (≤ 767px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* ── Flash : cartes produit en colonne ── */
    #flash-items-container > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* ── Keypad : centrer et permettre le wrap ── */
    #flash-items-container .flex.items-center.gap-1\.5 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    /* Boutons keypad : taille réduite mais touchable */
    #flash-items-container button.w-10.h-11 {
        width: 38px;
        height: 40px;
        font-size: 0.85rem;
    }

    /* Input numérique keypad : réduire la largeur */
    #flash-items-container .w-\[135px\] {
        width: 110px !important;
    }

    /* ── Filtres famille : scroll horizontal ── */
    #flash-filters {
        -webkit-overflow-scrolling: touch;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 8 : FOURNISSEURS (≤ 767px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* ── Formulaire d'ajout : 1 colonne ── */
    #fourn-add-form {
        grid-template-columns: 1fr !important;
    }

    /* ── Grille fournisseurs : 1 colonne ── */
    #fourn-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 9 : VENTES / POS (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* ── Layout 5 colonnes → 1 colonne ── */
    #view-ventes .grid.grid-cols-1.lg\:grid-cols-5 {
        grid-template-columns: 1fr;
    }

    /* Forcer col-span à 1 */
    #view-ventes .lg\:col-span-3,
    #view-ventes .lg\:col-span-2 {
        grid-column: span 1;
    }

    /* ── Grille recettes : 2 colonnes ── */
    #ventes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* ── Catégories : scroll horizontal ── */
    #ventes-category-filters {
        -webkit-overflow-scrolling: touch;
    }

    /* ── Panier : hauteur réduite ── */
    #view-ventes .max-h-\[320px\] {
        max-height: 200px;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 10 : PARAMÈTRES (≤ 767px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* ── Barre d'onglets : scroll horizontal ── */
    #view-settings .flex.gap-2.border-b,
    #view-settings .flex.gap-4.border-b {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        gap: 4px;
    }

    #view-settings .flex.gap-2.border-b::-webkit-scrollbar,
    #view-settings .flex.gap-4.border-b::-webkit-scrollbar {
        display: none;
    }

    /* Onglets : padding réduit */
    #view-settings .flex.gap-2.border-b button,
    #view-settings .flex.gap-4.border-b button {
        padding: 8px 10px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* ── Grilles internes : 1 colonne ── */
    #view-settings .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    #view-settings .grid.grid-cols-1.sm\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* ── Matrice permissions : 1 colonne ── */
    #view-settings .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* ── Titres paramètres réduits ── */
    #view-settings h2 {
        font-size: 1.25rem;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 11 : GUIDE (≤ 1023px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* ── Layout Flex 2 colonnes → 1 colonne ── */
    #view-guide > .flex.flex-col.lg\:flex-row {
        flex-direction: column;
    }

    /* ── Menu latéral : pleine largeur, scroll horizontal ── */
    #view-guide .lg\:w-64 {
        width: 100%;
    }

    #view-guide .lg\:w-64 > .space-y-1 {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding-bottom: 8px;
    }

    #view-guide .lg\:w-64 > .space-y-1::-webkit-scrollbar {
        display: none;
    }

    /* Menu boutons : inline pills */
    #view-guide .guide-menu-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 12 : LOGIN GATE & AUTH SCREENS (≤ 640px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Login Gate : plein écran, padding réduit ── */
    #epicure-login-gate {
        padding: 12px !important;
    }

    /* ── Sélecteur de langue : adapter ── */
    #language-selector-modal .rounded-3xl,
    #language-selector-modal .rounded-2xl {
        margin: 8px;
        max-width: 100%;
    }

    /* ── Login Dual Choice : stack vertical ── */
    #login-dual-choice {
        flex-direction: column !important;
    }

    #login-dual-choice > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Login cards : pleine largeur ── */
    .login-card,
    [class*="login-card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ── Salons mémorisés : 1 colonne ── */
    #login-dual-saved {
        flex-direction: column !important;
    }

    #login-dual-saved > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Formulaires de création : 1 colonne ── */
    #login-screen-create-step2 .grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Formulaires de connexion : pleine largeur ── */
    #login-screen-join-step2 input,
    #login-screen-join-step2 select,
    #login-screen-join-login input {
        width: 100% !important;
    }

    /* ── Boutons auth : pleine largeur et tactiles ── */
    #epicure-login-gate button {
        min-height: 44px;
    }

    /* ── Textes auth : réduire ── */
    #epicure-login-gate h2 {
        font-size: 1.25rem;
    }

    #epicure-login-gate h3 {
        font-size: 1rem;
    }

    #epicure-login-gate p {
        font-size: 0.8rem;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 13 : MODALS & OVERLAYS (≤ 640px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Modals génériques : quasi plein écran ── */
    .fixed.inset-0 > .rounded-2xl,
    .fixed.inset-0 > .rounded-3xl,
    .fixed.inset-0 > div > .rounded-2xl,
    .fixed.inset-0 > div > .rounded-3xl {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto;
        margin: auto;
    }

    /* ── Modal onboarding ── */
    .onboarding-welcome-modal {
        width: 92vw !important;
        max-width: 92vw !important;
        padding: 20px !important;
    }

    /* ── Panel notifications ── */
    #notification-panel {
        width: 100vw !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    /* ── Modal de mise à jour ── */
    #update-modal > div {
        width: 92vw !important;
        max-width: 92vw !important;
    }

    /* ── Confirmation modale ── */
    .epicure-confirm-overlay .epicure-confirm-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* ── Exchange rate modal ── */
    #exchange-rate-modal > div {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 14 : TYPOGRAPHIE GLOBALE — SMARTPHONES (≤ 640px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Réduire les tailles de texte excessives ── */
    .text-4xl {
        font-size: 1.5rem !important;
    }

    .text-3xl {
        font-size: 1.25rem !important;
    }

    .text-2xl {
        font-size: 1.1rem !important;
    }

    /* ── Titres de vues ── */
    #view-dashboard h2,
    #view-economat h2,
    #view-labo h2,
    #view-radar h2,
    #view-fournisseurs h2,
    #view-ventes h2 {
        font-size: 1.15rem !important;
    }

    /* ── Padding général : tout réduire ── */
    .p-6 {
        padding: 12px !important;
    }

    .p-8 {
        padding: 16px !important;
    }

    .px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── Gap réduit dans les grilles ── */
    .gap-6 {
        gap: 12px !important;
    }

    .gap-8 {
        gap: 16px !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 15 : TABLEAUX — SCROLL HORIZONTAL (≤ 640px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Tous les tableaux : forcer scroll horizontal ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table thead,
    table tbody,
    table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    table {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    /* Wrapper pour tableaux */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 16 : TOUCH TARGETS & ACCESSIBILITÉ (≤ 640px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Boutons minimums 44×44px pour accessibilité tactile ── */
    button,
    a[role="button"],
    [onclick] {
        min-height: 38px;
    }

    /* ── Inputs et selects : hauteur minimale ── */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        min-height: 40px;
        font-size: 16px !important; /* Empêche le zoom iOS */
    }

    /* ── Smooth scrolling global ── */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 17 : TRÈS PETITS ÉCRANS (≤ 400px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 400px) {

    /* ── Header ultra-compact ── */
    #epicure-main-content > header {
        height: 50px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #epicure-main-content > header h2 {
        font-size: 0.85rem;
    }

    /* Masquer la devise et la langue sur très petits écrans */
    #currency-selector-wrapper {
        display: none;
    }

    /* ── Sidebar plein écran ── */
    #mobile-sidebar {
        width: 100vw;
    }

    /* ── Vues : padding minimal ── */
    #view-dashboard,
    #view-economat,
    #view-labo,
    #view-radar,
    #view-flash,
    #view-fournisseurs,
    #view-ventes,
    #view-settings,
    #view-guide {
        padding: 10px !important;
    }

    /* ── KPI valeurs encore plus réduites ── */
    #dashboard-marge-value,
    #dashboard-stock-value,
    #card-alerte-value {
        font-size: 1.4rem !important;
    }

    /* ── Ventes grille : 1 colonne au lieu de 2 ── */
    #ventes-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Revenue KPIs : 1 colonne ── */
    #revenue-kpis {
        grid-template-columns: 1fr !important;
    }

    /* ── Flash keypad : réduction maximale ── */
    #flash-items-container button.w-10.h-11 {
        width: 34px;
        height: 36px;
        font-size: 0.75rem;
    }

    #flash-items-container .w-\[135px\] {
        width: 90px !important;
    }

    /* ── Login gate : zéro marge ── */
    #epicure-login-gate {
        padding: 6px !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   SECTION 18 : ANIMATIONS & PERFORMANCE
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* ── Réduire les animations lourdes ── */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ── Optimiser le scroll ── */
    #epicure-main-content {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}