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



body{

background:#e9eef5;

}



.overlay{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

}



.modal{

width:1200px;

height:90vh;

background:white;

border-radius:20px;

display:flex;

flex-direction:column;

overflow:hidden;

}




.header{

height:90px;

padding:20px 30px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #ddd;

flex-shrink:0;

}



.product{

display:flex;

gap:15px;

align-items:center;

}


.product img{

width:60px;

height:60px;

border-radius:10px;

}


.product span{

background:#22c55e;

color:white;

padding:5px 12px;

border-radius:20px;

font-size:12px;

}



.close{

font-size:30px;

border:0;

background:none;

}





.body{

display:flex;

flex:1;

min-height:0;

}





.sidebar{

width:230px;

padding:20px;

border-right:1px solid #ddd;

}



.sidebar div{

padding:15px;

margin-bottom:10px;

border-radius:10px;

}



.sidebar .active{

background:#eef2ff;

color:#4f46e5;

}





.content{

flex:1;

overflow-y:auto;

padding:25px;

min-height:0;

}




.card{

border:1px solid #ddd;

border-radius:15px;

padding:20px;

margin-bottom:20px;

}




h3{

margin-bottom:15px;

}



label{

display:block;

margin-bottom:6px;

font-size:14px;

}



input,
select,
textarea{


width:100%;

padding:12px;

border-radius:8px;

border:1px solid #ccc;

}



textarea{

height:200px;

}



.grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}




.gallery{

display:flex;

gap:15px;

}


.gallery img,
.upload{

width:120px;

height:120px;

border-radius:12px;

}


.upload{

border:2px dashed #6366f1;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

color:#6366f1;

}





.color{

display:flex;

align-items:center;

gap:20px;

padding:15px;

border-bottom:1px solid #ddd;

}


.color img{

width:60px;

height:60px;

}





table{

width:100%;

border-collapse:collapse;

}



td,th{

padding:15px;

border-bottom:1px solid #ddd;

}




.footer{

height:80px;

display:flex;

justify-content:flex-end;

align-items:center;

gap:15px;

padding:20px;

border-top:1px solid #ddd;

flex-shrink:0;

}



.footer button{

padding:12px 25px;

border-radius:10px;

border:0;

}



.save{

background:#4f46e5;

color:white;

}

/* ==============================
   FINAL MODAL SCROLL FIX
================================ */


html,
body{

height:100%;
overflow:hidden;

}



.overlay{

height:100vh;
padding:20px;

}



.modal{

width:1200px;
height:90vh;

display:flex;
flex-direction:column;

overflow:hidden;

background:#fff;

}





.header{

height:80px;

flex-shrink:0;

}





.body{

display:flex;

flex:1;

min-height:0;

overflow:hidden;

}





.sidebar{

width:220px;

flex-shrink:0;

overflow:hidden;

}





.content{

flex:1;

height:100%;

overflow-y:auto;

overflow-x:hidden;

padding:25px;

}





.card{

margin-bottom:20px;

}





.footer{

height:70px;

flex-shrink:0;

}





/* scrollbar */

.content::-webkit-scrollbar{

width:8px;

}


.content::-webkit-scrollbar-thumb{

background:#6366f1;

border-radius:20px;

}




/* image fix */

.gallery img,
.upload,
.color img{

object-fit:cover;

}




/* taka symbol fix */

input{

font-family:Arial, sans-serif;

}