.page-container,
.container,
.wrapper,
.page,
.page-box {
    width: min(100% - 32px, 1100px);
    margin-inline: auto;
}

.page-container-sm,
.auth-container {
    width: min(100% - 32px, 440px);
    margin-inline: auto;
}

.page-container-lg,
.dashboard-container {
    width: min(100% - 32px, 1250px);
    margin-inline: auto;
}

.page-container-xl,
.exam-container {
    width: min(100% - 32px, 1440px);
    margin-inline: auto;
}

.page-main,
main {
    padding: var(--space-8) 0;
}

.page-header,
.topbar,
.recent-top,
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.navbar,
.admin-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.navbar nav,
.navbar .nav-right,
.admin-topnav,
.sidebar,
.admin-sidebar,
.student-sidebar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.sidebar,
.admin-sidebar,
.student-sidebar {
    align-items: stretch;
}

.cards,
.menu,
.exam-grid,
.subject-list,
.summary-grid {
    display: grid;
    gap: var(--space-5);
}

.cards,
.menu,
.exam-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dashboard-main,
.admin-main {
    width: min(100% - 32px, 1250px);
    margin-inline: auto;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .page-container,
    .page-container-sm,
    .page-container-lg,
    .page-container-xl,
    .dashboard-container,
    .auth-container,
    .exam-container,
    .container,
    .wrapper,
    .page,
    .page-box,
    .dashboard-main,
    .admin-main {
        width: min(100% - 24px, 100%);
    }

    .navbar,
    .admin-topnav,
    .topbar,
    .recent-top,
    .action-bar {
        align-items: stretch;
    }

    .navbar,
    .navbar .nav-right,
    .admin-topnav {
        justify-content: center;
    }
}