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:210px;
height:100vh;
background:#06112b;
padding-top:10px;
z-index:999;
overflow-y:auto;
}

.sidebar-title{
text-align:center;
color:#fff;
font-weight:bold;
padding:10px;
font-size:14px;
}

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

.sidebar-menu li a{
display:block;
padding:12px 14px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:600;
}

.sidebar-menu li.active a{
background:#0d6efd;
}

/* ================= CONTENT ================= */

.content-area{
margin-left:210px;
padding:12px;
}

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

.top-header{
background:#4093d0;
padding:14px;
border-radius:8px;
color:#fff;
font-size:18px;
font-weight:bold;
margin-bottom:12px;
}

/* ================= PANEL ================= */

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

.panel-header{
padding:12px;
font-size:16px;
font-weight:bold;
background:#f8f9fa;
border-bottom:1px solid #ddd;
}

.panel-body{
padding:10px;
}

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

.salary-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

/* GENERAL CELL STYLE */
.salary-table th,
.salary-table td{
border:1px solid #dcdcdc;
font-size:11px;
padding:5px;
text-align:center;
white-space:nowrap;
}

/* HEADER */
.salary-table th{
background:#f1f3f5;
font-weight:600;
}

/* ================= COLUMN WIDTH CONTROL (IMPORTANT) ================= */

/* SR NO (VERY SMALL) */
.salary-table th:nth-child(1),
.salary-table td:nth-child(1){
width:40px;
}

/* EMPLOYEE (BIGGEST SPACE) */
.salary-table th:nth-child(2),
.salary-table td:nth-child(2){
width:180px;
text-align:left;
padding-left:8px;
}

/* HOURS (SMALL) */
.salary-table th:nth-child(3),
.salary-table td:nth-child(3){
width:70px;
}

/* RATE */
.salary-table th:nth-child(4),
.salary-table td:nth-child(4){
width:80px;
}

/* MONTH SALARY */
.salary-table th:nth-child(5),
.salary-table td:nth-child(5){
width:110px;
}

/* ADVANCE */
.salary-table th:nth-child(6),
.salary-table td:nth-child(6){
width:90px;
}

/* TOTAL SALARY */
.salary-table th:nth-child(7),
.salary-table td:nth-child(7){
width:120px;
}

/* MC (SMALL) */
.salary-table th:nth-child(8),
.salary-table td:nth-child(8){
width:60px;
}

/* EXTRA */
.salary-table th:nth-child(9),
.salary-table td:nth-child(9){
width:90px;
}

/* TOTAL AMOUNT */
.salary-table th:nth-child(10),
.salary-table td:nth-child(10){
width:120px;
}

/* GIVEN */
.salary-table th:nth-child(11),
.salary-table td:nth-child(11){
width:90px;
}

/* BALANCE */
.salary-table th:nth-child(12),
.salary-table td:nth-child(12){
width:110px;
}

/* ================= INPUT BOX ================= */

.grid-input{
width:100%;
height:26px;
font-size:11px;
text-align:center;
border:1px solid #cfd4da;
border-radius:3px;
padding:2px;
}

.grid-input[readonly]{
background:#eef2f7;
font-weight:600;
}

/* ================= TOTAL ROW ================= */

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

/* ================= SAVE BUTTON ================= */

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

.save-btn{
background:#2eaf5d;
border:none;
color:#fff;
padding:10px 28px;
font-size:14px;
border-radius:6px;
}

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

/* ================= RESPONSIVE ================= */

@media(max-width:991px){

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

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

/* Slight reduction only */
.salary-table th,
.salary-table td{
font-size:10px;
}

}