body {
    background:#F5F7FA;
    margin:0;
    font-family: "Segoe UI", sans-serif;
    overflow-x: hidden;
}

/* SIDEBAR */
.sidebar {
    width:240px;
    background:#1E2A38;
    position:fixed;
    height:100vh;
    top:0;
    left:0;
    color:white;
    padding-top:20px;
    z-index:1000;
    overflow-y: auto;
}
.sidebar-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 20px 25px 20px;
}
.logo {
    width:42px;
}
.title {
    font-size:18px;
    font-weight:600;
}

.menu {
    display:block;
    padding:14px 20px;
    color:#d0d6dd;
    text-decoration:none;
    font-size:15px;
    transition:0.15s;
}
.menu i {
    margin-right:10px;
    font-size:18px;
}
.menu:hover {
    background:#2a3a50;
    color:white;
}
.menu.active {
    background:#0d6efd;
    color:white;
}

/* MAIN AREA */
.main {
    margin-left:240px;
    min-height:100vh;
    position: relative;
    overflow-x: hidden;
}

/* TOPBAR */
.topbar {
    background:white;
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 25px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    position: sticky;
    top:0;
    z-index: 999;
}
.pg-title {
    font-size:20px;
    font-weight:600;
}
.user-info {
    display:flex;
    align-items:center;
    gap:8px;
}

/* CONTENT AREA */
.content-area {
    padding:25px;
    min-height: calc(100vh - 60px);
    position: relative;
}

/* KPI TILES */
.kpi-box {
    padding:20px;
    border-radius:12px;
    color:white;
    box-shadow:0px 3px 10px rgba(0,0,0,0.12);
    text-align:center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s;
}
.kpi-box:hover {
    transform: translateY(-2px);
}
.kpi-number {
    font-size:32px;
    font-weight:700;
}
.kpi-label {
    font-size:14px;
    opacity:0.9;
}

/* CARDS */
.card-pro {
    background:white;
    padding:20px;
    border-radius:14px;
    box-shadow:0 3px 10px rgba(0,0,0,0.10);
    height: 100%;
    overflow: hidden;
}

/* Chart containers */
.chart-wrapper {
    position: relative;
    height: 250px;
    width: 100%;
    margin-top: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .main {
        margin-left: 0;
    }
    .content-area {
        padding: 15px;
    }
}