/* =========================================================
   GLOBAL
========================================================= */

body{

margin:0;
padding:0;
font-family:'Segoe UI',sans-serif;
background:#eef1f5;
overflow-x:hidden;

}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{

width:240px;
height:100vh;
background:#0f172a;
position:fixed;
left:0;
top:0;
overflow-y:auto;
box-shadow:2px 0 10px rgba(0,0,0,0.15);
z-index:999;
padding-bottom:220px;

}

/* =========================================================
   SIDEBAR MENU
========================================================= */

.sidebar ul{

list-style:none;
margin:0;
padding:0;

}

.sidebar ul li{

border-bottom:1px solid rgba(255,255,255,0.05);

}

.sidebar ul li a{

display:flex;
align-items:center;
padding:16px 20px;
color:#ffffff !important;
text-decoration:none;
font-size:16px;
font-weight:500;
transition:0.3s;

}

.sidebar ul li a i{

width:30px;
font-size:18px;

}

.sidebar ul li a:hover{

background:#1e293b;
color:#38bdf8 !important;
padding-left:28px;

}

/* =========================================================
   SIDEBAR LOGO
========================================================= */

.sidebar-footer-logo{

position:absolute;
bottom:90px;
left:0;
width:100%;
text-align:center;

}

.sidebar-company-logo{

width:140px;
height:auto;
display:block;
margin:auto;
background:none;
padding:0;
border-radius:0;
box-shadow:none;

}

.sidebar-company-text{

display:none;

}

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

.main-content{

margin-left:240px;
padding:15px;

}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{

height:75px;
background:#3498db;
border-radius:10px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
color:white;
box-shadow:0 2px 8px rgba(0,0,0,0.15);

}

.page-title{

font-size:28px;
font-weight:700;
color:white;

}

.topbar-right{

display:flex;
align-items:center;

}

.save-top-btn{

background:#3498db;
border:2px solid white;
color:white;
padding:10px 28px;
font-size:15px;
font-weight:bold;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.save-top-btn:hover{

background:white;
color:#3498db;

}

/* =========================================================
   DASHBOARD CARDS
========================================================= */

.summary-card{

background:white;
border-radius:10px;
padding:20px;
text-align:center;
margin-top:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);

}

.summary-title{

font-size:15px;
color:#666;
margin-bottom:10px;

}

.summary-value{

font-size:42px;
font-weight:bold;
color:#2980b9;

}

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

.erp-panel{

background:white;
border-radius:10px;
margin-top:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
overflow:hidden;

}

.panel-header{

background:#f8fafc;
padding:16px 20px;
font-size:24px;
font-weight:bold;
border-bottom:1px solid #e2e8f0;
color:#1e293b;

}

.panel-body{

padding:15px;

}

/* =========================================================
   FILTER AREA
========================================================= */

.filter-area{

margin-bottom:15px;

}

.form-control-custom{

height:42px;
font-size:14px;
border-radius:6px;

}

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

.table-responsive{

overflow:auto;

}

.salary-table{

width:100%;
border-collapse:collapse;
background:white;

}

.salary-table th{

background:#f1f5f9;
padding:10px;
font-size:13px;
font-weight:700;
text-align:center;
border:1px solid #dfe4ea;
white-space:nowrap;

}

.salary-table td{

border:1px solid #dfe4ea;
padding:4px;

}

.emp-name{

font-size:13px;
font-weight:600;
white-space:nowrap;

}

/* =========================================================
   GRID INPUTS
========================================================= */

.grid-input{

width:100%;
height:34px;
border:1px solid #cbd5e1;
border-radius:4px;
padding:4px;
font-size:13px;
text-align:center;
background:white;

}

.grid-input:focus{

outline:none;
border:1px solid #3498db;

}

/* =========================================================
   BUTTONS
========================================================= */

.save-btn{

background:#27ae60;
border:none;
padding:14px 45px;
color:white;
font-size:16px;
font-weight:bold;
border-radius:8px;
cursor:pointer;

}

.save-btn:hover{

background:#229954;

}

.save-section{

text-align:center;
margin-top:25px;
margin-bottom:10px;

}

/* =========================================================
   CHARTS
========================================================= */

.chart-box{

background:white;
padding:15px;
border-radius:10px;
margin-top:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

width:8px;
height:8px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#94a3b8;
border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#64748b;

}

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

@media(max-width:991px){

.sidebar{

width:70px;

}

.main-content{

margin-left:70px;

}

.sidebar ul li a{

font-size:0;

}

.sidebar ul li a i{

font-size:18px;
margin-right:0;

}

.page-title{

font-size:20px;

}

.summary-value{

font-size:28px;

}

.sidebar-company-logo{

width:45px;

}

}