/* ====== GRID LAYOUT FOR admin and superuser dashboards ====== */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr; /* sidebar + main */
    grid-template-rows: 60px 1fr 80px; /* header, main, footer */
    grid-template-areas:
        "header header"
        "sidebar main"
        "sidebar widgets"
        "footer footer";
    height: 100vh;
    transition: grid-template-columns 0.3s ease;
}

    /* Collapsed state */
    .dashboard.collapsed {
        grid-template-columns: 60px 1fr; /* shrink sidebar */
    }

/* Grid areas */
.header {
    grid-area: header;
    background: #2c3e50;
    color: #fff;
}

.sidebar {
    grid-area: sidebar;
    background: #343a40;
    color: #fff;
    transition: width 0.3s;
}

.main {
    grid-area: main;
    background: #ecf0f1;
}

.widgets {
    grid-area: widgets;
    background: #dfe6e9;
}

.footer {
    grid-area: footer;
    background: #95a5a6;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr; /* one column */
        grid-template-rows: auto auto 1fr auto auto;
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "widgets"
            "footer";
    }

    .sidebar {
        width: 100%; /* full width on mobile */
    }
}