@charset "UTF-8";
/* ==========================================================================
   门窗订单管理系统 · 公共样式表（app.css）
   设计令牌：蓝图蓝（工程图纸） + 安全橙（车间工序） + 石墨灰（铝型材）
   适配：桌面端侧边栏常驻；≤980px 侧边栏改为抽屉；表格在小屏自动转为卡片
   ========================================================================== */

/* ---------------------------------------------------------------- 设计令牌 */
:root {
    --ink: #202d36;      --ink-2: #3c4c58;   --mut: #6d7d88;    --mut-2: #93a1aa;
    --line: #e3e8eb;     --line-2: #eef2f4;
    --bg: #f1f4f5;       --paper: #fff;      --paper-2: #f8fafb;
    --pri: #14688f;      --pri-d: #0d4f6e;   --pri-bg: #e7f1f6;
    --acc: #e8833a;      --acc-d: #c96a22;   --acc-bg: #fdf0e5;
    --ok: #2e8b6d;       --ok-bg: #e4f3ee;
    --warn: #c9881c;     --warn-bg: #fbf2dd;
    --danger: #c2483b;   --danger-bg: #fbeae8;
    --info: #517a99;     --info-bg: #e9f1f6;
    --side: #1e2b34;     --side-2: #273844;  --side-line: #334654;
    --radius: 10px;      --radius-s: 7px;
    --shadow: 0 1px 2px rgba(22, 40, 52, .06), 0 4px 14px rgba(22, 40, 52, .06);
    --shadow-lg: 0 12px 40px rgba(18, 34, 44, .22);
    --font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    --side-w: 224px;
    --top-h: 58px;
}

/* ------------------------------------------------------------------ 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--pri); text-decoration: none; }
img, svg, iframe { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--ink); }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
::placeholder { color: #a7b4bc; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.muted { color: var(--mut); }
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.hidden { display: none !important; }

/* ============================================================ 应用骨架布局 */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

/* ---------------------------------------------------------------- 侧边导航 */
.sidebar {
    background: var(--side);
    color: #c3d0d9;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 60;
}
.side-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px 18px 15px;
    border-bottom: 1px solid var(--side-line);
}
.side-brand .logo {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--acc), var(--acc-d));
    color: #fff; border-radius: 9px;
    font-size: 18px; font-weight: 700; letter-spacing: 0;
    box-shadow: 0 3px 10px rgba(232, 131, 58, .3);
}
.side-brand .bn { min-width: 0; }
.side-brand b { display: block; color: #fff; font-size: 14.5px; line-height: 1.25; }
.side-brand small { display: block; font-size: 10.5px; color: #7e93a0; letter-spacing: 1.2px; margin-top: 1px; }

.side-menu { flex: 1; overflow-y: auto; padding: 10px; }
.side-group { font-size: 11px; color: #66798a; padding: 14px 10px 6px; letter-spacing: 1.5px; }
.side-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: var(--radius-s);
    color: #b6c5cf; font-size: 13.5px; font-weight: 500;
    position: relative;
    transition: background .13s, color .13s;
}
/* 菜单图标（IconPark，48x48 视框 / 线宽 4 / currentColor）：颜色与描边跟随菜单项文字色 */
.side-item .si, .side-foot .si {
    width: 18px; height: 18px; flex: none;
    color: #8ba0ae;
    transition: color .13s;
}
.side-item:hover { background: var(--side-2); color: #fff; }
.side-item:hover .si { color: #fff; }
.side-item.active { background: var(--side-2); color: #fff; font-weight: 600; }
.side-item.active .si { color: var(--acc); }
.side-item.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--acc);
}
.side-foot { padding: 12px 16px; border-top: 1px solid var(--side-line); }
.side-foot .who { font-size: 11.5px; color: #748896; margin-bottom: 8px; }
.side-foot a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px; border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-s);
    color: #c3d0d9; font-size: 13px;
    transition: background .13s, color .13s, border-color .13s;
}
.side-foot a:hover { background: rgba(232, 131, 58, .14); border-color: var(--acc); color: #fff; }
.side-foot a:hover .si { color: var(--acc); }

/* ------------------------------------------------------------ 主区 / 顶栏 */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: var(--top-h);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 0 22px;
    position: sticky; top: 0; z-index: 40;
}
.topbar .tb-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb { font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb b { color: var(--ink-2); font-weight: 600; }
.top-user { display: flex; align-items: center; gap: 10px; flex: none; }
.top-user .uinfo { text-align: right; line-height: 1.25; }
.top-user .uname { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.top-user .uinfo small, .top-user .urole { display: block; font-size: 11.5px; color: var(--mut); }
.avatar {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pri-bg); color: var(--pri-d);
    font-weight: 700; font-size: 14.5px;
}
.avatar.r-admin { background: var(--pri-bg); color: var(--pri-d); }
.avatar.r-employee { background: var(--acc-bg); color: var(--acc-d); }
.avatar.r-customer { background: var(--ok-bg); color: var(--ok); }

.nav-toggle {
    display: none;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--line); background: var(--paper);
    border-radius: var(--radius-s);
    color: var(--pri-d); font-size: 17px; line-height: 1;
    align-items: center; justify-content: center;
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(19, 32, 41, .48);
    z-index: 55; opacity: 0; transition: opacity .2s;
}
.nav-backdrop.show { display: block; opacity: 1; }

.content { padding: 20px 22px 40px; flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ 面板卡片 */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-hd {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.card-hd h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-hd h3::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--acc); }
.card-hd .hd-note { font-size: 12px; color: var(--mut); font-weight: 400; }
.card-hd .hd-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-bd { padding: 16px 18px; }
.card-bd.flush { padding: 0; }

/* 兼容旧标记：.panel 等价于 .card */
.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}
.panel + .panel, .card + .panel, .panel + .card { margin-top: 16px; }
.panel h3 {
    font-size: 15px; font-weight: 700; color: var(--ink);
    padding-bottom: 11px; border-bottom: 1px solid var(--line-2); margin-bottom: 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.panels { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; }
.panels > * { min-width: 0; }

/* ------------------------------------------------------------------ 统计卡片 */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--pri);
    border-radius: var(--radius);
    padding: 15px 17px;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
.stat .s-lbl { font-size: 12.5px; color: var(--mut); padding-right: 40px; }
.stat .s-val {
    font-size: 26px; font-weight: 700; margin-top: 5px;
    font-family: var(--mono); letter-spacing: -.5px; line-height: 1.2;
}
.stat .s-val small { font-size: 12.5px; color: var(--mut); font-weight: 400; margin-left: 3px; }
.stat .s-ico {
    position: absolute; right: 13px; top: 13px;
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    background: var(--pri-bg); color: var(--pri-d);
}
.stat.s-acc { border-top-color: var(--acc); } .stat.s-acc .s-ico { background: var(--acc-bg); color: var(--acc-d); }
.stat.s-ok  { border-top-color: var(--ok); }  .stat.s-ok  .s-ico { background: var(--ok-bg);  color: var(--ok); }
.stat.s-warn{ border-top-color: var(--warn); }.stat.s-warn .s-ico { background: var(--warn-bg); color: var(--warn); }
.stat.s-info{ border-top-color: var(--info); }.stat.s-info .s-ico { background: var(--info-bg); color: var(--info); }
.stat.s-danger { border-top-color: var(--danger); } .stat.s-danger .s-ico { background: var(--danger-bg); color: var(--danger); }

/* 可点击的统计卡：整块作为跳转入口（工作台快捷方式） */
.stat-link { display: block; color: inherit; border-radius: var(--radius); }
.stat-link .stat { transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.stat-link:hover .stat {
    border-color: var(--pri);
    box-shadow: 0 6px 18px rgba(20, 70, 95, .14);
    transform: translateY(-2px);
}
.stat-link:active .stat { transform: translateY(0); }
.stat-link:hover .s-lbl { color: var(--pri-d); }
.stat-link .s-arrow {
    position: absolute; right: 15px; bottom: 12px;
    font-size: 12.5px; font-weight: 700; color: var(--pri);
    opacity: 0; transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}
.stat-link:hover .s-arrow { opacity: 1; transform: translateX(0); }
.stat-link:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* -------------------------------------------------------------- 欢迎横幅 */
.welcome {
    background: linear-gradient(120deg, #1e2b34 0%, #1d5b7c 100%);
    border-radius: var(--radius);
    padding: 20px 24px;
    color: #fff;
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    margin-bottom: 18px;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
.welcome::after {
    content: ""; position: absolute; right: -110px; top: -110px;
    width: 300px; height: 300px; border-radius: 50%;
    border: 1px solid rgba(232, 131, 58, .3);
    box-shadow: 0 0 0 34px rgba(232, 131, 58, .06), 0 0 0 74px rgba(232, 131, 58, .035);
}
.welcome > div { position: relative; z-index: 1; }
.welcome h2 { font-size: 19px; margin-bottom: 7px; font-weight: 700; }
.welcome h2 em { font-style: normal; color: #ffc38a; }
.welcome p { font-size: 13px; color: #bcd3e0; max-width: 720px; }
.welcome .date { font-size: 12.5px; color: #a9c4d3; text-align: right; line-height: 1.7; white-space: nowrap; }

/* ------------------------------------------------------------------ 徽标/标签 */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 20px;
    font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap;
    background: var(--line-2); color: var(--ink-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.dotless::before { display: none; }
.badge.b0 { background: var(--acc-bg); color: var(--acc-d); }
.badge.b1 { background: var(--pri-bg); color: var(--pri-d); }
.badge.b2 { background: #e0f2f3; color: #0b7377; }
.badge.b3 { background: var(--warn-bg); color: #9a6810; }
.badge.b4 { background: var(--acc-bg); color: var(--acc-d); }
.badge.b5 { background: var(--info-bg); color: #3c5f7c; }
.badge.b6 { background: var(--ok-bg); color: var(--ok); }
.badge.b7 { background: var(--danger-bg); color: var(--danger); }
.badge.b9 { background: #eef1f3; color: #77848d; }
/* 10=待确认：尚未开工，用中性偏紫与「制图中」的蓝图蓝区分 */
.badge.b10 { background: #efedf7; color: #655a96; }
.badge.on  { background: var(--ok-bg); color: var(--ok); }
.badge.off { background: #eef1f3; color: #77848d; }

.tag {
    display: inline-block; padding: 2px 9px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600;
    background: var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.tag.role-admin, .tag.rt-admin { background: var(--pri-bg); color: var(--pri-d); }
.tag.role-employee, .tag.rt-employee { background: var(--acc-bg); color: var(--acc-d); }
.tag.role-customer, .tag.rt-customer { background: var(--ok-bg); color: var(--ok); }
.tag.cat-DRAWING { background: var(--pri-bg); color: var(--pri-d); }
.tag.cat-QUOTATION { background: var(--ok-bg); color: var(--ok); }
.tag.cat-PREP_SHEET { background: #e0f2f3; color: #0b7377; }
.tag.cat-CONTRACT { background: var(--acc-bg); color: var(--acc-d); }
.tag.cat-PHOTO { background: var(--info-bg); color: var(--info); }
.tag.cat-SALES { background: #efedf7; color: #655a96; }
.tag.cat-OTHER { background: var(--line-2); color: var(--ink-2); }
.tag.ft-pdf { background: #fbeae8; color: #b3352a; }
.tag.ft-excel { background: #e4f3ee; color: #1e7a58; }
.tag.ft-word { background: #e7eff8; color: #2b5f9e; }
.tag.ft-image { background: #efeaf7; color: #6a4f9e; }
.tag.ft-other { background: var(--line-2); color: var(--ink-2); }

/* 角色标签的旧类名别名（历史标记兼容） */
.tag.rt-admin { background: var(--pri-bg); color: var(--pri-d); }
.tag.rt-employee { background: var(--acc-bg); color: var(--acc-d); }
.tag.rt-customer { background: var(--ok-bg); color: var(--ok); }

/* ------------------------------------------------------------------ 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 15px; min-height: 36px;
    border: 1px solid transparent; border-radius: var(--radius-s);
    font-size: 13.5px; font-weight: 600; white-space: nowrap; line-height: 1.4;
    background: var(--line-2); color: var(--ink-2);
    transition: background .14s, color .14s, border-color .14s, filter .14s, box-shadow .14s;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pri); color: #fff; }
.btn-primary:hover { background: var(--pri-d); filter: none; }
.btn-accent { background: var(--acc); color: #fff; }
.btn-accent:hover { background: var(--acc-d); filter: none; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: #f2cfca; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); filter: none; }
.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--pri); color: var(--pri); background: var(--paper); }
.btn-sm { min-height: 30px; padding: 5px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* 行内文字操作（表格操作列） */
.op { white-space: nowrap; text-align: right; }
.op a, .op button, .link-btn {
    display: inline-block;
    font-size: 12.5px; font-weight: 600;
    color: var(--pri); background: none; border: none;
    padding: 4px 6px; border-radius: 5px;
    transition: background .12s, color .12s;
}
.op a:hover, .op button:hover, .link-btn:hover { background: var(--pri-bg); }
.op a.danger, .op button.danger, .link-btn.danger { color: var(--danger); }
.op a.danger:hover, .op button.danger:hover { background: var(--danger-bg); }
.op a.warn, .op button.warn, .link-btn.warn { color: var(--acc-d); }
.op a.warn:hover, .op button.warn:hover { background: var(--acc-bg); }

/* ------------------------------------------------------------------ 工具条 */
.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar > .tb-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.search-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-form input[type=text], .search-form input[type=search], .search-form input:not([type]), .search-form select {
    height: 36px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--paper); outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.search-form input:focus, .search-form select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(20, 104, 143, .1); }
.search-form input[type=text], .search-form input:not([type]) { min-width: 210px; }

/* ------------------------------------------------------------------ 表单 */
.field, .f-item { margin-bottom: 13px; min-width: 0; }
.field label, .f-item label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--ink-2); margin-bottom: 5px;
}
.field label .req, .f-item label .req { color: var(--danger); margin-right: 2px; }
.field input, .field select, .field textarea,
.f-item input, .f-item select, .f-item textarea {
    width: 100%; min-height: 38px; padding: 8px 11px;
    border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--paper); outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.field textarea, .f-item textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus,
.f-item input:focus, .f-item select:focus, .f-item textarea:focus {
    border-color: var(--pri); box-shadow: 0 0 0 3px rgba(20, 104, 143, .12);
}
.field input[disabled], .field input:disabled,
.f-item input[disabled], .f-item input:disabled { background: var(--paper-2); color: var(--mut); cursor: not-allowed; }
.field .help, .f-item .help { font-size: 11.5px; color: var(--mut); margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.form-grid .full, .form-grid .f-item.full { grid-column: 1 / -1; }
.form-grid .f-item, .form-grid .field { margin-bottom: 12px; }
.form-section {
    font-size: 13px; font-weight: 700; color: var(--pri-d);
    margin: 20px 0 11px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.form-section:first-child { margin-top: 0; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ------------------------------------------------------------ 表格（数据表） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { font-size: 13px; min-width: 640px; }
table.data th {
    background: var(--paper-2); color: var(--mut);
    font-weight: 600; text-align: left; font-size: 12.5px;
    padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--paper-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* 每行面积：与相邻数字列区分，便于逐行核对与合计 */
table.data .area-cell { color: var(--pri-d); font-weight: 600; white-space: nowrap; }
table.data .op a + a, table.data .op button + button, table.data .op a + form, table.data .op form + a { margin-left: 2px; }
table.data .empty-row td { text-align: center; color: var(--mut); padding: 44px 12px; }
.ono { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--pri-d); }
tr.total-row td { background: var(--pri-bg); font-weight: 700; color: var(--pri-d); }
/* 合计区两行：上「订单总额」、下「明细 + 总面积」，均靠最右侧；
   两行背景连成一块，中间加一条淡分隔线 */
tr.total-row td { border-bottom: none; }
tr.total-row-amount td { padding-bottom: 5px; }
tr.total-row-detail td { padding-top: 5px; box-shadow: inset 0 1px 0 rgba(20, 104, 143, .12); }
/* 合计行里的多组汇总（明细项数 / 总面积 / 订单总额） */
.total-row .tot-group { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 22px; }
.total-row .tot-group.is-first { margin-left: 0; }
.total-row .tot-k { font-weight: 400; font-size: 12.5px; color: var(--mut); }
.total-row .tot-v { font-family: var(--mono); font-weight: 700; color: var(--pri-d); }
.total-row .tot-v-strong { font-size: 17px; color: var(--acc-d); letter-spacing: -.3px; }
.total-row .tot-u { font-size: 12px; color: var(--mut); }
/* 窄屏下合计行改为自动换行；卡片化后「订单总额」已在左侧分组里显示，
   右侧与「小计」列对齐的重复数字隐藏掉，避免多出一行冗余 */
@media (max-width: 720px) {
    .table-wrap.stack table.data tr.total-row td { flex-wrap: wrap; }
    .total-row .tot-group { margin-left: 0; margin-right: 14px; }
    .table-wrap.stack table.data tr.total-row td.tot-dup { display: none; }
    /* 卡片化后两行合计并成一块，去掉分隔线与多余内边距 */
    tr.total-row-amount td { padding-bottom: 2px; }
    tr.total-row-detail td { padding-top: 2px; box-shadow: none; }
    tr.total-row-amount td:last-child { display: none; }
}
.tax-total { color: var(--acc-d); font-size: 15px; font-weight: 700; font-family: var(--mono); }

/* 订单列表：总面积列（含「N 项 / M 件」小字说明） */
.order-area { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-area .oa-meta {
    display: block; margin-top: 1px;
    font-size: 11px; font-weight: 400; color: var(--mut);
}
/* 合计行左侧文字与计数 */
.total-row .tr-label { text-align: right; }
.total-row .tr-cnt { font-weight: 400; font-size: 12px; color: var(--mut); margin-left: 6px; }
/* 卡片化（窄屏）下合计行的空单元格不占位，避免多出空白卡片行 */
@media (max-width: 720px) {
    .table-wrap.stack table.data tr.total-row td:empty { display: none; }
}

/* 空状态 */
.empty { text-align: center; padding: 40px 20px; color: var(--mut); font-size: 13px; line-height: 1.9; }
.empty .em-ico { font-size: 30px; color: #c8d4da; display: block; margin-bottom: 8px; }

/* ---------------------------------------------------------------- 提示条 */
.alert, .banner {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: var(--radius-s); padding: 11px 14px;
    font-size: 13px; line-height: 1.7; margin-bottom: 15px;
    border: 1px solid transparent;
}
.alert-ok, .banner.ok { background: var(--ok-bg); color: #206e55; border-color: #c5e5d9; }
.alert-err, .banner.danger { background: var(--danger-bg); color: #a03a2f; border-color: #f2cfca; }
.banner.info { background: var(--info-bg); color: #36566e; border-color: #d3e2ec; }
.banner.warn { background: var(--warn-bg); color: #8a6210; border-color: #eddcb4; }

/* ------------------------------------------------------------------ 详情页 */
.detail-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.detail-head .dh-l { min-width: 0; }
.detail-head .dh-l h2 {
    font-size: 18px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.detail-head .dh-l h2 .mono, .detail-head .dh-l .no { font-family: var(--mono); color: var(--pri-d); }
.detail-head .dh-l p { color: var(--mut); font-size: 13px; margin-top: 6px; }
.detail-head .action-bar, .action-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.action-bar { margin-top: 4px; }

.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 20px; }
.info-grid .ig-item, .info-grid > div { min-width: 0; }
.info-grid .k, .info-grid .ig-l { font-size: 12px; color: var(--mut); margin-bottom: 3px; }
.info-grid .v, .info-grid .ig-v { font-size: 13.5px; font-weight: 500; color: var(--ink); word-break: break-word; }
.info-grid .full, .info-grid .ig-item.full { grid-column: 1 / -1; }

.section-title {
    font-size: 14px; font-weight: 700; color: var(--ink);
    margin: 22px 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.section-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--pri); }
.section-title .cnt { font-size: 12px; color: var(--mut); font-weight: 400; }

/* 工序流水条 */
.pipeline { display: flex; align-items: flex-start; overflow-x: auto; padding: 6px 0 4px; }
.pl-node { flex: 1; min-width: 96px; text-align: center; position: relative; padding: 0 4px; }
.pl-node .pl-dot {
    width: 32px; height: 32px; margin: 0 auto 7px; border-radius: 50%;
    background: var(--paper); border: 2px solid #cfd9de; color: #9aa8b1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; position: relative; z-index: 2;
    transition: all .2s;
}
.pl-node .pl-name { font-size: 12.5px; font-weight: 600; color: var(--mut); }
.pl-node .pl-time { font-size: 11px; color: var(--mut-2); margin-top: 2px; font-family: var(--mono); min-height: 15px; }
.pl-node::before { content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background: #d7dfe3; z-index: 1; }
.pl-node:last-child::before { display: none; }
.pl-node.done .pl-dot { background: var(--pri); border-color: var(--pri); color: #fff; }
.pl-node.done::before { background: var(--pri); }
.pl-node.cur .pl-dot { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 0 0 5px rgba(232, 131, 58, .18); }
.pl-node.cur .pl-name { color: var(--acc-d); }

/* 时间线 */
.timeline { list-style: none; position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 17px 10px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: ""; position: absolute; left: -18px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--pri); border: 2px solid var(--paper);
    box-shadow: 0 0 0 2px var(--pri);
}
.timeline .tl-head { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.timeline .tl-meta { font-size: 12px; color: var(--mut); margin: 3px 0 0; font-family: var(--mono); }
.timeline .tl-remark { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* 流转记录里的「是否通知」标记 */
.timeline .tl-notify { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.timeline .tn-badge {
    display: inline-block; padding: 1px 7px; border-radius: 9px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6;
}
.timeline .tn-badge.on { background: var(--ok-bg); color: var(--ok); }
.timeline .tn-badge.off { background: var(--line-2); color: var(--mut); }

/* 流转按钮里的「下一步工序」：稍作强调，一眼看清会流转到哪 */
.action-bar .next-step { font-weight: 700; }
.btn-ghost .next-step { color: var(--pri-d); }

/* 附件备注：列表里的展示与操作入口 */
.file-remark { max-width: 260px; }
.file-remark .fr-empty { color: var(--mut-2); }
.file-remark .fr-text { color: var(--ink); font-size: 12.5px; }
.file-remark .fr-meta {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--mut); font-family: var(--mono);
}
.op .fr-btn { color: var(--acc-d); font-weight: 600; }

/* 附件多选上传：已选文件即时反馈 */
.uz-files { margin-top: 8px; }
.uz-files:empty { display: none; }
.uz-files .uzf-head { font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.uz-files .uzf-warn { color: var(--danger); }
.uz-files .uzf-list { display: flex; flex-wrap: wrap; gap: 6px; }
.uz-files .uzf {
    display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; padding: 3px 9px; border-radius: 20px;
    background: var(--pri-bg); color: var(--pri-d);
    font-size: 12px; font-family: var(--mono);
}

/* 通知流转弹窗：人员多选列表 */
.notify-list {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.notify-item {
    display: grid; grid-template-columns: 20px minmax(0, auto) minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center; gap: 10px;
    padding: 9px 12px; border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.notify-item:last-child { border-bottom: none; }
.notify-item:hover { background: var(--paper-2); }
.notify-item input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.notify-item .ni-name { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.notify-item .ni-meta { font-size: 12px; color: var(--mut); }
.notify-item .ni-mail { font-size: 12px; color: var(--mut); font-family: var(--mono); text-align: right; word-break: break-all; }
.notify-item.disabled { opacity: .55; cursor: not-allowed; }
.notify-item.disabled:hover { background: transparent; }
@media (max-width: 720px) {
    .notify-item { grid-template-columns: 20px minmax(0, 1fr); row-gap: 2px; }
    .notify-item .ni-mail, .notify-item .ni-meta { grid-column: 2; text-align: left; }
}

/* 附件分类标签（兼容旧类名） */
.file-cat {
    display: inline-block; padding: 2px 9px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600;
    background: var(--pri-bg); color: var(--pri-d);
}
.upload-zone {
    border: 1.5px dashed #c3d0d7; border-radius: var(--radius);
    padding: 16px; background: var(--paper-2); margin-bottom: 14px;
}
.upload-zone .uz-hint { font-size: 12px; color: var(--mut); }
.upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-row input[type=file] { flex: 1 1 220px; min-width: 0; font-size: 12.5px; }
.upload-row select { min-height: 36px; }

/* ------------------------------------------------------------------ 弹窗 */
.modal-mask {
    display: none; position: fixed; inset: 0;
    background: rgba(19, 32, 41, .48);
    z-index: 100;
    align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.modal-mask.show { display: flex; }
.modal {
    background: var(--paper); border-radius: var(--radius);
    width: 580px; max-width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modal-pop .18s ease-out;
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column;
}
.modal.wide { width: 940px; }
.modal.narrow { width: 440px; }
@keyframes modal-pop { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head, .modal-hd {
    padding: 14px 20px; border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 15.5px; font-weight: 700; color: var(--ink); flex: none;
}
.modal-body, .modal-bd { padding: 17px 20px; overflow-y: auto; flex: 1; }
.modal-foot, .modal-ft {
    padding: 13px 20px; border-top: 1px solid var(--line-2);
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    background: var(--paper-2); border-radius: 0 0 var(--radius) var(--radius); flex: none;
}
.modal-x, .modal-head .x {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 6px;
    color: var(--mut); font-size: 20px; line-height: 1;
}
.modal-x:hover, .modal-head .x:hover { background: var(--line-2); color: var(--ink); }

/* 附件预览弹窗（PDF 由 pdf.js 渲染到 canvas，支持翻页/缩放） */
.preview-modal { width: 940px; max-width: 100%; height: calc(100vh - 80px); }
.preview-modal .modal-head { flex: none; }
/* PDF 需在弹窗内滚动查看，覆盖 .modal-body 的默认内边距与滚动方式 */
.preview-modal .modal-body.pv-body {
    padding: 0; overflow: hidden; flex: 1;
    display: flex; flex-direction: column; min-height: 0;
}
.pv-toolbar {
    flex: none;
    display: flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-2);
    background: var(--paper-2);
}
.pv-toolbar > * { flex: none; }   /* 不用换行：窄屏改为横向滚动，保持单行紧凑 */
.pv-toolbar .pv-page { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mut); }
.pv-toolbar .pv-page input {
    width: 52px; height: 30px; padding: 0 6px; text-align: center;
    border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
    font-family: var(--mono); font-size: 12.5px;
}
.pv-toolbar .pv-total b { font-family: var(--mono); color: var(--ink-2); }
.pv-toolbar .pv-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; flex: none; }
/* 缩放比例标签同时充当「恢复适应宽度」按钮（窄屏隐藏单独的适应宽度按钮） */
.pv-toolbar .pv-zoom {
    min-width: 62px; padding: 3px 6px;
    font-size: 12.5px; color: var(--ink-2); font-family: var(--mono);
    text-align: center;
    background: none; border: 1px solid transparent; border-radius: var(--radius-s);
}
.pv-toolbar .pv-zoom:hover { background: var(--paper); border-color: var(--line); color: var(--pri); }
.pv-stage {
    flex: 1; min-height: 0;
    overflow: auto; background: var(--bg); padding: 12px;
    display: flex; align-items: flex-start; justify-content: center;
    -webkit-overflow-scrolling: touch;
}
.pv-canvas {
    display: block; background: #fff;
    box-shadow: 0 2px 10px rgba(22, 40, 52, .18);
    border-radius: 2px;
}
.pv-loading { margin: auto; padding: 40px 20px; color: var(--mut); font-size: 13.5px; }
.preview-imgbox {
    flex: 1; text-align: center; padding: 14px;
    overflow: auto; background: var(--bg);
}
.preview-imgbox img { max-width: 100%; border-radius: 6px; }
.preview-unsupported { margin: auto; padding: 40px 20px; text-align: center; color: var(--ink-2); line-height: 1.9; }
.preview-unsupported p { margin-bottom: 10px; }

/* --------------------------------------------------------- 明细编辑器表格 */
table.editor { min-width: 1040px; }
table.editor th, table.editor td { white-space: nowrap; }
table.editor td { padding: 6px 5px; }
table.editor input, table.editor select {
    width: 100%; min-width: 74px; height: 34px; padding: 0 8px;
    font-size: 12.5px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--paper);
}
table.editor input:focus, table.editor select:focus { border-color: var(--pri); outline: none; box-shadow: 0 0 0 2px rgba(20, 104, 143, .12); }
/* 控件默认宽度会参与表格 min-content 计算：input 默认 size=20（约 153px）、select 随最长选项。
   新增颜色列后共 15 列，这里显式指定较紧凑的宽度，把表格最小宽度从约 1600px 压到约 1410px。
   即便如此，窗口窄于约 1700px 时编辑器卡片内部仍会横向滚动（页面本身不滚动，
   卡片上方已有"小屏可左右滑动查看完整表格"的提示）——这是 15 列含输入控件的固有代价。 */
table.editor input.w-name, table.editor select.w-type, table.editor select.w-pricing { width: 112px; min-width: 112px; }
table.editor input[type="number"] { width: 74px; min-width: 74px; }
table.editor select { max-width: 132px; }
/* 备注是唯一没有显式宽度的控件，此前依赖 input 的 size=20 默认宽度（约 153px）：
   宽度由浏览器默认值推导，容易随字体/浏览器变化，也会影响列的 min-content。
   给定与其它窄控件一致的固定宽度，既保证对齐可预测，也不额外撑宽表格。 */
table.editor input[name="remark"] { width: 74px; min-width: 74px; }
/* 兜底：表格单元格统一垂直居中，避免个别控件（如带边框的输入框、按钮）
   因基线/行盒差异把整格内容推上或推下。 */
table.editor td { vertical-align: middle; }
table.editor input, table.editor select { vertical-align: middle; }

/* 单价单元格：输入框与计价口径（元/个、元/㎡、元/kg）同一行对齐，
   避免 .unit-label 作为块级元素参与行盒、把输入框顶上去而与整行错位 */
table.editor .price-cell { min-width: 124px; }
table.editor .price-wrap { display: flex; align-items: center; gap: 6px; }
table.editor .price-wrap input { flex: 1 1 auto; min-width: 58px; }
table.editor .price-wrap .unit-label {
    display: inline-block; flex: none; margin: 0;
    font-size: 11.5px; color: var(--mut); white-space: nowrap;
}
/* 面积列：只读、数值窄，给最小宽度即可（新增该列后需为其余列省出空间） */
table.editor .area-cell { min-width: 62px; }
/* 颜色为必填下拉，列宽尽量小以容纳新增列 */
table.editor select.w-color { min-width: 88px; }
table.editor .amt-cell { min-width: 84px; white-space: nowrap; }

table.editor .amt-cell { font-family: var(--mono); font-weight: 600; color: var(--pri-d); }
table.editor .row-del {
    color: var(--danger); background: none; border: none;
    font-size: 12.5px; font-weight: 600; padding: 4px 7px; border-radius: 5px;
}
table.editor .row-del:hover { background: var(--danger-bg); }
.editor-foot {
    margin-top: 13px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.editor-foot .ef-total { font-size: 14px; }
.editor-foot .ef-total b { font-family: var(--mono); font-size: 19px; color: var(--acc-d); margin: 0 3px; }
.editor-foot .ef-total #totalArea { color: var(--pri-d); }
.editor-foot .ef-sep { display: inline-block; width: 1px; height: 14px; background: var(--line); margin: 0 12px; vertical-align: middle; }
.unit-label { display: block; font-size: 11px; color: var(--mut); margin-top: 2px; }

/* ------------------------------------------------------ 工作台：订单分布饼图 */
/* 图例整块限宽并留白居中：避免大屏下单列被拉得过长，条目之间显得松散 */
.donut-wrap {
    display: grid; grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px; align-items: center;
}
.donut-legend { width: 100%; max-width: 560px; margin: 0 auto; }
.donut-figure { position: relative; width: 100%; max-width: 236px; margin: 0 auto; }
.donut-figure svg { display: block; width: 100%; height: auto; }
.donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
}
.donut-center b {
    font-family: var(--mono); font-size: 25px; font-weight: 700;
    color: var(--ink); line-height: 1.1; letter-spacing: -.5px;
}
.donut-center small { font-size: 11.5px; color: var(--mut); margin-top: 3px; }
/* 图例：名称 | 占比条 | 数量 三列网格，整体紧凑通透 */
.donut-legend { display: grid; grid-template-columns: 1fr; gap: 3px 0; }
.donut-legend .dl-item {
    display: grid; grid-template-columns: 10px minmax(68px, auto) minmax(0, 1fr) auto auto;
    align-items: center; gap: 10px;
    font-size: 12.5px; padding: 5px 0;
    border-bottom: 1px dashed var(--line-2);
}
.donut-legend .dl-item:last-child { border-bottom: none; }
.donut-legend .dl-dot { width: 9px; height: 9px; border-radius: 3px; }
.donut-legend .dl-name { color: var(--ink-2); white-space: nowrap; }
/* 占比条：让图例与圆环的对应关系一眼可见，也填补大屏横向空白 */
.donut-legend .dl-meter { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.donut-legend .dl-meter i { display: block; height: 100%; border-radius: 3px; min-width: 3px; }
.donut-legend .dl-num { font-family: var(--mono); font-weight: 700; color: var(--ink); text-align: right; min-width: 22px; }
.donut-legend .dl-pct { font-family: var(--mono); font-size: 11.5px; color: var(--mut); text-align: right; min-width: 46px; }

/* ---------------------------------------------------------- 工作台：倒计时 */
.cd-row { margin-bottom: 15px; }
.cd-row:last-child { margin-bottom: 2px; }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.cd-no { font-family: var(--mono); color: var(--pri-d); font-weight: 600; flex: none; }
.cd-title { color: var(--mut); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-days { font-weight: 700; white-space: nowrap; flex: none; }
.cd-bar { height: 10px; background: #e6ebef; border-radius: 5px; overflow: hidden; }
/* min-width 保证「刚下单（已用 0 天）」也有可见色块，否则 0% 宽度会让进度条看着像坏了 */
.cd-fill { height: 100%; min-width: 4px; border-radius: 5px; transition: width .3s; }
.cd-light { background: #8fd07a; } .cd-green { background: var(--ok); }
.cd-yellow { background: var(--warn); } .cd-red { background: var(--danger); }
.cd-meta { font-size: 11.5px; color: var(--mut-2); margin-top: 5px; }
/* 倒计时整行可点击 → 进入订单详情；用 <a> 承载，需重置链接样式并给出悬停反馈 */
a.cd-link {
    display: block; color: inherit; text-decoration: none;
    padding: 8px 10px; margin-left: -10px; margin-right: -10px;
    border-radius: var(--radius-s); border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
}
a.cd-link:hover { background: var(--paper-2); border-left-color: var(--pri); }
a.cd-link:hover .cd-meta { color: var(--mut); }
a.cd-link:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.cd-go { color: var(--pri); font-weight: 600; opacity: 0; transition: opacity .15s; white-space: nowrap; }
a.cd-link:hover .cd-go, a.cd-link:focus-visible .cd-go { opacity: 1; }
/* 触屏设备没有 hover，直接常显入口提示 */
@media (hover: none) { .cd-go { opacity: 1; } }

/* ------------------------------------------------------ 工作台：分布条形图 */
.bar-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
.bar-row .br-lbl { color: var(--ink-2); white-space: nowrap; }
.bar-row .br-track { height: 16px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.bar-row .br-fill { display: block; height: 100%; border-radius: 4px; background: var(--pri); transition: width .5s; min-width: 2px; }
.bar-row .br-fill.f2 { background: #0e8a8d; } .bar-row .br-fill.f3 { background: var(--warn); }
.bar-row .br-fill.f4 { background: var(--acc); } .bar-row .br-fill.f5 { background: var(--info); }
.bar-row .br-fill.f6 { background: var(--ok); } .bar-row .br-fill.f7 { background: var(--danger); }
.bar-row .br-num { text-align: right; font-family: var(--mono); font-weight: 600; color: var(--ink-2); }
.stage-foot {
    margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line);
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--mut); flex-wrap: wrap;
}
.stage-foot b { color: var(--acc-d); font-family: var(--mono); }

/* 小贴士卡片 */
.tip {
    background: var(--paper-2);
    border: 1px dashed #c3d7e2;
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 12.5px; color: var(--ink-2); line-height: 1.95;
}
.tip .tt { color: var(--pri-d); font-weight: 700; margin-bottom: 5px; font-size: 13px; }
.tip .btn-line {
    display: inline-block; margin-top: 9px;
    padding: 6px 15px; border-radius: var(--radius-s);
    background: var(--pri); color: #fff !important;
    font-size: 12.5px; font-weight: 600;
}
.tip .btn-line:hover { background: var(--pri-d); }
.panel.tip { padding: 14px 16px; }

/* 图表/布局辅助 */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mb-16 { margin-bottom: 16px; } .mt-16 { margin-top: 16px; }
.flex-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.strength { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin-top: 6px; }
.strength i { display: block; height: 100%; background: var(--ok); transition: width .2s; }

/* ------------------------------------------------------------------ Toast */
#toast {
    position: fixed; top: 18px; left: 50%;
    transform: translateX(-50%) translateY(-14px);
    background: #2b3a44; color: #fff;
    padding: 10px 20px; border-radius: 8px;
    font-size: 13.5px; box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
    z-index: 300; max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================================================================ 认证页面 */
.auth-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--paper);
}
.auth-body.single { grid-template-columns: 1fr; }
.auth-art {
    position: relative; overflow: hidden;
    background: var(--side); color: #dce6ec;
    padding: 48px 52px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-art::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(120, 170, 196, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 196, .10) 1px, transparent 1px);
    background-size: 28px 28px;
}
.auth-art::after {
    content: ""; position: absolute; right: -150px; top: -150px;
    width: 460px; height: 460px; border-radius: 50%;
    border: 1px solid rgba(232, 131, 58, .28);
    box-shadow: 0 0 0 38px rgba(232, 131, 58, .05), 0 0 0 86px rgba(232, 131, 58, .03);
}
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.auth-brand .logo {
    width: 38px; height: 38px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--acc), var(--acc-d));
    color: #fff; border-radius: 10px; font-size: 20px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(232, 131, 58, .34);
}
.auth-brand b { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.auth-hero { position: relative; z-index: 1; margin: 30px 0; }
.auth-hero h1 { font-size: 34px; line-height: 1.32; font-weight: 700; color: #fff; margin-bottom: 14px; }
.auth-hero h1 em { font-style: normal; color: var(--acc); }
.auth-hero p { font-size: 14.5px; color: #aebfca; max-width: 430px; line-height: 1.8; }
.auth-feats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.auth-feats span {
    font-size: 12px; color: #c6d4dd;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px; padding: 4px 12px;
}
.auth-foot { position: relative; z-index: 1; margin-top: 26px; font-size: 12.5px; color: #8297a3; }
.auth-foot b { color: #c6d4dd; font-weight: 600; }

/* 右侧面板：上→下三色撞色渐变
   上 #e596bc（229,150,188） · 中 #afc9de（175,201,222） · 下 #f9f6e5（249,246,229）
   中点保持在 50%，使三种颜色各占约 1/3 高度 */
.auth-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
    background: var(--bg);
    background-image: linear-gradient(180deg, #e596bc 0%, #afc9de 50%, #f9f6e5 100%);
    overflow-y: auto;
}
.auth-card {
    width: 100%; max-width: 408px;
    background: var(--paper);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 14px;
    /* 撞色渐变背景较浅，用彩色柔和投影把白色卡片“托”起来，保证层次 */
    box-shadow: 0 4px 10px rgba(32, 45, 54, .08), 0 18px 44px rgba(32, 45, 54, .16);
    padding: 32px 32px 26px;
}
.auth-card.wide { max-width: 520px; }
.auth-card .ac-head { margin-bottom: 22px; }
.auth-card .ac-head h2 { font-size: 21px; font-weight: 700; color: var(--ink); }
.auth-card .ac-head p { font-size: 13px; color: var(--mut); margin-top: 5px; }
.auth-card .ac-foot {
    margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-2);
    text-align: center; font-size: 13px; color: var(--mut);
}
.auth-card .ac-foot a { font-weight: 600; }
.auth-card .ac-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--mut); }
.auth-card .ac-links .sep { color: var(--line); }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-mobile-brand .logo {
    width: 36px; height: 36px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--acc), var(--acc-d));
    color: #fff; border-radius: 9px; font-size: 19px; font-weight: 700;
}
.auth-mobile-brand b { font-size: 15.5px; color: var(--ink); }

.code-row { display: flex; gap: 9px; align-items: stretch; }
.code-row input { flex: 1; min-width: 0; }
.btn-code {
    flex: none; min-width: 118px; padding: 0 13px; min-height: 38px;
    border: 1px solid var(--pri); border-radius: var(--radius-s);
    background: var(--pri-bg); color: var(--pri-d);
    font-size: 12.5px; font-weight: 600;
}
.btn-code:hover:not(:disabled) { background: var(--pri); color: #fff; }
.btn-code:disabled { opacity: .6; cursor: not-allowed; }

/* ================================================================ 错误页面 */
.err-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg); padding: 24px;
}
.err-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow);
    padding: 44px 52px; text-align: center; max-width: 440px;
}
.err-card .code { font-family: var(--mono); font-size: 52px; font-weight: 700; color: var(--danger); line-height: 1; }
.err-card .msg { color: var(--ink-2); margin: 14px 0 24px; font-size: 14px; line-height: 1.8; }

/* ==========================================================================
   响应式：≤ 980px 侧边栏抽屉化；≤ 720px 表格转卡片、栅格单列
   ========================================================================== */
@media (max-width: 1120px) {
    .panels { grid-template-columns: 1fr; }
    .welcome { flex-direction: column; align-items: flex-start; gap: 10px; }
    .welcome .date { text-align: left; }
    .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 264px; height: 100%;
        transform: translateX(-102%);
        transition: transform .26s ease;
        box-shadow: none;
        z-index: 60;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .38); }
    .nav-toggle { display: inline-flex; }
    .topbar { padding: 0 14px; }
    .content { padding: 16px 14px 34px; }
    .auth-body { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .auth-panel { align-items: flex-start; padding: 26px 16px 40px; }
    .auth-mobile-brand { display: flex; }
    .auth-card { max-width: 520px; }
}

@media (max-width: 720px) {
    body { font-size: 14px; }
    .top-user .uinfo { display: none; }
    .topbar h1 { font-size: 15.5px; }
    .content { padding: 14px 12px 30px; }
    .card-hd, .panel h3 { padding-left: 14px; padding-right: 14px; }
    .card-bd, .panel { padding: 14px; }
    .stat-row { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 11px; }
    .stat { padding: 13px 14px; }
    .stat .s-val { font-size: 22px; }
    .stat .s-ico { width: 30px; height: 30px; right: 11px; top: 11px; font-size: 13px; }
    .form-grid, .form-row2 { grid-template-columns: 1fr; gap: 0; }
    .info-grid { grid-template-columns: 1fr; gap: 11px; }
    .welcome { padding: 17px 18px; }
    .welcome h2 { font-size: 17px; }
    .search-form { width: 100%; }
    .search-form input[type=text], .search-form input:not([type]) { min-width: 0; flex: 1 1 130px; }
    .toolbar { align-items: stretch; }
    .toolbar > .tb-act { width: 100%; }
    .toolbar > .tb-act .btn { flex: 1 1 auto; }
    .modal-mask { padding: 16px 10px; align-items: flex-start; }
    .modal { max-height: calc(100vh - 32px); }
    .modal-head, .modal-body, .modal-foot { padding-left: 15px; padding-right: 15px; }
    .detail-head .action-bar .btn, .action-bar .btn { flex: 1 1 auto; }
    .editor-foot { flex-direction: column; align-items: stretch; }
    .editor-foot .ef-total { text-align: right; }
    .auth-card { padding: 24px 20px 22px; border-radius: 12px; }
    .auth-hero h1 { font-size: 27px; }
    .code-row { flex-wrap: wrap; }
    .btn-code { width: 100%; }
    .err-card { padding: 34px 24px; }
    .cd-top { flex-wrap: wrap; }
    .cd-title { flex: 1 1 100%; }
    #toast { top: auto; bottom: 22px; }

    /* 饼图：图表与图例改为上下堆叠 */
    .donut-wrap { grid-template-columns: 1fr; gap: 16px; }
    .donut-figure { max-width: 210px; }
    .donut-legend { grid-template-columns: 1fr; }

    /* PDF 预览：手机端隐藏次要按钮并把工具条压缩，避免占用过多高度 */
    .preview-modal { height: calc(100vh - 24px); }
    .pv-toolbar { gap: 6px; padding: 7px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pv-toolbar .btn-sm { min-height: 28px; padding: 4px 9px; font-size: 12px; }
    .pv-toolbar .pv-zoom { min-width: 44px; font-size: 12px; }
    .pv-toolbar .pv-zoom-reset, .pv-toolbar .pv-sep { display: none; }
    .pv-stage { padding: 8px; }

    /* ---------- 数据表在小屏转为卡片列表 ---------- */
    .table-wrap.stack { overflow-x: visible; }
    table.data.stackable, .table-wrap.stack table.data { min-width: 0; }
    table.data.stackable thead, .table-wrap.stack table.data thead { display: none; }
    table.data.stackable tbody, .table-wrap.stack table.data tbody { display: block; }
    table.data.stackable tr, .table-wrap.stack table.data tr {
        display: block;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        margin-bottom: 10px;
        padding: 4px 2px;
        box-shadow: 0 1px 2px rgba(22, 40, 52, .05);
    }
    table.data.stackable tr:hover, .table-wrap.stack table.data tr:hover { background: var(--paper); }
    table.data.stackable td, .table-wrap.stack table.data td {
        display: flex; align-items: center; justify-content: flex-end; gap: 12px;
        border: none; padding: 7px 12px;
        text-align: right;
        border-bottom: 1px dashed var(--line-2);
    }
    table.data.stackable td:last-child, .table-wrap.stack table.data td:last-child { border-bottom: none; }
    table.data.stackable td::before, .table-wrap.stack table.data td::before {
        content: attr(data-label);
        flex: none;
        margin-right: auto;
        font-size: 12px;
        color: var(--mut);
        font-weight: 600;
        text-align: left;
    }
    table.data.stackable td.num, .table-wrap.stack table.data td.num { text-align: right; }
    table.data.stackable td.op, .table-wrap.stack table.data td.op {
        justify-content: flex-end;
        flex-wrap: wrap;
        background: var(--paper-2);
        border-radius: 0 0 var(--radius-s) var(--radius-s);
    }
    table.data.stackable td.op::before, .table-wrap.stack table.data td.op::before { display: none; }
    table.data.stackable tr.empty-row, .table-wrap.stack table.data tr.empty-row { border: none; box-shadow: none; background: none; }
    table.data.stackable tr.empty-row td, .table-wrap.stack table.data tr.empty-row td { justify-content: center; }
    table.data.stackable tr.empty-row td::before, .table-wrap.stack table.data tr.empty-row td::before { display: none; }
    table.data.stackable tr.total-row td, .table-wrap.stack table.data tr.total-row td { text-align: right; }

    /* 明细编辑器保持横向滚动，不卡片化 */
    .table-wrap.nostack { overflow-x: auto; }
}

@media (max-width: 420px) {
    .stat-row { grid-template-columns: 1fr 1fr; }
    .topbar { padding: 0 10px; }
    .content { padding: 12px 10px 26px; }
}

/* ==========================================================================
   销货清单（局部打印）：只输出单据本身，A4 横版
   ========================================================================== */
/* 打印专用页面骨架：不引入侧栏/顶栏，屏幕上也居中显示纸张预览 */
.print-body { background: #eef1f3; margin: 0; padding: 0; }

/* 顶部操作条：仅屏幕可见 */
.print-bar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.print-bar .pb-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.print-bar .pb-tip { font-size: 12.5px; color: var(--mut); }
.print-bar .pb-tip b { color: var(--pri-d); }

.sheet-wrap { padding: 18px 16px 40px; overflow-x: auto; }
/* A4 横版可视宽度约 1122px（96dpi），留出页边距后的纸张宽度 */
/* ---------- 销货清单纸张与明细表 ----------
   适配思路：纸张宽度自适应容器，字号用 clamp() + vw 随视口**等比缩放**：
   宽屏封顶（不放大到夸张），窄屏按宽度线性缩小，最小 9px 保证仍可读。
   表格内部所有间距都用 em，跟着字号一起缩放，整张单据保持同一比例。 */
.sheet {
    width: 100%; max-width: 1040px; margin: 0 auto;
    background: #fff; color: #000;
    /* 13.5px @1040px → 9px @≈560px，中间按视口宽度线性过渡 */
    font-size: clamp(9px, 1.3vw, 13.5px);
    padding: 2em 2.2em 2.2em;
    box-shadow: 0 6px 24px rgba(22, 40, 52, .16);
    font-family: "SimSun", "Songti SC", "Microsoft YaHei", serif;
    min-height: 41em;
    display: flex; flex-direction: column;
}
.sheet .sheet-table { flex: none; }
.sheet .sheet-foot { margin-top: auto; }

/* 单据抬头（用 em 跟随 .sheet 的字号等比缩放） */
.sheet-head { position: relative; margin-bottom: 1.1em; }
.sheet-head .sh-left { position: absolute; left: 0; top: 0; text-align: center; }
.sheet-head .sh-logo {
    display: inline-block; padding: .22em .74em;
    background: #c0272d; color: #fff; font-weight: 700; font-size: 1.12em; letter-spacing: 2px;
}
.sheet-head .sh-company { font-size: .78em; color: #c0272d; letter-spacing: 1px; margin-top: .2em; }
.sheet-head .sh-title h1 {
    text-align: center; font-family: "SimHei", "Microsoft YaHei", sans-serif;
    font-size: 1.85em; font-weight: 700; letter-spacing: 3px; margin: 0 0 .5em;
}
.sheet-head .sh-meta {
    display: flex; gap: 1.9em; flex-wrap: wrap;
    font-size: .96em; padding: .45em .15em .6em;
}
.sheet-head .sh-meta b { font-weight: 700; }
/* 客户名可就地编辑：默认看起来就是普通文字，悬停/聚焦才给出可编辑提示 */
.sheet-head .sh-meta .cust-editable {
    display: inline-block; min-width: 2.5em;
    padding: 0 .18em; border-radius: 3px;
    outline: none; cursor: text;
    border-bottom: 1px dashed transparent;
}
.sheet-head .sh-meta .cust-editable:hover { border-bottom-color: #b9c4cb; background: #f7f9fa; }
.sheet-head .sh-meta .cust-editable:focus { border-bottom-color: var(--pri); background: #f2f7fa; }
.sheet-head .sh-meta .cust-hint { font-size: .82em; color: var(--mut); }
/* 打印时不显示任何编辑痕迹 */
@media print {
    .sheet-head .sh-meta .cust-editable {
        border-bottom: none !important; background: transparent !important; padding: 0;
    }
}

/* 明细表：横向行线 + **数据列之间的细分隔线**（便于按列阅读，但不用满格黑框）。
   合计区与定金区不带列分隔线，三张表视觉上连成一张整表。 */
table.sheet-table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    --sheet-line: #cfd6da;        /* 普通行线 */
    --sheet-line-strong: #8d9aa3; /* 表头与合计区的强调线 */
    --sheet-col: #e2e8eb;         /* 数据区的列分隔线（淡） */
}
table.sheet-table th, table.sheet-table td {
    border: none; padding: .6em .75em; vertical-align: middle;
    word-break: break-word;
}
/* 数据表：列间细分隔线（不含首列左侧与末列右侧，避免外框竖线） */
table.sheet-data th + th, table.sheet-data td + td { border-left: 1px solid var(--sheet-col); }
/* 整体外框：上（表头）由 thead 提供，底部由最后一张表收口 */
table.sheet-table thead th {
    background: #f7f9fa; font-weight: 700; text-align: center; font-size: .93em;
    line-height: 1.3; color: #22323d;
    border-top: 1.5px solid var(--sheet-line-strong);
    border-bottom: 1.5px solid var(--sheet-line-strong);
}
table.sheet-table tbody td {
    height: 2.8em;
    border-bottom: 1px solid var(--sheet-line);
}
table.sheet-table tbody tr:last-child td { border-bottom: 1.5px solid var(--sheet-line-strong); }
table.sheet-table .c { text-align: center; }
/* 表头长短写法切换：窄屏用短表头，避免换行把行高撑高、破坏整张单据的等比缩放 */
table.sheet-table .th-short { display: none; }
@media (max-width: 820px) {
    table.sheet-table .th-full { display: none; }
    table.sheet-table .th-short { display: inline; }
}table.sheet-table .r { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet-table .st-empty {
    text-align: center; color: #7a868e; height: 4.4em; letter-spacing: .5px;
}
table.sheet-table .st-remark { font-size: .93em; color: #3d4b54; }
/* 「序号」列收窄居中，视觉上更像单据 */
table.sheet-table tbody td:first-child { color: #5b6a73; }

/* 合计区：淡底 + 上下强调线，与明细区自然衔接；**不带列分隔线** */
table.sheet-table.sheet-totals { margin-top: 0; }
table.sheet-table.sheet-totals td {
    font-weight: 700; background: #f7f9fa;
    border-top: 1.5px solid var(--sheet-line-strong);
    border-bottom: 1.5px solid var(--sheet-line-strong);
    border-left: none;
    padding-top: .75em; padding-bottom: .75em;
}
table.sheet-table.sheet-totals .st-lab {
    white-space: nowrap; font-size: .93em; color: #4a5b65;
}
/* 金额可能到十几万甚至上百万，禁止换行以免"461,196.80"被折行或与相邻文字重叠 */
table.sheet-table.sheet-totals .st-money {
    font-size: 1.2em; white-space: nowrap; color: #14262f;
}
/* 大写金额可能较长：允许换行并左对齐 */
table.sheet-table.sheet-totals .st-upper-val {
    text-align: left; font-weight: 700; letter-spacing: .5px; line-height: 1.35;
    color: #22323d;
}

/* 定金 / 尾款区：无底色、无列分隔线，只有一条底线收口 */
table.sheet-table.sheet-pay td {
    font-weight: 400; background: transparent;
    border-top: none; border-bottom: 1px solid var(--sheet-line);
    border-left: none;
    padding-top: .7em; padding-bottom: .7em;
}
table.sheet-table.sheet-pay .st-pay-label {
    text-align: left; white-space: nowrap; color: #4a5b65; padding-left: .2em;
}
table.sheet-table.sheet-pay .st-pay-val { text-align: right; }
table.sheet-table.sheet-pay .st-pay-tail { border-bottom-color: transparent; }
/* 定金/尾款在打印时只保留数字，且与金额列同样右对齐 */
table.sheet-table.sheet-pay .pay-input { text-align: right; }
/* 定金/尾款：可输入，打印时只留内容不显示边框 */
.pay-input {
    width: 100%; border: none; background: transparent;
    font: inherit; font-weight: 700; text-align: right;
    padding: .15em 0; outline: none;
}
.pay-input:focus { background: #fffbe6; }
/* 输入框在屏幕上给一点提示：打印时不显示 */
@media screen {
    .pay-input { border-bottom: 1px dashed #999; }
}

/* 制单人 */
.sheet-foot {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 1.1em; font-size: .96em;
}
.sheet-foot .sf-note { color: #666; font-size: .89em; }

/* 导出 PDF 的提示气泡 */
.print-toast {
    position: fixed; left: 16px; bottom: 18px; z-index: 40;
    max-width: 420px;
    padding: 10px 14px; border-radius: 8px;
    background: #2b3a44; color: #fff; font-size: 13px;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.print-toast.show { opacity: 1; transform: none; }

/* ---------- 打印：隐藏一切非单据元素（局部打印） ----------
   纸张方向由静态 css/print-page.css 提供（默认 A4 纵向）；
   销货清单页面额外引入 css/print-page-landscape.css 覆盖为 A4 横向。
   说明：@page 无法用选择器限定作用页面，也不宜嵌套在其它 at-rule 里，
   因此用"独立样式表 + 页面按需引入"的方式隔离，避免影响订单详情等既有页面。 */
@media print {
    /* 界面外壳：打印时一律隐藏，只保留业务内容 */
    .no-print, .no-print * { display: none !important; }
    .sidebar, .topbar, .nav-backdrop, .toolbar, .op, #toast,
    .action-bar, .section-title { display: none !important; }
    .app { display: block; }
    .content { padding: 0; }
    .card, .panel { box-shadow: none; border-color: #ccc; }

    /* 销货清单：铺满纸张、去掉屏幕阴影。
       宽度交给纸张，字号显式给一个略大的固定值 —— vw 在打印上下文里不可靠，
       固定 px 才能保证打印结果稳定；屏幕端仍按 clamp() 等比缩放。 */
    html, body { background: #fff !important; }
    .sheet-wrap { padding: 0; overflow: visible; }
    .sheet {
        max-width: none; width: auto; margin: 0; padding: 0;
        box-shadow: none; min-height: 0;
        font-size: 13px;
    }
    /* 打印时列分隔线要足够清晰，否则细线会糊掉 */
    table.sheet-data th + th, table.sheet-data td + td {
        border-left-color: #c3ccd2 !important;
    }
    table.sheet-table thead th {
        background: #f2f5f7 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* 合计区底色同样需要显式保留，否则打印后与明细区混在一起 */
    table.sheet-table.sheet-totals td {
        background: #f2f5f7 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .sheet-head .sh-title h1 { font-size: 1.6em; }
    /* 明细多时允许跨页，表头每页重复 */
    table.sheet-table thead { display: table-header-group; }
    table.sheet-table tr { page-break-inside: avoid; }
    .pay-input { border: none !important; }
}


/* ==========================================================================
   员工职务分组 / 分组管理 / 穿条备料 / 备料单 / 附件分类筛选
   （本批新增：任务3/4/5/6/7 的界面样式）
   ========================================================================== */

/* ---------- 职务分组小标签（员工管理列表、通知候选里用） ---------- */
.group-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.gchip {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600; line-height: 1.7;
    background: var(--pri-bg); color: var(--pri-d); white-space: nowrap;
}
.gchip-manage { background: #efedf7; color: #655a96; }

/* ---------- 分组管理页：四张卡片 ---------- */
.grp-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grp-card-manage { border-color: #d9d3ee; }
.grp-card .card-hd h3 { display: flex; align-items: center; }
.grp-tip { font-size: 12px; color: var(--mut); line-height: 1.7; margin: 0 0 12px; }
.grp-members { list-style: none; margin: 0 0 12px; padding: 0; }
.grp-members li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.grp-members li:last-child { border-bottom: none; }
.gm-name { font-weight: 600; color: var(--ink); }
.gm-del { margin-left: auto; }
.gm-x {
    border: none; background: transparent; cursor: pointer;
    color: var(--mut-2); font-size: 18px; line-height: 1; padding: 0 4px;
    border-radius: 4px;
}
.gm-x:hover { color: var(--danger); background: var(--danger-bg); }
.grp-add { display: flex; gap: 8px; align-items: center; }
.grp-add select { flex: 1; min-width: 0; }

/* ---------- 分配职务弹窗里的多选列表 ---------- */
.grp-pick { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grp-line {
    display: grid; grid-template-columns: 20px minmax(0, auto) minmax(0, 1fr);
    align-items: center; gap: 10px; padding: 9px 12px;
    border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.grp-line:last-child { border-bottom: none; }
.grp-line:hover { background: var(--paper-2); }
.grp-line input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.grp-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.grp-desc { font-size: 12px; color: var(--mut); }
.grp-line.manage .grp-nm { color: #655a96; }
@media (max-width: 720px) {
    .grp-line { grid-template-columns: 20px minmax(0, 1fr); row-gap: 2px; }
    .grp-desc { grid-column: 2; }
}

/* ---------- 通知弹窗：按分组筛选 ---------- */
.grp-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.gf-chip {
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
    border-radius: 20px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
    font-family: inherit; transition: all .15s;
}
.gf-chip:hover { border-color: var(--pri); color: var(--pri-d); }
.gf-chip.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.gf-chip.manage { border-color: #d9d3ee; }
.gf-chip.manage.on { background: #655a96; border-color: #655a96; }
.grp-filter-note { font-size: 11.5px; color: var(--mut); margin-bottom: 8px; }
.notify-item.hidden { display: none; }
/* 通知候选人姓名后面的职务分组小标签 */
.ni-grp {
    display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 10px;
    font-size: 11px; font-weight: 500; line-height: 1.6;
    background: var(--pri-bg); color: var(--pri-d);
}
.ni-grp.manage { background: #efedf7; color: #655a96; }
.ni-grp.none { background: var(--line-2); color: var(--mut-2); }

/* ---------- 订单详情：备料详情区块 ---------- */
.prep-empty {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    padding: 18px; border: 1px dashed var(--line); border-radius: 10px;
    background: var(--paper-2);
}
.pe-ico { font-size: 30px; line-height: 1; }
.pe-text { flex: 1; min-width: 180px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.prep-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 文件选择框做成「按钮外观」：原生控件各浏览器差异太大，且手机上很难点 */
.prep-input {
    max-width: 240px; font-size: 12.5px; color: var(--mut);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
    background: var(--paper); cursor: pointer; max-width: 100%;
}
.prep-input::file-selector-button {
    border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
    border-radius: 6px; padding: 4px 10px; margin-right: 8px; cursor: pointer;
    font-family: inherit; font-size: 12.5px;
}
.prep-input::file-selector-button:hover { border-color: var(--pri); color: var(--pri-d); }

.prep-show { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.prep-shot {
    display: block; border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; background: var(--paper-2); max-width: 420px; flex: 1 1 320px;
}
.prep-shot img { display: block; width: 100%; height: auto; }
.prep-side { flex: 1 1 260px; min-width: 0; }
.ps-row { display: flex; gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line-2); }
.ps-row:last-of-type { border-bottom: none; }
.ps-k { color: var(--mut); flex: none; width: 66px; }
.ps-v { color: var(--ink); word-break: break-all; min-width: 0; }

/* ---------- 附件分类筛选按钮 ---------- */
.cat-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.cf-chip {
    display: inline-block; padding: 5px 13px; border-radius: 20px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-2); font-size: 12.5px; text-decoration: none;
    transition: all .15s; white-space: nowrap;
}
.cf-chip:hover { border-color: var(--pri); color: var(--pri-d); text-decoration: none; }
.cf-chip.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }

/* ---------- 穿条备料工作台（左列表 + 右详情） ---------- */
.prep-layout {
    display: grid; gap: 16px;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
}
.prep-list { position: sticky; top: 12px; }
.prep-search { display: flex; gap: 8px; margin-bottom: 12px; }
.prep-search input[type="text"] { flex: 1; min-width: 0; }
.prep-items { list-style: none; margin: 0; padding: 0; max-height: 66vh; overflow-y: auto; }
.prep-items li { border-bottom: 1px solid var(--line-2); }
.prep-items li:last-child { border-bottom: none; }
.prep-items li > a {
    display: block; padding: 11px 12px; text-decoration: none; color: inherit;
    border-left: 3px solid transparent; transition: background .15s, border-color .15s;
}
.prep-items li > a:hover { background: var(--paper-2); border-left-color: var(--pri); }
.prep-items li.on > a { background: var(--pri-bg); border-left-color: var(--pri); }
.pi-no { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--pri-d); }
.pi-title {
    display: block; font-size: 13.5px; color: var(--ink); margin: 2px 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pi-meta, .pi-date { display: block; font-size: 11.5px; color: var(--mut); }
.pi-date { margin-top: 1px; }
.prep-detail { min-width: 0; }
.prep-detail .prep-shot { max-width: 100%; }
table.data.compact th, table.data.compact td { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }

/* 保存单据后的提示条 */
.print-flash {
    max-width: 1040px; margin: 0 auto 12px; padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
}
.print-flash.ok { background: var(--ok-bg); color: var(--ok); }
.print-flash.err { background: var(--danger-bg); color: var(--danger); }

/* 窄屏：备料工作台改为上下堆叠，列表不再吸顶 */
@media (max-width: 980px) {
    .prep-layout { grid-template-columns: minmax(0, 1fr); }
    .prep-list { position: static; }
    .prep-items { max-height: 42vh; }
}