/*
 * Big Resto — Responsive & Touch CSS
 * Optimisations tablette (768–1280px) et tactile pour la Caisse POS et le Plan de salle.
 */

/* ─── Variables responsive ──────────────────────────────────────────────────── */
:root {
    --br-touch-target: 44px;   /* taille minimale cible tactile */
}

/* ─── Tablette (≤ 1280px) ───────────────────────────────────────────────────── */
@media screen and (max-width: 1280px) {

    /* ── POS : réduire la grille ─────────────────────────────────────────── */
    .br-pos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* ── POS : panier plus étroit ────────────────────────────────────────── */
    .br-pos-cart {
        width: 280px;
    }

    /* ── Menu : 3 colonnes ───────────────────────────────────────────────── */
    .br-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ── Dashboard : empiler les rangées ─────────────────────────────────── */
    .br-dash-row,
    .br-dash-bottom {
        grid-template-columns: 1fr;
    }

    .br-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Tablette portrait (≤ 1024px) ─────────────────────────────────────────── */
@media screen and (max-width: 1024px) {

    /* ── POS : adapter la disposition ───────────────────────────────────── */
    .br-pos-wrap {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 32px);
    }

    .br-pos-sidebar {
        width: 100%;
        height: 52px;
        flex-direction: row;
        padding: 0 12px;
        justify-content: space-between;
    }
    .br-pos-sidebar-logo { margin-bottom: 0; }
    .br-pos-sidebar-nav  { flex-direction: row; flex: 1; justify-content: center; gap: 8px; }
    .br-pos-sidebar-user { margin-top: 0; }

    .br-pos-main {
        height: calc(60vh - 52px);
        border-right: none;
        border-bottom: 1px solid var(--br-border);
    }

    .br-pos-cart {
        width: 100%;
        height: 40vh;
        flex-shrink: 0;
    }

    .br-pos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ── Tables : drawer en overlay ──────────────────────────────────────── */
    .br-tables-wrap {
        position: relative;
    }

    .br-table-drawer {
        position: fixed;
        top: 32px;
        right: 0;
        bottom: 0;
        z-index: 9999;
        width: 320px;
        box-shadow: var(--br-shadow-lg);
    }

    /* ── Menu : 2 colonnes ───────────────────────────────────────────────── */
    .br-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Mobile / Petite tablette (≤ 768px) ────────────────────────────────────── */
@media screen and (max-width: 768px) {

    .br-pos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .br-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .br-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .br-kpi-value { font-size: 22px; }

    .br-table-drawer {
        width: 100%;
        top: 32px;
    }

    .br-drawer {
        width: 100%;
        max-width: 100%;
    }

    .br-menu-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .br-tables-stats {
        gap: 16px;
        flex-wrap: wrap;
    }
}

/* ─── Améliorations tactiles globales ───────────────────────────────────────── */

/* Agrandir les zones cliquables pour les doigts */
.br-plat-add-btn,
.br-cart-qty-btn,
.br-cart-ligne-del,
.br-menu-action-btn,
.br-toggle,
.br-paiement-mode,
.br-zone-tab,
.br-pos-cat-pill {
    min-height: var(--br-touch-target);
    min-width: var(--br-touch-target);
}

.br-pos-cat-pill {
    min-height: 36px;
    min-width: unset;
    padding: 9px 18px;
}

.br-zone-tab {
    min-width: unset;
    padding: 14px 20px;
}

/* Supprimer le hover sur tactile (évite les états bloqués) */
@media (hover: none) {
    .br-plat-card:hover        { transform: none; box-shadow: none; }
    .br-menu-card:hover        { box-shadow: none; }
    .br-btn-primary:hover      { transform: none; box-shadow: none; }
    .br-btn-confirm:hover      { transform: none; box-shadow: none; }
    .br-table-item:hover       { transform: none; }
}

/* Feedback tactile (active state) */
.br-plat-card:active,
.br-menu-card:active,
.br-table-item:active {
    transform: scale(.97);
    transition: transform .1s ease;
}

.br-plat-add-btn:active,
.br-cart-qty-btn:active,
.br-btn:active,
.br-btn-confirm:active,
.br-drawer-btn:active {
    transform: scale(.95);
    transition: transform .08s ease;
}

/* Scroll inertiel sur iOS */
.br-pos-catalogue,
.br-cart-lignes,
.br-drawer-lignes,
.br-menu-content,
.br-floor-plan {
    -webkit-overflow-scrolling: touch;
}

/* Empêcher le zoom accidentel sur double-tap */
.br-pos-wrap,
.br-menu-grid,
.br-tables-grid {
    touch-action: manipulation;
}

/* Sélection de texte désactivée sur les éléments interactifs */
.br-plat-card,
.br-menu-card,
.br-table-item,
.br-paiement-mode,
.br-pos-cat-pill,
.br-zone-tab {
    -webkit-user-select: none;
    user-select: none;
}

/* ─── Impression (ticket thermique) ────────────────────────────────────────── */
@media print {
    /* Masquer tout sauf le ticket */
    body > *:not(#br-print-frame) { display: none !important; }

    #br-print-frame {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

    /* Dans le contexte du ticket directement */
    .br-pos-wrap,
    .br-menu-wrap,
    #wpadminbar,
    #adminmenuback,
    #adminmenuwrap {
        display: none !important;
    }
}

/* ─── Scrollbar fine sur Webkit ─────────────────────────────────────────────── */
.br-pos-catalogue::-webkit-scrollbar,
.br-cart-lignes::-webkit-scrollbar,
.br-drawer-lignes::-webkit-scrollbar,
.br-menu-content::-webkit-scrollbar,
.br-floor-plan::-webkit-scrollbar,
.br-dashboard-wrap::-webkit-scrollbar {
    width: 4px;
}
.br-pos-catalogue::-webkit-scrollbar-track,
.br-cart-lignes::-webkit-scrollbar-track,
.br-drawer-lignes::-webkit-scrollbar-track,
.br-menu-content::-webkit-scrollbar-track,
.br-floor-plan::-webkit-scrollbar-track,
.br-dashboard-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.br-pos-catalogue::-webkit-scrollbar-thumb,
.br-cart-lignes::-webkit-scrollbar-thumb,
.br-drawer-lignes::-webkit-scrollbar-thumb,
.br-menu-content::-webkit-scrollbar-thumb,
.br-floor-plan::-webkit-scrollbar-thumb,
.br-dashboard-wrap::-webkit-scrollbar-thumb {
    background: var(--br-border);
    border-radius: 2px;
}

/* ─── Accessibilité ─────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--br-red);
    outline-offset: 2px;
    border-radius: 4px;
}

.br-toggle input:focus-visible + .br-toggle-slider {
    box-shadow: 0 0 0 3px rgba(229,53,53,.3);
}

/* ─── Animations réduites (accessibilité) ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .br-live-dot { animation: none; }
    .br-spinner  { animation: none; border-top-color: var(--br-red); }
}