/* ═══════════════════════════════════════════════════════════════
   TEACHER PORTAL — SHARED RESPONSIVE LAYER
   Loaded last on every teacher page with <body class="ui-teacher">
   (after portal-ui.css). Like admin-responsive.css, it only adjusts
   layout: sizing, stacking and scrolling. Colors and styling stay
   owned by the page.

   Checked against the Chrome DevTools devices: phones 360–440px wide
   (and turned sideways), Galaxy Z Fold 6 / Pixel 9 Pro Fold opened,
   iPad Mini, iPad Pro 13, Surface Pro 10 and Nest Hub Max.
   ═══════════════════════════════════════════════════════════════ */

/* clip (not hidden) so the sticky topbar keeps working */
html,
body.ui-teacher {
    max-width: 100%;
    overflow-x: clip;
}

/* iPhone/iPad: stop Safari from enlarging text when turned sideways */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ui-teacher img,
.ui-teacher video,
.ui-teacher canvas,
.ui-teacher iframe {
    max-width: 100%;
}

/* The main column sits beside the fixed sidebar in a flex row. Without this it
   refused to get narrower than its widest card and pushed the page past the
   right edge (tablets, opened foldables and phones). */
.ui-teacher .main,
.ui-teacher .content,
.ui-teacher .main-content {
    min-width: 0;
}

/* Long class names, titles and emails wrap instead of widening the page */
.ui-teacher :where(h1, h2, h3, h4, .topbar-title, .header-panel h2, .item-title, .module-title, .student-name) {
    overflow-wrap: anywhere;
}

/* Tables scroll sideways inside their card instead of stretching the page */
.ui-teacher :where(.table-wrap, .table-container, .table-responsive, .table-responsive-wrapper, .data-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Search boxes: fill the space they have instead of a fixed 220px input */
.ui-teacher .search-box {
    min-width: 0;
    max-width: 100%;
}

.ui-teacher .search-box input {
    width: 100%;
    min-width: 0;
}

/* Modals never wider or taller than the screen */
.ui-teacher .modal-box {
    max-width: calc(calc(100 * var(--ds-vw, 1vw)) - 24px);
    max-height: calc(calc(100 * var(--ds-dvh, 1dvh)) - 24px);
    overflow-y: auto;
}

/* ── Class pages: tab strip, module / topic rows, stat cards ── */
@media (max-width: 1100px) {
    /* All tabs stay visible: they wrap onto a second line instead of hiding off the edge */
    .ui-teacher .simple-tabs {
        flex-wrap: wrap !important;
    }

    .ui-teacher .simple-tabs .s-tab {
        flex: 1 1 auto !important;
    }

    /* A row keeps its title and text; its buttons move under it when they do not fit */
    .ui-teacher .list-item {
        flex-wrap: wrap !important;
    }

    .ui-teacher .list-item > .list-details {
        flex: 1 1 260px !important;
        margin-right: 0 !important;
    }

    /* The buttons of a row (on the Class Modules page, the materials block below them is skipped) */
    .ui-teacher .list-item > :not(.list-details):not(.module-materials) {
        flex-wrap: wrap;
        flex-shrink: 1 !important;
        max-width: 100%;
    }

    .ui-teacher #pro-stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui-teacher .list-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ui-teacher .list-item > .list-details {
        flex-basis: auto !important;
    }
}

/* ── Phones and small tablets: the sidebar becomes the ☰ menu (≤ 768px) ── */
@media (max-width: 768px) {
    /* The topbar keeps the ☰ button and the title; extra widgets wrap under it */
    .ui-teacher .topbar {
        gap: 10px;
        min-width: 0;
    }

    .ui-teacher .topbar > :first-child {
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .ui-teacher .topbar-title {
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* The ☰ button must show whenever the sidebar is hidden (Settings had an inline
       display:none that kept it hidden, leaving no way to the other pages on a phone) */
    .ui-teacher .menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .ui-teacher .topbar {
        padding: 0 12px;
    }

    .ui-teacher .modal-box {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}