.main {

    display: flex;
    width: 100%;
}

.divleft {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background:#1976d2;
    padding-top: 20px;
}
.divleft button{
    width: 180px;
    height: 50px;

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

}

.divright {
    flex: 1;
    padding: 20px;
    background: rgb(255, 247, 227);
    min-height: 100vh;
}

button {
    width: 150px;

    height:36px;
    padding:0 10px;

    border: none;
    cursor: pointer;
    border-radius: 6px;
}

button:hover {
    background: #b3cce6;
}
.table-container {
    height: 50vh;
    overflow-y: auto;
    overflow-x: auto;

    border: 1px solid #d0d7de;
    border-radius: 8px;

    background: white;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table button{
    height:25px;
    padding:0px;
    width: 100%;
}
thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    /* background: #f5f7fa; */
}

tbody tr:hover {
    background: #eef5ff;
}
/* table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
*/
td,
th {
    border: 1px solid #ddd;
    padding: 10px;
}

/* ===========================
   GENERAL
=========================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    margin:0;
    background:#eef2f6;
    font-family:Segoe UI,Tahoma,sans-serif;
}

button,
input,
select {
    font-family: inherit;
}


/* ===========================
   PAGE
=========================== */

.mutq-page{

    display:flex;
    flex-direction:column;

    height:100vh;
}


/* ===========================
   HEADER
=========================== */


.order-header{

    display:flex;

    gap:15px;

    align-items:center;

    /* background:white; */

    padding:10px;

    margin:0px;

    border-radius:8px;

    /* box-shadow:0 2px 6px rgba(0,0,0,.08); */
}
.order-header input{

    height:34px;

    padding:0 10px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:15px;
}

.order-header button{
    height:36px;

    padding:0 18px;

    border:none;

    border-radius:6px;

    background:#1976d2;

    color:white;

    cursor:pointer;

    font-weight:600;
}

.order-header button:hover{
    background:#1565c0;
}


/* ===========================
   PRODUCT FORM
=========================== */

.product-form{

    display:grid;

    grid-template-columns:
        100px
        320px
        70px
        70px
        90px
        70px
        90px
        90px
        100px;

    gap:8px;

    background:white;

    margin:10px;

    padding:15px;

    border-radius:8px;

    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.product-form input,
.product-form select{

    height:34px;

    border:1px solid #ccc;

    border-radius:5px;

    padding:0 8px;
}

.product-form input:focus,
.product-form select:focus{

    border-color:#1d74d8;

    outline:none;

    box-shadow:0 0 4px rgba(0,120,255,.4);
}

.product-form button{

    height:36px;

    padding:0 20px;

    border:none;

    border-radius:6px;

    background:#43a047;

    color:white;

    cursor:pointer;

    font-weight:600;
}

.product-form button:hover{

    background:#2e7d32;
}
.save-btn{

    background:#2e7d32;

    color:white;

    border:none;

    border-radius:5px;

    cursor:pointer;

    font-weight:bold;
}

.save-btn:hover{

    background:#388e3c;
}


/* ===========================
   TABLE
=========================== */

table{

    width:100%;

    border-collapse:collapse;

    background:white;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    border-radius:8px;

    overflow:hidden;
}

thead{

    background:#1976d2;

    color:white;
}

th{

    padding:10px;

    font-size:14px;

    font-weight:600;

    text-align:center;
}

td{

    padding:8px;

    border-bottom:1px solid #ececec;

    /*text-align:center;*/

    font-size:14px;
}
 td button{
    width: 100%;
 }

tbody tr:nth-child(even){

    background:#fafafa;
}

tbody tr:hover{

    background:#e3f2fd;
}

.active-row{

    background:#bbdefb !important;
}

.change-row{

    background:#fff3cd !important;
}


/* ===========================
   INPUTS INSIDE TABLE
=========================== */

td input{

    width:100%;

    border:none;

    background:transparent;

    text-align:center;
}

td input:focus{

    outline:none;

    background:#fff;
}


/* ===========================
   MODAL
=========================== */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1000;
}

.modal-window{

    width:900px;

    max-height:90vh;

    overflow:auto;

    background:white;

    border-radius:10px;

    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.modal-window h2{

    margin-bottom:15px;
}

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;
}

.modal-buttons button{

    padding:10px 20px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-weight:600;
}

.modal-buttons button:first-child{

    background:#1976d2;

    color:white;
}

.modal-buttons button:last-child{

    background:#43a047;

    color:white;
}


/* ===========================
   TOTALS
=========================== */

.totals{

    display:flex;
    flex-direction:column;
    align-items: flex-end;
    justify-content:flex-end;

    gap:15px;

    margin-top:15px;
}

.totals div{

    display:flex;

    align-items:center;

    gap:10px;
}

.totals input{

    width:130px;

    height:34px;

    text-align:right;

    border:1px solid #ccc;

    border-radius:6px;

    padding-right:8px;
}


/* -----popup-------------------------- */
.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;
}
.derivative-product-info{
    font-size: 25px;
}

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

.popup-table thead{
    position:sticky;
    top:0;
    background:#219150;
}

.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;
}
.derivative-popup{
    width:350px;
    max-width:60vw;

    height:400px;
    max-height:60vh;

    background:#fff;

    border-radius:10px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

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

.derivative-add input{
    gap:10px;

    padding:12px;

    border-top:1px solid #ddd;
}