/* ==========================================================
   MERITZA CLASSES
   DASHBOARD MOBILE SYSTEM
   Savepoint 18.3 -> Mobile-only responsive layer

   IMPORTANT:
   Everything in this file is inside mobile media queries or
   dashboard-scoped selectors. Desktop/tablet-wide layouts are
   intentionally left untouched.
========================================================== */

/* ---------- Authenticated navbar ---------- */
@media (max-width: 991.98px) {
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-header {
        height: auto;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-navbar {
        min-height: 58px;
        height: auto;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-navbar .mc-container {
        min-height: 58px;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 8px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-navbar-logo {
        height: 31px;
        max-width: 150px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 9px;
        background: rgba(255,255,255,.06);
        box-shadow: none;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .navbar-toggler:focus {
        box-shadow: 0 0 0 2px rgba(212,175,55,.35);
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .navbar-toggler-icon {
        width: 19px;
        height: 19px;
        filter: invert(1);
    }

    /* navbar.css forces display:flex !important, so explicitly restore
       Bootstrap's mobile collapse behaviour here. */
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .navbar-collapse {
        display: none !important;
        width: 100%;
        flex-basis: 100%;
        padding-top: 8px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-navbar-actions {
        width: 100%;
        margin: 0;
        padding: 9px 0 0;
        border-top: 1px solid rgba(255,255,255,.08);
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-nav-action {
        width: 100%;
        min-width: 0;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 6px !important;
        justify-content: center;
        font-size: 9px !important;
        gap: 5px;
        overflow: hidden;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-nav-action span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-icon-action,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-profile-link {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-profile-name {
        display: none;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-notification-wrap,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-profile-wrap {
        justify-self: center;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-profile-dropdown,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-notification-dropdown {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 575.98px) {
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-navbar-actions {
        grid-template-columns: 1fr 1fr auto auto;
    }
}

@media (max-width: 359.98px) {
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-navbar-actions {
        grid-template-columns: 1fr 1fr auto;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-navbar-actions .mc-dashboard-nav-action:nth-child(n+3) span {
        display: none;
    }
}

/* ---------- Shared mobile content ---------- */
@media (max-width: 767.98px) {
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) {
        overflow-x: hidden;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-student-module-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-parent-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-module-container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Keep headings compact and remove non-essential explanatory copy. */
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-section-heading p,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-student-module-heading p,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-module-heading p,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-parent-heading p,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-heading p,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-section-head p {
        display: none !important;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-student-module-heading,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-module-heading,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-parent-heading,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-heading {
        margin-bottom: 12px !important;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-student-module-heading h1,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-module-heading h1,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-parent-heading h1,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-heading h1 {
        font-size: clamp(21px, 6vw, 27px) !important;
        line-height: 1.12 !important;
    }

    /* Dashboard cards: one clean column, no cramped desktop grids. */
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-actions-grid,
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-two-column,
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-three-column,
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-four-column,
    body:has(.mc-parent-page) .mc-parent-grid,
    body:has(.mc-parent-page) .mc-parent-session-stats,
    body:has(.mc-admin-page) .mc-admin-card-grid,
    body:has(.mc-admin-page) .mc-admin-control-grid,
    body:has(.mc-admin-page) .mc-admin-control-actions {
        grid-template-columns: 1fr !important;
    }

    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-actions-grid {
        gap: 8px !important;
    }

    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-dashboard-action {
        min-width: 0;
        padding: 12px !important;
    }

    /* Welcome / hero blocks become compact. */
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-student-welcome,
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-tutor-welcome {
        padding-top: 14px !important;
        padding-bottom: 16px !important;
    }

    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-student-welcome h1,
    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-tutor-welcome h1 {
        font-size: clamp(24px, 8vw, 31px) !important;
        line-height: 1.12;
    }

    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-next-class {
        padding: 16px !important;
        min-height: 0 !important;
        border-radius: 14px;
    }

    body:has(.mc-student-dashboard, .mc-tutor-dashboard) .mc-next-class h2 {
        font-size: 18px !important;
        line-height: 1.2;
    }

    /* Buttons become thumb-friendly without becoming oversized. */
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-btn,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-primary-btn,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-join-btn {
        min-height: 36px;
    }

    /* Forms: one field per row and prevent iOS/browser overflow. */
    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page) .mc-form-grid,
    body:has(.mc-student-module-page, .mc-tutor-module-page) .mc-tutor-form-grid,
    body:has(.mc-admin-page) .mc-form-grid.three,
    body:has(.mc-admin-page) .mc-form-grid.two {
        grid-template-columns: 1fr !important;
    }

    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page) input,
    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page) select,
    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page) textarea {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Tables: preserve every value, but make them readable by horizontal
       scrolling instead of shrinking text into an unreadable strip. */
    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page, .mc-parent-sessions-page) .mc-data-table-wrap,
    body:has(.mc-student-module-page) .mc-notes-table-wrap,
    body:has(.mc-tutor-module-page) .mc-tutor-table-wrap,
    body:has(.mc-admin-page) .mc-admin-table-wrap,
    body:has(.mc-admin-page) .mc-table-wrap,
    body:has(.mc-parent-page, .mc-parent-sessions-page) .mc-parent-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body:has(.mc-student-module-page) .mc-data-table,
    body:has(.mc-tutor-module-page) .mc-tutor-table,
    body:has(.mc-admin-page) .mc-admin-table,
    body:has(.mc-parent-page, .mc-parent-sessions-page) .mc-parent-table {
        min-width: 620px;
    }

    /* Search/filter rows stack cleanly. */
    body:has(.mc-admin-page) .mc-live-filter,
    body:has(.mc-admin-page) .mc-tutor-live-searches,
    body:has(.mc-admin-page) .mc-tutor-filters,
    body:has(.mc-admin-page) .mc-session-summary-filters,
    body:has(.mc-admin-page) .mc-admin-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    body:has(.mc-admin-page) .mc-live-filter input,
    body:has(.mc-admin-page) .mc-live-filter select,
    body:has(.mc-admin-page) .mc-tutor-live-searches input,
    body:has(.mc-admin-page) .mc-tutor-filters input,
    body:has(.mc-admin-page) .mc-tutor-filters select {
        width: 100%;
        min-width: 0 !important;
    }

    /* Admin dashboard: compact status cards and action cards. */
    body:has(.mc-admin-control-page) .mc-admin-control-stats {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    body:has(.mc-admin-control-page) .mc-admin-stat {
        padding: 10px !important;
    }

    body:has(.mc-admin-control-page) .mc-admin-stat strong {
        font-size: 18px !important;
    }

    body:has(.mc-admin-control-page) .mc-admin-module-card {
        min-height: 0 !important;
        padding: 11px !important;
    }

    /* Admin tables/cards: never let a long detail cell force the viewport. */
    body:has(.mc-admin-page) td,
    body:has(.mc-admin-page) th {
        white-space: nowrap;
    }

    body:has(.mc-admin-page) .mc-admin-table-wrap,
    body:has(.mc-admin-page) .mc-table-wrap {
        border-radius: 10px;
    }

    /* Parent dashboard: keep the three primary sections concise. */
    body:has(.mc-parent-page) .mc-parent-hero,
    body:has(.mc-parent-page) .mc-parent-section-card {
        padding: 13px !important;
        border-radius: 13px;
    }

    body:has(.mc-parent-page) .mc-parent-session {
        padding: 11px !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body:has(.mc-parent-page) .mc-parent-join-btn {
        width: 100%;
        justify-content: center;
    }

    /* Chat pages: messages use the full available mobile width. */
    body:has(.mc-student-module-page, .mc-tutor-module-page, .mc-admin-page) .mc-chat-layout,
    body:has(.mc-admin-page) .mc-admin-chat-layout {
        grid-template-columns: 1fr !important;
    }

    body:has(.mc-admin-page) .mc-admin-chat-messages {
        height: min(56vh, 460px);
    }

    body:has(.mc-admin-page) .mc-admin-chat-message {
        max-width: 92%;
    }

    /* Footer: compact but still comfortable for touch. */
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-footer-inner {
        width: calc(100% - 24px) !important;
        padding: 14px 0 !important;
        gap: 7px !important;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-footer-links {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 399.98px) {
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-navbar .mc-container {
        width: calc(100% - 18px);
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-navbar-logo {
        height: 28px;
        max-width: 132px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-nav-action {
        font-size: 8px !important;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-nav-action i {
        font-size: 11px;
    }

    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-admin-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-dashboard-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-student-module-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-parent-container,
    body:has(.mc-student-dashboard, .mc-student-module-page, .mc-tutor-dashboard, .mc-tutor-module-page, .mc-parent-page, .mc-parent-sessions-page, .mc-admin-page) .mc-tutor-module-container {
        width: calc(100% - 18px) !important;
    }

    body:has(.mc-admin-page) .mc-admin-control-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}