/* ========== RSP 售后服务管理平台 全局样式 ==========
颜色一律引用 static/css/tokens.css 变量（唯一例外 #fff/#000）
加载顺序：tokens.css → style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: var(--font-sans);
font-size: var(--text-sm); color: var(--text); background: var(--bg);
}
.hidden { display: none !important; }
a { color: var(--primary); text-decoration: none; }
/* ========== 登录页 ========== */
.login-wrap {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: var(--login-bg);
}
.login-box {
width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px;
box-shadow: var(--elev-overlay);
}
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; }
.login-logo img { width: 36px; height: 36px; object-fit: contain; }
.login-logo span { font-size: 19px; font-weight: 700; color: var(--primary); }
.login-box .field { margin-bottom: 14px; }
.login-box label { display: block; margin-bottom: 5px; color: var(--text-light); }
.login-box input {
width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius);
font-size: 14px; outline: none; background: var(--surface); color: var(--fg);
}
.login-box input:focus { border-color: var(--primary); }
.login-msg { color: var(--danger); min-height: 18px; font-size: 12px; margin-bottom: 8px; }
.login-hint { margin-top: 16px; font-size: 11px; color: var(--text-light); line-height: 1.6; }
/* ========== 主布局 ========== */
.app { display: flex; height: 100vh; overflow: hidden; }
/* 侧栏重设计（方案 A：白底分区） */
.sidebar {
width: 232px; min-width: 232px; background: var(--surface); color: var(--sidebar-text);
display: flex; flex-direction: column; border-right: 1px solid var(--border);
transition: margin var(--motion-base) var(--ease-standard);
}
.sidebar.collapsed { margin-left: -232px; }
/* 手机端抽屉遮罩（默认隐藏；≤900px 且 .show 时覆盖全屏，点击即收起菜单） */
.sidebar-mask {
display: none; position: fixed; inset: 0; z-index: 80;
background: rgba(15, 17, 21, 0.42);
}
.sidebar-mask.show { display: block; }
.brand { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.brand img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-main { font-size: 13px; font-weight: 700; color: var(--fg); line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--muted); line-height: 1.2; white-space: nowrap; }
#menu { flex: 1; overflow-y: auto; padding: 6px 8px 12px; scrollbar-gutter: stable; }
/* ----- 菜单项：胶囊 + 选中竖条（2026-09-15 收紧行高约 25%，桌面端更紧凑） ----- */
#menu a {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px 5px 9px; margin: 1px 0; border-radius: 7px;
color: var(--sidebar-text); font-size: 12.5px; line-height: 1.3;
border-left: none; position: relative;
transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
#menu a .menu-icon {
flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
color: var(--muted); transition: color var(--motion-fast) var(--ease-standard);
}
#menu a .menu-icon svg, #menu a .menu-icon i { width: 15px; height: 15px; }
#menu a:hover { background: var(--surface-3); color: var(--fg); }
#menu a:hover .menu-icon { color: var(--fg); }
#menu a.active {
background: var(--accent-soft); color: var(--fg); font-weight: 600;
}
#menu a.active .menu-icon { color: var(--primary); }
#menu a.active::before {
content: ''; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
width: 3px; height: 15px; border-radius: 0 3px 3px 0; background: var(--primary);
}
/* 菜单「待办事项」数字角标（内联，不再绝对定位以免与★重叠） */
.menu-badge {
flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; line-height: 18px;
text-align: center; font-weight: 600; display: none;
}
/* .menu-icon 尺寸由上方规则统一 */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
height: 48px; background: var(--card); border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 14px; gap: 10px; z-index: 20;
}
.page-title { font-size: 15px; font-weight: 600; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.role-tag {
font-size: 11px; padding: 2px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center;
}
.icon-btn {
background: none; border: none; cursor: pointer; padding: 6px 8px;
border-radius: var(--radius); color: var(--text-light); position: relative;
display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.badge {
position: absolute; top: -2px; right: -2px; background: var(--danger); color: #fff;
font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: flex;
align-items: center; justify-content: center; padding: 0 4px;
}
.notify-panel {
position: fixed; right: 10px; top: 52px; width: 340px; max-height: 70vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--elev-raised); z-index: 50;
}
.notify-item { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notify-item:hover { background: var(--surface-2); }
.notify-item.unread { background: var(--accent-soft); }
.notify-item .n-title { font-weight: 600; font-size: 13px; color: var(--fg); }
.notify-item .n-time { font-size: 11px; color: var(--text-light); margin-top: 3px; }
.notify-empty { padding: 24px; text-align: center; color: var(--text-light); }
/* ========== 内容区 ========== */
.content { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
/* 工单详情页：顶部 padding 归零（步骤条初始即贴齐内容区顶端，滚动零位移） */
.content.detail-page { padding-top: 0; }
/* 清单列表页：高度自适应（垂直方向最多一个滚动条——仅 table-wrap 内部滚动） */
.list-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.list-page .toolbar { flex: none; }
/* 列表用 panel 包裹（底色统一为白卡片）；panel 撑满剩余高度，table-wrap 内部滚动 */
.list-page > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.list-page > .panel .table-wrap { flex: 1; min-height: 0; overflow: auto; max-height: none; }
.list-page > .table-wrap { flex: 1; min-height: 0; overflow: auto; max-height: none; }
/* ========== 卡片与看板 ========== */
.cards-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px;
}
.stat-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px;
border-left: 3px solid var(--primary);
}
.stat-card .s-label { color: var(--text-light); font-size: 12px; }
.stat-card .s-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--fg); }
.stat-card .s-sub { color: var(--text-light); font-size: 11px; margin-top: 3px; }
.stat-card.c-green { border-left-color: var(--success); }
.stat-card.c-orange { border-left-color: var(--warning); }
.stat-card.c-red { border-left-color: var(--danger); }
.stat-card.c-blue { border-left-color: var(--accent); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
/* 看板筛选条已并入 .list-toolbar（U5）；旧的 .dash-toolbar/.dash-tb-* 规则随之下线 */
/* 饼图（conic-gradient）+ 图例 */
.pie-flex { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.pie { width: 128px; height: 128px; border-radius: 50%; flex-shrink: 0; position: relative; }
.pie::after {
content: ''; position: absolute; inset: 26px; border-radius: 50%; background: var(--card);
}
.pie-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pie-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pie-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pie-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pie-val { font-weight: 600; color: var(--fg); }
.pie-pct { width: 44px; text-align: right; color: var(--text-light); font-size: 11px; }
/* 地域分布：左侧列表 + 右侧地图 并排（宽度比 1:3；地图高度为原 2 倍，列表跟随等高） */
.dash-region-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: 10px; align-items: stretch; }
.dash-region-list { overflow: auto; max-height: 380px !important; } /* !important 防 .table-wrap 基础 max-height 覆盖 */
/* 地域列表：取消全局表格 640px 最小宽，列宽随容器自适应（不出现水平滚动条） */
.dash-region-list table.grid { min-width: 0; }
.dash-region-list table.grid th:first-child, .dash-region-list table.grid td:first-child {
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-region-list .bar-track { width: auto; min-width: 60px; }
.dash-region-list .bar-num { width: auto; min-width: 36px; }
.dash-map-box { min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 860px) {
.dash-region-grid { grid-template-columns: 1fr; }
.dash-region-list { max-height: 240px !important; }
}
.panel {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;
}
.panel h3 { font-size: 13px; margin-bottom: 10px; color: var(--fg); }
.bar-row { display: flex; align-items: center; margin-bottom: 7px; font-size: 12px; }
.bar-label { width: 64px; color: var(--text-light); }
.bar-track { flex: 1; height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin: 0 8px; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 4px; }
.bar-num { width: 34px; text-align: right; font-weight: 600; }
/* ========== 表格 ========== */
.panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h3 { margin-bottom: 0; margin-right: auto; }
.toolbar { display: flex; gap: 12px 12px; row-gap: 4px; column-gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 2px;
position: sticky; top: 0; z-index: 60; background: var(--bg); padding: 6px 0 8px;
border-bottom: 1px solid var(--border); }
/* 列表筛选区控件统一外观：input/select/combo 等高、同边框、同圆角、同字号 */
.toolbar input[type="text"], .toolbar input[type="search"], .toolbar select {
height: var(--ctl-h-tb); min-height: var(--ctl-h-tb); box-sizing: border-box; outline: none;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--fg); font-size: 13px;
}
.toolbar input[type="text"], .toolbar input[type="search"] { padding: 0 10px; }
/* 日期范围筛选（打卡记录：查看/导出任意时间段） */
.toolbar input[type="date"] {
height: var(--ctl-h-tb); min-height: var(--ctl-h-tb); box-sizing: border-box; padding: 0 8px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--fg); font-size: 12px;
}
.toolbar input[type="date"]:focus { border-color: var(--accent); }
.toolbar select {
padding: 0 28px 0 10px;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
cursor: pointer;
}
.toolbar select:hover { border-color: var(--accent); }
.toolbar input[type="text"]:focus, .toolbar input[type="search"]:focus, .toolbar select:focus {
border-color: var(--accent); box-shadow: var(--focus-ring);
}
/* toolbar 内的组合框（多选/客户搜索）：固定宽度 + 与 select 同高 */
.toolbar .combo { flex: 0 0 auto; width: 150px; }
.toolbar .combo .combo-input { height: var(--ctl-h-tb); min-height: var(--ctl-h-tb); }
.table-wrap {
overflow: auto; /* 表格在容器内横向+纵向滚动（overflow-x:auto 会吞掉 th sticky 的滚动上下文，改用双轴 auto） */
max-height: calc(100vh - var(--flt-h, 0px) - 76px);
}
/* 列宽自适应：不再强制 640px 最小宽，按容器宽度与内容自然分配（配合 td ellipsis 防撑破，减少横向滚动条） */
table.grid { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 0; }
table.grid th {
background: var(--surface-2); color: var(--text-light); font-weight: 600; text-align: left;
padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 5;
}
table.grid td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--fg); }
/* 列表紧凑化：非只读表 td 超长截断（ellipsis + title），操作列不截断 */
table.grid:not(.read-card) td { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
table.grid:not(.read-card) td.ops-col,
table.grid:not(.read-card) td:last-child { max-width: none; }
table.grid tr:hover td { background: var(--surface-3); }
.table-empty { text-align: center; color: var(--text-light); padding: 24px; }
/* 通用提示块（表单/弹窗内说明、打卡定位与地址展示） */
.hint { font-size: 12px; color: var(--text-light); line-height: 1.6; word-break: break-all; }
/* ========== 打卡位置列（省/市/区县 + 详细地址） ==========
整行不换行：省市区加粗 + 详细地址浅色，超长省略号截断；点击单元格弹窗看完整地址
（手机端同样可点，避免换行把表格撑高） */
table.grid:not(.read-card) td.loc-cell { max-width: 340px; white-space: nowrap; overflow: hidden; }
.loc-cell .loc-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.loc-cell .loc-area { font-weight: 600; }
.loc-cell .loc-addr { color: var(--text-light); }
.loc-cell .loc-muted { color: var(--text-light); font-size: 11px; }
.loc-cell .loc-fill { margin-top: 3px; padding: 1px 6px; font-size: 11px; }
/* 打卡弹窗中的位置展示（手机端醒目显示） */
.loc-strong { font-weight: 600; color: var(--fg); margin-top: 2px; line-height: 1.4; }
.loc-strong-addr { font-weight: 400; color: var(--text-light); }
.loc-detail-addr { white-space: normal; word-break: break-all; }
@media (max-width: 768px) {
table.grid:not(.read-card) td.loc-cell { max-width: 200px; }
}
/* ========== 多层级菜单树 ========== */
/* ===== 菜单分组（方案 A：白底分区 + 主色短竖标记 + 子项缩进） ===== */
.menu-search {
position: sticky; top: 0; z-index: 3; padding: 6px 8px;
background: var(--surface); border-bottom: 1px solid var(--border-soft);
}
.menu-search input {
width: 100%; height: 28px; padding: 0 9px; font-size: 12px;
color: var(--fg); background: var(--surface-3);
border: 1px solid transparent; border-radius: 7px; outline: none;
transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.menu-search input:focus { border-color: var(--primary); background: var(--surface); }
.menu-group { margin: 0; padding: 3px 0; }
.menu-group + .menu-group { border-top: 1px solid var(--border-soft); }
.menu-group-head {
position: relative; display: flex; align-items: center; gap: 6px;
padding: 4px 8px 4px 15px; border-radius: 7px; cursor: pointer;
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--muted);
}
/* 分组主色短竖标记（方案 A 的分区标识） */
.menu-group-head::before {
content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
width: 3px; height: 12px; border-radius: 2px; background: var(--accent); opacity: .85;
}
.menu-group-head:hover { background: var(--surface-2); color: var(--fg); }
.menu-group-head.static { cursor: default; }
.menu-group-head.static:hover { background: transparent; color: var(--muted); }
.menu-group-head.static::before { background: var(--muted); opacity: .5; }
.menu-group-icon { display: none; } /* 方案 A：分组不带图标，只用短竖标记 */
.menu-group-title { flex: 1; }
.menu-group-count { display: none; } /* 方案 A：一级目录不显示数量 */
.menu-group.has-active > .menu-group-head { color: var(--fg); }
.menu-caret { transition: transform var(--motion-base) var(--ease-standard); opacity: .6; }
.menu-group.collapsed .menu-caret { transform: rotate(-90deg); }
.menu-group.collapsed .menu-group-items { display: none; }
/* 子项缩进（不画引导线，靠缩进 + 分组分隔线体现归属） */
.menu-group-items { padding: 1px 0 0; }
#menu a { margin-left: 10px; }
.menu-group-pin .menu-group-items { padding-top: 1px; }
#menu a .menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu a .menu-pin { flex: 0 0 auto; opacity: 0; font-size: 11px; color: var(--muted); transition: opacity var(--motion-fast); }
#menu a:hover .menu-pin { opacity: .7; }
#menu a .menu-pin.on { opacity: 1; color: var(--accent); }
.menu-empty { padding: 16px 14px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
.sidebar { width: 264px; min-width: 264px; box-shadow: var(--elev-raised); }
.sidebar.collapsed { margin-left: -264px; }
#menu a { padding: 10px 10px 10px 11px; min-height: var(--touch-target); }
}
.menu-empty { padding: 16px 14px; font-size: 12px; color: var(--muted); }
/* ========== 角色与权限 ========== */
#pm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pm-wrap { display: flex; gap: 10px; flex: 1; min-height: 0; }
.pm-roles {
width: 210px; flex: none; overflow: auto; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px;
}
.pm-role { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.pm-role:hover { background: var(--surface-3); }
.pm-role.active { background: var(--accent-soft); }
.pm-role-name { font-size: 13px; font-weight: 600; }
.pm-role-meta { font-size: 11px; color: var(--text-light); }
.pm-role-add { padding: 6px; }
.pm-perms {
flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.pm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pm-groups { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.pm-group { margin-bottom: 12px; }
.pm-group-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.pm-grp-all { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px 12px; }
.pm-item { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 6px; border-radius: var(--radius-sm); }
.pm-item:hover { background: var(--surface-3); }
.pm-item code { font-size: 10px; color: var(--text-light); }
.pm-item em.pm-tag { font-size: 10px; font-style: normal; padding: 0 4px; border-radius: 3px; }
.pm-item em.grant { background: rgba(16, 185, 129, .15); color: var(--success); }
.pm-item em.deny { background: rgba(239, 68, 68, .15); color: var(--danger); }
@media (max-width: 900px) {
.pm-wrap { flex-direction: column; }
.pm-roles { width: auto; max-height: 180px; }
}
/* ========== 财务管理模块 ========== */
#fn-body { flex: 1; min-height: 0; overflow: auto; }
/* 台账页：占满可用高度，仅表格区纵向滚动（不出现双层滚动条） */
.fn-list { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.fn-list .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fn-list .panel .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.fin-sum { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.fin-sum-item { font-size: 13px; color: var(--text-light); }
.fin-sum-item b { color: var(--fg); font-size: 15px; }
.fin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.fin-item-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
@media (max-width: 640px) {
.fin-item-row { grid-template-columns: 1fr 1fr 1fr 32px; }
.fin-grid2 { grid-template-columns: 1fr; }
}
/* ========== 操作列冻结在最右侧（全站清单通用） ==========
横向滚动时操作列始终可见；背景不透明 + 左侧分隔阴影，与内容区分层。
按「操作」列语义冻结（由 App.markOpsColumns 打 .has-ops / .ops-col），
而非简单冻结末列 —— 看板地域分布、超期工单等无操作列的表格不受影响。 */
table.grid.has-ops thead th.ops-col,
table.grid.has-ops tbody td.ops-col {
position: sticky; right: 0;
background: var(--surface);
box-shadow: -3px 0 6px rgba(15, 23, 42, 0.06);
max-width: none; /* 操作列不截断 */
white-space: nowrap;
}
/* 表头操作列：同时 sticky top + right，层级需高于普通表头 */
table.grid.has-ops thead th.ops-col {
background: var(--surface-2);
z-index: 7;
}
table.grid.has-ops tbody td.ops-col { z-index: 4; }
/* 行悬停时操作列背景同步变化，避免色块断层 */
table.grid.has-ops tbody tr:hover td.ops-col { background: var(--surface-3); }
/* 操作列左侧细分隔线（视觉边界，仅在横向滚动时明显） */
table.grid.has-ops thead th.ops-col::before,
table.grid.has-ops tbody td.ops-col::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
background: var(--border);
}
/* 小屏保底：列数多时保留最小宽度（横向滚动 + 操作列冻结可见），桌面自适应不横滚 */
@media (max-width: 767px) {
/* 极限压缩：缩小字号 + 收紧内边距 + 表头也参与截断，尽量让 12~13 列一屏放下；
仍放不下时表格区内部横滚，操作列已冻结在最右侧，页面本身不出现横向滚动条 */
table.grid:not(.read-card) { min-width: 640px; font-size: 11px; }
table.grid:not(.read-card) th {
padding: 5px 3px;
max-width: 96px; overflow: hidden; text-overflow: ellipsis;
}
table.grid:not(.read-card) tbody td { padding: 4px 3px; max-width: 110px; }
table.grid:not(.read-card) tbody td.ops-col,
table.grid:not(.read-card) tbody td:last-child { padding: 4px 6px; }
}
/* 中等屏（<1440）：收紧单列上限，让 12~13 列的客户/设备表也能一屏放下（内容 ellipsis + title 完整可见） */
@media (max-width: 1439px) {
table.grid:not(.read-card) td { max-width: 150px; }
/* 多列表（客户 12 列 / 设备 13 列）压缩单元格内边距，避免中等屏出现横向滚动条 */
table.grid:not(.read-card) th { padding: 6px 4px; }
table.grid:not(.read-card) tbody td { padding: 5px 4px; }
table.grid:not(.read-card) tbody td.ops-col,
table.grid:not(.read-card) tbody td:last-child { padding: 5px 8px; }
}
/* 列表页脚：tfoot 冻结在 table-wrap 底部（列表滚动时页脚始终可见、贯穿整行）
必须置于 table.grid td 规则之后，确保 max-width:none 覆盖 240px 截断 */
table.grid tfoot td {
position: sticky; bottom: 0; z-index: 5;
background: var(--surface-2); border-top: 1px solid var(--border-strong);
padding: 7px 10px; max-width: none !important;
}
td.list-foot {
font-size: 12px; color: var(--text-light); white-space: nowrap;
overflow: visible; text-overflow: clip;
}
td.list-foot b { color: var(--accent); font-size: 13px; font-weight: 700; }
td.list-foot .lf-right { float: right; display: inline-flex; align-items: center; gap: 14px; }
td.list-foot .lf-right .lf-item { display: inline-flex; align-items: center; gap: 4px; }
td.list-foot .lf-right .lf-item b { font-weight: 700; }
/* ========== 按钮 ========== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 12px; color: var(--fg);
transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn:hover { background: var(--surface-3); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--accent-on); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--accent-on); }
.btn-danger:hover { background: var(--danger); filter: brightness(1.1); }
.btn-success { background: var(--success); border-color: var(--success); color: var(--accent-on); }
.btn-success:hover { filter: brightness(1.1); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: var(--accent-on); }
.btn-warning:hover { filter: brightness(1.1); }
/* 工单操作按钮三色区分：保存=绿 / 返回上一步=橙 / 提交=主色 */
.btn-save { background: var(--success); border-color: var(--success); color: var(--accent-on); }
.btn-save:hover { filter: brightness(1.1); }
.btn-back { background: var(--warning); border-color: var(--warning); color: var(--accent-on); }
.btn-back:hover { filter: brightness(1.1); }
.btn-transfer { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn-transfer:hover { filter: brightness(1.1); }
/* 次级按钮（返回上一步等） */
.btn-secondary { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg); }
.btn-secondary:hover { background: var(--surface-2); }
/* 幽灵按钮（保存草稿等） */
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-light); }
.btn-ghost:hover { background: var(--surface-3); color: var(--fg); }
.btn-sm { padding: 3px 8px; font-size: 11px; min-height: 26px; }
.btn-block { width: 100%; justify-content: center; padding: 9px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ========== 我的考勤：单行操作/记录导航 ========== */
/* ========== 标签 ========== */
.tag { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; }
.tag-p0 { background: var(--tag-p0-bg); color: var(--tag-p0-on); }
.tag-p1 { background: var(--tag-p1-bg); color: var(--tag-p1-on); }
.tag-p2 { background: var(--tag-p2-bg); color: var(--tag-p2-on); }
.tag-p3 { background: var(--tag-p3-bg); color: var(--tag-p3-on); }
.tag-done { background: var(--tag-done-bg); color: var(--tag-done-on); }
.tag-open { background: var(--tag-open-bg); color: var(--tag-open-on); }
.tag-cancelled { background: var(--tag-p0-bg); color: var(--tag-p0-on); }
.tag-step { background: var(--accent); color: #fff; font-weight: 600; border: none; }
/* 当前步骤分色标识：各步骤不同色，便于快速识别所处环节 */
.tag-step-create { background: #eceff1; color: #37474f; font-weight: 600; }
.tag-step-dispatch { background: #fff3e0; color: #e65100; font-weight: 600; }
.tag-step-accept { background: #e3f2fd; color: #1565c0; font-weight: 600; }
.tag-step-fill { background: #e0f7fa; color: #00695c; font-weight: 600; }
.tag-step-charge { background: #f3e5f5; color: #6a1b9a; font-weight: 600; }
.tag-step-review { background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.tag-step-done { background: #e0e0e0; color: #424242; font-weight: 600; }
.tag-warranty-in { background: var(--tag-warr-in-bg); color: var(--tag-warr-in-on); }
.tag-warranty-out { background: var(--tag-warr-out-bg); color: var(--tag-warr-out-on); }
.tag-warranty-ext { background: var(--tag-warr-ext-bg); color: var(--tag-warr-ext-on); }
/* ========== 表单 ========== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 12px; }
.field { display: flex; flex-direction: column; }
.field label { font-size: 12px; color: var(--text-light); margin-bottom: 3px; }
/* 必填星号统一红色（不限容器：弹窗 .field、详情页 .od-f、抽屉、表格表头等一律生效） */
.req { color: var(--danger); font-weight: 600; }
.field input, .field select, .field textarea {
padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
font-size: 12px; outline: none; font-family: inherit; resize: vertical;
background: var(--surface); color: var(--fg);
}
/* 统高一：文本框 / 原生下拉 = 标准控件高度（多行文本区不受限） */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
.field select {
height: var(--ctl-h); min-height: var(--ctl-h); box-sizing: border-box; padding: 0 8px; line-height: normal;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
/* 只读/禁用字段灰底（排除 combo-input：其 readonly 为可交互显示、白底） */
.field input[readonly]:not(.combo-input),
.field input:disabled:not(.combo-input) {
background: var(--surface-3); color: var(--text-light); cursor: not-allowed;
}
/* 禁用态下拉显式灰底（区分「白=可编辑，灰=禁用/只读」） */
.field select:disabled, .toolbar select:disabled {
background: var(--surface-2); color: var(--text-light); cursor: not-allowed;
}
.field.full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* 操作面板子表录入控件：宽度随内容自适应（容器弹性 + 输入框不换行收缩） */
#step-form input[type="text"], #step-form input[type="number"], #step-form input:not([type]) {
width: auto; min-width: 60px; max-width: 100%; box-sizing: border-box;
}
/* 步骤表单紧凑统一：文本框标签左对齐、输入/下拉/组合框高度统一（取 --ctl-h） */
#step-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#step-form .field select,
#step-form .pt-form input, #step-form .pt-form select {
height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 8px;
}
#step-form .combo .combo-input { height: var(--ctl-h); min-height: var(--ctl-h); }
/* 组合框铺满容器（覆盖上面 width:auto；pt-apply/pt-newold/ci-ctype 等在非 form-grid 容器） */
#step-form .combo .combo-input { width: 100%; min-width: 0; }
#step-form .form-grid input, #step-form .form-grid select {
width: 100%; min-width: 0;
}
#step-form .form-grid { grid-template-columns: 1fr; gap: 8px 10px; }
/* 收费明细录入区：3 列（类型+描述一行[描述占2列]、单价/数量/折扣一行），字段名上输入下 */
#step-form .form-grid.ci-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-entry .ci-span2 { grid-column: span 2; }
@media (max-width: 560px) {
#step-form .form-grid.ci-entry { grid-template-columns: 1fr; }
#step-form .form-grid.ci-entry .ci-span2 { grid-column: auto; }
}
#step-form input[type="datetime-local"], #step-form input[type="date"] { width: 100%; min-width: 0; }
/* ========== 工单详情：顶部冻结区（返回列表按钮 + 步骤胶囊条） ==========
容器整体 sticky，滚动时钉在内容区顶端（背景 --bg 不透明防穿透） */
.detail-topbar {
position: sticky; top: 0; z-index: 55;
margin: 0 0 -8px; /* 负 margin 抵消 odl-main gap 8px：与下方概览卡无缝贴合（其余区域间距不变） */
background: var(--bg);
padding: 0;
}
/* 步骤胶囊条（方案L）：高度紧凑；容器已 sticky，自身不再固定 */
.steps-bar {
display: flex; align-items: center; gap: 6px;
padding: 3px 2px; margin-bottom: 6px;
background: var(--bg);
border-bottom: 1px solid var(--border);
overflow-x: auto; /* 窄屏横向滚动 */
}
.step-pill {
flex: 1; min-width: 52px;
padding: 2px 8px; border-radius: 9px; border: 0;
font-size: 11px; line-height: 1.4; font-weight: 500; text-align: center; white-space: nowrap;
background: #eef2f7; color: #64748b;
user-select: none;
}
/* 节点胶囊与工单状态标签同配色体系：已完成→已完成状态色，当前节点→处理中状态色 */
.step-pill.done {
background: var(--tag-done-bg); color: var(--tag-done-on);
}
.step-pill.active {
background: var(--tag-open-bg); color: var(--tag-open-on); font-weight: 700;
}
/* 管理员节点调整条（步骤条下方，白卡横条） */
.op-adjust {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; margin-bottom: 10px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.op-adjust-label { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.op-adjust select {
flex: 1; min-width: 0; min-height: 34px; padding: 0 8px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--fg); font-size: 13px;
}
/* v6：节点调整条紧凑化（已内嵌底部操作条，见 .od-actions .op-adjust） */
.order-detail-layout .op-adjust{display:flex;align-items:center;gap:6px;padding:0;margin:0;background:transparent;border:0}
.order-detail-layout .op-adjust .op-adjust-label{font-size:10.5px;color:var(--muted)}
.order-detail-layout .op-adjust select{flex:0 0 auto;width:auto;min-width:96px;height:var(--ctl-h-act);min-height:var(--ctl-h-act);font-size:11.5px;border-radius:6px;background:#fff}
.order-detail-layout .op-adjust .btn{height:var(--ctl-h-act);min-height:var(--ctl-h-act)}
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; margin-bottom: 10px; }
.detail-item { display: flex; align-items: baseline; font-size: 12px; gap: 6px; }
.detail-item .k { color: var(--text-light); min-width: 72px; flex-shrink: 0; white-space: nowrap; }
.detail-item .v { font-weight: 500; min-width: 0; word-break: break-word; color: var(--fg-2); }
.section-title {
font-size: 13px; font-weight: 600; margin: 14px 0 8px; padding-bottom: 5px;
border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; color: var(--fg);
}
.read-block { font-size: var(--text-sm); padding: 8px; background: var(--surface-2); border-radius: var(--radius-sm); white-space: pre-wrap; }
/* ========== 流转记录折叠组件 ========== */
.collapse-btn {
background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600;
color: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.collapse-btn:hover { color: var(--primary); }
.collapse-arrow { color: var(--text-light); transition: transform var(--motion-fast) var(--ease-standard); }
.collapse-arrow.rotated { transform: rotate(90deg); }
.flow-log { font-size: 12px; padding-top: 4px; }
.flow-item {
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px 9px 14px;
background: var(--bg); position: relative; margin-bottom: 8px;
}
.flow-item::before {
content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
border-radius: 2px; background: var(--primary);
}
.flow-item:first-child::before { background: var(--success); }
.flow-item:last-child::before { background: var(--warning); }
.fli-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fli-step { font-size: 11px; color: var(--text); }
.fln-action {
font-weight: 700; font-size: 12px; color: var(--accent-on); background: var(--primary);
padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.fln-meta { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; font-size: 11px; }
.fln-op { color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.fln-time { color: var(--text-light); display: inline-flex; align-items: center; gap: 4px; }
.fln-changes {
margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
max-height: 130px; overflow-y: auto;
}
.fl-change { display: flex; gap: 6px; align-items: center; font-size: 11px; padding: 2px 0; }
.flc-label { color: var(--text-light); min-width: 70px; }
.flc-old { color: var(--danger); text-decoration: line-through; }
.flc-arrow { color: var(--text-light); }
.flc-new { color: var(--success); font-weight: 500; }
/* 字段级校验错误提示 */
#step-form .field-error {
border-color: var(--danger) !important;
box-shadow: 0 0 0 2px var(--danger-soft);
background: var(--danger-soft);
}
.field-error-tip {
color: var(--danger); font-size: 11px; margin-top: 3px;
display: inline-flex; align-items: center; gap: 4px;
animation: fieldTipIn var(--motion-base) ease;
}
@keyframes fieldTipIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
/* 操作面板内联提示 */
.op-inline-hint { font-size: 11px; color: var(--text-light); font-weight: 400; }
/* 操作分区卡片（保留兼容） */
.op-section {
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px;
background: var(--surface-2);
}
.op-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-sec-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.op-sec-summary {
font-size: 12px; color: var(--text-light); margin-top: 6px; line-height: 1.5;
word-break: break-all;
}
/* 无操作权限提示 */
.op-no-perm {
padding: 26px 16px; text-align: center; font-size: 13px; color: var(--text);
}
.op-no-perm-icon {
font-size: 30px; margin-bottom: 8px; color: var(--muted);
display: flex; align-items: center; justify-content: center;
}
.op-no-perm-sub { margin-top: 6px; font-size: 12px; color: var(--text-light); }
/* 下拉模糊搜索组件 */
.select-search { position: relative; margin-bottom: 4px; }
.select-search-input {
width: 100%; padding: 5px 8px; box-sizing: border-box;
border: 1px solid var(--border); border-radius: var(--radius);
font-size: 12px; outline: none; font-family: inherit; background: var(--surface); color: var(--fg);
}
.select-search-input:focus { border-color: var(--primary); }
.select-search-empty {
font-size: 11px; color: var(--danger); padding: 4px 6px;
background: var(--danger-soft); border: 1px dashed var(--danger); border-radius: 4px;
margin-top: 2px; display: inline-flex; align-items: center; gap: 4px;
}
/* ========== 可搜索组合框（只读展示 + 面板内搜索） ========== */
.combo { position: relative; flex: 1; min-width: 0; }
.combo-input {
width: 100%; padding: 0 26px 0 8px; box-sizing: border-box;
border: 1px solid var(--border); border-radius: var(--radius-sm);
text-overflow: ellipsis; overflow: hidden; /* 长内容省略，不遮挡右侧 ✕ */
font-size: 13px; outline: none; font-family: inherit; background: var(--surface); color: var(--fg);
height: var(--ctl-h); min-height: var(--ctl-h); /* 统高一：与同场景文本框等高 */
}
/* 表单内组合框：字号/圆角与同区文本框完全一致（视觉等高、等宽、等边距） */
.field .combo-input { height: var(--ctl-h); min-height: var(--ctl-h); font-size: 12px; border-radius: var(--radius); }
.combo-input[readonly] { cursor: pointer; background: var(--surface); }
.combo-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
/* 联动禁用：付费客户等 combo 在"否"状态下底色变暗（与只读字段一致） */
.combo-disabled .combo-input {
/* 与相邻普通输入框底色完全一致（白底），避免同排字段底色不统一 */
background: var(--card); color: var(--fg); cursor: not-allowed;
}
.combo-btn {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
border: none; background: none; padding: 2px; cursor: pointer; display: flex;
color: var(--muted); border-radius: var(--radius-sm);
}
.combo-btn:hover { color: var(--fg); }
.combo-clear:hover { color: var(--danger); }
.combo-list {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
margin: 0; padding: 0; list-style: none;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--elev-raised); display: none; overflow: hidden;
}
.combo-list.show { display: block; }
/* 浮层模式：位于弹窗/滚动容器内时挂到 body，按输入框定位（避免被 overflow 裁剪或遮挡） */
.combo-list.combo-list-floating { position: fixed; left: auto; right: auto; z-index: 3000; }
.combo-list.combo-list-floating.show { display: flex; flex-direction: column; overflow: hidden; }
.combo-list-floating .combo-options { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.combo-list-floating .combo-search { flex: 0 0 auto; }
/* 面板顶部搜索框 */
.combo-search {
position: sticky; top: 0; padding: 6px; border-bottom: 1px solid var(--border);
background: var(--surface);
}
.combo-search-input {
width: 100%; box-sizing: border-box; padding: 5px 8px; min-height: 30px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 13px; outline: none; font-family: inherit; background: var(--surface); color: var(--fg);
}
.combo-search-input:focus { border-color: var(--accent); }
/* 选项滚动区 */
.combo-options { max-height: 220px; overflow-y: auto; padding: 4px; margin: 0; list-style: none; }
.combo-options li {
padding: 7px 10px; font-size: 13px; color: var(--fg); border-radius: var(--radius-sm);
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-options li:hover, .combo-options li.active { background: var(--accent-soft); color: var(--accent); }
/* 多选下拉：选中项高亮 + 底部操作条（已选N项/清空/确定） */
.combo-options li.selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.combo-foot { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--muted); white-space: nowrap; flex-wrap: nowrap; }
.combo-foot .combo-count { flex: 1; }
.combo-foot-btn { border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.combo-foot-btn:hover { background: var(--surface-2); }
.combo-foot-ok { color: var(--accent); font-weight: 600; }
.combo-options li.combo-empty {
color: var(--danger); background: var(--danger-soft); cursor: default;
display: flex; align-items: center; gap: 4px; font-size: 12px;
}
/* 行内组合（选择器+录入按钮） */
.inline-combo { display: flex; gap: 6px; align-items: center; }
.inline-combo select { flex: 1; min-width: 0; }
/* 省市区三级选择 */
.region-cascader { display: flex; gap: 6px; }
.region-cascader select { flex: 1; }
/* 设备档案客户/设备信息分区 */
.arch-cust-box, .arch-dev-box {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-2);
}
.arch-cust-box .field, .arch-dev-box .field { margin: 0; }
.arch-cust-box input[readonly]:not(.combo-input), .arch-dev-box input[readonly]:not(.combo-input) {
background: var(--surface-3); color: var(--text-light); cursor: not-allowed;
}
/* 预设字段拖拽排序 */
.drag-handle { cursor: grab; color: var(--text-light); user-select: none; padding: 0 4px; }
.dragging { opacity: 0.5; }
.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }
/* 手写签名区（2026-09-05 需求：宽度铺满容器；高度先调 3 倍后改为其 2/3 = 240px）
内部分辨率由 initSignature 按实际显示尺寸 × DPR 重设，保证笔画清晰不变形；
此处 CSS 只控制显示尺寸。 */
.sign-box {
display: block;
width: 100%;
height: 240px;
background: #fff;
border: 1px dashed var(--border); border-radius: var(--radius);
touch-action: none; background: #fff; cursor: crosshair;
}
/* ========== 弹窗 ========== */
.modal-mask {
position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent); display: flex;
align-items: center; justify-content: center; z-index: 100; padding: 12px;
}
.modal {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 640px;
max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--elev-raised);
}
.modal.wide { max-width: 860px; }
.modal-head {
display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--fg);
}
.modal-body { padding: 14px; overflow-y: auto; }
/* 「自动取值」只读标记（工作方式/现场到达/现场完工/现场时长 等自动汇总字段） */
.od-auto {
display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px;
font-size: 11px; font-weight: 500; line-height: 16px; vertical-align: middle;
color: #2563eb; background: rgba(37, 99, 235, .10); border: 1px solid rgba(37, 99, 235, .25);
cursor: help;
}
/* 签字图片（服务记录区域内嵌小图，节省空间） */
.od-signimg-sm { display: flex; flex-direction: column; gap: 2px; }
.od-signimg.od-signimg-sm img { height: 25px; width: auto; max-width: 168px; max-height: 25px; object-fit: contain; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
/* ========== Toast ========== */
.toast {
position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 200;
background: var(--surface-3); color: var(--fg); padding: 9px 18px; border-radius: var(--radius-md); font-size: 13px;
border: 1px solid var(--border); box-shadow: var(--elev-overlay); max-width: 80vw;
}
.toast.success { background: var(--success); border-color: var(--success); color: var(--accent-on); }
.toast.error { background: var(--danger); border-color: var(--danger); color: var(--accent-on); }
/* ========== 预设字段管理 ========== */
.dict-chip {
display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 10px; padding: 1px 4px 1px 8px; font-size: 12px; color: var(--fg);
}
.dict-chip-x {
border: none; background: none; color: var(--text-light); cursor: pointer;
padding: 0 3px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.dict-chip-x:hover { color: var(--danger); background: var(--danger-soft); }
.dict-parent {
display: inline-block; min-width: 64px; font-size: 11px; color: var(--primary);
font-weight: 600; margin-right: 4px; vertical-align: middle;
}
/* 未归类的小产线（parent 为空或指向已删除的大类）：用警示色提示补挂大类 */
.dict-parent-warn { color: var(--danger); }
/* 「修改所属大类」按钮：用主色弱化样式，与删除按钮（hover 变红）区分 */
.dict-chip-x.dict-chip-edit { color: var(--primary); }
.dict-chip-x.dict-chip-edit:hover { color: var(--primary); background: var(--accent-soft); }
/* ================================================================
工单详情页重构布局（移动优先 + 桌面双栏）
================================================================ */
.order-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--rail-width);
gap: var(--space-4);
align-items: start;
max-width: var(--container-max);
margin: 0 auto;
}
.odl-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; isolation: isolate; }
/* 进度胶囊（桌面+移动复用） */
.progress-capsule {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
color: var(--fg);
min-height: var(--touch-target);
font-family: inherit;
cursor: default;
}
.capsule-btn { cursor: pointer; text-align: left; width: 100%; }
.capsule-btn:hover { border-color: var(--border-strong); background: var(--surface-3); }
.pc-label { color: var(--muted); font-size: var(--text-xs); flex-shrink: 0; }
.pc-value { font-weight: 600; color: var(--accent); flex-shrink: 0; }
.pc-count { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pc-track {
flex: 1; min-width: 48px; height: 4px;
background: var(--border); border-radius: var(--radius-pill); overflow: hidden;
}
.pc-bar { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--motion-base) var(--ease-standard); }
.pc-pct { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); flex-shrink: 0; }
.pc-chevron { color: var(--muted); }
/* 步骤抽屉 */
.step-drawer {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3);
box-shadow: var(--elev-raised);
}
.step-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.step-node {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-md);
min-height: var(--touch-target);
color: var(--fg-2);
}
.step-node.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.step-node.done { color: var(--fg-2); }
.sn-dot {
width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-2); border: 1px solid var(--border);
font-size: var(--text-xs); color: var(--muted); flex-shrink: 0;
}
.step-node.done .sn-dot { background: var(--success-soft); border-color: transparent; color: var(--success); }
.step-node.active .sn-dot { background: var(--accent); border-color: transparent; color: var(--accent-on); }
.overview-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.overview-title { font: 600 var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-title); color: var(--fg); }
/* 申告时间：小字号紧跟工单号标题后 */
.ov-report { font-size: 11px; font-weight: 400; color: var(--text-light); white-space: nowrap; }
/* 概览字段：4 个普通字段各 1 列 + 末字段（客户名称）跨 2 列，单行紧凑（缩小字号/压缩间距，ellipsis 防换行错位） */
.overview-grid {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 2px 10px; margin-top: var(--space-2);
}
.overview-grid .detail-item:last-child { grid-column: span 2; } /* 客户名称占 2 字段位 */
.overview-grid .detail-item { gap: 3px; min-width: 0; }
.overview-grid .detail-item .k {
min-width: 0; font-size: 11px; color: var(--text-light);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.overview-grid .detail-item .v {
min-width: 0; font-size: 12px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
}
/* 分组折叠（details/summary 原生可访问，无 JS 依赖） */
.detail-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.group-head {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-4);
cursor: pointer; font-weight: 600; font-size: var(--text-md); color: var(--fg);
min-height: var(--touch-target);
list-style: none;
}
.group-head::-webkit-details-marker { display: none; }
.group-head::after {
content: ''; width: 10px; height: 10px; margin-left: auto; transform: rotate(45deg);
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transition: transform var(--motion-fast) var(--ease-standard); flex-shrink: 0;
}
.group[open] > .group-head::after { transform: rotate(225deg); }
.group-count { margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-weight: 400; }
.group-body { padding: var(--space-1) var(--space-4) var(--space-4); }
.group-sub {
display: flex; align-items: center; gap: var(--space-1);
font-size: var(--text-md); font-weight: 600; color: var(--fg);
margin: var(--space-3) 0 var(--space-2);
}
/* 右操作面板（sticky 常驻，独立滚动） */
.odl-rail {
position: sticky;
top: var(--space-3);
max-height: calc(100vh - var(--space-6));
overflow-y: auto;
}
.rail-inner {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* 步骤表单挂载容器（移动端卡片外观；桌面在 rail-inner 内无额外样式） */
.form-mount { min-height: 0; }
/* 步骤表单内联 */
.step-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.step-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--fg); }
.step-comment { margin-top: 20px; }
.sub-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.sub-tab { padding: 7px 16px; font-size: 13px; color: var(--muted); background: none; border: none;
border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.sub-tab:hover { color: var(--fg); }
.sub-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.step-tab { padding: 6px 12px; font-size: 13px; }
.step-tab {
padding: 6px 12px; font-size: 13px; color: var(--muted); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -1px;
cursor: pointer; white-space: nowrap; min-height: 36px;
transition: color .15s;
}
.step-tab:hover { color: var(--fg); }
.step-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
/* 配件录入：字段逐行排列，按钮独立一行 */
.pt-form { display: flex; flex-direction: column; gap: 6px; }
.pt-form select, .pt-form input { height: var(--ctl-h); min-height: var(--ctl-h); }
/* 配件录入：申请/归还 与 新/旧 同一行 */
.pt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 字段名左置（label 在左、控件在右）：受理-服务记录 / 配件录入 */
.field-left, .pt-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.field-left label, .pt-row label {
width: 76px; flex-shrink: 0; margin-bottom: 0; font-size: 12px;
color: var(--text-light); text-align: left;
}
.field-left > input, .field-left > .combo,
.pt-row > input, .pt-row > .combo { flex: 1; min-width: 0; }
/* 左置输入框外观与其他表单输入框保持一致（白底、描边、圆角、字号） */
.field-left > input, .pt-row > input {
padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius);
font-size: 12px; outline: none; font-family: inherit;
background: var(--surface); color: var(--fg);
min-height: 32px; width: 100%; box-sizing: border-box;
}
.field-left > input:focus, .pt-row > input:focus { border-color: var(--primary); }
.field-left > input[readonly], .field-left > input:disabled,
.pt-row > input[readonly], .pt-row > input:disabled {
background: var(--surface-3); color: var(--text-light); cursor: not-allowed;
}
.op-transfer-link {
display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-light);
margin-top: var(--space-2); cursor: pointer;
}
.op-transfer-link:hover { color: var(--primary); text-decoration: underline; }
/* 卡片式子表（服务时间/配件/收费） */
.st-rows { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.st-row {
position: relative;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: var(--space-3);
}
/* 收费项目卡片紧凑：缩小内边距与行距，节省空间 */
#ci-list .st-row { padding: 8px 10px; }
#ci-list .st-row-item { gap: 1px; }
#ci-list .st-row-item input { height: var(--ctl-h); min-height: var(--ctl-h); }
/* 移动端窄屏：单列展示，避免字段过窄 */
@media (max-width: 560px) {
}
.st-row-del {
position: absolute; top: var(--space-1); right: var(--space-1);
width: var(--touch-target); height: var(--touch-target);
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--muted); border-radius: var(--radius-sm);
}
.st-row-del:active { color: var(--danger); background: var(--danger-soft); }
.st-row-item { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--muted); min-width: 0; }
.st-row-item b { font-size: var(--text-sm); color: var(--fg); font-weight: 500; word-break: break-all; }
.st-row-item input {
min-height: 40px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0 var(--space-2);
color: var(--fg);
font-size: var(--text-md);
width: 100%;
}
.st-row-item input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.st-empty {
text-align: center; padding: var(--space-6) var(--space-3); color: var(--muted); font-size: var(--text-sm);
display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.overview-grid .v, .detail-grid .v, .read-block { overflow-wrap: anywhere; }
/* 内容区宽度自适应：随断点收窄内边距，宽度始终 = 视口（无横向滚动） */
.order-detail-layout {
width: 100%;
max-width: var(--container-max); /* 大屏上限 1320px，居中 */
margin: 0 auto;
}
@media (max-width: 1279px) {
/* 桌面/平板横屏：右栏缩窄至 297px（录入区域 -10%），内容区让出更多宽度 */
.order-detail-layout { grid-template-columns: minmax(0, 1fr) 297px; }
}
@media (max-width: 1023px) {
/* 平板竖屏：单栏全宽（max-width 随屏自适应），操作面板并入内容区 */
.content { padding: 10px; }
.order-detail-layout { grid-template-columns: 1fr; max-width: none; }
.odl-rail { display: none; }
.form-mount {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
/* 顶部冻结区偏移跟随 content padding（10px） */
.content.detail-page { padding-top: 0; }
.content { padding-bottom: calc(var(--actionbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-3)); }
}
@media (max-width: 900px) {
/* 小屏：侧栏收为抽屉，主区占满视口
抽屉 z-index(90) 必须高于内容区所有浮层——sticky 筛选框 .toolbar(z:60)、
详情顶栏(z:55)、通知面板(z:50)——否则打开后菜单会被筛选框盖住无法操作；
遮罩(.sidebar-mask,z:80)盖住正文，点击空白处即可收起 */
.sidebar { position: fixed; height: 100vh; z-index: 90; margin-left: -264px; box-shadow: none; }
.sidebar.open { margin-left: 0; box-shadow: var(--elev-raised); }
}
@media (max-width: 767px) {
/* 手机/小平板：单列化 + 表格卡片化，杜绝挤压 */
.content { padding: 8px; padding-bottom: calc(var(--actionbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-3)); }
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.user-chip .role-tag { display: none; }
.notify-panel { width: calc(100vw - 20px); right: 10px; }
.overview-title { font-size: var(--text-xl); }
/* 概览头部允许换行（标题 + 标签 + 返回按钮分行排列） */
.overview-head { flex-wrap: wrap; }
.overview-head .btn { margin-left: 0; }
.group-body { padding: var(--space-1) var(--space-3) var(--space-3); }
/* 详情键值网格 → 强制单列（minmax(0,1fr) 避免 230px 下限溢出小屏） */
.detail-grid { grid-template-columns: minmax(0, 1fr); }
/* 概览字段：手机 3 列×2 行（保持紧凑不换行错位） */
.overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
/* 步骤条：胶囊紧凑（宽度自适应，窄屏横向滚动） */
.steps-bar { gap: 4px; padding: 3px 2px; margin-bottom: 6px; }
.content.detail-page { padding-top: 0; }
.step-pill { min-width: 44px; padding: 4px 6px; font-size: 11px; }
/* 详情只读表格 → 卡片式（td data-label 左键右值，宽度自适应不溢出） */
table.grid.read-card { min-width: 0; }
table.grid.read-card thead { display: none; }
table.grid.read-card, table.grid.read-card tbody, table.grid.read-card tr, table.grid.read-card td { display: block; }
table.grid.read-card tr {
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: var(--surface-2);
padding: var(--space-1) var(--space-2);
margin-bottom: var(--space-2);
}
table.grid.read-card td {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
border-bottom: 1px solid var(--border-soft); padding: 6px 4px; text-align: right;
}
table.grid.read-card td:last-child { border-bottom: none; }
table.grid.read-card td::before {
content: attr(data-label);
color: var(--muted); font-size: var(--text-xs); text-align: left; flex-shrink: 0;
}
#step-form .btn, .step-form .btn { min-height: var(--touch-target); }
/* ===== 第四期：工单列表手机卡片化（表格 → 卡片） ===== */
table.grid.ord-cards { min-width: 0; border: 0; background: transparent; }
table.grid.ord-cards thead { display: none; }
table.grid.ord-cards, table.grid.ord-cards tbody, table.grid.ord-cards tr, table.grid.ord-cards td { display: block; }
table.grid.ord-cards tr {
border: 1px solid var(--border-soft); border-radius: var(--radius-md);
background: var(--surface-2); padding: var(--space-2); margin-bottom: var(--space-2);
position: relative;
}
table.grid.ord-cards td {
/* U1：卡片内改用「标签列 + 值列」网格，值可换行且占满整行宽度
—— 之前 flex + nowrap 会把长地址截断；改 flex-wrap 又会被压成一字一行 */
display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start;
border-bottom: 1px dashed var(--border-soft); padding: 6px 2px; text-align: left; font-size: var(--text-sm);
white-space: normal; overflow: visible; text-overflow: clip; max-width: none; word-break: break-word;
}
table.grid.ord-cards td:last-child { border-bottom: none; }
table.grid.ord-cards td::before { content: attr(data-l); color: var(--muted); font-size: var(--text-xs); }
/* 无标签的单元格（勾选框 / 操作列）不再占标签列 */
table.grid.ord-cards td:not([data-l]) { grid-template-columns: minmax(0, 1fr); }
table.grid.ord-cards td:not([data-l])::before { content: none; }
table.grid.ord-cards td.ord-chk { position: absolute; top: 8px; right: 8px; border: 0; padding: 0; display: block; }
table.grid.ord-cards td.ord-chk::before { content: none; }
table.grid.ord-cards td.ord-chk input { width: 20px; height: 20px; }
table.grid.ord-cards td.ord-ops { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
table.grid.ord-cards td.ord-ops::before { content: none; }
table.grid.ord-cards td.ord-ops .btn { min-height: var(--touch-target); flex: 1 1 auto; }
table.grid.ord-cards tbody tr td:last-child .btn { min-height: var(--touch-target); }
table.grid.ord-cards tfoot td { display: block; }
/* 关键：卡片模式必须覆盖上面的紧凑表规则（≤767px 的 td max-width:110px / ≤1439px 的 150px），
否则每个 td 被限宽 110px，值与按钮会被挤成一字一行 */
table.grid.ord-cards tbody td,
table.grid.read-card tbody td { max-width: none; }
/* 标签/链接等行内元素不要被网格拉伸成整行色条 */
table.grid.ord-cards tbody td > .tag,
table.grid.ord-cards tbody td > a,
table.grid.read-card tbody td > .tag { justify-self: start; }
}
/* ========== 第四期：工单抽屉分步 ========== */
.ord-tl-sep { color: var(--muted); font-style: normal; }
.ord-desc { background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 10px; font-size: var(--text-sm); line-height: 1.6; }
.ord-batch { gap: 8px; }
.ord-chk input { width: 16px; height: 16px; }
@media (max-width: 767px) {
}
/* ========== 第四期：新建工单向导 ========== */.wiz-bar {
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
padding: 6px 8px; margin-bottom: 10px; border-radius: var(--radius-md);
background: var(--surface-2); font-size: var(--text-xs);
}
.wiz-dot { padding: 3px 9px; border-radius: 999px; background: var(--bg-soft, #eef2f7); color: var(--muted); }
.wiz-dot.done { background: #dcfce7; color: #166534; }
.wiz-dot.cur { background: #1d4ed8; color: #fff; font-weight: 600; }
.wiz-step { min-height: 60px; }
@media (max-width: 767px) {
.wiz-bar { font-size: 11px; gap: 2px; }
.wiz-dot { padding: 2px 6px; }
/* 详情页分组：手机端头部落行固定、折叠态更紧凑，减少首屏长度 */
.detail-groups > details.group > summary.group-head {
position: sticky; top: 0; z-index: 5; background: var(--surface);
min-height: var(--touch-target); display: flex; align-items: center;
}
.detail-groups > details.group:not([open]) > summary.group-head { border-bottom: 1px solid var(--border-soft); }
.detail-groups > details.group > summary.group-head::marker { color: var(--muted); }
}
/* 批量打印：每张工单分页 */
.print-page + .print-page { page-break-before: always; break-before: page; }
/* ========== 工单打印（A4，排版与详情一致） ========== */
.print-only { display: none; }
@media print {
@page { size: A4; margin: 10mm; }
html, body { background: #fff !important; }
body * { visibility: hidden !important; }
#rsp-print-area, #rsp-print-area * { visibility: visible !important; }
#rsp-print-area {
display: block !important; position: absolute; left: 0; top: 0; width: 100%;
background: #fff; color: #000; font-size: 11px; line-height: 1.35;
}
.print-logos { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.print-logos img { height: 40px; width: auto; object-fit: contain; }
.print-logos img:last-child { height: 27px; } /* 右侧(迈瑞)LOGO 缩小 1/3 */
.print-head { display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid #333; padding-bottom: 5px; margin-bottom: 8px; }
.print-head .print-title { font-size: 15px; font-weight: 700; }
.print-org { font-size: 10px; color: #555; }
.print-date { font-size: 10px; color: #555; }
.print-group { border: 1px solid #aaa; border-radius: 3px; margin-bottom: 6px; page-break-inside: avoid; }
.print-gtitle { background: #f1f1f1; font-weight: 600; font-size: 11px; padding: 3px 8px; border-bottom: 1px solid #aaa; }
.print-gbody { padding: 5px 8px 7px; }
.print-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 12px; }
.print-grid .detail-item { display: flex; align-items: baseline; gap: 3px; font-size: 11px; min-width: 0; }
.print-grid .detail-item.addr2 { grid-column: span 2; }
.print-grid .k { color: #555; white-space: nowrap; flex-shrink: 0; min-width: 58px; padding-right: 2px; }
/* 字段值不换行（描述类在 .print-desc 中允许换行） */
.print-grid .v { font-weight: 600; white-space: nowrap; }
/* 描述类字段：整行展示，字段标签与 grid 字段样式统一 */
.print-desc { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; font-size: 11px; white-space: normal; word-break: break-word; }
.print-desc .k { color: #555; flex-shrink: 0; white-space: nowrap; min-width: 58px; padding-right: 2px; }
.print-desc .v { flex: 1; min-width: 0; font-weight: 600; white-space: pre-wrap; }
.print-empty { color: #666; font-size: 11px; }
.print-tab { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 4px; }
.print-tab th, .print-tab td { border: 1px solid #bbb; padding: 2px 5px; text-align: left; }
.print-tab th { background: #f4f4f4; }
/* 客户验收签字：置于所有分组方框「之外」的模板最下方；等比缩放（只给上限，不给双向尺寸）不变形 */
.print-sign-out { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; page-break-inside: avoid; }
.print-sign-out .print-sign-cap { font-size: 11px; color: #555; white-space: nowrap; flex-shrink: 0; }
.print-sign-out img { display: block; width: auto; height: auto; max-height: 96px; max-width: 68%;
object-fit: contain; border-bottom: 1px solid #999; padding-bottom: 2px; }
}
/* ========== 工单详情：单页大表单（v6，字段级可编辑） ========== */
.od-sheet{background:#fff;border:1px solid var(--border);border-radius:0;overflow:hidden}
.od-mod{border-bottom:1px solid var(--border-soft)}
.od-mod:last-child{border-bottom:0}
.od-mod-h{display:flex;align-items:center;gap:7px;padding:5px 12px;background:var(--surface-2);
border-bottom:1px solid var(--border-soft);font-size:11.5px;font-weight:700;color:#4B5563}
.od-mod-h::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--accent);flex:0 0 3px}
.od-mod-h .r{margin-left:auto;display:flex;gap:9px;align-items:center;font-weight:400;font-size:10.5px;color:var(--muted)}
.od-mod-b{padding:7px 12px 9px}
.od-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:5px 9px}
.od-f{min-width:0}
.od-f > label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-f .v{height:25px;display:flex;align-items:center;font-size:11.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-f .v.mut{color:var(--muted)}
.od-f input,.od-f select,.od-f textarea{width:100%;height:var(--ctl-h-sm);border:1px solid var(--border);border-radius:6px;background:#fff;
padding:0 7px;font:inherit;font-size:11.5px;color:var(--fg);box-sizing:border-box}
/* 详情页组合框与同区文本框完全等高（全局 .combo-input / #step-form 规则在此场景收紧）
注意：#step-form 前缀与 "#step-form .combo .combo-input" 同权重，靠书写顺序（本块在后）生效 */
.od-f .combo-input,
#step-form .od-f .combo-input{height:var(--ctl-h-sm);min-height:var(--ctl-h-sm);font-size:11.5px;border-radius:6px;padding:0 22px 0 7px}
/* 详情页字段控件铺满所在列（覆盖遗留 #step-form 的 width:auto 规则） */
#step-form .od-f input, #step-form .od-f select, #step-form .od-f textarea{width:100%;min-width:0;max-width:100%}
.od-f textarea{height:auto;min-height:44px;padding:5px 7px;line-height:1.4;resize:vertical}
.od-f input:focus,.od-f select:focus,.od-f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.od-f.spanall{grid-column:1/-1}
.od-f.span2{grid-column:span 2}
.od-add{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--accent);
border:1px solid var(--accent);border-radius:6px;padding:1px 8px;cursor:pointer;background:#fff;height:21px}
.od-add:hover{background:var(--accent-soft)}
.od-add .icon-14{width:12px;height:12px}
.od-sub-h{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);margin-bottom:4px}
.od-sub-h .od-add{margin-left:auto}
/* 子表（服务时间 / 配件 / 收费明细）紧凑化 */
#st-list table,#pt-list table,#ci-list table{width:100%;border-collapse:collapse;font-size:11px}
#st-list th,#pt-list th,#ci-list th{background:var(--surface-2);color:var(--muted);font-weight:600;text-align:left;
padding:4px 6px;border-bottom:1px solid var(--border);font-size:10.5px;white-space:nowrap}
#st-list td,#pt-list td,#ci-list td{padding:3px 4px;border-bottom:1px solid var(--border-soft);font-size:11px}
#st-list input,#pt-list input,#ci-list input,#st-list select,#pt-list select,#ci-list select{
width:100%;height:23px;border:1px solid var(--border);border-radius:5px;padding:0 5px;font:inherit;font-size:11px;
background:#fff;box-sizing:border-box}
@media (max-width:640px){ .od-cols{grid-template-columns:1fr} .od-f.span2,.od-f.spanall{grid-column:1/-1} }
/* ========== 工单详情 v6：概览头（方角吸顶 + 胶囊右置垂直居中） ========== */
.detail-topbar.od-headcard{position:sticky;top:0;z-index:20;background:#fff;border:1px solid var(--border);
border-radius:0;margin:0 0 10px;padding:0;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.odhwrap{display:flex;align-items:center;gap:14px;padding:8px 12px}
.odhleft{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.odh-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.odh-top .no{font-size:14px;font-weight:800}
.odh-top .ov-report{font-size:10.5px;color:var(--muted)}
.odh-org{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepsinline{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.stepsinline .steps-bar{margin:0;padding:0;background:transparent}
@media (max-width:1100px){
.odhwrap{flex-direction:column;align-items:stretch;gap:8px}
.stepsinline{justify-content:flex-start}
}
/* ========== 列表页工具栏（筛选与功能区整合 · 紧凑统一 v2） ========== */
.list-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;background:#fff;border:1px solid var(--border);
border-radius:0;padding:7px 10px;margin-bottom:10px;position:sticky;top:0;z-index:12}
/* 电脑端功能区始终一行；批量条允许换行 */
.list-toolbar.lt-batch{flex-wrap:wrap;background:var(--surface-2);border-color:var(--accent-soft)}
.list-toolbar.hidden{display:none}
/* 全字段搜索：与筛选胶囊、按钮同高（28px） */
.lt-search{display:flex;align-items:center;gap:6px;flex:2 1 0;min-width:150px;height:var(--ctl-h-lt);
border:1px solid var(--border);border-radius:7px;background:#fff;padding:0 9px}
/* 文本搜索框：聚焦不显示蓝色边框（按需求，仅改这一处） */
.lt-search:focus-within{border-color:var(--border);box-shadow:none}
.lt-search svg{width:14px;height:14px;color:var(--muted);flex:0 0 14px}
.lt-search input{flex:1;min-width:0;height:calc(var(--ctl-h-lt) - 2px);border:0;outline:none;background:transparent;font:inherit;
font-size:11.5px;color:var(--fg)}
.lt-search input::placeholder{color:var(--muted)}
/* 电脑端：筛选区单行不换行 */
.lt-filters{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;overflow:hidden}
/* 筛选胶囊：外层定宽（自适应弹性），内层 combo 撑满 → 文字不会被压没 */
/* 筛选胶囊：随宽度弹性分配（等分剩余空间），最小宽度统一 100px 保证文字可读 */
.lt-chip{display:inline-flex;align-items:center;flex:1 1 0;min-width:100px;height:28px}
.lt-chip.lt-wide{flex:1.3 1 0;min-width:100px}
.lt-chip .combo{width:100%;min-width:0;flex:1 1 auto}
.lt-chip .combo-input{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:var(--ctl-h-lt);min-height:var(--ctl-h-lt);border:1px solid transparent;border-radius:999px;
background:var(--surface-3);font-size:11.5px;color:var(--muted);padding:0 26px 0 11px;cursor:pointer;
box-sizing:border-box;transition:background .12s,color .12s,border-color .12s}
.lt-chip .combo-input:hover{background:var(--surface-3);color:var(--fg)}
/* 筛选框聚焦/选中不显示蓝色边框（仅底色加深） */
.lt-chip .combo-input:focus,.lt-chip .combo-input:active,.lt-chip .combo-input:focus-visible{
border-color:transparent!important;background:var(--surface-3)!important;color:var(--fg)!important;
box-shadow:none!important;outline:none!important}
/* 兼容：旧 .toolbar 结构下的筛选框同样不显示蓝框 */
.toolbar .combo-input:focus{border-color:var(--border)!important;box-shadow:none!important;outline:none!important}
.lt-chip .combo-btn{right:8px;color:var(--muted)}
.lt-chip .combo-clear{right:22px}
.lt-chip .combo-count{background:var(--accent);color:#fff;border-radius:999px;font-size:10px;padding:0 5px;margin-left:4px}
.lt-chip .combo-list{min-width:200px}
.lt-clear{height:var(--ctl-h-lt);border:1px dashed var(--border);border-radius:999px;background:transparent;font-size:11.5px;white-space:nowrap;
color:var(--muted);padding:0 11px;cursor:pointer;flex:0 0 auto}
.lt-clear:hover{color:var(--danger);border-color:var(--danger)}
.lt-clear.hidden{display:none}
.lt-actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto;white-space:nowrap}
.lt-actions .btn{height:var(--ctl-h-lt);min-height:var(--ctl-h-lt)}
.lt-sel{font-size:11.5px;color:var(--muted);margin-right:2px}
/* 下拉面板：统一圆角阴影与紧凑行高（列表与表单共用） */
.combo-list{border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 26px rgba(15,23,42,.12);
background:#fff;padding:6px;z-index:40}
.combo-search{padding:2px 2px 6px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.combo-search-input{height:var(--ctl-h-act);min-height:var(--ctl-h-act);border:1px solid var(--border);border-radius:7px;font-size:11.5px;padding:0 8px}
.combo-options{padding:0;max-height:240px}
.combo-options li{border-radius:7px;padding:5px 9px;font-size:11.5px;margin-bottom:1px}
.combo-foot{border-top:1px solid var(--border-soft);margin-top:4px;padding-top:6px}
.combo-foot-btn{height:24px;border-radius:6px;font-size:11px}
/* 一行放不下四个筛选胶囊时折叠为多行：实测内容区 <842px 时胶囊已卡到最小宽度，
再窄就会被 .lt-filters{overflow:hidden} 裁掉（1050px 视口裁 44px、1000px 裁 90px）。
故折叠阈值提到 1100px 视口（侧栏展开时内容区 868px，仍有 26px 余量），保证"要么完整一行、要么整齐换行" */
@media (max-width:1100px){
/* 折叠布局：第一行整行搜索、筛选胶囊两列自适应、动作按钮独立一行右对齐（保留吸顶） */
.list-toolbar{flex-wrap:wrap;row-gap:6px}
.lt-search{flex:1 1 100%;min-width:0}
.lt-filters{width:100%;flex:1 1 100%;flex-wrap:wrap;overflow:visible;row-gap:6px}
.lt-chip{flex:1 1 46%;min-width:0}
.lt-chip.lt-wide{flex:1 1 46%;min-width:0}
.lt-clear{margin-left:auto}
.lt-actions{width:100%;flex:1 1 100%;justify-content:flex-end;margin-left:0}
}
@media (max-width:900px){
/* 小屏/触屏：取消吸顶 + 收紧内边距（折叠规则已在上面的 1100px 断点生效） */
.list-toolbar{position:static;padding:6px 8px}
}
@media (max-width:560px){
.lt-chip,.lt-chip.lt-wide{flex:1 1 100%}
}
/* ========== 工单详情 v6：单页表单布局（表单常驻主内容区 · 全宽） ========== */
/* 概览区与窗口顶部贴合；底部操作条冻结时与窗口底部贴合（容器上下不留内边距） */
.content.detail-page{padding-top:0;padding-bottom:0}
.order-detail-layout{grid-template-columns:minmax(0,1fr)!important}
/* 内容末尾保留呼吸空间（操作条吸底不占位，避免最后一行被压住） */
.odl-main{padding-bottom:12px}
/* 概览头：服务子类标签（中性色） */
.tag-type{background:#eef2f7;color:#475569;font-weight:600}
.odl-rail{display:none!important}
/* 表单容器去卡片化：由 .od-sheet 自身提供唯一的白底边框，避免双框 */
.order-detail-layout .form-mount{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
border-radius:0!important;min-height:0}
.order-detail-layout .form-mount > .step-mount > #step-form{display:block}
/* 操作备注：与底部操作按钮同处一条 */
.od-actions{position:sticky;bottom:0;z-index:18;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
padding:7px 12px;background:#fff;border:1px solid var(--border);box-shadow:0 -2px 8px rgba(15,23,42,.05)}
.od-actions-left{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.od-actions-hint{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-actions-hint .icon-16{flex:0 0 16px;color:var(--muted)}
.od-comment{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:140px}
.od-comment label{flex:0 0 auto;margin:0;font-size:10.5px;color:var(--muted)}
.od-comment input{flex:1;min-width:0;height:var(--ctl-h-act);border:1px solid var(--border);border-radius:6px;padding:0 8px;font:inherit;font-size:11.5px}
.od-comment input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.od-actions-btns{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:nowrap}
.od-actions-ro{background:var(--surface-2)}
/* 节点调整内嵌底部操作条（紧凑，替代原顶部独立条） */
.od-actions .op-adjust{display:flex;align-items:center;gap:6px;padding:0;margin:0;background:transparent;border:0;border-radius:0}
.od-actions .op-adjust-label{font-size:10.5px;color:var(--muted)}
.od-actions .op-adjust select{width:auto;min-width:96px;height:var(--ctl-h-act);min-height:var(--ctl-h-act);font-size:11.5px;border-radius:6px;background:#fff;padding:0 4px}
.od-actions .op-adjust .btn{height:var(--ctl-h-act);min-height:var(--ctl-h-act)}
/* 附件资料：上传区 + 已有附件清单 */
.od-atts{margin-top:7px;display:flex;flex-direction:column}
.od-att{display:flex;align-items:center;gap:9px;padding:3px 0;border-bottom:1px dashed var(--border-soft);font-size:11.5px}
.od-att:last-child{border-bottom:0}
.od-att a{display:inline-flex;align-items:center;gap:4px;max-width:46%;color:var(--accent);text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-att a:hover{text-decoration:underline}
.od-att a .icon-14{flex:0 0 14px}
.od-att-meta{min-width:0;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-att-del{flex:0 0 auto;margin-left:auto;color:var(--muted);cursor:pointer;font-size:10.5px}
.od-att-del:hover{color:var(--danger)}
.od-mut{padding:2px 0;font-size:11px;color:var(--muted)}
/* 只读子表（无编辑权限 / 已完成工单的明细展示） */
.od-ro-tbl{overflow-x:auto}
.od-ro-tbl table{width:100%;border-collapse:collapse;font-size:11px}
.od-ro-tbl th{padding:4px 6px;background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:10.5px;font-weight:600;color:var(--muted);text-align:left;white-space:nowrap}
.od-ro-tbl td{max-width:220px;padding:3px 6px;border-bottom:1px solid var(--border-soft);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 子表（可编辑）：表格化 · 行内直接编辑 · 「删除」文字链接 */
#st-list,#pt-list,#ci-list{overflow-x:auto}
/* 列表行点击（全局约定）：整行可点，按钮/链接/勾选框不触发 */
tr[data-row-kind]{cursor:pointer}
tr[data-row-kind]:hover>td{background:var(--surface-2)}
/* 折后实付与折后应收不一致时的常驻提示 */
.od-hint-warn{color:var(--warn);font-size:10.5px;line-height:1.35}
.od-tbl{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
#st-list .od-tbl{min-width:560px}
#pt-list .od-tbl{min-width:720px}
#ci-list .od-tbl{min-width:760px}
.od-tbl th{padding:4px 6px;background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:10.5px;font-weight:600;color:var(--muted);text-align:left;white-space:nowrap}
.od-tbl td{padding:3px 4px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.od-tbl tr:last-child td{border-bottom:0}
.od-tbl input,.od-tbl select{width:100%;height:var(--ctl-h-xs);border:1px solid var(--border);border-radius:5px;
padding:0 5px;font:inherit;font-size:11px;background:#fff;box-sizing:border-box}
.od-tbl input:focus,.od-tbl select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.od-tbl .od-td-idx{color:var(--muted);text-align:center;font-size:10.5px}
.od-tbl .od-td-calc{white-space:nowrap;color:var(--fg)}
.od-tbl .od-td-act{text-align:center}
.od-del{color:var(--muted);cursor:pointer;font-size:10.5px;white-space:nowrap}
.od-del:hover{color:var(--danger);text-decoration:underline}
/* 签字图片（与审核意见/客户验收签字同一行，置于行末） */
.od-signimg img{display:block;max-width:100%;max-height:64px;border:1px solid var(--border);border-radius:6px;background:#fff}
#step-form .sign-box{height:96px;border-radius:6px}
@media (max-width:640px){
.od-actions{position:static;flex-wrap:wrap}
.od-actions-left,.od-comment{flex:1 1 100%}
.od-actions-btns{margin-left:0;width:100%;flex-wrap:wrap}
.od-att{flex-wrap:wrap}
.od-att a{max-width:100%}
.od-att-del{margin-left:0}
}
/* ========== 全局只读/禁用控件统一（全站）==========
* 只读/禁用字段一律：无边框、无底色、无聚焦描边与文本光标；
* 仍可用鼠标拖选复制文本，但不进入 Tab 顺序（tabindex 由 App.sweepReadonly 统一处理）。
*/
/* 注意：组合框（.combo-input/.combo-field）的 input 天生 readonly 但**可交互**，
必须排除，否则会把所有下拉框的边框/底色一并清掉。 */
input[readonly]:not(.combo-input):not(.combo-field), textarea[readonly],
input:disabled:not(.combo-input):not(.combo-field), textarea:disabled, select:disabled {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
caret-color: transparent;
}
input[readonly]:not(.combo-input):not(.combo-field):focus, textarea[readonly]:focus,
input:disabled:not(.combo-input):not(.combo-field):focus, textarea:disabled:focus, select:disabled:focus {
outline: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* 可交互的组合框保持正常外观与可点击；仅「被禁用/置灰」的组合框才无边框、不可点 */
.combo-input[readonly]:not([disabled]) { cursor: pointer; }
.combo-disabled .combo-input, .combo-input[disabled] {
border-color: transparent !important; background: var(--card) !important;
box-shadow: none !important; cursor: not-allowed !important; color: var(--fg);
}
/* 子表「添加行」禁用态（如未收费时的收费明细） */
.od-add-disabled { opacity: .4; cursor: not-allowed !important; pointer-events: none; }
/* ========== 子表（服务时间/配件/收费）：单元格控件宽度 = 列宽 ==========
* 注意：#step-form 内的 input:not([type]) 规则（width:auto）优先级更高，
* 必须用 #step-form .od-tbl 前缀覆盖，否则无 type 的输入（如「收费描述」）会按内容宽度显示。 */
.od-tbl { table-layout: fixed; width: 100%; }
#step-form .od-tbl td input, #step-form .od-tbl td select, #step-form .od-tbl td textarea,
.od-tbl td input, .od-tbl td select, .od-tbl td textarea {
width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.od-tbl td.od-td-calc, .od-tbl td.od-td-idx { text-align: center; }
/* 子表必填列表头星号 */
.od-tbl th .req { margin-left: 2px; }
/* ==========================================================================
U0 · 全站 UI 一致性基础设施（2026-09-14）
--------------------------------------------------------------------------
这批规则只做两件事：
① 补齐「页面在用、CSS 里却不存在」的类（此前样式静默失效）
② 提供统一的分页器 / 分段控件 / 显示层弱化文本等公共样式
原则：只追加、不改既有选择器的语义；旧类名（.toolbar/.flt-cell/.att-nav .view-btn）
保留为别名，迁移期间两者都能用。
========================================================================== */
/* ---------- ① 分页器（工单页脚用，之前靠内联 gap，无类定义） ---------- */
td.list-foot .lf-right .lf-pager { gap: 6px; }
td.list-foot .lf-right .lf-pager .lf-cur { margin: 0 4px; color: var(--muted); font-size: 12px; }
td.list-foot .lf-right .lf-pager .btn { height: 22px; min-height: 22px; padding: 0 8px; font-size: 11px; }
/* ---------- ② 通用文本与键值展示（原本未定义的类） ---------- */
.muted { color: var(--muted); }
.loc-muted { color: var(--text-light); font-size: 11px; }
.sec-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
color: var(--fg); margin: 10px 0 6px; }
.sec-title .r { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; }
.kv-grid .k { color: var(--muted); font-size: 11px; }
.kv-grid .v { color: var(--fg); font-size: 12px; word-break: break-all; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
/* ---------- ③ 预设字段页（字典）原本未定义的类 ---------- */
/* 预设字段行：**不要**给它加 display:flex —— 它是 ，一旦变成 flex 容器，
单元格就会脱离表格列对齐（表头 5 列 vs 数据行挤到左侧），选项 chip 也会被压成一列。
这里只保留拖拽光标这一无害样式；排序仍由 .dragging/.drag-over 表达。 */
.dict-type-row { cursor: grab; }
.dict-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* ---------- ④ 银行对账等历史「data-table」：补齐表格基础样式 ----------
标记为 data-table 的表此前完全没有样式（表头挤成一行连字）。
这里等价于 table.grid 的最小集合，不改页面即可恢复可读性；后续批次会统一改为 .grid。 */
table.data-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 0; }
table.data-table th { background: var(--surface-2); color: var(--text-light); font-weight: 600;
text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle;
color: var(--fg); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
table.data-table tr:hover td { background: var(--surface-3); }
table.data-table th.op-cell, table.data-table td.op-cell { position: sticky; right: 0; background: var(--surface);
white-space: nowrap; max-width: none; }
table.data-table th.op-cell { background: var(--surface-2); z-index: 6; }
/* ---------- ⑤ 通用表单控件类（.form-control 全站 93 处在用、此前无定义） ---------- */
.form-control { height: var(--ctl-h); min-height: var(--ctl-h); width: 100%; box-sizing: border-box;
padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
font: inherit; font-size: 12px; color: var(--fg); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.form-control-sm { height: var(--ctl-h-xs); min-height: var(--ctl-h-xs); font-size: 11px; padding: 0 7px; }
textarea.form-control { height: auto; min-height: 64px; padding: 6px 9px; line-height: 1.5; resize: vertical; }
/* 工具栏内的控件不占满整行 */
.toolbar .form-control, .list-toolbar .form-control { width: auto; min-width: 110px; }
/* ---------- ⑥ 统计卡（看板与财务两套实现合并到同一外观） ---------- */
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 11.5px; color: var(--muted); }
.kpi-value { font-size: 20px; font-weight: 700; color: var(--fg); }
.kpi-sub { font-size: 11px; color: var(--muted); }
/* ---------- ⑦ 财务附件区与报销明细行（原本未定义） ---------- */
.fin-att-block { margin-top: 8px; }
.fin-att-box { display: flex; flex-direction: column; gap: 3px; }
.fin-att-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 0; }
.fin-att-list { display: flex; flex-direction: column; gap: 3px; }
.fin-it-row, .fin-item-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-it-cat { flex: 0 0 118px; width: 118px; }
.fin-it-desc { flex: 1 1 160px; width: auto; min-width: 120px; }
.fin-it-amt { flex: 0 0 110px; width: 110px; }
.fin-it-date { flex: 0 0 140px; width: 140px; }
.fin-it-del { flex: 0 0 auto; }
.bk-map { display: flex; flex-direction: column; gap: 6px; }
/* ---------- ⑧ 工单流转记录区 / 附件上传挂载点 / 行勾选框（JS 钩子，补最小样式） ---------- */
.flow-section { margin-top: 10px; }
.attach-upload-slot { display: block; }
.o-row-chk { width: 16px; height: 16px; }
.notify-btn { position: relative; }
/* ---------- ⑨ 统一分段控件（页签）：.seg-nav/.seg-btn ----------
.sub-tabs/.sub-tab（客户/财务/权限）与 .att-nav .view-btn（考勤/财务借用）两种历史写法
都保留，新页面统一用 .seg-nav/.seg-btn；三种外观在此收敛为同一视觉。 */
.seg-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--radius-md); flex-wrap: wrap; }
.seg-btn { height: var(--ctl-h-lt); min-height: var(--ctl-h-lt); padding: 0 12px; border: 1px solid transparent;
border-radius: var(--radius-sm); background: transparent; color: var(--fg); font: inherit; font-size: 12px;
cursor: pointer; white-space: nowrap; }
.seg-btn:hover { background: var(--surface-3); }
.seg-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600; }
@media (max-width: 560px) { .seg-nav { width: 100%; } .seg-btn { flex: 1 1 auto; text-align: center; } }
/* ---------- ⑩ 弹窗内的标准工具条与表格（U1 起：弹窗列表也用工单同款外壳） ---------- */
.list-toolbar.lt-in-modal { border-radius: var(--radius-sm); margin-bottom: 8px; padding: 4px 6px; }
.modal .list-toolbar { position: static; }
/* 弹窗内表格高度由弹窗自身决定：避免套用页面级 100vh 公式在小屏被裁 */
.modal .table-wrap { max-height: 58vh; }
@media (max-width: 560px) { .modal .table-wrap { max-height: 62vh; } }
/* ---------- ⑪ 预设字段页（U2）：字段名 / 字段编码列 ---------- */
.dict-name { font-weight: 600; white-space: nowrap; }
.dict-code { color: var(--text-light); font-family: var(--font-mono); font-size: 11px; }
/* JS 钩子类（App.fillCustomerInfo 通过它回填客户地址）：无自身样式，保留占位以便静态检查可识别 */
.js-cust-addr { min-width: 0; }
/* ---------- ⑫ U3：胶囊内的日期控件 + 弹窗子表 ---------- */
/* 日期范围与「全部人员」并排时使用；高度与 .lt-chip 一致，去掉原生边框融入胶囊 */
.lt-chip.lt-date { flex: 0 0 132px; min-width: 118px; }
.lt-chip.lt-date input { width: 100%; height: var(--ctl-h-lt); border: 1px solid transparent;
border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 11.5px;
color: var(--fg); padding: 0 6px; }
.lt-chip.lt-date input:hover { background: var(--surface-3); }
.lt-chip.lt-date input:focus { outline: none; border-color: var(--accent); background: var(--surface);
box-shadow: 0 0 0 2px var(--accent-soft); }
@media (max-width: 1100px) { .lt-chip.lt-date { flex: 1 1 46%; } }
/* 弹窗内子表：容器内滚动 + 单元格不再 100vh 撑高 */
.at-sub-wrap { max-height: 34vh; margin-bottom: 8px; }
.at-sub { font-size: 11.5px; }
.at-sub td { max-width: none; }
/* ---------- ⑬ U3：AI 工作台（原先整页内联样式，收敛为 .ai-* 类） ---------- */
.ai-wrap { display: flex; flex-direction: column; height: calc(100vh - 74px); max-width: 980px; margin: 0 auto; }
.ai-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ai-head { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--border); }
.ai-status { font-size: 11px; color: var(--text-light); }
.ai-tools { display: flex; gap: 8px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.ai-tools .lt-chip { flex: 1 1 auto; max-width: 420px; }
/* ==========================================================================
AI 工作台：快速入口条（2026-09-17 新增）
按当前账号权限渲染系统全部模块入口；页面撑满可用高度
========================================================================== */
.ai-wrap { max-width: none; width: 100%; height: calc(100vh - 60px); }
.ai-quick {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
padding: 7px 12px;
margin-bottom: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.ai-quick.is-flex { display: flex; }
.aiq-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aiq-gname {
flex: 0 0 auto; font-size: 10.5px; color: var(--text-light);
padding: 1px 6px; background: var(--surface-3); border-radius: 4px; white-space: nowrap;
}
.aiq-items { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.aiq-item {
display: inline-flex; align-items: center; gap: 4px;
height: 24px; padding: 0 9px; border-radius: 999px;
font-size: 11.5px; color: var(--fg); text-decoration: none; white-space: nowrap;
border: 1px solid var(--border); background: var(--surface-2);
}
.aiq-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.aiq-item svg { width: 13px; height: 13px; flex: 0 0 13px; }
.aiq-empty { font-size: 12px; color: var(--text-light); padding: 2px 0; }
/* 窄屏：入口条可换行、聊天区仍占满剩余高度 */
@media (max-width: 1100px) {
.ai-wrap { height: auto; }
.ai-quick { flex-wrap: wrap; }
}
.ai-chat { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg); }
.ai-foot { padding: 8px 14px; border-top: 1px solid var(--border); }
.ai-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ai-input-row { display: flex; gap: 8px; }
.ai-input { flex: 1; min-height: 48px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border);
border-radius: var(--radius-md); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-sm); }
.ai-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.ai-send { min-height: 48px; }
.ai-hint { font-size: 11px; color: var(--text-light); margin-top: 6px; }
.ai-msg { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.ai-msg-user { justify-content: flex-end; }
.ai-bubble { max-width: 88%; white-space: pre-wrap; word-break: break-word; padding: 9px 12px;
border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.6;
background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.ai-bubble-user { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.ai-card { max-width: 90%; border: 1px solid var(--accent); border-left: 4px solid var(--accent);
border-radius: var(--radius-md); padding: 10px 12px; background: var(--accent-soft); font-size: var(--text-sm); }
.ai-card-h { font-weight: 600; margin-bottom: 4px; }
.ai-card-b { white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.ai-card-ops { display: flex; gap: 8px; margin-top: 8px; }
/* ---------- ⑭ U4：报表看板 / 财务语义色辅助类 ---------- */
.overdue-hours { color: var(--danger); font-weight: 700; }
.fin-out { color: var(--danger); }
.fin-in { color: var(--success); }
.fin-warn { color: var(--warn); }
/* ---------- ⑰ 看板月度趋势图（2026-09-15） ---------- */
.dash-sub { margin-left: 6px; font-size: 10.5px; font-weight: 500; color: var(--text-light); }
/* 看板月度趋势图（2026-09-17 重构：绘图区 + 独立坐标轴行）
旧结构把「数值/柱/月份」都塞进同一列、靠 align-items:flex-end 对齐，
导致值为 0 时那根 width:100% 的 2px 柱变成横贯全宽的细线，且月份与柱子对不齐。
新结构：.dash-trend 纵向两行 —— 上为绘图区（柱），下为坐标轴行（月份），
两行的列数与列宽算法完全一致（flex:1 1 0 + 同 gap），因此标签天然对齐柱中心。 */
.dash-trend { display: flex; flex-direction: column; }
.dash-trend-plot {
flex: 1 1 auto;
display: flex;
align-items: flex-end;
gap: 3px;
min-height: 0;
border-bottom: 1px solid var(--border); /* X 轴基线 */
}
.dash-trend-col {
flex: 1 1 0;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
overflow: hidden;
}
.dash-trend-val { font-size: 10px; font-weight: 600; white-space: nowrap; color: var(--fg); flex: 0 0 auto; }
.dash-trend-bar { width: 72%; border-radius: 3px 3px 0 0; flex: 0 0 auto; }
.dash-trend-axis { display: flex; gap: 3px; padding-top: 3px; flex: 0 0 auto; }
.dash-trend-x {
flex: 1 1 0;
min-width: 0;
font-size: 9px;
line-height: 1.15;
color: var(--text-light);
text-align: center;
white-space: nowrap;
overflow: visible;
transform-origin: top center;
}
/* 标签比列宽时斜排（JS 测量后加 .x-tilt），避免相邻月份互相挤压。
⚠ transform: rotate 不改变布局盒 → 必须手动留出斜排占用的高度，
否则旋转出去的标签会溢出面板被 overflow:hidden 裁掉（已踩过）。 */
.dash-trend-axis.x-tilt { padding-top: 2px; margin-bottom: 20px; }
.dash-trend-axis.x-tilt .dash-trend-x { transform: rotate(-45deg); text-align: right; }
/* ---------- ⑯ 工单列表弹性列宽（2026-09-15） ----------
列宽由 thead 的百分比声明（见 orders.js），这里补三条规则：
1) 勾选列固定窄宽；2) 单元格保留 ellipsis（全局已有 max-width:240px）；
3) 窄屏逐级隐藏次要列（厂家工单 / 小产线 / 设备型号），避免横向滚动。 */
table.grid.ord-cols th.ord-chk, table.grid.ord-cols td.ord-chk { width: 34px; }
table.grid.ord-cols td { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 1100px) {
table.grid.ord-cols th:nth-child(3), table.grid.ord-cols td:nth-child(3),
table.grid.ord-cols th:nth-child(6), table.grid.ord-cols td:nth-child(6) { display: none; } /* 厂家工单 / 小产线 */
/* 固定表格布局：列宽完全按表头百分比分配（超出时按比例压缩），窄屏不再出现横向滚动 */
table.grid.ord-cols { table-layout: fixed; }
table.grid.ord-cols td, table.grid.ord-cols th { max-width: none; }
}
@media (max-width: 900px) {
table.grid.ord-cols th:nth-child(7), table.grid.ord-cols td:nth-child(7),
table.grid.ord-cols th:nth-child(12), table.grid.ord-cols td:nth-child(12) { display: none; } /* 设备型号 / 申告时间 */
}
.od-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 4px; }
.od-upload-label {
display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 12px;
border: 1px solid var(--accent); border-radius: var(--radius-sm);
color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 600;
}
.od-upload-label:hover { background: var(--surface-3); }
.od-upload-input { flex: 1 1 240px; min-width: 0; max-width: 420px; height: var(--ctl-h-sm); padding: 2px 6px; font-size: 11.5px; }
/* 上传进度列表：文件名 + 进度条 + 状态 */
.od-upload-list { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px; }
.od-upl { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.od-upl-name {
flex: 0 1 44%; min-width: 0; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.od-upl-bar { flex: 1 1 auto; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.od-upl-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.od-upl.done .od-upl-bar > i { background: var(--success); }
.od-upl.fail .od-upl-bar > i { background: var(--danger); }
.od-upl-state { flex: 0 0 auto; min-width: 46px; text-align: right; color: var(--muted); }
.od-upl.done .od-upl-state { color: var(--success); }
.od-upl.fail .od-upl-state { color: var(--danger); }
/* 说明：#fff / #000 是本项目 style.css 头部约定的唯一例外（打印样式必须用纯白），
故既有规则中的 #fff 保持不变；非 token 的中间色（如 var(--surface-3)）已改走 --surface-3。 */
/* ---------- ⑮ U6：通用工具类与组合框内部钩子类（B11 契约要求无未定义类） ---------- */
.spacer { flex: 1 1 auto; }
.combo-caret { display: inline-flex; align-items: center; justify-content: center; }
.combo-foot-clear { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.combo-foot-clear:hover { color: var(--fg); border-color: var(--border-strong); }
/* ==========================================================================
预设字段页 · 左字段索引 + 右选项面板（2026-09-15 改版）
—— 替代原「一张长表 + 竖排 chip」：一屏内完成单个字段的维护，字段与选项都能搜，
选项显示编码值与被业务数据引用的条数。
========================================================================== */
.set-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 10px; }
.set-fields {
overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px;
}
/* 字段行：单行紧凑（名称 + 编码 + 数量），20 个字段一屏放得下 */
.set-field {
display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: var(--radius-sm);
cursor: pointer; border: 1px solid transparent;
}
.set-field:hover { background: var(--surface-2); }
.set-field.active { background: var(--accent-soft); border-color: var(--accent); }
.set-field.dragging { opacity: .5; }
.set-field.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.set-fbody { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 5px; }
.set-fname { font-size: 12px; color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-fcode {
flex: 0 1 auto; max-width: 48%; font-size: 10px; color: var(--text-light); font-family: var(--font-mono);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-fcount {
flex: 0 0 auto; min-width: 20px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--accent);
background: var(--accent-soft); border-radius: 999px; padding: 0 6px;
}
.set-ftag {
display: inline-block; font-size: 9.5px; font-weight: 600; color: var(--muted);
background: var(--surface-3); border-radius: 3px; padding: 0 3px; vertical-align: middle;
}
.set-main {
min-width: 0; display: flex; flex-direction: column; overflow: hidden;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.set-head { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.set-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--fg); }
.set-code { font-size: 11px; font-weight: 500; color: var(--text-light); font-family: var(--font-mono); }
.set-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.set-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.set-actions .lt-chip { flex: 1 1 200px; max-width: 320px; }
.set-groups { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 14px; }
.set-group { margin-bottom: 12px; }
.set-group:last-child { margin-bottom: 0; }
.set-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.set-pname { font-size: 12.5px; font-weight: 600; color: var(--primary); }
.set-gcount { font-size: 11px; color: var(--muted); }
.set-gadd { margin-left: auto; height: 22px; min-height: 22px; padding: 0 8px; font-size: 11px; }
.set-empty { color: var(--text-light); font-size: 12.5px; padding: 18px 4px; text-align: center; }
/* 选项 chip：标签 + （编码值）+ 引用数；操作按钮悬停才出现 */
.set-label { font-size: 12px; color: var(--fg); }
.set-val { font-size: 10.5px; color: var(--text-light); font-family: var(--font-mono); }
.set-use {
font-size: 10px; font-weight: 700; color: var(--success); background: var(--success-soft);
border-radius: 999px; padding: 0 6px; margin-left: 2px;
}
.set-hit { outline: 2px solid var(--accent); outline-offset: 1px; }
.dict-chip .dict-chip-x { opacity: 0; transition: opacity .15s ease; }
.dict-chip:hover .dict-chip-x, .dict-chip:focus-within .dict-chip-x { opacity: 1; }
@media (max-width: 1100px) {
.set-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
}
/* 手机：工具栏放不下统计文案（每个字段的数量在右栏已可见），隐藏避免挤掉按钮 */
@media (max-width: 767px) { #s-stat { display: none; } }
/* ==========================================================================
⑱ 布局改造（2026-09-16，按渲染稿确认）：
① 固定页眉 / 标题栏 / 功能区 / 表头 / 页脚，只有内容滚动
② 三档行高（紧凑 / 标准 / 宽松），默认紧凑，入口在页脚
③ 筛选控件方案 D：白底 + 已选 chip + 选中计数
========================================================================== */
/* ---------- ② 三档行高：全部走 CSS 变量 ---------- */
:root { --row-pad-y: 4px; --row-pad-x: 8px; --row-font: 12px; --head-pad-y: 6px; }
body[data-density="standard"] { --row-pad-y: 7px; --row-pad-x: 9px; --row-font: 12.5px; --head-pad-y: 8px; }
body[data-density="loose"] { --row-pad-y: 11px; --row-pad-x: 11px; --row-font: 13px; --head-pad-y: 10px; }
/* 说明：既有规则 `table.grid:not(.read-card) tbody td{padding:4px 3px}` 选择器更具体，
因此密度规则必须用同等/更高优先级（并覆盖 :last-child 变体）才能真正生效。 */
body[data-density] table.grid { font-size: var(--row-font); }
body[data-density] table.grid thead th,
body[data-density] table.grid:not(.read-card) thead th { padding-top: var(--head-pad-y); padding-bottom: var(--head-pad-y); }
body[data-density] table.grid tbody td,
body[data-density] table.grid:not(.read-card) tbody td,
body[data-density] table.grid:not(.read-card) tbody td:last-child {
padding-top: var(--row-pad-y); padding-bottom: var(--row-pad-y);
}
/* 紧凑档：主信息一行放下，副信息（编码/时间）略小 */
body[data-density="compact"] table.grid td .sub,
body[data-density="compact"] table.grid td .muted { font-size: 11px; }
/* ---------- ① 固定骨架 ---------- */
/* 列表页：内容区不整体滚动，滚动条只出现在表格容器内 */
.content.content-fixed { overflow: hidden; padding-bottom: 0; }
/* 内容区的直接子层（可能是 .list-page，也可能是 #cust-view 这类视图容器）撑满并把高度往下传 */
.content.content-fixed > * {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.content.content-fixed .list-page { flex: 1 1 auto; min-height: 0; height: 100%; }
/* 卡片/表格容器吃满剩余高度，滚动条落在 .table-wrap 内 */
.content.content-fixed .list-page > .panel { flex: 1 1 auto; min-height: 0; }
.content.content-fixed .list-page > .panel > .table-wrap,
.content.content-fixed .list-page > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; max-height: none; }
.list-page > .panel,
.list-page > .table-wrap { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 表头吸顶 + 页脚吸底（表头规则已有，这里补页脚） */
table.grid tfoot td.list-foot,
td.list-foot {
position: sticky; bottom: 0; z-index: 6;
background: var(--surface);
box-shadow: 0 -1px 0 var(--border);
}
/* 宽表格横向滚动时，页脚右侧组（统计 / 行高开关 / 翻页）吸附在可视右边缘，不会被顶出屏幕 */
td.list-foot .lf-right { position: sticky; right: 0; }
/* 功能区高度变小时，表格可用高度跟着变（原有 --flt-h 机制保留） */
.table-wrap { max-height: calc(100vh - var(--flt-h, 0px) - 96px); }
/* ---------- 页脚里的行高开关 ---------- */
.lf-density { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-right: 4px; }
.lf-density .lf-dbtn {
height: 22px; padding: 0 9px; border: 0; background: var(--surface); color: var(--muted);
font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.lf-density .lf-dbtn + .lf-dbtn { border-left: 1px solid var(--border); }
.lf-density .lf-dbtn:hover { color: var(--fg); background: var(--surface-2); }
.lf-density .lf-dbtn.active { background: var(--accent); color: #fff; font-weight: 600; }
/* ---------- ③ 筛选控件：方案 D（白底 + 已选 chip + 计数） ---------- */
.lt-chip {
display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h-lt); min-height: var(--ctl-h-lt);
padding: 0 8px 0 10px; background: var(--surface); /* 白底（原来是 surface-2 灰底） */
border: 1px solid var(--border); border-radius: 8px; min-width: 0;
}
.lt-chip:hover { border-color: var(--border-strong); }
.lt-chip:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.lt-chip > .combo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; width: auto; }
.lt-chip .combo-input { flex: 1 1 40px; min-width: 26px; height: calc(var(--ctl-h-lt) - 2px); border: 0; background: transparent; padding: 0; }
.lt-chip .combo-input.combo-has-chips { flex: 0 1 18px; min-width: 14px; }
.lt-chip .combo-caret, .lt-chip .combo-clear { flex: 0 0 auto; }
.lt-chips { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.lt-chip-item {
background: var(--accent-soft); color: var(--accent); border-radius: 999px;
padding: 0 7px; font-size: 11px; line-height: 17px; white-space: nowrap;
max-width: 118px; overflow: hidden; text-overflow: ellipsis;
}
.lt-chip-more { color: var(--muted); font-size: 11px; }
.lt-count {
flex: 0 0 auto; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px;
background: var(--accent); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center; font-weight: 600;
}
/* 日期/下拉类筛选保持同高同边框 */
.lt-chip.lt-date input[type="date"] { border: 0; background: transparent; height: calc(var(--ctl-h-lt) - 2px); }
/* ---------- 表单/详情页：内容在窗口内，滚动条在表单内部 ---------- */
.content.detail-page { overflow: hidden; }
.detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.detail-actionbar { flex: 0 0 auto; }
/* ---------- 详情页：表单区限制在窗口内，滚动条出现在表单内部 ---------- */
.content.detail-page { overflow: hidden; }
.content.detail-page > .order-detail-layout,
.content.detail-page .order-detail-layout {
height: 100%; min-height: 0; overflow: hidden;
}
.content.detail-page .odl-main { height: 100%; min-height: 0; padding-bottom: 0; gap: 8px; }
.content.detail-page .detail-topbar.od-headcard { flex: 0 0 auto; }
.content.detail-page .detail-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding-bottom: 12px;
}
/* 底部操作条：在表单滚动容器内吸底，永远可见 */
.content.detail-page .od-actions { position: sticky; bottom: 0; }
@media (max-width: 900px) {
/* 手机端：详情页改为「整页滚动」。
注意必须同时解除桌面规则的 height:100% / overflow:hidden 钳制，
否则 .order-detail-layout 会把超出的内容裁掉，#content 也没有可滚动内容（表现为页面滚不动）。 */
.content.detail-page { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.content.detail-page > .order-detail-layout,
.content.detail-page .order-detail-layout { height: auto; min-height: 0; overflow: visible; }
.content.detail-page .odl-main { height: auto; min-height: 0; }
.content.detail-page .detail-scroll { overflow: visible; flex: 0 0 auto; padding-bottom: 12px; }
/* 底部操作条：整页滚动时仍吸附在屏幕底部 */
.content.detail-page .od-actions { position: sticky; bottom: 0; z-index: 6; }
}
/* ---------- 固定页脚条（表格之外，宽表格横向滚动也始终可见） ---------- */
.list-footbar {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 34px; padding: 5px 12px; background: var(--surface);
border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}
.list-footbar .lf-left { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.list-footbar .lf-left b { color: var(--accent); font-size: 13px; font-weight: 700; }
.list-footbar .lf-right { display: inline-flex; align-items: center; gap: 14px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.list-footbar .lf-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.list-footbar .lf-item b { color: var(--fg); font-weight: 700; }
.list-footbar .lf-pager { display: inline-flex; align-items: center; gap: 6px; }
.list-footbar .lf-pager .lf-cur { color: var(--muted); font-size: 12px; }
.list-footbar .lf-pager .btn { height: 22px; min-height: 22px; padding: 0 8px; font-size: 11px; }
/* 列表页脚不再需要吸底（已移出表格） */
td.list-foot { position: static; box-shadow: none; }
/* ==========================================================================
⑲ 筛选框内层恒透明 + 三区（标题栏/功能区/列表区）去间隔（2026-09-16 用户反馈）
========================================================================== */
/* ---------- ① 筛选框：灰药丸是内层 input 的 hover/focus 底色，必须压掉 ---------- */
/* 旧规则 `.lt-chip .combo-input:focus{background:var(--surface-3)!important}` 用了 !important，
这里以同样带 !important 的更高优先级规则覆盖，保证任何状态下内层都是透明的。 */
.lt-chip .combo-input,
.lt-chip .combo-input:hover,
.lt-chip .combo-input:focus,
.lt-chip .combo-input:active,
.lt-chip .combo-input:focus-visible,
.lt-chip.lt-date input,
.lt-chip.lt-date input:hover,
.lt-chip.lt-date input:focus,
.lt-chip input[type="text"],
.lt-chip input[type="date"] {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
color: var(--fg) !important;
padding: 0 !important;
}
.lt-chip .combo-input::placeholder,
.lt-chip input::placeholder { color: var(--muted); }
/* 交互反馈只体现在外层框：hover 加深描边，focus 高亮描边 */
.lt-chip:hover { border-color: var(--border-strong); }
.lt-chip:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
/* ---------- ② 标题栏 / 功能区 / 列表区：去掉垂直间隔 + 合并边框 ---------- */
.content.content-fixed { padding-top: 0; }
.content.content-fixed .sub-tabs { margin-bottom: 0; }
.content.content-fixed .list-toolbar:not(.lt-batch) {
margin-bottom: 0;
border-bottom: 0; /* 下边框交给列表卡片的上边框，避免双线 */
border-radius: 0;
}
.content.content-fixed .list-page > .panel {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.content.content-fixed .list-page > .table-wrap { border-top: 0; }
/* 多段工具栏（如批量条 + 筛选条）之间也不留缝 */
.content.content-fixed .list-toolbar.lt-batch { margin-bottom: 0; border-radius: 0; }
/* ==========================================================================
⑳ 样式方案落地（2026-09-16 用户确认）
A2 = 4px 统一间距 | B2 = 胶囊页签 | C5 = 前缀图标筛选框 | D5 = 无边框面板
========================================================================== */
/* ==================== A2: 4px 统一间距 ==================== */
/* 覆盖之前的 0px 规则：标题栏→功能区→列表区之间保留 4px 呼吸空间 */
.content.content-fixed { padding-top: 4px; }
.content.content-fixed .sub-tabs { margin-bottom: 4px; }
.content.content-fixed .list-toolbar:not(.lt-batch) { margin-bottom: 4px; }
.content.content-fixed .list-page > .panel { border-top: 1px solid var(--border); }
.content.content-fixed .list-page > .table-wrap { border-top: 1px solid var(--border); }
/* 报表看板等非 list-page 页面也统一间距 */
.content.content-fixed > .list-toolbar { margin-bottom: 4px; }
.content.content-fixed > .cards-grid { margin-top: 0; }
.content.content-fixed > .dash-grid { margin-top: 0; }
.content.content-fixed > .panel { margin-top: 4px; }
/* seg-nav（考勤/财务分段控件）与下方内容的间距 */
.content.content-fixed .seg-nav { margin-bottom: 4px; }
/* ==================== B2: 胶囊填充页签 ==================== */
/* 覆盖 .sub-tab 的下划线样式 → 圆角胶囊 */
.sub-tabs { border-bottom: 0; gap: 4px; padding-bottom: 4px; }
.sub-tab {
padding: 5px 14px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
margin-bottom: 0 !important;
background: transparent;
color: var(--muted);
font-size: 12.5px;
transition: all .15s;
}
.sub-tab:hover { background: var(--surface-3); color: var(--fg); }
.sub-tab.active {
background: var(--accent-soft) !important;
color: var(--accent) !important;
border-color: var(--accent) !important;
font-weight: 600;
}
/* seg-btn（分段控件）保持现有样式不动（已经是紧凑分段风格） */
/* ==================== C5: 筛选框前缀图标 + 紧凑描边 ==================== */
/* 在每个筛选胶囊左侧加一个小漏斗图标（纯 CSS SVG data URI，无需 JS） */
.lt-chip {
position: relative;
padding-left: 24px !important; /* 给图标留位置 */
}
.lt-chip::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
/* lucide "filter" icon (funnel) — 16x16 viewBox, stroke currentColor */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
opacity: .7;
}
.lt-chip:hover::before { opacity: 1; }
/* 搜索框不加图标（已有放大镜） */
.lt-search::before { display: none; }
/* 日期筛选框也不需要漏斗图标 */
.lt-chip.lt-date::before { display: none; }
.lt-chip.lt-date { padding-left: 8px !important; }
/* 预设字段页的搜索框也不加 */
.set-actions .lt-chip::before { display: none; }
.set-actions .lt-chip { padding-left: 8px !important; }
/* ==================== D5: 下拉面板无边框 + 强阴影 ==================== */
.combo-list {
border: 0 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .08) !important;
border-radius: var(--radius-sm) !important;
}
/* 面板内搜索框保持细边框（方便辨识输入区域） */
.combo-search-input {
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
}
/* 面板底部操作栏用浅灰背景分隔（替代原来的 border-top） */
.combo-foot {
border-top: 0 !important;
background: var(--surface-2);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
/* ==========================================================================
㉑ 筛选控件改造（2026-09-17 用户确认 · 实测通过）
A. 去掉筛选框左侧的漏斗「筛选标记」（原 C5 方案）
B. 去掉筛选框右侧的 ✕「清除标记」——JS 侧：筛选条内的组合框始终显示 ⌄
C. 箭头锚定 + 消除「值右侧大片空白」
⚠ 关键结构事实（务必先读）：
comboSearch() 生成的 DOM 是
…input…
即**箭头按钮不是 .lt-chip 的子元素，而是 .combo 的子元素**（app.js:912-914）。
因此不能用「.lt-chip 改 Grid，箭头放第二列」的做法 —— 第二列会空着，
箭头仍由 .combo 的 flex 排布，位置随内容宽度浮动。
正确的锚定方式：箭头 position:absolute; right:8px 锚定到 .lt-chip
（.lt-chip 为 position:relative），并在 .combo 上预留 padding-right:34px
= 8px(右内边距) + 20px(箭头) + 6px(与内容的间隙)，使内容永不进入箭头区。
⚠ combo-has-chips 必须恢复收缩（原 CSS 就是 flex:0 1 18px）：
多选筛选选中后，.combo-input 要让位给 .lt-chips 里的值胶囊。
若把它改成 flex:1 1 40px，输入框会撑满整行 —— 表现为
「故障案例 操作指南 +3 分类 ................. ⌄」值右侧约 141px 大片空白。
这就是 2026-09-17 用户反馈的知识文库「分类」筛选显示异常。
本实现取 flex:0 0 0（比原来的 18px 更彻底），并同时屏蔽 placeholder，
避免 0 宽输入框把「分类」二字裁成半个残缺汉字。
⚠ 「清除筛选」按钮必须移出文档流：它是 .lt-filters 的文档流成员，
选中后从 0 → 70px，会把等宽筛选胶囊一起挤窄 14.5px、造成整行重排。
实测（客户管理 / 设备管理 / 知识文库 / 工单管理 / 考勤 / 用户管理）：
空态、1 值、多值、清除后 —— 箭头中心距 chip 右边界恒为 25.0px，
chip 宽度变化 0.0px，内容与箭头无重叠。
注：清除入口不变——工具条右侧的「清除筛选」按钮在任一筛选有值时出现。
========================================================================== */
/* ---------- A. 去掉漏斗筛选标记 ---------- */
.lt-chip::before,
.lt-chip:hover::before { display: none !important; content: none !important; }
/* ---------- B + C. 筛选胶囊：右留箭头位，箭头绝对锚定 ---------- */
/* 保留 .lt-chip 原有的 flex:1 1 0 等宽度分配，只改内边距锚点 */
.lt-chip,
.lt-chip.lt-wide {
position: relative; /* 箭头绝对定位的包含块 */
display: inline-flex;
align-items: center;
padding: 0 6px 0 10px !important; /* 左侧不再为漏斗留 24px */
}
/* 内容区：压掉页面脚本写死的内联宽度（如工单「客户」筛选的 180px），
并把右侧 34px 让给箭头，配合 overflow:hidden 保证内容不压箭头 */
.lt-chip > .combo {
width: 100% !important;
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
padding-right: 34px;
overflow: hidden;
}
/* 输入框：默认撑满；多选有值时收缩让位给值胶囊（恢复原设计意图） */
.lt-chip .combo-input { flex: 1 1 40px; min-width: 0; }
.lt-chip .combo-input.combo-has-chips { flex: 0 0 0; width: 0; min-width: 0; padding: 0; }
/* ⚠ 有值时必须同时屏蔽 placeholder：
输入框被压到 0 宽后，placeholder（如「分类」）仍会绘制并被裁成半个字，
表现为值胶囊右侧多出一个残缺汉字（用户 2026-09-17 反馈的「显示异常」）。 */
.lt-chip .combo-input.combo-has-chips::placeholder { color: transparent !important; }
/* 箭头/清除按钮：绝对锚定到筛选胶囊右侧，位置不随内容宽度变化 */
.lt-chip .combo-btn,
.lt-chip .combo-caret,
.lt-chip .combo-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
margin: 0;
flex: 0 0 auto;
}
/* 值胶囊组：可收缩，超出部分由 .combo 的 overflow:hidden 处理 */
.lt-chip .lt-chips { flex: 0 1 auto; min-width: 0; }
/* 日期类筛选（单个 date input）保持原有单行内边距 */
.lt-chip.lt-date {
display: inline-flex;
padding-left: 8px !important;
}
/* 预设字段页 / AI 工具条的筛选胶囊：只保留左内边距收敛 */
.set-actions .lt-chip,
.ai-tools .lt-chip { padding-left: 10px !important; }
/* ---------- C-2. 「清除筛选」移出文档流 ---------- */
/* 该按钮在筛选取值后才出现（0 → 70px）。留在文档流里会把等宽的筛选胶囊挤窄，
导致整行重排、箭头位移。改为绝对定位到筛选区右侧，预留 80px 即可。
作用域限定在工具条内的 .lt-filters，避免影响其它页面的胶囊。 */
.list-toolbar:not(.lt-batch) .lt-filters { position: relative; }
.list-toolbar:not(.lt-batch) .lt-filters > .lt-clear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 0;
}
.list-toolbar:not(.lt-batch) .lt-filters:has(> .lt-clear) { padding-right: 80px; }
/* 计数气泡：隐藏（选中值胶囊已说明筛选条件） */
.lt-chip .lt-count { display: none !important; }
/* 窄屏（≤1100px）时 .lt-chip 变为整行，右留箭头位依然有效 */
@media (max-width: 1100px) {
.lt-chip,
.lt-chip.lt-wide { flex: 1 1 46%; min-width: 0; }
}
/* ==========================================================================
㉒ 页签统一（2026-09-17 用户确认）
客户管理原用 .sub-tabs/.sub-tab（下划线胶囊 + flex 拉伸），
视觉上与财务管理 / 角色与权限的 .seg-nav/.seg-btn 不一致，
已改为 .seg-nav/.seg-btn。
⚠⚠ 这里踩过三个坑，务必保留选择器写法：
1) .seg-nav 作为 #content（display:flex; flex-direction:column）的子项时，
默认 align-items:stretch 会把它拉满整行、按钮被撑到两端；
必须 align-self:flex-start 才会「按内容宽度、左对齐」。
2) 库里另有一条高特异性规则
.content.content-fixed > * { flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column; }
（特异性 0,2,0）。因为它在纵向 flex 里 flex-grow:1，
页签容器会去「吸收」表格筛选后腾出的剩余高度（35px → 424px，
把筛选工具栏整体推到 y=480）。
3) 同一条规则里的 display:flex + flex-direction:column 还会把页签变成纵向堆叠。
原 .seg-nav 的 display:inline-flex 特异性只有 (0,1,0)，压不过 (0,2,0)。
故本规则必须同时把 display 与 flex-direction 显式收回。
========================================================================== */
.content.content-fixed > .seg-nav {
flex: 0 0 auto; /* 固定高度，不吸收纵向剩余空间 */
display: inline-flex !important; /* 关键：夺回横向容器 */
flex-direction: row !important; /* 关键：页签必须横排 */
align-items: center;
width: auto;
max-width: 100%;
flex-wrap: wrap;
align-self: flex-start;
}
.sub-tabs { display: inline-flex; flex-wrap: wrap; }
/* ==========================================================================
㉔ 报表看板：一屏铺满 + 高度自适应（2026-09-17 用户要求）
⚠ 贯穿始终的根因：库里有一条高特异性全局规则
.content.content-fixed > * { flex:1 1 auto; min-height:0;
display:flex; flex-direction:column; }
（特异性 0,2,0）
它会同时破坏：卡片/图表的 grid、工具栏的横向、页签的横向。
所以下列规则**必须用同等或更高特异性**（.content.content-fixed > .xxx）。
高度分配（#content 为 column flex，高度 = 视口高 - 48px 顶栏）：
固定段：工具栏 flex:0 0 auto、KPI 卡片 flex:0 0 auto
弹性段：图表区 flex:3 / 地域面板 flex:1.4 / 超期面板 flex:1.15
—— 三者按比例吃掉「剩下的全部高度」，故任何分辨率都铺满且不溢出，
也不依赖媒体查询去适配每一种屏幕高度。
图表内部一律用 calc() 跟随，不再写死像素（换分辨率自动缩放）。
========================================================================== */
/* 图表可用高度：随视口高度伸缩（短屏压扁、高屏放开） */
.content.content-fixed { --dash-chart-h: clamp(116px, calc(20.8vh - 84px), 168px); }
/* ---------- ① 工具栏：固定高度、横排（修复「筛选区太大、都是空白」） ---------- */
.content.content-fixed > .list-toolbar {
display: flex;
flex-direction: row; /* ⚠ 关键：工具栏必须横排 */
flex: 0 0 auto; /* ⚠ 关键：不吸收纵向剩余空间 */
flex-wrap: nowrap;
align-items: center;
gap: 6px;
padding: 4px 10px;
min-height: 0;
}
.content.content-fixed > .list-toolbar .lt-filters { flex: 0 1 auto; gap: 6px; }
.content.content-fixed > .list-toolbar .lt-sel { font-size: 11px; white-space: nowrap; }
.content.content-fixed > .list-toolbar .lt-actions { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.content.content-fixed > .list-toolbar .seg-nav { padding: 2px; }
.content.content-fixed > .list-toolbar .seg-btn { height: 22px; min-height: 22px; font-size: 11px; padding: 0 9px; }
.content.content-fixed > .list-toolbar .lt-chip { height: 24px; min-height: 24px; }
.content.content-fixed > .list-toolbar .lt-chip .combo-input { height: 22px; font-size: 11.5px; }
/* ---------- ② KPI 卡片：4 列 × 2 行（固定高度） ---------- */
.content.content-fixed > .cards-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px; margin-bottom: 6px; flex: 0 0 auto;
}
.content.content-fixed > .cards-grid .stat-card { padding: 6px 10px; }
.content.content-fixed > .cards-grid .s-label { font-size: 11px; }
.content.content-fixed > .cards-grid .s-value { font-size: 17px; margin-top: 0; }
/* ---------- ③ 图表区：3 列 × 2 行，占 3 份弹性空间 ---------- */
.content.content-fixed > .dash-grid {
display: grid;
/* 3 列 × 2 行：排布整齐（条形图为横向布局，窄面板同样清晰；趋势图 12 个月仍够宽） */
grid-template-columns: repeat(3, minmax(0, 1fr));
/* 两行等分容器高度；flex-grow 决定它与下方两块的占比 */
grid-auto-rows: minmax(0, 1fr);
gap: 6px;
flex: 3 1 0; /* 弹性：吃掉剩余高度 */
min-height: 0;
}
.content.content-fixed > .dash-grid > .panel {
height: auto; /* 交给 grid 行高 */
min-height: 0;
overflow: hidden;
padding: 7px 10px;
display: flex;
flex-direction: column;
}
.content.content-fixed > .dash-grid > .panel h3 { margin: 0 0 2px; font-size: 12px; flex: 0 0 auto; }
/* 趋势图：高度 = 面板可用高 - 标题，内部三段（数值/柱/月份）按比例分配 */
.content.content-fixed .dash-trend {
height: auto;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.content.content-fixed .dash-trend-plot { gap: 3px; }
.content.content-fixed .dash-trend-axis { gap: 3px; }
.content.content-fixed .dash-trend-col { min-height: 0; }
.content.content-fixed .dash-trend-val { font-size: 10.5px; }
.content.content-fixed .dash-trend-x { font-size: 10px; }
/* 数值标签：固定单行高度（不能按百分比限高 —— 字号固定而百分比随面板变，
矮面板下会把「72 单」这类文字裁掉一半）。柱高是百分比，会自动让出这部分空间。 */
.content.content-fixed .dash-trend-val { max-height: 15px; line-height: 15px; overflow: hidden; flex: 0 0 auto; }
/* 柱高：放在 .dash-trend-barwrap 内（该容器占满「数值标签以下」的可用高度，底部对齐），
柱高百分比相对它解析 → 比例准确，且不再需要 max-height 截断（此前会把接近最大值的柱子压成同高）。 */
.dash-trend-barwrap {
flex: 1 1 auto; min-height: 0; width: 100%;
display: flex; align-items: flex-end; justify-content: center;
}
.content.content-fixed .dash-trend-bar { max-height: none; }
.content.content-fixed .dash-trend-barwrap { min-height: 6px; }
/* 斜排时给绘图区多留一点下方空间，避免标签贴住坐标轴 */
.content.content-fixed .dash-trend-plot { padding-bottom: 1px; }
/* 饼图 / 图例：随图表高度缩放 */
.content.content-fixed .pie-flex { gap: 8px; padding: 0; flex: 1 1 auto; min-height: 0; align-items: center; }
.content.content-fixed .pie {
width: calc(var(--dash-chart-h) - 16px); height: calc(var(--dash-chart-h) - 16px);
max-width: 38%; max-height: 100%; flex: 0 0 auto;
}
.content.content-fixed .pie::after { inset: 20%; }
.content.content-fixed .pie-legend { max-height: 100%; overflow-y: auto; }
/* 工程师柱状图：整块可滚，避免小屏被裁 */
.content.content-fixed > .dash-grid > .panel > .bar-row:first-of-type { margin-top: 0; }
/* 矮屏（视口高 ≤900px）：饼图图例改 2 列排布 —— 6 项也能在 94px 高度内全部显示，
避免「移机 / 其他」被裁或需要滚动。高屏仍保持单列（阅读更顺）。 */
@media (max-height: 900px) and (min-width: 1101px) {
.content.content-fixed .pie-legend { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 1px; overflow: visible; }
.content.content-fixed .pie-item { font-size: 10.5px; }
.content.content-fixed .pie-pct { width: 34px; }
}
/* ---------- ④ 不同级别客户覆盖率（工单数 / 客户数） ---------- */
.content.content-fixed .cov-list { display: flex; flex-direction: column; gap: 3px; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.content.content-fixed .cov-row { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; flex: 0 0 auto; }
.content.content-fixed .cov-lv { flex: 0 0 38px; color: var(--text); font-weight: 600; }
.content.content-fixed .cov-track { flex: 1 1 auto; min-width: 0; height: 10px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.content.content-fixed .cov-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.content.content-fixed .cov-val { flex: 0 0 44px; text-align: right; font-weight: 700; color: var(--fg); }
.content.content-fixed .cov-mut { flex: 0 0 52px; text-align: right; color: var(--text-light); font-size: 10.5px; }
/* ---------- ⑤ 地域面板：占 1.4 份；左表 | 右地图，均随容器高自适应 ---------- */
.content.content-fixed > .panel {
flex: 1.5 1 0; /* 弹性：按份数分配 */
min-height: 0;
padding: 7px 10px;
margin-top: 5px;
display: flex;
flex-direction: column;
}
.content.content-fixed > .panel > .panel-head { flex: 0 0 auto; }
.content.content-fixed .dash-region-grid {
display: grid;
grid-template-columns: minmax(230px, 1fr) minmax(0, 3fr);
flex: 1 1 auto; min-height: 0;
}
.content.content-fixed .dash-map-box { min-height: 0; display: flex; flex-direction: column; }
.content.content-fixed #map-container { flex: 1 1 auto; height: 100%; min-height: 0; }
.content.content-fixed .dash-region-list { max-height: none !important; height: 100%; min-height: 0; overflow: auto; }
/* 内部表格吸顶表头，滚动时仍可见列名 */
.content.content-fixed .dash-region-list table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
/* ---------- ⑥ 超期工单面板：占 1.15 份，表格内部滚动 ---------- */
.content.content-fixed > .panel:last-child { flex: 1.25 1 0; }
.content.content-fixed > .panel > .table-wrap { flex: 1 1 auto; max-height: none; min-height: 0; overflow: auto; }
.content.content-fixed > .panel > .table-wrap table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
/* ---------- ⑦ 小屏（≤1100px）：放弃一屏，恢复整页滚动与单列 ---------- */
@media (max-width: 1100px) {
.content.content-fixed { overflow-y: auto; --dash-chart-h: 150px; }
.content.content-fixed > .list-toolbar { flex-wrap: wrap; }
.content.content-fixed > .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content.content-fixed > .dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; flex: 0 0 auto; }
.content.content-fixed > .dash-grid > .panel { height: auto; min-height: 180px; }
.content.content-fixed > .panel { flex: 0 0 auto; }
.content.content-fixed .dash-region-grid { grid-template-columns: 1fr; }
.content.content-fixed #map-container { height: 260px; }
.content.content-fixed .dash-region-list { height: auto; max-height: 260px !important; }
.content.content-fixed > .panel > .table-wrap { max-height: 300px; }
}
/* ==========================================================================
㉑ 手机端按钮尺寸统一（2026-09-17 用户反馈：操作按钮过大不协调）
触控目标从 44px 收到 30~32px —— 仍在拇指可点范围内，但视觉与 11~12px 字号成比例。
仅作用于 ≤767px，桌面端保持原样。
========================================================================== */
@media (max-width: 767px) {
/* 统一基准：所有按钮/链接按钮的高度与字号 */
.btn, a.btn, button.btn {
min-height: 32px;
height: 32px;
padding: 0 12px;
font-size: 12px;
border-radius: 7px;
}
.btn-sm, .btn.btn-sm {
min-height: 30px;
height: 30px;
padding: 0 10px;
font-size: 11.5px;
}
/* 详情页步骤表单：原来的 min-height:44px 取消 */
#step-form .btn, .step-form .btn { min-height: 32px; height: 32px; }
/* 工单卡片操作按钮：不再强制 44px，也不再强制撑满 */
table.grid.ord-cards td.ord-ops .btn,
table.grid.ord-cards tbody tr td:last-child .btn {
min-height: 30px;
height: 30px;
flex: 0 1 auto; /* 原来是 flex:1 1 auto（撑满整行）→ 改为按内容宽 */
padding: 0 10px;
font-size: 11.5px;
}
/* 底部操作条（节点调整 / 保存 / 提交 / 操作备注）整体收窄 */
.od-actions { padding: 6px 8px; gap: 8px; height: auto; min-height: 0; }
.od-actions .btn, .od-actions .btn.btn-sm {
min-height: 32px; height: 32px; padding: 0 12px; font-size: 12px;
}
.od-actions .op-adjust select,
.od-actions .op-adjust .btn { min-height: 32px; height: 32px; }
.od-actions .od-comment input,
.od-actions input { min-height: 32px; height: 32px; }
/* 图标按钮（顶栏/关闭等） */
.icon-btn { min-height: 32px; padding: 4px 6px; }
/* 弹窗底部按钮 */
.modal .form-actions .btn, .modal-footer .btn { min-height: 32px; height: 32px; font-size: 12px; }
/* 弹窗/侧栏内的小按钮 */
.form-actions .btn.btn-sm { min-height: 30px; height: 30px; }
}
/* ==========================================================================
㉒ 权限管理 · 方案 B（以人为中心）
左：紧凑用户列表（姓名+账号同行、行高约 30px）
右：权限来源明细（职务 / 岗位 / 个人 三段）+ 折叠分组（可改个人授权）
========================================================================== */
.pm-split { flex: 1; min-height: 0; display: flex; gap: 8px; }
.pm-pane {
flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.pm-pane-narrow { flex: 0 0 210px; }
.pm-pane-h {
flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
border-bottom: 1px solid var(--border-soft); background: var(--surface);
}
.pm-pane-h .lt-search { flex: 0 1 260px; }
.pm-pane-f { flex: 0 0 auto; }
.pm-tblwrap { flex: 1; min-height: 0; overflow: auto; max-height: none; }
/* 紧凑用户列表：姓名与账号同一行，行高随密度档位（默认紧凑 ~30px） */
table.grid.pm-ulist { font-size: 12px; }
table.grid.pm-ulist thead th { padding-top: 5px; padding-bottom: 5px; }
table.grid.pm-ulist tbody td { padding-top: 4px; padding-bottom: 4px; }
table.grid.pm-ulist tbody tr.pm-urow { cursor: pointer; }
table.grid.pm-ulist tbody tr.pm-urow:hover td { background: var(--surface-2); }
table.grid.pm-ulist tbody tr.pm-urow.active td { background: var(--accent-soft); }
table.grid.pm-ulist tbody tr.pm-urow.active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pm-uname { font-weight: 600; color: var(--fg); }
.pm-uacc { color: var(--meta); font-size: 10.5px; font-family: var(--font-mono); }
.pm-src-tag {
display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10.5px; line-height: 16px;
background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.pm-src-tag.n { background: var(--surface-3); color: var(--muted); }
.pm-src-tag.g { background: var(--success-soft); color: var(--success); }
.pm-src-tag.r { background: var(--danger-soft); color: var(--danger); }
.pm-src-tag.a { background: var(--warn-soft); color: var(--warn); }
table.grid.pm-ulist b.num, .pm-eff b.num { color: var(--accent); }
/* 右侧明细 */
.pm-detail {
flex: 0 0 46%; min-width: 340px; min-height: 0; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.pm-detail-h {
flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 11px;
border-bottom: 1px solid var(--border-soft);
}
.pm-dname { font-size: 14px; font-weight: 700; }
.pm-dacc { font-size: 11px; color: var(--meta); font-family: var(--font-mono); margin-left: 5px; }
.pm-dtags { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.pm-detail-h > div { flex: 1; min-width: 0; }
.pm-srcbox { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 11px 4px; }
.pm-srcbox .b { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px; }
.pm-srcbox .b .t { font-size: 11px; color: var(--muted); }
.pm-srcbox .b .t .m { font-size: 10px; color: var(--meta); }
.pm-srcbox .b .v { font-size: 15px; font-weight: 700; margin-top: 1px; }
.pm-srcbox .b.plus { border-color: rgba(99, 102, 241, .35); background: var(--accent-soft); }
.pm-eff { flex: 0 0 auto; padding: 4px 11px 8px; font-size: 12px; }
.pm-eff .muted { font-size: 11px; }
/* 折叠分组（右侧明细与配置模板共用） */
.pm-fgroups { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border-soft); }
.pm-fgrp { border-bottom: 1px solid var(--border-soft); }
.pm-fgrp:last-child { border-bottom: 0; }
.pm-fgrp-h {
display: flex; align-items: center; gap: 8px; padding: 6px 11px; cursor: pointer; background: var(--surface);
}
.pm-fgrp-h:hover { background: var(--surface-2); }
.pm-fgrp-h .caret { color: var(--meta); font-size: 11px; width: 11px; }
.pm-fgrp-h .nm { font-weight: 600; font-size: 12.5px; min-width: 74px; }
.pm-fgrp-h .cnt { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pm-fgrp-h .bar { flex: 1; max-width: 130px; height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.pm-fgrp-h .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pm-fgrp-h .all { margin-left: auto; font-size: 11px; color: var(--accent); cursor: pointer; }
.pm-fgrp-b { padding: 4px 11px 8px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px; background: var(--surface-2); }
.pm-fgrp-b[hidden] { display: none; }
.pm-fitem { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; cursor: pointer; }
.pm-fitem:hover { color: var(--accent); }
.pm-fitem code { font-size: 10px; color: var(--meta); margin-left: auto; }
.pm-tag { font-size: 10px; font-style: normal; padding: 0 4px; border-radius: 3px; }
.pm-tag.grant { background: var(--success-soft); color: var(--success); }
.pm-tag.deny { background: var(--danger-soft); color: var(--danger); }
/* 配置模板：左侧维度列表（紧凑） */
.pm-dimlist { flex: 1; min-height: 0; overflow: auto; padding: 4px; }
.pm-dim { padding: 6px 9px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.pm-dim:hover { background: var(--surface-2); }
.pm-dim.active { background: var(--accent-soft); border-color: var(--accent); }
.pm-dim .n { display: block; font-size: 12.5px; font-weight: 600; }
.pm-dim .m { display: block; font-size: 10.5px; color: var(--meta); }
/* 配置模板里「复制自…」用组合框，去掉漏斗图标前缀 */
.lt-chip.lt-nofilter { padding-left: 8px !important; }
.lt-chip.lt-nofilter::before { display: none; }
/* 变更审计表 */
table.grid.pm-alist tbody td { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 1100px) {
/* 窄屏：明细面板移到下方，避免左右都太挤 */
.pm-split { flex-direction: column; }
.pm-pane-narrow { flex: 0 0 auto; max-height: 180px; }
.pm-detail { flex: 1 1 auto; min-width: 0; }
}
/* ==========================================================================
㉓ 权限管理 · 模板化（2026-09-18）
模板列表（可增删改）+ 权限明细（紧凑三列、默认全部展开）+ 用户差异
========================================================================== */
/* 左侧模板列表 */
.pm-dim { position: relative; padding-right: 58px; }
.pm-dim .pm-tacts { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.pm-dim:hover .pm-tacts { display: flex; }
.pm-tico { width: 20px; min-height: 20px; height: 20px; padding: 0; justify-content: center; font-size: 11px; line-height: 1; }
.pm-sc { font-style: normal; font-size: 9.5px; color: var(--warn); background: var(--warn-soft); border-radius: 3px; padding: 0 3px; }
/* 权限明细：紧凑三列（默认全部展开） */
.pm-g3 { padding: 0 4px 6px; }
.pm-g3 .grp { border-bottom: 1px solid var(--border-soft); margin-bottom: 2px; }
.pm-g3 .grp-h {
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
padding: 3px 6px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 2px;
}
.pm-g3 .grp-h .nm { font-size: 12px; font-weight: 700; min-width: 68px; }
.pm-g3 .grp-h .cnt { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pm-g3 .grp-h .bar { flex: 0 0 90px; height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.pm-g3 .grp-h .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pm-g3 .grp-h .all { margin-left: auto; font-size: 10.5px; color: var(--accent); cursor: pointer; }
.pm-g3 .grp-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; padding: 1px 6px 5px; background: transparent; }
.pm-g3 .chk { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 19px; cursor: pointer; min-width: 0; }
.pm-g3 .chk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-g3 .chk code { font-size: 9.5px; color: var(--meta); display: none; margin-left: auto; }
.pm-g3 .chk:hover code { display: inline; }
/* 用户差异标签 */
.pm-src-tag.less, .pm-srcbox .b.less { border-color: rgba(220, 38, 38, .3); }
.pm-srcbox .b.less { background: var(--danger-soft); }
.pm-effdiff { margin-left: 8px; font-size: 11px; color: var(--warn); }
.pm-dvtag { margin-left: auto; font-size: 10px; color: var(--warn); background: var(--warn-soft); border-radius: 3px; padding: 0 4px; }
/* 弹窗内的小控件 */
.pm-lbl { display: block; font-size: 11.5px; color: var(--muted); margin: 9px 0 3px; }
.pm-inp, .pm-sel { width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; background: var(--surface); color: var(--fg); }
.pm-inp:focus, .pm-sel:focus { outline: none; border-color: var(--accent); }
.pm-warn { font-size: 12px; line-height: 1.7; background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 8px 10px; border-radius: var(--radius-sm); }
.pm-picker { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; }
.pm-pick { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 12px; }
.pm-pick:last-child { border-bottom: 0; }
.pm-pick:hover { background: var(--surface-2); }
.pm-pick.on { background: var(--accent-soft); }
.pm-pick .pn { font-weight: 600; }
.pm-pick .pm { margin-left: auto; font-size: 11px; color: var(--muted); }
/* 用户列表「调整」列窄一些，保持紧凑 */
table.grid.pm-ulist td:last-child { width: 1%; white-space: nowrap; }
@media (max-width: 1280px) { .pm-g3 .grp-b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pm-g3 .grp-b { grid-template-columns: 1fr; } }
/* 权限模板明细容器（与 .pm-g3 配合；B11 要求「在用类必须有样式定义」） */
.groups { flex: 1; min-height: 0; overflow: auto; }
/* 权限管理用户列表：行内「调整」按钮压小，保证列表紧凑（行高 ~30px） */
table.grid.pm-ulist tbody td .btn-sm { height: 22px; min-height: 22px; padding: 0 8px; font-size: 11px; line-height: 1; }
table.grid.pm-ulist tbody td { padding-top: 3px; padding-bottom: 3px; }
/* ==========================================================================
㉔ 看板与表单排版（2026-09-18 用户反馈）
========================================================================== */
/* ---------- ① 报表看板：8 张 KPI 卡一行显示 ---------- */
.content.content-fixed > .cards-grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
}
.content.content-fixed > .cards-grid .stat-card { padding: 6px 8px; min-width: 0; }
.content.content-fixed > .cards-grid .s-label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content.content-fixed > .cards-grid .s-value { font-size: 15px; letter-spacing: -.2px; white-space: nowrap; }
.content.content-fixed > .cards-grid .s-sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 中等屏：8 列会太挤 → 4 列；手机端 2 列 */
@media (max-width: 1500px) {
.content.content-fixed > .cards-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
.content.content-fixed > .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---------- ② 报表看板：超期工单表格完整可见（不再只显示一半） ----------
此前 dashboard.js 上写了内联 max-height:96px（内联样式优先级高于本表 CSS），
表格被裁到 96px 只露出 1.5 行；现在由这里统一控制：整块占 1.25 份高度并内部滚动。 */
.content.content-fixed > .panel > .table-wrap { max-height: none !important; }
/* ---------- ③ 财务看板：内容铺满可用高度 ---------- */
.fin-dash {
display: flex; flex-direction: column; gap: 8px;
min-height: 100%; /* 至少撑满 fn-body */
height: 100%;
}
.fin-dash > .cards-grid { flex: 0 0 auto; margin-bottom: 0; }
.fin-dash > .dash-grid {
flex: 1 1 auto; min-height: 0;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(0, 1fr);
}
.fin-dash > .dash-grid > .panel {
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.fin-dash > .dash-grid > .panel h3 { flex: 0 0 auto; margin-bottom: 4px; }
/* 趋势图：占满面板剩余高度 */
.fin-trend { display: flex; align-items: flex-end; gap: 3px; padding-top: 10px; height: 150px; }
.fin-dash .fin-trend { height: auto; flex: 1 1 auto; min-height: 110px; }
.fin-trend > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.fin-dash .pie-flex { flex: 1 1 auto; min-height: 0; }
.fin-dash .bar-row { flex: 0 0 auto; }
.fin-dash > .dash-grid > .panel > .bar-row:last-child { margin-bottom: 0; }
/* 未回款 TOP 面板：让条形填满面板高度 */
.fin-dash .panel:has(.bar-row) { justify-content: flex-start; }
/* ---------- ④ 弹窗表单：两列紧凑栅格 + 分区标题（压紧行距，一屏放下含底部按钮） ---------- */
.fin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.fin-form .field { margin: 0 0 3px; }
.fin-form .field > label { font-size: 11px; color: var(--muted); margin-bottom: 1px; display: block; line-height: 15px; }
.fin-form .form-control { height: 28px; min-height: 28px; font-size: 12.5px; padding: 0 8px; }
.fin-form textarea.form-control { height: auto; min-height: 54px; }
.fin-form .span2, .fin-form .fin-grid2.span2 { grid-column: 1 / -1; }
.fin-form .fin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.fin-sec {
grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--fg);
border-left: 3px solid var(--accent); padding-left: 6px; margin: 3px 0 2px; line-height: 16px;
}
/* 上传识别块：文案压小、间距收紧 */
.fin-form .fin-att-block .muted { font-size: 11px; margin-bottom: 4px !important; }
.fin-form .fin-att-block .form-control { height: 30px; }
.fin-form .fin-note { padding: 5px 8px; margin: 3px 0 2px; }
.fin-flow-note { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin:0 0 2px 4px; color:var(--meta); border:1px solid var(--line); border-radius:50%; cursor:help; vertical-align:middle; }
.fin-flow-note:hover, .fin-flow-note:focus-visible { color:var(--accent); border-color:var(--accent); outline:2px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset:1px; }
.fin-flow-note .fn-ico { width:14px; height:14px; }
.fin-flow-note { display:inline-flex; align-items:center; gap:0; margin:0 0 2px 4px; padding:0; width:22px; height:22px; background:transparent; border:1px solid var(--line); border-radius:50%; font-size:inherit; line-height:1; color:var(--meta); }
.fin-flow-note .fn-ico { color:inherit; font-size:inherit; line-height:1; }
.fin-note {
grid-column: 1 / -1; font-size: 11px; color: var(--muted); background: var(--surface-2);
border-radius: var(--radius-sm); padding: 6px 8px; margin: 4px 0 2px;
}
.fin-att-block { grid-column: 1 / -1; }
/* 窄屏弹窗：回到单列 */
@media (max-width: 720px) {
.fin-form { grid-template-columns: 1fr; }
}
/* 工资列表：银行卡列窄一些，避免整表过宽 */
table.grid td.fin-bank, table.grid th:nth-last-child(4) { font-family: var(--font-mono); font-size: 11px; }
/* ---------- 财务看板：8 张 KPI 一行（与报表看板一致） ---------- */
.fin-dash > .cards-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.fin-dash > .cards-grid .stat-card { padding: 6px 9px; min-width: 0; }
.fin-dash > .cards-grid .s-label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-dash > .cards-grid .s-value { font-size: 15px; white-space: nowrap; }
.fin-dash > .cards-grid .s-sub { font-size: 10px; }
@media (max-width: 1280px) { .fin-dash > .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- 报表看板：超期面板多分一点高度（显示更多完整行），地域面板略收 ---------- */
.content.content-fixed > .panel { flex: 1.25 1 0; }
.content.content-fixed > .panel:last-child { flex: 1.7 1 0; }
/* ---------- 报表看板：分布面板改为柱状图（全部值），跨列由 4 列栅格决定 ---------- */
.content.content-fixed > .dash-grid > .panel.span-2 { grid-column: span 2; }
.content.content-fixed > .dash-grid > .panel.span-all { grid-column: 1 / -1; }
@media (max-width: 1100px) {
.content.content-fixed > .dash-grid > .panel.span-2,
.content.content-fixed > .dash-grid > .panel.span-all { grid-column: auto; }
}
/* 柱多时（服务子类 20 项 / 工程师 9 人）压小数值与轴标签，避免相邻重叠 */
.content.content-fixed .dash-trend-plot,
.content.content-fixed .dash-trend-axis { gap: 2px; }
.content.content-fixed .dash-trend-col { min-width: 0; }
.content.content-fixed .dash-trend-val { font-size: 9.5px; letter-spacing: -.2px; }
.content.content-fixed .dash-trend-x { font-size: 9.5px; }
/* 整行面板：柱子窄一点更好看，标签空间更足 */
.content.content-fixed .panel.span-all .dash-trend-bar { width: 62%; }
/* ==========================================================================
㉕ 财务模块：流程/权限灰色备注 + 只读字段（2026-09-19）
========================================================================== */
.fin-flow-note {
display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap;
margin: -2px 0 6px; padding: 5px 9px;
background: var(--surface-2); border-left: 3px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 11px; line-height: 1.55; color: var(--meta);
}
.fin-flow-note .fn-ico { color: var(--muted); font-size: 11px; line-height: 1.55; }
.fin-flow-note b { color: var(--muted); font-weight: 600; }
.fin-flow-note .fn-perm {
flex: 0 0 auto; margin-left: auto; padding-left: 10px;
color: var(--meta); opacity: .9; white-space: nowrap;
font-family: var(--font-mono);
}
@media (max-width: 900px) {
.fin-flow-note .fn-perm { margin-left: 0; white-space: normal; }
}
/* 只读字段（由基本工资档案带出）：提高权重，避免被 .fin-form .form-control 覆盖 */
.fin-form .form-control.fin-ro,
.fin-form input.form-control[readonly],
.modal .form-control.fin-ro,
.modal input.form-control[readonly] {
background: var(--surface-3) !important;
color: var(--fg-2) !important;
cursor: default;
border-color: var(--border-soft);
}
.fin-form .form-control.fin-ro:focus,
.modal .form-control.fin-ro:focus { border-color: var(--border); box-shadow: none; }
/* 基本工资页：状态标签与列表紧凑 */
table.grid td.fin-bank { font-family: var(--font-mono); font-size: 11px; }
/* ---------- 操作列：灰色说明 + 次要危险按钮（2026-09-19 操作列评审后优化） ---------- */
table.grid td.ops-col .ops-muted {
color: var(--meta); font-size: 11px; padding: 0 4px; white-space: nowrap;
}
.btn.btn-ghost-danger {
background: transparent; border-color: var(--border-strong); color: var(--danger); font-weight: 500;
}
.btn.btn-ghost-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
table.grid td.ops-col { white-space: nowrap; }
table.grid td.ops-col .btn + .btn, table.grid td.ops-col .ops-muted + .btn { margin-left: 4px; }
/* 工资发放「查看」弹窗：key-value 两列排版 */
.fpay-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 12.5px; }
.fpay-row .k { flex: 0 0 88px; color: var(--muted); }
.fpay-row .v { flex: 1 1 auto; min-width: 0; color: var(--fg); word-break: break-all; }
/* ==========================================================================
㉖ 报表看板：条形图（自适应铺满）+ 6 卡片一行（2026-09-19）
========================================================================== */
/* 条形图：条目少时自动拉高填满面板，条目多时内部滚动 */
.content.content-fixed .hb-list {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px; padding: 1px 0 2px;
}
.content.content-fixed .hb-row {
display: flex; align-items: center; gap: 6px; min-height: 16px; flex: 1 1 auto;
font-size: 11.5px; line-height: 1.2;
}
.content.content-fixed .hb-row .hb-label {
flex: 0 0 88px; max-width: 88px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.content.content-fixed .hb-row .hb-track {
flex: 1 1 auto; min-width: 0; height: 12px; background: var(--surface-3);
border-radius: 3px; overflow: hidden;
}
.content.content-fixed .hb-row .hb-fill { height: 100%; border-radius: 3px; }
.content.content-fixed .hb-row .hb-val {
flex: 0 0 52px; text-align: right; font-weight: 600; color: var(--fg);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 卡片 6 张一行 */
.cards-grid.cards-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .cards-grid.cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 待办事项：报销「费用明细」列（单行省略，完整内容在 title 里） */
table.grid td.td-items {
max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--muted); font-size: 11.5px;
}
/* 报销单/单据详情：两列键值排版（配合 .fin-form 的分区标题使用） */
.fin-form .claim-kv {
grid-column: 1 / -1;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 18px; padding: 2px 0 4px;
}
.fin-form .claim-kv .detail-item { padding: 1px 0; }
.fin-form .claim-kv .detail-item .k { flex: 0 0 76px; color: var(--muted); }
@media (max-width: 900px) { .fin-form .claim-kv { grid-template-columns: 1fr; } }
/* ==========================================================================
㉗ 审批设置（2026-09-19）：左侧流程列表 + 右侧节点规则
========================================================================== */
.ap-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 10px; }
@media (max-width: 1100px) { .ap-layout { grid-template-columns: 1fr; } }
.ap-flows .ap-flow-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.ap-flow { padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.ap-flow:hover { background: var(--surface-2); }
.ap-flow.active { background: var(--accent-soft, var(--surface-3)); border-color: var(--accent); }
.ap-flow-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.ap-node-list { display: flex; flex-direction: column; gap: 6px; }
.ap-node { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--surface); }
.ap-node-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.ap-node-head .ap-idx {
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.ap-preview { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.ap-preview.on { color: var(--success); }
.ap-rule-table { margin: 4px 0 2px; font-size: 11.5px; }
.ap-rule-table th, .ap-rule-table td { padding: 3px 6px; }
.ap-tip { margin-top: 6px; font-size: 11px; color: var(--meta); line-height: 1.6; }
.ap-switch { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ap-preview .ap-ok { color: var(--success); font-weight: 600; }
/* Compact process hint override */
.fin-flow-note { display:inline-flex; align-items:center; justify-content:center; gap:0; width:22px; height:22px; margin:0 0 2px 4px; padding:0; background:transparent; border:1px solid var(--line); border-radius:50%; font-size:inherit; line-height:1; color:var(--meta); }
.fin-flow-note .fn-ico { color:inherit; font-size:inherit; line-height:1; }
.fin-flow-note .fn-perm { display:none; }
/* Unified list controls and full-width reimbursement details. */
.fin-form > .span2 { grid-column: 1 / -1; min-width: 0; }
.fin-form > .at-sub-wrap { width: 100%; box-sizing: border-box; }
.record-detail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
.record-detail .v { overflow-wrap: anywhere; white-space: pre-wrap; }
.record-detail > .span2 { grid-column: 1 / -1; }
.record-row { cursor: pointer; }
.record-row:hover { background: var(--bg-hover,rgba(0,0,0,.025)); }
.ops-col .btn, .ord-ops .btn { margin: 2px 4px 2px 0; }
.list-toolbar { gap: 10px 12px; align-items: center; }
.list-toolbar .lt-filters, .list-toolbar .lt-actions { gap: 8px; align-items: center; flex-wrap: wrap; }
.list-toolbar .btn { min-height: 32px; padding: 5px 12px; box-sizing: border-box; }
.list-toolbar input, .list-toolbar select { min-height: 32px; box-sizing: border-box; }
button[hidden] { display: none !important; }
.parts-readonly { min-height: 28px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.parts-grid tbody tr.clickable-row { cursor: pointer; }
.parts-grid tbody tr.clickable-row:hover { background: var(--bg-hover,rgba(0,0,0,.025)); }
@media(max-width:600px) { .record-detail { grid-template-columns: minmax(0,1fr); } }