body { 
    background-color: #f4f6f9; 
    overflow-x: hidden; 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Layout Wrapper */
.wrapper { 
    display: flex; 
    width: 100%; 
    align-items: stretch; 
    min-height: 100vh; 
}

/* Sidebar Styles */
#sidebar {
    min-width: 250px; 
    max-width: 250px;
    background: #212529; 
    color: #fff;
    transition: all 0.3s ease;
    z-index: 1000;
    
    /* Extension Fix: Full height and sticky */
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allows scrolling within sidebar if shortcuts get long */
}

/* Custom scrollbar for a cleaner look */
#sidebar::-webkit-scrollbar {
    width: 5px;
}
#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

#sidebar.collapsed {
    margin-left: -250px;
}

#sidebar .nav-link { 
    color: rgba(255, 255, 255, 0.75); 
    padding: 12px 20px; 
    transition: 0.2s; 
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#sidebar .nav-link:hover, #sidebar .nav-link.active { 
    color: #fff; 
    background: rgba(255,255,255,0.1); 
    border-radius: 6px; 
    margin: 0 10px; 
    padding: 12px 10px; 
}

.sidebar-header { 
    padding: 24px 20px; 
    background: #1a1d20; 
    font-weight: 700; 
    font-size: 1.25rem; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Main Content Styles */
#content { 
    width: 100%; 
    transition: all 0.3s; 
    display: flex; 
    flex-direction: column; 
}

.top-navbar { 
    background: #fff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); 
    padding: 10px 20px; 
}

.dashboard-content { 
    padding: 24px; 
    flex-grow: 1; 
}

/* KPI Cards */
.stat-card { 
    border: none; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.03); 
    transition: transform 0.2s; 
}

.stat-card:hover { 
    transform: translateY(-4px); 
}

.stat-icon { 
    width: 54px; 
    height: 54px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
}

/* Mobile Responsive adjustments */
@media (max-width: 768px) {
    #sidebar { 
        margin-left: -250px; 
        position: fixed; 
        height: 100vh; 
    }
    #sidebar.active { 
        margin-left: 0; 
        box-shadow: 4px 0 10px rgba(0,0,0,0.2);
    }
}