.modal-backdrop {
    position: fixed;
    inset: 0;

    background: rgba(
        0,
        0,
        0,
        0.4
    );

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;
}

.modal-window {

    width: 900px;

    max-height: 80vh;

    overflow: auto;

    background: white;

    padding: 20px;

    border-radius: 8px;
}

/* ==========================
   NEW PRODUCT ROW
========================== */
.new-product-panel{

    background:#fff;

    border:1px solid #d9e2ec;

    border-radius:12px;

    padding:15px;

    margin-bottom:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.barcode-row{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;
}

.barcode-row label{

    width:110px;

    font-size:17px;

    font-weight:700;

    color:#444;
}

.barcode-input{

    width:320px;

    height:42px;

    font-size:24px;

    font-weight:bold;

    letter-spacing:2px;

    text-align:center;

    border:2px solid #2f80ed;

    border-radius:8px;

    outline:none;
}

.barcode-input:focus{

    border-color:#27ae60;

    box-shadow:0 0 10px rgba(39,174,96,.25);
}
.new-row{

    display:grid;

    grid-template-columns:

        320px
        50px
        50px
        50px
        110px
        120px
        50px
        90px
        120px
        90px
        90px
        90px;

    gap:8px;
}

.new-row input{

    height:34px;

    border:1px solid #ccd6dd;

    border-radius:6px;

    padding:0 8px;

    font-size:15px;
}

.new-row input:focus{

    border-color:#2f80ed;
}


.new-row input[readonly]{

    background:#f3f5f8;

    color:#444;

    font-weight:600;
}

.save-btn{

    background:#27ae60;

    color:white;

    border:none;

    border-radius:6px;

    font-weight:bold;

    cursor:pointer;
}

.save-btn:hover{

    background:#219150;
}

.new-row-header{

    display:grid;

    grid-template-columns:

        320px
        50px
        50px
        50px
        110px
        120px
        50px
        90px
        120px
        90px
        90px
        90px;  

    gap:8px;

    margin-bottom:5px;

    font-weight:600;

    color:#666;

    font-size:13px;
}
.new-code-btn{
    height:42px;
    padding:0 18px;

    border:none;
    border-radius:8px;

    background:#2f80ed;
    color:#fff;

    font-weight:600;
    cursor:pointer;
}

.new-code-btn:hover{
    background:#1d6fd6;
}

.search-popup{

position:absolute;

top:100%;

left:0;

width:100%;

max-height:300px;

overflow:auto;

background:white;

border:1px solid #ccc;

box-shadow:0 5px 15px rgba(0,0,0,.25);

z-index:999;

}
.popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:5000;
}

.popup-window{
    width:900px;
    max-width:95vw;

    height:600px;
    max-height:85vh;

    background:#fff;

    border-radius:10px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.popup-title{
    padding:15px 20px;

    font-size:20px;
    font-weight:bold;

    background:#2d6cdf;
    color:white;
}

.popup-table{
    width:100%;
    border-collapse:collapse;
}

.popup-table thead{
    /* position:sticky; */
    top:0;
    background:#2bb134;
}

.popup-table th,
.popup-table td{
    padding:8px 12px;
    border-bottom:1px solid #ddd;
}

.popup-table tbody{
    display:block;
    overflow:auto;
    height:100%;
}

.popup-table thead,
.popup-table tbody tr{
    display:table;
    width:100%;
    /* table-layout:fixed; */
}

.popup-table tbody tr:hover{
    background:#eef5ff;
    cursor:pointer;
}

.selected-row{
    background:#cfe3ff !important;
}

.popup-buttons{
    display:flex;
    justify-content:flex-end;
    gap:10px;

    padding:12px;

    border-top:1px solid #ddd;
}

.supplier-popup {
    width: 700px;
    max-width: 90vw;
}

.popup-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    border: 1px solid #bbb;
    border-radius: 6px;
}

.popup-table-wrapper {
    max-height: 450px;
    overflow-y: auto;
}