/* ══════════════════════════════════════════════════════════════════
    RESPONSIVE — couche mobile globale (consultation au téléphone)
   Chargée depuis sitebar.php sur toutes les pages de l'application.
   Le menu latéral devient coulissant, les tableaux défilent
   horizontalement, les grilles et formulaires se replient.
   ══════════════════════════════════════════════════════════════════ */

/* Le sidebar devient un tiroir hors écran sous 1024px */
@media (max-width: 1023px) {
    #sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 264px; max-width: 82vw;
        transform: translateX(-105%);
        transition: transform .25s ease;
        z-index: 1050;
        box-shadow: 0 0 40px rgba(0,0,0,.25);
    }
    #sidebar.open { transform: translateX(0); }

    /* Voile sombre derrière le tiroir */
    #sbOverlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1040;
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    body.sb-open #sbOverlay { opacity: 1; pointer-events: auto; }

    /* Bouton hamburger flottant pour les pages sans bouton dans l'en-tête */
    #sbFloatingBtn {
        position: fixed; top: 12px; left: 12px;
        width: 42px; height: 42px;
        border-radius: 12px; border: 1px solid #f0e8c0;
        background: #fff; color: #92400e;
        font-size: 17px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 3px 14px rgba(0,0,0,.14);
        z-index: 1030; cursor: pointer;
    }

    /* La mise en page passe en colonne : le contenu prend tout l'écran */
    .layout { display: block !important; height: auto !important; overflow: visible !important; }
    .main { width: 100% !important; height: auto !important; overflow: visible !important; }

    /* En-têtes de page : tout se replie proprement */
    .top-header { padding: 10px 14px !important; flex-wrap: wrap !important; gap: 8px !important; overflow: hidden; }
    .top-header > * { max-width: 100%; min-width: 0; }
    .top-header h1 { font-size: 1.02rem !important; line-height: 1.25 !important; }
    .top-header .flex.items-center.gap-3 { min-width: 0; }
    .top-header .text-xs.text-gray-500 { font-size: .68rem !important; }

    /* Boutons compacts */
    .btn { padding: 8px 13px !important; font-size: .8rem !important; }
    .btn-sm { padding: 6px 10px !important; font-size: .74rem !important; }

    /* Onglets défilables horizontalement (Historique, Journal PDF…) */
    .nav-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { white-space: nowrap; flex-shrink: 0; }

    /* Les champs remplies à 16px : iOS ne zoome plus au focus */
    input, select, textarea { font-size: 16px !important; }
    .field-group input, .field-group select, .field-group textarea { padding: 9px 11px !important; }
}

/* ═══════════════ TÉLÉPHONE (≤640px) ═══════════════ */
@media (max-width: 640px) {
    body { font-size: 14px; overflow-x: hidden; }

    /* Grilles de cartes : 2 colonnes max, marges réduites */
    .grid { gap: 8px !important; }
    .p-4, .p-6 { padding: 12px !important; }
    .sm\:p-6 { padding: 12px !important; }
    .mb-5, .mb-6 { margin-bottom: 12px !important; }

    /* Cartes de statistiques sur 2 colonnes */
    #statsRow, .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-card { padding: 10px 12px !important; gap: 8px !important; }
    .stat-card .text-lg, .stat-card .text-xl { font-size: .95rem !important; }

    /* Grands chiffres : réduits pour tenir à l'écran */
    .solde-live .text-4xl, .solde-live .font-playfair { font-size: 1.55rem !important; }
    .montant-input { font-size: 1.5rem !important; }

    /* Cartes d'action (Entrée / Sortie) empilées */
    .op-card { margin-bottom: 10px; }
    .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

    /* Tableaux de données : défilement horizontal fluide */
    .his-table, .caisses-table, .boutiques-table, .inv-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        min-width: 100%;
    }
    .his-table thead, .his-table tbody,
    .caisses-table thead, .caisses-table tbody,
    .boutiques-table thead, .boutiques-table tbody,
    .inv-table thead, .inv-table tbody { display: table-row-group; }
    .his-table tr, .caisses-table tr, .boutiques-table tr, .inv-table tr { display: table-row; }
    .his-table th, .his-table td,
    .caisses-table th, .caisses-table td,
    .boutiques-table th, .boutiques-table td,
    .inv-table th, .inv-table td { display: table-cell; font-size: .8rem !important; padding: 8px 10px !important; }
    .his-table td .btn, .caisses-table td .btn, .inv-table td .btn { padding: 4px 7px !important; font-size: .7rem !important; }

    /* Carte Drawflow (gestion des caisses / boutiques) */
    #df-wrapper { height: 400px !important; }
    .drawflow .drawflow-node { min-width: 200px !important; max-width: 224px !important; }
    .df-toolbar { top: 8px !important; right: 8px !important; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
    .df-btn-open { padding: 6px 8px !important; font-size: .72rem !important; }

    /* Modales plein écran utile */
    .overlay { align-items: flex-end; }
    .modal-box { width: 100% !important; max-width: 100% !important; max-height: 94vh !important; border-radius: 18px 18px 0 0 !important; padding: 20px 16px !important; }

    /* Formulaires à une colonne */
    .grid.sm\:grid-cols-2, .grid.sm\:grid-cols-3, .grid.sm\:grid-cols-4 { grid-template-columns: 1fr !important; }

    /* Zones de recherche / filtres */
    .search-zone { padding: 10px !important; }
    .search-zone input, .search-zone select { min-width: 0 !important; width: 100% !important; }

    /* Blocs de totaux empilés */
    .total-box { padding: 8px 10px !important; }
    .total-value { font-size: .9rem !important; }
}

/* Très petits écrans (≤380px) : une seule colonne de stats */
@media (max-width: 380px) {
    #statsRow, .stats-row { grid-template-columns: 1fr !important; }
}

/* ═══════════════ COMPTOIR (point de vente) ═══════════════
   Sur téléphone : les produits en haut, le panier en dessous,
   toute la page défile naturellement. */
@media (max-width: 900px) {
    .flex.h-screen {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }
    .flex.h-screen > .flex-1 { max-height: none !important; height: auto !important; }
    #productsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #cartSection, #paymentSection { position: static !important; }
}

/* Impression inchangée */
@media print {
    #sidebar, #sbOverlay, #sbFloatingBtn { display: none !important; }
    .layout { display: block !important; }
}