body{
margin:0;
padding:0;
font-family:'Segoe UI',sans-serif;
background:#f4f6f9;
overflow-x:hidden;
}

/* SIDEBAR */

.sidebar{
position:fixed;
left:0;
top:0;
width:220px;
height:100vh;
background:#06112b;
padding-top:10px;
z-index:999;
}

/* LOGO */

.sidebar-logo{
width:140px;
display:block;
margin:40px auto;
border-radius:10px;
}

/* MENU */

.sidebar-menu{
list-style:none;
padding:0;
margin:0;
}

.sidebar-menu li{
width:100%;
}

.sidebar-menu li a{
display:block;
padding:16px 20px;
color:#fff;
text-decoration:none;
font-size:16px;
font-weight:600;
border-bottom:1px solid rgba(255,255,255,0.05);
transition:0.3s;
}

.sidebar-menu li a:hover{
background:#0d6efd;
padding-left:30px;
}

/* CONTENT */

.content-area{
margin-left:220px;
padding:15px;
}

/* HEADER */

.top-header{
background:#4093d0;
padding:18px 20px;
border-radius:12px;
color:#fff;
font-size:22px;
font-weight:bold;
margin-bottom:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

/* SUMMARY CARDS */

.summary-card{
padding:12px;
border-radius:14px;
text-align:center;
margin-bottom:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
min-height:80px;
display:flex;
flex-direction:column;
justify-content:center;
}

.card1{
background:#dbeafe;
}

.card2{
background:#dcfce7;
}

.card3{
background:#fef3c7;
}

.card4{
background:#fce7f3;
}

.summary-title{
font-size:14px;
color:#555;
margin-bottom:8px;
}

.summary-value{
font-size:28px;
font-weight:bold;
color:#2f7dbd;
}

/* ERP PANEL */

.erp-panel{
background:#fff;
border-radius:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
overflow:hidden;
}

/* PANEL HEADER */

.panel-header{
padding:18px;
font-size:20px;
font-weight:bold;
border-bottom:1px solid #ddd;
color:#102542;
}

/* PANEL BODY */

.panel-body{
padding:15px;
}

/* INPUTS */

.form-control-custom{
height:40px;
border-radius:7px;
border:1px solid #ced4da;
}

/* TABLE */

.salary-table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.salary-table th{
background:#f1f3f5;
padding:10px;
font-size:14px;
border:1px solid #dcdcdc;
text-align:center;
}

.salary-table td{
padding:4px;
border:1px solid #dcdcdc;
}

/* GRID INPUT */

.grid-input{
width:100%;
height:34px;
border:1px solid #cfd4da;
border-radius:4px;
padding:5px;
text-align:center;
font-size:13px;
}

/* TOTAL ROW */

.total-row{
background:#e8f0fe;
font-weight:bold;
}

.total-row input{
background:#dbeafe !important;
font-weight:bold;
color:#000;
}

/* SAVE BUTTON */

.save-section{
text-align:center;
margin-top:25px;
}

.save-btn{
background:#2eaf5d;
border:none;
color:#fff;
padding:12px 40px;
font-size:16px;
font-weight:bold;
border-radius:8px;
transition:0.3s;
}

.save-btn:hover{
background:#24914b;
}

/* RESPONSIVE */

@media(max-width:991px){

.sidebar{
width:100%;
height:auto;
position:relative;
}

.content-area{
margin-left:0;
}

.salary-table{
min-width:1200px;
}

}