/* ============================================================
PMS 工作台 · 全局样式 v5（浅色主题）
设计语言：浅色专业 · 蓝青主色 · 无 emoji
============================================================ */
:root {
--bg: #f5f7fb;
--bg-2: #eef2f7;
--surface: #ffffff;
--surface-2: #f4f6f9;
--surface-3: #e9edf3;
--ink: #1a2233;
--ink-2: #4b5565;
--ink-3: #6b7280;
--ink-4: #9aa4b2;
--border: rgba(15, 23, 42, 0.08);
--border-2: rgba(15, 23, 42, 0.16);
--cyan: #0891b2;
--blue: #2563eb;
--blue-2: #3b82f6;
--green: #16a34a;
--amber: #d97706;
--red: #dc2626;
--violet: #7c3aed;
/* SCENE_DAYS_V1：进行天数警示四档专用色。黄/橙是警示色，全站原无独立 token，补此两档。 */
--yellow: #f59e0b;
--orange: #f97316;
--radius: 12px;
--line: rgba(15,23,42,0.10);
--muted: #8a94a6;
--grp-bg: #f5f9fe;
--grp-bg-alt: #fbfcfe;
--grp-merged: #e9f2fd;
--grp-bar: #378add;
--shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
/* ADVUI_V1：补两个此前只在 fallback 里出现、:root 中从未定义的别名。
旧代码写了 var(--bg2,#f8fafc) / var(--fg-2,#475569) —— 变量名不存在，
一直靠 fallback 兜底，换主题时会整片失效。这里补齐并对齐既有色板，
不改任何调用点，避免逐处替换引入色差。 */
--bg2: #f8fafc;
--fg-2: #4b5565;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
background: var(--bg); color: var(--ink); font-family: var(--font);
font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* ============ 登录页 ============ */
.login-view {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background:
radial-gradient(1000px 560px at 15% -10%, rgba(37, 99, 235, 0.10), transparent 55%),
radial-gradient(900px 560px at 108% 112%, rgba(8, 145, 178, 0.10), transparent 55%),
#f5f7fb;
padding: 24px;
}
.login-card {
width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; box-shadow: var(--shadow-lg); padding: 36px 36px 28px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark {
width: 42px; height: 42px; border-radius: 11px; flex: none;
background: linear-gradient(135deg, #0891b2, #2563eb);
display: flex; align-items: center; justify-content: center;
color: #ffffff; font-weight: 700; font-size: 18px; letter-spacing: -0.5px;
box-shadow: 0 4px 18px rgba(37, 99, 235, 0.28);
}
.brand-mark.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }
.brand-title { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; }
.brand-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.login-form .field { margin-bottom: 16px; }
.login-form .field span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.login-form input {
width: 100%; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px;
font-size: 14px; background: var(--bg-2); color: var(--ink); outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); }
.login-error { background: rgba(220, 38, 38, 0.12); color: var(--red); font-size: 13px; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px; }
.login-divider { text-align: center; margin: 18px 0 12px; font-size: 12px; color: var(--ink-4); position: relative; }
.login-divider span { background: var(--surface); padding: 0 12px; position: relative; z-index: 1; }
.login-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.btn-ding { background: #1677ff; color: #fff; }
.btn-ding:hover { background: #4096ff; opacity: 1; }
.btn-ding:disabled { opacity: 0.6; cursor: not-allowed; }
.ding-hint { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.login-hint { text-align: center; font-size: 12px; color: var(--ink-4); margin-top: 20px; }
.dev-toggle { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.dev-toggle input { width: auto; accent-color: var(--cyan); }
/* ============ 应用布局 ============ */
.app-view { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
width: 224px; flex: none; background: #ffffff; color: var(--ink-2);
display: flex; flex-direction: column; transition: width 0.2s; border-right: 1px solid var(--border);
}
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-title, .sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-group-label, .sidebar.collapsed .nav-scope { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 8px; }
.sidebar.collapsed .nav-sub { padding-left: 0; }
.sidebar-head {
display: flex; align-items: center; gap: 10px; padding: 16px 14px;
border-bottom: 1px solid var(--border);
}
.sidebar-title { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; letter-spacing: -0.2px; }
.nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.2); border-radius: 3px; }
.nav-group { margin-bottom: 6px; }
.nav-group-label { font-size: 11px; color: var(--ink-4); padding: 10px 12px 4px; letter-spacing: 0.5px; }
.nav-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 1px 0;
border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-2);
transition: background 0.15s, color 0.15s; white-space: nowrap; user-select: none;
}
.nav-item:hover { background: rgba(15, 23, 42, 0.08); color: var(--ink); }
.nav-item.active { background: rgba(8, 145, 178, 0.12); color: var(--cyan); font-weight: 500; }
.nav-item.active .nav-item-icon { color: var(--cyan); }
.nav-item-icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.nav-item-icon svg { width: 18px; height: 18px; }
.nav-sub { padding-left: 16px; }
.nav-sub .nav-item { padding: 6px 12px; font-size: 13px; color: var(--ink-3); }
.nav-sub .nav-item:hover { color: var(--ink); background: rgba(15, 23, 42, 0.08); }
.nav-sub .nav-item.active { color: var(--cyan); background: rgba(8, 145, 178, 0.10); }
.nav-sep { height: 1px; background: var(--border); margin: 10px 12px; }
.sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--border); }
.nav-scope { font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
height: 56px; flex: none; background: var(--surface); border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.icon-btn {
background: transparent; border: none; width: 32px; height: 32px; border-radius: 8px;
cursor: pointer; color: var(--ink-3); font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.crumb { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-chips { display: flex; gap: 6px; }
.role-chip {
font-size: 12px; padding: 2px 10px; border-radius: 999px;
background: rgba(8, 145, 178, 0.10); color: var(--cyan); border: 1px solid rgba(8, 145, 178, 0.2);
}
.user-name { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.content { flex: 1; overflow-y: auto; padding: 20px 24px; }
/* ============ 按钮 ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 7px 16px; border-radius: 9px; border: 1px solid transparent;
font-size: 13.5px; font-family: var(--font); cursor: pointer; line-height: 1.4;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, #0891b2, #2563eb); color: #ffffff; font-weight: 500; }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn-danger { color: var(--red); border-color: rgba(220, 38, 38, 0.35); background: transparent; }
.btn-danger:hover { background: rgba(220, 38, 38, 0.12); border-color: var(--red); }
.confirm-danger { color: var(--red); font-size: 14px; line-height: 1.6; padding: 4px 0; }
.btn-success { color: var(--green); border-color: rgba(22, 163, 74, 0.35); background: transparent; }
.btn-success:hover { background: rgba(22, 163, 74, 0.12); border-color: var(--green); }
.btn-warn { color: var(--amber); border-color: rgba(217, 119, 6, 0.35); background: transparent; }
.btn-warn:hover { background: rgba(217, 119, 6, 0.12); border-color: var(--amber); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-xs { padding: 2px 8px; font-size: 11.5px; border-radius: 6px; }
.btn-block { width: 100%; }
/* ============ 标签 / 徽章 ============ */
.tag {
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap;
}
.tag-green { background: rgba(22, 163, 74, 0.14); color: var(--green); }
.tag-red { background: rgba(220, 38, 38, 0.14); color: var(--red); }
.tag-blue { background: rgba(37, 99, 235, 0.14); color: var(--blue-2); }
.tag-gray { background: rgba(15, 23, 42, 0.14); color: var(--ink-2); }
.tag-amber, .tag-gold, .tag-yellow { background: rgba(217, 119, 6, 0.14); color: var(--amber); }
/* ARCH_FE5：已归档状态标签 */
.tag-violet { background: rgba(124, 58, 237, 0.13); color: var(--c-violet-fg); }
/* SCENE_DAYS_V1：进行天数框格（实底白字，四档警示色，用于交付中心「进行中」页） */
.days-badge {
display: inline-block; color: #fff; font-size: 12px; font-weight: 600;
padding: 2.5px 10px; border-radius: 6px; line-height: 1.5; white-space: nowrap;
letter-spacing: .1px;
}
.days-red { background: var(--red); }
.days-orange { background: var(--orange); }
.days-yellow { background: var(--yellow); }
.days-green { background: var(--green); }
/* ============ 文本辅助 ============ */
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--ink-3); }
.mt-12 { margin-top: 12px; }
/* ============ 工具栏 ============ */
.toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 10px 14px; margin-bottom: 16px;
}
.toolbar-input {
padding: 7px 12px; border: 1px solid var(--border-2); border-radius: 9px;
font-size: 13px; min-width: 264px; outline: none; background: var(--bg-2); color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.toolbar-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
.toolbar-spacer { flex: 1; }
.toolbar-count { font-size: 13px; color: var(--ink-3); }
.toolbar-count strong { color: var(--cyan); font-weight: 600; }
/* ============ 分页 ============ */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; padding: 10px 0; }
.pager button {
padding: 5px 14px; border: 1px solid var(--border-2); background: var(--surface); border-radius: 8px;
font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all 0.15s;
}
.pager button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.pager button:disabled { opacity: 0.35; cursor: not-allowed; }
.page-info { font-size: 13px; color: var(--ink-3); }
/* ============ 加载 / 空态 ============ */
.loading { text-align: center; padding: 60px 0; color: var(--ink-3); font-size: 14px; }
.loading::before {
content: ''; display: block; width: 26px; height: 26px; margin: 0 auto 12px;
border: 3px solid var(--surface-2); border-top-color: var(--cyan); border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 56px 0; color: var(--ink-4); font-size: 14px; }
.empty::before { content: '○'; display: block; font-size: 30px; margin-bottom: 8px; color: var(--border-2); }
/* ============ 表格 ============ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table th {
background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 500;
text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { padding: 10px 14px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-detail td { background: var(--bg-2); padding: 16px 18px; white-space: normal; max-width: none; overflow: visible; }
.row-danger { background: rgba(220, 38, 38, 0.06); }
.row-warn { background: rgba(217, 119, 6, 0.05); }
/* ============ 卡片网格 ============ */
.card-grid { display: flex; flex-direction: column; gap: 14px; }
.proj-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s;
}
.proj-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.proj-card.warn { border-left: 3px solid var(--amber); }
.proj-card.danger { border-left: 3px solid var(--red); }
.proj-card-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 18px 10px; cursor: pointer; user-select: none;
}
.proj-card-head-left { min-width: 0; }
.proj-card-title { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; line-height: 1.45; }
.proj-card-subtitle { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.proj-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.proj-card-meta-item { font-size: 12px; color: var(--ink-3); }
.proj-card-meta-label { color: var(--ink-4); margin-right: 4px; }
.proj-card-meta-value { color: var(--ink-2); font-weight: 500; }
.proj-card-status { display: flex; gap: 6px; flex: none; padding-top: 2px; }
.proj-card-body { padding: 4px 18px 16px; }
.proj-fields {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 22px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
}
.proj-field { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.proj-field-label { font-size: 12px; color: var(--ink-4); flex: none; }
.proj-field-value { font-size: 13px; color: var(--ink); word-break: break-all; }
.subfields-toggle {
margin-top: 10px; display: flex; align-items: center; justify-content: center;
gap: 6px; width: 100%; padding: 7px 0; border: 1px dashed var(--border-2); border-radius: 9px;
background: transparent; color: var(--ink-3); font-size: 12.5px; cursor: pointer; transition: all 0.15s;
}
.subfields-toggle:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(8, 145, 178, 0.06); }
.subfields-body { display: none; margin-top: 10px; }
.proj-card.expanded .subfields-body { display: block; }
.subfields-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
/* ============ 业主分组 ============ */
.cust-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--surface); }
.cust-group-head {
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; font-weight: 600;
}
.cust-group-name { font-size: 15px; color: var(--ink); }
.cust-group-count { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.cust-group-amount { color: var(--cyan); font-size: 13px; font-weight: 500; }
.cust-group-toggle { margin-left: auto; opacity: 0.5; font-size: 12px; color: var(--ink-3); }
.cust-group.collapsed .cust-group-body { display: none; }
.cust-group-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* ============ 弹窗 ============ */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 24px;
animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
width: 640px; max-width: 100%; max-height: 86vh; overflow-y: auto;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
animation: slideUp 0.18s;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.modal-body { padding: 20px 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 20px; }
.modal-form .field { margin-bottom: 10px; }
.modal-form .field label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; font-weight: 500; }
.modal-form input[type='text'], .modal-form input[type='date'], .modal-form input[type='number'],
.modal-form select, .modal-form textarea {
width: 100%; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 10px;
font-size: 13.5px; font-family: var(--font); background: var(--bg-2); color: var(--ink); outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10); }
.modal-form input[type=checkbox], .modal-form input[type=radio] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; margin: 0; vertical-align: middle; }
.modal-form select option { background: var(--surface); color: var(--ink); }
.modal-form select[multiple] { height: auto; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.import-result { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
/* ============ Toast ============ */
.toast-root { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast {
min-width: 240px; max-width: 380px; padding: 10px 16px; border-radius: 10px;
font-size: 13px; background: var(--surface-2); color: var(--ink);
box-shadow: var(--shadow-lg); border: 1px solid var(--border-2);
animation: slideIn 0.2s;
}
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.ok { border-left: 3px solid var(--green); }
.toast.err { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid var(--cyan); }
/* ============ 系统管理页 ============ */
.section-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.section-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.section-subtitle { font-size: 12.5px; color: var(--ink-3); }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; width: fit-content; }
.admin-tab {
padding: 7px 18px; border: none; background: transparent; border-radius: 8px;
font-size: 13.5px; color: var(--ink-2); cursor: pointer; font-family: var(--font);
transition: all 0.15s;
}
.admin-tab:hover { background: var(--surface-2); }
.admin-tab.active { background: rgba(8, 145, 178, 0.14); color: var(--cyan); font-weight: 500; }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-level-select { font-family: var(--font); background: var(--bg-2); color: var(--ink); border-color: var(--border-2); }
/* ============ 人员排期表（月历） ============ */
.cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cal-title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.cal-nav { display: flex; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekday { padding: 8px 0; text-align: center; font-size: 12px; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 500; }
.cal-cell {
min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 6px 8px; background: var(--surface); position: relative;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.other-month { background: var(--bg-2); }
.cal-cell.today { background: rgba(8, 145, 178, 0.06); }
.cal-day-num { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
.cal-cell.today .cal-day-num { color: var(--cyan); font-weight: 600; }
.cal-item {
display: block; padding: 3px 7px; margin-bottom: 4px; border-radius: 6px;
font-size: 11.5px; line-height: 1.45; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: rgba(37, 99, 235, 0.14); color: var(--blue-2); border-left: 3px solid var(--blue);
transition: filter 0.12s;
}
.cal-item:hover { filter: brightness(1.15); }
.cal-item.person-tag { background: rgba(22, 163, 74, 0.12); color: var(--green); border-left-color: var(--green); margin-top: 4px; font-size: 11px; }
.cal-empty { color: var(--ink-4); font-size: 12px; padding: 6px 0; }
/* PSCAL_SYS_V2：人员排期表改为「单月历 + 按系统聚合」后新增的卡片样式。
⭐ 不能复用 .cal-item —— 它是 white-space:nowrap + ellipsis 的单行标签，
而用户明确要求「系统名太长不要简写」，必须允许换行。故另起 .cal-sys 体系。 */
.cal-cell.has-sys { min-height: 112px; vertical-align: top; }
.cal-sys {
display: block; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px;
cursor: pointer; border-left: 3px solid var(--blue);
background: rgba(37, 99, 235, 0.10); transition: filter 0.12s;
}
.cal-sys:hover { filter: brightness(0.97); }
.cal-sys-name {
font-size: 11.5px; line-height: 1.35; color: var(--blue-2); font-weight: 500;
white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
.cal-sys-people {
font-size: 11px; line-height: 1.35; color: var(--ink-2); margin-top: 2px;
white-space: normal; overflow-wrap: break-word;
}
.cal-sys-site { color: var(--ink-3); }
.cal-sys-edge { font-weight: 500; opacity: 0.85; }
/* 等级配色沿用全站口径：三级=blue（默认）、二级=green、其它=violet */
.cal-sys.lv2 { border-left-color: var(--green); background: rgba(22, 163, 74, 0.10); }
.cal-sys.lv2 .cal-sys-name { color: var(--green); }
.cal-sys.lvx { border-left-color: var(--violet); background: rgba(124, 58, 237, 0.10); }
.cal-sys.lvx .cal-sys-name { color: var(--violet); }
.cal-more {
display: block; font-size: 11px; color: var(--ink-3); cursor: pointer;
padding: 2px 6px; border-radius: 5px; background: var(--surface-2);
}
.cal-more:hover { color: var(--cyan); }
.cal-legend {
display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
padding: 10px 18px; border-top: 1px solid var(--border);
font-size: 12px; color: var(--ink-3);
}
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .sw { width: 18px; height: 10px; border-radius: 3px; border-left: 3px solid var(--blue); background: rgba(37, 99, 235, 0.10); }
.cal-legend .sw.lv2 { border-left-color: var(--green); background: rgba(22, 163, 74, 0.10); }
.cal-legend .sw.lvx { border-left-color: var(--violet); background: rgba(124, 58, 237, 0.10); }
/* ============ 看板 ============ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px; position: relative; overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s;
}
.kpi-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-4); }
.kpi-blue::before { background: var(--blue); }
.kpi-green::before { background: var(--green); }
.kpi-yellow::before { background: var(--amber); }
.kpi-red::before { background: var(--red); }
.kpi-value { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.5px; line-height: 1.2; }
.kpi-label { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.kanban-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.kanban-block-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.kanban-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kanban-2col .kanban-block { margin-bottom: 0; }
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-name { flex: none; width: 120px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 10px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #0891b2, #2563eb); border-radius: 5px; transition: width 0.4s; }
.bar-val { flex: none; min-width: 60px; text-align: right; font-size: 12.5px; color: var(--ink-2); }
.trend { display: flex; align-items: flex-end; gap: 10px; padding: 8px 0; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
.trend-bar { width: 10px; border-radius: 3px 3px 0 0; transition: height 0.4s; }
.trend-bar.blue { background: var(--blue); }
.trend-bar.green { background: var(--green); }
.trend-label { font-size: 11px; color: var(--ink-4); }
.trend-legend { display: flex; gap: 18px; margin-top: 10px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg.blue::before { background: var(--blue); }
.lg.green::before { background: var(--green); }
/* ============ 消息中心 ============ */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; border-left: 3px solid transparent;
}
.msg-item.unread { border-left-color: var(--cyan); }
.msg-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.msg-content { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.msg-time { font-size: 12px; color: var(--ink-4); }
/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.4); }
::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 1100px) {
.kanban-2col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.sidebar { width: 60px; }
.sidebar .sidebar-title, .sidebar .nav-item-text, .sidebar .nav-group-label, .sidebar .nav-scope { display: none; }
.sidebar .nav-item { justify-content: center; padding: 10px 8px; }
.sidebar .nav-sub { padding-left: 0; }
.content { padding: 14px; }
.toolbar-input { min-width: 140px; }
}
/* ===== 用户管理：复选框列 / 部门分组 / 批量按钮 ===== */
.col-check { width: 40px; text-align: center; padding-left: 6px !important; padding-right: 6px !important; }
.col-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
tr.dept-group td.dept-group-cell {
background: #eef2f8; border-top: 1px solid var(--border);
padding: 7px 16px; font-size: 13px;
}
tr.dept-group .dept-name { font-weight: 600; color: var(--ink); }
tr.dept-group .dept-count { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
#batch-role-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#batch-role-btn:not(:disabled) { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }
/* 排期表单：只读文本 + 提示 */
.modal-form .readonly-text {
display: block; padding: 8px 10px; border: 1px dashed rgba(148, 163, 184, 0.55);
border-radius: 8px; background: rgba(15, 23, 42, 0.04); color: var(--ink-2);
font-size: 13px; width: 100%; box-sizing: border-box;
}
.modal-form .form-tip { margin-top: 10px; font-size: 12px; color: #94a3b8; }
/* ===== 彩色下拉框（方案 2：彩色标签） ===== */
.modal-form select {
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%239ca3af' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
}
.modal-form select option {
padding: 6px 10px;
}
/* 彩色多选组件 */
.colored-multi-select { border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: #fff; }
.colored-multi-select .selected-tags {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
border-bottom: 1px solid var(--border); min-height: 36px; background: var(--bg-2);
}
.colored-multi-select .tag-pill {
display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 10px 3px 8px;
font-size: 12px; font-weight: 500; cursor: default;
}
.colored-multi-select .tag-pill .tag-remove { cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.5; margin-left: 2px; }
.colored-multi-select .tag-pill .tag-remove:hover { opacity: 1; }
.colored-multi-select .option-list { max-height: 210px; overflow-y: auto; }
.colored-multi-select .option-row {
display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background 0.1s;
}
.colored-multi-select .option-row:last-child { border-bottom: none; }
.colored-multi-select .option-row:hover { filter: brightness(0.97); }
.colored-multi-select .option-row .color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.colored-multi-select .option-row .user-name { font-size: 13px; color: var(--ink); }
.colored-multi-select .option-row .user-id { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.colored-multi-select .option-row input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
/* ============================================================
界面优化 v6 —— 表格 / 加载 / 反馈
============================================================ */
/* ---- 表格：粘性表头 + 斑马纹 + 更清晰的悬停 ---- */
.table-wrap { position: relative; max-height: calc(100vh - 250px); overflow: auto; }
.data-table thead th {
position: sticky; top: 0; z-index: 3;
background: #eef2f7; color: var(--ink-2); font-weight: 600;
box-shadow: inset 0 -1px 0 var(--border-2);
}
.data-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.018); }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover { background: rgba(8, 145, 178, 0.07); }
.data-table tbody tr:hover td { color: var(--ink); }
.data-table td.col-idx, .data-table th.col-idx {
color: var(--ink-4); font-variant-numeric: tabular-nums; text-align: center;
}
.data-table td { transition: background 0.12s; }
/* 行更新高亮：保存成功后闪一下，让用户确认数据已变 */
@keyframes rowFlash {
0% { background: rgba(22, 163, 74, 0.26); }
100% { background: transparent; }
}
.data-table tbody tr.row-updated { animation: rowFlash 1.6s ease-out; }
.data-table tbody tr.row-updated td { animation: rowFlash 1.6s ease-out; }
/* ---- 骨架屏：替代空白的"加载中…" ---- */
.skeleton-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.skeleton-row { display: flex; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-row.head { background: var(--surface-2); }
.skeleton-cell {
height: 12px; border-radius: 6px; flex: 1;
background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 37%, #eef1f6 63%);
background-size: 400% 100%;
animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton-cell.w-sm { flex: 0 0 60px; }
.skeleton-cell.w-lg { flex: 2; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* 局部刷新遮罩：刷新时表格半透明 + 顶部进度条，避免整块闪白 */
.table-refreshing { position: relative; pointer-events: none; }
.table-refreshing > * { opacity: 0.45; transition: opacity 0.15s; }
.table-refreshing::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 10;
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
background-size: 50% 100%; background-repeat: no-repeat;
animation: barSlide 1s linear infinite;
}
@keyframes barSlide { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
/* ---- 按钮 loading 态 ---- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
margin: -7px 0 0 -7px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
animation: spin 0.6s linear infinite;
}
.btn-ghost.is-loading::after, .btn-danger.is-loading::after, .btn-success.is-loading::after {
border-color: rgba(15, 23, 42, 0.2); border-top-color: var(--ink-2);
}
/* ---- Toast：加图标、更醒目 ---- */
.toast {
display: flex; align-items: flex-start; gap: 9px;
background: #fff; border: 1px solid var(--border-2);
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16);
border-left-width: 4px; padding: 11px 16px 11px 14px;
font-weight: 500;
}
.toast::before {
content: ''; flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 1px;
background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.toast.ok { border-left-color: var(--green); color: #14532d; }
.toast.ok::before {
background-color: var(--green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.toast.err { border-left-color: var(--red); color: #7f1d1d; }
.toast.err::before {
background-color: var(--red);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.toast.info { border-left-color: var(--cyan); color: #164e63; }
.toast.info::before {
background-color: var(--cyan);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 7v5M8 4.2v.1' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---- 弹窗表单：更紧凑清晰 ---- */
.modal-card { border-radius: 14px; }
.modal-head {
position: sticky; top: 0; z-index: 5; background: var(--surface);
border-radius: 14px 14px 0 0;
}
.modal-foot {
position: sticky; bottom: 0; background: var(--surface);
padding: 14px 24px 18px; border-top: 1px solid var(--border); margin-top: 4px;
}
.modal-form .field { margin-bottom: 13px; }
.modal-form .field label { font-size: 12px; color: var(--ink-3); letter-spacing: 0.1px; }
.modal-form .field-row { gap: 14px; margin-bottom: 0; }
.modal-form input[type='text']:hover, .modal-form input[type='date']:hover,
.modal-form input[type='number']:hover, .modal-form select:hover, .modal-form textarea:hover {
border-color: var(--ink-4);
}
.modal-form input::placeholder, .modal-form textarea::placeholder { color: var(--ink-4); }
.modal-form .readonly-text {
background: repeating-linear-gradient(45deg, rgba(15,23,42,0.028), rgba(15,23,42,0.028) 6px, transparent 6px, transparent 12px);
border-style: solid; border-color: var(--border); color: var(--ink-2);
display: flex; align-items: center; min-height: 38px;
}
.modal-form .form-tip {
background: rgba(8, 145, 178, 0.07); border: 1px solid rgba(8, 145, 178, 0.18);
border-radius: 8px; padding: 8px 11px; color: var(--ink-2); line-height: 1.55;
}
/* ---- 工具栏：刷新按钮 + 更好的分组 ---- */
.toolbar { padding: 11px 14px; gap: 9px; box-shadow: var(--shadow); }
.toolbar-count { padding: 0 2px; font-variant-numeric: tabular-nums; }
.btn-refresh { padding: 6px 10px; }
.btn-refresh svg { width: 15px; height: 15px; display: block; }
.btn-refresh.spinning svg { animation: spin 0.7s linear infinite; }
/* ---- 空状态：更友好 ---- */
.empty {
padding: 64px 20px; color: var(--ink-3);
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.empty::before {
content: ''; width: 46px; height: 46px; margin-bottom: 10px; opacity: 0.45; font-size: 0;
background-repeat: no-repeat; background-position: center; background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='12' width='32' height='26' rx='3' stroke='%2394a3b8' stroke-width='2.2' fill='none'/%3E%3Cpath d='M8 20h32M17 12v8' stroke='%2394a3b8' stroke-width='2.2' fill='none'/%3E%3C/svg%3E");
}
.empty-sub { font-size: 12.5px; color: var(--ink-4); }
/* ---- 分页：更精致 ---- */
.pager { margin-top: 16px; gap: 10px; }
.pager button { padding: 6px 16px; border-radius: 9px; font-weight: 500; }
.pager button:hover:not(:disabled) { background: rgba(8, 145, 178, 0.08); border-color: var(--cyan); }
.page-info { font-variant-numeric: tabular-nums; }
/* ---- 详情展开行 ---- */
.row-detail td { border-top: 2px solid rgba(8, 145, 178, 0.28); }
/* ---- 标签：细边框提升对比 ---- */
.tag { padding: 2.5px 10px; letter-spacing: 0.1px; border: 1px solid transparent; }
.tag-green { border-color: rgba(22, 163, 74, 0.24); }
.tag-red { border-color: rgba(220, 38, 38, 0.24); }
.tag-blue { border-color: rgba(37, 99, 235, 0.24); }
.tag-gray { border-color: rgba(15, 23, 42, 0.16); }
.tag-amber, .tag-gold, .tag-yellow { border-color: rgba(217, 119, 6, 0.26); }
.tag-violet { border-color: rgba(124, 58, 237, 0.26); }
/* ---- 滚动条：细一点更清爽 ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.34); background-clip: content-box; }
/* ---- 键盘可达性 ---- */
.btn:focus-visible, .icon-btn:focus-visible, .pager button:focus-visible {
outline: 2px solid var(--cyan); outline-offset: 2px;
}
/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* === splitsched: 排期按业务系统拆行 === */
/* 「订单信息」列：两行——签约客户 / 合同；同订单多系统时仅首行展示 */
.data-table td.cell-orderinfo { min-width: 220px; max-width: 320px; line-height: 1.5; }
.cell-orderinfo .oi-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-orderinfo .oi-line + .oi-line { margin-top: 2px; }
.cell-orderinfo .oi-key { color: var(--ink-4); font-size: 12px; }
.cell-orderinfo .oi-val { color: inherit; }
/* 系统名称列：多系统订单带 n/N 徽标 */
.data-table td.cell-sysname { min-width: 160px; white-space: nowrap; }
.cell-sysname .sys-badge {
display: inline-block; min-width: 30px; text-align: center;
font-size: 11px; padding: 1px 5px; margin-right: 6px; border-radius: 9px;
background: rgba(37, 99, 235, .10); color: var(--blue);
}
.cell-sysname .sys-nm { }
.cell-sysname .sys-nm-empty { color: var(--ink-4); font-style: italic; }
/* 可不填字段未填写：淡色占位横杆 */
.data-table td.cell-empty {
color: #c3cad6; text-align: center; user-select: none;
font-variant-numeric: tabular-nums;
}
/* 统一排期按钮 */
.btn.btn-batch {
border-color: rgba(37, 99, 235, .40); color: var(--blue);
background: #fff; font-weight: 500;
}
.btn.btn-batch:hover { background: rgba(37, 99, 235, .10); border-color: var(--blue); }
/* === 排期中心表格：按订单分组着色 + 真实单元格合并 === */
/* 分组表格关掉逐行斑马纹，改用「一个订单一块底色」 */
.data-table.tbl-grouped tbody tr:nth-child(even) { background: transparent; }
.data-table.tbl-grouped tbody tr > td { border-bottom: none; }
/* 组底色：相邻订单深浅交替，一眼分得开 */
.data-table.tbl-grouped tbody tr.grp-first > td,
.data-table.tbl-grouped tbody tr.grp-sub > td { background: var(--grp-bg); }
.data-table.tbl-grouped tbody tr.grp-alt.grp-first > td,
.data-table.tbl-grouped tbody tr.grp-alt.grp-sub > td { background: var(--grp-bg-alt); }
/* 合并单元格：垂直居中 + 深一档底色，突出「这是整单信息」 */
.data-table td.td-merged {
vertical-align: middle;
background: var(--grp-merged) !important;
}
.data-table.tbl-grouped tbody tr.grp-alt td.td-merged {
background: #f2f7fd !important;
}
/* 组内不画横线（合并效果更干净），只在组末画实线收口 */
.data-table.tbl-grouped tbody tr.grp-sub > td { border-top: none; }
.data-table.tbl-grouped tbody tr.grp-last > td,
.data-table.tbl-grouped tbody tr:not(.grp-first):not(.grp-sub) > td {
border-bottom: 1px solid var(--line);
}
.data-table.tbl-grouped tbody tr:last-child > td { border-bottom: none; }
/* 组左侧色条：贴在序号列，标识「这几行属于同一订单」 */
.data-table.tbl-grouped tbody tr.grp-first > td.col-idx,
.data-table.tbl-grouped tbody tr.grp-sub > td.col-idx {
box-shadow: inset 2px 0 0 var(--grp-bar);
}
/* hover 只作用于当前行，不掩盖分组底色 */
.data-table.tbl-grouped tbody tr:hover > td:not(.td-merged) {
background: rgba(8, 145, 178, 0.09);
}
/* 「排期」列 */
.data-table th.col-batch { text-align: center; }
.data-table td.col-batch {
text-align: center; vertical-align: middle; white-space: nowrap;
display: table-cell;
}
.col-batch .batch-done { font-size: 12px; color: var(--ink-3); }
.col-batch .batch-na { color: var(--ink-4); }
/* 序号列：等宽数字、弱化颜色，不跟内容抢视线 */
.data-table.tbl-grouped td.col-idx {
color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center;
}
/* ============================================================
整单排期 / 整单编辑弹窗（多系统一次搞定）
============================================================ */
/* 这两个弹窗内容比常规表单宽，撑一点 */
.modal-card.mc-wide { width: 820px; }
.modal-card.mc-mid { width: 700px; }
/* ---- 通用：整单操作列里的编辑按钮 ---- */
.btn-editgrp { color: var(--blue); }
.btn-editgrp:hover { background: rgba(37, 99, 235, 0.09); }
/* ---- 排期弹窗 ---- */
.ga-form .ga-seg {
display: inline-flex; padding: 3px; gap: 2px; margin-bottom: 12px;
background: var(--surface-3); border-radius: 10px;
}
.ga-seg-item {
padding: 6px 18px; font-size: 13px; font-weight: 500; color: var(--ink-3);
border-radius: 8px; cursor: pointer; user-select: none; transition: all 0.14s;
}
.ga-seg-item:hover { color: var(--ink); }
.ga-seg-item.on {
background: var(--surface); color: var(--cyan); font-weight: 600;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.ga-tip {
font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px;
padding-left: 9px; border-left: 2px solid var(--grp-bar); line-height: 1.5;
}
.ga-pane { min-height: 20px; }
.ga-hint { font-size: 11.5px; color: var(--muted); margin: -4px 0 12px; }
/* 统一模式：系统勾选列表 */
.ga-picklist {
border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: var(--surface);
}
.ga-pick {
display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background 0.1s;
}
.ga-pick:last-child { border-bottom: none; }
.ga-pick:hover { background: var(--grp-bg); }
.ga-pick input[type=checkbox] { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: var(--cyan); }
.ga-pick-nm { font-size: 13px; color: var(--ink); flex: 1; }
.ga-pick.done .ga-pick-nm { color: var(--ink-3); }
.ga-pick .tag { flex-shrink: 0; }
/* 单独模式：逐系统卡片 */
.ga-block {
border: 1px solid var(--border-2); border-radius: 12px; margin-bottom: 12px;
overflow: hidden; background: var(--surface);
}
.ga-block:last-child { margin-bottom: 0; }
.ga-block.folded { background: var(--surface-2); }
.ga-block-hd {
display: flex; align-items: center; gap: 9px; padding: 9px 13px;
background: var(--grp-bg); border-bottom: 1px solid var(--border);
}
.ga-block.folded .ga-block-hd { background: transparent; border-bottom: none; }
.ga-block-no {
width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px;
background: var(--grp-bar); color: #fff; font-size: 11.5px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.ga-block-nm { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; }
.ga-block-hd .tag { flex-shrink: 0; }
.ga-block-bd { padding: 12px 13px; }
.ga-fold {
display: flex; align-items: center; gap: 10px; padding: 0 13px 10px;
}
.ga-fold-txt { font-size: 11.5px; color: var(--muted); flex: 1; }
.ga-err {
margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12px;
background: rgba(220, 38, 38, 0.09); color: var(--red); line-height: 1.45;
}
.ga-foot {
margin-top: 14px; padding-top: 11px; border-top: 1px dashed var(--border-2);
font-size: 12.5px; color: var(--ink-2); font-weight: 500; text-align: right;
}
/* 紧凑版人员多选（弹窗里要塞多个，不能太高） */
.colored-multi-select.up-compact .option-list { max-height: 132px; }
.colored-multi-select.up-compact .option-row { padding: 5px 11px; }
.colored-multi-select.up-compact .selected-tags { min-height: 30px; padding: 6px 9px; }
.up-empty { font-size: 11.5px; color: var(--muted); line-height: 18px; }
.up-timerow { display: flex; gap: 10px; }
.up-timerow .field { flex: 1; margin-bottom: 10px; }
/* ---- 编辑弹窗 ---- */
.ge-form .ge-sec {
font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.2px;
margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.ge-form .ge-sec:not(:first-child) { margin-top: 18px; }
.ge-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ge-inline { display: flex; gap: 6px; align-items: center; }
.ge-hint { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.ge-tablewrap { border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.ge-table { width: 100%; border-collapse: collapse; }
.ge-table th {
font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-align: left;
padding: 7px 9px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ge-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ge-table tbody tr:last-child td { border-bottom: none; }
.ge-table tbody tr:hover { background: var(--grp-bg); }
.ge-no {
color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center;
}
.ge-table .modal-form input, .ge-table input, .ge-table select {
padding: 6px 9px !important; font-size: 12.5px !important; border-radius: 8px !important;
}
/* 排期弹窗内的撤销按钮 */
.ga-pick .ga-revoke { margin-left: 6px; flex-shrink: 0; }
.ga-pick.done .ga-pick-nm { color: var(--ink-3); }
.ga-fold .btn + .btn { margin-left: 6px; }
/* ============================================================
v7 UI 体系 · 语义色板 + 分离式卡片行 + 科技感底纹
纯追加层，不修改任何既有规则；如需回滚，整段删除即可
============================================================ */
:root{
--t-row: .22s cubic-bezier(.4,0,.2,1);
--t-fast: .15s ease;
--r-lg: 13px;
--cyan-2: #14b8d4;
--ink-5: #9fabbd;
--ink-4: #848fa0;
--c-red-bg:#fef2f2; --c-red-bd:#fecaca; --c-red-fg:#991b1b; --c-red-dot:#dc2626;
--c-orange-bg:#fff7ed;--c-orange-bd:#fed7aa;--c-orange-fg:#9a3412;--c-orange-dot:#ea580c;
--c-amber-bg:#fffbeb; --c-amber-bd:#fde68a; --c-amber-fg:#92400e; --c-amber-dot:#d97706;
--c-green-bg:#f0fdf4; --c-green-bd:#bbf7d0; --c-green-fg:#166534; --c-green-dot:#16a34a;
--c-teal-bg:#f0fdfa; --c-teal-bd:#99f6e4; --c-teal-fg:#115e59; --c-teal-dot:#0d9488;
--c-cyan-bg:#ecfeff; --c-cyan-bd:#a5f3fc; --c-cyan-fg:#0e7490; --c-cyan-dot:#0891b2;
--c-blue-bg:#eff6ff; --c-blue-bd:#bfdbfe; --c-blue-fg:#1e40af; --c-blue-dot:#2563eb;
--c-violet-bg:#faf5ff;--c-violet-bd:#e9d5ff;--c-violet-fg:#6b21a8;--c-violet-dot:#7c3aed;
--c-slate-bg:#f4f6f9; --c-slate-bd:#dfe4ec; --c-slate-fg:#475569; --c-slate-dot:#64748b;
}
/* 科技感底纹：固定层，不参与滚动，不拦截事件 */
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bgfx::before{
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(15,23,42,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(15,23,42,.028) 1px,transparent 1px);
background-size:40px 40px;
}
.bgfx::after{
content:'';position:absolute;inset:0;
background-image:repeating-linear-gradient(135deg,rgba(14,143,168,.035) 0 1px,transparent 1px 9px);
-webkit-mask-image:radial-gradient(120% 90% at 76% 4%,#000,transparent 68%);
mask-image:radial-gradient(120% 90% at 76% 4%,#000,transparent 68%);
}
.bgfx .glow{position:absolute;border-radius:50%;filter:blur(72px)}
.bgfx .g1{width:520px;height:520px;right:-140px;top:-180px;background:rgba(20,184,212,.16)}
.bgfx .g2{width:460px;height:460px;left:150px;bottom:-240px;background:rgba(37,99,235,.11)}
/* ---------- 语义色片 pill ---------- */
.pill{
display:inline-flex;align-items:center;gap:5px;
padding:2px 9px 2px 7px;border-radius:999px;
font-size:12px;line-height:18px;font-weight:500;
border:1px solid transparent;white-space:nowrap;
transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;flex:0 0 5px}
.pill-red{background:var(--c-red-bg);border-color:var(--c-red-bd);color:var(--c-red-fg)}
.pill-red::before{background:var(--c-red-dot)}
.pill-orange{background:var(--c-orange-bg);border-color:var(--c-orange-bd);color:var(--c-orange-fg)}
.pill-orange::before{background:var(--c-orange-dot)}
.pill-amber{background:var(--c-amber-bg);border-color:var(--c-amber-bd);color:var(--c-amber-fg)}
.pill-amber::before{background:var(--c-amber-dot)}
.pill-green{background:var(--c-green-bg);border-color:var(--c-green-bd);color:var(--c-green-fg)}
.pill-green::before{background:var(--c-green-dot)}
.pill-teal{background:var(--c-teal-bg);border-color:var(--c-teal-bd);color:var(--c-teal-fg)}
.pill-teal::before{background:var(--c-teal-dot)}
.pill-cyan{background:var(--c-cyan-bg);border-color:var(--c-cyan-bd);color:var(--c-cyan-fg)}
.pill-cyan::before{background:var(--c-cyan-dot)}
.pill-blue{background:var(--c-blue-bg);border-color:var(--c-blue-bd);color:var(--c-blue-fg)}
.pill-blue::before{background:var(--c-blue-dot)}
.pill-violet{background:var(--c-violet-bg);border-color:var(--c-violet-bd);color:var(--c-violet-fg)}
.pill-violet::before{background:var(--c-violet-dot)}
.pill-slate{background:var(--c-slate-bg);border-color:var(--c-slate-bd);color:var(--c-slate-fg)}
.pill-slate::before{background:var(--c-slate-dot)}
/* ---------- 等级章：方形，与 pill 区分 ---------- */
.lv{
display:inline-flex;align-items:center;justify-content:center;
min-width:38px;padding:2px 7px;border-radius:6px;
font-size:12px;line-height:18px;font-weight:600;letter-spacing:.3px;
border:1px solid transparent;
}
.lv-red{background:var(--c-red-bg);border-color:var(--c-red-bd);color:var(--c-red-fg)}
.lv-orange{background:var(--c-orange-bg);border-color:var(--c-orange-bd);color:var(--c-orange-fg)}
.lv-amber{background:var(--c-amber-bg);border-color:var(--c-amber-bd);color:var(--c-amber-fg)}
.lv-green{background:var(--c-green-bg);border-color:var(--c-green-bd);color:var(--c-green-fg)}
.lv-blue{background:var(--c-blue-bg);border-color:var(--c-blue-bd);color:var(--c-blue-fg)}
.lv-violet{background:var(--c-violet-bg);border-color:var(--c-violet-bd);color:var(--c-violet-fg)}
.lv-slate{background:var(--c-slate-bg);border-color:var(--c-slate-bd);color:var(--c-slate-fg)}
/* ---------- 下拉染色：本体可染，option 仅文字色 ---------- */
select.sel-tinted{
border-width:1px;border-style:solid;font-weight:500;
transition:border-color var(--t-fast),background-color var(--t-fast),box-shadow var(--t-fast);
}
select.sel-tinted:focus{box-shadow:0 0 0 3px rgba(14,143,168,.14)}
.sel-red{background:var(--c-red-bg);border-color:var(--c-red-bd);color:var(--c-red-fg)}
.sel-orange{background:var(--c-orange-bg);border-color:var(--c-orange-bd);color:var(--c-orange-fg)}
.sel-amber{background:var(--c-amber-bg);border-color:var(--c-amber-bd);color:var(--c-amber-fg)}
.sel-green{background:var(--c-green-bg);border-color:var(--c-green-bd);color:var(--c-green-fg)}
.sel-teal{background:var(--c-teal-bg);border-color:var(--c-teal-bd);color:var(--c-teal-fg)}
.sel-cyan{background:var(--c-cyan-bg);border-color:var(--c-cyan-bd);color:var(--c-cyan-fg)}
.sel-blue{background:var(--c-blue-bg);border-color:var(--c-blue-bd);color:var(--c-blue-fg)}
.sel-violet{background:var(--c-violet-bg);border-color:var(--c-violet-bd);color:var(--c-violet-fg)}
.sel-slate{background:var(--c-slate-bg);border-color:var(--c-slate-bd);color:var(--c-slate-fg)}
/* ============================================================
分离式卡片行 · 核心
作用域限定 .data-table.tbl-card，未加此类的表格完全不受影响
============================================================ */
.table-wrap{position:relative;z-index:1}
.data-table.tbl-card{
border-collapse:separate;
border-spacing:0 12px;
background:transparent;
position:relative;
}
/* 表头做成悬浮胶囊 */
.data-table.tbl-card thead th{
background:linear-gradient(180deg,#fbfdff,#f2f6fb);
border-bottom:none;
position:relative;
}
.data-table.tbl-card thead th:first-child{
border-radius:var(--radius) 0 0 var(--radius);
border-left:1px solid var(--line);
padding-left:19px;
}
.data-table.tbl-card thead th:last-child{
border-radius:0 var(--radius) var(--radius) 0;
border-right:1px solid var(--line);
}
.data-table.tbl-card thead th{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-table.tbl-card thead tr{position:relative}
/* 每行闭合成一张卡片 */
.data-table.tbl-card tbody td{
position:relative;
padding:13px 14px;
background:var(--surface);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
box-shadow:0 1px 2px rgba(15,23,42,.045);
transition:padding var(--t-row),background-color var(--t-row),
border-color var(--t-row),box-shadow var(--t-row);
}
.data-table.tbl-card tbody td:first-child{
border-left:1px solid var(--line);
border-radius:var(--r-lg) 0 0 var(--r-lg);
padding-left:19px;
}
.data-table.tbl-card tbody td:last-child{
border-right:1px solid var(--line);
border-radius:0 var(--r-lg) var(--r-lg) 0;
}
/* 覆盖既有斑马纹与分组底色：卡片形态下一律纯白底 */
.data-table.tbl-card tbody tr:nth-child(even){background:transparent}
.data-table.tbl-card tbody tr.grp-first > td,
.data-table.tbl-card tbody tr.grp-sub > td,
.data-table.tbl-card tbody tr.grp-alt.grp-first > td,
.data-table.tbl-card tbody tr.grp-alt.grp-sub > td{background:var(--surface)}
.data-table.tbl-card tbody tr.grp-last > td,
.data-table.tbl-card tbody tr:not(.grp-first):not(.grp-sub) > td{border-bottom:1px solid var(--line)}
.data-table.tbl-card tbody tr.grp-sub > td{border-top:1px solid var(--line)}
.data-table.tbl-card tbody tr:last-child > td{border-bottom:1px solid var(--line)}
/* 合并单元格在卡片形态下保持纯净背景 */
.data-table.tbl-card td.td-merged,
.data-table.tbl-card tbody tr.grp-alt td.td-merged{
background:var(--surface);
vertical-align:middle;
}
/* 左缘状态色带常驻 */
.data-table.tbl-card tbody td:first-child::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
border-radius:var(--r-lg) 0 0 var(--r-lg);
background:linear-gradient(180deg,var(--cyan-2),var(--cyan));
opacity:.34;
transition:opacity var(--t-row),width var(--t-row);
}
/* ---------- hover：卡片浮起 + 描边点亮 + 内容微放大 ---------- */
.data-table.tbl-card tbody tr.hot{position:relative;z-index:2}
.data-table.tbl-card tbody tr.hot > td{
padding-top:18px;padding-bottom:18px;
background:linear-gradient(180deg,#ffffff,#f7fdff);
border-top-color:rgba(14,143,168,.42);
border-bottom-color:rgba(14,143,168,.42);
box-shadow:0 8px 22px -8px rgba(14,143,168,.42),
0 2px 6px rgba(15,23,42,.07),
inset 0 1px 0 rgba(255,255,255,.9);
}
.data-table.tbl-card tbody tr.hot > td:first-child{border-left-color:rgba(14,143,168,.42)}
.data-table.tbl-card tbody tr.hot > td:last-child{border-right-color:rgba(14,143,168,.42)}
.data-table.tbl-card tbody tr.hot > td:first-child::before{opacity:1;width:5px}
/* 内容层单独缩放：td 盒不动，rowspan 不会撕裂 */
.data-table.tbl-card tbody td > .cw{
display:inline-block;transform-origin:left center;
transition:transform var(--t-row);
}
.data-table.tbl-card tbody tr.hot > td > .cw{transform:scale(1.05)}
.data-table.tbl-card tbody td.td-merged > .cw{transform-origin:center center}
/* 覆盖既有 hover 底色，避免与卡片渐变打架 */
.data-table.tbl-card tbody tr:hover{background:transparent}
.data-table.tbl-card.tbl-grouped tbody tr:hover > td:not(.td-merged){background:transparent}
.data-table.tbl-card tbody tr.hot > td.td-merged{
background:linear-gradient(180deg,#ffffff,#f7fdff);
}
/* 顶缘扫描光带 */
@keyframes pmsSweep{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
.data-table.tbl-card tbody tr > td:first-child .scan{
position:absolute;left:0;top:0;height:1.5px;width:34%;
background:linear-gradient(90deg,transparent,var(--cyan-2),transparent);
pointer-events:none;
}
.data-table.tbl-card tbody tr.hot > td:first-child .scan{
animation:pmsSweep 1.15s cubic-bezier(.4,0,.2,1);
}
/* SCENE_DAYS_V1：进行中卡片四边框跟随天数档位色（覆盖 tbl-card 默认灰 --line 边框）。
写在 hover 规则之后，保证 hover 时警示色不被青色高亮盖掉（hover 的浮起/放大仍生效）。 */
.data-table.tbl-card tbody tr.row-scene-red > td { border-color: var(--red); border-width: 2px; }
.data-table.tbl-card tbody tr.row-scene-orange > td { border-color: var(--orange); border-width: 2px; }
.data-table.tbl-card tbody tr.row-scene-yellow > td { border-color: var(--yellow); border-width: 2px; }
.data-table.tbl-card tbody tr.row-scene-green > td { border-color: var(--green); border-width: 2px; }
/* 左缘状态色带同步档位色（默认是青色渐变，警示行改成与边框一致的档位色） */
.data-table.tbl-card tbody tr.row-scene-red > td:first-child::before { background: var(--red); opacity: .85; }
.data-table.tbl-card tbody tr.row-scene-orange > td:first-child::before { background: var(--orange); opacity: .85; }
.data-table.tbl-card tbody tr.row-scene-yellow > td:first-child::before { background: var(--yellow); opacity: .85; }
.data-table.tbl-card tbody tr.row-scene-green > td:first-child::before { background: var(--green); opacity: .85; }
/* 组内连接：同订单相邻卡片用竖线串联，跨过 12px 缝隙 */
.data-table.tbl-card tbody tr.g-mid > td:first-child::after,
.data-table.tbl-card tbody tr.g-end > td:first-child::after{
content:'';position:absolute;left:1.5px;top:-13px;height:14px;width:1px;
background:rgba(14,143,168,.34);
}
/* 列十字高亮 */
.data-table.tbl-card thead th.col-hot{
background:linear-gradient(180deg,#f0fbfe,#e6f6fb);
color:var(--cyan);
}
/* 鼠标跟随光斑 */
.data-table.tbl-card tbody tr.hot > td::after{
content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
border-radius:inherit;
background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(20,184,212,.16),transparent 62%);
transition:opacity var(--t-fast);
}
.data-table.tbl-card tbody tr.hot > td.lit::after{opacity:1}
@media (prefers-reduced-motion: reduce){
.data-table.tbl-card tbody tr.hot > td > .cw{transform:none}
.data-table.tbl-card tbody tr.hot > td:first-child .scan{animation:none}
}
/* ============================================================
全局风格统一层 · 让非表格区域与卡片行同调
============================================================ */
/* KPI 卡片：与行卡片同一套圆角、阴影、hover 手法 */
.kpi-card{
border-radius:var(--r-lg);
box-shadow:0 1px 2px rgba(15,23,42,.045);
transition:transform var(--t-row),box-shadow var(--t-row),border-color var(--t-row);
}
.kpi-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 22px -8px rgba(14,143,168,.34),0 2px 6px rgba(15,23,42,.06);
border-color:rgba(14,143,168,.32);
}
.kpi-card::before{width:4px;border-radius:var(--r-lg) 0 0 var(--r-lg);opacity:.85}
.kpi-card:hover::before{opacity:1}
.kpi-value{font-variant-numeric:tabular-nums}
/* 项目卡 / 客户分组：统一圆角与浮起 */
.proj-card,.cust-group{
border-radius:var(--r-lg);
transition:box-shadow var(--t-row),border-color var(--t-row);
}
.proj-card:hover,.cust-group:hover{
box-shadow:0 6px 18px -8px rgba(14,143,168,.30);
border-color:rgba(14,143,168,.26);
}
/* 面板与工具栏 */
.panel,.toolbar,.filter-bar{border-radius:var(--r-lg)}
/* 按钮统一交互反馈 */
.btn,button.btn{transition:transform var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast)}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* 弹窗：圆角与阴影对齐 */
.modal,.modal-box,.modal-content{border-radius:16px}
.modal-body{position:relative}
/* 空值横杆：提到 AA 可读区间 */
.data-table td.cell-empty,.cell-empty{color:var(--ink-5)}
/* 数字列等宽对齐 */
.data-table td.col-idx,.data-table td.col-batch{font-variant-numeric:tabular-nums}
/* 滚动条 */
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-thumb{
background:rgba(14,143,168,.26);border-radius:8px;
border:2px solid transparent;background-clip:padding-box;
}
.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(14,143,168,.42);background-clip:padding-box}
.table-wrap::-webkit-scrollbar-track{background:transparent}
/* 内容层压在底纹之上 */
.app-shell,.app-main,.main,.content,.sidebar,.topbar{position:relative;z-index:1}
/* ============================================================
v7.1 修补层：详情行（row-detail）不参与卡片化
问题：colspan=99 的单 td 同时命中 :first-child 与 :last-child，
被误加白底 / 双侧圆角 / 左缘光带，且被 border-spacing 切出 12px 间隙。
目标：详情行回归灰底方角，视觉上紧贴主行属于同一张卡。
============================================================ */
.data-table.tbl-card tbody tr.row-detail > td{
background:var(--bg-2);
border-radius:0;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
border-top:2px solid rgba(8,145,178,.28);
border-bottom:1px solid var(--line);
box-shadow:0 4px 10px -6px rgba(15,23,42,.10);
padding:16px 18px;
vertical-align:top;
}
/* 详情行不要左缘光带与扫描光带 */
.data-table.tbl-card tbody tr.row-detail > td::before,
.data-table.tbl-card tbody tr.row-detail > td::after{content:none}
/* 详情行不参与 hover 抬升与缩放 */
.data-table.tbl-card tbody tr.row-detail > td > .cw{transform:none}
/* 主行若紧跟详情行：底部收平，与详情行连成一体 */
.data-table.tbl-card tbody tr.has-detail > td{
border-bottom-color:transparent;
box-shadow:none;
}
.data-table.tbl-card tbody tr.has-detail > td:first-child{border-bottom-left-radius:0}
.data-table.tbl-card tbody tr.has-detail > td:last-child{border-bottom-right-radius:0}
/* 展开态主行左缘光带加强，提示"当前展开项" */
.data-table.tbl-card tbody tr.has-detail > td:first-child::before{opacity:.85;width:4px}
/* 详情行内字段栅格在灰底上的可读性微调 */
.data-table.tbl-card tbody tr.row-detail .proj-field-label{color:var(--ink-4)}
.data-table.tbl-card tbody tr.row-detail .proj-field-value{color:var(--ink-1)}
/* ============================================================
v7.2 修补层：下拉染色特异性提升
问题：.modal-form select（0,2,0）压过单类 .sel-blue（0,1,0），
导致 class 已加但背景不变。
注意：原规则用 background-image 画下拉箭头，
这里只覆盖 background-color，绝不用 background 简写，
否则箭头会被一并擦除。
============================================================ */
.modal-form select.sel-tinted,
select.sel-tinted{
border-width:1px;border-style:solid;font-weight:500;
}
.modal-form select.sel-red, select.sel-red {background-color:var(--c-red-bg);border-color:var(--c-red-bd);color:var(--c-red-fg)}
.modal-form select.sel-orange, select.sel-orange{background-color:var(--c-orange-bg);border-color:var(--c-orange-bd);color:var(--c-orange-fg)}
.modal-form select.sel-amber, select.sel-amber {background-color:var(--c-amber-bg);border-color:var(--c-amber-bd);color:var(--c-amber-fg)}
.modal-form select.sel-green, select.sel-green {background-color:var(--c-green-bg);border-color:var(--c-green-bd);color:var(--c-green-fg)}
.modal-form select.sel-teal, select.sel-teal {background-color:var(--c-teal-bg);border-color:var(--c-teal-bd);color:var(--c-teal-fg)}
.modal-form select.sel-cyan, select.sel-cyan {background-color:var(--c-cyan-bg);border-color:var(--c-cyan-bd);color:var(--c-cyan-fg)}
.modal-form select.sel-blue, select.sel-blue {background-color:var(--c-blue-bg);border-color:var(--c-blue-bd);color:var(--c-blue-fg)}
.modal-form select.sel-violet, select.sel-violet{background-color:var(--c-violet-bg);border-color:var(--c-violet-bd);color:var(--c-violet-fg)}
.modal-form select.sel-slate, select.sel-slate {background-color:var(--c-slate-bg);border-color:var(--c-slate-bd);color:var(--c-slate-fg)}
/* 染色态下拉的箭头改用深色描边，避免浅灰在彩底上看不清 */
.modal-form select.sel-tinted{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23475569' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* option 在展开面板里保持中性底，避免系统渲染差异 */
.modal-form select.sel-tinted option{background-color:var(--surface);color:var(--ink)}
/* ============================================================
v7.3 修补层（最终版）：详情行归属感
主行与详情行之间的 12px 是 border-spacing 的表级行为，
曾试 display:block + 负 margin 消除，但 td 会脱离表格宽度计算
（实测宽度从 1460 塌到 288），已回退。
改为顺势而为：把这 12px 当作刻意留白，
用左缘同色光带 + 上方连接线明确"详情属于上一行"。
============================================================ */
.data-table.tbl-card tbody tr.row-detail > td{
border-left:3px solid rgba(14,143,168,.42);
padding-left:16px;
}
/* 连接线：从主行底部穿过 12px 间隙落到详情行 */
.data-table.tbl-card tbody tr.has-detail > td:first-child::after{
content:'';position:absolute;left:0;bottom:-13px;
width:3px;height:13px;
background:rgba(14,143,168,.42);
}
/* ============================================================
v7.4 修补层：操作列按钮强制单行
实测：三按钮「加入排期池/编辑/删除」需 170px，
td 内容区仅 172px，余量 2px —— 窗口稍窄或字体缩放即换行。
① flex-wrap 改 nowrap，杜绝一上一下
② 给操作列 min-width 留足余量，避免挤压变形
③ 按钮本身 white-space:nowrap，防止「加入排期池」内部断字
============================================================ */
.data-table .actions{
display:flex;
gap:6px;
flex-wrap:nowrap; /* 原为 wrap，是换行的直接原因 */
align-items:center;
white-space:nowrap;
}
.data-table .actions > .btn{
flex:0 0 auto; /* 不参与压缩，保持完整宽度 */
white-space:nowrap;
}
/* 操作列整体留足宽度。
订单未流转页签在「未签合同订单」上会出现 4 按钮
（加入排期池 / 补录合同 / 编辑 / 删除），实测内容宽 240px；
210px 下余量只剩 1px，换机器字体稍有差异就会换行，故提到 282px。 */
.data-table td.actions,
.data-table th:last-child{
min-width:340px;
}
/* ===== v7.5 撤销排期弹窗 ===== */
.rvk-wrap .confirm-danger{margin-bottom:12px}
.rvk-list{
display:flex;flex-direction:column;gap:6px;
max-height:300px;overflow:auto;
padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);
}
.rvk-item{
display:flex;align-items:center;gap:9px;
padding:8px 10px;border-radius:6px;cursor:pointer;
background:var(--surface);border:1px solid var(--line);
transition:background .15s,border-color .15s;
}
.rvk-item:hover{background:#fff7ed;border-color:#fdba74}
.rvk-item input[type=checkbox]{width:15px;height:15px;flex:0 0 auto;cursor:pointer;accent-color:#dc2626}
.rvk-txt{font-size:13px;color:var(--ink);line-height:1.5}
.rvk-count{margin-top:10px;text-align:right;font-weight:600}
/* 因业务前置条件被锁的按钮：区别于普通 disabled，给出可解释的视觉 */
.data-table .btn.btn-locked,
.data-table .btn.btn-locked:hover{
background:var(--bg-2)!important;
color:#94a3b8!important;
border-color:var(--line)!important;
cursor:not-allowed;
opacity:1;
box-shadow:none;
}
/* ===== v7.6 排期信息列（三行：人员 / 时间 / 地点）===== */
.data-table th.col-schedinfo{width:200px}
.data-table td.col-schedinfo{vertical-align:middle}
.sinfo{display:flex;flex-direction:column;gap:4px;line-height:1.35}
.sinfo-line{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.sinfo-k{
flex:0 0 auto;font-size:11px;color:#64748b;
background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
padding:1px 5px;letter-spacing:.5px;
}
.sinfo-v{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.sinfo-v.is-empty{color:#cbd5e1}
.si-who .sinfo-v{font-weight:600}
.si-when .sinfo-v{font-variant-numeric:tabular-nums;letter-spacing:.2px}
.sinfo-tag{align-self:flex-start;margin-top:3px}
/* ===== v7.7 合同缺失标记 ===== */
/* crimson 比现有 red 更重一档：red 已被「四级 / 紧急」占用，
合同缺失需要在同屏中压过它们，故单开色阶而非复用。 */
:root{
--c-crimson-bg:#fee2e2; --c-crimson-bd:#fca5a5;
--c-crimson-fg:#7f1d1d; --c-crimson-dot:#b91c1c;
}
.pill-crimson{background:var(--c-crimson-bg);border-color:var(--c-crimson-bd);color:var(--c-crimson-fg);font-weight:600}
.pill-crimson::before{background:var(--c-crimson-dot)}
.lv-crimson{background:var(--c-crimson-bg);border-color:var(--c-crimson-bd);color:var(--c-crimson-fg)}
.sel-crimson{background:var(--c-crimson-bg);border-color:var(--c-crimson-bd);color:var(--c-crimson-fg)}
/* .modal-form select 特异性 0,2,0 会压过单类，必须带上下文重写一遍。
只写 background-color，写 background 简写会擦掉箭头 background-image。 */
.modal-form select.sel-tinted.sel-crimson,
.modal-form select.sel-crimson,
select.sel-crimson{
background-color:var(--c-crimson-bg);
border-color:var(--c-crimson-bd);
color:var(--c-crimson-fg);font-weight:600
}
/* 行级标记：左缘深红光带。用 box-shadow inset 而非 border-left，
避免撑开 td 盒模型导致列宽整体位移。 */
.data-table tbody tr.row-nocontract > td:first-child{
box-shadow:inset 3px 0 0 0 var(--c-crimson-dot)
}
.data-table tbody tr.row-nocontract > td{background-color:#fffafa}
.data-table tbody tr.row-nocontract:hover > td{background-color:#fff5f5}
/* 补录合同按钮：深红描边，与「删除」的实心红区分开 */
.btn-fillctr{
background:#fff;border-color:var(--c-crimson-bd);
color:var(--c-crimson-fg);font-weight:600
}
.btn-fillctr:hover{background:var(--c-crimson-bg);border-color:var(--c-crimson-dot)}
/* 补录合同弹窗内的提示条 */
.ctr-tip{
background:var(--c-crimson-bg);border:1px solid var(--c-crimson-bd);
color:var(--c-crimson-fg);border-radius:8px;padding:9px 11px;
font-size:12.5px;line-height:1.6;margin-bottom:10px
}
/* ===== 子模块状态卡片（方案D：子模块从侧栏上移到内容区）===== */
.subtabs-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.subtab-card{flex:1 1 0;min-width:96px;background:var(--surface);border:1px solid var(--border);border-left:3px solid transparent;border-radius:10px;padding:8px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,background .15s}
.subtab-card:hover{border-color:var(--ink-4);border-left-color:var(--ink-4)}
.subtab-card.active{border-left-color:var(--cyan);background:rgba(8,145,178,.06);border-color:rgba(8,145,178,.35);border-left-width:3px}
.subtab-card.is-abn .subtab-count{color:var(--red,#dc2626)}
.subtab-name{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtab-card.active .subtab-name{color:var(--cyan);font-weight:500}
.subtab-count{font-size:19px;font-weight:600;color:var(--ink);line-height:1.2}
@media (max-width:1280px){.subtab-card{min-width:86px;padding:7px 10px}.subtab-count{font-size:17px}}
/* ===== 六阶段轨道（交付中心·进行中）===== */
.cell-stagetrack{min-width:360px}
.stg-track{display:flex;gap:3px}
.stg-box{flex:1 1 0;min-width:52px;border-top:2px solid var(--border);border-radius:4px;padding:4px 3px;line-height:1.55;overflow:hidden}
.stg-nm{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-tm{font-size:10.5px;font-weight:500}
.stg-ow{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-done{background:#e1f5ee;border-top-color:#0f6e56}
.stg-done .stg-nm{color:#085041}
.stg-done .stg-tm{color:#0f6e56}
.stg-cur{background:#faeeda;border-top-color:#ba7517}
.stg-cur .stg-nm{color:#633806}
.stg-cur .stg-tm{color:#854f0b}
.stg-todo{background:var(--bg2,#f8fafc)}
.stg-todo .stg-nm,.stg-todo .stg-tm{color:var(--muted)}
/* STAGE_V2_CSS：轨道格从三行（名/时间/负责人）改为两行（名/状态摘要），
六阶段并排且第 4 格「问题清单出具」名字最长，故整列加宽并允许摘要换行到 2 行。 */
.cell-stagetrack{min-width:430px}
.stg-box{padding:4px 4px}
.stg-tm{font-size:10px;line-height:1.4;white-space:normal;word-break:break-all}
.stg-na{background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 4px,#e2e8f0 4px,#e2e8f0 8px)}
.stg-na .stg-nm,.stg-na .stg-tm{color:#94a3b8}
/* ===== DONEVIEW_CSS：完结时间列（已完结页，替代阶段轨道列位）=====
轨道列 min-width 430px 是为六格横排留的；完结时间只有一个日期，
收窄到 96px，把省下的宽度还给前面的业务列。
两行结构：主行日期（等宽数字便于纵向对齐扫读）+ 副行来源标注。
来源标注用 --muted 弱化，它是口径说明不是主信息。 */
.cell-finishtime{min-width:96px}
.fin-box{line-height:1.5}
.fin-d{font-size:12px;font-weight:500;color:var(--ink-2);
font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-s{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* ===== CCHK_RANGE_CSS：合规打卡时间段列（CCHK_RANGE_V1）=====
原先是单个日期的普通文本列，改成起止区间后仍只给一格 ——
两端总是一起看，拆两列白占一半横向宽度。
结构与 .fin-box 同构（主行区间 + 副行天数），故样式直接对齐它，
保证同一张表里两个「日期+标注」列的字号行高完全一致。
min-width 106px：容得下 '08-25 ~ 08-27' 且不换行（比 fin 的 96px 宽 10px）。 */
.cell-cchk{min-width:106px}
.cchk-box{line-height:1.5}
.cchk-d{font-size:12px;font-weight:500;color:var(--ink-2);
font-variant-numeric:tabular-nums;white-space:nowrap}
.cchk-s{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* 「缺开始」是补录提示而非正常状态，用 crimson 前景色点出来 ——
只有结束没有开始的区间算不出天数，报表里会静默漏算工期。 */
.cchk-warn{color:var(--c-crimson-dot);font-weight:600}
/* 业主/系统 与 交付订单信息 复合列 */
.cell-ownersys{min-width:130px}
.oi-dim .oi-val{color:var(--muted);font-size:11.5px}
/* 推进阶段弹窗 */
/* ===== 推进阶段弹窗 v2（ADVUI_V1）=====
改造前它是独立一套 .adv-* 视觉：标签横排 70px 定宽、无分组标题、虚线分隔、
容器 400px 单列，与系统其它弹窗（.dlv-edit + .field/.field-row）明显不是一家。
现统一到编辑弹窗体系：容器同宽 560px、标签竖排在控件之上、分组用小标题 +
实线下边框、同类字段两列并排。JS 侧仍复用 .field/.field-row 公共类，
本节只补推进弹窗特有的部分（阶段选择条、日期范围、审核轮次）。 */
.adv-wrap{min-width:560px}
.adv-hint{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:2px}
/* 阶段选择条：弹窗的主开关，给浅底强调，与下方表单区分开 */
.adv-pick{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:2px;
background:var(--bg-2);border:1px solid var(--border);border-radius:6px}
.adv-pick-lb{flex:0 0 auto;font-size:12px;font-weight:500;color:var(--ink-2)}
.adv-pick select{flex:1;min-width:0}
.adv-pane{display:block}
.adv-grp{display:none}
/* 日期范围：两个日期框 + 「至」，占满一个 field 宽度 */
.adv-range{display:flex;align-items:center;gap:7px}
.adv-range input{flex:1;min-width:0}
.adv-tilde{font-size:12px;color:var(--muted);flex:0 0 auto}
/* 数值 + 单位（符合率 % / 隐患数量 项） */
.adv-num{display:flex;align-items:center;gap:7px}
.adv-num input{flex:1;min-width:0}
.adv-num .adv-unit{font-size:12px;color:var(--ink-3);flex:none}
/* 审核轮次：每轮一行，轮次名 + 提交/反馈两个日期 + 删除 */
.adv-rev-wrap{margin-bottom:13px}
.adv-rev-t{font-size:12px;color:var(--ink-3);letter-spacing:.1px;margin-bottom:6px}
.adv-rev{display:flex;flex-direction:column;gap:7px}
.adv-rev-row{display:flex;align-items:center;gap:8px;padding:7px 9px;
background:var(--bg-2);border:1px solid var(--border);border-radius:6px}
.adv-rev-lb{flex:0 0 62px;font-size:12px;color:var(--ink-2);font-weight:500}
.adv-rev-f{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.adv-rev-k{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.adv-rev-f input{flex:1;min-width:0}
.adv-rev-row .btn{flex:0 0 auto}
.adv-rev-add{margin-top:7px}
/* 推进弹窗复用 .dlv-edit 的分组标题与字段样式，故此处不再重复定义；
.adv-wrap 会同时挂 dlv-edit 类（见 grid.js showAdvanceStageModal）。 */
/* 详情区·阶段明细 */
.stgd-list{display:flex;flex-direction:column;gap:6px}
.stgd-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.stgd-nm{flex:0 0 92px;font-size:12px;font-weight:500;color:var(--ink,#0f172a)}
.stgd-pill{flex:0 0 auto;font-size:10.5px;padding:1px 7px;border-radius:9px;line-height:1.7}
.stgd-pill.is-done{background:#e1f5ee;color:#0f6e56}
.stgd-pill.is-doing{background:#faeeda;color:#ba7517}
.stgd-pill.is-todo{background:var(--bg2,#f1f5f9);color:var(--muted)}
.stgd-body{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 240px}
.stgd-kv{font-size:11.5px;white-space:nowrap}
.stgd-k{color:var(--muted);margin-right:5px}
.stgd-v{color:var(--ink,#0f172a)}
/* ===== 交付中心详情展开区·分组布局 ===== */
.row-detail .dtl-sec{margin:0 0 12px}
.row-detail .dtl-sec:last-child{margin-bottom:0}
.row-detail .dtl-sec-t{font-size:12px;font-weight:600;color:var(--fg-2,#475569);
letter-spacing:.3px;padding:0 0 6px;margin-bottom:8px;border-bottom:1px dashed var(--border)}
.row-detail .dtl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 16px}
.row-detail .dtl-sec-wide .dtl-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.row-detail .dtl-grid .proj-field{min-width:0}
.row-detail .dtl-grid .proj-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-detail .dtl-sec-wide .proj-field-value{white-space:normal;line-height:1.6}
.row-detail .pf-empty .proj-field-value{color:var(--muted);opacity:.55}
/* ===== 交付编辑弹窗 v2：分组小标题 + 只读展示块 ===== */
.dlv-edit{min-width:560px}
.dlv-edit .dlv-sec-t{font-size:12px;font-weight:600;color:var(--fg-2,#475569);letter-spacing:.3px;
margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.dlv-edit .dlv-sec-t:first-child{margin-top:0}
.dlv-edit .dlv-sec-h{font-weight:400;color:var(--muted);margin-left:8px;font-size:11.5px}
.dlv-edit .dlv-ro{min-height:32px;display:flex;align-items:center;padding:0 9px;
background:var(--bg-2,#f8fafc);border:1px dashed var(--border);border-radius:5px;
font-size:12.5px;color:var(--fg-2,#475569);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== 流转二次确认弹窗（开始实施 / 退回未开始）=====
两个弹窗（confirmStartDelivery / confirmRevertDelivery）共用这套类。
信息块用只读 kv 行而非表单控件，避免让人以为能在确认框里改数据。 */
.cfm-box{min-width:420px;display:flex;flex-direction:column;gap:10px}
.cfm-note{font-size:12.5px;color:var(--fg-2,#475569);line-height:1.7}
/* CFM_FORM_V2：6px → 10px。输入框走全站表单标准 10px（.modal-form 同值），
信息块留 6px 会让同一张卡片出现两种圆角，是「风格不统一」的第二处来源。
改信息块而不是改输入框：输入框的 10px 与其它 10 个弹窗一致，动它会引入更大范围的割裂。 */
.cfm-kv{display:flex;flex-direction:column;gap:6px;padding:10px 12px;
background:var(--bg-2,#f8fafc);border:1px solid var(--border);border-radius:10px}
.cfm-line{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.6}
.cfm-k{flex:0 0 104px;color:var(--muted)}
.cfm-v{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm-v.is-empty{color:var(--muted);opacity:.55}
.cfm-warn{font-size:12px;color:#92400e;background:#fffbeb;border:1px solid #fcd34d;
border-radius:8px;padding:7px 10px;line-height:1.6} /* CFM_FORM_V2：对齐 .form-tip 的 8px */
.cfm-box textarea{width:100%;min-height:62px;resize:vertical;padding:7px 9px;
border:1px solid var(--border);border-radius:5px;font-size:12.5px;
font-family:inherit;color:var(--fg);background:var(--bg-1,#fff);box-sizing:border-box}
.cfm-box textarea:focus{outline:none;border-color:var(--primary,#2563eb)}
.cfm-box .ga-hint{font-size:12px;color:var(--muted);line-height:1.6}
/* ===== CFM_FORM_V1：确认弹窗内表单控件接入全站样式 =====
问题：六个 .cfm-box 确认弹窗（完结/开始实施/退回未开始/退回进行中/归档/撤销归档）
容器只挂了 .cfm-box，**没有 .modal-form**，而全站输入框样式全部选择器都以
`.modal-form` 开头（第 325 行起）。结果这些弹窗里的 /
完全退化成浏览器原生控件：
font-family: monospace / border: 2px inset #767676 / padding: 0 / radius: 0
—— 与同一张卡片里 .cfm-kv 的 6px 圆角、13.5px 无衬线字形成明显割裂（用户反馈
「归档日期选择的框 ui 风格不统一」指的就是这个）。
为什么不给 JS 加 modal-form 类了事：
`.modal-form .field { margin-bottom: 10px/13px }` 会和 .cfm-box 的
`display:flex; gap:10px` 叠加成 23px 间距，破坏确认弹窗刻意压紧的节奏；
另有 .modal-form select 的一整套染色规则（sel-* 系列）会连带生效。
故在此单独对齐「控件本体」的视觉，不引入布局层副作用。
数值与 .modal-form 保持一致（padding 9px 12px / radius 10px / 13.5px /
--border-2 / --bg-2 / --font），focus 环同为 3px blue @10%。 */
.cfm-box input[type='text'],
.cfm-box input[type='date'],
.cfm-box input[type='number'],
.cfm-box select,
.cfm-box textarea{
width:100%; box-sizing:border-box;
padding:9px 12px; border:1px solid var(--border-2); border-radius:10px;
font-size:13.5px; font-family:var(--font); line-height:1.4;
background:var(--bg-2); color:var(--ink); outline:none;
transition:border-color .15s, box-shadow .15s;
}
.cfm-box input[type='text']:hover,
.cfm-box input[type='date']:hover,
.cfm-box input[type='number']:hover,
.cfm-box select:hover,
.cfm-box textarea:hover{ border-color:var(--ink-4); }
.cfm-box input:focus,
.cfm-box select:focus,
.cfm-box textarea:focus{
border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.cfm-box input::placeholder,
.cfm-box textarea::placeholder{ color:var(--ink-4); }
/* 日期框：原生 calendar 图标默认偏灰且贴边，与 12px 内边距不协调 */
.cfm-box input[type='date']{ min-height:38px; }
.cfm-box input[type='date']::-webkit-calendar-picker-indicator{
cursor:pointer; opacity:.55; transition:opacity .15s;
}
.cfm-box input[type='date']:hover::-webkit-calendar-picker-indicator{ opacity:.9; }
/* textarea 已有一份旧规则（上方 .cfm-box textarea），这里覆盖它的 5px 圆角与
12.5px 字号，统一到 10px / 13.5px；min-height 保留旧值不动。 */
.cfm-box textarea{ min-height:62px; resize:vertical; }
/* 标签：.cfm-box 未继承 .modal-form .field label，自行对齐 12.5px / --ink-2 */
.cfm-box .field{ margin-bottom:0; }
/* CFM_FORM_V3：探针实测基准弹窗（.modal-form.dlv-edit）的 label 是 12px / --ink-3
—— 第 622 行的后置规则覆盖了第 324 行的 12.5px / --ink-2。
照抄最终生效值，而不是照抄第一条规则，否则确认弹窗的标签会比编辑弹窗大半号。 */
.cfm-box .field label{
display:block; font-size:12px; color:var(--ink-3);
letter-spacing:.1px; margin-bottom:5px; font-weight:500;
}
/* ===== 交付编辑弹窗·人员多选（DLV_EDIT_V3）=====
测评成员 / 渗透人员改用 buildUserPicker 多选，控件较高故各占整行。
pp-legacy 用于展示无法映射成 userId 的历史手填值。 */
.dlv-edit .pp-legacy{font-size:11.5px;color:#92400e;background:#fffbeb;
border:1px solid #fcd34d;border-radius:4px;padding:4px 8px;margin-bottom:6px;line-height:1.5}
.dlv-edit .colored-multi-select{border-radius:6px}
.dlv-edit .colored-multi-select.up-compact .option-list{max-height:118px}
.dlv-edit .field > .colored-multi-select,
.dlv-edit .field > div > .colored-multi-select{width:100%}
/* ===== REPDONE_CSS：报告完成三项 + 详情跨列长文本 ===== */
/* 详情区跨列字段：整行铺开、允许换行（问题/风险说明这类长文本，
在 190px 的 auto-fill 窄格里会被 ellipsis 截成一行，信息不可读） */
.row-detail .dtl-grid .proj-field.pf-span{grid-column:1/-1}
.row-detail .dtl-grid .proj-field.pf-span .proj-field-value{
white-space:pre-wrap;overflow:visible;text-overflow:clip;line-height:1.65}
/* ===== CCHK_FIX：详情区双格宽字段（合规打卡时间段）=====
dtl-grid 是 minmax(190px,1fr) 的 auto-fill 网格，单格减去 72px 标签只剩约 114px 可用，
而「2026-03-02 ~ 2026-03-04（3 天）」实测需要 198px —— 基类的 nowrap+ellipsis
会把它截成「2026-03-02 ~ 202...」，结束日期整个看不见。
区间值天然是单格字段的约两倍长（两个完整日期 + 连接符 + 派生天数），
故占两格（2*190+16=396px，去掉标签仍余 300+px）而不是整行 pf-span ——
整行会为一个短值空出大半行，把同组后续字段挤到下一行。
同时放开换行并 keep-all：极窄容器下退化成两行，也绝不再截断日期。 */
.row-detail .dtl-grid .proj-field.pf-w2{grid-column:span 2}
.row-detail .dtl-grid .proj-field.pf-w2 .proj-field-value{
white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;line-height:1.5}
/* 推进阶段弹窗：数字输入 + 单位后缀 */
/* ADVUI_V1：.adv-num 已并入推进阶段弹窗 v2 节，此处旧定义移除 */
/* ===== ARCH_FE5：详情区「报告审核轮次」复合字段 =====
多轮审核是一组等宽的「提交 → 反馈」记录，用竖排小行而非逐个 kv：
轮次数量不定（一审到五审都有），逐个 kv 会把整组标签列撑得很长。 */
.rvw-list{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.rvw-item{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.5}
.rvw-n{flex:0 0 auto;min-width:38px;padding:0 5px;border-radius:4px;
background:var(--bg-2);color:var(--ink-2);font-size:10.5px;font-weight:500;text-align:center}
.rvw-d{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rvw-arr{color:var(--muted);font-size:10.5px}
/* ===== ARCH_CSS：工作量分配（归档中心列表徽标 + 详情摘要 + 分配弹窗）===== */
/* 列表「工作量分配」列：三枚小徽标横排，绿=已分配 灰=无需 红=未分配。
min-width 按三枚徽标最宽态（测评 3 / 咨询 2 / 渗透 2）估算，不足会换行破坏行高一致。 */
.cell-workload{min-width:172px}
.wlc-box{display:flex;gap:4px;flex-wrap:nowrap}
.wlc-t{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;
border:1px solid transparent;font-size:10.5px;line-height:1.6;white-space:nowrap;
font-variant-numeric:tabular-nums;cursor:default}
.wlc-ok{background:var(--c-green-bg);border-color:var(--c-green-bd);color:var(--c-green-fg)}
.wlc-miss{background:var(--c-crimson-bg,rgba(220,38,38,.08));
border-color:var(--c-crimson-bd,rgba(220,38,38,.24));color:var(--red)}
.wlc-na{background:var(--bg-2);border-color:var(--line);color:var(--muted)}
/* 详情区「工作量分配」摘要：三行竖排，与报告审核轮次同构 */
.wl-list{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.wl-item{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.5}
.wl-n{flex:0 0 auto;min-width:46px;padding:0 5px;border-radius:4px;background:var(--bg-2);
color:var(--ink-2);font-size:10.5px;font-weight:500;text-align:center}
.wl-ok{color:var(--c-green-fg);font-variant-numeric:tabular-nums}
.wl-miss{color:var(--red)}
.wl-na{color:var(--muted)}
/* 分配弹窗：三个维度各一块，块内可增删行 */
.wlm-wrap{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow-y:auto;padding-right:2px}
.wlm-sec{border:1px solid var(--line);border-radius:8px;padding:9px 11px 10px;background:var(--surface)}
.wlm-sec.wlm-off{background:var(--bg-2);opacity:.78}
.wlm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.wlm-title{font-size:12.5px;font-weight:600;color:var(--ink)}
/* 合计数字用等宽，输入过程中位数变化不抖动 */
.wlm-sum{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wlm-sum-ok{color:var(--c-green-fg);font-weight:600}
.wlm-sum-bad{color:var(--red);font-weight:600}
.wlm-off-note{font-size:11.5px;color:var(--muted);line-height:1.6}
.wlm-rows{display:flex;flex-direction:column;gap:6px}
.wlm-row{display:flex;align-items:center;gap:7px}
.wlm-row select.wlm-user{flex:1 1 auto;min-width:0}
.wlm-pwrap{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px}
.wlm-row input.wlm-pct{width:78px;text-align:right;font-variant-numeric:tabular-nums}
.wlm-pu{font-size:11.5px;color:var(--muted)}
.wlm-rm{flex:0 0 auto}
.wlm-acts{display:flex;gap:6px;margin-top:8px}
/* ARCH_SLIM2：归档详情组末的「未填写」折叠行。
刻意做得比正文弱：这是「确认没漏看」用的兜底信息，不该跟有效数据抢注意力。 */
.dtl-blank{
margin-top:8px; padding:6px 10px;
background:var(--surface-2); border-radius:5px;
font-size:11.5px; line-height:1.6; color:var(--muted);
}
/* ============================================================
COLFILTER_V1：表头列筛选（漏斗 + chips + facets 面板）
2026-09-01
============================================================ */
/* 可筛列表头：文案 + 漏斗按钮并排，hover 时高亮提示可筛 */
.data-table th.col-funnelable { white-space: nowrap; }
.data-table th.col-funnelable .col-lbl { display: inline-block; vertical-align: middle; }
.col-funnel {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; margin-left: 4px; vertical-align: middle;
border: none; border-radius: 5px; background: transparent;
color: var(--ink-4); cursor: pointer; padding: 0;
transition: background .15s, color .15s;
}
.col-funnel svg { width: 12px; height: 12px; display: block; }
.col-funnel:hover { background: var(--surface-3); color: var(--ink-2); }
.col-funnel.active { background: rgba(8,145,178,.12); color: var(--cyan); }
/* chips 条：已选列筛选一览，位于工具栏与表格之间 */
.colfilter-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 10px 0 2px; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.colfilter-chips.hidden { display: none; }
.chip {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(8,145,178,.08); border: 1px solid rgba(8,145,178,.25);
border-radius: 999px; padding: 3px 6px 3px 10px;
font-size: 12px; color: var(--ink-2);
}
.chip-name { color: var(--ink-3); }
.chip-val { color: var(--cyan); font-weight: 600; }
.chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border: none; border-radius: 50%;
background: transparent; color: var(--ink-3); cursor: pointer;
font-size: 13px; line-height: 1; padding: 0;
}
.chip-x:hover { background: rgba(220,38,38,.12); color: var(--red); }
.chip-clear-all {
border: none; background: transparent; color: var(--ink-3);
font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.chip-clear-all:hover { color: var(--red); }
/* 漏斗筛选面板：挂 body 上，position:fixed 由 JS 按按钮坐标定位 */
.colfilter-panel {
position: fixed; z-index: 1000; min-width: 220px; max-width: 320px;
background: var(--surface); border: 1px solid var(--border-2);
border-radius: 10px; box-shadow: var(--shadow-lg);
padding: 10px 0 0; font-size: 13px;
}
.cfp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 12px 8px; border-bottom: 1px solid var(--border);
}
.cfp-title { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.cfp-close {
border: none; background: transparent; color: var(--ink-3);
font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.cfp-close:hover { color: var(--red); }
.cfp-opts { max-height: 260px; overflow-y: auto; padding: 6px 8px; }
.cfp-opt {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 7px; cursor: pointer;
transition: background .12s;
}
.cfp-opt:hover { background: var(--surface-2); }
.cfp-opt.on { background: rgba(8,145,178,.07); }
.cfp-opt input[type='checkbox'] { accent-color: var(--cyan); margin: 0; flex: none; }
.cfp-opt-name { flex: 1; color: var(--ink-2); }
.cfp-opt-count {
font-size: 11px; color: var(--ink-4);
background: var(--surface-3); border-radius: 999px; padding: 1px 7px;
font-variant-numeric: tabular-nums;
}
.cfp-empty { padding: 14px 16px; color: var(--ink-4); text-align: center; }
.cfp-dates { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cfp-datepair { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.cfp-date {
flex: 1; border: 1px solid var(--border-2); border-radius: 7px;
padding: 5px 8px; font-size: 12.5px; color: var(--ink-2);
background: var(--surface); outline: none;
}
.cfp-date:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
.cfp-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 8px 12px 10px; border-top: 1px solid var(--border);
margin-top: 4px;
}
/* 订单/排期/交付/归档中心顶部状态卡区（年份切换器 + 左右两栏大数字，2026-09-01 二稿）。
曾因事故从线上 CSS 丢失，导致状态概览无样式变丑，这里补回。 */
.order-summary { margin-bottom: 12px; }
.order-summary-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.order-summary-title { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.order-year-select {
font-size: 13px; color: var(--ink-2); background: var(--surface);
border: 1px solid var(--border-2); border-radius: 8px; padding: 5px 10px;
cursor: pointer; outline: none;
}
.order-year-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
.order-card-body { display: flex; align-items: stretch; gap: 18px; margin-top: 6px; }
.order-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.order-col-label { font-size: 12px; color: var(--ink-4); line-height: 1; }
.order-col-metrics { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.order-metric { display: flex; align-items: baseline; gap: 5px; }
.order-num { font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.order-col-year .order-num { color: var(--cyan); }
.order-unit { font-size: 12px; color: var(--ink-4); line-height: 1; }
.order-col-divider { width: 1px; background: var(--border); align-self: stretch; }
/* 排期中心「人员排期表」入口卡：只做切换入口，不展示订单/系统数字，垂直居中保持与状态卡同高 */
.subtab-card-cal { justify-content: center; }
.subtab-card-cal .subtab-count { font-size: 13px; font-weight: 500; color: var(--ink-4); line-height: 1.3; }
@media (max-width: 1280px) {
.order-num { font-size: 22px; }
.order-card-body { gap: 12px; }
.order-col-metrics { gap: 12px; }
}