@charset "utf-8";
/* ==========================================================================
   移动端响应式兼容样式（统一入口，所有页面共用）
   断点：≤992px（平板）/ ≤768px（手机）/ ≤480px（小屏手机）
   说明：仅做窄屏布局兼容，不改变 PC 端既有视觉效果
   ========================================================================== */

/* ------------------------------------------------------------------ 下拉框展开方向
   默认向下展开；下方空间不足时由 Tool.js 自动加 .layui-form-select-up 改为向上展开
   （此前后台首页把方向写死成向上，导致下方明明有空间也向上弹） */
.layui-form-select-up > dl {
    top: auto !important;
    bottom: 42px !important;
}

/* ------------------------------------------------------------------ 弹层宽度
   统一按内容自适应（与 PC 端一致），避免窄屏下弹层被撑成整屏宽、控件只占左边、
   右侧空一大片；max-width 兜底防止内容过宽时超出屏幕 */
.layui-layer-page {
    width: auto !important;
    max-width: calc(100% - 24px);
}

/* ------------------------------------------------------------------ 平板及以下 */
@media screen and (max-width: 992px) {
    /* 内容区左右留白收紧，避免横向溢出 */
    .layui-fluid {
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* 栅格：页面只使用了 md/sm 列，窄屏下 md 列宽度不生效而仍保留左浮动，
       会导致卡片按内容宽度收缩、左右错位，这里统一回退为整行宽度 */
    .layui-row > [class*="layui-col-"] {
        float: none !important;
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------ 手机 */
@media screen and (max-width: 768px) {
    /* 防止残余的横向溢出把整页撑出屏幕 */
    html {
        overflow-x: hidden;
    }

    .layui-fluid {
        padding: 8px !important;
    }

    /* 栅格行使用负外边距抵消列的内边距，窄屏下会多出 1~2px 横向溢出并产生横向滚动条 */
    .layui-row.layui-col-space15 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .layui-row.layui-col-space15 > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 与 PC 端保持一致：内容区不允许横向滚动，表格在自身容器内横向滚动 */
    .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        overflow-x: hidden;
    }

    /* 1. 卡片头部：去掉固定高度，标题独占一行；操作按钮保持同行，放不下才换行 */
    .layui-card-header {
        height: auto !important;
        line-height: 1.6;
        padding: 10px 12px !important;
        overflow: visible !important;
    }

    .layui-card-header #titletxt,
    .layui-card-header #HeaderDiv {
        float: none !important;
        display: block;
        margin: 0 0 8px 0 !important;
        font-size: 16px;
        line-height: 26px;
    }

    .layui-card-header .layui-form {
        display: block !important;
    }

    .layui-card-header .layui-form-label {
        width: auto !important;
        max-width: 70%;
        padding: 8px 10px !important;
        white-space: normal;
    }

    /* 2. 表单行改为弹性排列：标签与输入框能并排就并排，放不下才换行占满整行。
       同时覆盖 layui 自带 ≤450px 的降级（标签独占一行 + 输入框左缩进 112px），
       避免出现「右侧还有大片空白却换行」的浪费 */
    .layui-form-item,
    .layui-inline,
    .layui-form-item .layui-inline {
        /* 不加 !important：页面/弹层脚本会用内联 display:none 隐藏整行（如「使用期限」「账号信息」），
           加了 !important 会把隐藏行强行显示出来。
           第三个选择器是为了在 ≤450px 压过 layui 自带的 .layui-form-item .layui-inline{display:block} */
        display: flex;
        flex-wrap: wrap;
        /* 顶对齐：垂直居中会让右侧控件比左侧标签高出几像素，看起来不齐 */
        align-items: stretch;
        max-width: 100% !important;
    }

    .layui-form-item .layui-inline {
        flex: 1 1 100%;
        margin: 0 0 8px 0 !important;
    }

    /* 「单个控件」的 inline 分组（如日期行，分组内只有输入框、没有后缀标签）：
       按内容取宽，保持在标签右侧同一行，避免窄屏被推到自己一行而与其它行错位 */
    .layui-form-item > .layui-inline:not(:has(> .layui-form-label)) {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* 字段标签（表单行的直接子元素）：沿用页面/主题自身的标签宽度，
       保证同一页面各行标签等宽、右侧输入列左右对齐；
       若在窄屏改成 width:auto，标签会随文字长短收缩，导致输入框左边缘参差错位。
       下边距与控件容器保持一致：弹性行高度 = 控件 38px + 下边距 8px = 46px，
       标签带上同样的 8px 下边距后拉伸高度 = 46 - 8 = 38px，正好与控件等高、上下边缘对齐。
       注意不要改 box-sizing 与左右内边距，否则页面写的 width:80px 会被当成含内边距的总宽，
       文字会被挤到换行 */
    .layui-form-item > .layui-form-label,
    .layui-inline > .layui-form-label {
        flex: 0 0 auto;
        margin-bottom: 8px !important;
        max-width: 100%;
        white-space: normal;
    }

    /* 多行文本框行（.layui-form-text）：标签按内容取宽并与文本框顶部对齐（同 PC 端），
       否则会被主题里的 width:100% 撑成整行灰条、文本框被迫换到下一行 */
    .layui-form-text > .layui-form-label {
        width: auto !important;
        align-self: flex-start;
    }

    /* 输入框容器内用作「值显示」的 label：占满容器，右边缘与其他输入框对齐。
       注意不加 display，避免覆盖元素自身的 display:none（如隐藏域） */
    .layui-input-inline > .layui-form-label,
    .layui-input-block > .layui-form-label {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left;
        box-sizing: border-box;
    }

    /* 页面内容里的单行输入框 / 下拉框：保持固定宽度，不随行拉伸。
       默认 180px（≈ PC 端 190px）：既比 PC 略窄一点，又能让「输入框 + 编辑按钮」这类
       最宽的行放得下；≤480px 再收窄到 170px，保证设置页 165px 的宽标签也能与控件同行。
       注意：弹层内容不套用这两条（弹层内控件宽度沿用页面/主题设置，与线上表现一致） */
    .layui-body .layui-form-item .layui-input-inline,
    .layui-body .layui-inline .layui-input-inline {
        float: none !important;
        display: block !important;
        left: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 8px 8px 0 !important;
        flex: 0 1 180px;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 页面内容里的文本域等块级控件：占满剩余宽度 */
    .layui-body .layui-form-item .layui-input-block,
    .layui-body .layui-inline .layui-input-block {
        float: none !important;
        display: block !important;
        left: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 8px 8px 0 !important;
        flex: 1 1 180px;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 弹层内容里的控件：宽度沿用页面/主题自身设置 —— 例如「编辑授权」弹层把机器码输入框设为
       150px 给右侧「编辑」按钮让位、其余行用主题的 220px，这样按钮才能与输入框同行（同线上）。
       这里只统一间距，不再统一收窄宽度 */
    .layui-layer-content .layui-form-item .layui-input-inline,
    .layui-layer-content .layui-inline .layui-input-inline {
        float: none !important;
        display: block !important;
        left: 0 !important;
        max-width: 100% !important;
        margin: 0 8px 8px 0 !important;
        flex: 0 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    .layui-layer-content .layui-form-item .layui-input-block,
    .layui-layer-content .layui-inline .layui-input-block {
        float: none !important;
        display: block !important;
        left: 0 !important;
        max-width: 100% !important;
        margin: 0 8px 8px 0 !important;
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 弹层里的 srkkd 表单：主题给容器定的是 220px，这里把宽度落到 flex-basis 上。
       layui 自带的 ≤450px 规则 .layui-form-item .layui-input-inline{width:auto!important}
       会把 220px 冲成自适应（约 188px），导致弹层在 450px 断点上突然变宽、控件宽度突变 */
    .layui-layer-content .layui-form-item.srkkd .layui-input-inline {
        flex-basis: 220px;
    }

    /* 弹层内的行统一单行排列：layui 在 ≤450px 会给内容加缩进，可用宽度比 451px 略窄，
       原本刚好放得下的行会掉到下一行；单行排列时改由输入框微缩几像素（肉眼不可见）。
       机器码那行有「输入框 + 编辑按钮」两件，靠这一点让输入框缩几像素给按钮让位 */
    .layui-layer-content .layui-form-item,
    .layui-layer-content .layui-inline {
        flex-wrap: nowrap;
    }

    /* 弹层里带操作按钮（.layui-input-inline2）的行：
       1) 去掉输入框右侧的 8px 间距，让按钮紧跟输入框（沿用按钮自身 5px 左边距），
          使「标签 + 输入框 + 按钮」的总宽与其它行「标签 + 输入框」相当；
       2) 行尾补回 8px 右边距，与其它行输入框容器的右边距一致 —— 两处右边缘才会对齐 */
    .layui-layer-content .layui-form-item > .layui-input-inline:has(+ .layui-input-inline2:not([style*="display: none"])) {
        margin-right: 0 !important;
    }

    .layui-layer-content .layui-form-item > .layui-input-inline2 {
        margin-right: 8px !important;
    }

    /* 弹层里「账号 信息：+ 复选框」这类引用块：文字靠左、复选框靠右，且右边缘与输入框列对齐 */
    .layui-layer-content blockquote {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 8px !important;
        padding-right: 0 !important;
    }

    /* 头部工具条：按钮容器不参与拉伸，按钮保持同行 */
    .layui-card-header .layui-form-item .layui-input-inline {
        flex: 0 0 auto;
    }

    .layui-card-header .layui-btn {
        width: auto !important;
        max-width: 100%;
    }

    /* 3. 输入控件占满所属容器，并与标签等高（有些页面把输入框做成 40px 加 margin-top:-1px，
       窄屏下会比标签高出 1~2px，看起来不齐） */
    .layui-form-item .layui-input,
    .layui-form-item .layui-select,
    .layui-inline .layui-input {
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }

    .layui-form-item .layui-textarea,
    .layui-inline .layui-textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }

    /* 4. 表单行内的按钮：独占一行的提交按钮占满整行（右边缘与上方输入框列对齐）；
       与输入框同行的按钮（如「編輯」）换行后右对齐，同样与输入框列右边缘对齐 */
    .layui-form-item > .layui-btn:only-child {
        width: 100% !important;
        margin: 0 8px 8px 0 !important;
        box-sizing: border-box;
    }

    .layui-form-item > .layui-btn:not(:only-child),
    .layui-body .layui-form-item > .layui-btn:not(:only-child) {
        margin-left: auto !important;
        margin-right: 8px !important;
    }

    /* 页面内容里的表单按钮不额外左缩进（弹层内的按钮保留页面自身的外边距，如「编辑」按钮的 5px） */
    .layui-body .layui-form-item .layui-btn,
    .layui-card-body .layui-btn {
        max-width: 100%;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* 开关图标：不额外左缩进，块级显示避免基线下沉把容器撑到 46px（会与标签错位） */
    .layui-form-item .layui-input-inline > .layui-icon {
        margin-left: 0 !important;
        display: block;
        line-height: 38px;
        height: 38px;
    }

    /* 页面在容器上写死了宽度的下拉/输入框，保持其设计宽度。
       注意：layui ≤450px 的 .layui-form-item .layui-input-inline 带 width:auto!important，
       会冲掉内联宽度——业绩页「查询月份」就会从设计的 80px 被拉成整行宽。
       这里覆盖已知的两种写法（有/无空格），其余写法由 Tool.js 的 ApplyFixedControlWidth 兜底 */
    .layui-form-item > .layui-input-inline[style*="width:80px"],
    .layui-form-item > .layui-input-inline[style*="width: 80px"] {
        flex-basis: 80px !important;
    }

    .layui-form-item > .layui-input-inline[style*="width:110px"],
    .layui-form-item > .layui-input-inline[style*="width: 110px"] {
        flex-basis: 110px !important;
    }

    .layui-card-body > .layui-btn,
    .layui-btn-container .layui-btn {
        margin: 0 6px 6px 0;
    }

    .layui-form-checkbox {
        margin-left: 0 !important;
    }

    /* 5. 页面内容里的输入框容器统一改为自适应宽度（不做 !important 的全局覆盖，
       弹层内容单独处理，避免冲掉主题给弹层定的 220px 与页面给机器码定的 150px） */
    .layui-body .layui-input-inline {
        float: none !important;
        display: block;
        left: 0 !important;
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
    }

    /* 6. 弹层：内容自适应且可滚动，避免超出屏幕高度被裁切 */
    .layui-layer-content {
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    /* 7. 数据表格：单元格与操作按钮在窄屏下换行显示 */
    .layui-table-cell {
        padding: 0 8px;
    }

    .layui-table-cell .layui-btn {
        margin: 2px 4px 2px 0;
    }

    /* 8. 分页条：窄屏精简为「上一页 / 当前页 / 下一页」并居中。
       总数、每页条数、跳页、页码列表、首尾页、省略号一律隐藏 —— 这些项在窄屏换行后
       会散成两三行且对齐不齐；总数信息页面顶部已有统计，翻页用首尾两个按钮足够 */
    .layui-laypage {
        display: block;
        text-align: center;
        font-size: 0;
    }

    .layui-laypage > * {
        margin-bottom: 4px;
    }

    .layui-laypage-count,
    .layui-laypage-limits,
    .layui-laypage-skip,
    .layui-laypage-first,
    .layui-laypage-last,
    .layui-laypage-spr,
    .layui-laypage > a[data-page]:not(.layui-laypage-prev):not(.layui-laypage-next) {
        display: none !important;
    }

    /* 隐藏后「上一页 / 下一页」不再是首尾子元素，layui 原本给首尾项的圆角失效，
       这里补回来，避免整条分页条四角变成直角 */
    .layui-laypage > .layui-laypage-prev {
        border-radius: 2px 0 0 2px;
    }

    .layui-laypage > .layui-laypage-next {
        border-radius: 0 2px 2px 0;
    }

    /* 9. 底部统计 / 提示条 */
    .layui-elem-quote {
        padding: 8px 10px !important;
        font-size: 13px;
        line-height: 20px;
    }

    /* 10. 首页 / 业绩页中固定高度的卡片内容改为自适应高度 */
    #fenchengdiv,
    #YueFenYeJi {
        height: auto !important;
    }

    /* 11. 首页统计卡片：取消浮动横排，避免横向溢出错位 */
    .stat-card {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 15px !important;
        min-height: 0 !important;
    }

    .stat-card .layui-card-body {
        width: 100%;
    }

    .stat-card .stat-icon {
        font-size: 32px !important;
        margin: 0 10px 8px 0 !important;
    }

    .stat-card .stat-info {
        float: none !important;
        display: inline-block;
        width: 48%;
        margin: 0 0 10px 0 !important;
        vertical-align: top;
    }

    .stat-card .stat-value {
        font-size: 24px !important;
        margin-left: 0 !important;
    }

    .stat-card .stat-label {
        font-size: 12px !important;
    }

    /* 12. 登录页：窄屏自适应宽度、压缩留白，横屏下不被裁切 */
    .layadmin-user-login {
        padding: 20px 0 !important;
        min-height: 100%;
    }

    .layadmin-user-login-main {
        width: calc(100% - 20px) !important;
        max-width: 375px;
    }

    .layadmin-user-login-box {
        padding: 20px !important;
    }

    .layadmin-user-login-header {
        padding-top: 10px !important;
    }

    .layadmin-user-login-header img {
        width: 70px;
        height: 70px;
        margin-top: 10px;
    }

    .layadmin-user-login-header h2 {
        font-size: 1.8rem;
        margin-top: 16px;
    }
}

/* ------------------------------------------------------------------ 小屏手机 */
@media screen and (max-width: 480px) {
    .layui-fluid {
        padding: 6px !important;
    }

    .layui-card {
        margin-bottom: 8px;
    }

    /* 小屏把页面内容里的单行控件收窄到 170px，保证设置页 165px 的宽标签也能与控件同行 */
    .layui-body .layui-form-item .layui-input-inline,
    .layui-body .layui-inline .layui-input-inline {
        flex-basis: 170px;
    }

    .layui-body .layui-form-item .layui-input-block,
    .layui-body .layui-inline .layui-input-block {
        flex-basis: 170px;
    }

    .layui-card-header #titletxt,
    .layui-card-header #HeaderDiv {
        font-size: 15px;
    }

    .stat-card .stat-info {
        width: 100%;
    }
}