/* ============================================================
   mobile.css — 手机端适配（外网 Tailscale 访问场景）
   断点：820px（抽屉侧栏） / 480px（紧凑微调）
   原则：只加 media query，不动桌面端任何现有规则；
        内联样式覆盖一律走属性选择器 + !important
   ============================================================ */

/* ---------- 登录页 ---------- */
@media (max-width: 820px) {
    .login-card {
        width: min(460px, 92vw);
        padding: 36px 24px;
        border-radius: 20px;
    }
    .login-title { font-size: 22px !important; }
}

/* ---------- 布局骨架：侧栏变抽屉 ---------- */
@media (max-width: 820px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 264px;
        z-index: 1300;
        transform: translateX(-105%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: none;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 12px 0 40px rgba(15, 12, 41, 0.35);
    }
    /* 手机上忽略 collapsed 折叠语义（宽度固定） */
    .sidebar.collapsed { width: 264px; }
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .menu-label,
    .sidebar.collapsed .sidebar-footer-text {
        display: inline;
    }
    .sidebar.collapsed .sidebar-logo { justify-content: flex-start; }
    .sidebar.collapsed .menu-item { justify-content: flex-start; }

    .main-content { width: 100%; }

    .header {
        padding: 0 12px;
        height: 56px;
    }
    .header .breadcrumb {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-content { padding: 14px 12px 24px; }

    /* 抽屉遮罩（JS 注入 #mobileOverlay） */
    #mobileOverlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 12, 41, 0.45);
        z-index: 1250;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    #mobileOverlay.show { opacity: 1; pointer-events: auto; }
}

/* ---------- 通用控件 ---------- */
@media (max-width: 820px) {
    .modal-content {
        width: 94%;
        max-height: 88vh;
        padding: 18px 16px;
    }
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }
    .btn { touch-action: manipulation; }
    .data-table th, .data-table td { padding: 9px 10px; }
}

/* ---------- BPM 待办/已办 ---------- */
@media (max-width: 820px) {
    /* Hero 区收紧 */
    #bpmTodoPage .bt-hero { padding: 14px 0 10px; }
    #bpmTodoPage .bt-hero-in { padding: 0 4px; }
    #bpmTodoPage .bt-hero-top { flex-direction: column; align-items: stretch; gap: 12px; }
    #bpmTodoPage .bt-title { font-size: 22px; }
    #bpmTodoPage .bt-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    #bpmTodoPage .bt-stat { padding: 10px 8px; }
    #bpmTodoPage .bt-stat .v { font-size: 20px; }
    #bpmTodoPage .bt-stat .k { font-size: 11px; }

    /* 工具头允许换行 */
    #bpmTodoPage .bt-cardhead { padding: 12px 14px; }
    #bpmTodoPage .bt-tools { flex-wrap: wrap; gap: 8px; }
    #bpmTodoPage .bt-search { flex: 1 1 100%; }
    #bpmTodoPage .bt-search input { width: 100%; }
    #bpmTodoPage .bt-tabs { flex-wrap: wrap; }
    #bpmTodoPage .bt-subrow { flex-wrap: wrap; }

    /* 卡片视图：单列铺满 */
    #bpmTodoPage .bt-tbody {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #bpmTodoPage .bt-row.bt-card {
        grid-template-columns: 22px minmax(0, 1fr) auto !important;
        padding: 11px 12px !important;
        gap: 0 8px !important;
        border-radius: 12px !important;
    }

    /* 行（表格）视图：横向滚动保对齐 */
    #bpmTodoPage .bt-rows-wrap { overflow-x: auto; }
    #bpmTodoPage .bt-rows-wrap .bt-ckcell-row,
    #bpmTodoPage .bt-rows-wrap .bt-grid { min-width: 640px; }

    /* 已办列表：横向滚动保对齐 */
    #bpmTodoPage .bt-done-list { overflow-x: auto; }
    #bpmTodoPage .bt-done-thead,
    #bpmTodoPage .bt-done-row { min-width: 600px; }

    /* 筛选行（已办）竖排 */
    #bpmTodoPage .bt-done-wrap .filter-row,
    #bpmTodoPage .bt-done-filters { flex-wrap: wrap; gap: 8px; }
    #bpmTodoPage .bpm-done-date,
    #bpmTodoPage #bpmDoneSearchInput { max-width: 100%; }
}

/* ---------- BPM 详情弹窗：全屏化 ---------- */
@media (max-width: 820px) {
    #bpmTodoDetailModal { align-items: stretch; }
    #bpmTodoDetailModal .bpm-detail-modal.bd3 {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }
    #bpmTodoDetailModal .bd3 .bpm-detail-body {
        grid-area: 3 / 1 / 4 / 2;
        padding: 12px 12px 24px;
    }
    #bpmTodoDetailModal .bd3 .modal-footer {
        grid-area: 4 / 1 / 5 / 2;
        border-left: none;
        border-top: 1px solid #eef0f7;
        max-height: 42vh;
    }
    /* 单列后内部双栏布局全部压成单列 */
    #bpmTodoDetailModal .bd-cols { grid-template-columns: minmax(0, 1fr) !important; }
    #bpmTodoDetailModal .bd-profile { grid-template-columns: minmax(0, 1fr) !important; }
    #bpmTodoDetailModal .bd-profile-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #bpmTodoDetailModal .bpm-detail-body.has-rail {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ---------- 考勤管理 ---------- */
@media (max-width: 820px) {
    /* 页面头（内联 flex space-between）允许换行 */
    #attendancePage div[style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }
    #attendancePage h2 { font-size: 18px !important; }

    /* Tab 条横向滚动 */
    .att-tab-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .att-tab-wrap::-webkit-scrollbar { display: none; }
    .att-tab { white-space: nowrap; flex-shrink: 0; }

    /* 内联栅格压缩 */
    #attendancePage div[style*="grid-template-columns:200px 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #attendancePage div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #attendancePage div[style*="grid-template-columns:repeat(6,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* 内联工具栏留白收紧 */
    #attendancePage div[style*="padding:12px 18px"] { padding: 10px 12px !important; }
}

/* ---------- 薪资单 ---------- */
@media (max-width: 820px) {
    .salary-filter-group { flex: 1 1 46%; min-width: 0; }
    .salary-filter-group .salary-select,
    .salary-filter-group .salary-search-input,
    .salary-filter-group .salary-search-select { width: 100% !important; }
    .salary-period-range { flex-wrap: nowrap; }
    .salary-period-range .salary-select { flex: 1; min-width: 0; }

    .salary-stats-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .salary-stat-card { padding: 12px 14px; }
    .salary-stat-value { font-size: 17px; }

    /* 表格横向滚动（容器本身已有 overflow-x:auto，这里只保证列不被压死） */
    .salary-table { min-width: 720px; }
    .salary-table thead th, .salary-table td { padding: 10px 10px; white-space: nowrap; }

    .salary-toolbar-actions { padding: 10px 12px; flex-wrap: wrap; }

    .salary-detail-content { width: 96%; max-height: 92vh; border-radius: 12px; }
}

/* ---------- 窄屏（≤480）微调 ---------- */
@media (max-width: 480px) {
    .page-content { padding: 10px 8px 20px; }
    #bpmTodoPage .bt-stats { grid-template-columns: repeat(3, 1fr); }
    #bpmTodoPage .bt-stat .k { font-size: 10px; }
    #bpmTodoDetailModal .bd-profile-main { grid-template-columns: 1fr !important; }
    .salary-filter-group { flex: 1 1 100%; }
    .salary-stats-bar { grid-template-columns: repeat(2, 1fr) !important; }
}