/* =========================================================
   MARKETSMART
   RESPONSIVE.CSS — VERSION PROPRE
   =========================================================
   Objectifs :
   - Headbar toujours visible
   - Hamburger toujours accessible
   - Sidebar mobile off-canvas
   - Sidebar scrollable indépendamment
   - Aucun chevauchement
   - Admin / Manager / Caissier
   - Téléphone / tablette / paysage
   ========================================================= */


/* =========================================================
   1. BASE DE SÉCURITÉ
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button,
.form-control,
.form-select {
    max-width: 100%;
}

.admin-main,
.admin-content,
.admin-header,
.main-content,
.main,
.content,
.card,
.card-body,
.card-header,
.payment-layout,
.form-grid,
.grid,
.shop-grid {
    min-width: 0;
}


/* =========================================================
   2. TABLEAUX
   ========================================================= */

.table-responsive,
.table-wrap,
.admin-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.table-wrap table,
.admin-table-wrap table {
    max-width: none;
}


/* =========================================================
   3. HAMBURGER
   Desktop : invisible
   Mobile/tablette : toujours fixe dans la zone de headbar
   ========================================================= */

.mobile-menu-toggle {
    display: none;
}


/* =========================================================
   4. BACKDROP
   ========================================================= */

.mobile-menu-backdrop {
    display: none;
}


/* =========================================================
   5. MOBILE + TABLETTE
   ========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------------------
       STRUCTURE GÉNÉRALE
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       HAMBURGER

       Il est FIXE.
       Il reste donc toujours accessible même pendant
       le défilement de la page.
       ----------------------------------------------------- */

    .mobile-menu-toggle {
        position: fixed !important;

        top: 10px !important;
        left: 12px !important;

        width: 44px !important;
        height: 44px !important;

        display: flex !important;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        padding: 0 !important;
        margin: 0 !important;

        border: none !important;
        border-radius: 10px;

        background: #ffffff;

        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.16);

        cursor: pointer;

        z-index: 1500 !important;

        -webkit-tap-highlight-color: transparent;

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    .mobile-menu-toggle span {
        display: block;

        width: 21px;
        height: 2px;

        flex: 0 0 auto;

        border-radius: 999px;

        background: #c47a1a;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    /* -----------------------------------------------------
       HAMBURGER → X
       ----------------------------------------------------- */

    body.mobile-menu-active .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.mobile-menu-active .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.mobile-menu-active .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* -----------------------------------------------------
       BACKDROP
       ----------------------------------------------------- */

    .mobile-menu-backdrop {
        display: block !important;

        position: fixed !important;

        inset: 0;

        background: rgba(0, 0, 0, 0.45);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;

        z-index: 1400 !important;
    }

    .mobile-menu-backdrop.mobile-menu-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /* -----------------------------------------------------
       BLOQUER LE SCROLL DE LA PAGE QUAND LE MENU EST OUVERT
       ----------------------------------------------------- */

    body.mobile-menu-active {
        overflow: hidden !important;
        touch-action: none;
    }


    /* =====================================================
       ADMIN
       ===================================================== */

    /* -----------------------------------------------------
       SIDEBAR ADMIN
       ----------------------------------------------------- */

        .admin-sidebar,
    .super-admin-sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: min(86vw, 340px) !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100dvh !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 12px 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transform: translateX(-105%);

        transition: transform 0.3s ease;

        z-index: 1450 !important;
    }

    .admin-sidebar.mobile-menu-open,
    .super-admin-sidebar.mobile-menu-open {        
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       BRAND ADMIN
       ----------------------------------------------------- */

        .admin-sidebar .brand,
    .super-admin-sidebar .brand {
        width: 100%;

        padding: 12px 18px 16px !important;
    }


    /* -----------------------------------------------------
       NAVIGATION ADMIN
       ----------------------------------------------------- */

        .admin-sidebar .nav-link,
    .super-admin-sidebar .nav-link {
        width: calc(100% - 20px) !important;

        min-height: 46px !important;
        height: auto !important;

        margin: 4px 10px !important;

        padding: 11px 14px !important;

        white-space: normal;

        overflow-wrap: anywhere;

        line-height: 1.25;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       HEADBAR ADMIN
       -----------------------------------------------------

       IMPORTANT :
       Elle est FIXE.
       Elle ne disparaît donc jamais pendant le scroll.
       ----------------------------------------------------- */

    .admin-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;

        padding: 8px 12px 8px 68px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        flex-wrap: nowrap !important;

        overflow: visible !important;

        z-index: 1350 !important;
    }
    /* Cache le header fixe Admin quand le tiroir mobile est ouvert,
       pour ne pas recouvrir le premier lien du menu (# DashBoard). */
    body.mobile-menu-active .admin-header {
        display: none !important;
    }

    /* Même règle pour l'espace Super Admin (nouveau module). */
    body.mobile-menu-active .super-admin-header {
        display: none !important;
    }

    /* -----------------------------------------------------
       CONTENU ADMIN

       On réserve l'espace de la headbar.
       ----------------------------------------------------- */

    .admin-main {
        width: 100% !important;

        margin-left: 0 !important;

        min-width: 0 !important;
    }

    .admin-content {
        width: 100% !important;

        min-width: 0 !important;

        padding: 80px 16px 20px !important;
    }


    /* -----------------------------------------------------
       ÉLÉMENTS DE LA HEADBAR ADMIN
       ----------------------------------------------------- */

    .admin-header > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .admin-header > div:first-child {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        overflow: hidden;
    }

    .admin-header > div:last-child {
        flex: 0 1 auto !important;

        width: auto !important;

        max-width: 55% !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 8px !important;

        flex-wrap: nowrap !important;
    }


    /* -----------------------------------------------------
       RECHERCHE ADMIN
       ----------------------------------------------------- */

    .admin-header .search-box {
        min-width: 0 !important;

        width: auto !important;

        max-width: 240px !important;

        flex: 1 1 180px !important;
    }


    /* =====================================================
       MANAGER
       ===================================================== */

    /* -----------------------------------------------------
       STRUCTURE
       ----------------------------------------------------- */

    body > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       SIDEBAR MANAGER
       ----------------------------------------------------- */

    body > .d-flex .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: min(86vw, 340px) !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100dvh !important;
        max-height: none !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: hidden !important;

        transform: translateX(-105%);

        transition: transform 0.3s ease;

        z-index: 1450 !important;
    }

    body > .d-flex .sidebar.mobile-menu-open {
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       LOGO MANAGER
       ----------------------------------------------------- */

    body > .d-flex .sidebar-logo {
        flex: 0 0 auto !important;

        width: 100% !important;

        padding: 14px 18px !important;
    }


    /* -----------------------------------------------------
       MENU MANAGER
       ----------------------------------------------------- */

    body > .d-flex .sidebar-nav {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        width: 100% !important;

        padding: 8px 10px 18px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    body > .d-flex .sidebar-nav .nav-link {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 46px !important;
        height: auto !important;

        margin: 4px 0 !important;

        padding: 11px 14px !important;

        white-space: normal;

        overflow-wrap: anywhere;

        line-height: 1.25;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       MAIN MANAGER
       ----------------------------------------------------- */

    .main-content {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: 0 !important;

        min-width: 0 !important;

        padding: 80px 16px 20px !important;
    }


    /* -----------------------------------------------------
       HEADBAR MANAGER
       ----------------------------------------------------- */

    .main-content > header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;

        padding: 8px 12px 8px 68px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        flex-wrap: nowrap !important;

        overflow: visible !important;

        z-index: 1350 !important;
    }

    .main-content > header > div {
        min-width: 0 !important;

        max-width: 100% !important;
    }


    /* =====================================================
       CAISSIER
       ===================================================== */

    /* -----------------------------------------------------
       STRUCTURE
       ----------------------------------------------------- */

    .app {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       SIDEBAR CAISSIER
       ----------------------------------------------------- */

    .app .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: min(86vw, 340px) !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100dvh !important;
        max-height: none !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: hidden !important;

        transform: translateX(-105%);

        transition: transform 0.3s ease;

        z-index: 1450 !important;
    }

    .app .sidebar.mobile-menu-open {
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       LOGO CAISSIER
       ----------------------------------------------------- */

    .app .sidebar-logo {
        flex: 0 0 auto !important;

        width: 100% !important;

        padding: 14px 18px !important;
    }


    /* -----------------------------------------------------
       MENU CAISSIER
       ----------------------------------------------------- */

    .app .sidebar .nav {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        width: 100% !important;

        display: block !important;

        padding: 8px 10px 18px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    .app .sidebar .nav .nav-link {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 46px !important;
        height: auto !important;

        margin: 4px 0 !important;

        padding: 11px 14px !important;

        white-space: normal;

        overflow-wrap: anywhere;

        line-height: 1.25;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       MAIN CAISSIER
       ----------------------------------------------------- */

    .main {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: 0 !important;

        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       HEADBAR CAISSIER
       ----------------------------------------------------- */

    .topbar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        
        min-height: 64px !important;

        margin: 0 !important;

        padding: 8px 12px 8px 68px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        flex-wrap: nowrap !important;

        overflow: visible !important;

        z-index: 1350 !important;
    }


    /* -----------------------------------------------------
       CONTENU CAISSIER
       ----------------------------------------------------- */

    .content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding: 80px 16px 20px !important;
    }


    /* -----------------------------------------------------
       ÉLÉMENTS TOPBAR
       ----------------------------------------------------- */

    .page-title {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        overflow: hidden;
    }

    .top-actions {
        flex: 0 1 auto !important;

        min-width: 0 !important;

        max-width: 55% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 8px !important;

        flex-wrap: nowrap !important;
    }


    /* =====================================================
       CONTENU / GRILLES
       ===================================================== */

    .admin-content .row,
    .main-content .row {
        width: 100%;

        max-width: 100%;

        margin-left: 0;

        margin-right: 0;
    }

    .admin-content .row > *,
    .main-content .row > * {
        min-width: 0;
    }


    /* -----------------------------------------------------
       GRILLES MANAGER / CAISSIER
       ----------------------------------------------------- */

    .payment-layout,
    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* -----------------------------------------------------
       SHOP
       ----------------------------------------------------- */

    .shop-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    /* -----------------------------------------------------
       FORMULAIRES
       ----------------------------------------------------- */

    .form-group,
    .search,
    .search-row > * {
        min-width: 0;

        max-width: 100%;
    }

    .search-row,
    .card-header,
    .profile-head,
    .cart-item,
    .no-print {
        flex-wrap: wrap;
    }


    /* -----------------------------------------------------
       TABLEAUX
       ----------------------------------------------------- */

    .admin-table-wrap {
        padding: 12px;
    }

    .admin-table-wrap table,
    .main-content .table-responsive table,
    .table-wrap table {
        min-width: 650px;
    }


    /* -----------------------------------------------------
       PROFIL
       ----------------------------------------------------- */

    .msprofile-wrap,
    .msprofile-card {
        width: 100%;

        max-width: 100%;
    }

    .msprofile-top,
    .profile-head {
        flex-direction: column;

        align-items: stretch;

        gap: 18px;
    }

    .msprofile-avatar-wrap,
    .msprofile-info,
    .profile-info {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;
    }

    .msprofile-row {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 4px;
    }

    .msprofile-row .label {
        width: auto;
    }

    .msprofile-row .value {
        min-width: 0;

        overflow-wrap: anywhere;

        word-break: break-word;
    }

    .msprofile-stats {
        flex-direction: column;

        gap: 12px;
    }
}


/* =========================================================
   6. TÉLÉPHONES
   ========================================================= */

@media (max-width: 575.98px) {

    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .mobile-menu-toggle {
        top: 9px !important;
        left: 10px !important;

        width: 42px !important;
        height: 42px !important;

        border-radius: 9px;
    }

    .mobile-menu-toggle span {
        width: 20px;
    }


    /* -----------------------------------------------------
       SIDEBARS
       ----------------------------------------------------- */

        .admin-sidebar,
    .super-admin-sidebar,
    body > .d-flex .sidebar,
    .app .sidebar {
        width: min(90vw, 330px) !important;
    }


    /* -----------------------------------------------------
       HEADBARS
       ----------------------------------------------------- */

    .admin-header,
    .main-content > header,
    .topbar {
        height: 60px !important;
        min-height: 60px !important;

        padding-left: 62px !important;

        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
        /* Le topbar Cashier affiche toujours un titre + un sous-titre,
       il a besoin d'un peu plus de hauteur que les autres headers
       pour ne pas voir son texte coupé en haut de l'écran. */
    .topbar {
        height: auto !important;
        min-height: 60px !important;
    }


    /* -----------------------------------------------------
       CONTENU
       ----------------------------------------------------- */

    .admin-content,
    .main-content,
    .content {
        padding-top: 74px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        padding-bottom: 16px !important;
    }


    /* -----------------------------------------------------
       TITRES
       ----------------------------------------------------- */

    .page-title {
        min-width: 0 !important;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       TOP ACTIONS
       ----------------------------------------------------- */

    .top-actions {
        max-width: 48% !important;

        gap: 5px !important;
    }

    .top-actions .user-mini,
    .user-meta {
        display: none !important;
    }


    /* -----------------------------------------------------
       RECHERCHE
       ----------------------------------------------------- */

    .admin-header .search-box {
        max-width: 150px !important;
    }


    /* -----------------------------------------------------
       SHOP
       ----------------------------------------------------- */

    .shop-grid,
    .pay-methods {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* -----------------------------------------------------
       SEARCH ROW
       ----------------------------------------------------- */

    .search-row {
        flex-direction: column;

        align-items: stretch;
    }

    .search-row > * {
        width: 100%;
    }


    /* -----------------------------------------------------
       CART / PAYMENT
       ----------------------------------------------------- */

    .payment-layout,
    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* -----------------------------------------------------
       CART / RECEIPT
       ----------------------------------------------------- */

    .receipt {
        width: 100%;

        max-width: 100%;
    }

    .receipt-meta {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 6px;
    }


    /* -----------------------------------------------------
       BUTTONS PRINT / ACTIONS
       ----------------------------------------------------- */

    .no-print .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .card-header,
    .card-body {
        padding: 14px;
    }

    .msprofile-card {
        padding: 16px;
    }


    /* -----------------------------------------------------
       TABLEAUX
       ----------------------------------------------------- */

    .admin-table-wrap {
        padding: 10px;
    }

    .admin-table-wrap table,
    .main-content .table-responsive table,
    .table-wrap table {
        min-width: 620px;
    }
}


/* =========================================================
   7. TRÈS PETITS TÉLÉPHONES
   ========================================================= */

@media (max-width: 380px) {

    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;

        top: 9px !important;
        left: 8px !important;
    }

    .mobile-menu-toggle span {
        width: 19px;
    }

    .admin-header,
    .main-content > header,
    .topbar {
        padding-left: 58px !important;
    }

    .admin-content,
    .main-content,
    .content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .admin-table-wrap,
    .card-header,
    .card-body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .admin-header .search-box {
        max-width: 120px !important;
    }
}


/* =========================================================
   8. TÉLÉPHONE EN MODE PAYSAGE
   ========================================================= */

@media (max-width: 991.98px)
and (orientation: landscape)
and (max-height: 600px) {

    /* -----------------------------------------------------
       HEADBAR PLUS COMPACTE
       ----------------------------------------------------- */

    .admin-header,
    .main-content > header,
    .topbar {
        height: 56px !important;
        min-height: 56px !important;

        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .mobile-menu-toggle {
        top: 7px !important;

        width: 40px !important;
        height: 40px !important;
    }


    /* -----------------------------------------------------
       CONTENU
       ----------------------------------------------------- */

    .admin-content,
    .main-content,
    .content {
        padding-top: 70px !important;
    }


    /* -----------------------------------------------------
       SIDEBAR
       ----------------------------------------------------- */

        .admin-sidebar,
    .super-admin-sidebar,
    body > .d-flex .sidebar,
    .app .sidebar {
        width: min(55vw, 340px) !important;

        height: 100dvh !important;
    }


    /* -----------------------------------------------------
       LIENS SIDEBAR
       ----------------------------------------------------- */

        .admin-sidebar .nav-link,
    .super-admin-sidebar .nav-link,
    body > .d-flex .sidebar-nav .nav-link,
    .app .sidebar .nav .nav-link {
        min-height: 42px !important;

        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}


/* =========================================================
   9. MODALES
   ========================================================= */

@media (max-width: 767.98px) {

    .modal-dialog {
        width: auto;

        max-width: calc(100% - 20px);

        margin: 10px auto;
    }

    .modal-body {
        overflow-x: auto;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    .card,
    .stat-card,
    .admin-table-wrap,
    .shop-product,
    .notification,
    .profile-head,
    .page-title,
    .page-subtitle {
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   10. ACCESSIBILITÉ / MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu-toggle,
    .mobile-menu-toggle span,
    .mobile-menu-backdrop,
        .admin-sidebar,
    .super-admin-sidebar,
    body > .d-flex .sidebar,
    .app .sidebar {
        transition: none !important;
    }
    @media (max-widht: 991.98px) {
        .admin-header .search-box{
            display: none !important;
        }
        .main-content > header .search-box{
            display: none !important;
        }
        .topbar .search{
            display: none !important;
        }
    }
    
    
}