/* ============================================================
   移动端样式（设计基线：Ant Design Mobile v5）
   ------------------------------------------------------------
   规范数值：
     · 导航栏高度 45px，标题 17px；标签栏 50px + 底部安全区，图标 22px / 文字 10px
     · 字号体系：标题 17 / 正文 15 / 辅助 13 / 说明 12
     · 触控目标不小于 44px（iOS HIG）、列表项按 48px 起步（ Material 48dp ）
     · 页面底色 #f5f5f5，卡片白底 + 12px 圆角，页边距 12px
     · 分组列表为整块卡片，分隔线从文字左缘开始（缩进 52px = 边距 12 + 图标 36 + 间距 12）
     · 手机上没有 hover，交互反馈一律给在 :active 上
   颜色与尺寸全部走 --mob-* 变量，便于整站换肤与后续扩展暗色。
   只有窄屏选中 MobileLayout 时这些类名才有 DOM 命中，宽屏外观不受影响。
   ============================================================ */

:root {
    /* 语义色：与 PC 端 Ant Design 主色一致，其余取 antd-mobile 默认 */
    --mob-primary: #1677ff;
    --mob-success: #00b578;
    --mob-warning: #ff8f1f;
    --mob-danger: #ff3141;

    /* 背景与按下态 */
    --mob-page-bg: #f5f5f5;
    --mob-card-bg: #ffffff;
    --mob-press-bg: #f2f3f5;

    /* 文字与分隔线 */
    --mob-text-1: rgba(0, 0, 0, 0.88);
    --mob-text-2: rgba(0, 0, 0, 0.45);
    --mob-text-3: rgba(0, 0, 0, 0.25);
    --mob-split: rgba(5, 5, 5, 0.06);

    /* 圆角与尺寸 */
    --mob-radius-card: 12px;
    --mob-radius-icon: 12px;
    --mob-nav-height: 45px;
    --mob-tab-height: 50px;

    /* 字号 */
    --mob-fs-title: 17px;
    --mob-fs-main: 15px;
    --mob-fs-sub: 13px;
    --mob-fs-tiny: 12px;

    /* 页边距 */
    --mob-gutter: 12px;
    /* 双栏页面的左栏在手机上从底部升起，顶部留这么一截当「变暗 + 点击收起」区 */
    --mob-pane-top: 15vh;
}

/* 外壳：fixed 铺满视口，不依赖 html/body 的高度继承，也不需要改 app.css 的全局属性 */
.m-shell {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--mob-page-bg);
    /* 去掉移动端点击时的蓝色高亮块 */
    -webkit-tap-highlight-color: transparent;
    /* 禁止双击缩放带来的 300ms 点击延迟 */
    touch-action: manipulation;
}

/* ---------- 导航栏 ---------- */
.m-navbar {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--mob-nav-height);
    padding-top: env(safe-area-inset-top);
    background: var(--mob-card-bg);
    border-bottom: 1px solid var(--mob-split);
    box-sizing: content-box;
}

.m-navbar-side {
    flex: none;
    width: 60px;
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.m-navbar-side-right {
    padding-left: 0;
    padding-right: 4px;
    justify-content: flex-end;
}

.m-navbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: var(--mob-text-1);
    border-radius: 50%;
    user-select: none;
}

    .m-navbar-icon:active {
        background: var(--mob-press-bg);
    }

.m-navbar-title {
    flex: 1;
    text-align: center;
    font-size: var(--mob-fs-title);
    font-weight: 600;
    color: var(--mob-text-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 内容区 ---------- */
.m-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: var(--mob-gutter) var(--mob-gutter) 0;
}

.m-page {
    padding-bottom: var(--mob-gutter);
}

/* ---------- 标签栏 ---------- */
.m-tabbar {
    flex: none;
    display: grid;
    /* 列数必须与 MobileNav.Tabs 的数量一致，否则多出来的标签会掉到第二行 */
    grid-template-columns: repeat(5, 1fr);
    height: var(--mob-tab-height);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--mob-card-bg);
    border-top: 1px solid var(--mob-split);
    box-sizing: content-box;
}

.m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: var(--mob-tab-height);
    font-size: 22px;
    color: var(--mob-text-2);
    user-select: none;
}

    .m-tab:active {
        background: var(--mob-press-bg);
    }

    .m-tab.m-tab-active {
        color: var(--mob-primary);
    }

.m-tab-title {
    font-size: 10px;
    line-height: 1.2;
}

/* ---------- 通用卡片与分组标题 ---------- */
.m-card {
    padding: 16px;
    border-radius: var(--mob-radius-card);
    background: var(--mob-card-bg);
}

.m-section {
    margin: 4px 0 8px;
    padding-left: 4px;
    font-size: var(--mob-fs-sub);
    color: var(--mob-text-2);
}

/* ---------- 顶部信息卡 ---------- */
.m-user-card {
    padding: 18px 16px;
    border-radius: var(--mob-radius-card);
    background: linear-gradient(135deg, var(--mob-primary), #4096ff);
    color: #fff;
}

.m-user-name {
    font-size: 19px;
    font-weight: 600;
}

.m-user-roles {
    margin-top: 4px;
    font-size: var(--mob-fs-sub);
    opacity: 0.85;
}

/* ---------- 金刚区（九宫格入口） ---------- */
.m-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.m-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 4px;
    background: var(--mob-card-bg);
    border-radius: var(--mob-radius-card);
    user-select: none;
}

/* 首页金刚区按类型分组后是一「组标题 + 网格」的重复序列，组与组之间要拉开距离，
   否则上一块网格的格子底会和下一组的标题糊在一起（.m-section 自身的上边距只有 4px）。 */
.m-grid + .m-section {
    margin-top: 18px;
}

    .m-grid-item:active {
        background: var(--mob-press-bg);
    }

.m-grid-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mob-radius-icon);
    font-size: 22px;
}

.m-grid-title {
    font-size: var(--mob-fs-tiny);
    color: var(--mob-text-1);
    text-align: center;
}

/* ---------- 分组列表（卡片式 + 内缩分隔线） ---------- */
.m-list {
    background: var(--mob-card-bg);
    border-radius: var(--mob-radius-card);
    overflow: hidden;
}

.m-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px;
    font-size: var(--mob-fs-main);
    color: var(--mob-text-1);
    user-select: none;
}

    /* 分隔线：除首项外，从标题左缘开始，避免横线穿过图标 */
    .m-list-item + .m-list-item::before {
        content: "";
        position: absolute;
        left: 52px;
        right: 0;
        top: 0;
        height: 1px;
        background: var(--mob-split);
    }

    .m-list-item:active {
        background: var(--mob-press-bg);
    }

.m-list-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
}

.m-list-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.m-list-extra {
    flex: none;
    font-size: var(--mob-fs-sub);
    color: var(--mob-text-2);
}

.m-list-arrow {
    flex: none;
    color: var(--mob-text-3);
    font-size: 14px;
}

/* 危险操作（如退出登录）：整行文字用危险色 */
.m-list-danger .m-list-title {
    color: var(--mob-danger);
}

/* ---------- 空态 ---------- */
.m-empty {
    padding: 48px 12px;
    text-align: center;
    color: var(--mob-text-2);
    font-size: var(--mob-fs-sub);
}

/* ---------- 数据卡片（列表的窄屏形态） ---------- */
.m-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-data-card {
    padding: 12px;
    background: var(--mob-card-bg);
    border-radius: var(--mob-radius-card);
    user-select: none;
}

    .m-data-card-clickable:active {
        background: var(--mob-press-bg);
    }

.m-data-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-data-card-title {
    flex: 1;
    min-width: 0;
    font-size: var(--mob-fs-main);
    font-weight: 600;
    color: var(--mob-text-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.m-data-card-tag {
    flex: none;
}

/* 字段区两列布局：ERP 单据字段多，单列会把卡片拉得过长 */
.m-data-card-fields {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 6px;
    column-gap: 12px;
}

.m-data-field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.m-data-field-label {
    flex: none;
    font-size: var(--mob-fs-sub);
    color: var(--mob-text-2);
}

.m-data-field-value {
    flex: 1;
    min-width: 0;
    font-size: var(--mob-fs-sub);
    color: var(--mob-text-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.m-data-field-empty {
    color: var(--mob-text-3);
}

.m-data-card-actions {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--mob-split);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

    /* antd 的 small 文字按钮只有 24px 高，手机上点不准，在卡片操作区里撑到 32px */
    .m-data-card-actions .ant-btn-sm {
        height: 32px;
        padding: 0 8px;
    }

/* ---------- 加载更多 / 简版分页 ---------- */
.m-loadmore {
    margin-top: 8px;
    padding: 12px;
    text-align: center;
    font-size: var(--mob-fs-sub);
    color: var(--mob-primary);
    background: var(--mob-card-bg);
    border-radius: var(--mob-radius-card);
    user-select: none;
}

    .m-loadmore:active {
        background: var(--mob-press-bg);
    }

.m-loadmore-done,
.m-loadmore-loading {
    color: var(--mob-text-2);
}

.m-pager {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-pager-btn {
    flex: none;
    min-width: 76px;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 18px;
    background: var(--mob-card-bg);
    color: var(--mob-text-1);
    font-size: var(--mob-fs-sub);
}

    .m-pager-btn:disabled {
        color: var(--mob-text-3);
    }

.m-pager-text {
    flex: 1;
    text-align: center;
    font-size: var(--mob-fs-sub);
    color: var(--mob-text-2);
}

/* ============================================================
   让 PC 页面结构在手机里可用
   —— 这一节是「同一个组件两种外壳」的关键：
   页面组件本身不动，靠这里的覆盖把后台的白卡片、多列表单、
   悬停才显示的操作按钮改成手机上能用的样子。
   ============================================================ */

/* 内容区底部留白：列表滚到底时卡片不会贴着屏幕边缘。
   移动 tab 页自带 .m-page 的底部内边距，这里排除以免叠加。 */
.m-body > *:last-child:not(.m-page) {
    margin-bottom: var(--mob-gutter);
}

/* 窄卡片 / 窄表单的 PC 宽度限制在手机上没有意义 */
.m-body .erp-narrow-card,
.m-body .erp-narrow-form {
    max-width: none;
}

/* 后台的白色内容卡在手机里多余：内容区已有底色与边距，再套一层只是白费横向空间 */
.m-body .erp-content-card {
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* 工具栏竖排铺满：PC 是一行挤在一起，手机上每个控件各占一行才点得准 */
.m-body .erp-toolbar-row,
.m-body .erp-toolbar-main {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.m-body .erp-toolbar-keyword,
.m-body .erp-toolbar-select {
    width: 100%;
}

/* 单据过滤区：手机上单列铺满，操作按钮也拉全宽（触屏点得准）。
   桌面端的列数由 app.css 的 .erp-filter 控制，这里只覆盖移动路由。 */
.m-body .erp-filter {
    grid-template-columns: minmax(0, 1fr);
}

.m-body .erp-filter-actions {
    grid-column: 1 / -1;
}

.m-body .erp-filter-actions .ant-btn {
    width: 100%;
}

/* 报表页的 6 / 8 位筛选同样单列；合计卡手机上一行两张，避免四张竖着占满首屏 */
.m-body .erp-filter.erp-filter-lg,
.m-body .erp-filter.erp-filter-xl {
    grid-template-columns: minmax(0, 1fr);
}

.m-body .erp-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m-body .erp-stat-value {
    font-size: 17px;
}

/* Select 的宽度常被 inline style 钉死（如 width:170px），只能靠 important 拉成全宽 */
.m-body .ant-select {
    width: 100% !important;
}

/* ⚠️ 行内操作按钮默认是 opacity:0、悬停行才淡入（PC 的「干净表格」做法）。
   手机没有 hover，等于操作按钮永远点不到 —— 这里一律常显并允许换行。 */
.m-body .erp-row-actions {
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 抽屉在窄屏是全屏页，内部仍是 PC 的多列表单，改单列 */
.m-body .erp-form-row {
    flex-direction: column;
    gap: 8px;
}

.m-body .erp-form-row > * {
    width: 100%;
}

.m-body .ant-drawer-body {
    padding: 12px;
}

/* 底部双按钮：等宽、加高到 44px（触控下限） */
.m-body .erp-form-actions {
    display: flex;
    gap: 8px;
    padding-bottom: env(safe-area-inset-bottom);
}

    .m-body .erp-form-actions .ant-btn {
        flex: 1;
        height: 44px;
    }

/* 抽屉与弹窗在窄屏一律铺满 / 限宽。
   ⚠️ 必须用窗口宽度判断，不能用 .m-body 前缀：抽屉和弹窗不一定挂在内容区里
   （服务型弹窗由 AntContainer 挂在 body 下），前缀选择器会漏掉。
   420 / 480 / 820 这些宽度是按桌面屏幕定的，手机上会直接溢出屏幕。 */
@media screen and (max-width: 767px) {
    /* 抽屉在窄屏不铺满，左侧留 56px 当遮罩 —— 点它就能收起抽屉。
       之前铺满是为了修 420px 在 375px 屏上溢出，但铺满之后就没有「外面」可点了，
       收起只能去够右上角那个 X，手机上很难受。56px 比触控下限 44px 宽一档。 */
    .ant-drawer-content-wrapper {
        width: calc(100vw - 56px) !important;
    }

    .ant-modal {
        max-width: calc(100vw - 32px);
    }

    /* 刘海屏：抽屉顶部让出安全区，标题不被挖孔 / 刘海压住 */
    .ant-drawer-header {
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    /* 纯图标按钮：antd 只在「有 Icon、没有文字」时才加 ant-btn-icon-only。
       默认 32px、small 只有 24px —— 实测商品卡片底部的编辑 / 删除只有 24×24，
       手指根本点不中。统一撑到 44×44（iOS HIG 触控下限），图标同步放大，
       否则按钮大了图标还是米粒大小。 */
    .ant-btn.ant-btn-icon-only {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* 抽屉 / 弹窗右上角的关闭：antd 默认只有 28×18，在 flex 标题栏里还被压扁，
       手指根本点不中——供应商、客户这些页面的抽屉「点了没关」就是这个原因
       （点准了是能关的，纯粹是热区太小）。按同一把尺子撑到 44×44。 */
    .ant-drawer-close,
    .ant-modal-close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    /* 按钮变大后行内操作之间留出间距，别挤成一坨 */
    .m-body .erp-row-actions {
        gap: 8px;
    }
}

/* ============================================================
   分配采购供应商（销售订单抽屉里）：桌面是一张 6 列的宽表，
   手机上跟着单据明细一起变成「一行一张卡」。
   ⚠️ 这张表是页面手写的，padding 与边框都写在内联样式上 ——
      内联样式盖过卡片化规则，只能用 !important 清掉。
   ============================================================ */
@media screen {
    .m-body .erp-alloc-table tbody tr,
    .m-body .erp-alloc-table tbody td {
        border: none !important;
        padding: 5px 0 !important;
    }

    /* 供应商下拉是这一步唯一的操作点，按触控下限给 44px
       （明细表通用的 36px 是给密集录入的数值输入用的） */
    .m-body .erp-alloc-table .ant-select-selector {
        min-height: 44px !important;
    }
}

/* ============================================================
   单据明细：桌面是一张要横向滚动的宽表，手机上改成「一行一张卡」。
   字段名来自每个 td 的 data-label —— 相当于把表头拆开贴到了每个值旁边。
   ⚠️ 整段必须包在 @media screen 里：打印 / 导出 PDF 用的是同一份 DOM，
      一旦在打印时生效，A4 版式就散了（ Purchase 的 #print-area 尤其如此）。
   ============================================================ */
@media screen {
    .m-body .erp-item-table,
    .m-body .erp-item-table tbody,
    .m-body .erp-item-table tfoot {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: none;
    }

        .m-body .erp-item-table colgroup,
        .m-body .erp-item-table thead {
            display: none;
        }

    .m-body .erp-item-table tbody tr {
        display: block;
        margin-bottom: 8px;
        padding: 8px 12px;
        border: none;
        background: var(--mob-card-bg);
        border-radius: var(--mob-radius-card);
    }

    /* 字段行：左边字段名、右边值。
       一个格子里的多个元素（如「客户料号 / 我方料号」两排）都落在第 2 列，自然竖排。 */
    .m-body .erp-item-table tbody td {
        display: grid;
        grid-template-columns: 76px 1fr;
        align-items: center;
        gap: 8px;
        padding: 5px 0;
        border: none;
        text-align: right;
        /* 桌面为了不撑宽列用了 ellipsis，手机上要让长品名换行显示全 */
        white-space: normal;
        overflow: visible;
    }

        .m-body .erp-item-table tbody td::before {
            content: attr(data-label);
            text-align: left;
            color: var(--mob-text-2);
            font-size: var(--mob-fs-sub);
        }

        .m-body .erp-item-table tbody td > * {
            grid-column: 2;
            min-width: 0;
            text-align: right;
        }

    /* 没有 data-label 的格子只是对齐用的空位，手机上不占地方 */
    .m-body .erp-item-table tbody td:not([data-label]) {
        display: none;
    }

    /* 数量 / 单价是直接在卡片上改的：输入框全宽 + 触控高度 36px */
    .m-body .erp-item-table .ant-input-number-wrapper,
    .m-body .erp-item-table .ant-select {
        width: 100% !important;
    }

    .m-body .erp-item-table .ant-input-number-input {
        height: 34px;
    }

    .m-body .erp-item-table .ant-select-selector {
        min-height: 36px !important;
    }

    .m-body .erp-item-table tbody td[data-label="操作"] > * {
        text-align: right;
    }

    /* 合计行同样是一张卡：「合计」靠左、金额靠右 */
    .m-body .erp-item-table tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        border: none;
        background: var(--mob-card-bg);
        border-radius: var(--mob-radius-card);
        font-weight: 600;
    }

        .m-body .erp-item-table tfoot td:not(:first-child):not(:nth-child(2)) {
            display: none;
        }

        .m-body .erp-item-table tfoot td:first-child {
            text-align: left !important;
        }

        .m-body .erp-item-table tfoot td:nth-child(2) {
            text-align: right !important;
        }
}

/* ============================================================
   双栏页面（左类别树 / 右列表）：手机上把左栏收成筛选浮层
   —— 入口按钮与遮罩由 app.js 挂在 <body> 上，这里只负责位置，
      Blazor 渲染出来的 DOM 结构一点没动。
   ============================================================ */
.m-body .erp-master-detail {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    gap: 0;
}

/* 左栏：从底部升起的一张浮层，默认藏在屏幕外。
   ⚠️ 层级必须压在 antd 弹窗之下 —— Modal / Drawer 都是 1000（@zindex-modal）。
      浮层里点「新增类别」会打开类别抽屉，浮层一旦比它高，抽屉就被盖在下面看不见。 */
.m-body .erp-master-pane {
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(100% - var(--mob-pane-top));
    width: auto !important;
    padding: 12px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--mob-card-bg);
    border-right: none !important;
    border-radius: var(--mob-radius-card) var(--mob-radius-card) 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    /* 用 top 过渡而不是 transform：transform 会让面板变成内部
       position:fixed 后代（类别抽屉、下拉）的包含块，把它们一起拖着走 */
    transition: top .25s ease;
}

body.m-pane-open .m-body .erp-master-pane {
    top: var(--mob-pane-top);
}

/* 浮层里的数据要能滚，但不许把页面整体顶宽 */
.m-body .erp-master-pane > * {
    min-width: 0;
}

/* 浮层上方那一截变暗，点它收起浮层。
   ⚠️ 只能做面板的伪元素：.m-shell 是 position:fixed，会自建层叠上下文，
      挂在 <body> 下的真实遮罩无论 z-index 取多少，都会整片压在面板之上。 */
.m-body .erp-master-pane::before {
    content: '';
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--mob-pane-top);
    background: rgba(0, 0, 0, .45);
    z-index: -1;
}

body.m-pane-open .m-body .erp-master-pane::before {
    display: block;
}

/* 右下角悬浮「筛选 / 收起」按钮：只在有左栏的页面出现（m-has-pane 由 JS 打在 body 上） */
.m-pane-button {
    display: none;
    position: fixed;
    right: 14px;
    bottom: calc(var(--mob-tab-height) + 28px + env(safe-area-inset-bottom));
    z-index: 910;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mob-primary);
    color: #ffffff;
    font-size: var(--mob-fs-sub);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    user-select: none;
    transition: top .25s ease;
}

body.m-has-pane .m-pane-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .m-pane-button:active {
        transform: scale(.94);
    }

/* 浮层打开后把按钮挪到面板右上角：留在右下角会压住类别树最后几行 */
body.m-pane-open .m-pane-button {
    top: calc(var(--mob-pane-top) + 8px);
    bottom: auto;
}

.m-pane-text-close,
body.m-pane-open .m-pane-text-open {
    display: none;
}

body.m-pane-open .m-pane-text-close {
    display: inline;
}

/* ============================================================
   抽屉内的表单与单据头
   ============================================================ */
@media screen {
    /* 采购订单单据头：「供应商 | 单据信息」左右两栏，手机上改成上下两段 */
    .m-body #print-area table.po-head > tbody > tr {
        display: block;
    }

    .m-body #print-area .po-info-left,
    .m-body #print-area .po-info-right {
        display: block;
        width: 100% !important;
        padding: 0 !important;
        border-left: none !important;
    }

    .m-body #print-area .po-info-right {
        margin-top: 12px;
    }

    /* 底部操作条吸底：抽屉内容长的时候，不用滚到底才能点「保存」 */
    .m-body .erp-form-actions {
        position: sticky;
        bottom: 0;
        padding: 12px 0;
        background: var(--mob-card-bg);
        border-top: 1px solid var(--mob-split);
    }

    /* 抽屉 body 变成纵向 flex：内容不足一屏时，靠 margin-top:auto 把操作栏顶到屏幕底部，
       内容超长时再由上面的 sticky 吸附 —— 两种情况「保存」都在手边。
       截图上原来内容短，按钮悬在表单末尾，下面空出一大片，不像移动端的样子。
       ⚠️ 只对「表单 + 底部操作栏」这种抽屉生效：价格抽屉里是 Tabs，
          被拉成 flex 列会让里面表格的高度塌掉。 */
    .m-body .ant-drawer-body:has(> .erp-form-actions) {
        display: flex;
        flex-direction: column;
    }

    .m-body .ant-drawer-body > .erp-form {
        flex: 1 1 auto;
    }

    .m-body .erp-form-actions {
        margin-top: auto;
    }

    /* 触控目标：输入框与下拉统一提到 44px（iOS HIG 下限） */
    .m-body .ant-input-affix-wrapper,
    .m-body .ant-input,
    .m-body .ant-input-password {
        min-height: 44px;
    }

    .m-body .erp-form-item > .ant-select .ant-select-selector,
    .m-body .erp-item-table .ant-select-selector {
        min-height: 44px !important;
    }

    .m-body .ant-input-number-input {
        height: 42px;
    }

    .m-body textarea.ant-input {
        min-height: 88px;
    }

    /* 工作台的快捷入口：一行一张，别挤成一排小按钮 */
    .m-body .ant-space-item {
        width: 100%;
    }

    .m-body .ant-space-item .ant-btn {
        width: 100%;
        height: 44px;
    }

    /* 移动端导航栏已经显示标题，页面自带的标题栏就重复了 */
    .m-body .ant-page-header,
    .m-body .ant-pro-page-container > .ant-page-header,
    .m-body .page-container > .ant-page-header {
        display: none;
    }
}

/* ---------- 登录页（不走 MobileLayout，单独按窄屏改） ---------- */
@media screen and (max-width: 767px) {
    .login-page {
        padding: 16px 16px 0;
        /* 顶部对齐而不是垂直居中：手机上软键盘弹起时居中会把内容顶出屏幕 */
        align-items: flex-start;
    }

    .login-box {
        width: 100%;
    }

    .login-brand {
        margin-bottom: 16px;
    }

        .login-brand-logo {
            width: 56px;
            height: 56px;
        }

    /* 原来钉在视口底部，手机上会浮在内容之上，改成跟着文档流走 */
    .login-footer {
        position: static;
        margin-top: 24px;
    }
}

/* ---------- 底部操作条 ---------- */
.m-footer-bar {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--mob-card-bg);
    border-top: 1px solid var(--mob-split);
}

/* ---------- 表头主体提示（手机） ---------- */
/* 手机上 ErpTable 走卡片模式，表头那块只有 HeaderStart（列设置齿轮不画）。
   桌面给它的是 13px 灰字，在手机上等于没有 —— 筛选浮层一收起，
   用户就完全不知道「当前在维护谁的报价 / 选的是哪个类别」。
   所以这里放大加粗，让它承担起「页面标题」的职责。 */
.m-shell .erp-card-mode .erp-table-head {
    padding: 2px 0 8px;
}

.m-shell .erp-card-mode .erp-table-head-start {
    font-size: 15px;
    font-weight: 600;
    color: var(--erp-text);
    min-width: 0;
}

.m-shell .erp-card-mode .erp-cat-path {
    font-size: 15px;
}