/* Facebook-inspired mobile shell — portrait-first, max-width 991.98px only */

:root {
    --m-topbar-height: 52px;
    --m-impersonation-banner-height: 0px;
    --m-canvas: #f0f2f5;
    --m-card-bg: #ffffff;
    --m-card-radius: 8px;
    --m-gutter: 8px;
    --m-text: 15px;
    --m-line: 1.35;
    --m-drawer-width: min(320px, 88vw);
    --m-touch: 40px;
    --m-card-pad: 0.75rem;
    --m-header-pad: 0.65rem 0.85rem;
}

@media (max-width: 991.98px) {
    body.m-shell:has(.impersonation-banner) {
        --m-impersonation-banner-height: 44px;
        padding-top: calc(var(--m-topbar-height) + var(--m-impersonation-banner-height) + env(safe-area-inset-top, 0px));
    }

    body.m-shell:has(.impersonation-banner) .m-topbar {
        top: var(--m-impersonation-banner-height);
    }

    .impersonation-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050;
    }

    body.m-shell {
        background: var(--m-canvas) !important;
        font-size: var(--m-text);
        line-height: var(--m-line);
        padding-top: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px));
        overflow-x: hidden;
    }

    body.m-shell.m-drawer-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Hide legacy desktop navbar on mobile */
    body.m-shell .navbar.navbar-desktop {
        display: none !important;
    }

    /* ---- Top bar ---- */
    .m-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        height: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding-left: max(var(--m-gutter), env(safe-area-inset-left, 0px));
        padding-right: max(var(--m-gutter), env(safe-area-inset-right, 0px));
    }

    .m-topbar-brand {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: #fff;
        text-decoration: none;
        flex-shrink: 0;
        min-width: 0;
    }

    .m-topbar-brand img {
        height: 34px;
        width: auto;
        object-fit: contain;
        background: transparent;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    }

    .m-topbar-brand-text {
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    .m-topbar-title {
        flex: 1;
        min-width: 0;
        text-align: center;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 0.25rem;
    }

    .m-topbar-actions {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        flex-shrink: 0;
    }

    .m-topbar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #fff;
        border-radius: 50%;
        font-size: 1.15rem;
        position: relative;
        text-decoration: none;
        padding: 0;
    }

    .m-topbar-btn:active {
        background: rgba(255, 255, 255, 0.15);
    }

    .m-topbar-btn .badge-dot {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.65rem;
        line-height: 16px;
        border-radius: 999px;
        background: #e41e3f;
        color: #fff;
        font-weight: 700;
    }

    .m-topbar .window-pill {
        font-size: 0.65rem;
        padding: 0.2rem 0.45rem;
    }

    /* ---- Drawer ---- */
    .m-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .m-drawer-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .m-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        width: var(--m-drawer-width);
        max-width: 100%;
        background: #fff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .m-drawer.is-open {
        transform: translateX(0);
    }

    .m-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e4e6eb;
        background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
        color: #fff;
    }

    .m-drawer-user {
        min-width: 0;
    }

    .m-drawer-user-name {
        font-weight: 600;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-drawer-user-sub {
        font-size: 0.75rem;
        opacity: 0.9;
    }

    .m-drawer-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .m-drawer-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0;
    }

    .m-drawer-section {
        padding: 0.35rem 0.75rem 0.15rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #65676b;
    }

    .m-drawer-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 1rem;
        color: #050505;
        text-decoration: none;
        font-size: 0.9375rem;
        font-weight: 500;
        min-height: 44px;
        border-left: 3px solid transparent;
    }

    .m-drawer-link i {
        width: 1.25rem;
        text-align: center;
        color: #65676b;
        font-size: 1rem;
    }

    .m-drawer-link:hover,
    .m-drawer-link:focus {
        background: #f0f2f5;
        color: #050505;
    }

    .m-drawer-link.is-active {
        background: #e7f3ff;
        border-left-color: #1877f2;
        color: #1877f2;
    }

    .m-drawer-link.is-active i {
        color: #1877f2;
    }

    .m-drawer-footer {
        border-top: 1px solid #e4e6eb;
        padding: 0.5rem 0.75rem 0.75rem;
    }

    .m-drawer-footer .m-drawer-link {
        color: #dc3545;
    }

    .m-drawer-footer .m-drawer-link i {
        color: #dc3545;
    }

    /* ---- Main content feed layout ---- */
    main.m-main {
        min-height: calc(100vh - var(--m-topbar-height) - 60px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    main.m-main > .container,
    main.m-main > .container-fluid,
    body.m-shell .container,
    body.m-shell .container-fluid {
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
        max-width: 100%;
    }

    body.m-shell .m-flash-wrap {
        padding: var(--m-gutter) var(--m-gutter) 0;
    }

    body.m-shell .m-flash-wrap .alert {
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        font-size: 0.875rem;
        padding: 0.65rem 0.85rem;
    }

    /* Feed-style cards */
    body.m-shell .card,
    body.m-shell .management-card,
    body.m-shell .dashboard-card,
    body.m-shell .module-card {
        border-radius: var(--m-card-radius) !important;
        border: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: var(--m-gutter);
        background: var(--m-card-bg);
    }

    body.m-shell .card-header {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.9rem !important;
        border-radius: var(--m-card-radius) var(--m-card-radius) 0 0 !important;
    }

    body.m-shell .card-body {
        padding: 0.75rem !important;
    }

    body.m-shell .management-card:hover,
    body.m-shell .dashboard-card:hover {
        transform: none;
    }

    body.m-shell .module-wrapper::before {
        display: none;
    }

    body.m-shell .module-wrapper {
        padding: var(--m-gutter) 0 1.5rem !important;
    }

    body.m-shell .dashboard-wrapper {
        background: var(--m-canvas) !important;
        padding: var(--m-gutter) 0 1.5rem !important;
        min-height: auto;
    }

    body.m-shell .dashboard-wrapper::before {
        display: none;
    }

    body.m-shell .dashboard-header {
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
    }

    body.m-shell .dashboard-header h1 {
        font-size: 1.25rem !important;
    }

    body.m-shell a:has(> .dashboard-card),
    body.m-shell a:has(> .course-card) {
        display: block;
        height: 100%;
    }

    body.m-shell .dashboard-card,
    body.m-shell .dashboard-card.h-100 {
        aspect-ratio: auto !important;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 0;
        padding: 0.5rem 0.4rem 0.45rem !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.2rem;
        border-radius: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.m-shell .dashboard-card .icon-circle {
        width: 30px;
        height: 30px;
        margin: 0 0 0.1rem !important;
        flex-shrink: 0;
        border-radius: 8px;
    }

    body.m-shell .icon-circle.icon-portrait {
        border-radius: 50% !important;
        overflow: hidden;
        padding: 0;
        background: #4c1d95;
    }

    body.m-shell .icon-circle.icon-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    body.m-shell:has(.socrates-chat-app) {
        overflow: hidden;
    }

    body.m-shell:has(.socrates-chat-app) .footer,
    body.m-shell:has(.socrates-chat-app) .ams-offline-dock {
        display: none !important;
    }

    body.m-shell:has(.socrates-chat-app) main.m-main {
        overflow: hidden;
        height: calc(100dvh - var(--m-topbar-height) - var(--m-impersonation-banner-height) - env(safe-area-inset-top, 0px));
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    body.m-shell:has(.socrates-chat-app) .m-flash-wrap {
        flex-shrink: 0;
    }

    body.m-shell:has(.socrates-chat-app) .socrates-chat-page {
        flex: 1;
        min-height: 0;
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    body.m-shell:has(.socrates-chat-app) .socrates-chat-app {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: auto;
    }

    body.m-shell .dashboard-card .icon-circle i {
        font-size: 0.8rem;
    }

    body.m-shell .dashboard-card h5,
    body.m-shell .dashboard-card .card-label {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.m-shell .dashboard-card p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.6rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        color: #6b7280 !important;
        max-width: 100%;
    }

    body.m-shell .student-dash-page .course-card,
    body.m-shell .student-dash-page .course-card.h-100 {
        aspect-ratio: auto !important;
        height: 100% !important;
        min-height: 0 !important;
        margin-bottom: 0;
        border-radius: 12px !important;
        overflow: hidden;
    }

    body.m-shell .student-dash-page .course-card .card-body {
        height: 100%;
        padding: 0.5rem 0.4rem 0.45rem !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.2rem;
    }

    body.m-shell .student-dash-page .course-card .icon-circle {
        width: 30px;
        height: 30px;
        margin: 0 !important;
        flex-shrink: 0;
    }

    body.m-shell .student-dash-page .course-card .card-title {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.m-shell .student-dash-page .sd-card-desc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.6rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    body.m-shell .admin-dash .admin-sort-card:not(.admin-sort-card-wide) .quick-link {
        aspect-ratio: 1 / 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.45rem;
        padding: 0.7rem 0.5rem 0.7rem 0.5rem !important;
        border-radius: 16px;
    }

    body.m-shell .admin-dash .admin-sort-card:not(.admin-sort-card-wide) .quick-link .qi {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    body.m-shell .admin-dash .admin-sort-card:not(.admin-sort-card-wide) .card-drag-handle {
        top: 6px;
        right: 4px;
    }

    body.m-shell:has(.admin-dash) {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    body.m-shell:has(.admin-dash) main.m-main {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 0;
    }

    body.m-shell:has(.admin-dash) .footer {
        margin-top: auto !important;
        flex-shrink: 0;
        padding: 0.65rem var(--m-gutter) !important;
        padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 0.7rem;
        line-height: 1.35;
        background-color: #0f172a !important;
    }

    body.m-shell:has(.admin-dash) .footer .container {
        gap: 0.2rem;
    }

    body.m-shell .admin-dash .admin-card-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    @media (orientation: landscape) {
        body.m-shell .admin-dash .admin-card-board {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        body.m-shell .admin-dash .admin-sort-card:not(.admin-sort-card-wide) .quick-link {
            aspect-ratio: 1 / 0.82;
        }
    }

    /* Class management session feed */
    body.m-shell .session-card,
    body.m-shell .class-session-item {
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
    }

    /* Curriculum sidebar stacks on top */
    body.m-shell .curriculum-sidebar {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        margin-bottom: var(--m-gutter);
    }

    body.m-shell .curriculum-main {
        width: 100% !important;
    }

    body.m-shell .module-wrapper .row.g-4 > [class*="col-lg-"] {
        margin-bottom: 0;
    }

    /* Tables */
    body.m-shell .table-responsive {
        border-radius: var(--m-card-radius);
        background: #fff;
        margin-bottom: var(--m-gutter);
    }

    body.m-shell .table th,
    body.m-shell .table td {
        font-size: 0.8rem;
        padding: 0.45rem 0.35rem;
    }

    body.m-shell .table-mobile-stack thead {
        display: none;
    }

    body.m-shell .table-mobile-stack tbody tr {
        display: block;
        background: #fff;
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        padding: 0.65rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        border: 1px solid #e4e6eb !important;
    }

    body.m-shell .table-mobile-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        border: none !important;
        padding: 0.35rem 0 !important;
        white-space: normal !important;
        text-align: right !important;
    }

    body.m-shell .table-mobile-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #65676b;
        font-size: 0.75rem;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
    }

    /* Modals — bottom sheet feel */
    body.m-shell .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        align-items: flex-end;
    }

    body.m-shell .modal-dialog-centered {
        align-items: center;
    }

    body.m-shell .modal-content {
        border-radius: 12px 12px 0 0;
    }

    body.m-shell .modal-dialog-centered .modal-content {
        border-radius: 12px;
    }

    /* Footer compact */
    body.m-shell .footer {
        margin-top: 1rem;
        padding: 0.75rem var(--m-gutter);
        font-size: 0.75rem;
    }

    /* Result management index */
    body.m-shell .rm-index-wrapper {
        padding: var(--m-gutter) 0 !important;
    }

    /* Notification dropdown on mobile topbar */
    body.m-shell .m-topbar .dropdown-menu {
        position: fixed !important;
        top: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px) + 4px) !important;
        left: var(--m-gutter) !important;
        right: var(--m-gutter) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    /* Login standalone mobile */
    body.m-auth-page {
        background: var(--m-canvas) !important;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--m-gutter);
    }

    body.m-auth-page .login-container {
        max-width: 400px;
        width: 100%;
    }

    body.m-auth-page .university-header .university-title,
    body.m-auth-page .university-header .university-subtitle {
        color: #050505;
        text-shadow: none;
    }

    body.m-auth-page .login-card,
    body.m-auth-page .card.shadow {
        border-radius: var(--m-card-radius);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    /* Class management session rows as feed cards */
    body.m-shell .cm-sessions-table thead {
        display: none;
    }

    body.m-shell .cm-sessions-table .session-row {
        display: block;
        background: #fff;
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        padding: 0.55rem 0.7rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        border: 1px solid #e4e6eb !important;
    }

    body.m-shell .cm-sessions-table .session-row td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        border: none !important;
        padding: 0.22rem 0 !important;
        white-space: normal !important;
        text-align: right !important;
        font-size: 0.82rem;
    }

    /* Hide serial # on mobile cards */
    body.m-shell .cm-sessions-table .session-row td:nth-child(1) {
        display: none;
    }

    body.m-shell .cm-sessions-table .session-row td:nth-child(2) {
        display: block;
        text-align: left !important;
        font-size: 0.92rem;
        padding-bottom: 0.4rem !important;
        border-bottom: 1px solid #f0f2f5 !important;
        margin-bottom: 0.2rem;
    }

    body.m-shell .cm-sessions-table .session-row td:nth-child(2)::before {
        content: none;
    }

    body.m-shell .cm-sessions-table .session-row td:nth-child(3)::before { content: "Code"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(4)::before { content: "Scope"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(5)::before { content: "Year"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(6)::before { content: "Term"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(7)::before { content: "Session"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(8)::before { content: "Batch"; }
    body.m-shell .cm-sessions-table .session-row td:nth-child(9)::before { content: "Created"; }

    body.m-shell .cm-sessions-table .session-row td::before {
        font-weight: 600;
        color: #65676b;
        font-size: 0.72rem;
        text-align: left;
        flex-shrink: 0;
    }

    body.m-shell .cm-sessions-table .session-row .badge {
        font-size: 0.72rem;
        padding: 0.28em 0.5em;
    }

    body.m-shell .module-header {
        padding: 0.6rem 0.7rem !important;
        margin-bottom: 0.55rem !important;
        border-radius: var(--m-card-radius) !important;
    }

    body.m-shell .cm-credit-load {
        margin-top: 0;
        padding: 0.12rem 0.5rem;
    }

    body.m-shell .cm-credit-load-label {
        font-size: 0.7rem;
    }

    body.m-shell .cm-credit-load-value {
        font-size: 0.78rem;
    }

    body.m-shell .module-header h4 {
        font-size: 1.05rem !important;
    }

    body.m-shell .module-header .m-action-row,
    body.m-shell .module-header .d-flex.flex-column.gap-2 {
        width: 100%;
        margin-top: 0 !important;
    }

    body.m-shell .module-header .btn {
        min-height: 34px;
        font-size: 0.78rem !important;
    }

    body.m-shell .module-wrapper {
        padding: 0.4rem 0 0.85rem !important;
        min-height: auto !important;
    }

    body.m-shell .cm-sessions-table .course-actions-row {
        display: block;
        margin-bottom: var(--m-gutter);
        border: none !important;
    }

    body.m-shell .cm-sessions-table .course-actions-row > td {
        display: block;
        padding: 0 !important;
        border: none !important;
    }

    body.m-shell .cm-sessions-table .course-actions-row .btn,
    body.m-shell .cm-sessions-table .course-actions-row a.btn {
        min-height: var(--m-touch);
        font-size: 0.78rem !important;
        margin: 0.15rem 0.1rem;
    }

    body.m-shell .cm-active-courses-section .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        border-radius: var(--m-card-radius) var(--m-card-radius) 0 0 !important;
    }

    body.m-shell .cm-active-courses-section .card-header .btn {
        min-height: var(--m-touch);
    }

    body.m-shell .cm-hero.module-header {
        padding: 0.55rem 0.65rem !important;
        margin-bottom: 0.45rem !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
    }

    body.m-shell .cm-hero h1,
    body.m-shell .cm-hero.module-header h1 {
        font-size: 1.05rem !important;
        color: #0f172a !important;
    }

    body.m-shell .cm-hero-actions {
        width: auto;
        gap: 0.3rem;
    }

    body.m-shell .cm-hero-actions .btn {
        flex: 0 1 auto;
        min-height: 30px;
    }

    body.m-shell .cm-chips {
        margin-top: 0.4rem;
    }

    body.m-shell .cm-course-card {
        padding: 0.3rem 0.4rem 0.3rem 0.5rem;
        gap: 0.25rem;
        cursor: pointer;
    }

    body.m-shell .cm-course-card:nth-child(odd) {
        background: #dbeafe !important;
    }

    body.m-shell .cm-course-card:nth-child(even) {
        background: #c5ccd6 !important;
    }

    body.m-shell .cm-course-card .cm-course-actions {
        display: none;
    }

    body.m-shell .cm-course-card.is-open .cm-course-actions {
        display: flex !important;
        justify-content: flex-start;
    }

    body.m-shell .cm-course-title {
        font-size: 0.8rem;
    }

    body.m-shell .cm-course-actions .btn,
    body.m-shell .cm-course-actions a.btn {
        min-height: 34px;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        padding: 0.36rem 0.65rem !important;
        color: #fff !important;
    }

    body.m-shell .cm-course-actions .btn-success {
        background: #22c55e !important;
        border-color: #22c55e !important;
    }

    body.m-shell .cm-course-actions .btn-warning {
        background: #f59e0b !important;
        border-color: #f59e0b !important;
    }

    body.m-shell .cm-course-actions .btn-primary {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
    }

    body.m-shell .cm-course-actions .btn-secondary {
        background: #a855f7 !important;
        border-color: #a855f7 !important;
    }

    body.m-shell .cm-search {
        max-width: none;
        width: 100%;
        margin-bottom: 0;
        position: relative;
    }

    body.m-shell .cm-search input,
    body.m-shell .att-search input {
        padding-left: 2.25rem !important;
        -webkit-appearance: none;
        appearance: none;
    }

    body.m-shell .cm-active-courses-section .card-body {
        padding: 0.4rem 0.45rem 0.5rem !important;
    }

    body.m-shell .cm-section-head {
        margin-bottom: 0.3rem;
        padding: 0 !important;
        flex-direction: row;
        align-items: center !important;
    }

    body.m-shell .cm-course-list {
        gap: 0.55rem;
    }

    body.m-shell .cm-course-level-title {
        font-size: 0.66rem;
        padding: 0.12rem 0.45rem;
    }

    body.m-shell .cm-course-group-title {
        font-size: 0.66rem;
    }

    body.m-shell .cm-external-section {
        margin-top: 0.6rem !important;
    }

    /* Dashboard 2-column module grid (portrait) */
    body.m-shell .dashboard-wrapper .row.g-3 > [class*="col-"],
    body.m-shell .dashboard-wrapper .row.g-4 > [class*="col-"],
    body.m-shell .row:has(.dashboard-card) > [class*="col-"],
    body.m-shell .sd-card-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    @media (orientation: landscape) {
        body.m-shell .dashboard-wrapper .row.g-3 > [class*="col-"],
        body.m-shell .dashboard-wrapper .row.g-4 > [class*="col-"],
        body.m-shell .row:has(.dashboard-card) > [class*="col-"],
        body.m-shell .sd-card-grid > [class*="col-"] {
            flex: 0 0 33.3333%;
            max-width: 33.3333%;
        }

        body.m-shell .dashboard-wrapper {
            padding-top: 0.35rem !important;
        }

        body.m-shell .dashboard-header {
            padding: 0.35rem 0 0.25rem;
            margin-bottom: 0.4rem;
        }

        body.m-shell .dashboard-header h1 {
            font-size: 1.05rem !important;
        }

        body.m-shell .cal-actions {
            grid-template-columns: 1fr 1fr 1fr;
        }

        body.m-shell .dashboard-header p {
            font-size: 0.75rem;
            margin-bottom: 0;
        }

        body.m-shell .dashboard-card,
        body.m-shell .dashboard-card.h-100 {
            padding: 0.45rem 0.35rem 0.4rem !important;
            gap: 0.15rem;
            border-radius: 10px !important;
        }

        body.m-shell .dashboard-card .icon-circle {
            width: 26px;
            height: 26px;
        }

        body.m-shell .dashboard-card .icon-circle i {
            font-size: 0.72rem;
        }

        body.m-shell .dashboard-card h5,
        body.m-shell .dashboard-card .card-label {
            font-size: 0.68rem !important;
        }

        body.m-shell .dashboard-card p {
            display: -webkit-box !important;
            -webkit-line-clamp: 2;
            font-size: 0.55rem !important;
        }

        body.m-shell .student-dash-page .course-card .card-body {
            padding: 0.45rem 0.35rem 0.4rem !important;
        }

        body.m-shell .student-dash-page .course-card .icon-circle {
            width: 26px;
            height: 26px;
        }

        body.m-shell .student-dash-page .course-card .card-title {
            font-size: 0.68rem !important;
        }

        body.m-shell .student-dash-page .sd-card-desc {
            display: -webkit-box !important;
            font-size: 0.55rem !important;
        }
    }

    body.m-shell .sidebar-wrapper {
        order: -1;
        margin-bottom: var(--m-gutter);
    }

    body.m-shell .content-wrapper.bg-light {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    body.m-shell.m-auth-page {
        padding-top: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px));
    }

    body.m-shell.m-auth-page .login-container,
    body.m-shell.m-auth-page .container > .row {
        width: 100%;
    }

    /* ========== MODULE-WIDE PAGE CHROME ========== */
    body.m-shell .container.mt-4,
    body.m-shell .container.mt-5 {
        margin-top: 0.5rem !important;
    }

    body.m-shell main.m-main > .container > .d-flex.justify-content-between,
    body.m-shell .container > .d-flex.justify-content-between.mb-3:first-child,
    body.m-shell .card-header.d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    body.m-shell .card-header .btn,
    body.m-shell .container > .d-flex.justify-content-between:not(.cal-page-head):not(.rem-page-head) .btn {
        width: 100%;
    }

    body.m-shell .module-card .card-header .d-flex.gap-2 {
        flex-wrap: wrap;
        width: 100%;
    }

    body.m-shell .module-card .card-header .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Action tile grid (evaluation hub, etc.) */
    body.m-shell .m-action-tile-grid,
    body.m-shell .row.g-3:has(.action-tile) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--m-gutter);
    }

    body.m-shell .m-action-tile-grid > [class*="col-"],
    body.m-shell .row.g-3:has(.action-tile) > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.m-shell .action-tile {
        min-height: 100px;
        padding: 0.65rem !important;
        border-radius: var(--m-card-radius);
    }

    body.m-shell .action-tile .tile-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    body.m-shell .action-tile h6 {
        font-size: 0.8rem;
    }

    body.m-shell .action-tile p {
        font-size: 0.7rem !important;
    }

    /* ========== Compact page chrome helpers ========== */
    body.m-shell .m-page-header,
    body.m-shell .card-header.m-page-header {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
        padding: var(--m-header-pad) !important;
    }

    body.m-shell .m-page-header .card-title,
    body.m-shell .m-page-header h5,
    body.m-shell .m-page-header h4 {
        font-size: 0.95rem !important;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        margin-bottom: 0 !important;
    }

    body.m-shell .m-page-header .badge {
        display: inline-block;
        margin: 0.25rem 0 0 !important;
        font-size: 0.72rem;
        font-weight: 600;
        vertical-align: middle;
    }

    body.m-shell .m-action-row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: stretch;
        width: 100%;
    }

    body.m-shell .m-action-row > .btn,
    body.m-shell .m-action-row > a.btn,
    body.m-shell .m-action-row > .r-btn,
    body.m-shell .m-action-row > a.r-btn {
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem !important;
        padding: 0.4rem 0.55rem !important;
        white-space: nowrap;
    }

    body.m-shell .m-action-row > .btn.m-action-full,
    body.m-shell .m-action-row > a.btn.m-action-full {
        flex: 1 1 100%;
    }

    body.m-shell .r-toolbar.m-page-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    body.m-shell .r-toolbar .r-progress {
        flex: 1 1 100%;
        width: 100%;
    }

    body.m-shell .m-switch-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.65rem;
        width: 100%;
    }

    body.m-shell .m-switch-grid > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    body.m-shell .m-switch-grid .form-check.form-switch {
        display: flex;
        align-items: center;
        min-height: var(--m-touch);
        padding-left: 2.6em;
        margin-bottom: 0;
        gap: 0.35rem;
    }

    body.m-shell .m-switch-grid .form-check-input {
        width: 2.4em;
        height: 1.25em;
        margin-top: 0;
        cursor: pointer;
    }

    body.m-shell .m-switch-grid .form-check-label {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    body.m-shell .m-switch-grid > .col-12,
    body.m-shell .m-switch-grid > .border-top {
        grid-column: 1 / -1;
    }

    body.m-shell .card-body {
        padding: var(--m-card-pad) !important;
    }

    body.m-shell .card-header {
        padding: var(--m-header-pad) !important;
    }

    /* Sticky first-column table scroll */
    body.m-shell .m-table-scroll-sticky,
    body.m-shell .table-responsive.m-table-scroll-sticky {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--m-card-radius);
        background: #fff;
        margin-bottom: var(--m-gutter);
        /* Scroll edge hint */
        background-image:
            linear-gradient(to right, #fff, #fff),
            linear-gradient(to right, #fff, #fff),
            linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent),
            linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    body.m-shell .m-table-scroll-sticky table th:first-child,
    body.m-shell .m-table-scroll-sticky table td:first-child,
    body.m-shell .table-responsive.m-table-scroll-sticky table th:first-child,
    body.m-shell .table-responsive.m-table-scroll-sticky table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
    }

    /* Freeze multiple leading columns when present */
    body.m-shell .m-table-scroll-sticky .freeze-col-1,
    body.m-shell .table-responsive.m-table-scroll-sticky .freeze-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 3;
    }

    body.m-shell .m-table-scroll-sticky .freeze-col-2,
    body.m-shell .table-responsive.m-table-scroll-sticky .freeze-col-2 {
        position: sticky !important;
        left: 36px !important;
        z-index: 3;
    }

    body.m-shell .m-table-scroll-sticky .freeze-col-3,
    body.m-shell .table-responsive.m-table-scroll-sticky .freeze-col-3 {
        position: sticky !important;
        left: 108px !important;
        z-index: 3;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
    }

    body.m-shell .m-table-scroll-sticky thead .freeze-col-1,
    body.m-shell .m-table-scroll-sticky thead .freeze-col-2,
    body.m-shell .m-table-scroll-sticky thead .freeze-col-3 {
        z-index: 4;
        background: #222 !important;
        color: #fff;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table thead th:first-child,
    body.m-shell .m-table-scroll-sticky .attendance-table tbody td:first-child {
        background: #f8f9fa;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table thead th {
        background: #222;
        color: #fff;
        font-size: 0.7rem;
        padding: 5px 3px;
        white-space: nowrap;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table td {
        padding: 5px 3px;
        font-size: 0.78rem;
    }

    /* Keep data-entry grids tabular — do not card-stack */
    body.m-shell .m-table-scroll-sticky table.table-sm,
    body.m-shell .m-table-scroll-sticky .attendance-table,
    body.m-shell .table-responsive.m-table-scroll-sticky table.table-sm {
        font-size: 0.78rem;
    }

    body.m-shell .m-table-scroll-sticky table.table-sm thead,
    body.m-shell .table-responsive.m-table-scroll-sticky table.table-sm thead {
        display: table-header-group !important;
    }

    body.m-shell .m-table-scroll-sticky table.table-sm tbody tr,
    body.m-shell .table-responsive.m-table-scroll-sticky table.table-sm tbody tr {
        display: table-row !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: inherit;
    }

    body.m-shell .m-table-scroll-sticky table.table-sm tbody td,
    body.m-shell .table-responsive.m-table-scroll-sticky table.table-sm tbody td {
        display: table-cell !important;
        border: 1px solid #dee2e6 !important;
        padding: 0.35rem 0.3rem !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.m-shell .m-table-scroll-sticky table.table-sm tbody td::before,
    body.m-shell .table-responsive.m-table-scroll-sticky table.table-sm tbody td::before {
        content: none !important;
        display: none !important;
    }

    /* Assessment marks grid — do not cap width on the dedicated page */
    body.m-shell .m-table-scroll-sticky .assessment-input-field {
        width: 100% !important;
        min-width: 56px !important;
        max-width: 72px !important;
        font-size: 16px !important;
        padding: 0.35rem 0.25rem !important;
        min-height: var(--m-touch) !important;
    }

    body.m-shell .m-table-scroll-sticky table.table-bordered td .d-flex,
    body.m-shell .m-table-scroll-sticky td .d-flex.flex-column,
    body.m-shell .m-table-scroll-sticky td .form-check {
        flex-direction: column;
        gap: 0.2rem;
        align-items: center;
        margin: 0;
        min-height: auto;
    }

    body.m-shell .m-table-scroll-sticky .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 0;
    }

    body.m-shell .m-table-scroll-sticky .form-check-label {
        font-size: 0.68rem;
        line-height: 1.2;
    }

    body.m-shell .table.table-bordered:not(.assessment-marks-table) th,
    body.m-shell .table.table-bordered:not(.assessment-marks-table) td {
        padding: 0.4rem 0.3rem !important;
        font-size: 0.78rem;
        white-space: normal;
        word-break: break-word;
    }

    body.m-shell .card.mb-3 .row.g-3 .col-md-3,
    body.m-shell .card.mb-3 .row.g-3 .col-md-6 {
        width: 100%;
    }

    body.m-shell .d-flex.gap-2.mt-3 {
        flex-direction: column;
    }

    body.m-shell .d-flex.gap-2.mt-3 .btn {
        width: 100%;
    }

    /* Exam evaluation card-stack tables (exclude sticky data grids) */
    body.m-shell .table.table-sm:not(.m-keep-table):not(.attendance-table):not(.assessment-marks-table) {
        font-size: 0.85rem;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) thead {
        display: none;
    }

    body.m-shell .m-table-scroll-sticky .table.table-sm thead,
    body.m-shell .table-responsive.m-table-scroll-sticky .table.table-sm thead {
        display: table-header-group !important;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr:not(.table-light) {
        display: block;
        border: 1px solid #e4e6eb;
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        padding: 0.65rem 0.75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    body.m-shell .m-table-scroll-sticky .table.table-sm tbody tr,
    body.m-shell .table-responsive.m-table-scroll-sticky .table.table-sm tbody tr {
        display: table-row !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr:not(.table-light) td {
        display: block;
        border: none !important;
        padding: 0.35rem 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body.m-shell .m-table-scroll-sticky .table.table-sm tbody td,
    body.m-shell .table-responsive.m-table-scroll-sticky .table.table-sm tbody td {
        display: table-cell !important;
        border: 1px solid #dee2e6 !important;
        padding: 0.35rem 0.3rem !important;
        white-space: nowrap !important;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr:not(.table-light) td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 0.15rem;
        color: #65676b;
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr:not(.table-light) td[data-label=""]::before,
    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr:not(.table-light) td:not([data-label])::before {
        content: none;
    }

    body.m-shell .m-table-scroll-sticky .table.table-sm tbody td::before,
    body.m-shell .table-responsive.m-table-scroll-sticky .table.table-sm tbody td::before {
        content: none !important;
        display: none !important;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr.table-light {
        display: block;
        border: none;
        padding: 0;
        margin-bottom: var(--m-gutter);
        background: transparent;
        box-shadow: none;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr.table-light td {
        display: block;
        border: none !important;
        padding: 0.35rem 0 !important;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr.table-light .d-flex {
        flex-direction: column;
        gap: 0.35rem;
    }

    body.m-shell .table.table-sm:not(.m-keep-table):not(.assessment-marks-table) tbody tr.table-light .btn {
        width: 100%;
    }

    /* Evaluation score tables */
    body.m-shell .evaluation-score-table {
        font-size: 0.8rem;
    }

    body.m-shell .evaluation-score-table input[type="radio"] {
        transform: scale(1.5);
        margin: 8px 6px;
    }

    /* Result management */
    body.m-shell .rm-index-wrapper,
    body.m-shell .rm-table-feed {
        padding: var(--m-gutter) 0 !important;
    }

    body.m-shell .rm-table-feed .table thead {
        display: none;
    }

    body.m-shell .rm-table-feed .table tbody tr {
        display: block;
        background: #fff;
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        padding: 0.65rem;
        border: 1px solid #e4e6eb !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    body.m-shell .rm-table-feed .table tbody td {
        display: flex;
        justify-content: space-between;
        border: none !important;
        padding: 0.3rem 0 !important;
        font-size: 0.8rem;
    }

    body.m-shell .rm-table-feed .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #65676b;
        font-size: 0.72rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    /* Routine timetable */
    body.m-shell .routine-table-container,
    body.m-shell .routine-table-wrapper,
    body.m-shell .timetable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.m-shell #subjects-sidebar {
        margin-bottom: var(--m-gutter);
        order: -1;
    }

    body.m-shell .timetable th,
    body.m-shell .timetable td {
        font-size: 0.7rem;
        min-width: 56px;
    }

    /* Academic calendar — compact action chips */
    body.m-shell .cal-wide-label {
        display: none;
    }

    body.m-shell .cal-page-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
        margin-bottom: 0.6rem !important;
    }

    body.m-shell .cal-page-head h2 {
        display: none;
    }

    body.m-shell .cal-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem !important;
        width: 100%;
    }

    body.m-shell .cal-actions > a.btn,
    body.m-shell .cal-actions > .btn,
    body.m-shell .cal-actions > .btn-group {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    body.m-shell .container > .cal-page-head .btn,
    body.m-shell .cal-actions .btn,
    body.m-shell .cal-actions > a.btn {
        width: auto !important;
        min-height: 34px;
        padding: 0.28rem 0.5rem !important;
        font-size: 0.76rem !important;
        font-weight: 600;
        line-height: 1.2;
        border-radius: 8px !important;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.m-shell .cal-actions > a.btn,
    body.m-shell .cal-actions > .btn {
        width: 100% !important;
    }

    body.m-shell .cal-actions > .btn-group {
        display: flex;
        overflow: visible;
        border-radius: 8px;
        position: relative;
        z-index: 1;
    }

    body.m-shell .cal-actions > .btn-group:has(.show) {
        z-index: 40;
    }

    body.m-shell .cal-actions > .btn-group .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        padding: 0.28rem 0.4rem !important;
        border-radius: 0 !important;
    }

    body.m-shell .cal-actions > .btn-group > .btn:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }

    body.m-shell .cal-actions > .btn-group > .dropdown-toggle-split {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

    body.m-shell .cal-actions .btn i,
    body.m-shell .cal-actions .btn .me-1,
    body.m-shell .cal-actions .btn .me-2 {
        margin-right: 0.28rem !important;
        font-size: 0.72rem;
    }

    body.m-shell .cal-actions .dropdown-toggle-split {
        flex: 0 0 2.15rem !important;
        min-width: 2.15rem !important;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
        z-index: 2;
    }

    body.m-shell .cal-actions .dropdown-menu {
        z-index: 1080;
        min-width: 13.5rem;
        margin-top: 0.25rem !important;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
        padding: 0.35rem;
        right: 0;
        left: auto;
    }

    body.m-shell .cal-actions .dropdown-item {
        font-size: 0.82rem;
        font-weight: 600;
        border-radius: 8px;
        padding: 0.5rem 0.65rem;
    }

    body.m-shell .calendar-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.65rem !important;
        padding-bottom: 0.55rem !important;
    }

    body.m-shell .calendar-nav {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
        gap: 0.3rem;
    }

    body.m-shell .calendar-nav .btn {
        width: 34px !important;
        min-width: 34px;
        min-height: 34px;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.m-shell .calendar-month-year {
        font-size: 0.95rem !important;
        flex: 1;
        text-align: center;
        min-width: 0;
    }

    body.m-shell .calendar-header > div:last-child {
        flex-shrink: 0;
    }

    body.m-shell .calendar-header > div:last-child .btn {
        min-height: 32px;
        padding: 0.22rem 0.65rem !important;
        font-size: 0.74rem !important;
        border-radius: 8px !important;
        width: auto !important;
        font-weight: 600;
    }

    body.m-shell .event-item-actions .btn {
        width: auto !important;
        min-height: 30px;
        padding: 0.15rem 0.45rem !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
    }

    body.m-shell .calendar-toolbar,
    body.m-shell .fc-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    body.m-shell .event-list-item,
    body.m-shell .list-group-item {
        border-radius: var(--m-card-radius);
        margin-bottom: 0.35rem;
    }

    /* Question bank */
    body.m-shell .qb-page {
        max-width: 100% !important;
        margin: 0.25rem auto 1.1rem !important;
        padding: 0 0.1rem 0.4rem !important;
    }

    body.m-shell .qb-page > .m-page-header,
    body.m-shell .qb-intro,
    body.m-shell .qb-papers-head,
    body.m-shell .qb-back-btn {
        display: none !important;
    }

    body.m-shell .qb-create-card {
        margin-bottom: 0.65rem !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    }

    body.m-shell .qb-create-card .card-header {
        padding: 0.65rem 0.8rem !important;
        font-size: 0.88rem;
    }

    body.m-shell .qb-papers-card {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body.m-shell .qb-papers-card > .card-body {
        padding: 0 !important;
    }

    body.m-shell .qb-shell {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    body.m-shell .qb-folder-tree {
        font-size: 0.85rem;
    }

    body.m-shell .qb-folder-meta.qb-hide-mobile,
    body.m-shell .qb-hide-mobile {
        display: none !important;
    }

    body.m-shell .qb-filter-bar {
        padding: 0.65rem 0.7rem !important;
        background: #fff;
        border-radius: 12px 12px 0 0;
    }

    body.m-shell .qb-filter-row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 0.4rem !important;
        margin: 0 !important;
    }

    body.m-shell .qb-filter-row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: unset;
        padding: 0 !important;
    }

    body.m-shell .qb-filter-folder {
        grid-column: 1 / -1;
    }

    body.m-shell .qb-filter-year {
        grid-column: 1;
    }

    body.m-shell .qb-filter-go {
        grid-column: 2;
    }

    body.m-shell .qb-filter-reset {
        grid-column: 1 / -1;
    }

    body.m-shell .qb-filter-row .btn,
    body.m-shell .qb-filter-row .form-control,
    body.m-shell .qb-filter-row .input-group,
    body.m-shell .qb-filter-row .input-group-text {
        min-height: 42px;
        font-size: 16px;
    }

    body.m-shell .qb-toolbar {
        padding: 0.5rem 0.65rem;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.45rem;
    }

    body.m-shell .qb-toolbar-left,
    body.m-shell .qb-toolbar-right {
        width: 100%;
    }

    body.m-shell .qb-toolbar-left {
        display: flex;
        gap: 0.35rem;
    }

    body.m-shell .qb-toolbar-left .btn {
        min-width: 42px;
        min-height: 42px;
    }

    body.m-shell .qb-breadcrumb {
        width: 100%;
        margin: 0;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    body.m-shell .qb-folder-dropzone.accordion-button {
        min-height: 48px;
        padding: 0.55rem 2.35rem 0.55rem 0.7rem !important;
        font-size: 0.9rem;
    }

    body.m-shell .qb-folder-label {
        max-width: none;
        font-size: 0.9rem;
    }

    body.m-shell .qb-folder-actions {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        gap: 0.35rem;
        padding: 0.5rem 0.65rem;
    }

    body.m-shell .qb-folder-actions .btn {
        min-height: 40px;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        font-weight: 600;
        font-size: 0.78rem;
    }

    body.m-shell .qb-select-all {
        margin-right: 0;
        min-height: 40px;
    }

    body.m-shell .qb-upload-wrap {
        padding: 0.65rem !important;
    }

    body.m-shell .qb-upload-toggle {
        width: 100%;
        min-height: 42px;
    }

    body.m-shell .qb-file {
        grid-template-columns: 24px 30px minmax(0, 1fr);
        grid-template-areas:
            "check icon body"
            "actions actions actions";
        gap: 0.45rem 0.55rem;
        padding: 0.75rem 0.7rem;
        align-items: start;
    }

    body.m-shell .qb-file-check-wrap { grid-area: check; padding-top: 0.35rem; }
    body.m-shell .qb-file-icon { grid-area: icon; }
    body.m-shell .qb-file-body { grid-area: body; }
    body.m-shell .qb-file-actions {
        grid-area: actions;
        width: 100%;
        justify-content: stretch;
    }

    body.m-shell .qb-file-actions .dropdown {
        flex: 0 0 auto;
    }

    body.m-shell .qb-dl {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 42px;
        font-weight: 600;
    }

    body.m-shell .qb-file-title {
        font-size: 0.92rem;
    }

    body.m-shell .qb-children {
        padding: 0.35rem 0.35rem 0.55rem 0.15rem !important;
        margin: 0 !important;
    }

    body.m-shell .qb-children > .accordion {
        margin-left: 0.35rem !important;
        padding-left: 0.4rem !important;
    }

    body.m-shell .qb-move-bar > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    body.m-shell .qb-move-bar .d-grid .btn {
        width: 100%;
        min-height: var(--m-touch);
    }

    body.m-shell .qb-tip {
        display: none;
    }

    /* Landscape phones: keep a compact two-pane browser feel */
    @media (orientation: landscape) {
        body.m-shell .qb-toolbar {
            flex-direction: row;
            align-items: center !important;
            flex-wrap: nowrap;
        }

        body.m-shell .qb-toolbar-left {
            width: auto;
            flex: 0 0 auto;
        }

        body.m-shell .qb-toolbar-right {
            flex: 1 1 auto;
            min-width: 0;
        }

        body.m-shell .qb-filter-row {
            grid-template-columns: minmax(0, 1.6fr) 7rem auto auto;
        }

        body.m-shell .qb-filter-folder,
        body.m-shell .qb-filter-year,
        body.m-shell .qb-filter-go,
        body.m-shell .qb-filter-reset {
            grid-column: auto;
        }

        body.m-shell .qb-file {
            grid-template-columns: 24px 30px minmax(0, 1fr) auto;
            grid-template-areas: "check icon body actions";
            align-items: center;
            padding: 0.5rem 0.7rem;
        }

        body.m-shell .qb-dl {
            min-height: 36px;
            flex: 0 0 auto;
            padding: 0.3rem 0.7rem;
        }

        body.m-shell .qb-dl-label {
            display: none;
        }

        body.m-shell .qb-folder-actions {
            display: flex;
            justify-content: flex-end;
        }

        body.m-shell .qb-folder-actions .btn {
            width: auto;
            min-height: 36px;
            padding: 0.25rem 0.65rem;
        }
    }

    /* Remuneration — readable mobile bill form */
    body.m-shell .rem-wide-label {
        display: none;
    }

    body.m-shell .container.rem-wrapper,
    body.m-shell .rem-wrapper {
        padding: 0 !important;
        margin-top: 0.35rem !important;
        max-width: 100%;
    }

    body.m-shell .rem-page-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        margin-bottom: 0.55rem !important;
    }

    body.m-shell .rem-page-head h2 {
        display: none;
    }

    body.m-shell .rem-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem !important;
        width: 100%;
    }

    body.m-shell .rem-actions .btn {
        width: 100% !important;
        min-height: 36px;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.76rem !important;
        font-weight: 600;
        border-radius: 8px !important;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: static;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    body.m-shell .rem-actions .btn i {
        margin-right: 0.28rem !important;
        font-size: 0.72rem;
    }

    body.m-shell .rem-sheet {
        padding: 0.7rem 0.7rem 1rem !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
        background: #fff;
    }

    body.m-shell .rem-heading {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 0.55rem;
        margin-bottom: 0.65rem;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid #eef2f7;
    }

    body.m-shell .rem-heading-logo img {
        height: 36px !important;
        max-height: 36px !important;
    }

    body.m-shell .rem-heading-content .text-muted,
    body.m-shell .rem-heading-content small {
        display: none;
    }

    body.m-shell .rem-heading h4 {
        font-size: 0.82rem !important;
        margin: 0 !important;
        font-weight: 700;
        color: #0f172a;
    }

    body.m-shell .rem-heading-content > div {
        font-size: 0.78rem !important;
        font-weight: 600;
        color: #475569;
        margin: 0 !important;
    }

    body.m-shell .meta-grid,
    body.m-shell .meta-grid tbody {
        display: block;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
        background: transparent;
    }

    body.m-shell .meta-grid tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.15rem 0.5rem;
        margin-bottom: 0.15rem;
    }

    body.m-shell .meta-grid td {
        display: block;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.2rem 0 !important;
        font-size: 0.82rem !important;
    }

    body.m-shell .meta-grid .meta-label {
        width: auto !important;
        background: none !important;
        color: #64748b;
        font-size: 0.68rem !important;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 0.45rem 0 0.1rem !important;
    }

    body.m-shell .meta-grid td:not(.meta-label) {
        background: #f8fafc;
        border: 1px solid #e8edf3 !important;
        border-radius: 8px;
        padding: 0.15rem 0.45rem !important;
    }

    body.m-shell .meta-grid input,
    body.m-shell .meta-grid select,
    body.m-shell .meta-grid .form-select {
        font-size: 16px !important;
        min-height: 40px;
        width: 100% !important;
        background: transparent !important;
        padding: 0.25rem 0.15rem !important;
    }

    body.m-shell .section-title {
        font-size: 0.82rem !important;
        font-weight: 700;
        margin: 0.85rem 0 0.5rem !important;
        color: #0f172a;
        letter-spacing: 0.01em;
    }

    body.m-shell .rem-table {
        table-layout: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0.35rem 0 0.75rem !important;
        font-size: 0.85rem;
        display: block;
        width: 100%;
    }

    body.m-shell .rem-table thead {
        display: none;
    }

    body.m-shell .rem-table tbody {
        display: block;
    }

    body.m-shell .rem-table tbody tr {
        display: block;
        border: 1px solid #e8edf3 !important;
        border-radius: 12px;
        margin-bottom: 0.55rem;
        padding: 0.7rem 0.75rem 0.55rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.m-shell .rem-table tbody tr:nth-child(even),
    body.m-shell .rem-table tbody tr:hover {
        background: #fff !important;
    }

    body.m-shell .rem-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        padding: 0.4rem 0 0.15rem !important;
        text-align: left !important;
        position: relative;
        min-height: 0;
        font-size: 0.85rem;
        font-weight: 500;
    }

    body.m-shell .rem-table tbody td:nth-child(1) {
        display: inline-block !important;
        width: auto !important;
        padding: 0 0.35rem 0.35rem 0 !important;
        font-weight: 800;
        color: #4f46e5;
        font-size: 0.8rem;
        min-width: 1.4rem;
    }

    body.m-shell .rem-table tbody td:nth-child(1):empty {
        display: none !important;
    }

    body.m-shell .rem-table tbody td:nth-child(2) {
        display: inline !important;
        width: auto !important;
        padding: 0 0 0.4rem !important;
        font-weight: 700;
        font-size: 0.88rem;
        color: #0f172a;
        line-height: 1.3;
    }

    body.m-shell .rem-table tbody td:nth-child(n+3)::before {
        display: block;
        margin-bottom: 0.22rem;
        font-weight: 700;
        font-size: 0.65rem;
        color: #64748b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    body.m-shell .rem-table tbody td:nth-child(3)::before { content: "কোর্স"; }
    body.m-shell .rem-table tbody td:nth-child(4)::before { content: "সংখ্যা"; }
    body.m-shell .rem-table tbody td:nth-child(5)::before { content: "অর্ধ / পূর্ণপত্র"; }
    body.m-shell .rem-table tbody td:nth-child(6)::before { content: "হার"; }
    body.m-shell .rem-table tbody td:nth-child(7)::before { content: "মোট টাকা"; }

    body.m-shell .rem-table tbody td:nth-child(3):not(:has(select)):not(:has(input)):not(:has(.course-section-container)) {
        display: none !important;
        padding: 0 !important;
    }

    body.m-shell .rem-table tbody td:has(> div[style*="visibility: hidden"]),
    body.m-shell .rem-table tbody td:has(> input[style*="visibility: hidden"]) {
        display: none !important;
    }

    body.m-shell .rem-table tbody td:nth-child(7) {
        margin-top: 0.25rem;
        padding-top: 0.45rem !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-weight: 700;
        color: #0f172a;
    }

    body.m-shell .rem-table tbody td > input,
    body.m-shell .rem-table tbody td > select,
    body.m-shell .rem-table .course-select,
    body.m-shell .rem-table .rate-select,
    body.m-shell .rem-table .section-select,
    body.m-shell .rem-table input[name^="quantity_"],
    body.m-shell .rem-table input[name^="paper_type_"],
    body.m-shell .rem-table input[name^="amount_"],
    body.m-shell .rem-table input[name^="rate_custom_"],
    body.m-shell .rem-table input[name^="course_custom_"] {
        width: 100% !important;
        max-width: 100%;
        min-height: 40px;
        font-size: 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0.35rem 0.55rem !important;
        background: #fff !important;
        box-sizing: border-box;
    }

    body.m-shell .rem-table input[name^="amount_"] {
        font-weight: 700;
        background: #f8fafc !important;
        color: #0f172a;
        text-align: right !important;
    }

    body.m-shell .course-section-item .d-flex {
        flex-wrap: wrap;
        gap: 0.35rem !important;
    }

    body.m-shell .course-select {
        flex: 1 1 100%;
        min-width: 0;
    }

    body.m-shell .section-select {
        width: 4.5rem !important;
        flex: 0 0 4.5rem;
        min-height: 40px;
    }

    body.m-shell .add-course-btn {
        min-width: 40px;
        min-height: 40px;
        border-radius: 8px !important;
    }

    body.m-shell .row4-calculation-item,
    body.m-shell #row3_calculations,
    body.m-shell #row4_calculations {
        justify-content: flex-start !important;
    }

    body.m-shell .row4-calculation-item input,
    body.m-shell #row3_calculations input {
        width: auto !important;
        min-width: 2.6rem;
        min-height: 34px !important;
        font-size: 0.85rem !important;
    }

    body.m-shell .rem-table tfoot,
    body.m-shell .rem-table tfoot tr {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    body.m-shell .rem-table tfoot {
        display: flex;
        width: 100%;
        background: #0f172a;
        color: #fff;
        border-radius: 12px;
        padding: 0.7rem 0.9rem;
        margin: 0.35rem 0 0.75rem;
        box-sizing: border-box;
    }

    body.m-shell .rem-table tfoot th {
        display: block;
        width: auto !important;
        background: transparent !important;
        color: #fff !important;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 0.78rem;
        font-weight: 600;
    }

    body.m-shell .rem-table tfoot th input,
    body.m-shell .rem-table tfoot #total_amount {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 1.15rem !important;
        font-weight: 800;
        text-align: right !important;
        min-height: 0;
        padding: 0 !important;
        width: 8rem !important;
    }

    body.m-shell .foot-table,
    body.m-shell .foot-table tbody,
    body.m-shell .foot-table tr {
        display: block;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }

    body.m-shell .foot-table td {
        display: block;
        width: 100% !important;
        border: none !important;
        padding: 0.2rem 0 !important;
        background: none !important;
        font-size: 0.78rem;
    }

    body.m-shell .foot-table input {
        min-height: 40px;
        font-size: 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        padding: 0.35rem 0.55rem !important;
        margin-top: 0.2rem;
    }

    body.m-shell .bank-declaration {
        font-size: 0.78rem;
        line-height: 1.45;
        padding: 0.7rem;
        border-radius: 10px;
        border-color: #e2e8f0;
        background: #f8fafc;
    }

    body.m-shell .bank-declaration input {
        display: inline-block;
        min-width: 8rem;
        min-height: 36px;
        font-size: 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px;
        padding: 0.2rem 0.4rem;
        background: #fff;
    }

    body.m-shell .revenue-ticket {
        display: none;
    }

    body.m-shell .signature-section,
    body.m-shell .controller-signature-section,
    body.m-shell .finance-signature-section,
    body.m-shell .audit-approval-section {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.4rem !important;
        margin-top: 0.5rem;
        margin-bottom: 0.65rem;
    }

    body.m-shell .signature-box,
    body.m-shell .controller-signature-box,
    body.m-shell .finance-signature-box,
    body.m-shell .audit-signature-box-single {
        min-height: 0 !important;
        padding: 0.55rem 0.65rem !important;
        border-radius: 10px;
        border-color: #e2e8f0 !important;
        background: #fafbfc;
        font-size: 0.78rem;
    }

    body.m-shell .signature-box span {
        margin-top: 0.35rem;
        padding-top: 0.3rem;
        font-size: 0.7rem;
        color: #64748b;
        border-top-color: #e2e8f0;
    }

    body.m-shell .info-note,
    body.m-shell .finance-release-note,
    body.m-shell .audit-approval-text {
        font-size: 0.75rem;
        line-height: 1.4;
        color: #475569;
    }

    body.m-shell .controller-sign-input,
    body.m-shell .finance-sign-input,
    body.m-shell .audit-sign-input,
    body.m-shell .finance-amount-input,
    body.m-shell .finance-amount-words-input,
    body.m-shell .audit-amount-input {
        min-height: 36px;
        font-size: 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        width: 100%;
        max-width: 100%;
    }

    body.m-shell .forms-container {
        padding: 0.4rem 0 1rem !important;
        max-width: 100%;
    }

    body.m-shell .forms-container .page-header h1 {
        display: none;
    }

    body.m-shell .filter-tabs {
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #e8edf3;
    }

    body.m-shell .filter-tab {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    body.m-shell .forms-table thead {
        display: none;
    }

    body.m-shell .forms-table tbody tr {
        display: block;
        border: 1px solid #e8edf3;
        border-radius: 12px;
        margin-bottom: 0.55rem;
        padding: 0.7rem 0.8rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.m-shell .forms-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        border: none !important;
        padding: 0.22rem 0 !important;
        text-align: left !important;
        font-size: 0.82rem;
    }

    body.m-shell .forms-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.68rem;
        color: #64748b;
        flex: 0 0 5.5rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding-top: 0.15rem;
    }

    body.m-shell .forms-table tbody td[data-label="Actions"] {
        display: block;
        padding-top: 0.5rem !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 0.35rem;
    }

    body.m-shell .forms-table tbody td[data-label="Actions"]::before {
        display: none;
    }

    body.m-shell .forms-table .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        width: 100%;
    }

    body.m-shell .forms-table .btn-action {
        flex: 1 1 calc(50% - 0.35rem);
        min-height: 36px;
        text-align: center;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body.m-shell .forms-container .page-header .btn {
        min-height: 36px;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: 8px;
    }

    @media (orientation: landscape) {
        body.m-shell .rem-wrapper .rem-actions {
            grid-template-columns: repeat(4, 1fr);
        }

        body.m-shell .meta-grid tr {
            grid-template-columns: auto 1fr auto 1fr;
            align-items: center;
            gap: 0.25rem 0.55rem;
            margin-bottom: 0.35rem;
        }

        body.m-shell .meta-grid .meta-label {
            padding: 0.15rem 0 !important;
            white-space: nowrap;
        }

        body.m-shell .rem-table tbody {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        body.m-shell .rem-table tbody tr {
            margin-bottom: 0;
        }

        body.m-shell .signature-section,
        body.m-shell .controller-signature-section,
        body.m-shell .finance-signature-section,
        body.m-shell .audit-approval-section {
            grid-template-columns: 1fr 1fr !important;
        }

        body.m-shell .forms-table .action-buttons {
            flex-wrap: nowrap;
        }
    }

    /* মোট পারিতোষিক modal — mobile sheet */
    body.m-shell #teacherGrandTotalModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        align-items: flex-end;
    }

    body.m-shell #teacherGrandTotalModal .modal-content {
        border: none;
        border-radius: 18px 18px 0 0;
        max-height: 94dvh;
        min-height: min(88dvh, 940px);
        display: flex;
        flex-direction: column;
        background: #f4f6f9;
    }

    body.m-shell #teacherGrandTotalModal .modal-header {
        padding: 0.7rem 0.9rem;
        border: none;
        background: var(--theme-gradient, linear-gradient(135deg, #4f46e5, #1d4ed8)) !important;
        border-radius: 18px 18px 0 0;
        align-items: center;
    }

    body.m-shell #teacherGrandTotalModal .modal-title {
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-title-full {
        display: none;
    }

    body.m-shell #teacherGrandTotalModal .gt-title-short {
        display: inline;
    }

    body.m-shell #teacherGrandTotalModal .modal-body {
        padding: 0.75rem 0.8rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }

    body.m-shell #teacherGrandTotalModal .modal-footer {
        display: none;
    }

    body.m-shell #teacherGrandTotalModal .gt-hint-full {
        display: none;
    }

    body.m-shell #teacherGrandTotalModal .gt-hint-short {
        display: block;
        margin: 0 0 0.7rem;
        font-size: 0.72rem;
        color: #64748b;
        line-height: 1.35;
    }

    body.m-shell #teacherGrandTotalModal .gt-toolbar {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 14px;
        padding: 0.7rem 0.75rem 0.75rem;
        margin-bottom: 0.65rem !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.m-shell #teacherGrandTotalModal .gt-toolbar .form-label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 0.3rem;
        letter-spacing: 0.02em;
    }

    body.m-shell #teacherGrandTotalModal .gt-toolbar .form-select {
        font-size: 16px !important;
        min-height: 44px;
        border-radius: 10px;
        border-color: #e2e8f0;
        margin-bottom: 0.55rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem !important;
    }

    body.m-shell #teacherGrandTotalModal .gt-toolbar-actions .btn {
        width: 100%;
        min-height: 40px;
        font-size: 0.8rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 0.4rem 0.5rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-status {
        border: none !important;
        background: #eef2ff !important;
        color: #3730a3;
        border-radius: 10px;
        padding: 0.5rem 0.7rem;
        font-size: 0.75rem;
        margin-bottom: 0.65rem !important;
        line-height: 1.35;
    }

    body.m-shell #teacherGrandTotalModal .gt-totals {
        display: grid;
        grid-template-columns: 1fr 1fr 1.15fr;
        gap: 0.4rem;
        margin-bottom: 0.7rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 12px;
        padding: 0.5rem 0.45rem 0.55rem;
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        min-width: 0;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.m-shell #teacherGrandTotalModal .gt-chip span {
        font-size: 0.62rem;
        font-weight: 700;
        color: #64748b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip strong {
        font-size: 0.72rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.25;
        word-break: break-word;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip small {
        font-size: 0.65rem;
        color: #64748b;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip-vat strong {
        color: #b91c1c;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip-net {
        background: #ecfdf5;
        border-color: #a7f3d0;
    }

    body.m-shell #teacherGrandTotalModal .gt-chip-net span,
    body.m-shell #teacherGrandTotalModal .gt-chip-net strong {
        color: #047857;
    }

    body.m-shell #teacherGrandTotalModal .gt-table-wrap,
    body.m-shell #teacherGrandTotalModal #grandTotalBreakdownTable {
        display: none !important;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-card {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 12px;
        padding: 0.75rem 0.8rem 0.65rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        min-width: 0;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-empty {
        text-align: center;
        color: #64748b;
        font-size: 0.85rem;
        padding: 1.1rem 0.75rem;
        font-weight: 500;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-error {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-session {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
        min-width: 0;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-amount {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap;
        line-height: 1.3;
        flex-shrink: 0;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.35rem;
    }

    body.m-shell #teacherGrandTotalModal .gt-card-meta span {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #4338ca;
        background: #eef2ff;
        border-radius: 999px;
        padding: 0.12rem 0.5rem;
        line-height: 1.4;
    }

    body.m-shell #teacherGrandTotalModal .gt-job-list {
        list-style: none;
        margin: 0.55rem 0 0;
        padding: 0.5rem 0 0;
        border-top: 1px dashed #e2e8f0;
    }

    body.m-shell #teacherGrandTotalModal .gt-job-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.28rem 0;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    body.m-shell #teacherGrandTotalModal .gt-job-name {
        color: #334155;
        min-width: 0;
        font-weight: 500;
    }

    body.m-shell #teacherGrandTotalModal .gt-job-amt {
        color: #0f172a;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    @media (orientation: landscape) {
        body.m-shell #teacherGrandTotalModal .modal-dialog {
            margin: 0.35rem auto;
            max-width: min(860px, calc(100% - 0.7rem));
            height: auto;
            min-height: 0;
            align-items: center;
        }

        body.m-shell #teacherGrandTotalModal .modal-content {
            border-radius: 14px;
            max-height: calc(100dvh - 0.7rem);
            min-height: 0;
        }

        body.m-shell #teacherGrandTotalModal .modal-header {
            border-radius: 14px 14px 0 0;
            padding: 0.5rem 0.8rem;
        }

        body.m-shell #teacherGrandTotalModal .modal-body {
            padding: 0.55rem 0.7rem 0.7rem;
        }

        body.m-shell #teacherGrandTotalModal .gt-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) auto;
            grid-template-areas:
                "label actions"
                "select actions";
            gap: 0.2rem 0.6rem;
            align-items: end;
            padding: 0.5rem 0.6rem;
            margin-bottom: 0.5rem !important;
        }

        body.m-shell #teacherGrandTotalModal .gt-toolbar .form-label {
            grid-area: label;
            margin: 0;
        }

        body.m-shell #teacherGrandTotalModal .gt-toolbar .form-select {
            grid-area: select;
            margin: 0;
            min-height: 38px;
        }

        body.m-shell #teacherGrandTotalModal .gt-toolbar-actions {
            grid-area: actions;
            grid-template-columns: auto auto;
            align-self: stretch;
        }

        body.m-shell #teacherGrandTotalModal .gt-toolbar-actions .btn {
            min-height: 38px;
            white-space: nowrap;
            width: auto;
            padding: 0.3rem 0.7rem;
        }

        body.m-shell #teacherGrandTotalModal .gt-totals {
            grid-template-columns: 1fr 1fr 1.2fr;
            gap: 0.45rem;
            margin-bottom: 0.5rem;
        }

        body.m-shell #teacherGrandTotalModal .gt-card-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.45rem;
        }

        body.m-shell #teacherGrandTotalModal .gt-card-empty,
        body.m-shell #teacherGrandTotalModal .gt-card-error {
            grid-column: 1 / -1;
        }

        body.m-shell #teacherGrandTotalModal .gt-status {
            margin-bottom: 0.5rem !important;
            padding: 0.4rem 0.6rem;
        }
    }

    /* Admin / student list generic ops tables */
    body.m-shell .student-mgmt-table tbody tr,
    body.m-shell .admin-ops-table tbody tr {
        display: block;
        background: #fff;
        border-radius: var(--m-card-radius);
        margin-bottom: var(--m-gutter);
        padding: 0.65rem;
        border: 1px solid #e4e6eb;
    }

    body.m-shell .student-mgmt-table thead,
    body.m-shell .admin-ops-table thead {
        display: none;
    }

    body.m-shell .student-mgmt-table tbody td,
    body.m-shell .admin-ops-table tbody td {
        display: flex;
        justify-content: space-between;
        border: none !important;
        padding: 0.3rem 0 !important;
        font-size: 0.8rem;
    }

    body.m-shell .student-mgmt-table tbody td::before,
    body.m-shell .admin-ops-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #65676b;
        font-size: 0.72rem;
        margin-right: 0.5rem;
    }

    /* Curriculator compact toolbars */
    body.m-shell .curriculator-toolbar,
    body.m-shell .document-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    body.m-shell .curriculator-toolbar .btn,
    body.m-shell .document-toolbar .btn {
        flex: 1 1 calc(50% - 0.35rem);
        font-size: 0.8rem;
    }

    /* Survey / leave forms */
    body.m-shell .survey-form .form-control,
    body.m-shell .leave-form .form-control,
    body.m-shell .survey-form .form-select,
    body.m-shell .leave-form .form-select {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    body.m-shell .survey-form .btn,
    body.m-shell .leave-form .btn {
        width: 100%;
        margin-bottom: 0.35rem;
    }

    /* Leave Application dashboard — square equal cards, 2×2 / 3-col */
    body.m-shell .la-dash {
        margin-top: 0.4rem !important;
    }

    body.m-shell .la-dash .la-crumb,
    body.m-shell .la-dash .breadcrumb,
    body.m-shell .la-dash-title {
        display: none;
    }

    body.m-shell .la-dash-lead {
        font-size: 0.74rem;
        line-height: 1.35;
        margin-bottom: 0.5rem !important;
        color: #64748b !important;
    }

    body.m-shell .la-dash .la-card-grid,
    body.m-shell .la-dash > .row.g-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    body.m-shell .la-dash .la-card-grid > [class*="col-"],
    body.m-shell .la-dash > .row.g-3 > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        min-width: 0;
    }

    body.m-shell .la-dash a {
        display: block;
        height: 100%;
        color: inherit;
    }

    body.m-shell .la-dash .la-card,
    body.m-shell .la-dash .card.h-100 {
        aspect-ratio: 1 / 0.82;
        height: auto !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07) !important;
        overflow: hidden;
        background: #fff;
    }

    body.m-shell .la-dash .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.18rem;
        padding: 0.4rem 0.35rem !important;
        text-align: center;
    }

    body.m-shell .la-dash .la-card-icon {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    body.m-shell .la-dash .la-card-icon i,
    body.m-shell .la-dash .la-card-icon .fa-2x {
        font-size: 1.05rem !important;
    }

    body.m-shell .la-dash .card-title {
        font-size: 0.7rem !important;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 !important;
        color: #0f172a;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.m-shell .la-dash .card-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.6rem !important;
        line-height: 1.25;
        color: #64748b !important;
        margin: 0 !important;
    }

    /* Leave application forms */
    body.m-shell .la-page {
        margin-top: 0.35rem !important;
        padding-bottom: 4.5rem;
    }

    body.m-shell .la-page .breadcrumb {
        display: none;
    }

    body.m-shell .la-page > h2 {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 0.35rem !important;
        line-height: 1.3;
    }

    body.m-shell .la-page > .text-muted {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.75rem !important;
    }

    body.m-shell .la-page .leave-form {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 14px;
        padding: 0.85rem 0.8rem 0.9rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    body.m-shell .la-page .form-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #334155;
        margin-bottom: 0.28rem;
    }

    body.m-shell .la-page .form-control,
    body.m-shell .la-page .form-select,
    body.m-shell .la-page textarea.form-control {
        border-radius: 10px;
        border-color: #e2e8f0;
        font-size: 16px !important;
        min-height: 44px;
    }

    body.m-shell .la-page textarea.form-control {
        min-height: 72px;
    }

    body.m-shell .la-page .mb-3 {
        margin-bottom: 0.7rem !important;
    }

    body.m-shell .la-page .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0;
    }

    body.m-shell .la-page .row:has(input[type="date"]) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    body.m-shell .la-page .row:has(input[type="date"]) > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body.m-shell .la-page .row:has(input[type="date"]) > [class*="col-"]:not(:has(input[type="date"])) {
        grid-column: 1 / -1;
    }

    body.m-shell .la-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 0.45rem;
        margin: 0.35rem -0.8rem -0.9rem;
        padding: 0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #e8edf3;
        border-radius: 0 0 14px 14px;
    }

    body.m-shell .la-form-actions .btn {
        width: 100%;
        margin: 0 !important;
        min-height: 44px;
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    @media (orientation: landscape) {
        body.m-shell .la-dash .la-card-grid,
        body.m-shell .la-dash > .row.g-3 {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.35rem;
        }

        body.m-shell .la-dash .la-card,
        body.m-shell .la-dash .card.h-100 {
            aspect-ratio: 1 / 0.78;
        }

        body.m-shell .la-dash .card-body {
            padding: 0.32rem 0.3rem !important;
            gap: 0.12rem;
        }

        body.m-shell .la-dash .card-title {
            font-size: 0.66rem !important;
            -webkit-line-clamp: 2;
        }

        body.m-shell .la-dash .card-text {
            font-size: 0.56rem !important;
        }

        body.m-shell .la-dash .la-card-icon i,
        body.m-shell .la-dash .la-card-icon .fa-2x {
            font-size: 0.95rem !important;
        }

        body.m-shell .la-page {
            padding-bottom: 1rem;
        }

        body.m-shell .la-page > h2 {
            font-size: 0.98rem;
        }

        body.m-shell .la-page .leave-form .row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.45rem 0.6rem;
        }

        body.m-shell .la-page .leave-form .row > [class*="col-"] {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }

        body.m-shell .la-form-actions {
            position: static;
            margin: 0.5rem 0 0;
            padding: 0.55rem 0 0;
            border-top: 1px solid #e8edf3;
            border-radius: 0;
            grid-template-columns: auto auto;
            justify-content: end;
        }

        body.m-shell .la-form-actions .btn {
            width: auto;
            min-width: 9.5rem;
            min-height: 40px;
        }
    }

    /* Filter bars stack */
    body.m-shell .filter-bar,
    body.m-shell .row.g-2.align-items-end {
        --bs-gutter-y: 0.5rem;
    }

    body.m-shell .filter-bar > [class*="col-"],
    body.m-shell .row.g-2.align-items-end > [class*="col-"] {
        width: 100%;
    }

    /* Exam marks entry grid */
    body.m-shell .marks-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }

    body.m-shell .marks-table-wrapper.m-table-scroll-sticky th:first-child,
    body.m-shell .marks-table-wrapper.m-table-scroll-sticky td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
    }

    body.m-shell #marks-table {
        min-width: 700px;
    }

    body.m-shell .code-cell {
        width: auto !important;
        min-width: 250px !important;
        max-width: none !important;
    }

    body.m-shell .code-input {
        min-width: 200px !important;
        width: 100% !important;
        font-size: 16px !important;
        padding: 0.6rem 0.75rem !important;
        min-height: 44px !important;
    }

    body.m-shell .code-cell .input-group {
        flex-wrap: nowrap;
        width: 100%;
    }

    body.m-shell .code-cell .input-group .form-control {
        flex: 1 1 auto;
        min-width: 200px;
    }

    body.m-shell .code-cell .input-group .btn {
        flex-shrink: 0;
        min-width: 44px;
        width: 44px;
        padding: 0.5rem;
    }

    body.m-shell #marks-table .form-control {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 0.6rem 0.75rem !important;
    }

    body.m-shell .mark-input {
        min-width: 80px !important;
        font-size: 16px !important;
        padding: 0.6rem 0.5rem !important;
    }

    body.m-shell .student-id-input {
        min-width: 150px !important;
        font-size: 16px !important;
        padding: 0.6rem 0.75rem !important;
    }

    body.m-shell .total-field {
        min-width: 100px !important;
        font-size: 16px !important;
        padding: 0.6rem 0.5rem !important;
    }

    body.m-shell .serial-cell {
        min-width: 50px !important;
        width: 50px !important;
    }

    body.m-shell #marks-table thead th {
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }

    body.m-shell #marks-table thead th:nth-child(2) {
        min-width: 250px !important;
    }

    body.m-shell .module-header .m-action-row {
        flex-direction: column;
    }

    body.m-shell .module-header .m-action-row > .btn,
    body.m-shell .module-header .m-action-row > a.btn {
        flex: 1 1 100%;
        width: 100%;
    }

    body.m-shell .qb-folder-item .accordion-button .badge {
        font-size: 0.68rem;
    }

    body.m-shell .qb-tip {
        font-size: 0.75rem;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
    }

    /* Take attendance compact */
    body.m-shell .double-class-box {
        display: flex !important;
        width: 100%;
        padding: 0.65rem 0.85rem !important;
        margin-bottom: 0.65rem !important;
        align-items: center;
    }

    body.m-shell .double-class-box label {
        font-size: 0.95rem !important;
    }

    body.m-shell .double-class-box .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.1rem;
    }

    body.m-shell #date.form-control,
    body.m-shell input[type="date"].form-control {
        font-size: 16px !important;
        min-height: var(--m-touch);
    }

    body.m-shell .m-table-scroll-sticky .attendance-table .form-check {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: var(--m-touch);
        margin: 0;
        padding-left: 0;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
        margin: 0;
        flex-shrink: 0;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table .form-check-label {
        font-size: 0.78rem;
        margin: 0;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table th:nth-child(3),
    body.m-shell .m-table-scroll-sticky .attendance-table td:nth-child(3) {
        position: sticky;
        left: 72px;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
        text-align: left !important;
        min-width: 110px;
        max-width: 140px;
        white-space: normal !important;
        font-size: 0.75rem;
        line-height: 1.25;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table thead th:nth-child(3) {
        background: #222;
        color: #fff;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table tbody tr:nth-child(even) td:nth-child(3) {
        background: #f2f2f2;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table th:nth-child(1),
    body.m-shell .m-table-scroll-sticky .attendance-table td:nth-child(1) {
        min-width: 28px;
        width: 28px;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table th:nth-child(2),
    body.m-shell .m-table-scroll-sticky .attendance-table td:nth-child(2) {
        left: 28px !important;
        min-width: 44px;
    }

    /* Attendance report overrides older sticky nth-child rules */
    body.m-shell .m-table-scroll-sticky .att-report-table th:nth-child(1),
    body.m-shell .m-table-scroll-sticky .att-report-table td:nth-child(1),
    body.m-shell .m-table-scroll-sticky .att-report-table .att-col-si {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0 !important;
    }

    body.m-shell .m-table-scroll-sticky .att-report-table th:nth-child(2),
    body.m-shell .m-table-scroll-sticky .att-report-table td:nth-child(2),
    body.m-shell .m-table-scroll-sticky .att-report-table .att-col-id,
    body.m-shell .m-table-scroll-sticky .att-report-table .freeze-col-2 {
        left: 0 !important;
        min-width: 52px !important;
        max-width: 58px !important;
        width: 52px !important;
    }

    body.m-shell .m-table-scroll-sticky .att-report-table th:nth-child(3),
    body.m-shell .m-table-scroll-sticky .att-report-table td:nth-child(3),
    body.m-shell .m-table-scroll-sticky .att-report-table .att-col-name,
    body.m-shell .m-table-scroll-sticky .att-report-table .freeze-col-3,
    body.m-shell .m-table-scroll-sticky .att-report-table .student-name {
        left: 52px !important;
        min-width: 88px !important;
        max-width: 110px !important;
        width: 96px !important;
        font-size: 0.68rem !important;
    }

    /* Attendance report toolbar */
    body.m-shell .att-report-actions {
        width: 100%;
    }

    body.m-shell .att-report-toolbar {
        margin-bottom: 0.5rem !important;
        gap: 0.5rem !important;
        position: sticky;
        top: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px));
        z-index: 12;
        background: var(--m-card-bg, #fff);
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.m-shell .att-report-primary {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.35rem;
        margin-bottom: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.m-shell .att-report-primary > .btn {
        flex: 1 1 0;
        min-height: 36px;
        font-size: 0.78rem !important;
        margin-bottom: 0 !important;
        padding: 0.35rem 0.5rem;
        white-space: nowrap;
    }

    body.m-shell .att-btn-full {
        display: none !important;
    }

    body.m-shell .att-btn-short {
        display: inline !important;
    }

    body.m-shell .edit-toggle {
        justify-content: flex-start !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        flex: 0 0 auto;
    }

    body.m-shell .edit-toggle .form-check-input {
        width: 2.4em;
        height: 1.25em;
    }

    body.m-shell .edit-toggle .form-check-label {
        font-size: 0.8rem;
        font-weight: 600;
    }

    body.m-shell.att-edit-on .att-edit-hint {
        display: block !important;
        font-size: 0.65rem;
        line-height: 1.2;
    }

    body.m-shell .att-report-scroll {
        max-height: calc(100dvh - 210px);
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    body.m-shell .att-report-table {
        font-size: 0.72rem !important;
        min-width: 0 !important;
    }

    body.m-shell .att-report-table th,
    body.m-shell .att-report-table td {
        padding: 0.2rem 0.15rem !important;
    }

    body.m-shell .att-report-table .att-col-si {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    body.m-shell .att-report-table .att-col-id,
    body.m-shell .att-report-table .freeze-col-2 {
        left: 0 !important;
        min-width: 52px !important;
        max-width: 58px;
        width: 52px;
        font-size: 0.68rem;
        z-index: 5;
    }

    body.m-shell .att-report-table .att-col-name,
    body.m-shell .att-report-table .freeze-col-3,
    body.m-shell .att-report-table .student-name {
        left: 52px !important;
        min-width: 88px !important;
        max-width: 110px !important;
        width: 96px;
        font-size: 0.68rem !important;
        line-height: 1.2;
        white-space: normal !important;
        z-index: 5;
        border-right: 2px solid #adb5bd !important;
    }

    body.m-shell .att-report-table thead .att-col-id,
    body.m-shell .att-report-table thead .att-col-name,
    body.m-shell .att-report-table thead .freeze-col-2,
    body.m-shell .att-report-table thead .freeze-col-3 {
        z-index: 6;
        background: #222 !important;
        color: #fff;
    }

    body.m-shell .att-report-table .att-col-group {
        font-size: 0.62rem !important;
        padding: 0.15rem !important;
        letter-spacing: 0.02em;
    }

    body.m-shell .att-report-table .att-date-full {
        display: none !important;
    }

    body.m-shell .att-report-table .att-date-short {
        display: inline-block !important;
    }

    body.m-shell .att-report-table thead th.att-date-th {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        height: 72px;
        min-width: 28px !important;
        max-width: 30px !important;
        width: 28px !important;
        padding: 4px 2px !important;
        font-size: 0.62rem !important;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
        vertical-align: middle;
        text-align: left;
        letter-spacing: 0.01em;
    }

    body.m-shell .att-report-table .attendance-cell {
        min-width: 28px !important;
        width: 28px !important;
        max-width: 30px !important;
        padding: 0 !important;
        vertical-align: middle;
    }

    body.m-shell .att-report-table .attendance-cell .status {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        width: 100%;
        font-size: 0.82rem;
        font-weight: 700;
    }

    body.m-shell.att-edit-on .att-report-table .attendance-cell.editable {
        background: rgba(13, 110, 253, 0.04);
    }

    body.m-shell.att-edit-on .att-report-table .attendance-cell.editable:active {
        background: rgba(13, 110, 253, 0.16);
    }

    body.m-shell .att-report-table .att-col-part,
    body.m-shell .att-report-table .att-col-total {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    body.m-shell .att-report-table .att-col-present,
    body.m-shell .att-report-table .att-col-pct,
    body.m-shell .att-report-table .att-col-marks {
        min-width: 36px;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    body.m-shell .att-report-table .att-col-pct {
        min-width: 44px;
    }

    body.m-shell .att-report-table .marks-input-edit {
        width: 44px !important;
        min-height: 30px;
        font-size: 0.75rem;
        padding: 0.15rem;
    }

    body.m-shell .att-report-table .manual-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.25rem;
    }

    body.m-shell .att-teacher-card .card-header {
        padding: 0.55rem 0.7rem;
    }

    body.m-shell .att-teacher-card .card-header h5 {
        font-size: 0.85rem;
    }

    body.m-shell .att-teacher-card .card-body {
        padding: 0.45rem !important;
    }

    body.m-shell .att-hero {
        padding: 0.8rem 0.85rem;
        margin-bottom: 0.65rem;
        border-radius: 10px;
    }

    body.m-shell .att-hero h1 {
        font-size: 1.05rem;
    }

    body.m-shell .att-chips {
        margin-top: 0.55rem;
    }

    body.m-shell .att-card-list {
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    body.m-shell .att-page:not(.show-sheet) .att-sheet-wrap {
        display: none !important;
    }

    body.m-shell .att-page.show-sheet .att-card-list {
        display: none !important;
    }

    body.m-shell .att-sheet-toggle {
        display: inline-flex !important;
    }

    body.m-shell .att-student-card {
        padding: 0.7rem 0.75rem;
    }

    body.m-shell .m-table-scroll-sticky .attendance-table .student-name {
        min-width: 88px !important;
        max-width: 110px;
        font-size: 0.68rem;
        line-height: 1.2;
        white-space: normal !important;
    }

    /* Assessment page */
    body.m-shell .as-hero {
        padding: 0.55rem 0.65rem;
        margin-bottom: 0.45rem;
    }

    body.m-shell .as-hero h1 {
        font-size: 1rem;
    }

    body.m-shell .as-search input {
        padding-left: 2.25rem !important;
    }

    body.m-shell .assessment-page .as-marks-wrap,
    body.m-shell .assessment-page .m-table-scroll-sticky {
        overflow: hidden !important;
        max-width: 100% !important;
        background: transparent !important;
        background-image: none !important;
        margin-bottom: 0;
        border-radius: 0;
    }

    body.m-shell .assessment-page table.assessment-marks-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        table-layout: auto !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table thead,
    body.m-shell .assessment-page table.assessment-marks-table thead tr,
    body.m-shell .assessment-page table.assessment-marks-table thead th {
        display: none !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        align-items: center !important;
        gap: 0.28rem;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 0.4rem 0.45rem 0.45rem !important;
        margin: 0 0 0.4rem !important;
        box-sizing: border-box !important;
        box-shadow: none;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row:nth-child(even) {
        background: #f8fafc !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td,
    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td:first-child,
    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td:nth-child(2) {
        display: block !important;
        float: none !important;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td::before {
        content: none !important;
        display: none !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-name {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        font-weight: 700;
        font-size: 0.82rem;
        color: #0f172a;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-id {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        justify-self: start;
        font-size: 0.68rem;
        font-weight: 600;
        color: #475569;
        background: #e2e8f0 !important;
        border-radius: 999px !important;
        padding: 0.12rem 0.4rem !important;
        width: auto !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-total {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        justify-self: end;
        align-self: center;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 2.25rem;
        width: auto !important;
        background: #dbeafe !important;
        border-radius: 8px !important;
        padding: 0.2rem 0.5rem !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-total::before {
        content: none !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-total > span {
        font-size: 0.95rem;
        font-weight: 800;
        color: #1e3a8a;
        line-height: 1;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-mark {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0.28rem 0.3rem 0.3rem !important;
        text-align: left !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table tbody tr.as-student-row td.as-col-mark::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 700;
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.12rem;
        text-align: left;
    }

    body.m-shell .assessment-page .assessment-input-field {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        padding: 0.15rem 0.3rem !important;
        text-align: center !important;
    }

    body.m-shell .assessment-page table.assessment-marks-table td .d-flex {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.25rem !important;
        width: 100%;
    }

    body.m-shell .assessment-page .assessment-marks-table .form-check {
        min-height: auto;
        margin: 0;
        padding-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
    }

    body.m-shell .assessment-page .assessment-marks-table .form-check-input {
        width: 0.95rem;
        height: 0.95rem;
        margin: 0;
        float: none;
    }

    body.m-shell .assessment-page .assessment-marks-table .form-check-label {
        font-size: 0 !important;
        padding: 0;
        margin: 0;
    }

    body.m-shell .assessment-page .assessment-marks-table .form-check-label::after {
        content: "Ab";
        font-size: 0.62rem;
        font-weight: 700;
        color: #64748b;
    }

    body.m-shell .as-save-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        background: #fff;
        padding: 0.45rem 0.65rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e2e8f0;
    }

    body.m-shell .as-save-bar .btn {
        width: 100%;
        min-height: 40px;
    }

    body.m-shell .assessment-reveal-card .m-switch-grid {
        margin-bottom: 0;
    }

    body.m-shell .assessment-reveal-card .m-action-row {
        margin-top: 0.35rem;
    }

    /* Routine maker timetable */
    body.m-shell .routine-rotate-gate {
        display: none;
    }

    body.m-shell .routine-topbar,
    body.m-shell .r-toolbar {
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        gap: 0.35rem;
        height: auto !important;
        min-height: 44px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    body.m-shell .topbar-left,
    body.m-shell .topbar-right,
    body.m-shell .r-toolbar-left,
    body.m-shell .r-toolbar-right {
        flex-wrap: wrap;
        gap: 0.3rem;
        width: 100%;
        align-items: center;
    }

    body.m-shell .topbar-btn,
    body.m-shell .r-toolbar .r-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 36px;
    }

    body.m-shell .routine-name-input,
    body.m-shell .r-title {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        font-size: 14px !important;
        flex: 1 1 100%;
    }

    body.m-shell .r-date {
        font-size: 14px;
        min-height: 36px;
    }

    body.m-shell .r-logo {
        font-size: 0.85rem;
    }

    body.m-shell .routine-table-wrapper,
    body.m-shell .r-table-wrap,
    body.m-shell .routine-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
    }

    body.m-shell .routine-table {
        font-size: 10.5px;
    }

    body.m-shell .routine-table tbody td.slot-cell {
        min-height: 36px;
        height: 36px;
        padding: 2px !important;
    }

    body.m-shell .routine-table th.day-col,
    body.m-shell .routine-table td.day-col {
        position: sticky;
        left: 0;
        z-index: 5;
        background: #fff;
        min-width: 48px;
        max-width: 48px;
        width: 48px;
        font-size: 10px;
    }

    body.m-shell .routine-table th.room-col,
    body.m-shell .routine-table td.room-col {
        position: sticky;
        left: 48px;
        z-index: 4;
        background: #fff;
        min-width: 56px;
        max-width: 56px;
        width: 56px;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
        font-size: 10px;
    }

    body.m-shell .routine-table thead th.day-col {
        background: var(--primary, #2563eb) !important;
        color: #fff !important;
        z-index: 7;
    }

    body.m-shell .routine-table thead th.room-col {
        z-index: 6;
        background: #f1f3f5 !important;
    }

    body.m-shell .routine-table th.time-col {
        font-size: 9.5px;
        white-space: nowrap;
        padding: 4px 3px !important;
    }

    /* Align off-canvas course panel under mobile topbar */
    body.m-shell {
        --routine-content-top: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px));
    }

    body.m-shell .course-panel,
    body.m-shell .r-courses {
        top: var(--routine-content-top) !important;
        height: calc(100dvh - var(--routine-content-top)) !important;
    }

    body.m-shell .course-panel-toggle,
    body.m-shell .r-fixed-courses {
        top: calc(var(--routine-content-top) + 6px) !important;
        left: 10px !important;
        min-width: 40px;
        min-height: 40px;
        z-index: 150;
    }

    body.m-shell .routine-app,
    body.m-shell .r-body {
        min-height: calc(100dvh - var(--routine-content-top));
    }

    body.m-shell .routine-app {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.m-shell .container:has(.routine-app),
    body.m-shell main.m-main > .container:has(.routine-app) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Phone portrait lock — JS sets .routine-phone-portrait only on real phones.
       Never use hover/pointer media alone; that flashes on computers at first paint. */
    body.routine-phone-portrait .routine-rotate-gate {
        display: flex !important;
        position: fixed;
        inset: 0;
        z-index: 2000;
        align-items: center;
        justify-content: center;
        padding: calc(var(--m-topbar-height) + env(safe-area-inset-top, 0px) + 1.5rem) 1.25rem 1.5rem;
        background: #f0f2f5;
    }

    body.routine-phone-portrait .routine-rotate-card {
        width: min(22rem, 100%);
        text-align: center;
        background: #fff;
        border-radius: 20px;
        padding: 1.75rem 1.35rem 1.5rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    }

    body.routine-phone-portrait .routine-rotate-phone {
        width: 4.5rem;
        height: 4.5rem;
        margin: 0 auto 1rem;
        border-radius: 1.15rem;
        background: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        animation: routine-rotate-hint 1.6s ease-in-out infinite;
    }

    body.routine-phone-portrait .routine-rotate-card h2 {
        font-size: 1.15rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 0.5rem;
        line-height: 1.3;
    }

    body.routine-phone-portrait .routine-rotate-card p {
        margin: 0;
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    body.routine-phone-portrait .routine-rotate-en {
        margin-top: 0.65rem !important;
        font-size: 0.8rem !important;
        color: #64748b !important;
    }

    body.routine-phone-portrait {
        overflow: hidden !important;
    }

    body.routine-phone-portrait .routine-app .r-toolbar,
    body.routine-phone-portrait .routine-app .r-body,
    body.routine-phone-portrait .r-fixed-courses,
    body.routine-phone-portrait .course-panel-toggle,
    body.routine-phone-portrait .fullscreen-exit-btn {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    @keyframes routine-rotate-hint {
        0%, 18% { transform: rotate(0deg); }
        45%, 70% { transform: rotate(90deg); }
        100% { transform: rotate(0deg); }
    }

    /* Phone landscape: immersive, sticky-pane timetable */
    @media (orientation: landscape) {
        body.m-shell:has(.routine-app) {
            padding-top: env(safe-area-inset-top, 0px) !important;
            overflow: hidden !important;
            --routine-content-top: env(safe-area-inset-top, 0px);
        }

        body.m-shell:has(.routine-app) .m-topbar {
            display: none !important;
        }

        body.m-shell .routine-rotate-gate {
            display: none !important;
        }

        body.m-shell .container:has(.routine-app),
        body.m-shell main.m-main > .container:has(.routine-app),
        body.m-shell .container.my-4:has(.routine-app) {
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            height: 100dvh !important;
            overflow: hidden !important;
        }

        body.m-shell .routine-app {
            height: 100dvh !important;
            max-height: 100dvh !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        body.m-shell .r-toolbar,
        body.m-shell .r-toolbar.m-page-header {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            padding: 4px 8px 4px max(8px, env(safe-area-inset-left, 0px)) !important;
            min-height: 40px;
            height: 40px !important;
            gap: 0.4rem;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
        }

        body.m-shell .r-toolbar-left,
        body.m-shell .r-toolbar-right,
        body.m-shell .r-toolbar .m-action-row {
            flex-wrap: nowrap !important;
            width: auto !important;
            min-width: 0;
            align-items: center !important;
        }

        body.m-shell .r-toolbar-left {
            flex: 0 0 auto;
            gap: 0.35rem;
        }

        body.m-shell .r-toolbar-right,
        body.m-shell .r-toolbar .m-action-row {
            flex: 1 1 auto;
            justify-content: flex-end;
            display: flex !important;
        }

        body.m-shell .r-title,
        body.m-shell .r-date,
        body.m-shell .r-progress,
        body.m-shell .r-logo {
            display: none !important;
        }

        body.m-shell .r-toolbar .m-action-row > .r-btn,
        body.m-shell .r-toolbar .m-action-row > a.r-btn,
        body.m-shell .r-toolbar .r-btn {
            flex: 0 0 auto !important;
            font-size: 12px !important;
            gap: 4px;
            min-height: 32px;
            height: 32px;
            padding: 0 10px !important;
            flex-shrink: 0;
            width: auto !important;
        }

        body.m-shell .r-toolbar .r-btn i,
        body.m-shell .r-toolbar .r-btn .r-filter-count {
            font-size: 12px !important;
        }

        body.m-shell .r-toolbar .r-btn .r-filter-count {
            margin-left: 4px;
        }

        body.m-shell .r-body,
        body.m-shell .routine-main,
        body.m-shell .r-table-wrap,
        body.m-shell .routine-table-area {
            min-height: 0 !important;
            height: auto !important;
            flex: 1 1 auto !important;
            overflow: hidden !important;
        }

        body.m-shell .routine-table-wrapper,
        body.m-shell .routine-table-container {
            overflow: auto !important;
            -webkit-overflow-scrolling: touch !important;
            touch-action: pan-x pan-y !important;
            padding: 0 !important;
            height: 100% !important;
            max-height: none !important;
        }

        body.m-shell .routine-table {
            font-size: 10px;
            width: max-content;
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        body.m-shell .routine-table thead th {
            position: sticky;
            top: 0;
            z-index: 6;
            background: #1e40af !important;
            color: #fff !important;
            box-shadow: 0 1px 0 #1e3a8a;
        }

        body.m-shell .routine-table th.time-col {
            min-width: 96px;
            max-width: 120px;
            width: 96px;
            font-size: 9px !important;
            line-height: 1.15;
            white-space: normal !important;
            padding: 5px 4px !important;
            font-weight: 700;
        }

        body.m-shell .routine-table tbody td.slot-cell {
            min-width: 96px;
            width: 96px;
            height: auto !important;
            min-height: 46px;
            vertical-align: top;
            padding: 3px 4px !important;
        }

        body.m-shell .slot-course-code {
            font-size: 10px;
            white-space: normal;
            word-break: break-word;
        }

        body.m-shell .slot-teacher {
            font-size: 9px;
        }

        body.m-shell .routine-table th.day-col,
        body.m-shell .routine-table td.day-col {
            min-width: 48px;
            max-width: 48px;
            width: 48px;
            left: 0;
            z-index: 5;
        }

        body.m-shell .routine-table th.room-col,
        body.m-shell .routine-table td.room-col {
            left: 48px !important;
            min-width: 56px;
            max-width: 56px;
            width: 56px;
            z-index: 4;
        }

        body.m-shell .routine-table thead th.day-col {
            z-index: 8;
            left: 0;
        }

        body.m-shell .routine-table thead th.room-col {
            z-index: 7;
            left: 48px !important;
            background: #1e3a8a !important;
            color: #fff !important;
        }

        body.m-shell .course-panel-toggle,
        body.m-shell .r-fixed-courses {
            top: calc(env(safe-area-inset-top, 0px) + 40px) !important;
            left: max(8px, env(safe-area-inset-left, 0px)) !important;
            min-width: 34px;
            min-height: 34px;
        }

        body.m-shell .course-panel,
        body.m-shell .r-courses {
            top: 40px !important;
            height: calc(100dvh - 40px) !important;
        }
    }

    /* ---- Student dashboard surfaces ---- */
    body.m-shell .student-scores-page .card.shadow,
    body.m-shell .student-files-page .card.shadow,
    body.m-shell .student-notif-page .card.shadow {
        box-shadow: none !important;
    }

    body.m-shell .student-scores-page,
    body.m-shell .student-files-page,
    body.m-shell .student-dash-page,
    body.m-shell .student-reg-page,
    body.m-shell .student-notif-page {
        padding-top: 0.35rem !important;
    }

    body.m-shell .sv-course-card,
    body.m-shell .sf-card,
    body.m-shell .sn-card,
    body.m-shell .student-reg-page .card {
        border-radius: 12px !important;
    }

    body.m-shell .student-reg-page .table-mobile-stack thead {
        display: none;
    }

    body.m-shell .student-reg-page .table-mobile-stack tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px;
        margin-bottom: 0.65rem;
        padding: 0.7rem 0.8rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    body.m-shell .student-reg-page .table-mobile-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.65rem;
        border: none !important;
        padding: 0.4rem 0 !important;
        white-space: normal !important;
        text-align: right !important;
    }

    body.m-shell .student-reg-page .table-mobile-stack tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        flex-shrink: 0;
        max-width: 42%;
    }

    body.m-shell .student-reg-page .table-mobile-stack tbody td[data-label=""] {
        display: none;
    }

    body.m-shell .student-reg-page .table-mobile-stack tbody td[data-label="Action"] .btn,
    body.m-shell .student-reg-page .table-mobile-stack tbody td[data-label="Remarks"] .form-select {
        width: 100%;
        max-width: 180px;
    }

    body.m-shell .student-reg-page .sr-total-row td[data-label="Summary"]::before {
        content: none;
    }

    body.m-shell .batch-events-student .card,
    body.m-shell .calendar-container {
        border-radius: 12px;
    }

    body.m-shell .calendar-container {
        padding: 0.85rem !important;
    }

    body.m-shell .calendar-day {
        min-height: 64px !important;
        padding: 0.25rem !important;
    }

    body.m-shell .calendar-day-number {
        font-size: 0.78rem;
    }

    body.m-shell .calendar-event {
        font-size: 0.58rem !important;
        padding: 0.1rem 0.2rem !important;
    }

    body.m-shell #btn-course-filter {
        min-height: 36px;
    }

    body.m-shell #course-filter-modal .modal-body {
        padding: 0.85rem 1rem;
    }

    body.m-shell .course-filter-item {
        min-height: 44px;
    }

    /* Window selection page */
    body.m-shell .window-select-page {
        max-width: 100% !important;
        padding: 0.35rem 0 1.25rem !important;
        margin-top: 0 !important;
    }

    body.m-shell .window-select-hero {
        margin-bottom: 0.85rem;
        padding: 0 0.15rem;
    }

    body.m-shell .window-select-hero-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 0.55rem;
    }

    body.m-shell .window-select-hero h1 {
        font-size: 1.05rem;
    }

    body.m-shell .window-select-hero p {
        font-size: 0.82rem;
    }

    body.m-shell .window-option-body {
        padding: 0.75rem 0.8rem;
    }

    body.m-shell .window-option-title {
        font-size: 0.9rem;
    }

    body.m-shell .window-select-submit {
        min-height: 48px;
        position: sticky;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 5;
    }

    /* Profile */
    body.m-shell .profile-page {
        max-width: 100% !important;
        margin: 0.35rem auto 1.25rem !important;
        padding: 0 0.15rem 0.5rem !important;
    }

    body.m-shell .profile-form {
        gap: 0.75rem !important;
    }

    body.m-shell .profile-hero,
    body.m-shell .profile-card {
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    }

    body.m-shell .profile-hero {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem 0.85rem 1rem !important;
        background-size: auto, 100% 78px;
    }

    body.m-shell .profile-avatar-ring {
        width: 112px !important;
        height: 112px !important;
        padding: 3px !important;
    }

    body.m-shell .profile-avatar-cam {
        width: 32px;
        height: 32px;
        right: 2px;
        bottom: 2px;
        font-size: 0.78rem;
    }

    body.m-shell .profile-identity h1 {
        font-size: 1.15rem;
    }

    body.m-shell .profile-identity .profile-email {
        font-size: 0.85rem;
        margin-bottom: 0.55rem;
    }

    body.m-shell .profile-pills {
        justify-content: center;
    }

    body.m-shell .profile-card {
        padding: 0.9rem 0.85rem 1rem !important;
    }

    body.m-shell .profile-card h2 {
        font-size: 0.88rem;
    }

    body.m-shell .profile-theme-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    body.m-shell .profile-theme-swatch {
        min-height: 44px;
        padding: 0.45rem 0.25rem 0.4rem;
        font-size: 0.68rem;
    }

    body.m-shell .profile-sig-frame {
        height: 92px;
        max-width: 100%;
    }

    body.m-shell .profile-file-btn {
        min-height: 40px;
    }

    body.m-shell .profile-actions {
        position: sticky;
        bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
        z-index: 5;
        padding: 0;
        margin-top: 0.15rem;
    }

    body.m-shell .profile-actions .btn-primary {
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
    }
}

/* Desktop reset — never leak mobile shell */
@media (min-width: 992px) {
    .m-topbar,
    .m-drawer,
    .m-drawer-backdrop {
        display: none !important;
    }

    body.m-shell {
        background: #f8f9fa;
        padding-top: 0;
    }
}