/* ============================================================
* responsive-patch.css — 移动端通用修复补丁
*
* 用途: 修复手机端(≤768px)表格/输入框的常见布局问题。
* 任意页面在 中、自身样式之后引用即可:
*
* 需配合
*
* 核心修复:
* 1. 表格横向滚动: 用 min-width:max-content 而非 width:max-content —
* 后者会使表格内 width:100% 的输入框坍缩成固有最小宽度(约22px), 手机端过窄
* 2. 输入框/下拉框/文本域: 手机端占满可用宽度, 避免过窄导致值显示不全
* ============================================================ */
@media (max-width: 768px) {
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
width: 100%;
min-width: max-content;
}
th, td { padding: 5px 4px; white-space: nowrap; }
input[type=text], input[type=password], input[type=number],
input[type=datetime-local], input[type=tel], input[type=email],
select, textarea {
width: 100% !important;
max-width: 100% !important;
font-size: 12px;
padding: 4px 6px;
}
}
/* ============================================================
* 记录表格卡片化: 手机端每行转一张卡片(左侧列名, 右侧值), thead 隐藏。
* 由页面 JS 依据 thead 列名给 td 注入 data-label 并加 mobile-cards 类;
* 也可直接在 上手动加 mobile-cards 类并在 td 上写 data-label。
* ============================================================ */
@media (max-width: 768px) {
table.mobile-cards { min-width: 0; display: block; }
table.mobile-cards thead { display: none; }
table.mobile-cards tbody { display: block; }
table.mobile-cards tr { display: block; margin-bottom: 10px; padding: 6px 10px 4px; background: #fff; border: 1px solid #e5e8ec; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
table.mobile-cards td { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #f0f2f5; white-space: normal; text-align: right; }
table.mobile-cards td:last-child { border-bottom: none; }
table.mobile-cards td::before { content: attr(data-label); flex: 0 0 40%; max-width: 40%; margin-right: 8px; font-weight: 600; color: #666; text-align: left; white-space: normal; word-break: break-word; }
table.mobile-cards td:not([data-label])::before { display: none; }
table.mobile-cards td[colspan] { display: block; text-align: center; }
table.mobile-cards .row-actions, table.mobile-cards td .btn { white-space: nowrap; }
}