/* =========================================================
   RESPONSIVE LAYOUT
========================================================= */

@media (max-width:1200px){

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .summary-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =========================================================
   TABLETS
========================================================= */

@media (max-width:992px){

    .form-row,
    .invoice-row,
    .quote-row,
    .customer-row,
    .campaign-row,
    .pettycash-form-row{

        grid-template-columns:1fr;
    }

    .popup{

        width:95%;
    }

    .invoice-toolbar,
    .campaign-toolbar,
    .quote-toolbar{

        flex-direction:column;

        align-items:stretch;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

    .topbar{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;
    }

    #moduleTitle{

        width:100%;

        text-align:center;

        order:-1;
    }

    .icon{

        font-size:22px;
    }

    .button-row,
    .login-actions,
    .pettycash-actions{

        flex-direction:column;
    }

    .summary-grid{

        grid-template-columns:1fr;
    }

    .grid-4{

        grid-template-columns:1fr;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

    body{

        font-size:14px;
    }

    h1{

        font-size:24px;
    }

    h2{

        font-size:20px;
    }

    table{

        font-size:13px;
    }

    input,
    select,
    textarea,
    button{

        font-size:15px;
    }

    .popup{

        width:100%;

        height:100%;

        border-radius:0;
    }

    .popup-content{

        padding:20px;
    }

}


/* =========================================================
   PRINT
========================================================= */

@media print{

    .topbar,
    .popup-overlay,
    .button-row,
    .cart-actions,
    .icon,
    button{

        display:none !important;
    }

    body{

        background:#fff;
    }

    table{

        page-break-inside:auto;
    }

    tr{

        page-break-inside:avoid;
    }

}