/* =========================================
   1. RESET & CORE LAYOUT
   ========================================= */
* { 
    box-sizing: border-box; 
}

body {
    margin: 0; 
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    min-height: 100vh;
    background-color: #f4f6f9;
    /* Ensure body lets the window scroll */
    overflow-y: auto; 
}

/* =========================================
   2. SIDEBAR (Left Menu)
   ========================================= */
.sidebar {
    width: 260px;
    background-color: #2c3136; /* Dark Theme */
    color: #ecf0f1;
    display: flex;
    flex-direction: column; 
    flex-shrink: 0;
    transition: transform 0.3s ease;
    
    /* STICKY BEHAVIOR: Stays visible while main content scrolls */
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* --- Header --- */
.menu-header {
    background-color: #1a1d20;
    padding: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    border-bottom: 1px solid #3e444a;
    flex-shrink: 0;
}

/* --- Scrollable Menu Area --- */
.menu-content {
    flex-grow: 1; 
    overflow-y: auto; /* Internal scroll for menu if it's too long */
    overflow-x: hidden;
}

/* Category Headers */
.menu-category {
    padding: 20px 20px 5px 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #adb5bd; 
    font-weight: bold;
    letter-spacing: 1.2px;
    border-top: 1px solid #3e444a;
    margin-top: 5px;
}

.menu-category:first-child {
    border-top: none;
    margin-top: 0;
}

/* --- Menu Items --- */
.nav-group { 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #c2c7d0;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.menu-item:hover {
    background-color: #3e444a;
    color: #fff;
    border-left-color: #3498db; 
}

.menu-item .icon {
    width: 25px;
    text-align: center;
    margin-right: 10px;
    font-size: 1.1em;
}

.menu-item .label {
    flex-grow: 1;
}

.menu-item .arrow {
    font-size: 0.8em;
    opacity: 0.5;
}

/* --- Submenus --- */
.submenu { 
    background-color: #23272b; 
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
}

.submenu .menu-item { 
    padding-left: 55px; 
    font-size: 0.9em;
    border-left: none; 
}

/* --- Logout Section --- */
.logout-section {
    padding: 15px;
    background-color: #23272b;
    border-top: 1px solid #3e444a;
    flex-shrink: 0;
}

.logout-btn {
    background-color: #c0392b; 
    color: white !important;
    border-radius: 4px;
    justify-content: center;
    font-weight: bold;
    border-left: none;
}

.logout-btn:hover {
    background-color: #e74c3c; 
    border-left: none;
}

/* =========================================
   3. MAIN CONTENT WRAPPER (UPDATED)
   ========================================= */
.dashboard-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    overflow-x: hidden;
    
    /* CRITICAL CHANGE: Allow growth instead of fixed viewport height */
    min-height: 100vh; 
    height: auto;
    overflow-y: visible; /* Use browser scrollbar */
}

.db-header h1 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* =========================================
   4. LAYOUT REGIONS (Grid System)
   ========================================= */
.region-top {
    width: 100%;
    margin-bottom: 20px;
}

.content-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex: 1; /* Ensure it pushes footer down */
}

.region-main {
    flex: 3; 
    min-width: 0;
}

.region-right {
    flex: 1; 
    min-width: 280px;
}

.footer-wrapper {
    margin-top: auto;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: center;
    color: #777;
    font-size: 0.9em;
}

.region-top:empty,
.region-main:empty,
.region-right:empty {
    display: none;
}

/* =========================================
   5. RESPONSIVE / MOBILE
   ========================================= */
.mobile-header { display: none; } 

@media (max-width: 992px) {
    .content-columns { flex-direction: column; }
    .region-right { width: 100%; }
}

@media (max-width: 768px) {
    body { flex-direction: column; }
    
    .sidebar {
        position: fixed;
        left: -260px; 
        height: 100%;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }
    
    .sidebar.active {
        transform: translateX(260px); 
    }

    .mobile-header {
        display: flex;
        align-items: center;
        background: #2c3136;
        color: white;
        padding: 10px 20px;
    }
    
    #menu-toggle {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        margin-right: 15px;
    }

    .dashboard-wrapper { 
        padding: 15px; 
        height: auto; 
    }
}