/* 手机 / 小平板（≤900px）。桌面布局不进这些规则。
   大量业务页用内联 grid，这里用 !important 只在窄屏覆盖。 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sidebar-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 900px) {
    html, body {
        overscroll-behavior-y: none;
    }

    .top-nav {
        padding-top: 10px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .sidebar {
        height: var(--app-height, 100vh);
        max-height: var(--app-height, 100vh);
        padding-top: 12px;
        padding-bottom: 12px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .sidebar .nav-item,
    .btn,
    .sidebar-toggle,
    .global-notice-bell,
    .nav-back-btn {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(124, 58, 237, 0.16);
    }

    .main-content {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: calc(96px + var(--keyboard-inset, 0px));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
    }

    .card {
        padding: 16px;
    }

    .card h2,
    .module h1 {
        font-size: 20px;
        overflow-wrap: anywhere;
    }

    /* 统计卡：三列及以上收成两列 */
    .main-content [style*="repeat(3"],
    .main-content [style*="repeat(4"],
    .main-content [style*="repeat(5"],
    .main-content [style*="repeat(6"],
    .main-content [style*="1fr 1fr 1fr"],
    [id$="Modal"] [style*="repeat(3"],
    [id$="Modal"] [style*="repeat(4"],
    [id$="Drawer"] [style*="repeat(3"],
    [id$="Drawer"] [style*="repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .main-content [style*="1fr 1fr 1fr"],
    [id$="Modal"] [style*="1fr 1fr 1fr"],
    [id$="Drawer"] [style*="1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .main-content [style*="minmax(300px"],
    .main-content [style*="minmax(280px"],
    .main-content [style*="minmax(320px"],
    .main-content [style*="minmax(260px"],
    .main-content [style*="minmax(240px"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
    }

    .main-content [style*="display:flex"],
    .main-content [style*="display: flex"],
    [id$="Modal"] [style*="display:flex"],
    [id$="Modal"] [style*="display: flex"],
    [id$="Drawer"] [style*="display:flex"],
    [id$="Drawer"] [style*="display: flex"] {
        flex-wrap: wrap !important;
        max-width: 100%;
    }

    .main-content [style*="min-width: 150px"],
    .main-content [style*="min-width:150px"],
    .main-content [style*="min-width: 160px"],
    .main-content [style*="min-width:160px"],
    .main-content [style*="min-width: 180px"],
    .main-content [style*="min-width:180px"],
    .main-content [style*="min-width: 200px"],
    .main-content [style*="min-width:200px"],
    .main-content [style*="min-width: 220px"],
    .main-content [style*="min-width:220px"],
    .main-content [style*="min-width: 240px"],
    .main-content [style*="min-width:240px"],
    .main-content [style*="min-width: 250px"],
    .main-content [style*="min-width:250px"],
    .main-content [style*="min-width: 280px"],
    .main-content [style*="min-width:280px"],
    .main-content [style*="min-width: 300px"],
    .main-content [style*="min-width:300px"],
    [id$="Modal"] [style*="min-width:200px"],
    [id$="Modal"] [style*="min-width: 200px"],
    [id$="Drawer"] [style*="min-width:200px"],
    [id$="Drawer"] [style*="min-width: 200px"] {
        min-width: 0 !important;
        flex-basis: 100%;
    }

    .android-hscroll,
    .main-content div:has(table),
    .main-content div:has(.table),
    [id$="Modal"] div:has(table),
    [id$="Drawer"] div:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .chart-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        height: min(420px, 70vw) !important;
    }

    .module img,
    .module video,
    .module iframe,
    .card img,
    .modal-body img {
        max-width: 100%;
        height: auto;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 固定宽度抽屉铺满屏幕，避开刘海 */
    #taskDetailDrawer,
    #noticeDrawer,
    #meetingDrawer,
    #weeklyReportDrawer,
    #modelDetailDrawer,
    #annotationDetailDrawer,
    #knowledgeDetailDrawer,
    [id$="Drawer"][style*="width: 550px"],
    [id$="Drawer"][style*="width:550px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    [id$="Modal"],
    [id$="modal"].modal {
        padding: 8px;
        box-sizing: border-box;
    }

    .modal-content,
    [id$="Modal"] > div,
    [id$="modal"] > div {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 24px);
        max-height: calc(var(--app-height, 100vh) - 16px - var(--keyboard-inset, 0px));
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal {
        padding: 8px;
    }

    .config-tabs,
    .lit-modal-tabs,
    [class$="-tabs"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .config-tabs .tab-btn,
    .lit-modal-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .w-e-toolbar,
    .w-e-bar {
        flex-wrap: wrap !important;
        height: auto !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea,
    .login-box input[type="text"],
    .login-box input[type="password"],
    .login-box select {
        font-size: 16px !important;
        min-height: 44px;
    }

    textarea {
        min-height: 96px;
    }

    .login-box .login-btn,
    .sidebar-toggle,
    .global-notice-bell,
    .nav-back-btn {
        touch-action: manipulation;
    }

    .user-info-bar .btn {
        min-height: 40px;
        padding: 6px 10px !important;
    }

}

@media (max-width: 640px) {
    /* 两列表单改成一列；「1fr 1fr 1fr」仍保持上面的两列 */
    .main-content [style*="grid-template-columns:1fr 1fr"],
    .main-content [style*="grid-template-columns: 1fr 1fr"],
    [id$="Modal"] [style*="grid-template-columns:1fr 1fr"],
    [id$="Modal"] [style*="grid-template-columns: 1fr 1fr"],
    [id$="Drawer"] [style*="grid-template-columns:1fr 1fr"],
    [id$="Drawer"] [style*="grid-template-columns: 1fr 1fr"],
    .lit-form-grid,
    .lit-filters,
    .doc-upload-row,
    .doc-ai-ports-grid,
    .portal-members .pm-grid,
    .portal-about .pa-faculty {
        grid-template-columns: 1fr !important;
    }

    .main-content [style*="1fr 1fr 1fr"],
    [id$="Modal"] [style*="1fr 1fr 1fr"],
    [id$="Drawer"] [style*="1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    .main-content [style*="repeat(3"],
    .main-content [style*="repeat(4"],
    .main-content [style*="repeat(5"],
    .main-content [style*="repeat(6"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .user-info-bar {
        padding: 2px 4px !important;
        gap: 4px;
    }

    .card {
        padding: 12px;
    }

    .sidebar-toggle,
    .global-notice-bell,
    .nav-back-btn {
        width: 40px;
        min-width: 40px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .main-content [style*="minmax(240px"],
    .main-content [style*="minmax(260px"],
    .main-content [style*="minmax(280px"],
    .main-content [style*="minmax(300px"],
    .main-content [style*="minmax(320px"] {
        grid-template-columns: 1fr !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .nav-item:hover,
    .submenu .nav-item:hover,
    .btn:hover,
    .chat-stat-card:hover,
    .doc-ai-port:hover,
    .portal-members .pm-card:hover,
    .portal-about .pa-dir:hover {
        transform: none;
    }

    .btn:active,
    .nav-item:active,
    .sidebar-toggle:active {
        opacity: 0.72;
    }
}