/* ============================================================
   移动端统一样式系统 - mobile.css

   覆盖内容：
   1. CSS 变量 / 设计令牌
   2. 全局重置
   3. 页面整体结构（app-container, header, body, tab-bar）
   4. 表单（分区卡片、表单项、扫码输入框）
   5. 按钮（主操作、次要、危险、保存草稿、全宽）
   6. 卡片（信息卡片、列表项卡片、消息卡片）
   7. 列表显示（滚动区域、信息行、空状态）
   8. Dialog / Drawer（移动端适配、固定按钮、滚动处理）
   9. 工具类（间距、文本、布局、旧版兼容）
   ============================================================ */

/* ============================================================
   1. CSS 变量 —— 设计令牌
   ============================================================ */
:root {
    /* --- 主色系 --- */
    --m-primary: #00B4D8;
    --m-primary-dark: #0077B6;
    --m-primary-light: #90E0EF;
    --m-primary-bg: #E0F7FA;
    --m-primary-main: #2B8DFE;
    /* --- 功能色 --- */
    --m-success: #28a745;
    --m-warning: #FFA726;
    --m-danger: #FF6B6B;
    --m-info: #909399;
    /* --- 中性色 --- */
    --m-white: #FFFFFF;
    --m-bg: #F5F7FA;
    --m-bg-dark: #EFEFF4;
    --m-border: #E2E8F0;
    --m-border-light: #EEF1F7;
    --m-divider: #F0F0F0;
    /* --- 文字色 --- */
    --m-text-title: #333333;
    --m-text-body: #666666;
    --m-text-hint: #999999;
    --m-text-placeholder: #BAC4D2;
    --m-text-white: #FFFFFF;
    --m-text-link: #00B4D8;
    /* --- 字体 --- */
    --m-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --m-font-xs: 11px;
    --m-font-sm: 12px;
    --m-font-base: 14px;
    --m-font-md: 15px;
    --m-font-lg: 16px;
    --m-font-xl: 18px;
    --m-font-xxl: 20px;
    /* --- 间距（8px 步进）--- */
    --m-space-xs: 4px;
    --m-space-sm: 8px;
    --m-space-md: 12px;
    --m-space-base: 16px;
    --m-space-lg: 20px;
    --m-space-xl: 24px;
    --m-space-xxl: 32px;
    /* --- 圆角 --- */
    --m-radius-sm: 4px;
    --m-radius-md: 8px;
    --m-radius-base: 10px;
    --m-radius-lg: 12px;
    --m-radius-xl: 16px;
    --m-radius-round: 50px;
    --m-radius-circle: 50%;
    /* --- 阴影 --- */
    --m-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --m-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06);
    --m-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --m-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
    --m-shadow-primary: 0 4px 16px rgba(0, 180, 216, 0.3);
    /* --- 布局 --- */
    --m-max-width: 430px;
    --m-header-h: 52px;
    --m-tabbar-h: 60px;
    --m-bottom-actions-h: 56px;
    /* --- 过渡 --- */
    --m-trans-fast: 0.2s ease;
    --m-trans-base: 0.3s ease;
    /* --- 渐变 --- */
    --m-grad-header: linear-gradient(135deg, #1a6fff, #3b8bff);
    --m-grad-primary: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
}


/* ============================================================
   2. 全局重置
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
}

body {
    font-family: var(--m-font);
    font-size: var(--m-font-base);
    color: var(--m-text-title);
    line-height: 1.5;
    background: var(--m-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none; /* 禁止 iOS 橡皮筋效果 */
}

ul, ol {
    list-style: none;
}

a {
    color: var(--m-text-link);
    text-decoration: none;
    -webkit-touch-callout: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* 修复 iOS 输入框无法输入 */
[contenteditable="true"], input, textarea {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

/* 触摸优化 */
* {
    touch-action: pan-y;
}

/* 隐藏滚动条（移动端） */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* ============================================================
   3. 页面整体结构
   ============================================================ */

/* ---------- 3.1 应用容器（模拟手机屏幕，最大宽430px居中）---------- */
.app-container {
    max-width: var(--m-max-width);
    margin: 0 auto;
    min-height: 100vh;
    height: 100vh;
    background: var(--m-bg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ---------- 3.2 页面头部 ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--m-space-md);
    min-height: var(--m-header-h);
    height: var(--m-header-h);
    background: var(--m-grad-header);
    box-shadow: 0 2px 8px rgba(77, 173, 218, 0.35);
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}

    .page-header .header-left,
    .page-header .header-right {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--m-text-white);
        font-size: var(--m-font-xl);
        flex-shrink: 0;
        transition: transform var(--m-trans-base);
    }

        .page-header .header-left:active,
        .page-header .header-right:active {
            transform: scale(0.9);
        }

    .page-header .header-title {
        flex: 1;
        text-align: center;
        color: var(--m-text-white);
        font-size: var(--m-font-xl);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 var(--m-space-sm);
    }

/* ---------- 3.3 可滚动内容区域（flex 布局专用，自动撑满剩余高度）---------- */
.scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 3.4 通用滚动视图（需配合 height 使用，预留下拉刷新扩展点）---------- */
.scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 下拉刷新预留 */
    overscroll-behavior-y: contain;
}

/* ---------- 3.5 底部 Tab 导航栏 ---------- */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--m-max-width);
    background: var(--m-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--m-tabbar-h);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all var(--m-trans-base);
    padding: var(--m-space-sm) 0;
    color: var(--m-text-hint);
}

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

    .tab-item:active {
        transform: scale(0.95);
    }

    .tab-item .tab-icon {
        font-size: 22px;
    }

    .tab-item .tab-label {
        font-size: var(--m-font-sm);
        font-weight: 500;
    }

/* ---------- 3.5 固定底部操作栏 ---------- */
.fixed-bottom-actions {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    max-width: var(--m-max-width);
    /*padding: var(--m-space-sm) var(--m-space-md);
    padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0));*/
    background: var(--m-bg);
}

    .fixed-bottom-actions .el-button {
        width: 100%;
        height: 48px;
        border-radius: var(--m-radius-base);
        font-size: var(--m-font-md);
        font-weight: 500;
    }

    /* 双按钮并排 */
    .fixed-bottom-actions .el-row {
        width: 100%;
    }

/* ---------- 3.6 老版 my- 头部（兼容保留）---------- */
.my-head {
    width: 100%;
    position: absolute;
    background-color: var(--m-white);
    z-index: 5;
}

.my-head-return {
    position: absolute;
    top: 0;
    left: 10px;
    color: var(--m-primary-dark);
    background-color: var(--m-white);
    z-index: 9;
    font-size: var(--m-font-xxl);
    font-weight: bold;
    padding-left: 5px;
    line-height: 49px;
}

    .my-head-return a {
        color: var(--m-primary-dark);
        text-decoration: none;
    }

.my-head-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    color: var(--m-primary-dark);
    background-color: var(--m-white);
    font-size: var(--m-font-xl);
    font-weight: bold;
    height: 49px;
    line-height: 49px;
}

.my-body {
    position: absolute;
    top: var(--m-header-h);
    bottom: 0;
    width: 100%;
    overflow: auto;
    background-color: var(--m-bg-dark);
    padding-bottom: 50px;
}

.my-bottom {
    position: absolute;
    z-index: 5;
    bottom: 0;
    width: 100%;
}


/* ============================================================
   4. 表单
   ============================================================ */

/* ---------- 4.1 表单外层容器 ---------- */
.form-container {
    padding: var(--m-space-sm);
}

/* ---------- 4.2 分区卡片（表单内的白色卡片区块）---------- */
.form-section {
    background: var(--m-white);
    border-radius: var(--m-radius-lg);
    padding: var(--m-space-sm);
    margin-bottom: var(--m-space-md);
    box-shadow: var(--m-shadow-sm);
}

/* ---------- 4.3 混采进度标签（标题行内）---------- */
.mixed-progress-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--m-font-sm);
    font-weight: 600;
    color: var(--m-text-white);
    background: var(--m-grad-primary);
    border-radius: var(--m-radius-round);
    padding: 2px 10px;
    margin-left: auto;
}

    .mixed-progress-tag .progress-num {
        font-size: var(--m-font-md);
        font-weight: 700;
        color: #FFFFFF;
    }

/* ---------- 4.4 分区标题（蓝色左边框 + 文字）---------- */
.form-section-title {
    font-size: var(--m-font-md);
    font-weight: 600;
    color: var(--m-primary-dark);
    margin-bottom: var(--m-space-md);
    padding-bottom: var(--m-space-sm);
    border-bottom: 1px solid var(--m-border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .form-section-title::before {
        content: "";
        width: 3px;
        height: 14px;
        background: var(--m-primary-dark);
        border-radius: 2px;
        flex-shrink: 0;
    }

    .form-section-title i {
        color: var(--m-primary);
        font-size: var(--m-font-xl);
    }

/* ---------- 4.4 Element Plus 表单全局调整 ---------- */
/* 减小表单项间距，适配移动端紧凑布局 */
.el-form-item {
    margin-bottom: var(--m-space-sm);
}

/* 标签样式 */
.el-form-item__label {
    font-size: var(--m-font-md);
    color: var(--m-text-title);
    white-space: nowrap;
    pointer-events: none;
}

.el-form-item--label-left .el-form-item__label {
    justify-content: flex-end;
}

/* 输入框、下拉框全宽 */
.el-form-item .el-input,
.el-form-item .el-select,
.el-form-item .el-date-picker {
    width: 100%;
}

/* textarea 最小高度 */
.el-textarea__inner {
    min-height: 60px;
}

/* ---------- 4.5 输入框辅助按钮组（扫码、身份证识别等）---------- */
.input-aux-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* 写法1：输入框 + 按钮并排 */
.input-aux-group--inline {
    flex-direction: row;
    align-items: center;
}

    .input-aux-group--inline .el-input {
        flex: 1;
        min-width: 120px;
    }

/* 辅助按钮行：flex-wrap 支持多按钮换行 */
.input-aux-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.input-aux-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0 8px;
    font-size: var(--m-font-base);
    color: var(--m-primary);
    white-space: nowrap;
    transition: transform var(--m-trans-fast), opacity var(--m-trans-fast);
}

    .input-aux-btn img {
        width: 24px;
        height: 24px;
        display: block;
    }

    .input-aux-btn:active {
        transform: scale(1.1);
        opacity: 0.8;
    }

/* ============================================================
   5. 按钮
   ============================================================ */

/* ---------- 5.1 全宽圆角按钮 ---------- */
.btn-block {
    display: block;
    width: 100%;
}

.btn-round-block {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--m-radius-round);
    font-size: var(--m-font-lg);
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--m-trans-base);
}

    .btn-round-block:active {
        transform: scale(0.98);
    }



/* ============================================================
   6. 卡片
   ============================================================ */

/* ---------- 6.1 Element Plus 卡片全局调整 ---------- */
.el-card {
    margin-bottom: var(--m-space-sm);
    border-radius: var(--m-radius-lg) !important;
    border: none !important;
}

.el-card__body {
    padding: 13px;
}

.el-card__header {
    padding: var(--m-space-sm);
}

/* ---------- 6.2 列表项卡片（采样记录列表等）---------- */
.box-card {
    /* el-card 已有基础样式，这里补充列表特有样式 */
}

    .box-card .card-footer {
        padding: var(--m-space-sm) 0 0;
    }

        .box-card .card-footer .el-button {
            width: 100%;
            height: 40px;
        }

/* ---------- 6.3 信息单元格（label + value）----------
   移动端规范：字段名居左固定宽度，字段值居右自适应
   当值多行时，label 对齐顶部 */
.info-cell {
    padding: 2px 0;
    display: flex;
    align-items: flex-start; /* 多行时 label 对齐顶部 */
    font-size: var(--m-font-md);
    line-height: 1.6;
}

    .info-cell label {
        color: var(--m-text-body);
        font-weight: 500;
        min-width: 75px;
        max-width: 90px;
        flex-shrink: 0;
        text-align: left;
        line-height: 1.6;
        padding-top: 1px; /* 与右侧文字基线对齐 */
    }

    .info-cell span {
        color: var(--m-text-title);
        flex: 1;
        text-align: right;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 1.6;
        min-width: 0; /* 防止 flex 子元素撑开 */
    }

/* ---------- 6.4 消息卡片 ---------- */
.my-msgbox-container {
    margin: var(--m-space-sm);
}

.my-msgbox {
    padding: 5px;
    margin: var(--m-space-sm);
    border: 1px solid var(--m-white);
    border-radius: var(--m-radius-sm);
    background-color: var(--m-white);
}

.my-msgbox-time {
    font-size: var(--m-font-sm);
    color: #8F8F8F;
}

/* ---------- 6.5 图片容器 ---------- */
.imagebox {
    padding: var(--m-space-base);
}

    .imagebox img {
        border-radius: var(--m-radius-sm);
        width: 100%;
    }

/* ---------- 6.6 分区卡片（转运详情等场景）---------- */
.card-section {
    background: var(--m-white);
    border-radius: var(--m-radius-lg);
    padding: var(--m-space-base);
    margin-bottom: var(--m-space-md);
    box-shadow: var(--m-shadow-sm);
}

.card-section-title {
    font-size: var(--m-font-md);
    font-weight: 600;
    color: var(--m-primary-dark);
    margin-bottom: var(--m-space-md);
    padding-bottom: var(--m-space-sm);
    border-bottom: 1px solid var(--m-border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .card-section-title::before {
        content: "";
        width: 3px;
        height: 14px;
        background: var(--m-primary-dark);
        border-radius: 2px;
        flex-shrink: 0;
    }


/* ============================================================
   7. 列表显示（带滚动条）
   ============================================================ */

/* ---------- 7.1 列表滚动容器 ---------- */
.list-scroll {
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 带底部 Tab 的滚动区 */
.list-scroll--with-tabbar {
    height: calc(100vh - 80px - var(--m-tabbar-h));
    padding-bottom: var(--m-tabbar-h);
}

/* 带底部操作栏的滚动区 */
.list-scroll--with-actions {
    padding-bottom: calc(var(--m-bottom-actions-h) + var(--m-space-base));
}

/* ---------- 7.2 列表区域 ---------- */
.list-section {
    margin: var(--m-space-base);
}

    .list-section .list-title {
        background: var(--m-white);
        padding: var(--m-space-base);
        border-radius: var(--m-radius-lg);
        margin-bottom: var(--m-space-base);
        box-shadow: var(--m-shadow-base);
        font-size: var(--m-font-lg);
        font-weight: 600;
        color: var(--m-text-title);
        display: flex;
        align-items: center;
        gap: var(--m-space-sm);
    }

        .list-section .list-title i {
            color: var(--m-primary);
        }

/* ---------- 7.3 列表项卡片（带 header 的复杂卡片）---------- */
.list-card {
    background: var(--m-white);
    border-radius: var(--m-radius-lg);
    margin-bottom: var(--m-space-base);
    box-shadow: var(--m-shadow-base);
    overflow: hidden;
    transition: box-shadow var(--m-trans-base);
}

    .list-card:active {
        box-shadow: var(--m-shadow-md);
    }

    .list-card .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--m-space-md) var(--m-space-base);
        background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
        border-bottom: 1px solid var(--m-border);
    }

    .list-card .card-number {
        font-size: var(--m-font-base);
        font-weight: 600;
        color: var(--m-primary);
    }

    .list-card .card-actions {
        display: flex;
        gap: var(--m-space-md);
    }

    .list-card .card-body {
        padding: var(--m-space-base);
    }

/* 卡片信息区：包裹 info-cell 的容器，统一内边距 */
.card-info {
}

/* ---------- 7.4 Element Plus 表格移动端适配 ---------- */
.el-table .cell {
    padding: 0 5px;
    font-size: var(--m-font-base);
}

/* ---------- 7.5 菜单列表（首页 / 环境选择）---------- */
.menu-section-list {
    padding: var(--m-space-md) var(--m-space-md) 20px;
    display: flex;
    flex-direction: column;
    gap: var(--m-space-sm);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: var(--m-space-base);
    border-radius: var(--m-radius-lg);
    text-decoration: none;
    transition: all var(--m-trans-base);
    box-shadow: var(--m-shadow-base);
    position: relative;
}

    .menu-item:active {
        transform: translateY(0);
    }

    /* 菜单项背景色变体 */
    .menu-item.sky-blue-bg,
    .menu-item--sky {
        background: #E3F2FD
    }

    .menu-item.mint-green-bg,
    .menu-item--mint {
        background: #E0F7FA
    }

    .menu-item.peach-bg,
    .menu-item--peach {
        background: #FFF3E0
    }

/* 菜单图标 */
.menu-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    margin-bottom: 0;
    position: relative;
}

    .menu-item-icon i {
        font-size: 24px;
        color: var(--m-text-white);
    }

    .menu-item-icon svg {
        width: 26px;
        height: 26px;
        fill: #FFFFFF;
    }

    /* 图标颜色变体 */
    .menu-item-icon.sky-blue {
        background: linear-gradient(135deg, #74B9FF 0%, #0984E3 100%);
    }

    .menu-item-icon.mint-green {
        background: linear-gradient(135deg, #81ECEC 0%, #00B894 100%);
    }

    .menu-item-icon.peach {
        background: linear-gradient(135deg, #FFB84D 0%, #FFB84D 100%);
    }

    .menu-item-icon.light-blue {
        background: #7EC8F7
    }

    .menu-item-icon.peach i {
        color: #E17055;
    }

/* 菜单文字 */
.menu-item-text {
    flex: 1;
    font-size: var(--m-font-xl);
    color: var(--m-text-title);
    font-weight: 500;
}

/* 菜单徽章 */
.menu-item-badge {
    background: var(--m-danger);
    color: var(--m-text-white);
    font-size: var(--m-font-base);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--m-radius-lg);
    margin-right: var(--m-space-sm);
    min-width: 24px;
    text-align: center;
}

/* 菜单箭头 */
.menu-item-arrow {
    font-size: var(--m-font-lg);
    color: var(--m-text-hint);
    flex-shrink: 0;
}


/* ============================================================
   8. Dialog / Drawer 移动端适配
   ============================================================ */

/* ---------- 8.1 Element Plus Drawer 全局覆盖 ---------- */

.el-drawer__header {
    margin-bottom: 0 !important;
    padding: var(--m-space-md) var(--m-space-base) var(--m-space-sm) !important;
    border-bottom: 1px solid var(--m-divider);
}

.el-drawer__body {
    padding: var(--m-space-sm) var(--m-space-base) !important;
}

/* ---------- 8.2 Drawer 底部固定按钮区域 ---------- */
/* 用于 el-drawer 的 #footer 插槽 */
.el-drawer .dialog-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--m-space-sm) var(--m-space-base);
    padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0));
    background: var(--m-white);
    display: flex;
    gap: var(--m-space-sm);
    border-top: 1px solid var(--m-divider);
    z-index: 10;
}

    .el-drawer .dialog-footer .el-button {
        flex: 1;
        height: 44px;
        border-radius: var(--m-radius-round);
    }

/* ---------- 8.3 Drawer 内容滚动处理 ---------- */
/* 如果 drawer 内表单较长，需要内部可滚动 */
.el-drawer__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 8.4 Element Plus Dialog 移动端适配 ---------- */
/* 项目中 Dialog 用于表单弹窗（如编辑、发起转运） */
.el-dialog {
    border-radius: var(--m-radius-lg) !important;
}

/* Dialog 固定滚动模式：弹窗固定视口，只滚动 body 区域 */
.dialog-fixed-scroll.el-dialog {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-fixed-scroll .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dialog 头部 */
.el-dialog__header {
    border-bottom: 1px solid var(--m-divider);
    margin-right: 0 !important;
}

.el-dialog__title {
    font-size: var(--m-font-lg) !important;
    font-weight: 600;
}

.el-dialog__body {
    padding: var(--m-space-base) 0 !important;
    /* 如果内容超过屏幕高度，让 body 可滚动 */
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dialog 底部按钮区域 */
.el-dialog__footer {
    border-top: 1px solid var(--m-divider);
}

    /* Dialog 底部按钮全宽 */
    .el-dialog__footer .el-row {
        width: 100%;
    }

    .el-dialog__footer .el-button {
        width: 100%;
        height: 44px;
        border-radius: var(--m-radius-md);
        font-size: var(--m-font-md);
    }

/* ---------- 8.5 全屏 Drawer（详情查看）---------- */
/* 项目中使用 size="100%" 的全屏 Drawer 做详情页 */
.el-drawer[style*="width: 100%"],
.el-drawer[size="100%"] {
    /* 内部内容可滚动，顶部有返回按钮，底部无固定栏 */
}

/* 全屏 Drawer 中的 descriptions 表格 */
.el-drawer .el-descriptions {
    margin-bottom: var(--m-space-sm);
}

.el-drawer .el-descriptions__label {
    font-size: var(--m-font-sm);
    color: var(--m-text-body);
}

.el-drawer .el-descriptions__content {
    font-size: var(--m-font-base);
}

/* ---------- 8.6 遮罩层优化 ---------- */
.el-overlay {
    /* 移动端遮罩适当加深，突出弹窗内容 */
}

.el-overlay-dialog,
.el-overlay-drawer {
    touch-action: none;
}

/* ---------- 8.7 Dialog/Drawer 内容区域中的 Element Plus 组件适配 ---------- */
/* 折叠面板 */
.el-drawer .el-collapse,
.el-dialog .el-collapse {
    margin-top: var(--m-space-sm);
}

.el-drawer .el-collapse-item__header,
.el-dialog .el-collapse-item__header {
    font-size: var(--m-font-base);
    padding-left: var(--m-space-sm);
}

/* 单选组 */
.el-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-sm);
}

/* Checkbox 在移动端需要更大触摸区域 */
.el-checkbox {
    white-space: normal;
    height: auto;
}

.el-checkbox__label {
    line-height: 22px;
    font-size: var(--m-font-base);
}


/* ============================================================
   9. 工具类
   ============================================================ */

/* ---------- 9.1 间距（基于 8px 步进，数值 = px）---------- */
.mt-0 {
    margin-top: 0 !important;
}

.mt-4 {
    margin-top: 4px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-4 {
    margin-bottom: 4px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.ml-4 {
    margin-left: 4px !important;
}

.ml-8 {
    margin-left: 8px !important;
}

.ml-12 {
    margin-left: 12px !important;
}

.ml-16 {
    margin-left: 16px !important;
}

.mr-4 {
    margin-right: 4px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-12 {
    margin-right: 12px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.p-0 {
    padding: 0 !important;
}

.p-8 {
    padding: 8px !important;
}

.p-12 {
    padding: 12px !important;
}

.p-16 {
    padding: 16px !important;
}

.px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pb-8 {
    padding-bottom: 8px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

/* ---------- 9.2 文本 ---------- */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-primary {
    color: var(--m-text-title) !important;
}

.text-secondary {
    color: var(--m-text-body) !important;
}

.text-hint {
    color: var(--m-text-hint) !important;
}

.text-link {
    color: var(--m-text-link) !important;
}

.text-white {
    color: var(--m-text-white) !important;
}

.text-danger {
    color: var(--m-danger) !important;
}

.text-success {
    color: var(--m-success) !important;
}

.text-xs {
    font-size: var(--m-font-xs) !important;
}

.text-sm {
    font-size: var(--m-font-sm) !important;
}

.text-md {
    font-size: var(--m-font-md) !important;
}

.text-lg {
    font-size: var(--m-font-lg) !important;
}

.text-xl {
    font-size: var(--m-font-xl) !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break {
    word-break: break-all;
    word-wrap: break-word;
}

/* ---------- 9.3 布局 ---------- */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.items-center {
    align-items: center !important;
}

.gap-4 {
    gap: 4px !important;
}

.gap-8 {
    gap: 8px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-16 {
    gap: 16px !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.hidden {
    display: none !important;
}

.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

/* ---------- 9.4 溢出 ---------- */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-unset {
    overflow: unset !important;
}

/* ---------- 9.5 分割线 ---------- */
.line {
    margin: 0 var(--m-space-sm);
    border-bottom: 1px solid var(--m-divider);
}

/* ---------- 9.6 圆角 ---------- */
.rounded-sm {
    border-radius: var(--m-radius-sm) !important;
}

.rounded {
    border-radius: var(--m-radius-lg) !important;
}

.rounded-full {
    border-radius: var(--m-radius-round) !important;
}

/* ---------- 9.7 旧版兼容别名（确保现有 HTML 不报错）---------- */
.nopadding {
    padding: 0 !important;
}

.nomargin {
    margin: 0 !important;
}

.noradius {
    border-radius: 0 !important;
}

.width-100 {
    width: 100% !important;
}

.height-100 {
    height: 100% !important;
}

.text-gray {
    color: var(--m-text-hint) !important;
}

.text-blue {
    color: var(--m-primary-dark) !important;
}

.text-red {
    color: var(--m-danger) !important;
}

.text-green {
    color: var(--m-success) !important;
}

.text-black {
    color: var(--m-text-title) !important;
}

.bg-red {
    background-color: #FF3300 !important;
}

.bg-blue {
    background-color: #0099FF !important;
}

.bg-yellow {
    background-color: #FF9900 !important;
}

.bg-green {
    background-color: #33CC00 !important;
}

.bg-gray {
    background-color: #EEEEEE !important;
}

.my-center {
    text-align: center;
}

.my-text-left {
    text-align: left;
}

.my-text-right {
    text-align: right;
}

/* 旧版 margin/padding 工具类（数值表示 5px 步进） */
.margin-top-0 {
    margin-top: 0 !important;
}

.margin-top-1 {
    margin-top: 5px;
}

.margin-top-2 {
    margin-top: 10px;
}

.margin-top-3 {
    margin-top: 15px;
}

.margin-top-4 {
    margin-top: 20px;
}

.margin-top-5 {
    margin-top: 25px;
}

.margin-top-6 {
    margin-top: 30px;
}

.margin-top-7 {
    margin-top: 40px;
}

.margin-top-8 {
    margin-top: 50px;
}

.margin-top-9 {
    margin-top: 60px;
}

.margin-top-10 {
    margin-top: 70px;
}

.margin-top-11 {
    margin-top: 80px;
}

.margin-top-12 {
    margin-top: 90px;
}

.margin-left-0 {
    margin-left: 0 !important;
}

.margin-left-1 {
    margin-left: 5px;
}

.margin-left-2 {
    margin-left: 10px;
}

.margin-left-3 {
    margin-left: 15px;
}

.margin-left-4 {
    margin-left: 20px;
}

.margin-left-5 {
    margin-left: 25px;
}

.margin-left-6 {
    margin-left: 30px;
}

.margin-left-7 {
    margin-left: 40px;
}

.margin-left-8 {
    margin-left: 50px;
}

.margin-left-9 {
    margin-left: 60px;
}

.margin-left-10 {
    margin-left: 70px;
}

.margin-left-11 {
    margin-left: 80px;
}

.margin-left-12 {
    margin-left: 90px;
}

.margin-right-0 {
    margin-right: 0 !important;
}

.margin-right-1 {
    margin-right: 5px;
}

.margin-right-2 {
    margin-right: 10px;
}

.margin-right-3 {
    margin-right: 15px;
}

.margin-right-4 {
    margin-right: 20px;
}

.margin-right-5 {
    margin-right: 25px;
}

.margin-right-6 {
    margin-right: 30px;
}

.margin-right-7 {
    margin-right: 40px;
}

.margin-right-8 {
    margin-right: 50px;
}

.margin-right-9 {
    margin-right: 60px;
}

.margin-right-10 {
    margin-right: 70px;
}

.margin-right-11 {
    margin-right: 80px;
}

.margin-right-12 {
    margin-right: 90px;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-1 {
    margin-bottom: 5px;
}

.margin-bottom-2 {
    margin-bottom: 10px;
}

.margin-bottom-3 {
    margin-bottom: 15px;
}

.margin-bottom-4 {
    margin-bottom: 20px;
}

.margin-bottom-5 {
    margin-bottom: 25px;
}

.margin-bottom-6 {
    margin-bottom: 30px;
}

.margin-bottom-7 {
    margin-bottom: 40px;
}

.margin-bottom-8 {
    margin-bottom: 50px;
}

.margin-bottom-9 {
    margin-bottom: 60px;
}

.margin-bottom-10 {
    margin-bottom: 70px;
}

.margin-bottom-11 {
    margin-bottom: 80px;
}

.margin-bottom-12 {
    margin-bottom: 90px;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-left-1 {
    padding-left: 5px;
}

.padding-left-2 {
    padding-left: 10px;
}

.padding-left-3 {
    padding-left: 15px;
}

.padding-left-4 {
    padding-left: 20px;
}

.padding-left-5 {
    padding-left: 25px;
}

.padding-left-6 {
    padding-left: 30px;
}

.padding-left-7 {
    padding-left: 40px;
}

.padding-left-8 {
    padding-left: 50px;
}

.padding-left-9 {
    padding-left: 60px;
}

.padding-left-10 {
    padding-left: 70px;
}

.padding-left-11 {
    padding-left: 80px;
}

.padding-left-12 {
    padding-left: 90px;
}

.padding-right-0 {
    padding-right: 0 !important;
}

.padding-right-1 {
    padding-right: 5px;
}

.padding-right-2 {
    padding-right: 10px;
}

.padding-right-3 {
    padding-right: 15px;
}

.padding-right-4 {
    padding-right: 20px;
}

.padding-right-5 {
    padding-right: 25px;
}

.padding-right-6 {
    padding-right: 30px;
}

.padding-right-7 {
    padding-right: 40px;
}

.padding-right-8 {
    padding-right: 50px;
}

.padding-right-9 {
    padding-right: 60px;
}

.padding-right-10 {
    padding-right: 70px;
}

.padding-right-11 {
    padding-right: 80px;
}

.padding-right-12 {
    padding-right: 90px;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-top-1 {
    padding-top: 5px;
}

.padding-top-2 {
    padding-top: 10px;
}

.padding-top-3 {
    padding-top: 15px;
}

.padding-top-4 {
    padding-top: 20px;
}

.padding-top-5 {
    padding-top: 25px;
}

.padding-top-6 {
    padding-top: 30px;
}

.padding-top-7 {
    padding-top: 40px;
}

.padding-top-8 {
    padding-top: 50px;
}

.padding-top-9 {
    padding-top: 60px;
}

.padding-top-10 {
    padding-top: 70px;
}

.padding-top-11 {
    padding-top: 80px;
}

.padding-top-12 {
    padding-top: 90px;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-bottom-1 {
    padding-bottom: 5px;
}

.padding-bottom-2 {
    padding-bottom: 10px;
}

.padding-bottom-3 {
    padding-bottom: 15px;
}

.padding-bottom-4 {
    padding-bottom: 20px;
}

.padding-bottom-5 {
    padding-bottom: 25px;
}

.padding-bottom-6 {
    padding-bottom: 30px;
}

.padding-bottom-7 {
    padding-bottom: 40px;
}

.padding-bottom-8 {
    padding-bottom: 50px;
}

.padding-bottom-9 {
    padding-bottom: 60px;
}

.padding-bottom-10 {
    padding-bottom: 70px;
}

.padding-bottom-11 {
    padding-bottom: 80px;
}

.padding-bottom-12 {
    padding-bottom: 90px;
}

.weui-grids {
    position: initial;
}

.weui-grid {
    position: initial;
}

.weui-grid__icon {
    width: 46px;
    height: 46px;
    border-radius: 5px;
}

    .weui-grid__icon i.icon {
        display: inline-block;
        margin: 7px;
    }

.my_gallery {
    text-align: center;
    vertical-align: middle;
}

.my_gallery_img {
    vertical-align: middle;
}

    .my_gallery_img img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


/* ============================================================
   10. Element Plus 全局微调（移动端优化）
   ============================================================ */

/* 主内容区 */
.el-main {
    padding: var(--m-space-sm);
}

/* 统一 input/select/date-picker 的 wrapper */
.el-input__wrapper,
.el-select .el-input__wrapper {
    border-radius: var(--m-radius-md) !important;
}

/* ==================== 下拉框文字溢出处理 ==================== */
/* 限制下拉面板最大宽度，防止过长选项撑开页面 */
.el-select-dropdown {
    max-width: calc(100vw - 32px) !important;
}

.el-select-dropdown__item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 限制多选标签中文字宽度，防止撑开表单 */
.el-select .el-select__tags-text,
.el-select .el-tag__content {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.el-tabs__item {
    font-size: var(--m-font-md);
    padding: 0 var(--m-space-base) !important;
    height: 44px;
    line-height: 44px;
}

/* Switch 开关 */
.el-switch {
    height: 24px;
    line-height: 24px;
}

/* 描述列表 */
.el-descriptions__label {
    font-size: var(--m-font-base) !important;
}

.el-descriptions__content {
    font-size: var(--m-font-md) !important;
}


/* ============================================================
   11. 响应式（屏幕小于 480px 时，去掉居中限制全屏）
   ============================================================ */
@media (max-width: 480px) {
    .app-container,
    .tab-bar,
    .fixed-bottom-actions {
        max-width: 100%;
    }

    .tab-bar,
    .fixed-bottom-actions {
        left: 0;
        transform: none;
    }

    .menu-item-icon {
        width: 44px;
        height: 44px;
    }

        .menu-item-icon i {
            font-size: 22px;
        }

    .menu-item-text {
        font-size: var(--m-font-md);
    }
}