body {

font-family: Arial, sans-serif;
margin:0;
padding:0;

}

.container {

display:flex;
height:100vh;

}

/* SIDEBAR */

.sidebar {

width:250px;
background:#111;
color:white;
padding:20px;

}

.sidebar h2 {

margin-bottom:30px;

}

.sidebar ul {

list-style:none;
padding:0;

}

.sidebar ul li {

padding:15px;
cursor:pointer;
border-radius:6px;

}

.sidebar ul li:hover {

background:#333;

}

/* MAIN AREA */

.main {

flex:1;
padding:30px;
overflow-y:auto;

}

#content {

margin-top:20px;

}

/* DASHBOARD CARDS */

.cards{

display:flex;
gap:20px;
margin-bottom:30px;
flex-wrap:wrap;

}

.card{

background:#f4f4f4;
padding:20px;
border-radius:10px;
min-width:200px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);

}

.card h3{

margin-top:0;

}

/* CHART AREA */

.charts{

display:grid;
grid-template-columns:1fr;
gap:40px;
max-width:900px;

}

/* LIMITA TAMANHO DOS GRÁFICOS */

.charts canvas{

max-height:350px;
width:100% !important;

}

/* RESPONSIVO */

@media (max-width:900px){

.container{

flex-direction:column;

}

.sidebar{

width:100%;

}

.cards{

flex-direction:column;

}

}