/* ================= BODY ================= */

body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#f4f6f9;
color:#333;
}


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

.sidebar{
width:220px;
background:#2c3e50;
height:100vh;
position:fixed;
left:0;
top:0;
color:white;
overflow-y:auto;
z-index:1000;
}

.sidebar h2{
text-align:center;
padding:20px;
margin:0;
border-bottom:1px solid #3f556b;
font-size:20px;
}

.sidebar a{
display:block;
color:white;
padding:11px 20px;
text-decoration:none;
font-size:14px;
transition:0.2s;
}

.sidebar a:hover{
background:#34495e;
}

.sidebar a i{
margin-right:8px;
}


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

.menu-group{
border-top:1px solid #3f556b;
}

.menu-title{
padding:12px 20px;
color:#d1d1d1;
cursor:pointer;
font-size:13px;
font-weight:bold;
background:#2c3e50;
transition:0.2s;
}

.menu-title:hover{
background:#34495e;
}

.menu-items{
display:none;
background:#233140;
}

.menu-group.active .menu-items{
display:block;
}

.menu-items a{
padding-left:35px;
font-size:13px;
border-left:3px solid transparent;
}

.menu-items a:hover{
border-left:3px solid #27ae60;
background:#2a3b4c;
}


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

.topbar{
background:white;
padding:15px 25px;
border-bottom:1px solid #ddd;
margin-left:220px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:500;
}

.topbar h3{
margin:0;
font-size:18px;
font-weight:600;
}

.user-info{
font-size:14px;
color:#666;
}


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

.main{
margin-left:220px;
padding:25px;
min-height:100vh;
}


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

.dashboard-cards{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-top:20px;
}

.card{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
width:220px;
text-align:center;
transition:0.2s;
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.card h2{
margin:0;
font-size:34px;
color:#2c3e50;
}

.card p{
margin-top:8px;
font-size:14px;
color:#777;
}


/* ================= CHART CARD ================= */

.chart-card{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
margin-top:25px;
}


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

table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

table th{
background:#2c3e50;
color:white;
padding:12px;
font-size:14px;
text-align:left;
}

table td{
padding:12px;
border-bottom:1px solid #ddd;
font-size:14px;
}

table tr:hover{
background:#f9f9f9;
}


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

button{
cursor:pointer;
border:none;
padding:6px 12px;
border-radius:4px;
font-size:13px;
}

.btn-primary{
background:#3498db;
color:white;
}

.btn-danger{
background:#e74c3c;
color:white;
}

.btn-success{
background:#27ae60;
color:white;
}

.btn-primary:hover{
background:#2980b9;
}

.btn-danger:hover{
background:#c0392b;
}

.btn-success:hover{
background:#219150;
}


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

.form-box{
background:white;
padding:25px;
width:420px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.form-box label{
display:block;
margin-top:15px;
font-weight:600;
}

.form-box input,
.form-box select,
.form-box textarea{
width:100%;
padding:8px;
margin-top:5px;
border:1px solid #ccc;
border-radius:4px;
box-sizing:border-box;
}

.btn-save{
margin-top:20px;
padding:10px 15px;
background:#27ae60;
color:white;
border:none;
border-radius:4px;
}

.btn-save:hover{
background:#219150;
}


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

.table-responsive{
width:100%;
overflow-x:auto;
}


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

@media (max-width:768px){

.sidebar{
width:200px;
}

.topbar{
margin-left:200px;
}

.main{
margin-left:200px;
padding:20px;
}

.dashboard-cards{
flex-direction:column;
}

.card{
width:100%;
}

}
/* ===== SIDEBAR ARROW INDICATOR ===== */

.menu-title{
position:relative;
}

.menu-title::after{
content:"▶";
position:absolute;
right:15px;
font-size:12px;
transition:0.2s;
}

.menu-group.active .menu-title::after{
content:"▼";
}