.app{
display:flex;
min-height:100vh;
}

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

.sidebar{
    width:280px;
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:30px 24px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;
}

.nav-section{
margin-top:30px;
}

.nav-title{
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted);
margin-bottom:10px;
}

.nav-link{
display:block;
padding:12px 14px;
border-radius:12px;
margin-bottom:6px;
transition:all .25s ease;
}

.nav-link:hover{
background:rgba(255,255,255,.06);
}

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

.main{
flex:1;
padding:40px;
overflow:auto;
}

/* ================= KPI CARDS ================= */

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

.kpi-card{
background:linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.02)
);

border:1px solid var(--border);

border-radius:20px;

padding:24px;
}

.kpi-label{
font-size:13px;
color:var(--muted);
}

.kpi-value{
font-size:42px;
font-weight:700;
margin-top:12px;
}

/* ================= PANELS ================= */

.dashboard-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
}

.panel{
background:var(--panel);

border:1px solid var(--border);

border-radius:20px;

padding:24px;
}

.panel h3{
margin-bottom:20px;
}

.chart-placeholder{
height:320px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:rgba(255,255,255,.03);

color:var(--muted);
}

/* ================= RISK QUEUE ================= */

.risk-item{
padding:14px 0;
border-bottom:1px solid var(--border);
}

.risk-item:last-child{
border-bottom:none;
}

.risk-score{
color:var(--red);
font-weight:700;
}

/* ================= ACTIVITY ================= */

.activity-item{
padding:14px 0;
border-bottom:1px solid var(--border);
}

.activity-item:last-child{
border-bottom:none;
}

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

@media(max-width:1200px){

.kpi-grid{
grid-template-columns:repeat(2,1fr);
}

.dashboard-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.sidebar{
display:none;
}

.main{
padding:20px;
}

.kpi-grid{
grid-template-columns:1fr;
}

}