body{
margin:0;
font-family:Arial;
display:flex;
background:#f4f6f9;
}

/* sidebar */

.sidebar{
width:220px;
background:#2c3e50;
color:white;
height:100vh;
padding:20px;
}

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

.sidebar li{
padding:12px;
margin:10px 0;
cursor:pointer;
}

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

/* main */

.main{
flex:1;
padding:30px;
}

/* cards */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;
}

.card{
background:white;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
}

.card i{
font-size:25px;
color:#3498db;
}

/* form */

form{
background:white;
padding:20px;
border-radius:10px;
margin-bottom:20px;
}

input,select,textarea{
width:100%;
padding:10px;
margin:10px 0;
}

/* table */

table{
width:100%;
background:white;
border-collapse:collapse;
}

th,td{
padding:10px;
border-bottom:1px solid #ddd;
}

/* sections */

.section{
display:none;
}

/* dark mode */

.dark{
background:#1e1e1e;
color:white;
}

.dark .card,
.dark table,
.dark form{
background:#2a2a2a;
}

.dark input,
.dark textarea,
.dark select{
background:#333;
color:white;
}