/* =====================================================================
   Invoice creation pages responsiveness
   ---------------------------------------------------------------------
   Pages: Sale Add, Purchase Add, Sale Return Add, Purchase Return Add,
          Replacement (and their detail views).

   In nakon pages par layout do fixed-pixel flex columns par bana hai:
     .left-sidebox  (~420px)  +  .right-sidebox (~1056px)
   Jis ki wajah se 1024px se choti screens (tablet/mobile) par horizontal
   scroll aur tooti hui layout aati hai. Niche ke rules un columns ko
   choti screens par full-width / stacked bana dete hain aur product
   table ko horizontally scrollable rakhte hain.
   ===================================================================== */

/* Tablets & mobiles: stack the two side boxes full width */
@media (max-width: 1023.98px) {
    .left-sidebox,
    .right-sidebox {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .left-sidebox {
        margin-bottom: 15px;
    }

    /* Left panel forces full viewport height on desktop; relax on mobile */
    .sidebox-content {
        min-height: auto !important;
    }

    /* Keep wide product/entry tables usable via horizontal scroll */
    #table-container,
    .right_Info .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ProductTable {
        min-width: 620px;
    }
}

/* Phones: tighten paddings and let the title/header wrap nicely */
@media (max-width: 575.98px) {
    .right-sidebox {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .right_Info {
        padding: 10px !important;
    }

    .title,
    .title.font22 {
        font-size: 18px !important;
        padding-top: 10px !important;
    }

    /* The top action row (Get Stock / amount inputs) can overflow on phones */
    .right-sidebox > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .totalValues {
        font-size: 13px;
    }
}