/*
 * Phone & tablet layout for the teacher portal (and anything else that uses
 * .adminPortalMainContent). Loaded on every page from includes/head-scripts.php
 * together with /js/mobile.js.
 *
 * Under 900px wide:
 *   - the left menu turns into a "Menu" button at the top that opens/closes it
 *   - the page content uses the full screen width
 *   - wide tables scroll sideways inside their own box instead of pushing the
 *     whole page off the screen (mobile.js wraps them in .m-table-scroll)
 * Under 700px wide:
 *   - tables marked class="mobile-cards" turn into one card per row, each value
 *     labeled with its column name (mobile.js copies the labels in)
 *
 * Selectors start with "body" so they win over admin.css / page styles that
 * load later with the same specificity.
 */

/* Hidden on desktop. */
.m-menu-toggle { display: none; }

@media (max-width: 900px) {
    body main.admin {
        padding: 10px;
        max-width: 100%;
    }
    body .admin-header-logo { padding: 8px 0; }
    body .admin-logo { height: 46px; }

    body .adminPortalMainContent {
        display: block;
        width: 100%;
    }

    /* Menu: full width, collapsed behind a button. */
    body .adminPortalMenu {
        width: 100%;
        border-radius: 12px 12px 0 0;
        background: #43b9ee;
    }
    body .m-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        background: transparent;
        color: #fff;
        font: 700 17px "League Spartan", Arial, sans-serif;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
    }
    body .m-menu-toggle .m-menu-icon { font-size: 22px; line-height: 1; }
    body .adminPortalMenu > ul { display: none; padding: 0 14px 14px; margin: 0; }
    body .adminPortalMenu.m-open > ul { display: block; }

    /* Content: full width. */
    body .adminPortalOptions {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 14px 60px;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
    }
    body .adminPortalOptions h2,
    body .adminSectionHeading {
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
        margin: 0 0 8px;
    }
    body .adminHeadingWrapper > h2,
    body .adminHeadingWrapper > .adminSectionHeading { flex: 1 1 100%; }
    /* Page title rows (title + buttons side by side): stack them. */
    body .adminPortalOptions div:has(> .adminHeadingWrapper) {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 8px;
    }
    body .adminPortalOptions .adminHeadingWrapper { flex: 1 1 100%; }
    body .adminHeadingWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    /* Rows of buttons and settings wrap instead of running off the edge. */
    body .mass-actions-container,
    body .adminPortalOptions .inside-action,
    body .adminPortalOptions .button-row,
    body .adminPortalOptions .actions,
    body .adminPortalOptions .setting-row,
    body .adminPortalOptions .grade-entries,
    body .adminPortalOptions [style*="display: flex"],
    body .adminPortalOptions [style*="display:flex"] {
        flex-wrap: wrap;
        gap: 8px;
    }
    body .adminPortalOptions .inside-action { display: flex; }
    body .adminPortalOptions .setting-label { flex: 1 1 100%; padding-right: 0; }
    body .adminPortalOptions .setting-control { max-width: 100%; }
    body .adminPortalOptions .setting-input { max-width: 100%; box-sizing: border-box; }

    /* Wide tables scroll inside their own box. */
    body .m-table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 14px;
    }
    body .m-table-scroll > table { margin-top: 0; }

    /* Forms and pop-ups fit the screen. */
    body .adminPortalOptions input[type=text],
    body .adminPortalOptions input[type=email],
    body .adminPortalOptions input[type=number],
    body .adminPortalOptions input[type=date],
    body .adminPortalOptions select,
    body .adminPortalOptions textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
    body .modal-content {
        width: 94% !important;
        max-width: 94% !important;
        margin: 8% auto !important;
        box-sizing: border-box;
    }
    body .adminPortalOptions img { max-width: 100%; height: auto; }
}

/* ---- Card layout for tables marked class="mobile-cards" ---- */
@media (max-width: 700px) {
    /* No !important on display, so rows a filter hides (style="display:none") stay hidden. */
    body .adminPortalOptions table.mobile-cards,
    body .adminPortalOptions table.mobile-cards tbody,
    body .adminPortalOptions table.mobile-cards tr {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    body table.mobile-cards td {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }
    body table.mobile-cards { border: 0; background: transparent; box-shadow: none; }
    body table.mobile-cards thead,
    body table.mobile-cards tr.m-head-row { display: none !important; }
    body table.mobile-cards tbody tr,
    body .myStudentsWrapper table.mobile-cards tbody tr,
    body .myStudentsWrapper table.mobile-cards tr:nth-of-type(even) {
        background: #fff;
        border: 1px solid #dfe5ea;
        border-radius: 10px;
        margin: 0 0 12px !important;
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    body table.mobile-cards td,
    body .myStudentsWrapper table.mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0 !important;
        text-align: right !important;
        border: 0 !important;
        border-bottom: 1px solid #f0f3f5 !important;
        min-height: 0;
    }
    body table.mobile-cards td:last-child { border-bottom: 0 !important; }
    body table.mobile-cards td[data-label]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6b7a86;
        text-align: left;
        flex: 0 0 auto;
    }
    /* Columns with no header text (checkboxes, buttons) need no label. */
    body table.mobile-cards td[data-label=""]::before { content: none; }
    /* The first column with a name reads as the card's title. */
    body table.mobile-cards td.m-card-title {
        display: block;
        text-align: left !important;
        font-weight: 700;
        font-size: 16px;
    }
    body table.mobile-cards td.m-card-title::before { content: none; }
    /* Action buttons: full-width row at the bottom of the card. */
    body table.mobile-cards td.m-card-actions {
        display: block;
        text-align: left !important;
    }
    body table.mobile-cards td.m-card-actions::before { content: none; }
    body table.mobile-cards td.m-card-actions > div {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
    }
    body table.mobile-cards td.m-card-actions > div > a,
    body table.mobile-cards td.m-card-actions > div > button {
        flex: 1;
        text-align: center;
        padding: 10px 12px !important;
    }
}

/* ---- Student pages: top menu and first-visit pop-up ---- */
@media (max-width: 700px) {
    body .nav-wrap-inner { flex-wrap: wrap; gap: .6rem 1.2rem; }
    body .nav-link { font-size: 1rem; }
    body .firstVisitInner {
        width: 94%;
        box-sizing: border-box;
        padding: 20px 16px;
        margin-top: 60px;
        margin-bottom: 60px;
    }
    body .firstVisitInner input,
    body .firstVisitInner select { max-width: 100%; box-sizing: border-box; }
}