/* 通用贸易管理平台 - Basky
   基础样式：PC 与移动双风格，768px 断点自动切换 */

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #242424;
    background: #f5f6f8;
}
a { color: #1a56db; text-decoration: none; }
code { background: #eef0f3; padding: 1px 4px; border-radius: 3px; }

/* ===== 顶栏 ===== */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: 56px; background: #ffffff; border-bottom: 1px solid #e5e7eb;
}
.brand { font-weight: 600; }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.uname { font-weight: 600; }
.role { color: #6b7280; }

/* ===== 布局 ===== */
.layout { display: flex; min-height: calc(100vh - 96px); }
.sidebar {
    width: 180px; padding: 12px 8px; background: #ffffff; border-right: 1px solid #e5e7eb;
    display: flex; flex-direction: column; gap: 2px;
}
.menu-item { padding: 9px 12px; border-radius: 6px; color: #374151; }
.menu-item:hover { background: #f3f4f6; }
.menu-item.active { background: #e8efff; color: #1a56db; font-weight: 600; }
.content { flex: 1; padding: 20px; }
.foot { padding: 10px 20px; color: #9ca3af; font-size: 12px; }

/* ===== 卡片与统计 ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.stat-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; }
.stat-label { color: #6b7280; font-size: 13px; }
.stat-value { font-size: 20px; font-weight: 600; margin-top: 6px; }
.notice { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; }

/* ===== 表单 ===== */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; color: #374151; }
input, select, textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 14px; font-family: inherit; background: #ffffff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c7d7ff; border-color: #1a56db; }
.btn-primary {
    background: #1a56db; color: #ffffff; border: 0; border-radius: 6px;
    padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.btn-block { width: 100%; }
.alert { background: #fdecec; color: #b42318; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }

/* ===== 登录页 ===== */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card { width: 100%; max-width: 360px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 26px; }
.login-title { margin: 0 0 18px; font-size: 18px; }
.login-tip { color: #6b7280; font-size: 12px; margin-bottom: 0; }

/* ===== 表格 ===== */
table.grid { width: 100%; border-collapse: collapse; background: #ffffff; }
table.grid th, table.grid td { border-bottom: 1px solid #e5e7eb; padding: 9px 10px; text-align: left; }
table.grid th { background: #f9fafb; font-weight: 600; white-space: nowrap; }

/* ===== 分页 ===== */
.pager { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pager-info { color: #6b7280; font-size: 13px; }

/* ===== 链接型按钮 ===== */
.link-danger {
    border: 0; background: none; color: #b42318; cursor: pointer;
    padding: 0; font-size: 14px; margin-left: 8px; font-family: inherit;
}

/* ===== 附件 ===== */
.attach-list { display: flex; gap: 12px; flex-wrap: wrap; }
.attach-item {
    width: 132px; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 8px; background: #fff; text-align: center;
}
.attach-item img { width: 100%; height: 92px; object-fit: cover; border-radius: 4px; display: block; }
.attach-name {
    font-size: 12px; color: #6b7280; margin-top: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-preview { display: block; cursor: zoom-in; }
.attach-empty { color: #9ca3af; font-size: 13px; }

/* ===== 图片预览弹层 ===== */
.attach-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
/* 关键修复：.attach-modal 的 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，
   导致弹层一直铺满屏幕且关不掉。这里显式保证 hidden 时一定不显示。 */
.attach-modal[hidden] { display: none !important; }
.attach-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); }
.attach-modal-box { position: relative; max-width: 92vw; max-height: 92vh; }
.attach-modal-box img { max-width: 92vw; max-height: 92vh; border-radius: 6px; display: block; }
.attach-modal-close {
    position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
    border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
    background: #fff; color: #374151;
}

/* ===== 移动端风格（768px 断点） ===== */
@media (max-width: 768px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: auto; flex-direction: row; overflow-x: auto; border-right: 0;
        border-bottom: 1px solid #e5e7eb; padding: 8px;
    }
    .menu-item { white-space: nowrap; }
    .content { padding: 14px; }
    .topbar { padding: 0 14px; }
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

    /* ------------------------------------------------------------------
       窄屏表格：改成「一行一张卡片」。
       关键点：整行不再横向滚动，也不允许 nowrap —— 采购 9 列、销售 12 列、
       库存流水 11 列，硬挤在一行既看不清也会把整页撑破。
       字段名由 assets/js/mobile-table.js 写进 td 的 data-label。
       ------------------------------------------------------------------ */
    table.grid {
        display: block;
        width: 100%;
        white-space: normal;
        border-collapse: separate;
        background: transparent;
    }
    table.grid thead { display: none; }
    table.grid tbody { display: block; width: 100%; }
    table.grid tr {
        display: block;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    table.grid td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        border: 0;
        padding: 5px 0;
        white-space: normal;
        word-break: break-word;
        text-align: right;
    }
    table.grid td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.7;
        text-align: left;
    }
    /* 完全空的单元格没必要占一行 */
    table.grid td:empty { display: none; }

    /* 「暂无数据」的合并单元格：居中显示，不要做成字段行 */
    table.grid td[colspan] {
        display: block;
        text-align: center;
        color: #9ca3af;
    }
    table.grid td[colspan]::before { content: none; }

    /* 勾选列单独放卡片顶部，做成一条细横线 */
    table.grid td.col-check {
        justify-content: flex-start;
        border-bottom: 1px dashed #eef0f3;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    table.grid td.col-check::before { content: none; }
    table.grid td.col-check input[type="checkbox"] { width: 18px; height: 18px; }

    /* 产品明细这类长内容改成整行左对齐，换行显示 */
    table.grid td.cell-items {
        display: block;
        max-width: 100%;
        text-align: left;
    }
    table.grid td.cell-items::before {
        display: block;
        max-width: none;
        margin-bottom: 2px;
    }

    /* 操作列允许换行，按钮/链接之间留出点击间距 */
    table.grid td:last-child { flex-wrap: wrap; }
    table.grid td:last-child a,
    table.grid td:last-child button,
    table.grid td:last-child form { margin: 2px 0; }

    /* 附件列表在窄屏下也能排得下 */
    .attach-item { width: calc(50% - 6px); }
    .attach-list { gap: 8px; }

    /* 兜底：单号、邮箱这类长串不要撑破卡片 */
    .content, .notice, .stat-card, .export-bar, .bulk-bar, .order-total-bar { overflow-wrap: anywhere; }
    .pager { flex-wrap: wrap; }
    img, video { max-width: 100%; height: auto; }
}

/* ===== 导出条 ===== */
.export-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 9px 14px; margin-bottom: 12px; font-size: 13px;
}
.export-bar a { font-weight: 600; }
.muted { color: #6b7280; font-size: 13px; }

/* ===== 产品 / 型号自动匹配输入框 ===== */
.product-picker-input {
    margin-bottom: 6px; background: #fbfdff; border-style: dashed;
}
.product-picker-input::placeholder { color: #9ca3af; }

/* ===== 移动端布局（view/mobile/layout.php） ===== */
body.theme-mobile .sidebar {
    width: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid #e5e7eb; padding: 8px;
}
body.theme-mobile .menu-item { white-space: nowrap; }
body.theme-mobile .layout { flex-direction: column; }
body.theme-mobile .content { padding: 12px; }
body.theme-mobile .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
body.theme-mobile .field { flex: 1 1 100% !important; }
body.theme-mobile input, body.theme-mobile select, body.theme-mobile textarea { font-size: 16px; }

/* 说明：手机端的表格样式统一放在上面的 768px 断点里（卡片式）。
   这里刻意不再写 table.grid 的横滚规则 —— 原来那句 display:block + white-space:nowrap
   才是把布局撑破的元凶。 */

/* ===== C 系列：显示布局补强（PC + 移动端） =====
   这一段只改布局/间距/文案呈现，不动任何业务逻辑，也不引入新的配色，
   目的是把「挤、错位、被切掉」这几类问题收掉。 */

/* C6 PC 查询区：同一行的字段等宽对齐，按钮不被挤到下一行中间 */
.notice > form > div,
form.notice > div {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.notice > form > div > .field,
form.notice > div > .field { margin-bottom: 0; min-width: 160px; }

/* C8 明细页字段对齐：标签固定宽度，数值左对齐，同组信息成列 */
.detail-head .k { display: inline-block; min-width: 96px; }
.detail-head > div { display: flex; align-items: baseline; gap: 4px; }

/* C9 空数据 / 无权限：统一样式的空态块 */
.empty-state {
    padding: 22px 16px; text-align: center;
    color: #6b7280; font-size: 13px; line-height: 1.9;
    background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 8px;
}

/* C5 图表适配：容器不溢出，高度受限 */
.chart-box, [data-chart] { max-width: 100%; }
.chart-box canvas, .chart-box svg,
[data-chart] canvas, [data-chart] svg { max-width: 100% !important; height: auto !important; }

/* C10 分页与批量操作条：长列表滚动时始终可见，勾选后提示不会被滚走 */
.bulk-bar { position: sticky; top: 0; z-index: 6; }
.pager { position: sticky; bottom: 0; background: #ffffff; z-index: 5; }

/* ==================== 库存页：列表导航（2026-09）====================
   四个按钮（结存汇总 / 出入库流水 / 盘点库存 / 盘点历史）放在导出栏下方，
   点哪个就切到那一段并自动滚动过去（滚动由 assets/js/inventory.js 负责）。
   以前它们是页面中部的三个小标签，位置随内容长度浮动、还要自己找。 */
.inv-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.inv-nav-btn {
    display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px;
    background: #f3f4f6; color: #374151; border: 1px solid transparent; text-decoration: none;
}
.inv-nav-btn:hover { background: #e8efff; color: #1a56db; }
.inv-nav-btn.active { background: #e8efff; color: #1a56db; font-weight: 600; border-color: #c7d7ff; }

/* 每段列表上方的"当前是什么列表"说明 */
.inv-list-title {
    margin: 4px 0 10px; padding: 8px 12px; font-size: 13px;
    background: #f7faff; border: 1px solid #c7d7ff; border-radius: 8px; color: #374151;
}
.inv-list-title > span.muted { display: block; font-size: 12px; margin-top: 2px; }
/* 锚点定位时留出上边距，避免列表标题贴在 sticky 顶栏下面 */
.inv-block { scroll-margin-top: 72px; }

@media (max-width: 768px) {
    /* 窄屏按钮等宽铺开，方便点按 */
    .inv-nav { gap: 6px; }
    .inv-nav-btn { flex: 1 1 calc(50% - 6px); text-align: center; padding: 8px 10px; }
}

/* A1 勾选核销清单：一行一张单据，窄屏自动折行 */
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fbfcfe;
    font-size: 13px;
}
.pick-row input[type="text"] { max-width: 160px; }

/* A1 核销清单（卡片式，2026-09 重排）：
   以前把「单号 / 交易 / 应收 / 已收 / 余额 / 分配金额输入框」全挤在一行、全部同一个灰色，
   单号与金额分不清主次，窄屏折行后更像一堆散字。
   现在分三层：① 勾选 + 单号 + 币种 + 日期；② 金额表（带字段名，原币列随币种出现）；
   ③ 单独一行的「本次核销金额」输入。信息层级清楚了，也不再靠一个长 flex 行硬塞。 */
.pick-head { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; flex-wrap: wrap; }
.pick-head label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 1 auto; min-width: 0; }
/* 单号必须整行显示：单号本身有 15 个字符（XS-20260923-0343），
   加上币种标签与右侧日期后很容易被挤成两三行，非常难看（截图里踩过）。 */
.pick-no { font-weight: 600; white-space: nowrap; }
/* 币种徽章带汇率（AED-1.80）：一眼看出这张单按什么币种、什么汇率记账。
   汇率是单据自己的，与回款/付款单的汇率可能不同，所以必须挂在单号旁边。 */
.pick-cur { font-size: 12px; color: #1a56db; border: 1px solid #c7d7ff; background: #eef3ff; border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex: 0 0 auto; }
.pick-date { margin-left: auto; color: #6b7280; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.pick-detail {
    flex: 1 1 100%;
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 6px; border-top: 1px dashed #e5e7eb;
}
/* 两行明细：上一行原币、下一行人民币。
   做成「原币(3项) / 人民币(3项)」两组，是因为三项金额一一对应，
   同一行里横排才能一眼看出"原币余额 − 原币已收"的关系。 */
.pick-line { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pick-line > span { color: #6b7280; }
.pick-detail b { color: #242424; font-variant-numeric: tabular-nums; }
.pick-line-cur b { color: #1a56db; }
.pick-line-cur > span { color: #4a6da8; }
.pick-line-cny b { color: #242424; }
.pick-balance b { color: #c0271a; }
.pick-line-cur.pick-balance b { color: #1a56db; }
.pick-alloc { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.pick-alloc > span { color: #6b7280; white-space: nowrap; }
.pick-alloc input[type="text"] { flex: 0 1 160px; max-width: 160px; }

@media (max-width: 768px) {
    /* 窄屏：每行内部改成"标签左、数字右"的两列网格，比挤一行好读 */
    .pick-line { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
    .pick-line > span { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #eef0f3; padding: 3px 0; }
    /* 标签不许折行：「应收(人民币)」这种 7 字标签在窄列里会被折成两行，看起来像排版坏了（截图里踩过） */
    .pick-line > span { white-space: nowrap; }
    .pick-line > span b { text-align: right; }
    .pick-date { margin-left: auto; }
}

@media (max-width: 768px) {
    /* C1 列表：数字列右对齐、不换行；长文本（单号/型号）省略号，避免把卡片撑破 */
    table.grid td { overflow-wrap: anywhere; }
    table.grid td.num,
    table.grid td[data-num] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    table.grid td.cell-items {
        display: block; max-width: 100%; text-align: left;
        white-space: normal; word-break: break-word;
    }

    /* C2 表单：小屏一行一个字段，标签在上、输入框在下，按钮不被挤出屏幕 */
    form .field,
    form .field > span { width: 100%; }
    form input[type="text"], form input[type="date"], form input[type="file"],
    form select, form textarea { width: 100%; box-sizing: border-box; }
    form button, form .btn-primary, form .btn-add-row { width: 100%; margin: 4px 0; }
    form .item-rows-actions button { width: auto; }

    /* C3 底部菜单与更多弹层：分组缩进 + 抽屉标题吸顶，层级一眼能看出来 */
    .m-sheet .sheet-title { position: sticky; top: 0; background: #ffffff; z-index: 2; }
    .m-sheet a.m-sub-item { padding-left: 34px; }
    .m-sheet .group-title { position: sticky; top: 28px; background: #ffffff; z-index: 2; }

    /* C4 导出条：小屏折成一行可横向滑动，不再遮挡列表标题 */
    .export-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .export-bar a { white-space: nowrap; }

    /* C5 图表：小屏限制高度，图例换行 */
    .chart-box, [data-chart] { max-height: 300px; overflow: hidden; }

    /* C10 批量操作条与分页：贴住可视区域 */
    .bulk-bar { position: sticky; top: 0; z-index: 6; }
    .pager { position: sticky; bottom: 0; background: #ffffff; }
}

/* 打印页不显示交互元素 */@media print {
    .export-bar, .topbar, .sidebar, .foot,
    .m-tabbar, .m-sheet, .m-scrim { display: none !important; }

    /* 打印时强制还原成普通表格：卡片式只适合屏幕，不适合纸面 */
    table.grid { display: table !important; white-space: normal !important; }
    table.grid thead { display: table-header-group !important; }
    table.grid tbody { display: table-row-group !important; }
    table.grid tr {
        display: table-row !important; border: 0 !important;
        padding: 0 !important; margin: 0 !important; background: transparent !important;
    }
    table.grid td {
        display: table-cell !important; text-align: left !important;
        padding: 4px 6px !important; border-bottom: 1px solid #ddd !important;
    }
    table.grid th { display: table-cell !important; }
    table.grid td::before { content: none !important; }
}

/* ===== 移动端方案 A：底部标签栏 + 「更多」底部抽屉 ===== */
body.theme-mobile {
    /* 给固定定位的标签栏留出空间，避免遮住页面最后一屏内容；
       同时兼容 iPhone 底部安全区 */
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}
body.theme-mobile .foot { display: none; }
/* 移动端不再使用左侧菜单条（保留规则兜底，避免旧缓存页面出现双菜单） */
body.theme-mobile .sidebar { display: none; }

.m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #ffffff; border-top: 1px solid #e5e7eb;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}
.m-tabbar .m-tab {
    display: block; text-align: center; font-size: 11px; color: #6b7280;
    padding: 2px 0; cursor: pointer; background: none; border: 0;
    font-family: inherit; line-height: 1.6; -webkit-tap-highlight-color: transparent;
}
.m-tabbar .m-tab .ico { display: block; font-size: 19px; line-height: 1.35; }
.m-tabbar .m-tab.active { color: #1a56db; font-weight: 600; }

.m-scrim {
    position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.m-scrim.open { opacity: 1; pointer-events: auto; }

.m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #ffffff; border-radius: 14px 14px 0 0;
    max-height: 76vh; overflow-y: auto;
    transform: translateY(102%); transition: transform 0.24s ease;
    box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-sheet.open { transform: translateY(0); }
.m-sheet .handle { width: 38px; height: 4px; border-radius: 2px; background: #d1d5db; margin: 8px auto 4px; }
.m-sheet .sheet-title { font-size: 12px; color: #6b7280; padding: 4px 16px 8px; border-bottom: 1px solid #f1f2f4; }
.m-sheet .group-title { font-size: 11px; color: #9ca3af; padding: 10px 16px 4px; }
.m-sheet a.sheet-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    font-size: 14px; color: #374151; border-bottom: 1px solid #f6f7f9;
}
.m-sheet a.sheet-item .ico { font-size: 17px; width: 22px; text-align: center; }
.m-sheet a.sheet-item.active { background: #e8efff; color: #1a56db; font-weight: 600; }
.m-sheet .sheet-close {
    display: block; width: 100%; text-align: center; color: #6b7280; font-size: 12px;
    padding: 12px; background: none; border: 0; font-family: inherit; cursor: pointer;
}
/* v1.6：抽屉底部的「列表密度」一行（与 PC 顶栏开关共用同一份偏好） */
.m-sheet .sheet-pref {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-top: 1px solid #f1f2f4; margin-top: 6px;
}
.m-sheet .sheet-pref .muted { font-size: var(--fs-sm); }

/* 抽屉里的可折叠分组（采购 / 销售） */
.m-sheet .sheet-group { cursor: pointer; }
.m-sheet .sheet-group .arrow {
    margin-left: auto; font-size: 11px; color: #9ca3af;
    transition: transform 0.18s ease; transform: rotate(0deg);
}
.m-sheet .sheet-group .arrow.open { transform: rotate(90deg); }
.m-sheet .m-sub { display: none; background: #fafbfc; }
.m-sheet .m-sub.open { display: block; }
.m-sheet a.m-sub-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 48px;
    font-size: 13px; color: #4b5563; border-bottom: 1px solid #f1f2f4;
}
.m-sheet a.m-sub-item .ico { font-size: 15px; width: 20px; text-align: center; }
.m-sheet a.m-sub-item.active { color: #1a56db; font-weight: 600; }

/* ===== 二级入口页（移动端方案 A 的采购 / 销售首页） ===== */
.entry-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.entry-item {
    display: flex; align-items: center; gap: 12px;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 14px; color: #242424;
}
.entry-item:hover { border-color: #c7d7ff; }
.entry-item.entry-primary { border-color: #c7d7ff; background: #f7faff; }
.entry-ico {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
    background: #e8efff; color: #1a56db;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.entry-txt { flex: 1 1 auto; min-width: 0; }
.entry-txt b { display: block; font-size: 15px; font-weight: 600; }
.entry-txt span { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.6; }
.entry-go { color: #c4c8ce; font-size: 18px; flex: 0 0 auto; }

/* ===== 单据多产品明细行 ===== */
.item-rows { display: flex; flex-direction: column; gap: 8px; }
.item-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #fbfcfe; }
.item-row-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: #6b7280; margin-bottom: 6px;
}
.item-row-body { display: flex; gap: 8px; flex-wrap: wrap; }
.item-row-body .field { margin-bottom: 0; flex: 1 1 120px; }
.item-row-body .field > span { font-size: 12px; margin-bottom: 4px; }
.item-row-total {
    font-size: 12px; color: #374151; margin-top: 6px;
    padding-top: 6px; border-top: 1px dashed #e5e7eb;
}
.item-row-del {
    background: none; border: 0; color: #c0271a; cursor: pointer;
    font-size: 12px; padding: 0; font-family: inherit;
}
.item-row-del:hover { text-decoration: underline; }
.item-rows-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-add-row {
    background: #e8efff; color: #1a56db; border: 1px dashed #a9c2ff;
    border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.btn-add-row:hover { background: #dbe7ff; }
.order-total-bar {
    margin-top: 10px; padding: 10px 12px; background: #f7faff;
    border: 1px solid #c7d7ff; border-radius: 8px; font-size: 13px; line-height: 1.9;
}
/* 列表里一格显示多个产品时要允许换行 */
.cell-items { white-space: normal; max-width: 340px; line-height: 1.7; }

/* ============================================================
   录单抽屉（方案2）：PC 右侧滑出 / 移动端底部面板
   ------------------------------------------------------------
   为什么要有它：
     采购单、销售单这类表单很长（供应商 + 多行明细 + 币种汇率 + 运输成本 + 附件），
     原来它铺在列表上方，打开页面第一屏就是一大片空表单，想看列表每次都要先滚过它；
     而「保存」又在表单最底下，手机上填完还得再往下滑才够得着。
   做成抽屉之后：列表一直占着首屏，表单只在需要时滑出，保存按钮钉在抽屉底部。
   表单本身没有变（还是同一个 <form method="post">），只是被"搬"进了抽屉，
   所以后端校验失败时会带着原值重新渲染、并把抽屉自动重新打开。
   ============================================================ */
.drawer-scrim {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(17, 24, 39, 0.45);
    display: flex; justify-content: flex-end;               /* PC：靠右侧 */
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer-panel {
    width: 620px; max-width: 100vw; height: 100%;
    display: flex; flex-direction: column;
    background: #f5f6f8; border-left: 1px solid #e5e7eb;
    box-shadow: -8px 0 24px rgba(16, 24, 40, 0.14);
    transform: translateX(102%); transition: transform 0.22s ease;
}
.drawer-scrim.open .drawer-panel { transform: translateX(0); }

.drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; background: #ffffff; border-bottom: 1px solid #e5e7eb; flex: none;
}
.drawer-title { font-size: 16px; font-weight: 600; margin: 0; }
.drawer-close {
    border: 0; background: none; color: #6b7280; font-size: 22px; line-height: 1;
    cursor: pointer; padding: 2px 6px; font-family: inherit;
}
.drawer-close:hover { color: #242424; }

/* 只有这一段滚动，保存条永远钉在底部 */
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; -webkit-overflow-scrolling: touch; }

.drawer-foot {
    flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 12px 18px; background: #ffffff; border-top: 1px solid #e5e7eb;
}
.drawer-foot .muted { margin-right: auto; }
/* 抽屉里的提示条间距收一点，避免小屏过于零碎 */
.drawer-body .notice, .drawer-body .alert { margin-bottom: 12px; }

/* ===== 移动端：改成底部上滑面板，并贴在底部标签栏之上 ===== */
@media (max-width: 768px) {
    .drawer-scrim { flex-direction: column; justify-content: flex-end; }   /* 靠底部 */
    .drawer-panel {
        width: auto; height: 90vh; max-height: 90vh;
        border-left: 0; border-top: 1px solid #e5e7eb;
        border-radius: 14px 14px 0 0;
        transform: translateY(102%); box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.14);
        /* 关键：抬到底部标签栏（z-index 900，高度约 62px + 安全区）之上。
           不然小屏上抽屉会被标签栏压住一条，底部的保存按钮点不着。 */
        margin-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    .drawer-scrim.open .drawer-panel { transform: translateY(0); }
    .drawer-head { position: relative; padding-top: 20px; }
    .drawer-head::before {                                   /* 上滑面板的小把手 */
        content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
    }
    .drawer-body { padding: 14px; }
    /* 保存条排在按钮上方、整行铺开，拇指够得着 */
    .drawer-foot { padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .drawer-foot button { flex: 1; }
}

/* 打印页不显示抽屉（打印的是列表，不是录入界面） */
@media print {
    .drawer-scrim { display: none !important; }
}

/* ============================================================
   就地折叠（方案1）：表单很短时用它，而不是抽屉
   ------------------------------------------------------------
   判断标准是「表单有多长」：
     采购单 / 销售单这类 7 个字段 + 多行明细 + 附件 → 抽屉（保存条钉底、列表不被推走）
     产品、型号、客户、供应商、币种这类 2~3 个字段 → 就地折叠（点一下展开，原地录，录完收起）
   短表单用抽屉反而更费事：鼠标要从列表飞到右边、填两个框再关掉。
   用原生 <details>/<summary>：不依赖 JS 也能点开，JS 只负责"展开后滚到刚展开的表单"。
   （和 PC 左菜单分组、顶栏「＋新增」、列表字段设置面板是同一套机制。）
   ============================================================ */
.fold {
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px;
    margin-bottom: 12px; overflow: hidden;
}
.fold > summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: #1a56db; background: #f7faff;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; color: #9ca3af; font-weight: 400; }
.fold[open] > summary::before { content: "▾"; }
.fold > summary:hover { background: #eef4ff; }
.fold > summary .tip { font-weight: 400; color: #6b7280; font-size: 12px; }
.fold-body { padding: 14px 16px; border-top: 1px solid #eef0f3; }
/* 折叠体里最后一行表单别再顶出下边距 */
.fold-body > form > .field:last-of-type,
.fold-body > form > .form-row:last-of-type { margin-bottom: 0; }

@media (max-width: 768px) {
    .fold > summary { padding: 14px; }
    .fold-body { padding: 12px; }
}

/* ===== 列表批量删除 ===== */
.bulk-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 9px 14px; margin: 12px 0; font-size: 13px;
}
.btn-danger {
    background: #c0271a; color: #ffffff; border: 0; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.btn-danger:hover { background: #a81f14; }
.col-check { width: 40px; text-align: center; }
table.grid input[type="checkbox"] { width: auto; margin: 0; }
.link-danger { background: none; border: 0; color: #c0271a; cursor: pointer; padding: 0; font-size: 13px; }
.link-danger:hover { text-decoration: underline; }

/* ===== 库存状态标记（采购列表：已入库 / 未入库） ===== */
.badge-ok {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #e6f6ec; color: #0d9458; font-size: 12px; font-weight: 600;
}
.badge-todo {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #fdf3e2; color: #b06d00; font-size: 12px; font-weight: 600;
}
.link-ok {
    background: none; border: 0; color: #0d9458; cursor: pointer;
    padding: 0; font-size: 13px; margin-left: 8px; font-family: inherit;
}
.link-ok:hover { text-decoration: underline; }

/* ===== 库存结存为正 / 为负 ===== */
.stock-pos { color: #0d9458; font-weight: 600; }
.stock-neg { color: #c0271a; font-weight: 600; }
.stock-zero { color: #6b7280; }

/* ===== 收款 / 付款：金额预校验提示条 ===== */
.pay-guard-warn {
    margin: 10px 0; padding: 9px 12px; border-radius: 6px;
    font-size: 13px; line-height: 1.7;
    background: #f3f4f6; color: #4b5563;
}
.pay-guard-warn.ok { background: #e6f6ec; color: #0d9458; }
.pay-guard-warn.bad { background: #fdecec; color: #b42318; font-weight: 600; }

/* ===== 详情页（采购单 / 销售单） ===== */
.detail-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; }
.detail-head > div { font-size: 13px; line-height: 1.9; }
.detail-head .k { color: #6b7280; }
.detail-head .v { font-weight: 600; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }

/* ===== 统计页可点击卡片 ===== */
.stat-card.clickable { display: block; color: inherit; }
.stat-card.clickable:hover { border-color: #c7d7ff; }
.stat-card .go { color: #1a56db; font-size: 12px; margin-top: 4px; display: block; }

/* ===== 列表「显示设置」：自定义要显示哪些字段 ===== */
.col-setting {
    margin: 0 0 12px; padding: 0 12px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
}
.col-setting > summary {
    cursor: pointer; padding: 10px 0; font-size: 13px;
    color: #1a56db; font-weight: 600; list-style: none;
}
.col-setting > summary::-webkit-details-marker { display: none; }
.col-setting > summary::before { content: "▸ "; color: #9ca3af; font-weight: 400; }
.col-setting[open] > summary::before { content: "▾ "; }
.col-setting form { padding-bottom: 12px; }
.col-setting-grid {
    display: grid; gap: 6px 14px; margin: 4px 0 10px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.col-setting-grid label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #374151; cursor: pointer;
    padding: 4px 6px; border-radius: 5px;
}
.col-setting-grid label:hover { background: #eef2ff; }
.col-setting-grid input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.col-setting-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col-setting-actions .muted { font-size: 12px; line-height: 1.7; }

/* 窄屏：显示设置面板改成两列，按钮整行排列 */
@media (max-width: 768px) {
    .col-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col-setting-actions { flex-direction: column; align-items: stretch; }
    .col-setting-actions .btn-primary,
    .col-setting-actions .btn-add-row { width: 100%; }
}

/* ==================================================================================
   v1.6 UI 优化层（纯布局 / 间距 / 字号，不动任何业务逻辑、不改配色语义）
   设计原则：
     1. 全部通过 **CSS 变量 + html[data-*] 开关** 实现，JS 只负责记住开关状态；
     2. 只「追加覆盖」，不删除上面的既有规则 —— 出问题可以整段删掉回退；
     3. 功能相关的选择器（表单 name/id、表格列、路由链接）一律不碰。
   ================================================================================== */

:root {
    /* 间距（4 的倍数，替代各页手写的 9px/10px/14px 等） */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    /* 字号：5 档（12 最小 → 20 数据大字），取代原来 10 档散落值 */
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
    --radius-sm: 6px; --radius-md: 10px;
    --topbar-h: 56px;
    --sidebar-w: 186px;
    --sidebar-w-collapsed: 60px;
    /* 密度档位：舒适档 = 与现在一致，避免升级后观感突变 */
    --row-py: 9px;  --row-px: 10px;
    --card-py: 14px; --card-px: 16px;
    --field-gap: 14px;
    --line-h: 1.6;
    --cell-fs: 14px;
}

/* 紧凑档：一屏多看 3~4 行，适合录单/核对时来回看列表 */
html[data-density="compact"] {
    --row-py: 6px;  --row-px: 8px;
    --card-py: 10px; --card-px: 12px;
    --field-gap: 10px;
    --line-h: 1.45;
    --cell-fs: 13px;
}

body { line-height: var(--line-h); }
.field { margin-bottom: var(--field-gap); }

/* 数字列：等宽数字，跨行对齐（金额、数量、余额） */
table.grid td, .stat-value, .order-total-bar, .detail-head .v {
    font-variant-numeric: tabular-nums;
}
td.num, th.num { text-align: right; white-space: nowrap; }

/* ---- PC 应用骨架：顶栏固定 / 左侧菜单固定且独立滚动 / 内容区自己滚动 ----
   以前 .layout 是普通 flex，长列表把左侧菜单一起滚走；内容过宽时整页横向滚动。
   现在：body 撑满视口不滚动，只有「菜单」和「内容」两个区域各自滚动。 */
@media (min-width: 769px) {
    body.theme-pc { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    body.theme-pc .topbar { flex: 0 0 var(--topbar-h); }
    body.theme-pc .layout { flex: 1 1 auto; min-height: 0; }
    body.theme-pc .sidebar { overflow-y: auto; overflow-x: hidden; flex: 0 0 auto; }
    body.theme-pc .content { overflow: auto; }
    body.theme-pc .foot { flex: 0 0 auto; }
    /* 列名吸顶：长列表往下翻时表头不滚走 */
    body.theme-pc table.grid thead th { position: sticky; top: 0; z-index: 3; }
    /* 密度作用于表格行高 */
    body.theme-pc table.grid th,
    body.theme-pc table.grid td { padding: var(--row-py) var(--row-px); font-size: var(--cell-fs); }
}

/* 打印时恢复正常文档流（Ctrl+P 打整页时不会被 100vh 截断） */
@media print {
    body.theme-pc { height: auto; overflow: visible; display: block; }
    body.theme-pc .content, body.theme-pc .sidebar { overflow: visible; }
    body.theme-pc table.grid thead th { position: static; }
}

/* ---- PC 左侧菜单：分组标题 + 图标 + 折叠成图标模式 ---- */
body.theme-pc .sidebar { width: var(--sidebar-w); padding: var(--sp-2) var(--sp-2) var(--sp-4); }
.menu-group-title {
    font-size: var(--fs-xs); color: #6b7280; padding: var(--sp-3) var(--sp-3) var(--sp-1);
    letter-spacing: 0.04em;
}
.menu-group-title:first-child { padding-top: var(--sp-1); }
body.theme-pc .menu-item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 9px var(--sp-3); min-height: 38px;
}
.menu-ico { width: 20px; text-align: center; font-size: 15px; flex: 0 0 auto; }
.menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 折叠态：只留图标，鼠标悬停用 title 提示（不需要额外 JS 气泡） */
html[data-nav="collapsed"] body.theme-pc .sidebar { width: var(--sidebar-w-collapsed); padding-left: var(--sp-1); padding-right: var(--sp-1); }
html[data-nav="collapsed"] body.theme-pc .menu-group-title { display: none; }
html[data-nav="collapsed"] body.theme-pc .menu-group-rule { display: block; }
html[data-nav="collapsed"] body.theme-pc .menu-item { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-nav="collapsed"] body.theme-pc .menu-item .menu-label { display: none; }
html[data-nav="collapsed"] body.theme-pc .menu-item .menu-ico { font-size: 17px; }
/* 折叠时用一条细线替代分组标题，仍能看出分组边界 */
.menu-group-rule { display: none; border: 0; border-top: 1px solid var(--line-soft, #eef0f3); margin: var(--sp-2) var(--sp-1); }

/* ---- 顶栏工具区：密度切换 / 菜单折叠（PC） ---- */
.topbar-tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.topbar-tools + .userbox { margin-left: var(--sp-3); }
.icon-btn {
    background: none; border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
    color: #374151; font-size: var(--fs-sm); padding: 4px 10px; min-height: 30px;
    cursor: pointer; font-family: inherit; line-height: 1.4;
}
.icon-btn:hover { background: #f3f4f6; }
.icon-btn .ico { margin-right: 4px; }
@media (max-width: 768px) { .topbar-tools { display: none; } }

/* ---- 移动端：小字抬到可读区间 + 危险操作变成胶囊按钮（防误触） ---- */
@media (max-width: 768px) {
    /* 原来 11px 的分组标题 / 12px 的字段名太小吃力，统一抬一档 */
    .m-sheet .group-title { font-size: var(--fs-xs); color: #6b7280; }
    .m-sheet .sheet-title { font-size: var(--fs-xs); }
    table.grid td::before { font-size: var(--fs-xs); }
    .muted, .pager-info { font-size: var(--fs-sm); }

    /* 行内「删除 / 冲销 / 保存」这类纯文字链接在手机上是 13px 高的点击区，极易误触 */
    td .link-danger, td .link-ok, td form .link-danger {
        display: inline-block; padding: 6px 10px; min-height: 30px; line-height: 1.3;
        border-radius: var(--radius-sm); background: #f7f8fa; margin: 2px 4px 2px 0;
    }
    td .link-danger { color: #b42318; }
    td .link-ok { color: #0d9458; }
    /* 操作列：按钮之间留出拇指间距 */
    table.grid td:last-child { gap: 6px; }
    /* 抽屉里的条目再高一点，便于点按 */
    .m-sheet a.sheet-item { padding: 13px 16px; }
    .m-sheet a.m-sub-item { padding: 11px 16px 11px 46px; }
    /* 紧凑档在移动端同样生效（行内边距略收，卡片不塌） */
    html[data-density="compact"] table.grid tr { padding: 8px 10px; margin-bottom: 8px; }
    html[data-density="compact"] table.grid td { padding: 3px 0; }
    html[data-density="compact"] .stat-card { padding: 10px 12px; }
    html[data-density="compact"] .stat-value { font-size: 18px; }
}

/* 密度对统计卡片与提示块的统一作用 */
.stat-card { padding: var(--card-py) var(--card-px); }
.notice, .bulk-bar { padding: var(--card-py) var(--card-px); }
html[data-density="compact"] .stat-value { font-size: 18px; }
html[data-density="compact"] .notice, html[data-density="compact"] .export-bar { font-size: var(--fs-sm); }

/* ---- 表单规格化：一行多个字段时自动等宽，不再各页手写 px 宽度 ----
   只作用于「查询区」这类横向排列的表单，录单页的明细行保持原样（它的宽度是有意义的）。 */
.form-row { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-row > .field { margin-bottom: 0; }
.form-row .field--date { max-width: 170px; }
.form-row .field--money { max-width: 180px; }
.form-row .field--grow { grid-column: 1 / -1; }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .form-row .field--date, .form-row .field--money { max-width: none; } }

/* ---- 工具类：由「内联 style → 工具类」的收敛提供，供后续按页手工替换使用 ----
   （机械替换整遍做过一次、已回滚：见 _deploy/UI收敛2.js 与 UI收敛2回滚.js 的说明） */
.mb-12 { margin-bottom: 12px; }
.mb-12.fs-13 { font-size: var(--fs-sm); }
.mb-8 { margin-bottom: 8px; }
.mb-8.fs-13 { font-size: var(--fs-sm); }
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.ml-10 { margin-left: 10px; }
.ml-8 { margin-left: 8px; }
.ml-6 { margin-left: 6px; }
.max-320 { max-width: 320px; }
.flex-row { display: flex; flex-wrap: wrap; }
.gap-6 { gap: 6px; }
.fs-13 { font-size: var(--fs-sm); }
.lh-19 { line-height: 1.9; }
.inline-form { display: inline; }
.muted-link { color: #6b7280; font-weight: 400; font-size: var(--fs-sm); margin-left: 8px; }

/* ---- 空态统一：任何列表只有一行且是合并单元格时，渲染成统一的空态块 ----
   模板里各页写的「暂无数据」文案不同但结构一致（tbody 只有一个 td[colspan]），
   所以这里用一条 CSS 统一外观，不必改 41 个表格的模板。 */
table.grid tbody tr:only-child td[colspan] {
    text-align: center; color: #6b7280; font-size: var(--fs-sm);
    padding: 26px 12px; background: #fafbfc;
}
table.grid tbody tr:only-child td[colspan]::before { content: none; }
@media (max-width: 768px) {
    table.grid tbody tr:only-child td[colspan] { padding: 22px 12px; }
}

/* ---- 顶栏「＋新增」快捷入口（PC；移动端在「更多」抽屉里已有新增入口） ---- */
.quick-add { position: relative; margin-left: var(--sp-3); }
.quick-add > summary {
    list-style: none; cursor: pointer; user-select: none;
}
.quick-add > summary::-webkit-details-marker { display: none; }
.quick-add[open] > summary { background: #e8efff; border-color: #a9c2ff; color: #1a56db; }
.quick-add-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 950;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); padding: 6px; min-width: 176px;
}
.quick-add-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: var(--radius-sm); color: #374151; font-size: var(--fs-sm);
}
.quick-add-menu a:hover { background: #f3f4f6; }
@media (max-width: 768px) { .quick-add { display: none; } }

/* ---- 全局搜索（顶栏输入框 + 搜索结果页） ---- */
.topbar-search { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-search input[type="text"] {
    width: 220px; padding: 6px 10px; font-size: var(--fs-sm);
}
.topbar-tools { margin-left: var(--sp-3); }
@media (max-width: 768px) { .topbar-search { display: none; } }
.m-sheet .sheet-search { padding: 10px 16px 4px; }
.m-sheet .sheet-search input[type="text"] { width: 100%; }
.search-hit { display: flex; flex-direction: column; gap: var(--sp-3); }
.search-section h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.search-section .search-more { font-size: var(--fs-sm); }
.search-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 8px 10px; border: 1px solid #eef0f3; border-radius: var(--radius-sm); background: #fbfcfe;
    font-size: var(--fs-sm);
}
.search-row b { font-weight: 600; }

/* ---- 分组折叠（v1.6 修订）：PC 左侧菜单点分组标题，把该组菜单收起 / 展开 ----
   用原生 <details>/<summary>：不需要 JS 也能点（JS 只负责记住每一组是开还是关）。 */
body.theme-pc .menu-group { border: 0; }
body.theme-pc .menu-group > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: var(--sp-1);
}
body.theme-pc .menu-group > summary::-webkit-details-marker { display: none; }
body.theme-pc .menu-group > summary:hover { color: #1a56db; }
body.theme-pc .menu-arrow {
    margin-left: auto; font-size: 10px; color: #9ca3af;
    transition: transform 0.15s ease; transform: rotate(0deg);
}
body.theme-pc .menu-group[open] > summary .menu-arrow { transform: rotate(90deg); }
/* 收起状态：标题色淡一点，让人知道下面还有内容 */
body.theme-pc .menu-group:not([open]) > summary { color: #6b7280; }
body.theme-pc .menu-group:not([open]) > summary .menu-arrow { color: #c4c8ce; }

/* 图标条模式（收起菜单）：分组标题与箭头隐藏，分组内容一律展开，
   避免「分组被收起 + 图标条」叠加后菜单看起来是空的 */
html[data-nav="collapsed"] body.theme-pc .menu-group > summary { display: none; }
html[data-nav="collapsed"] body.theme-pc .menu-group > a.menu-item { display: flex; }

/* 搜索页表单宽度上限（取代原来写死在标签上的 640px） */
.max-search { max-width: 640px; }

/* ---- 触控目标：移动端放大到 44px（iOS HIG 建议值；Android 建议 48dp） ----
   PC 端保持 30~36px —— 鼠标精度足够，全部放大反而会让界面显得笨重。
   这一条是纯尺寸调整，不改变任何元素的功能与位置。 */
@media (max-width: 768px) {
    .m-tabbar .m-tab { min-height: 52px; }
    .m-sheet a.sheet-item,
    .m-sheet div.sheet-item { min-height: 48px; }
    .m-sheet a.m-sub-item { min-height: 44px; }
    .m-sheet .sheet-close { min-height: 44px; }
    .m-sheet .sheet-pref .icon-btn { min-height: 44px; padding: 0 14px; }

    form button, form .btn-primary, form .btn-danger, form .btn-add-row,
    .icon-btn, .pager a, .export-bar a, .quick-add-menu a {
        min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    form .item-rows-actions button { min-height: 40px; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }

    /* 行内危险操作：44px 点击区 + 足够间距，避免拇指误触 */
    table.grid td .link-danger, table.grid td .link-ok {
        min-height: 44px; padding: 11px 14px; margin: 3px 6px 3px 0;
    }
    table.grid td.col-check input[type="checkbox"] { width: 22px; height: 22px; }
}