/* Phone / tablet containment — keep every screen inside the viewport */

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

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

.table-responsive,
.inv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    .row > [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .d-flex,
    .row,
    .btn-list,
    .page-header,
    .page-options,
    .btn-toolbar,
    .btn-group {
        flex-wrap: wrap !important;
        max-width: 100%;
    }

    /* ---- Admin header ---- */
    .app-header.header.sticky,
    .app-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        overflow: visible !important;
        z-index: 1050 !important;
    }

    .app-header .container-fluid.main-container,
    .app-header .d-flex {
        overflow: visible !important;
        flex-wrap: wrap;
        row-gap: 0.35rem;
        max-width: 100%;
    }

    .header-right-icons {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem;
        max-width: 100%;
    }

    #havisHeaderInstallBtn {
        display: none !important;
    }

    #profileDropdownMenu.show {
        position: fixed !important;
        top: 64px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 80px);
    }

    .page-main {
        padding-top: 72px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .app-content,
    .app-content .container,
    .app-content .container-fluid,
    .side-app,
    .content,
    .page {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .card,
    .welcome-card,
    .page-header-card,
    .page-header-card-primary,
    .page-header-card-secondary,
    .page-header-card-success,
    .page-header-card-info,
    .page-header-card-warning,
    .page-header-card-danger,
    .page-header-card-purple,
    .page-header-card-teal {
        max-width: 100%;
        overflow-x: auto;
    }

    .table {
        font-size: 13px;
    }

    .form-control,
    .form-select,
    select.form-control,
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Super admin welcome / profile block */
    .welcome-card {
        padding: 1.1rem !important;
    }
    .welcome-card .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .dashboard-top-actions {
        width: 100%;
        align-items: stretch !important;
    }
    .btn-profile-admin,
    .btn-home-page,
    .profile-dropdown,
    .profile-dropdown .dropdown-menu {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .welcome-title { font-size: 1.25rem !important; }
    .welcome-subtitle { font-size: 0.9rem !important; }

    .nav-card {
        min-height: 0 !important;
        padding: 1rem 0.75rem !important;
        width: 100%;
    }

    .page-navigation-bar-global {
        padding: 0.75rem !important;
    }
    .page-navigation-bar-global .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .nav-control,
    .btn-nav,
    .current-page-indicator {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- POS chrome: never leave a 268px hole ---- */
    #posSide {
        transform: translateX(-105%) !important;
        width: min(280px, 88vw) !important;
        left: 0 !important;
    }
    body.nav-open #posSide,
    .pos-app.nav-open #posSide {
        transform: none !important;
    }
    #posTopbar,
    .pos-topbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0.45rem 0.6rem !important;
        min-height: 52px !important;
    }
    .pos-page,
    body.pos-has-fragment,
    body:has(#posTopbar):not(.pos-app) {
        padding: 64px 8px 20px 8px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .pos-page:has(.pos-sale) {
        padding: 52px 0 0 0 !important;
    }

    .pos-dash {
        padding: 0.6rem 0.15rem 4rem !important;
        overflow-x: hidden;
    }
    .pos-kpis,
    .pos-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .pos-grid {
        grid-template-columns: 1fr !important;
    }
    .pos-top {
        flex-direction: column;
        align-items: stretch !important;
    }
    .pos-top-meta {
        width: 100%;
    }
    .btn-pos-sell {
        width: 100%;
        justify-content: center;
    }
    .pos-action {
        min-height: 0 !important;
        padding: 0.7rem 0.65rem !important;
    }

    .pos-sale {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .pos-sale-catalog {
        padding: 0.7rem 0.7rem 1rem !important;
    }
    .pos-sale-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
    .pos-sale-card {
        min-height: 0 !important;
        min-width: 0 !important;
        width: 100%;
        padding: 0.55rem !important;
    }
    .pos-sale-search-box {
        flex-wrap: wrap;
    }
    .pos-sale-scan {
        display: none !important;
    }
    .pos-sale-cart {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        border-left: 0 !important;
    }

    .pos-topbar-left a.pos-icon-btn {
        display: none !important;
    }
    .pos-online {
        display: none !important;
    }
    .pos-user-btn {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .inv-actions,
    .inv-head,
    .inv-tabs {
        width: 100%;
    }
    .inv-actions .btn,
    .inv-head .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 576px) {
    .d-none-mobile {
        display: none !important;
    }

    h1, .page-title, .page-header h1, .page-header h2 {
        font-size: 1.15rem !important;
    }

    .btn {
        white-space: normal;
    }

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

    .pos-kpis {
        grid-template-columns: 1fr 1fr !important;
    }
    .pos-kpi .value {
        font-size: 1.05rem !important;
        word-break: break-word;
    }
}