/*
 * Responsive / compact density ONLY (app CSS — not assetsext).
 *
 * Rule: put base styles in the owning file (site_ext, site_tables, …).
 * This file only contains @media (and orientation) overrides so we do not
 * duplicate selectors that already live elsewhere.
 */

/* ------------------------------------------------------------------
 * Shell chrome: shrink rail + header on mid / short screens
 * ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    :root {
        --l1-width: 5.5rem; /* ~88px */
        --l2-width: 11.25rem; /* ~180px */
        --header-h: 3.5rem; /* ~56px */
        --logo-height: 3.5rem;
        --l1-ico-size: 1.75rem;
        --l1-ico-line: 2.25rem;
        --rail-width-full: calc(var(--l1-width) + var(--l2-width));
    }

    .menu-ext .topbar .navbar {
        padding-top: 0;
    }

    .menu-ext .l1-item {
        width: 4.1rem;
        height: 4.1rem;
        gap: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 0.625rem;
    }

    .menu-ext .l1-inner {
        padding: 0.375rem 0;
    }

    .menu-ext .l2-link {
        gap: 0.5rem;
        padding: 0.5rem 0.5rem;
    }

        .menu-ext .l2-link .big-ico {
            width: 2rem;
            height: 2rem;
            border-radius: 0.5rem;
        }

            .menu-ext .l2-link .big-ico svg {
                width: 1.125rem;
                height: 1.125rem;
            }

        .menu-ext .l2-link span {
            font-size: 0.8125rem;
        }

    .menu-ext .l2-group-title {
        font-size: 0.875rem;
    }

    .menu-ext .l3-link {
        padding: 0.5rem 0.5rem;
    }

    .menu-ext .brand-mark {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }

    .menu-ext .menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
    }

    .menu-ext .icon-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .user-avatar {
        width: 2rem;
        height: 2rem;
    }

    .menu-ext .logo-image {
        height: 1.75rem;
    }

    .bill-header-bar {
        min-height: 2.5rem;
    }

        .bill-header-bar h3 {
            margin-top: 0.25rem;
            font-size: 1rem;
        }

    .table-container,
    .bill-input .table-zone,
    .list-body {
        max-width: 100%;
    }

    .search-zone.advance-search-zone .form-label {
        width: min(100%, 10rem);
    }

    .drawer-content {
        padding-top: var(--header-h, 3.25rem);
    }

    .camera-barcode .drawer {
        padding-top: var(--header-h, 3.25rem);
    }
    .card-body {
        padding: calc(0.5 * var(--bs-card-spacer-y)) calc(0.5 * var(--bs-card-spacer-x));
    }
    .px-block {
        padding-inline: calc(0.5 * var(--zii-block-pad)) !important;
    }
}

@media (max-height: 700px) {
    :root {
        --header-h: 3.25rem;
        --logo-height: 3.25rem;
        --l1-ico-size: 1.5rem;
        --l1-ico-line: 2rem;
    }

    .menu-ext .l1-item {
        width: 3.75rem;
        height: 3.5rem;
        margin-bottom: 0.125rem;
    }

    .menu-ext .l2-head {
        margin-top: var(--logo-height);
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .menu-ext .l2-scroll {
        padding: 0.5rem;
    }

    .dynamic-fixed-left,
    .dynamic-fixed-left.fixed {
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------
 * Narrow / phone: search + tables + overlay body height
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .filter-search .form-control,
    .filter-search .multi-select {
        width: 100%;
    }

    .popover .popover-body .dropdown-menu .dropdown-menu-body {
        max-height: min(50vh, 20rem);
    }

    .table-noscroll,
    .bill-input .table-noscroll,
    .modal-body .table-noscroll {
        overflow-x: auto;
        max-width: 100%;
    }

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

    .search-zone.advance-search-zone .row.item .form-group {
        display: block;
    }

    .search-zone .filter-item .item-first,
    .search-zone .filter-item:not(.item-third) .item-second,
    .search-zone .filter-item:has(.item-third) .item-second,
    .search-zone .filter-item .item-third {
        width: 100% !important;
    }
}

/* Large screens: clip page chrome; mid-width uses overflow-x:auto from site.css */
@media (min-width: 1400px) {
    .pos-layout .page-wrapper.page-wrapper-ext {
        overflow-x: hidden;
    }
}

/* ------------------------------------------------------------------
 * POS keypad: scale down on narrower / shorter viewports
 * ------------------------------------------------------------------ */
@media (max-width: 1199.98px), (max-height: 700px) {
    .btn-pos {
        width: 5.5rem !important;
        height: 3.25rem !important;
    }

    .btn-pos-pay-method {
        width: 6.5rem !important;
        height: 3.75rem !important;
    }

    .btn-pos-pay-quick {
        width: 3.5rem !important;
        height: 3.25rem !important;
    }

    .btn-pos-pay-key-board {
        width: 6.5rem !important;
        height: 4rem !important;
        font-size: 0.875rem;
    }

    .btn-pos-pay-key-board2 {
        width: 4.5rem !important;
        height: 6.5rem !important;
    }

    .btn-pos-pay-key-board3 {
        width: 9.5rem !important;
        height: 2.75rem !important;
    }

    .btn-pos-number-key-board {
        width: 6.5rem !important;
        height: 4rem !important;
    }

    .btn-pos-lg {
        width: 10.5rem !important;
        height: 3.25rem !important;
    }

    .btn-pos-btn {
        width: 5.25rem !important;
        height: 3.75rem !important;
    }

    .btn-number-btn {
        width: 3.75rem !important;
        height: 2.75rem !important;
    }

    .btn-numbe-selector {
        width: 7.5rem !important;
        height: 3.75rem !important;
    }

    .vd-btn-panel {
        width: 7.5rem;
        height: 3rem;
        padding: 0.375rem 0.5rem;
    }
}

@media (max-width: 767.98px), (orientation: landscape) and (max-height: 500px) {
    .btn-pos,
    .btn-pos-pay-method,
    .btn-pos-pay-quick,
    .btn-pos-pay-key-board,
    .btn-pos-number-key-board,
    .btn-pos-lg,
    .btn-pos-btn {
        width: auto !important;
        min-width: 3.5rem;
        height: 2.75rem !important;
        margin: 0.125rem !important;
    }
}