/* =====================================================================
 * mobile.css — UI-P3-2 移动端高频页重排（叠加层，最后加载）
 * 桌面端（≥900px）零改动；仅在 ≤899px 把 PC 后台重排为单手可用布局。
 * 策略：侧栏抽屉（沿用 router.js 的 .mobile-open/.sidebar-overlay）
 *       + 内容单列 + 筛选/表单堆叠 + 表格横向滚动（首列粘性）+ 弹窗近全屏
 *       + 触控目标≥40px + 安全区。不改动任何 DOM 结构与桌面规则。
 *
 * 【全站统一响应式断点令牌（纯 CSS 无法在 @media 用变量，此处为唯一约定，新增媒体查询只能取这五档）】
 *   xl / 桌面紧凑：max-width:1280px（窄于宽屏桌面即收敛多列、抽屉化，吸收旧 1200/1080）
 *   lg / 平板主档：max-width:899px（与 min-width:900px 互补，侧栏抽屉、PC→单手布局分界）
 *   md / 小平板·大手机：max-width:768px
 *   sm / 手机竖屏：max-width:640px（吸收旧 600）
 *   xs / 超窄屏：max-width:480px（吸收旧 420/380）
 * 禁止再引入 1200/1080/600/420/380 等零散断点；print / prefers-reduced-motion / hover 等特性查询不受此限。
 * ===================================================================== */


/* ============ 断点一：平板/大手机 ≤899px（与侧栏抽屉断点一致） ============ */
@media (max-width: 899px) {
    /* ---- 1. 主框架与顶栏 ---- */
    .main-content { margin-left: 0 !important; padding: 10px 10px 88px; min-width: 0; }
    .page-content { gap: 10px; min-width: 0; }
    .header {
        position: sticky; top: 0; z-index: var(--z-header, 1000);
        padding: 8px 10px; gap: 8px; min-height: 52px;
        border-radius: 0 0 10px 10px;
    }
    .header-title { font-size: 15px; line-height: 1.3; }
    .hamburger-btn { width: 40px; height: 40px; flex: 0 0 40px; }   /* 触控目标 40 */
    .header-bell { width: 40px; height: 40px; }
    .header-user { min-height: 40px; padding: 4px 6px; gap: 0; }
    .header-user .user-name { display: none; }   /* 窄屏只留头像，避免用户名顶出屏幕 */
    .header-center { display: none; }            /* 顶栏全局搜索在窄屏收起，保留空间给面包屑 */
    .breadcrumb-bar { flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; font-size: 12px; }

    /* 抽屉侧栏宽度收敛为 84vw，避免整屏占满；位移用 -100% 保证按实际宽度完全隐藏 */
    .sidebar {
        width: 84vw !important; max-width: 320px;
        transform: translateX(-100%) !important;
    }
    .sidebar.mobile-open { transform: translateX(0) !important; }
    .sidebar.sidebar-collapsed { width: 84vw !important; transform: translateX(-100%) !important; }
    .sidebar.sidebar-collapsed.mobile-open { transform: translateX(0) !important; }
    .sidebar-overlay { z-index: var(--z-sidebar-mask, 1190); }

    /* ---- 2. 卡片 / 统计区：两列紧凑 ---- */
    .stat-cards,
    .stat-cards.two-col,
    .stat-cards.three-col,
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .stat-card { padding: 12px; border-radius: 12px; }
    .stat-card .stat-value, .stat-card .num { font-size: 19px; }
    .stat-card .stat-label, .stat-card .label { font-size: 12px; }
    .card { border-radius: 12px; }
    .card-body { padding: 12px; }
    /* 经营驾驶舱 KPI / 图表单列堆叠 */
    .cp-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
    .cp-grid, .cp-charts { grid-template-columns: 1fr !important; }
    .cp-chart-card canvas { max-width: 100%; }

    /* ---- 3. 工具条 / 筛选区：纵向堆叠、输入整宽、按钮易点 ---- */
    .toolbar,
    .list-toolbar,
    .filter-bar {
        flex-direction: column; align-items: stretch !important;
        gap: 8px; padding: 10px; border-radius: 10px;
    }
    .toolbar > *,
    .list-toolbar > *,
    .filter-bar > * { width: 100%; max-width: none; margin-left: 0 !important; }
    .toolbar input, .toolbar select,
    .list-toolbar input, .list-toolbar select,
    .filter-bar input, .filter-bar select,
    .form-input, .form-control, .search-input { width: 100%; min-height: 40px; font-size: 15px; /* ≥16 防 iOS 聚焦缩放，这里15配合下面420 */ }
    .date-range { width: 100%; display: flex; gap: 6px; }
    .date-range input { min-width: 0; flex: 1 1 0; }
    /* 按钮行：横向可滑、不挤压换行错乱 */
    .toolbar-actions, .list-toolbar .toolbar-actions {
        display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
    }
    .toolbar-actions .btn,
    .toolbar-actions button,
    .list-toolbar .btn { min-height: 40px; flex: 1 1 auto; white-space: nowrap; }
    .search-btn, .btn-reset { min-height: 40px; }

    /* ---- 4. 数据表格：外层横滑、首列粘性、字号收敛 ---- */
    .data-table-wrapper, .table-wrap, .tk-table-wrap, .unified-list-card {
        width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }
    .data-table, table.tk-table, table { min-width: 720px; }
    .data-table th, .data-table td, table th, table td { padding: 9px 10px; font-size: 13px; white-space: nowrap; }
    /* 列表/日历等切换 Tab 可横滑 */
    .tabs, .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tab-btn, .tabs > * { flex: 0 0 auto; min-height: 40px; }

    /* ---- 5. 分页：放大可点、省略信息 ---- */
    .pagination, .tk-pager, .pagination-btns { flex-wrap: wrap; gap: 6px; padding: 10px; justify-content: center; }
    .pagination button, .tk-pager button, .pagination-btns button { min-width: 40px; min-height: 40px; }

    /* ---- 6. 弹窗 / 对话框：近全屏底部抽屉式 ---- */
    /* 20260911：overlay 贴底；.modal 用 margin-top:auto 覆盖桌面 margin-block:auto，保证抽屉贴底、可上推滚动 */
    .modal-overlay { align-items: flex-end; padding: 0; }
    /* SModal 直接用 .modal 作为抽屉容器：贴底、上圆角、内部 flex 列（body 滚动、footer 吸底） */
    .modal {
        padding: 0; margin-block: auto 0; scrollbar-gutter: auto;
        width: 100%; max-width: 100%; max-height: 92vh;
        border-radius: 16px 16px 0 0;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .modal-content, .modal > div[class*="content"], .modal .modal-panel {
        width: 100%; max-width: 100%; max-height: 92vh;
        border-radius: 16px 16px 0 0; margin: 0;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .modal-header { padding: 14px 16px; flex: 0 0 auto; }
    .modal-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
    .modal-footer {
        padding: 12px 16px; flex: 0 0 auto;
        display: flex; gap: 10px; position: sticky; bottom: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .modal-footer .btn, .modal-footer button { flex: 1 1 0; min-height: 44px; }
    .modal-close, .confirm-close { width: 40px; height: 40px; }
    /* 确认框居中但拉宽 */
    .confirm-dialog { width: 92vw; max-width: 420px; }
    .confirm-footer .btn { min-height: 42px; }

    /* ---- 7. 表单：标签上置、字段整宽堆叠 ---- */
    .form-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .form-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .form-row > label, .form-group > label { width: 100%; text-align: left; }
    .form-group { margin-bottom: 12px; }
    .form-inline { flex-wrap: wrap; gap: 8px; }

    /* ---- 8. AI 悬浮球与底部安全区 ---- */
    .ai-assistant-fab { width: 52px; height: 52px; bottom: calc(20px + env(safe-area-inset-bottom)); right: 16px; }
    .assistant-panel, .ai-panel {
        width: 100vw !important; max-width: 100vw !important; height: 100dvh !important;
        right: 0 !important; bottom: 0 !important; border-radius: 0 !important;
    }

    /* ---- 9. 通用两栏/多栏布局强制单列 ---- */
    .overview-row, .detail-grid, .two-col-grid, .info-grid { grid-template-columns: 1fr !important; }
    .flex-row, .row-between { flex-wrap: wrap; }
}

/* ============ 断点二：手机竖屏 ≤640px（标准 sm 档）：统计卡两列、字号再收 ============ */
@media (max-width: 640px) {
    .main-content { padding: 8px 8px 84px; }
    /* 统计卡保两列更紧凑（数字普遍不长），KPI 同样两列 */
    .stat-cards,
    .stat-cards.two-col,
    .stat-cards.three-col,
    .dash-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
    .cp-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .header-title { font-size: 14px; }
    .data-table, table.tk-table, table { min-width: 640px; }
    /* 输入 16px 防 iOS Safari 聚焦自动放大 */
    .toolbar input, .toolbar select, .list-toolbar input, .list-toolbar select,
    .filter-bar input, .filter-bar select, .form-input, .form-control, .search-input,
    .modal-body input, .modal-body select, .modal-body textarea { font-size: 16px; }
}

/* ============ 断点三：超窄屏 ≤480px（标准 xs 档） ============ */
@media (max-width: 480px) {
    .cp-kpis { grid-template-columns: 1fr !important; }
    .stat-card .stat-value { font-size: 18px; }
}