/* Comptra.Cashier — responsive overrides (mobile / tablette) */

:root {
    --header-height: 115px;
}

@media (max-width: 992px) {
    :root {
        --header-height: auto;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard,
    .dashboard .main {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .main-container {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #menu-beta {
        order: -1;
        position: sticky;
        top: 0;
        z-index: 1020;
        max-height: none;
        border-bottom: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    #menu-alpha {
        border-right: 0;
        border-bottom: 1px solid #dee2e6;
        overflow: visible;
    }

    .panier-items {
        max-height: min(280px, 40vh);
    }

    .pm-field-row {
        grid-template-columns: 1fr;
    }

    .pm-modal,
    .pm-modal.invoice-modal {
        width: 100%;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 12px;
    }

    .pm-overlay {
        align-items: flex-end;
        padding: 8px;
    }

    .pm-overlay .pm-modal {
        max-height: calc(100dvh - 16px);
    }

    .pm-foot {
        flex-direction: column;
    }

    .pm-foot .pm-btn-cancel,
    .pm-foot .pm-btn-confirm {
        width: 100%;
        flex: none;
    }

    .pm-embed-frame {
        height: min(480px, 55dvh) !important;
    }

    .panier-header {
        flex-wrap: wrap;
    }

    .btn-client,
    .btn-vider {
        flex: 1 1 auto;
        min-width: 0;
    }

    .item-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .item-qty-ctrl {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .payments-row {
        flex-direction: column;
    }

    .payments-row .btn-pay {
        width: 100%;
    }

    .modal-overlay {
        padding: 8px;
        align-items: flex-end;
    }

    .modal-overlay .modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 12px 12px 0 0;
    }

    .supervisor-ops-grid {
        grid-template-columns: 1fr;
    }

    .cashier-cancel-denied-modal,
    .supervisor-ops-modal {
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: auto;
    }

    .app-header-stack {
        padding-top: env(safe-area-inset-top, 0);
    }

    .navbar-brand-logo {
        max-height: 52px !important;
        min-width: 52px !important;
    }

    .session-pill {
        font-size: 10px;
        padding: 4px 8px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px !important;
    }

    .module-switch {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        flex-direction: row;
        padding: 0.35rem 0.65rem;
        margin-left: auto;
        border-radius: 0.375rem;
    }

    .utility-nav .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .utility-nav .nav-item {
        width: 100%;
    }

    .utility-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
        padding-left: 0.5rem;
    }

    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        display: none;
        margin: 0;
        padding-left: 1rem;
        box-shadow: none;
        border: 0;
    }

    .dropdown-submenu.show > .dropdown-menu {
        display: block;
    }

    .vmware-bar {
        flex-wrap: nowrap;
    }

    .vmware-bar__label {
        display: none;
    }

    .filter-section .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    #menu-alpha.p-4,
    #menu-beta.p-4 {
        padding: 1rem !important;
    }

    .client-type-tabs {
        flex-direction: column;
    }

    .client-list {
        max-height: min(240px, 45dvh);
    }
}

@media (max-width: 576px) {
    .article-card .card-body {
        padding: 0.5rem;
    }

    .caisse-window__name {
        max-width: 72px;
    }

    .recap-row.total {
        font-size: 14px;
    }

    .pm-total-amt {
        font-size: 17px;
    }
}

@media (min-width: 993px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }
}