/* =====================================================================
   开单管理系统 — 全局样式
   ===================================================================== */

:root {
    --brand:        #1a6dff;
    --brand-dark:   #0f57d6;
    --brand-light:  #eaf2ff;
    --text:         #1f2430;
    --text-sub:     #6b7385;
    --line:         #e8ebf0;
    --bg:           #f4f6fa;
    --danger:       #e5484d;
    --success:      #16a34a;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
                 "PingFang SC", "Hiragino Sans GB", sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
}

/* ---------------- LAYUI 主题色微调 ---------------- */
.layui-btn {
    background-color: var(--brand);
    border-radius: 4px;
}
.layui-btn:hover { background-color: var(--brand-dark); opacity: 1; }
.layui-btn-primary {
    background-color: #fff;
    color: var(--text);
    border-color: #d7dbe3;
}
.layui-btn-primary:hover { border-color: var(--brand); color: var(--brand); background-color: #fff; }
.layui-btn-danger { background-color: var(--danger); }
.layui-btn-danger:hover { background-color: #cf3b40; }
.layui-btn-disabled, .layui-btn-disabled:hover {
    background-color: #f1f2f5 !important;
    color: #b9bec9 !important;
    border-color: #e6e8ec !important;
    cursor: not-allowed;
}
.layui-input:focus, .layui-textarea:focus { border-color: var(--brand) !important; }
.layui-form-checked[lay-skin="primary"] i {
    border-color: var(--brand) !important;
    background-color: var(--brand);
}
.layui-form-checkbox[lay-skin="primary"]:hover i { border-color: var(--brand); }
.layui-form-radio > i:hover, .layui-form-radioed > i { color: var(--brand); }
.layui-table-view .layui-table td, .layui-table th { font-size: 13px; }
.layui-layer-title { font-weight: 600; }

/* lay-size=lg 的单元格左右内边距是 30px，窄列（编号/状态/操作等 70~140px）
   扣掉后内容区只剩 10~80px，「启用」「编辑/删除」都会被挤到折行。
   统一收窄为 15px，窄列即可容纳正常内容。 */
.layui-table[lay-size="lg"] td,
.layui-table[lay-size="lg"] th {
    padding-left: 15px;
    padding-right: 15px;
}
/* 操作列：按钮不折行、彼此留出间距 */
.layui-table td.op-col { white-space: nowrap; }
.layui-table td.op-col .layui-btn + .layui-btn { margin-left: 8px; }

/* ---------------- 弹窗内表单标签宽度 ----------------
   本文件顶部有全局 `* { box-sizing: border-box; }`，它会把 layui 的
   .layui-form-label（width:80px + padding:9px 15px）压到内容区只剩 50px，
   于是「单位全称」这类 4 字标签就折行成两行。
   这里在弹窗范围内把标签调回内容区 80px（约 5 个汉字），并禁止折行。 */
.layui-layer .layui-form-label {
    width: 110px;
    padding: 9px 15px;
    white-space: nowrap;
}
.layui-layer .layui-input-block { margin-left: 110px; }
.layui-table-cell { height: auto; line-height: 26px; padding: 6px 10px; }

/* ---------------- 登录页 ---------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef4ff 0%, #e7eefc 40%, #f5f7fb 100%);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(0px);
}
.login-page::before {
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(26,109,255,.14), rgba(26,109,255,0) 68%);
    top: -220px; left: -160px;
}
.login-page::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(26,109,255,.10), rgba(26,109,255,0) 68%);
    bottom: -200px; right: -140px;
}
.login-card {
    position: relative;
    width: 400px;
    max-width: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(23, 43, 92, .12);
    padding: 40px 38px 32px;
}
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand .logo {
    width: 54px; height: 54px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand) 0%, #4d92ff 100%);
    color: #fff;
    font-size: 24px;
    line-height: 54px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(26,109,255,.28);
}
.login-brand h1 {
    font-size: 21px;
    margin: 0 0 6px;
    font-weight: 600;
    letter-spacing: .5px;
}
.login-brand p {
    margin: 0;
    font-size: 13px;
    color: var(--text-sub);
    letter-spacing: 2px;
}
.login-form .layui-form-item { margin-bottom: 18px; }
.login-form .layui-input {
    height: 44px;
    line-height: 44px;
    border-radius: 6px;
    background: #fbfcfe;
}
.login-form .layui-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    letter-spacing: 4px;
    border-radius: 6px;
    margin-top: 6px;
}
.login-err {
    display: none;
    margin-bottom: 16px;
    padding: 9px 12px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fdd8d8;
    color: var(--danger);
    font-size: 13px;
}

/* ---------------- 主框架 ---------------- */
.layui-layout-admin .layui-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    height: 56px;
    box-shadow: 0 1px 3px rgba(20,35,70,.04);
}
.layui-layout-admin .layui-logo {
    width: 270px;
    background: #fff;
    color: var(--text);
    border-right: 1px solid var(--line);
    font-size: 16px;
    font-weight: 600;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    letter-spacing: .5px;
}
.layui-layout-admin .layui-logo .ver {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-sub);
    letter-spacing: 0;
}
.layui-layout-admin .layui-logo .dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 3px;
    background: var(--brand);
    margin-right: 9px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
/* 备忘便签（v1.51）：钉在系统名旁边，点开是本店铺的备忘清单，条数走角标。
   宽度给得比较足（logo 210 → 270px），标签才不会被挤到换行。 */
.layui-layout-admin .layui-logo .memo-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 22px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    cursor: pointer;
    transition: background .15s;
}
.layui-layout-admin .layui-logo .memo-tag:hover { background: #dfe7ff; }
.layui-layout-admin .layui-logo .memo-tag .layui-icon { font-size: 13px; }
.layui-layout-admin .layui-logo .memo-tag .memo-badge {
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    text-align: center;
}
.layui-layout-admin .layui-logo .memo-tag .memo-badge[hidden] { display: none; }
.layui-layout-admin .layui-header .layui-nav { background: transparent; padding: 0 20px; }
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
    color: var(--text);
    height: 56px;
    line-height: 56px;
}
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover { color: var(--brand); }
.layui-layout-admin .layui-header .layui-nav .layui-nav-more { border-top-color: #9aa2b1; }

.shop-user {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding-right: 20px;
    color: var(--text);
}
.shop-user .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    flex: none;
}
/* 右上角只显示姓名（不再有角色标签与「店铺 - 姓名」拼接文案） */
.shop-user .who { font-size: 14px; font-weight: 600; }

.layui-layout-admin .layui-side {
    top: 56px;
    width: 270px;
    background: #ffffff;
    border-right: 1px solid var(--line);
}
.layui-side-scroll { width: 290px; }
.layui-layout-admin .layui-side .layui-nav { width: 270px; background: #fff; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item a {
    height: 44px;
    line-height: 44px;
    color: #4a5162;
    padding-left: 22px;
    font-size: 14px;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item a:hover { background: #f6f8fc; color: var(--brand); }
.layui-layout-admin .layui-side .layui-nav .layui-this a,
.layui-layout-admin .layui-side .layui-nav .layui-this a:hover {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
    border-right: 3px solid var(--brand);
}
.layui-layout-admin .layui-side .layui-nav-itemed > a { color: var(--text); }
.layui-layout-admin .layui-body {
    top: 56px;
    left: 270px;
    bottom: 0;
    /* layui 默认 .layui-layout-admin .layui-body{padding-bottom:44px} 是给页脚预留的位置。
       本项目已去掉页脚（店铺名/姓名/登录账号/版本号那一行），这里必须清零，
       否则内容区底部会留一条 44px 的空白。 */
    padding-bottom: 0;
    background: var(--bg);
    overflow: hidden;
}
.layui-body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------- 左侧菜单收起 / 展开 ----------------
   侧栏和内容区都是 left 定位，折叠时把 left 归 0 即可，
   logo 保持不动（收起后仍能看到系统名），切换按钮也钉在 logo 右缘。 */
.layui-layout-admin .layui-side,
.layui-layout-admin .layui-body { transition: left .2s ease; }
.layui-layout-admin.side-collapsed .layui-side { left: -270px; }
.layui-layout-admin.side-collapsed .layui-body { left: 0; }
.side-toggle {
    position: absolute;
    left: 270px;
    top: 0;
    z-index: 1001;
    width: 34px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #9aa2b1;
    background: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.side-toggle:hover { color: var(--brand); background: var(--brand-light); }

/* 手机端抽屉遮罩。桌面端不显示（窄屏的铺开规则在下面的媒体查询里） */
.side-mask { display: none; }

/* ---------------- 内容页通用 ---------------- */
.page-wrap { padding: 16px; }
.page-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(20,35,70,.06);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.page-card:last-child { margin-bottom: 0; }
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.page-head h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid var(--brand);
    line-height: 1.2;
}
.page-head .sub { font-size: 12px; color: var(--text-sub); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .layui-input { width: 180px; }
.toolbar .layui-form-select { width: 180px; }
/* 「开始日期 至 结束日期」绑成一组，免得窄屏自动换行时被拆到两行去 */
.tf-date { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- 列表页：顶部操作栏钉顶 + 页码栏钉底 ----------------
   列表页统一结构：.page-wrap > .page-card > .page-head（内含 .toolbar）+ 表格。
   页面在 iframe 里滚动时：
   · 顶部操作栏（搜索框 / 查询 / 新增…）钉在视口顶部，长列表滚到哪都能直接查询；
   · layui 分页栏钉在视口底部，不用滚到底就能翻页。
   开单类页面（.order-page / .quick-page）结构不同且需要整屏布局，用 :not() 排除。 */
.page-wrap:not(.order-page):not(.quick-page) > .page-card > .page-head {
    position: sticky;
    top: 0;
    /* 必须盖过 .layui-table-fixed（z-index:101），否则滚动时固定列会穿透到操作栏上 */
    z-index: 300;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
/* 页码栏吸底。注意：只有内层 .layui-table-box 设了 overflow:hidden，
   .layui-table-page 的祖先 .layui-table-view 没有 overflow，
   所以这里 sticky 是相对视口生效的，滚动过程中页码栏始终可见。 */
.layui-table-page {
    position: sticky;
    bottom: 0;
    z-index: 200;
    background: #fff;
}

.sec-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 14px;
    padding-left: 9px;
    border-left: 3px solid var(--brand);
    line-height: 1.1;
}
.sec-title .hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-sub);
    margin-left: 8px;
}

/* 页面主体里的手写 .layui-table（价格表 / 收款账号 / 客户协议价 / 角色 / 店铺 / 外协）
   没走 layui 表格组件，就没有组件自带的横滑容器，列一多会把整页撑宽。
   统一在外面套一层 .table-scroll 负责横滑。
   .layui-table 本身的 width:100% 会把定好宽的列按比例压扁（手机上「材质」列
   只剩一个字宽），所以这里改成 width:auto —— 让表格保持列宽定义的自然宽度，
   交给 .table-scroll 横滑；min-width:100% 保证宽屏下仍然铺满。 */
.table-scroll { overflow-x: auto; }
.table-scroll > .layui-table { width: auto; min-width: 100%; }

.empty-tip { text-align: center; color: #a6adbb; padding: 48px 0; font-size: 13px; }
.req::after { content: " *"; color: var(--danger); font-weight: 700; }

/* ---------------- 开单页 ---------------- */
/* 整体：撑满 iframe 可视高度，上方表单压紧，明细表吃掉剩余高度 */
.page-wrap.order-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.order-page > .page-card { padding: 12px 16px; margin-bottom: 10px; }
.order-page > .page-card > .page-head { margin-bottom: 10px; }

/* 快速开单页：整页只有一张卡片，左右分栏吃掉全部高度 */
.page-wrap.quick-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}
.quick-page > .qo-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
}
/* .qo-wrap 原为弹窗里的「撑满固定高度」设计，整页下改为吃掉卡片剩余高度 */
.quick-page .qo-wrap { height: auto; flex: 1 1 auto; min-height: 0; }
.order-page .of-tip { margin-top: 4px; line-height: 1.5; }
.quick-page .of-tip { margin-top: 4px; line-height: 1.5; }
.delivery-input { cursor: pointer; }

/* 订单列表：填了交付时间的订单整行高亮，便于一眼看出待交付的单子 */
.layui-table-view .layui-table-body tbody tr.row-delivery > td { background-color: #fff8e6; }
.layui-table-view .layui-table-body tbody tr.row-delivery:hover > td { background-color: #fff2d1; }
.delivery-tag {
    display: inline-block;
    background: #fff2d1;
    color: #96601a;
    border: 1px solid #f0d9a8;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 12px;
    white-space: nowrap;
}

/* 开单页表单：改用 flex 布局，保证标签与输入框严格并排对齐。
   原因：layui 的标签是 float:left，当 .layui-input-block 里含 .layui-row
   栅格（客户单位/客户姓名行）时，栅格自带的 clearfix 会把内容整体
   清到浮动标签的下一行，视觉上就是「标题在上、输入框在下」。 */
.order-form .layui-form-item {
    display: flex;
    align-items: flex-start;
}
.order-form .layui-form-label {
    float: none;
    flex: none;
    width: 92px;
    padding: 9px 10px 9px 0;
    text-align: right;
    color: #3c4356;
}
.order-form .layui-input-block {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
}
.order-form .layui-input, .order-form .layui-textarea { border-radius: 4px; }
.order-form .layui-textarea { min-height: 54px; resize: vertical; }
.order-form .layui-form-item { margin-bottom: 10px; }

/* 一行放两个字段（如「项目名称 + 交付时间」）：外层 form-item 里并排两个 of-field，
   每个 of-field 内部沿用「标签 + 输入区」的 flex 结构 */
.order-form .of-inline-row { flex-wrap: nowrap; }
.order-form .of-field { display: flex; align-items: flex-start; flex: 1 1 0; min-width: 0; }
.order-form .of-field + .of-field { margin-left: 10px; }
.order-form .of-field .layui-input-block { flex: 1 1 auto; min-width: 0; }

/* 联想输入框 */
.ac-wrap { position: relative; }
/* 联想下拉：固定定位 + JS 跟随输入框（见 common.js 的 suggest.place）。
   原因：明细表外层的 .items-scroll 是横向/纵向滚动容器，容器内的绝对定位
   下拉会被裁掉，条数一多就显示不全。fixed 定位可跳出滚动容器的裁剪。 */
.ac-list {
    position: fixed;
    z-index: 1990;
    left: 0;
    top: 0;
    width: 240px;   /* 实际宽度由 JS 按输入框宽度写入 */
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(23,43,92,.14);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}
.ac-list.show { display: block; }
.ac-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid #f4f6f9;
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.active { background: var(--brand-light); }
.ac-item .ac-main { color: var(--text); font-weight: 500; }
.ac-item .ac-sub { color: var(--text-sub); font-size: 12px; margin-top: 2px; }
.ac-item .ac-tag {
    float: right;
    font-size: 11px;
    color: var(--brand);
    background: var(--brand-light);
    border-radius: 3px;
    padding: 1px 6px;
    margin-top: 2px;
}
.ac-empty { padding: 12px; text-align: center; color: #a6adbb; font-size: 13px; }

/* 可编辑明细表 */
.items-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
/* 开单页：明细卡片吃掉剩余高度，表体自身滚动（表头吸顶） */
.order-page > .items-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin-bottom: 0;
}
.order-page .items-card .items-scroll { flex: 1 1 auto; min-height: 150px; overflow: auto; }
.order-page .items-card .items-scroll thead th { position: sticky; top: 0; z-index: 5; }
.order-page .items-card .items-foot { margin-top: 10px; }
.order-page .items-card .items-total {
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.order-page .items-card .order-submit-bar { margin-top: 12px; }
table.items-table {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
    font-size: 13px;
}
table.items-table th {
    background: #f7f9fc;
    color: #4a5162;
    font-weight: 600;
    padding: 9px 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    white-space: nowrap;
}
table.items-table th:last-child { border-right: 0; }
table.items-table td {
    padding: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
}
table.items-table td:last-child { border-right: 0; }
table.items-table tr:last-child td { border-bottom: 0; }
table.items-table input.cell {
    width: 100%;
    height: 36px;
    border: 0;
    outline: none;
    padding: 0 8px;
    font-size: 13px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
}
table.items-table input.cell:focus { background: #f0f6ff; box-shadow: inset 0 0 0 2px var(--brand); }
table.items-table input.cell.num { text-align: right; }
table.items-table input.cell[readonly] { background: #fafbfd; color: #444c5e; }
table.items-table td.cell-ac { position: relative; }
.rowno {
    width: 44px;
    text-align: center;
    color: #98a0b0;
    font-size: 12px;
    background: #fbfcfe;
}
.col-del {
    width: 46px;
    text-align: center;
}
.col-del .layui-btn { padding: 0 8px; height: 26px; line-height: 26px; font-size: 12px; }
.col-agree {
    width: 46px;
    text-align: center;
}
.col-agree input.agree-chk {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--brand);
}
/* 工序复选框：勾了的子项才会生成对应任务（设计 v1.49 / 制作 v1.34 / 安装 v1.49） */
.col-design,
.col-produce,
.col-install {
    text-align: center;
}
.col-design input.design-chk,
.col-produce input.produce-chk,
.col-install input.install-chk {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--brand);
}

.items-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fbfcfe;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.items-total .num {
    color: var(--danger);
    font-size: 20px;
    font-weight: 700;
    font-family: "DIN Alternate", Consolas, monospace;
}
.items-foot {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.order-submit-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
/* 明细卡片标题行：标题靠左、快速开单按钮靠右 */
.of-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------- 快速开单面板（左常用项目 / 右清单） ---------------- */
.qo-wrap { display: flex; height: 100%; min-height: 0; }
/* 常用项目区占大头，清单固定在右侧（占比小一些，够填数量/单价即可） */
.qo-left {
    flex: 0 0 56%;
    width: 56%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line);
}
.qo-left-title,
.qo-right-title {
    flex: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: #fbfcfe;
    border-bottom: 1px solid var(--line);
}
/* 标题行右侧放「清空重填」等小操作 */
.qo-left-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qo-btns {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-content: start;
}
/* 大号彩色按钮：颜色由 JS 按调色板逐个下发（内联 background）。
   按钮内三行：材质 / 规格 单位 / 价格X元 */
.qo-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    /* 最小宽度：文案短的按钮也保持同宽，整片按钮看起来才齐 */
    min-width: 200px;
    box-sizing: border-box;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    box-shadow: 0 2px 6px rgba(20, 30, 60, .16);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.qo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 30, 60, .26); filter: brightness(1.08); }
.qo-btn:active { transform: translateY(0); filter: brightness(.96); }
.qo-btn-main {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    /* 单行显示：不换行，超长以省略号收尾（完整文案看按钮 title） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qo-btn-sub {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qo-btn-line3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    font-family: "DIN Alternate", Consolas, "Microsoft YaHei", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qo-empty {
    grid-column: 1 / -1;
    padding: 28px 14px;
    font-size: 12.5px;
    line-height: 2;
    color: var(--text-sub);
    text-align: center;
}
.qo-empty b { color: var(--brand); }

/* ---------------- 常用项目：编辑排序模式 ---------------- */
.qo-left-ops { display: inline-flex; gap: 8px; align-items: center; }
.qo-sort-tip {
    flex: none;
    padding: 9px 14px;
    background: #eef4ff;
    border-top: 1px solid #c9daf7;
    color: #2b5fbf;
    line-height: 1.6;
}
.qo-sort-tip[hidden] { display: none; }
.qo-btns.qo-sorting { cursor: default; }
/* 可拖动：抬起 + 抓手，序号用角标显示 */
.qo-btn-sortable { cursor: grab; box-shadow: 0 2px 8px rgba(20, 30, 60, .22); }
.qo-btn-sortable::after {
    content: attr(data-order);
    position: absolute;
    left: -7px;
    top: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.qo-btn-dragging { opacity: .45; cursor: grabbing; transform: scale(.97); }

/* ---------------- 常用项目：从价格表添加（弹窗内模糊搜索 + 结果列表） ---------------- */
.qo-pick { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.qo-pick-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.qo-pick-head .layui-input { flex: 1 1 auto; min-width: 0; height: 36px; }
.qo-pick-count { flex: none; font-size: 12.5px; color: var(--text-sub); white-space: nowrap; }
.qo-pick-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.qo-pick-table { width: 100%; border-collapse: collapse; }
.qo-pick-table th,
.qo-pick-table td {
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}
.qo-pick-table th { position: sticky; top: 0; z-index: 1; background: #fbfcfe; font-weight: 600; white-space: nowrap; }
.qo-pick-table td { word-break: break-word; }
.qo-pick-table .qo-pick-mat { font-weight: 600; color: var(--text); }
.qo-pick-table .qo-pick-nowrap { white-space: nowrap; }
.qo-pick-table .qo-pick-num { font-family: "DIN Alternate", Consolas, "Microsoft YaHei", monospace; font-weight: 700; }
.qo-pick-done { color: var(--text-sub); font-size: 12.5px; }
.qo-pick-empty { padding: 34px 14px; text-align: center; color: var(--text-sub); font-size: 12.5px; line-height: 2; }
.qo-pick-tip {
    flex: none;
    padding: 9px 14px;
    background: #fbfcfe;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-sub);
}

/* 右上角唯一的客户名称输入区 */
.qo-cust {
    flex: none;
    padding: 12px 14px 10px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.qo-cust-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.qo-cust .layui-input { height: 38px; font-size: 14px; }
.qo-cust .of-tip { margin-top: 5px; line-height: 1.5; }

.qo-right { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.qo-list-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.qo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qo-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-sub);
    text-align: left;
    background: #f7f9fc;
    border-bottom: 1px solid var(--line);
}
.qo-table td { padding: 5px 8px; border-bottom: 1px solid #f0f2f6; }
.qo-empty-cell {
    padding: 40px 10px !important;
    text-align: center !important;
    font-size: 12.5px;
    color: var(--text-sub);
}
.qo-in {
    width: 100%;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
.qo-in:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px rgba(43,95,191,.12); }
.qo-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #fbfcfe;
    border-top: 1px solid var(--line);
}
.qo-total { font-size: 13.5px; color: var(--text); }
.qo-total b {
    color: var(--danger);
    font-size: 19px;
    font-family: "DIN Alternate", Consolas, monospace;
}
.qo-hint { flex: none; padding: 0 14px 10px; background: #fbfcfe; font-size: 12px; }

/* 「稍后再说」后的提示条：订单已开、未收款，清单保留 */
.qo-pending {
    flex: none;
    padding: 9px 14px;
    background: #fff7e8;
    border-top: 1px solid #f5d9a8;
    color: #8a5a00;
    font-size: 12.5px;
    line-height: 1.7;
}
.qo-pending[hidden] { display: none; }
.qo-pending .layui-icon { margin-right: 5px; }
.qo-pending b { color: #a35b00; }

/* 刚加入 / 刚加量的那一行闪一下，便于快速定位 */
@keyframes qoRowFlash {
    from { background: #fff3cd; }
    to   { background: transparent; }
}
.qo-table tbody tr.qo-row-flash { animation: qoRowFlash .7s ease-out; }

/* 生产流程页：已发外协的标记 */
.outsource-tag {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    background: #fff4e6; color: #b26a00; font-size: 11.5px; font-weight: 600;
    border: 1px solid #f0d3a4;
}

/* 作废订单页：顶部说明条 */
.void-tip {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #fff7e8;
    border: 1px solid #f5d9a8;
    border-radius: 6px;
    color: #8a5a00;
    font-size: 12.5px;
    line-height: 1.8;
}
.void-tip .layui-icon { margin-right: 5px; }
.void-tip b { color: #a35b00; }

/* 地图定位小控件 */
.loc-row { display: flex; gap: 8px; align-items: center; }
.loc-row .layui-input { flex: 1; }
.loc-row .layui-btn { flex: none; }

/* ---------------- 开单：流程环节多选弹窗 ---------------- */
.step-pick-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 6px 0 4px;
}
.step-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.step-pick input { width: 16px; height: 16px; cursor: pointer; }

/* ---------------- 开单：收款弹窗 ---------------- */
.pay-sum {
    background: #f7f9fc;
    border: 1px solid #e8ecf3;
    border-radius: 6px;
    padding: 12px 14px;
}
.pay-sum .pay-kv {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 2;
}
.pay-sum .pay-kv .k { color: var(--text-sub); }

/* ---------------- 生产流程页 ---------------- */
.step-tag {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 3px;
    margin: 0 3px 3px 0;
    background: #f2f4f8;
    color: #5b6376;
}
.step-tag.doing { background: #fff4e6; color: #b26a00; }
.step-tag.done  { background: #e8f8ee; color: #14884a; }
.step-tag.pending { background: #f2f4f8; color: #5b6376; }

/* ---------------- 订单流程进度（v1.33） ----------------
   列表列：一串小圆点 + 「n / m 已完成」；详情弹窗：节点卡片串成时间轴 */
.flow-dots { display: flex; align-items: center; gap: 4px; }
.flow-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dfe3ea;
    flex: none;
}
.flow-dot.doing { background: #1b5fbf; }
.flow-dot.done  { background: #2e9e5b; }

.flow-line { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; }
.flow-node {
    flex: 1 1 0;
    min-width: 100px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}
.flow-node.doing { border-color: #9cc4f5; background: #f4f9ff; }
.flow-node.done  { border-color: #b9e3c9; background: #f3fbf6; }
.flow-node-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: #c3c9d6;
    margin-bottom: 5px;
}
.flow-node.doing .flow-node-dot { background: #1b5fbf; }
.flow-node.done  .flow-node-dot { background: #2e9e5b; }
.flow-node-name { font-size: 13px; font-weight: 600; }
.flow-node-sub  { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.flow-arrow { align-self: center; color: var(--text-sub); font-size: 15px; }

/* ---------------- 角色权限页 ---------------- */
.perm-group { margin-bottom: 14px; }
.perm-group-name {
    font-size: 13px;
    font-weight: 600;
    color: #3c4356;
    margin-bottom: 6px;
}
.perm-item { display: inline-block; margin: 0 22px 8px 0; }
.role-perm-text {
    color: var(--text-sub);
    font-size: 12px;
    line-height: 1.7;
    max-width: 620px;
}
.notice {
    background: #f0f6ff;
    border: 1px solid #d5e4ff;
    color: #2b5fbf;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.notice b { font-weight: 600; }

/* ---------------- 账号页徽标 ---------------- */
.badge {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 3px;
    background: #f2f4f8;
    color: #5b6376;
    margin: 0 2px 2px 0;
}
.badge.ok { background: #e8f8ee; color: #14884a; }
.badge.off { background: #fdeeee; color: #c33a3f; }
.badge.role { background: var(--brand-light); color: var(--brand); }

/* ---------------- 订单详情 ---------------- */
.detail-head { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 24px; }
.detail-head .kv { display: flex; font-size: 13px; line-height: 2; }
.detail-head .kv .k { color: var(--text-sub); width: 76px; flex: none; }
.detail-head .kv .v { color: var(--text); word-break: break-all; }
.detail-items td { padding: 8px 10px !important; }

/* ---------------- 列表「列设置」弹窗 ----------------
   每行一个可勾选的列；右侧上移/下移调整左右顺序（顺序 = 弹窗里的 DOM 顺序）。 */
.col-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fbfcfe;
}
.col-row label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}
.col-row input.js-col-on {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand);
}
.col-row .col-move { flex: none; display: inline-flex; gap: 12px; font-size: 12px; }
.col-row .col-move a { color: var(--brand); cursor: pointer; }
.col-row .col-move a:hover { text-decoration: underline; }

/* ---------------- 小工具 ---------------- */
.mt10 { margin-top: 10px; }
.mt0 { margin-top: 0; }
.txt-sub { color: var(--text-sub); font-size: 12px; }
.money { font-family: "DIN Alternate", Consolas, monospace; }

/* =====================================================================
   移动端适配（≤768px）
   ---------------------------------------------------------------------
   桌面端布局完全不变，这里只做「窄屏收窄 + 关键区域改单列」。
   分四大块：
     1. 主框架 —— 左侧菜单变覆盖式抽屉（开合逻辑在 index.php 里）
     2. 页面通用 —— 卡片内边距、操作栏换行、弹窗标签
     3. 重点页 —— 开单页表单堆叠、快速开单页左右分栏改上下
     4. 触摸友好 —— 输入控件统一 16px，避免 iOS 聚焦时整页放大
   ===================================================================== */

/* ---------------- 备忘面板（v1.51） ----------------
   弹层内容由 index.php 动态拼出，这里的类名只服务于它：
   .memo-bar 顶部说明 + 新增按钮；.memo-form 展开的填写区；.memo-list 清单。 */
.memo-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 16px 16px;
    box-sizing: border-box;
}
.memo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.memo-bar .memo-hint { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.memo-bar .layui-btn { flex: none; }
.memo-form { padding: 14px 0 12px; border-bottom: 1px dashed var(--line); }
.memo-form textarea { resize: none; height: 76px; font-size: 14px; line-height: 1.7; }
.memo-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}
.memo-vis-pick { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--text); }
.memo-vis-pick label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.memo-vis-pick input[type=radio] { margin: 0; accent-color: var(--brand); cursor: pointer; }
.memo-form-btns { display: flex; gap: 8px; flex: none; }
.memo-list { flex: 1; overflow-y: auto; padding-top: 14px; }
.memo-item {
    position: relative;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-left: 3px solid #cbd5e6;
    border-radius: 8px;
    background: #fbfcff;
}
.memo-item.is-shop { border-left-color: var(--brand); background: #f7faff; }
.memo-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text);
    white-space: pre-wrap;      /* 内容里换行照原样显示 */
    word-break: break-word;
}
.memo-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-sub);
}
.memo-meta .memo-author { font-weight: 600; color: #5b6478; }
.memo-meta .memo-vis { padding: 1px 7px; border-radius: 9px; background: #eef1f7; color: #77809a; }
.memo-item.is-shop .memo-meta .memo-vis { background: var(--brand-light); color: var(--brand); }
.memo-meta .memo-time { margin-right: auto; }
.memo-ops a { margin-left: 12px; color: var(--brand); }
.memo-ops a.memo-del { color: #e5533d; }
.memo-ops a:hover { text-decoration: underline; }
.memo-empty { padding: 48px 0; text-align: center; font-size: 13px; color: var(--text-sub); }

@media (max-width: 768px) {

    /* iOS 横屏时浏览器会擅自放大字号，显式关掉 */
    html { -webkit-text-size-adjust: 100%; }

    /* ================================================================
       1. 主框架
       ================================================================ */

    /* 顶栏：只留最关键的信息。logo 给最左侧的汉堡按钮让出位置，
       版本号 / 角色标签 /「可切换」提示都让位，长店名与长姓名省略号截断 */
    .layui-layout-admin .layui-logo {
        width: auto;
        max-width: 44vw;
        padding-left: 54px;
        padding-right: 6px;
        font-size: 15px;
        border-right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .layui-layout-admin .layui-logo .ver { display: none; }

    /* 备忘标签在窄屏让位（logo 是 ellipsis 截断的，塞不下）；
       侧栏抽屉维持原来的 210px，不受桌面端加宽到 270px 的影响 */
    .layui-layout-admin .layui-logo .memo-tag { display: none; }
    .layui-layout-admin .layui-side { width: 210px; }
    .layui-layout-admin .layui-side .layui-nav { width: 210px; }
    .layui-side-scroll { width: 230px; }

    .side-toggle {
        left: 0;
        width: 46px;
        font-size: 18px;
        border-left: 0;
    }

    .layui-layout-admin .layui-header .layui-nav { padding: 0 6px; }
    /* 右侧留出下拉箭头（.layui-nav-more 是绝对定位）的位置，否则窄屏箭头会压在文字上 */
    .layui-layout-admin .layui-header .layui-nav .layui-nav-item a { padding: 0 22px 0 8px; }
    .shop-user { gap: 6px; }
    .shop-user .avatar { width: 26px; height: 26px; line-height: 26px; font-size: 12px; }
    .shop-user .who {
        font-size: 13px;
        max-width: 16vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #curShopName {
        display: inline-block;
        max-width: 28vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    #shopNav .txt-sub { display: none; }

    /* 侧栏变抽屉：默认整块推到屏幕外；内容区永远全宽（抽屉浮在内容之上，不再推挤） */
    .layui-layout-admin .layui-side,
    .layui-layout-admin.side-collapsed .layui-side { left: -212px; }
    .layui-layout-admin.side-open .layui-side,
    .layui-layout-admin.side-collapsed.side-open .layui-side {
        left: 0;
        box-shadow: 2px 0 18px rgba(15, 23, 42, .18);
    }
    .layui-layout-admin .layui-body,
    .layui-layout-admin.side-collapsed .layui-body { left: 0; }

    /* 抽屉遮罩：从顶栏下沿开始铺开，这样汉堡按钮仍露在外面可点 */
    .layui-layout-admin.side-open .side-mask {
        display: block;
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 998;                 /* 低于侧栏(999)，高于内容区 iframe */
        background: rgba(15, 23, 42, .38);
    }

    /* ================================================================
       2. 页面通用
       ================================================================ */

    /* 登录页：卡片贴顶一点，内边距收紧（卡片本身已有 max-width:100%） */
    .login-page {
        padding: 16px;
        padding-top: 9vh;
        align-items: flex-start;
        min-height: 100dvh;
    }
    .login-card { padding: 26px 20px 22px; border-radius: 12px; }

    .page-wrap { padding: 10px; }
    .page-card { padding: 12px; border-radius: 6px; margin-bottom: 10px; }
    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 10px;
    }
    .page-head h2 { font-size: 15px; }
    .page-head .sub { font-size: 11.5px; line-height: 1.6; }
    .sec-title { font-size: 13px; }

    /* 操作栏：控件自动换行、宽度吃满可用空间。
       各页把宽度写死在 style 里（150/180/220/240px），必须 !important 才压得住。
       min-width:0 不能漏 —— flex item 的 min-width 默认是 auto（按内容），
       input 的内容最小宽度约 180px，不归零会把整行顶破。 */
    .toolbar { width: 100%; gap: 8px; }
    .toolbar > * { flex: 0 1 auto; min-width: 0; }
    .toolbar .layui-input,
    .toolbar .layui-form-select { flex: 1 1 118px; min-width: 0; width: auto !important; }
    .toolbar .layui-form-select > .layui-input { width: 100% !important; }
    /* 搜索框与日期组各占一整行，剩下的下拉 / 按钮两两成行 */
    .toolbar > #kw,
    .toolbar > .ac-wrap,
    .toolbar > .tf-date { flex: 1 1 100%; min-width: 0; width: auto !important; }
    .tf-date { min-width: 0; }
    .tf-date .layui-input { flex: 1 1 0; min-width: 0; width: auto !important; }
    .toolbar .txt-sub { align-self: center; flex: none; }
    .toolbar .layui-btn { flex: 0 1 auto; }

    /* 表格：横向滚动容器在 iOS 上要显式打开惯性滚动 */
    .items-scroll,
    .table-scroll,
    .layui-table-body,
    .layui-table-main { -webkit-overflow-scrolling: touch; }
    .layui-table-page { padding: 4px 0; }
    /* lay-size=lg 的单元格左右各 15px，窄屏收窄些，让表格总宽小一点、少滑一点 */
    .layui-table[lay-size="lg"] td,
    .layui-table[lay-size="lg"] th { padding-left: 10px; padding-right: 10px; }
    /* 窄屏下的手写表格：列宽改按内容自适应、内容不换行。
       否则定死的列宽（如「材质」180px）会被容器按比例压到 40px 宽，
       「A4彩色打印」竖排成 5 行，反而更难读。宁可宽一点、交给 .table-scroll 横滑。 */
    .table-scroll > .layui-table th,
    .table-scroll > .layui-table td { width: auto !important; white-space: nowrap; }
    /* 例外：整句文本的列（如角色页的「拥有权限」）nowrap 会把表格撑到 1500px+。
       放行换行，再给个 min-width，免得反过来被压成一列竖排的小字 */
    .table-scroll .role-perm-text { white-space: normal; min-width: 200px; }
    .layui-layer-title { font-size: 15px; }

    /* 弹窗：宽度由 common.js 统一裁到 94vw，这里只做兜底与标签收窄 */
    .layui-layer { max-width: 96vw; }
    .layui-layer .layui-form-label { width: 84px; padding: 9px 10px 9px 0; font-size: 13px; }
    .layui-layer .layui-input-block { margin-left: 84px; }
    .layui-layer-content { -webkit-overflow-scrolling: touch; }

    /* 订单详情 / 提示条 / 徽标 */
    .detail-head { grid-template-columns: 1fr; gap: 2px; }
    .detail-head .kv .k { width: 68px; }
    .notice, .void-tip { font-size: 12px; padding: 9px 11px; }
    .perm-item { margin-right: 14px; }
    .col-row { padding: 8px 10px; }

    /* ================================================================
       3. 开单页（.order-page）
       ================================================================ */

    /* 标签收窄；「项目名称 + 交付时间」原本一行两字段，窄屏各占一行 */
    .order-form .layui-form-label { width: 76px; padding: 9px 8px 9px 0; font-size: 13px; }
    .order-form .of-inline-row { flex-wrap: wrap; }
    .order-form .of-field { flex: 1 1 100% !important; }   /* 覆盖内联的 flex:1.1 */
    .order-form .of-field + .of-field { margin-left: 0; margin-top: 6px; }

    /* 「客户单位 / 简称 / 类型」这类 layui 栅格在窄屏改成上下堆叠，
       否则三个控件挤在一行各只有 90px 宽 */
    .order-form .layui-row > [class*="layui-col-"] {
        float: none;
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
        margin-bottom: 6px;
    }
    .order-form .layui-row > [class*="layui-col-"]:last-child { margin-bottom: 0; }

    .order-page > .items-card { min-height: 260px; }
    .order-page .items-card .items-scroll { min-height: 180px; }
    .items-foot { gap: 8px; }
    .items-total { padding: 10px 12px; }
    .items-total .num { font-size: 18px; }
    /* 底部两个按钮平分整行，比靠右挤在一起好点 */
    .order-submit-bar { justify-content: stretch; gap: 8px; }
    .order-submit-bar .layui-btn { flex: 1 1 0; margin: 0; }

    /* ================================================================
       4. 快速开单页（.quick-page）：左右分栏 → 上下排列
       ================================================================ */
    .page-wrap.quick-page { height: auto; min-height: 100%; padding: 8px; }
    .quick-page > .qo-card { overflow: visible; }
    .qo-wrap { flex-direction: column; height: auto; }
    .qo-left {
        flex: none;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .qo-btns {
        flex: none;
        max-height: 46vh;
        padding: 10px;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }
    .qo-btn { min-height: 84px; padding: 10px 12px; min-width: 148px; }
    .qo-btn-main { font-size: 15px; }
    .qo-right { flex: none; width: 100%; }
    .qo-cust { padding: 10px 12px 8px; }
    .qo-list-scroll { flex: none; max-height: none; overflow-x: auto; }
    .qo-table { min-width: 640px; }       /* 列多，窄屏靠横滑看全 */
    .qo-foot { padding: 10px 12px; flex-wrap: wrap; }
    .qo-foot .layui-btn { margin: 0 0 0 8px; }

    /* ================================================================
       5. 触摸友好
       ----------------------------------------------------------------
       iOS Safari 对 font-size < 16px 的输入框会在聚焦瞬间把整页放大，
       而本次改的就是「手机上能正常用」，所以这里统一提到 16px。
       ================================================================ */
    .layui-input,
    .layui-textarea,
    select.layui-input,
    .qo-in { font-size: 16px; }

    /* 明细表单元格跟着抬高，不然 16px 字会贴着边框 */
    table.items-table input.cell { font-size: 16px; height: 42px; }
    .qo-in { height: 38px; line-height: 38px; }
}