/* ============================================================
   移动端自适应增强（在 style.css 之后加载，用于覆盖其规则）
   目标：
     1. 兼容安卓 / iPhone 各类屏幕宽度；
     2. 宽表不再横向滚动，改为垂直卡片式排版；
     3. 控件、字号统一收缩；
     4. 禁止整页横向溢出；
   用法：app.js 会在加载后为页面内所有数据表自动添加
   class="responsive-card" 并为每个 td 注入 data-label。
   ============================================================ */

/* 顶层防溢出（在所有屏宽下都安全，重点约束移动端） */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
pre { white-space: pre-wrap; word-break: break-word; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }

/* 平板：统计面板 / 仪表盘改为单列，避免挤压 */
@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --topbar-height: 52px; }

    /* 抽屉侧边栏（style.css 通用布局备用） */
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.open .nav-item {
        justify-content: flex-start;
        padding-left: 20px;
    }
    .sidebar.open .nav-group-title { padding-left: 20px; }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
    }
    .mobile-overlay.active { display: block; }

    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-title { font-size: 17px; }
    .current-time { font-size: 13px; }
    .page-content { padding: 14px; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card { padding: 16px 10px; }
    .stat-value { font-size: 21px; }

    .summary-row { grid-template-columns: repeat(2, 1fr); }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .page-toolbar .btn { width: 100%; }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-form .form-input { width: 100% !important; }
    .filter-form .btn { width: 100%; }

    .form-row { grid-template-columns: 1fr; }

    .dash-filter .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-filter .filter-item {
        width: 100%;
        min-width: 0;
    }
    .dash-filter .filter-item select,
    .dash-filter .filter-item input { width: 100%; }

    /* 弹窗改为底部抽屉 */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .modal {
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 92vh;
        animation: modalUp 0.25s ease;
    }
    @keyframes modalUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .pagination { flex-wrap: wrap; }

    /* 禁止所有被原设计定义为「可横向滚动」的容器出现横向滚动 */
    .table-responsive,
    .card-body,
    .stage-table {
        overflow-x: visible;
    }
    .stage-table { max-height: none; }

    /* ============ 核心：表格垂直卡片化 ============ */
    table.responsive-card {
        width: 100% !important;
        min-width: 0 !important;
        display: block;
        border: none;
        background: transparent;
    }
    table.responsive-card thead { display: none; }
    table.responsive-card tbody,
    table.responsive-card tr { display: block; width: 100%; }
    table.responsive-card tr {
        background: #fff;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        padding: 4px 12px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-sm);
    }
    table.responsive-card td {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--border-light) !important;
        text-align: right !important;
        font-size: 14px;
        white-space: normal !important;
        word-break: break-word;
    }
    table.responsive-card tr td:last-child { border-bottom: none !important; }
    /* 人力明细行默认隐藏，由 JS 设置内联 display:block 展开（兼容折叠） */
    table.responsive-card tr.labor-detail-row { display: none; }
    table.responsive-card td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        text-align: left !important;
        font-weight: 600;
        color: var(--text-light);
        font-size: 13px;
        white-space: normal;
    }
    /* 单元格内表单控件占满，便于在手机上录入 */
    table.responsive-card td input,
    table.responsive-card td select,
    table.responsive-card td textarea {
        width: 100%;
        max-width: 100%;
        min-height: 34px;
    }
    table.responsive-card .action-cell { white-space: normal !important; }
    table.responsive-card .action-cell .btn {
        margin: 2px 4px 2px 0;
        font-size: 13px;
        padding: 4px 10px;
    }
    /* 合计行（tfoot）：在卡片模式下渲染为一行（左标签 + 右金额），避免破损 */
    table.responsive-card tfoot { display: block; width: 100%; }
    table.responsive-card tfoot tr {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        background: #fafafa;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-sm);
    }
    table.responsive-card tfoot td {
        display: inline-block !important;
        border: none !important;
        padding: 0 !important;
        text-align: right !important;
        font-size: 14px;
        white-space: normal !important;
    }
    table.responsive-card tfoot tr td:first-child {
        flex: 1 1 auto;
        text-align: left !important;
        font-weight: 600;
        color: #555;
    }

    /* 覆盖 style.css 原规则中的 min-width:600px，防止任何横向滚动残留 */
    .table, .pms-table, .pf-table { min-width: 0 !important; }

    /* 一些页面级微调 */
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    /* pms.php 项目统计卡片：去掉 480px 最小宽度，手机端撑满 */
    .pms-stat-grid { flex-direction: column !important; align-items: stretch !important; gap: 10px; }
    .pms-stat-card { min-width: 0 !important; flex: 1 1 100% !important; width: 100%; padding: 14px; }
    .pms-stat-card .value { font-size: 20px; }
    .pms-stat-grid form { margin-left: 0 !important; width: 100%; display: flex; gap: 8px; }
    .pms-stat-grid form .form-input { flex: 1; }

    /* 项目详情页概览卡片内部：允许文字换行 */
    .ov-chart-text, .stage-line, .si-amount, .budget-staff-item {
        white-space: normal !important;
    }

    /* 预算清单/费用表格表头已隐藏，对无 thead 兜底场景防溢出 */
    .pms-budget-table { table-layout: fixed; }

    /* ============ 人力预算 / 人力支出：移动端手风琴式紧凑列表 ============
       覆盖通用 responsive-card 的「逐 cell 卡片」样式，避免汉字竖排、逐行 label */
    #laborBudgetTable.responsive-card,
    #laborExpenseTable.responsive-card {
        display: table;
        border-collapse: collapse;
        background: transparent;
        border: none;
    }
    #laborBudgetTable.responsive-card thead,
    #laborExpenseTable.responsive-card thead { display: none; }
    #laborBudgetTable.responsive-card tbody,
    #laborExpenseTable.responsive-card tbody,
    #laborBudgetTable.responsive-card tfoot,
    #laborExpenseTable.responsive-card tfoot { display: block; width: 100%; }
    #laborBudgetTable.responsive-card tbody tr,
    #laborExpenseTable.responsive-card tbody tr,
    #laborBudgetTable.responsive-card tfoot tr,
    #laborExpenseTable.responsive-card tfoot tr {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: #fff;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    #laborBudgetTable.responsive-card tbody tr.labor-summary-row,
    #laborExpenseTable.responsive-card tbody tr.labor-summary-row {
        background: #f7f9fc;
        cursor: pointer;
    }
    #laborBudgetTable.responsive-card td,
    #laborExpenseTable.responsive-card td {
        display: inline;
        border: none;
        padding: 0;
        text-align: left !important;
        font-size: 14px;
        white-space: normal !important;
        background: transparent;
    }
    /* 隐藏通用卡片模式下注入的 data-label */
    #laborBudgetTable.responsive-card td::before,
    #laborExpenseTable.responsive-card td::before { display: none; }

    /* 汇总行：▸ 16人 · 112月 · ¥848,027.06 */
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(1),
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(1) {
        color: #1677ff;
        font-weight: 700;
        margin-right: 4px;
    }
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(2),
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(2),
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(3),
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(3) { display: none; }
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(4)::after,
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(4)::after { content: '人'; margin-left: 2px; }
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(5)::after,
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(5)::after { content: '月'; margin-left: 2px; }
    #laborBudgetTable.responsive-card tr.labor-summary-row td:nth-child(6),
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(6) {
        margin-left: auto;
        color: #f5222d;
        font-weight: 700;
        font-size: 15px;
    }

    /* 明细行：1. 刘芳 · 1人 · 7月 · ¥69,251.02 */
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(1),
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(1) {
        color: #888;
        min-width: 22px;
    }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(1)::after,
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(1)::after { content: '.'; }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(2),
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(2) { display: none; }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(3),
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(3) {
        font-weight: 600;
        min-width: 64px;
    }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(4)::after,
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(4)::after { content: '人 ·'; margin-left: 2px; }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(5)::after,
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(5)::after { content: '月'; margin-left: 2px; }
    #laborBudgetTable.responsive-card tr.labor-detail-row td:nth-child(6),
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(6) {
        margin-left: auto;
        color: #f5222d;
        font-weight: 600;
    }
    /* 新增「备注」列（第7列）：汇总行隐藏，明细行单独成行显示 */
    #laborExpenseTable.responsive-card tr.labor-summary-row td:nth-child(7) { display: none; }
    #laborExpenseTable.responsive-card tr.labor-detail-row td:nth-child(7) {
        display: block;
        width: 100%;
        margin-top: 2px;
        color: #888;
        font-size: 12px;
        font-weight: 400;
    }

    /* tfoot 合计行：左标签 + 右金额 */
    #laborBudgetTable.responsive-card tfoot tr,
    #laborExpenseTable.responsive-card tfoot tr {
        background: #fafafa;
        justify-content: space-between;
    }
    #laborBudgetTable.responsive-card tfoot td:nth-child(1),
    #laborExpenseTable.responsive-card tfoot td:nth-child(1) {
        font-weight: 600;
        color: #555;
    }
    #laborBudgetTable.responsive-card tfoot td:nth-child(2),
    #laborExpenseTable.responsive-card tfoot td:nth-child(2) {
        color: #f5222d;
        font-weight: 700;
    }

    /* 人员选择下拉：最小宽度取消，避免超出屏幕 */
    .budget-staff-dropdown { min-width: 0 !important; }
    .card-header h3 { font-size: 16px; }
    .card-body { padding: 12px; }

    .dash-tab {
        padding: 10px 16px;
        font-size: 15px;
    }

    .summary-cell { padding: 14px 10px; }
    .summary-value { font-size: 18px; }

    .filter-item label { font-size: 14px; }
    .filter-item select,
    .filter-item input[type="date"] { font-size: 15px; }

    .btn { font-size: 15px; padding: 7px 14px; }
    .btn-sm { font-size: 13px; }

    .form-group label { font-size: 14px; }
    .form-input { font-size: 15px; height: 38px; }

    .tag, .status-badge { font-size: 12px; padding: 1px 8px; }

    .page-link {
        min-width: 28px;
        height: 28px;
        font-size: 14px;
    }

    /* 面包屑 & 顶部右侧间距 */
    .pms-breadcrumb { font-size: 13px; }
    .pms-topbar { padding: 0 12px; }
    .pms-topbar-actions { gap: 10px; }
}

@media (max-width: 480px) {
    .page-content, .pms-page-content { padding: 12px; }
    .topbar-title { font-size: 16px; }
    .current-time { display: none; }
    .stat-value { font-size: 20px; }

    /* 过窄屏幕：工具栏按钮 / 筛选全部单列 */
    .page-toolbar .btn { width: 100%; }
    .pms-toolbar > * { flex-basis: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .summary-row { grid-template-columns: repeat(2, 1fr); }

    table.responsive-card td { font-size: 13px; }
    table.responsive-card td::before { font-size: 12px; }

    /* 登录页：窄屏收紧卡片内边距 */
    .login-card { padding: 28px 20px; border-radius: 12px; }
    .login-header .logo { font-size: 40px; }
    .login-header h1 { font-size: 20px; }
    .captcha-row { flex-wrap: wrap; }
    .captcha-row input { min-width: 0; }
    .captcha-img { width: 100%; height: auto; }
}