/**
 * Study 应用公共响应式规则。
 *
 * 维护约定：这里只处理跨页面的布局收缩、触控面积和安全区；某个业务页面独有的
 * 断点规则继续留在对应页面 CSS 中，避免公共文件反向依赖业务结构。
 */

@media (max-width: 1199.94px) {
    #main-sidenav {
        width: min(var(--mxj-study-sidenav-width), 86vw);
        min-width: min(var(--mxj-study-sidenav-width), 86vw);
        padding-top: max(.85rem, env(safe-area-inset-top));
        box-shadow: var(--mxj-sidenav-drawer-shadow);
    }

    body.mxj-sidenav-open {
        overflow: hidden;
        touch-action: none;
    }

    /* 抽屉打开时暂时隐藏学员底栏，避免两个导航层同时争抢触控焦点。 */
    body.mxj-sidenav-open .mxj-mobile-nav {
        visibility: hidden;
        pointer-events: none;
    }

    .sidenav-backdrop {
        background: var(--mxj-backdrop) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

}

@media (max-width: 991.98px) {
    :root {
        --mxj-content-padding-x: 1.25rem;
        --mxj-content-padding-y: 1.5rem;
    }

    #main-content > .row,
    #main-content > [class*="container"] {
        min-width: 0;
    }

    #main-content .row > [class*="col-"] {
        min-width: 0;
    }

    .mxj-filter-group,
    .mxj-sort-group {
        flex-wrap: wrap;
    }

    .mxj-study-app .table-responsive {
        border: 1px solid var(--mxj-border-2);
        border-radius: var(--mxj-radius-md);
        -webkit-overflow-scrolling: touch;
    }

    .mxj-study-app .table-responsive > .table {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    :root {
        --mxj-navbar-height: 58px;
        --mxj-content-padding-x: 1rem;
        --mxj-content-padding-y: 1.15rem;
        --mxj-radius-lg: 16px;
    }

    body.mxj-study-app {
        background:
            radial-gradient(circle at 100% 0%, var(--mxj-shell-glow-mobile), transparent 20rem),
            var(--bg-color);
    }

    #main-navbar {
        padding-top: max(.35rem, env(safe-area-inset-top));
        padding-right: max(.75rem, env(safe-area-inset-right));
        padding-bottom: .35rem;
        padding-left: max(.75rem, env(safe-area-inset-left));
        /* 固定导航随页面滚动时禁用背景模糊，减少手机 GPU 持续合成成本。 */
        background: var(--mxj-shell-header-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main-content {
        padding-bottom: calc(var(--mxj-content-padding-y) + env(safe-area-inset-bottom));
    }

    /* 学员页面为固定底栏预留空间，讲师页面不受影响。 */
    .mxj-has-mobile-nav #main-content {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .mxj-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: block;
        min-width: 0;
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        border-top: 1px solid var(--mxj-border-2);
        background: var(--mxj-surface-2);
        box-shadow: var(--mxj-mobile-nav-shadow);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .mxj-mobile-nav-item {
        min-height: 60px;
    }

    /* 一级页面标题区在手机端纵向排布，右侧操作自动转为整行触控按钮。 */
    .mxj-page-head {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: .85rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .mxj-page-head--with-tabs {
        margin-bottom: .65rem;
    }

    .mxj-page-head-main {
        flex-basis: auto;
        gap: .5rem;
    }

    /* 裸图标随标题缩小，窄屏不再恢复原来的方形底块占位。 */
    .mxj-page-head-icon {
        flex-basis: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        font-size: .95rem;
    }

    .mxj-study-app .mxj-page-head-title {
        font-size: 1.125rem;
    }

    .mxj-page-head-subtitle {
        font-size: .84rem;
    }

    .mxj-page-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .mxj-page-head-actions > .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    .mxj-list-filter-bar {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: .65rem;
    }

    .mxj-filter-line {
        width: 100%;
        overflow: hidden;
    }

    .mxj-filter-line > .small {
        flex: 0 0 auto;
    }

    .mxj-mobile-scroll-group {
        flex: 1 1 auto;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .12rem .1rem .2rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxj-mobile-scroll-group::-webkit-scrollbar {
        display: none;
    }

    .mxj-mobile-scroll-group > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* 带 data-label 的桌面表格在手机端转换为双列信息卡片。 */
    .mxj-responsive-list.table-responsive {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .mxj-mobile-card-table,
    .mxj-mobile-card-table > tbody {
        display: block;
        width: 100%;
    }

    .mxj-mobile-card-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
    }

    .mxj-mobile-card-table > tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem 1rem;
        margin-bottom: .85rem;
        padding: 1rem;
        overflow: hidden;
        border: 1px solid var(--mxj-border-2);
        border-radius: var(--mxj-radius-md);
        background: var(--mxj-surface-2);
        box-shadow: var(--mxj-shadow-sm);
    }

    .mxj-mobile-card-table > tbody > tr:last-child {
        margin-bottom: 0;
    }

    .mxj-mobile-card-table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        min-width: 0;
        padding: 0 !important;
        color: var(--mxj-text-primary);
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .82rem;
        overflow-wrap: anywhere;
    }

    .mxj-mobile-card-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--mxj-text-muted);
        font-size: max(12px, .7rem);
        font-weight: 600;
    }

    .mxj-mobile-card-table > tbody > tr > .mxj-mobile-card-primary {
        order: -1;
        display: block;
        grid-column: 1 / -1;
        padding-bottom: .75rem !important;
        border-bottom: 1px solid var(--mxj-border-2) !important;
        font-size: .95rem;
        line-height: 1.45;
    }

    .mxj-mobile-card-table > tbody > tr > .mxj-mobile-card-action {
        grid-column: 1 / -1;
        padding-top: .1rem !important;
    }

    .mxj-mobile-card-action .btn {
        width: 100%;
        min-height: 40px;
    }

    .mxj-course-card,
    .mxj-lesson-card {
        border-radius: var(--mxj-radius-lg);
    }

    .mxj-lesson-actions > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }

    .mxj-navbar-toggle {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        margin-right: .6rem;
    }

    /* 手机恢复单行路径导航，避免两行标题与固定工具栏互相挤压。 */
    .mxj-header-context {
        display: block;
    }

    /* 一级标题或二级以上路径独占头部时，窄屏继续保持垂直居中。 */
    .mxj-header-context--single,
    .mxj-header-context--breadcrumb-only {
        display: flex;
        align-items: center;
    }

    .mxj-header-context-title {
        display: none;
    }

    .mxj-header-context--single .mxj-header-context-title {
        display: block;
    }

    .mxj-header-context-meta {
        display: block;
    }

    .mxj-breadcrumb {
        max-width: min(48vw, 20rem);
        font-size: .82rem;
    }

    .nav-tools {
        --nav-tools-gap: .5rem;
    }

    .nav-tools > .nav-item + .nav-item {
        margin-left: 0;
        padding-left: 0;
    }

    .nav-tools > .nav-item + .nav-item::before {
        display: none;
    }

    .mxj-nav-icon-btn {
        width: 40px;
        height: 40px;
    }

    .mxj-user-menu-toggle {
        min-height: 42px;
        padding: .15rem;
    }

    .mxj-user-avatar {
        width: 36px;
        height: 36px;
    }

    .mxj-user-menu-meta,
    .mxj-user-menu-chevron {
        display: none;
    }

    #main-navbar .dropdown-menu {
        min-width: 12rem;
        max-width: calc(100vw - 2rem);
    }

    /* 平板与手机都收起低频工具，顶部稳定保留菜单、通知（学员）、更多和头像。 */
    .mxj-desktop-theme-tool {
        display: none !important;
    }

    .mxj-mobile-more-menu {
        display: flex !important;
    }

    #main-navbar .mxj-mobile-more-dropdown {
        min-width: 13.5rem;
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #main-navbar .mxj-mobile-more-dropdown .dropdown-item {
        display: flex;
        align-items: center;
    }

    .mxj-mobile-more-section-title {
        padding: .15rem .2rem .45rem;
        color: var(--mxj-text-muted);
        font-size: .78rem;
        font-weight: 700;
    }

    .mxj-study-app h1,
    .mxj-study-app .h1 {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .mxj-study-app h2,
    .mxj-study-app .h2 {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
    }

    .mxj-title {
        line-height: 1.35;
    }

    .mxj-title-back-btn {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .mxj-panel,
    .mxj-hero,
    .mxj-stat-card {
        border-radius: var(--mxj-radius-lg) !important;
    }

    .mxj-panel .card-header,
    .mxj-panel-header {
        padding: 1rem 1rem .5rem;
    }

    .mxj-panel .card-body {
        padding: 1rem;
    }

    .mxj-study-app .form-control,
    .mxj-study-app .form-select,
    .mxj-study-app .btn:not(.btn-sm) {
        min-height: 44px;
    }

    .mxj-study-app .modal-dialog {
        margin: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
    }

    .mxj-study-app .modal-content {
        border-radius: 18px;
    }

    .mxj-study-app .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem;
    }

    .mxj-study-app .pagination .page-link {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mxj-timeline {
        padding-right: .25rem;
        padding-left: .25rem;
    }

    .mxj-timeline-item {
        padding-left: 36px;
    }

    .mxj-timeline::before {
        left: 14px;
    }

    .mxj-timeline-dot {
        left: 6px;
    }
}

/* 1366×768 一类矮屏笔记本减少首屏垂直留白，但维持完整桌面侧栏结构。 */
@media (min-width: 1200px) and (max-height: 800px) {
    :root {
        --mxj-navbar-height: 66px;
        --mxj-content-padding-y: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --mxj-content-padding-x: .75rem;
        --mxj-content-padding-y: 1rem;
    }

    #main-navbar {
        padding-right: max(.55rem, env(safe-area-inset-right));
        padding-left: max(.55rem, env(safe-area-inset-left));
    }

    #main-navbar > .container-fluid,
    #main-navbar .nav-tools {
        flex-wrap: nowrap;
    }

    .mxj-breadcrumb {
        max-width: min(48vw, 11.25rem);
    }

    .mxj-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }

    .mxj-breadcrumb-root-content {
        gap: .25rem;
    }

    /* 压缩窄屏分隔符留白，优先完整保留“菜单根 / 当前页”两端文字。 */
    .mxj-breadcrumb .breadcrumb-item + .breadcrumb-item {
        padding-left: .125rem;
    }

    .mxj-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        padding-right: .125rem;
    }

    .mxj-breadcrumb-root-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mxj-filter-item,
    .mxj-sort-item {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
    }

    .mxj-course-header > .d-flex:first-child {
        margin-bottom: 1rem !important;
    }

    .mxj-course-header > .d-flex:first-child .btn {
        min-height: 40px;
        padding-right: .85rem;
        padding-left: .85rem;
    }

    .mxj-course-card .card-title,
    .mxj-lesson-title {
        font-size: 1rem;
    }

    .mxj-course-next {
        font-size: .75rem;
    }

    .mxj-nav-tabs .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    #login_id {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto !important;
        padding: max(1rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    }

    #login_id .login-card {
        width: min(100%, 380px);
        margin: 0 !important;
        padding: 1.35rem 1.15rem 1.1rem !important;
        border-radius: 20px;
    }

    #login_id .login-header {
        gap: .5rem;
    }

    #login_id .login-logo {
        width: min(104px, 31vw);
    }

    #login_id .login-title {
        font-size: clamp(.95rem, 4.8vw, 1.1rem);
        white-space: nowrap;
    }

    #login_id .login-tabs {
        margin-bottom: 1rem;
    }

    #login_id .login-input {
        height: 46px;
        margin-bottom: .75rem;
    }

    #login_id .login-helper-links {
        flex-wrap: wrap;
        row-gap: .4rem;
    }
}

/* 320px 是 Study 支持的最小重要宽度，信息表在该宽度改为单列避免长内容互相挤压。 */
@media (max-width: 359.98px) {
    :root {
        /* 保留至少 12px 外侧留白，承接 MDB 栅格及横向作品卡片的 12px 负边距，避免页面横向溢出。 */
        --mxj-content-padding-x: .75rem;
    }

    .mxj-page-head {
        padding: .875rem;
    }

    .mxj-page-head-actions {
        flex-direction: column;
    }

    .mxj-page-head-actions > .btn,
    .mxj-lesson-actions > [class*="col-"] {
        width: 100%;
    }

    .mxj-mobile-card-table > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        padding: .875rem;
    }

    .mxj-mobile-card-table > tbody > tr > td {
        grid-column: 1 / -1;
    }

    .mxj-breadcrumb {
        max-width: 48vw;
        font-size: .78rem;
    }

    /*
     * 超窄屏详情页只视觉收起菜单根名称，保留根 ICON、24px 点击区和可访问名称；
     * 根页面只有一级时仍完整显示“ICON + 名称”。
     */
    .mxj-breadcrumb .breadcrumb-item:first-child:not(:last-child) .mxj-breadcrumb-root-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .nav-tools {
        --nav-tools-gap: .35rem;
    }

    .mxj-mobile-nav-label {
        font-size: max(12px, .68rem);
    }
}

@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"] {
        touch-action: manipulation;
    }

    .sidenav-link:hover {
        transform: none;
    }

    [data-work-card] .mxj-work-cover-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    [data-work-card] .mxj-work-cover-wrap::after {
        opacity: .32;
    }
}