@import '_content/POS.Components/POS.Components.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-fau58qfdln] {
    display: grid;
    grid-template-columns: 16rem auto 28rem; /*5rem*/
    grid-template-rows: 5.5rem auto;
    height: calc(100vh - 3rem);
    border-radius: 0.75rem;
    overflow: clip;
    transition: grid-template-columns 0.3s ease-in-out;
}

/* When market layout is active (right bill panel hidden) */
.page.market[b-fau58qfdln] {
    grid-template-columns: 14rem 1fr; /* sidebar + middle fills remaining space */
}

.page.collapsed.market[b-fau58qfdln] {
    grid-template-columns: 5rem 1fr;
}

.page.collapsed[b-fau58qfdln] {
    grid-template-columns: 5rem auto 28rem;
    background-color : chocolate;
}

.page.not-orders[b-fau58qfdln] {
    grid-template-columns: 14rem auto;
    /*background-color: green;*/
}

.page.collapsed.not-orders[b-fau58qfdln] {
    grid-template-columns: 5rem auto;
    background-color: blue;
}

main[b-fau58qfdln] {
    padding: 0rem;
    grid-column: 2;
    grid-row: 2;
    background-color: var(--color-very-light-gray);
    overflow: hidden;
    position: relative;
}

main.not-auth[b-fau58qfdln] {
    padding: 0rem;
}

/*.page.not-auth {
    grid-template-columns: auto;
    grid-template-rows: auto;
}*/

/* ========================================
   RESPONSIVE DESIGN FOR SMALL SCREENS
   Target: 15.7" screens with 1366x768 resolution
   ======================================== */

/* Small laptops and 1366x768 screens */
@media only screen and (max-width: 1400px) {
    .page[b-fau58qfdln] {
        grid-template-columns: 12rem auto 24rem;
        grid-template-rows: 4.5rem auto;
    }

    .page.market[b-fau58qfdln] {
        grid-template-columns: 11rem 1fr;
    }

    .page.collapsed.market[b-fau58qfdln] {
        grid-template-columns: 4rem 1fr;
    }

    .page.collapsed[b-fau58qfdln] {
        grid-template-columns: 4rem auto 24rem;
    }

    .page.not-orders[b-fau58qfdln] {
        grid-template-columns: 11rem auto;
    }

    .page.collapsed.not-orders[b-fau58qfdln] {
        grid-template-columns: 4rem auto;
    }
}

/* Very small screens (1280px and below) */
@media only screen and (max-width: 1280px) {
    .page[b-fau58qfdln] {
        grid-template-columns: 10rem auto 22rem;
        grid-template-rows: 4rem auto;
    }

    .page.market[b-fau58qfdln] {
        grid-template-columns: 9rem 1fr;
    }

    .page.collapsed.market[b-fau58qfdln] {
        grid-template-columns: 3.5rem 1fr;
    }

    .page.collapsed[b-fau58qfdln] {
        grid-template-columns: 3.5rem auto 22rem;
    }

    .page.not-orders[b-fau58qfdln] {
        grid-template-columns: 9rem auto;
    }

    .page.collapsed.not-orders[b-fau58qfdln] {
        grid-template-columns: 3.5rem auto;
    }
}