LAPTOP-FIRST RESPONSIVE FOUNDATION
   Primary targets: 1366x768, 1536x864, 1920x1080
   Loaded after page-level styles to stabilize layout consistency.
   ================================================================ */

.home-bg > main.main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.home-bg > main.main-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
}

/* Normalize common page wrappers used in app templates */
.users-container,
.subject-container,
.dashboard-container,
.questions-container,
.reports-container,
.exam-container {
    width: 100%;
    min-width: 0;
}

/* Reliable horizontal overflow behavior for data-heavy pages */
.subjects-table-container,
.table-container {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.subjects-table {
    min-width: 980px;
}

/* 1536 and below: compact, but still desktop-first */
@media (max-width: 1536px) {
    :root {
        --page-shell-side: 2rem;
    }

    .navbar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* 1366 laptop baseline */
@media (max-width: 1366px) {
    :root {
        --page-shell-side: 1.25rem;
        --page-shell-content-top: 0.75rem;
    }

    .navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main-menu > li {
        padding: 0.5rem 0.7rem;
        font-size: 0.84rem;
    }

    .users-table th,
    .users-table td,
    .subjects-table th,
    .subjects-table td {
        padding: 0.6rem 0.7rem;
    }
}

/* Small laptops / large tablets */
@media (max-width: 1200px) {
    :root {
        --page-shell-side: 1rem;
    }
}